How to handle "consistency" when the meaning of the word isn't…consistent?

Question

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?

Answer 1

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.