"Activity"-like view of 1st page of Inbox, in a dropdown, from Navigation Strip

[solarbird]

Title:
"Activity"-like view of 1st page of Inbox, in a dropdown, from Navigation Strip

Area:
navigation strip, messaging

Summary:
It is currently very easy to configure your Inbox to serve as an activity notification hub. It would be very useful to have a shorted version of the first page of that Inbox be accessible via a dropdown on the Navigation Strip, and allow some manipulation of your Inbox via that dropdown.

Description:
Each line of the proposed dropdown would contain a one line description of the activity. (N replied to [your post|comment], N messaged you, subject "", N posted to group X, and so on). Each entry would contain an "x" dismissal button which would delete the notification from both the Inbox and the dropdown. Clicking on an individual entry outside of the dismissal button would take you to the item about which you are being notified - the message, the comment made, etc - and mark it as read. A "see all" entry at the bottom of the dropdown could take you to the current Inbox view. Currently, using the Inbox as a notification centre results in large numbers of page swaps and reloads, as you go from Inbox to post to Inbox to reply form to Inbox etc., etc., etc., with mark-as-read and delete-item as separate actions across separate pages. Further, it is difficult to maintain (de-clutter, etc) without engaging in that maintenance as a separate task. As a result, those of us who have this issue end up with over-full Inboxes that we tend to bulk-delete. This suggested feature would allow us both to use our Inbox more easily and maintain it more effectively, resulting in improved usability of the service and - hopefully - fewer notifications being stored on the servers.

Poll #18205 "Activity"-like view of 1st page of Inbox, in a dropdown, from Navigation Strip

Open to: Registered Users, detailed results viewable to: All, participants: 37

View Respondents

This suggestion:

View Answers

Should be implemented as-is.
9 (24.3%)

Should be implemented with changes. (please comment)
5 (13.5%)

Shouldn't be implemented.
6 (16.2%)

(I have no opinion)
17 (45.9%)

(Other: please comment)
0 (0.0%)

Comments

[marahmarie]

The thing is, it would force me to use the navbar, which I'm currently not using on my own journal (just on other people's - but I'm not even sure why I have it set like that, because I don't like using it).

If not for that I'd vote yes; a possible "with changes" might be making a new navbar for this alone (or setting the existing navbar to display this alone, instead of displaying all the traditional navbar stuff), which I'll think about as I eat the chili I just got done making). :)

ETA: my "with changes" is that the functionality is coded into the navbar in such a way that it's like an added strip laying across the top of the navbar (but still nested within navbar HTML so it can be styled and even displayed separately, if one so desires).

[solarbird]

I'm not proposing that the current inbox go away; I'm proposing this as an additional view to it. So while you would have to use the navbar to use this new feature, you'd lose nothing.

(This is not an objection to having it be outside the navbar; it just struck me as the most reasonable - and least-cost - place in the current structure. Personally, I use the navbar, despite it being pretty unattractive. I've been wanting to figure out whether it could be customised. That would be nice.)

[denise]

I am pretty sure the navstrip is targetable via CSS, yes! (But if you have specific improvements you think would make it better, mock it up and show us and we'll see if we should change it in general. *g*)

[solarbird]

I am pretty sure the navstrip is targetable via CSS, yes!
That's the impression I'm under, but I'm not a web designer so I do a lot of poke-and-test with Firefox's debugger until I figure out how to make things move around. And so far I haven't figured it out. XD

if you have specific improvements you think would make it better, mock it up and show us and we'll see if we should change it in general.
Seriously? Because from a design standpoint it's kind of awful and I have an art degree and have done graphic design professionally and I am 150% willing to take that on.

(I mean, if nothing else, can we at least get the text baselines to match up? Because the current floaty-random-level text is pretty painful, and stuff like that is why at least one pro designer I know personally won't use Dreamwidth. I have also fixed a bunch of things like that in the style I'm using now, problems that lead to overlapping text, non-wrapping text going behind and under other text blocks, and so on.)

[marahmarie]

(I mean, if nothing else, can we at least get the text baselines to match up?

So, if I'm reading you right, I use custom CSS for the navbar that *might* do what you want - not a lot - just enough to make it more in tune with the design on my DW (which is custom, but not originally made by me, just poked at enough by me via CSS that it no longer looks exactly like the original).

I'll set it to display on my journal in a few minutes and keep it that way (showing when you click through) until you get to see it - tell me what you think! The CSS I'm using (if it helps you do anything design-wise with the navabr) is the following (as is anything below or in my style sheet that starts with #lj_controlstrip):

#lj_controlstrip{background:#353533;padding:.5em 0;border-bottom:1px solid#444}#lj_controlstrip_userpic{margin:.6em 0 0 0}.logged-out.has-navstrip #lj_controlstrip_userpic{visibility: hidden;margin-left:-6.6em}#lj_controlstrip_actionlinks img,#lj_controlstrip_user img{height:12px;width:12px;vertical-align:text-top}#lj_controlstrip a,#lj_controlstrip a:hover {text-decoration:none;border-bottom:1px solid#B82E2E!important}#lj_controlstrip input,#lj_controlstrip select,#lj_controlstrip_login,#lj_controlstrip_actionlinks,#lj_controlstrip_user, #lj_controlstrip_userpic a,#lj_controlstrip_userpic a:hover,.cutTagControls a:hover,.icon-links a:hover{border:0!important}#lj_controlstrip_search select{display:inline-block}

Copying/pasting into another DW layout might not work perfectly because I don't always keep all my CSS chunks for different parts of the page in one spot (that's most of it, above; I just can't guarantee that's all of it without going through the rest of my style sheet), so if you run into any funkiness in trying to use it, let me know.

[solarbird]

Wow, yeah, that's a lot better just from a baseline lineup standpoint, and with a bunch less CSS than I had to use to make that happen. Nice!

I did a bunch of other stuff too (see my journal if you want, I've got the navbar on - or see the .png files I linked) but yours by itself is a big basic clarity improvement.

also, i must note that it's part of a bigger problem

[solarbird]

Cleaning up the navbar would be only a partial solution to some of the varied UI problems. For example, the navbar orders basically the same set of options as the top banner of the profile/customisation/new post/new comment pages, but in a different order, layout, and placement on the page (far left vs. mostly far right). That - as well as the way it just looks completely different - is one of the reasons it's always felt tacked on.

It might be worth having the "use navbar?" option replace the banner on all of those other pages when the navbar is enabled. This creates consistency of experience. But I have no idea how problematic that might be on the dev side.

(From a development standpoint, I think it might even be worth considering a navbar which can also serve as the display engine for all of these cases. Swap out the backgrounds depending on context, but render the rest of it consistently across the various uses. And have the "use navbar?" option behave has it does now, but in the background be using the same code across all cases.)

Re: also, i must note that it's part of a bigger problem

[denise]

Oh man, I'm trying so fucking hard not to make fierce grabby hands at you right now, you have no idea. We don't have a lot of graphic design experience in our core team, and it definitely shows! (We're a little better at UI/UX design, but even with that, a lot of times we're winging it.) I'd love it if you put together mockups of a few potential options you think would work better -- from "minor tweaks to make it look better/present information better but not change things massively" all the way to "completely redesign everything from the ground up", even, if you wanted. We're not proud; we're happy to consider improvements on just about anything. :)

(If you have style fixes for text overlap and block problems and the like, meanwhile -- for any of our styles, I mean, not just for the one you're using -- I will make grabby hands over those, too! Overflow display bugs are always annoying, because no matter how good your test-case journal is during development, there will always be stuff cropping up once a style hits the Real World with Real World Data. Ditto if you have suggestions or redesigns for other pages. LOOK, WE JUST MAKE GRABBY HANDS AT ANYONE WHO SO MUCH AS SAYS THE WORD 'DESIGN' NEAR US OKAY)

There are a few caveats:

* The thing that does the navstrip on journals and the thing that does the menus/top quicklinks on site-skinned pages are generated in totally different places, so they can't be merged. (And not every site skin has the action links in the same places -- for instance, Celerity puts it on the left side, as do Gradation Horizontal and Gradation Vertical. Tropo Red/Purple are actually the only ones that put the quick action links on the right, in fact.) We are totally up for considering a new site skin or changes to the existing ones! But that all runs through a different system.

* We use Foundation as a framework on site pages -- like, the site skins themselves are not done in Foundation, and neither are journals, but the individual page layouts are. We try to standardize as much as possible and use everything entirely out-of-the-box with minimal customization, because the more you fuck with things, the more you run the risk of introducing bugs. So we can't always match a wireframe or a mock exactly: it all depends on what you can coax Foundation into doing.

* Sometimes, things are less optimal than they could be, design and display-wise, because in a contest between "does this look good" and "is this accessible to people who use screenreaders, have low vision, navigate entirely by keyboard and can't use the mouse, etc", accessible wins every time. I mean, don't get me wrong, it's definitely possible to do both; accessibility and aesthetics aren't mutually exclusive. But in the event of a conflict, accessibility always wins.

* Our users (and I say this with great affection and the acknowledgement that I am totally also one of those people) are exceptionally persnickety about both how things look in general and about things they're used to changing. This doesn't mean that we can't/won't change or redesign things, but it does mean that when we're dealing with heavily used/frequently visited pages, or with things like the site skin that display on so many pages or the navstrip that displays on so many journals, we usually try to run things through a few rounds of opinions/feedback. Sometimes the feedback that we get can be really demoralizing for the person/people who designed the first version, because people aren't always restrained about how they deliver their feedback! So just be aware of that, heh.

* We don't have a super great process for design discussion/work (mostly because we don't have a lot of people wanting to do design) -- we used to use dw_design, but usage kind of trailed off. (People weren't using it because people weren't using it, yadda.) If you're interested, though, I could figure something out.

(Oh, also, I forgot to mention: the reason the text isn't vertical-align consistent in the navbar is because it's done with tables and the different elements in the leftmost and rightmost table cells (logout button, mini-icon, search box) nudge the text down a bit differently. Not unfixable, with a bit of tinkering, but the perpetual line of thought goes something like "it would be better to redo the code so it doesn't involve tables, and if we're doing that we might as well spruce it up a little or improve what links/modules are in it, and if we do that we're going to have to find someone to redesign the thing, ugh, let's just go do something else on the priority list instead". That line of thought happens a lot with shit that needs redesigning, heh.)

Re: also, i must note that it's part of a bigger problem

[solarbird]

heh i didn't see this before i posted my rough drafts below. but hey! css can apply to tables at least a decent chunk of the time. But yes the navbar really needs to be redone in proper CSS because yikes some of this was hard to get to work.

anyway below is a rough draft (that's actually live on my style).

also live on my style are a bunch of CSS overlays I did to fix the wrapping problems and stuff. my profile is public, if you can see my custom CSS overlays just grab 'em if you want. some of it's just math errors that I fixed.

Re: also, i must note that it's part of a bigger problem

[fiddlingfrog]

I think it might even be worth considering a navbar which can also serve as the display engine for all of these cases

This was the best part (in fact, I think it was the main goal) of the new LiveJournal site scheme introduced a few years ago. Having a consistent UI that tracks across the site, and can be adaptable both to the relationship you have with the page you're viewing and the size screen you're using would do a lot to improve the general DW experience.

Edit: Hmm. Okay, looking closer I see that the top banner and the navigation strip are still separate parts, but that they've been designed to fit together better with no repetition of links between them. Also, the top banner has taken the place of the navigation strip as the element that floats at the top of all page views.

rough first draft: the simple cleanup

[solarbird]

This is a rough first draft of a minimal navbar cleanup. Reading page view, Own journal view. This is what I was able to do in CSS through the custom-CSS interface; it's now what I see live on the site when logged in.

In no small part, this is just getting text horizontally aligned with other lines of text, regularising sizes of objects, and ditching some pretty heavily dated WoAh-3D-bUtToNs. I also lost a horizontal divider, floated the search box out to the right, and re-margined the user icon so that the margins are even.

There really should be less space between the 49px user icon and the text to the right, but it's 2am and I'm sleepy. Also, the reload-in-light text is a pixel too high, see also sleepy, and really, that reload-in-light button should be with the other "viewing" actions anyway, and not the search bar, since it's another viewing action and not related to search at all. But I don't think I can do that with CSS against the generated code.

All of this is in the service of reducing visual clutter. It's also still a rough draft, because even besides the already mentioned incomplete bits, I can't fix the irregular spacing on the leftmost menu (Home / Post / Reading etc) because there's no way to hook into those in CSS that I can see. But that should be sorted out too.

This is, again, the minimal changes approach. It doesn't address the other issues I brought up of consistency across pages (except for moving the search box closer to where it is in other layouts), menu ordering, and so on, but it's less immediately visually dissonant and I'm pretty sure would be zero impact on users if implemented. But it leaves a lot of other problems unaddressed.

eta: Here, I made an A/B comparison between the current (as seen in another user's style) and my first-draft cleaned up version (as seen by applying my style to that user account).

version 2 roughs

[solarbird]

Here are improved version 2 roughs. I think the differences are meaningful so just jump straight to these:

A/B comparison (another journal, current navbar vs. my style applied navbar)

Navbar, journal view

Navbar, reading page

Re: version 2 roughs

[marahmarie]

Huh, so I posted my code before seeing/reading through the rest of this thread. Your mockups look really good! I like how you stick with the system style but still improve gradients, text size and alignment and button styles, which is *a lot* more than I've done. I've basically done a lot of work to get the navbar to blend in with the rest of the custom layout and so it resizes properly on mobile, but not too much else.

Re: version 2 roughs

[denise]

Oooh, I really like these. Have you tried it on a journal when you're logged out?

thoughts on a more substantial change

[solarbird]

Anyway, that's about where the least-impact version stands for me.

I am also thinking about a more-changes version as well. As I see it, functionality is almost currently grouped by:

1) (far left) Who you are
2) (centre) Where you are/what you're seeing
3) (far right) look for things

...and solidifying that would both make the navbar more useful and easier to understand.

Keeping that in mind: Group 1 is pretty reasonable as it is. Group 2: the style viewing selector really should be with Group 2, not Group 3. Group 3 could pick up the "Support/Help" link that's missing compared to everywhere else, or some other similar bit of functionality not currently exposed. So we could talk about things like:

Group 1: Basically okay, I think. But if the user is not logged in, add a top-level "Join" option to the Login group which replaces the User group in this position, because right now, there isn't one, and... yeah. Should be.

Group 2, Own Journal View: In addition to the above notes (which apply to all Group 2 views), I'd lose "Invite someone" and replace it with "Share this." It's something that refers to where you are at the moment and accomplishes a the goals of "invite someone," depending upon how you handle the sharing. (The "so and so shared this with you" mail could have a "Join Dreamwidth" link, etc.)

Group 2, Reading Page: Add an "all but feeds" option in the dropdown. Personally I'd find that useful and you can already build that URL yourself (and I have a separate bookmark for it), but maybe that's just me.

Group 2, Individual Entry: Again, lose "Invite someone" in favour of "Share this." Change "your journal" to "your post" if on your journal, or to "a community post" if in a community. Possibly add simple "previous" and "next" icons, since it is, after all, a navigation bar.

Group 3: Keep search as is, add links under it to Help | Support | FAQ (maybe), other functionality, since the view options would be moved to Group 2.

If done tightly enough, there are opportunities to add additional functionality hooks as well. For example, in Group 3, you could have a link to the Directory Search page, which could be given a name like "Advanced Search" or "User Search" or "Member Search" to distinguish it as separate to the simple keyword dropdown search.

I could play with this if it's of interest. This would be more of a true mockup process instead of a "go ahead, implement it then take screencaps" process, but that's to be expected when adding more changes.

Re: thoughts on a more substantial change

[denise]

I really like that grouping, and it makes a lot of sense!

I'm 100% for getting rid of the current multisearch box in group 3 and replacing it with a textbox that calls out to https://www.dreamwidth.org/search (the directory is, well, a mess, and most of the options in the multisearch box are less useful than they were in 2001), with a small "member search" link underneath for the directory...

Anyway, yes: I would love to see mockups, since you've articulated a bunch of stuff that annoys me subconsciously about where shit is in the navstrip. (Which is still the version LJ had at the time of our fork, with tweaks over the years here and there to shove in more stuff where it would fit: that's why the style stuff is in Cell 3, because the relationship info in Cell Two can get really long.)

Views I'd want to take a look at:

* the front page of your own journal while you are logged in
* the front page of a journal when you are not logged in
* the front page of someone else's journal/a community while you are logged in (with one each of both the shorter relationship texts -- "You subscribe to denise", etc -- and the longer ones -- "You and denise have mutual subscriptions and you have granted access to denise" or whatever)
* your own reading page (logged in and not)
* someone else's reading page (with both short and long relationship text)
* individual entries

I'd also like to see how it behaves on both small viewports and large ones, but that can be decided by whoever implements it. (Although if you want to come up with both desktop and mobile versions, I'm pretty sure we do have the technical capacity to choose which to show to people based on their device.)

Don't feel like you have to keep the three-cell concept if you think something else will work better. (Several cells and then the relationship text centered across the entire width of the view, top or bottom, is something I've thought of a few times!) I'd also prefer if it were no much larger than the existing 60px height, although that might be tougher.

[marahmarie]

I'm not proposing that the current inbox go away;

I know, but I'm actually excited about the idea of having an Inbox strip above or below the navbar strip, so the top of the strip, say, is the Inbox, with the original navbar stuff showing beneath that, or any variation on that theme that sort of lets the Inbox nav be styled separately.

My idea for it (assuming this gets implemented; I hope it will) would be to sort of display:none everything navbar related just for my view of it, but leave the Inbox strip of the navbar visible, because I absolutely love the idea of having it handy on every page as I browse Dreamwidth.

[brainwane]

Currently, using the Inbox as a notification centre results in large numbers of page swaps and reloads, as you go from Inbox to post to Inbox to reply form to Inbox etc., etc., etc., with mark-as-read and delete-item as separate actions across separate pages.

I hadn't thought about this until you mentioned it but maybe this is indeed why my Dreamwidth inbox is stuffed to overflowing and I don't interact with it much!

[susanreads]

I wouldn't use this, but as long as it's optional I don't care. But Each entry would contain an "x" dismissal button which would delete the notification from both the Inbox and the dropdown sounds like an accident waiting to happen. Deleting things from the inbox is permanent, isn't it? I can see people deleting things when they meant to get rid of the dropdown, especially if it appears on the navbar without having to be configured first.

[solarbird]

I went back and forth on that when thinking out the proposal but "eliminate from dropdown but do not delete" would require adding an additional flag and make it harder to implement.

[solarbird]

All that said, the little red "X", while common, is not universal, and having it be a "delete" button is fine by me too.

[anaraine]

I'm leaning towards 'no' because of how I use the inbox myself - but honestly, the biggest detractor for me is the Each entry would contain an "x" dismissal button which would delete the notification from both the Inbox and the dropdown. I'd be clicking that 'x' all the time to dismiss the notif - and then swearing a second later as I realized I also deleted the message. Which is a me problem, I get it, and I could probably retrain myself eventually. But it also sounds like a hundred Support requests waiting to happen, with no way to retrieve the deleted messages/notifs.

[solarbird]

I'm not proposing changing anything about the current Inbox, and have no plans to do so. I'm proposing adding an additional way to access it, to make it more usable for people who use it like I do.

Again, I am proposing no changes to the current Inbox. This is an additional view only. And if people want to make it something that can be enabled/disabled, that's fine too.

[anaraine]

My bad - thanks for the clarification.

I still have a bit of beef with how easy it is to delete, but I get that's part of what you're chasing after - so maybe this feature just isn't for me. (In which case, I'd love to be able to toggle this on/off. Which I know, decision fatigue, but I'll change my vote to "with changes" and wish you the best.)

[solarbird]

Also, I'm not wedded to the little X, it's just something commonly used. A button that says "delete" would be acceptable as well. Just less clean.