26

We are currently beta testing a new top bar design on meta for the Stack Exchange network.

There is an ongoing discussion about "consistency" and the top bar behavior when one clicks on an element. Essentially, we have five different kinds of elements:

  • A logo that traditionally would be expected to link to the homepage but is instead a drop-down
  • Icons that result in a drop-down when clicked
  • A large clickable area that includes the avatar and also numbers that acts as a link
  • Text links that act as links
  • A text link that acts as a drop down (not added, but help will have three choices when clicked)

My current solution defines consistency as resulting in an action that one would expect.

  • Since the logo often links to the homepage, I think it's necessary to have a triangle to indicate that it is instead a drop-down
  • The clickable icons behave like the inbox notification icons of any other website, so therefore do not need a triangle
  • The large clickable avatar area, like many sites, results in being directed to the profile page. Again, consistent to my definition.
  • Since the avatar area is large and clickable and acts as a link, then the review link should behave similarly, and does
  • Finally, the help link doesn't have a triangle. I don't want to put one here, and I think it makes sense because clicking on help results in you getting a choice (soon) of three help options. One may not expect the drop-down, but it's essentially irrelevant.

The problem here is we have a conflict between visual consistency, type consistency, and behavior consistency. How should one deal with these conflicts if different from above?

3
  • Applauding for going to UX. Related (but not a duplicate): ux.stackexchange.com/questions/48166/… Nov 18, 2013 at 19:26
  • Agree that consistency is very important, but as you point out there are various different methods of being consistent that are mutually exclusive. And the most important measure of consistency is "what will the user expect?". I think you hit the nail on the head with explaining the expectations, so I agree with it as-is. The "help" drop down will be perhaps inconsistent with expectations, but not in a way that will bother/confuse/jar users, so no problem there either.
    – Ben Lee
    Nov 19, 2013 at 2:06
  • 1
    Similar question: Drop down consistency needed on navigation on site header?
    – unor
    Nov 19, 2013 at 10:35

1 Answer 1

20

Fulfilling user expectations is a fine goal, but it’ll only get you so far. Unexpected results are not themselves bad. Sometimes they are even delightful (“Surprise!”). However, unexpected things in a UI are a sign of a usability problem. To resolve conflicts between kinds of consistency, you need to analyze the situation for the impacts of violating expectations and choose the design that minimizes the negative impact.

Consider your case of inconsistent use of dropdown arrows. What are the impacts on the user?

  • Re-orientation cost. If I understand you correctly, the users have to click on the control to accomplish their intended task no matter what. Once they do, maybe they didn't expect a dropdown, but they are proceeding towards their goal and know what to do next. The inconsistency is apparent once the user clicks on the control, which the user has to do anyway. There is no error. It’s a more-or-less self-documenting inconsistency. The cost is the brief mental re-orientation the user needs to do to the unexpected appearance of a dropdown. I think we agree that's a pretty minor impact.

  • Navigation error. However, so far we’re only looking at the use of the dropdown control itself. What about other controls? The problem with excluding the dropdown arrow is that you’re teaching users that dropdowns don’t have arrows. Users may thus click on a link that isn’t a dropdown expect they will get one. You’ve created a “contradiction” –two things that look the same (no arrow) but mean something different (may or may not drop down). That’s usually a serious form of inconsistency. In this case, you may get users clicking on non-dropdowns thinking they’ll get a dropdown (e.g., they may click on Chat thinking they’ll get a quick glance at options for chatting or who’s chatting) but instead get moved to page they didn’t want. Now your UI has induced an error that that takes time and effort to recover from.

  • Memory burden. None of this would be so bad if the user could use the context to set expectations (like “X means it’s a dropdown control on this site”). However, because the same-looking controls act differently on the same page, context is very little help. The user has to memorize for each control whether it’s a dropdown or not. You’re introducing an “internal” inconsistency (inconsistency within an app or site), which is generally more serious than an external inconsistency (inconsistency with some other site, convention, or metaphor).

For more on performing this analysis, see Achieving and Balancing Consistency in User Interface Design.

So the impacts are re-orientation costs, navigation errors, and memory burdens. In sum, they aren’t huge impacts (the user shouldn't lose any data, for example), but they aren’t trivial either. What are the benefits of inconsistent use of dropdown arrows? Frankly, I don’t see any.

You refer to “visual consistency,” by which I think you mean “make things look the same just so they look nice and neat.” That is, it’s for aesthetics. For instance, you don’t want Help to have a dropdown arrow because none of the other controls beside it have a dropdown arrow (because they don’t drop down). If that’s the benefit of inconsistent use of dropdown arrows, I don’t think the benefits are worth the impacts:

  • First of all, a little arrow here or there isn’t going to wreck your symmetry that much.

  • Secondly, users aren’t going to notice or care how “bad” it looks because they’re too busy using the site. They’re not like you, the designer, staring a long time at a mockup, like it were a painting in a gallery, trying to decide how much you like it.

  • Thirdly, there is enough flexibility in graphic design that with some imagination, you should be able to find a pleasing way to deal with consistent use of dropdown arrows. Maybe you can even turn asymmetry into something visually positive, like the Raymond Loewy did with the hood of the Studebaker Avanti.

I commend you and the other Stack Exchange designers on re-working the design with attention to consistency. The current design is rife with annoying inconsistencies that are embarrassing for this site dedicated to UX.

2
  • 2
    The only thing I would take issue with is "users have to click on the control to accomplish their intended task no matter what" - not true if you want to open a link in a new tab (e.g. with middle click). I feel like there is a significant benefit to knowing what a link/clickable area will do before interacting with it. Nov 21, 2013 at 12:56
  • 2
    Indeed. It really annoys me when I middle-click what looks like a link, intending to open it in a new tab, but instead it performs some operation on my current view instead.
    – AlexC
    Nov 21, 2013 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.