A more comprehensive top-bar redesign proposal

What we have now (left to right)

• The site logo. Clicking on it goes to the domain root (e.g. https://meta.codidact.com).

• A "Users" button, which routes directly to the /users page. (Stack Exchange stuffs its equivalent into the left sidebar, which we don't use.)

• A "Search" button, which produces a drop-down with a search bar and basic search advice (or, without JavaScript, routes to /posts/search).

• A "Help" button, which routes directly to /help.

• An unlabeled grid icon, which is the button for /dashboard (a page that lists all communities; effectively copied and pasted across the network, so that you get site-specific navigation but the same main content).

• An inbox icon, which displays a drop-down of notifications (or routes to /users/me/notifications).

• A button consisting of the user's avatar and reputation score, which routes to /users/me except it uses the actual user ID.

• A button with a small icon of a downwards triangle inside a box, which is the "site switcher" (a dropdown menu with links for other communities). With JavaScript disabled, this does nothing (tries to route to #).

• A "Sign Out" button.

Things I like

• The "Users", "Search" and "Help" buttons are clearly labeled and look good, and of course it's obvious how to sign out.

• The provided functionality is fairly comprehensive without being redundant or excessive.

Things I don't like

• It really bugs me that the search input isn't just directly there in the top bar. The "Search" text looks like what I'd expect to find as placeholder text in an input field, but it misleads. There's plenty of horizontal space, even on a fairly narrow screen, and more could be made. (Here I do not comment on the mobile experience.)

• The dashboard and inbox icons are not obviously interactable nor is it clear what they mean. The inbox icon in particular looks to me more like one of the ribbon spools my family's electronic typewriter had in the 80s or 90s.

• Clicking the site logo to go back to the main page is just not useful (and it's also not obvious that the functionality exists). It's functionally the same as the "Q&A" link that appears on each page, as the content of / is the same as that for the main category.

• The order of elements doesn't make a whole lot of sense. In particular, the site switcher is deceptively placed. It's separated from the related dashboard button, and visually just looks like it's indicating drop-down functionality of a different button — specifically (due to placement) the /users/me button. Except that button is actually separate, and doesn't have a drop-down.

• There is a general lack of visual consistency. The "Sign Out" button looks different from everything else, and might be made redundant if there were an actual user drop-down / "avatar menu". Some buttons are labelled and others aren't. Multiple buttons open drop-down menus, but only the site switcher visually indicates that it will do so.

• The boundaries of buttons aren't clear until they're hovered over. I understand that some find this aesthetic more "clean", but it's the main reason for buttons "not being obviously interactable".

Proposals

1. Put lightly shaded round rectangles behind buttons. Or make drop shadows permanent. Or something. I'm not an artist.

2. Give a "small triangle inside round-rect" indicator to every button that opens a drop-down.

3. Add a drop-down to the user button. Since our culture de-emphasizes reputation points, instead of putting a reputation score next to the avatar, put the text "You" (and then the drop-down indicator). This menu would include a link for notifications (having direct access to them is not that important, although maybe the "You" button could gain the unread-notifications badge), possibly other options (from the categories at the top of the /users/me page), and a "Sign Out" option. For logged-out users, the "You" button could simply be replaced with a standard "Sign In" button. Without JavaScript, the "You" button would still link to /users/me; this page should have a prominent "Sign Out" button near the top (to address trichoplax's concern). (For moderators, this would also include the Mod entry.)

• Merge the site switcher and the dashboard button into the logo. With JavaScript disabled, clicking here would go to the dashboard. The corresponding drop-down menu would be like the existing site switcher, except with a link to the dashboard (perhaps something like "Communities (see all)") at the top.

• Put the search input directly in the top bar. This is more intuitive and saves a click for everyone.

• Re-order everything: Logo / site switcher ("Network button"), Users button, You button, Search bar, Help button. Now the Help stands out more, and the other buttons are in a logical order on the other side of the search bar.

The users button could possibly also get a dropdown to expose some of the /users functionality — or perhaps to give quick access to profiles for mods/staff, or for users that you've marked as "friends".

posted 2 days ago

CC BY-SA 4.0

Karl Knechtel‭

26 37 169 28