Contextual User Interfaces
2009.03.23
As our applications and websites become more and more complex it becomes even more important to ensure that you apply some level of contextual user interface cdesign to ensure your users are able to use it with ease.
There are plenty of examples of contextual user interface design on the web and if done correctly, you won’t even notice them, but without them you’d end up feeling frustrated and lost.
Limit choice, maximise speed
Google Calendar has an excellent contextual example of how to limit choice and maximise speed.
Notice how the list of time zone’s changes depending on the country you’ve select above it? People don’t want to spend their time reading through hundreds of options and deciding which is the best fit for them. Where it makes sense, always limit choice. Not only does it improve the experience of your interface but it streamlines it so that users only need to focus on the bits that matter to them.
It’s worth noting however that some users DO want to see as many options as possible, so always give them a way of doing this. Google do this by offering a simple “Display all time zones” checkbox. Very simple, but very important.
Help users get back on track
When things go wrong in your application, whether user or machine created, always help the user get back on track. One of the most common examples of this are login screens. I’ve lost count of the amount of times I’ve forgotten a combination of usernames/passwords, and when this happens I want an easy way to get going again.
For something like a login screen, presenting users with a simple link to get their password emailed to them is the answer. Welcome to contextual user interface design. Giving users what they need, when they need it.
Don’t rely on menus
At the bottom of each page on Thumbslap there is a small footnote that simply says “All dates & times are GMT”. This is a useful bit of information due to the nature of the site, but what about users who realise they need to change their time zone? They could click on the Settings link near the top, but wouldn’t it be much better to give them a way of doing it without changing their thought and requiring them to hunt down the page that will let them do this. This is why I added a simple link directly after that statement called “Change”.
If you print a setting on a page that the user can control, give them a quick and easy way to edit it without having to navigate menus. There is nothing more frustrating than knowing a setting is wrong in your profile and not being able to change it without going through a list of menus, hoping to stumble on the right page.
User efficient, not machine efficient
There are plenty of other examples of where contextual user interface design can really improve the efficiency of your interface. Remember that you should aim to be user efficient, not machine efficient. Don’t get hung up on the idea of a link or option only being accessible from one place. Make it accessible where it makes sense, not just where it fits in a menu or structure, and your users will thank you.
UPDATE: Mark Notess made an excellent observation in the comments below about programmers not putting in enough time and effort to ensure the interface is as easy to use as possible.
To your “user efficient vs. machine efficient” I would add “programmer efficient”. I think many cumbersome designs are simply the result of programmers not putting in the time so users don’t have to. We want user efficient designs rather than programmer efficient or machine efficient ones (as long as it isn’t so machine inefficient that it slows users down). Simple things, like with travel when you have to enter a start and end date for hotel stays or airline reservations: when you put in the start date, you shouldn’t have the option of putting in an end date that precedes start date!
Simon Brent2009.03.23 @ 9:28 am
I’d agree on most points, except that I don’t want you to email me my password. I want you to email me a new password. Emailing me my current password means you have it stored in plain text in your database.
Chris Mahon2009.03.23 @ 9:51 am
Hey Simon, Thumbslap actually emails you a new password as it is stored securely in the DB. Thanks for letting me know, I’ll make sure I change the text so it is clearer :)
Jeffrey Martin2009.03.23 @ 11:42 am
Maybe I’m misunderstanding you, but if a password is truly secure in your DB, then you don’t know the password either, and therefore can’t mail it. It should be stored as a salted hash. If someone forgets their password, then they should receive an email with a verification link. they click that link and make a new password themselves. Any other way is insecure, as far as I know.
iWeb Blog » iWeb Tech News Highlights: Internet advertising, XSS, coding faster, contextual UI, and iPhone applications2009.03.23 @ 12:16 pm
[...] Contextual User Interfaces [...]
iWeb Blog » Nouvelles Techno iWeb2009.03.23 @ 12:26 pm
[...] des interfaces utilisateurs contextuels [...]
Sean2009.03.23 @ 12:28 pm
Good article, but I must protest on the colour scheme on your blog. The light grey on white is definitely not easy to read.
Lorenzo2009.03.23 @ 12:45 pm
Invoice Machine has some good example of contextual UI
http://invoicemachine.com/home
L.
Chinmay2009.03.23 @ 1:24 pm
And what happens if someone puts in your username by mistake? That way, you changed a password when the user didn’t want to! Besides, why give an impostor more information than he can get otherwise (i.e. the username is correct)
Chris Mahon2009.03.23 @ 1:44 pm
@sean, thanks for the feedback, I’ll look into it. Looks lighter on my windows machine at work and darker on my Mac at home.
@lorenzo, nice link and looks like a useful application. Might try it myself! :)
@chinmay, fair point but I don’t think there isn’t a perfect solution. I think it’s best to design for your users and common scenarios, not for impostors/hackers and scenarios that are less likely to happen. Users who forget their username/password combination will be less frustrated by this process if the website gives them feedback on which bit of information is incorrect and make it quicker for them to get back on track, using your application/website. A solution could be to only reset the password once a user has clicked a link provided in the email. That way, users can ignore the email if they didn’t request it and act on it if they did. Sound better?
DypecymnFep2009.03.23 @ 8:17 pm
Great…
Chris Mahon2009.03.24 @ 7:25 am
Sorry Jeffrey, missed your comment in between the others. The password is stored as a salted hash so yes, I can’t send it directly in the email. The process you mention is what I am considering to make it more secure :)
My daily readings 03/24/2009 « Strange Kite2009.03.24 @ 11:35 am
[...] Contextual User Interfaces | Chris Mahon – UI Designer [...]
Mark Notess2009.03.24 @ 1:07 pm
I like the concept, but calling this “contextual design” may lead to confusion as the term also refers to a well-known design *process*. Could we call it contextual user interface design instead? Perhaps the fault is the word “design” because it can mean both an activity as well as the result…
To your “user efficient vs. machine efficient” I would add “programmer efficient”. I think many cumbersome designs are simply the result of programmers not putting in the time so users don’t have to. We want user efficient designs rather than programmer efficient or machine efficient ones (as long as it isn’t so machine inefficient that it slows users down). Simple things, like with travel when you have to enter a start and end date for hotel stays or airline reservations: when you put in the start date, you shouldn’t have the option of putting in an end date that precedes start date!
Chris Mahon2009.03.24 @ 1:49 pm
Hi Mark, thanks for your comments and some excellent points! I totally agree with your point about programmers taking short cuts to save themselves time, when in fact they should be saving users time. I’ve edited the post to reflect this :)
Interfaces de Usuario Contextuales « Blog de Francisco Velázquez2009.07.13 @ 1:32 pm
[...] a comment » Interesante aunque breve apunte sobre el concepto de interfaces de usuario contextuales (via). El me lleva a buscar un poco más de información por readwriteweb, y a recordar a la [...]