Context Over Consistency
Traditional user interface (UI) principles dictate that you should keep your UI elements consistent. If you’ve used this navigation here, use the same format in the other places. This allows people to become familiar with your UI and thus, logic dictates, make it easier to use. But keeping things consistent may not be the best way to go in many cases.
There is something very important we should be thinking about when designing our user interfaces. Context. Context dictates what people need, and indeed expect to see in any given UI screen.
Things are much easier to understand with examples, so let’s see some pictures.
Here’s a picture of the iPhone keyboard:
On the left you have the standard iPhone keyboard, and on the right is the keyboard shown when using the Safari web browser. Notice the difference? The space bar has changed to a full stop, a slash and a “.com” key. The “Return” key is now “Go” and the first character in the extras is an “@”.
The reason for these changes are obvious. Website addresses don’t have any spaces so there’s no need for a space key. Instead, we’ve got the handy full stop, slash and a “.com” key. It makes sense to have these keys in this context. Give the user what they need, not what you have somewhere else in your app.
Here’s another example. This is from a 37signals web application called Backpack. Here are two pictures of the account settings page:
We’ve got two options when logging into Backpack. We can use the traditional username and password pair that most apps use — or we can use the modern OpenID authentication.
The screen never shows all the input fields at once though — only the ones you need. Click on the alternative login method link, and the fields switch right there in-front of you.
This method ensures the amount of information shown on the page is kept to a minimum to keep thing simple and relevant.
Here’s another example. This is the navigation bar at the top of the popular social news website Digg:
The first is the standard navigation bar used across the site. The second is the same navigation bar, but displayed on the new account registration page. Notice that all the navigation elements are gone, apart from the core links and a link back to the main content. Why were the links taken off the registration page?
Simple — the registration page is there for only one purpose: to get the visitor to make a new account. They don’t need to see any of the other content in this context. Indeed, other content may actually distract the visitor from the task at hand, which may negatively affect your conversion rate.
Digg cleverly removes navigation elements from their registration page to keep things simple and give focus to the content relevant to making a new account.
Think about what the visitor needs to accomplish their task on any given page or screen. What do they expect to see? What tools do they require? What don’t they need?
Remove the stuff people don’t need — leave only the essentials. Less clutter makes the interface easier and quicker to use because people don’t have to scan through many elements. Less clutter results in a clean interface that has clarity. Knowing what context each UI screen will be used in helps you make the decisions about what to keep and what not to.
i actually find the inconsistency of the iphone keyboard aggravating. i use my iphone all day everyday and having to stop and think ok why are the keyboard keys not where i expect them to be, drives me batty. a keyboard is a keyboard. i believe consistency is a good thing here, but that is just me.
@chuck: I agree with you, this may not apply to other fields, but as far as the concern is iPhone, people usually much use it inuitively with muscle memory so its best to have same stuff in all places.
Hi chuck and Rudolf,
That’s very interesting. I personally like the way it adapts to the situation you use it in and don’t have a problem with it. I think the biggest issue there is the lack of space — you really need that slash and full stop on the browser keyboard, and it appears Apple didn’t want to make any other keys smaller.
Still — it’s interesting to see that your muscle memory affects it and you’d rather have the standard keyboard in all places. I think that’s another thing to consider when thinking about context based UI — are people so used to the item in question that they will expect it to be the same?
@chuck, rudolf and dimitri
Testing vs. Rules…
I think what all your answers show is, no matter what the rule, look to real users working your interface. There is probably not one rule (apart from don’t use white text on white background) which does not apply in every context.
Great article! Thanks a lot.
I agree with Chuck, I also find the iPhone keyboard aggravating and confusing, I would like some consistency here.
Also, coming from the PC world and owning my first iPhone, I find tons of stuff that are confusing and clearly different between PC and Mac way of thinking and understanding what usability is. It just illustrates that people want something they are familiar with even if it’s not as user friendly as it can be. But this is another topic…
Another thing to think about is the efficiency - as a web developer, building different UI for different sections of the site is time consuming - most clients would just not pay for that.
But this is a great thought provoking article. I try to remove clutter as much as I can and build sites that are user friendly, but consistency is still very important.
I echo the aggravating part as well. CONSISTENCY (as indeed a “keyboard” is a keyboard”) would have suited my fancy better as well in this case.
While I appreciate what they were trying to do … I thought it created confusion more than clarity. While I GET IT FIGURED OUT… I actually sat there staring at those pictures for a minute figuring what keys went where!
I’ve never looked for the space bar in safari on the iPhone I’ve never missed it. Even if my muscles remember the space is there, they’ve never needed to use it. I believe apple made the right call for the majority of the users. Now, if we could just get a horizontal keyboard for SMS.
I agree with you Jon, because you never use spaces in the address bar it doesn’t matter if you have muscle memory for the space, because you never need use it. Plus you can always hit the bottom left key and use punctuation like usual anyway, right (not positive, but I’m pretty sure it’s the same).
[...] I’ve talked before about the importance of context and how it should guide your design decisions. I think that adapting to any given context is smart, [...]
[...] 之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。 [...]
[...] 之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。 [...]
[...] 之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。 [...]
[...] 之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。 [...]
[...] 之前我谈过关于上下文的重要性 ，以及它应如何指导你的设计决定。我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。 [...]