Smashing Magazine we smash you with the information that will make your life easier. really.

Evolve Your User Interface To Educate Your Users

By Smashing Editorial, January 16th, 2008 in How-To | 60 Comments | Forum

by Dave Shepard

The Web has changed. This isn’t your neighbor’s nerdy kid’s internet anymore. Now the Web is home to your mom, your grandma and your technophobe sister. With computers as common a household appliance as televisions now, who might be using your web-application has expanded beyond the realm of just the power user.

Complicated menu systems, alert dialog messages that lock you out of the browser and flashy but confusing layouts aren’t necessarily going to help you make conversions. The Web user demographic has changed and to make your web application appeal to the masses your user interface needs to teach and to guide.

User Interfaces Should Teach

User interfaces need to teach your user how to use your application without resorting to a help screen. Many developers think that a help section will suffice for teaching users how to operate most any application, but this is not the case.

The help section of most applications, Web-based or otherwise, end up being used by the power users who are already trying to figure out every nook and cranny of the application. The proper way to help users understand how your application works is to bring the help section to them and in a format that can easily be understood.

In-line tips and interface descriptions work as an excellent introduction to the interface and how it operates. By providing your user with assistive instruction aside the interaction, it is easier for the user to relate the instruction with how it applies to your web application’s functionalities than a disconnected FAQ or help section.

Nourish by Integral Impressions is an application that creates an automated email newsletter of any RSS feed. The entire interface is documented in-line with descriptive help blocks that can easily be closed once the user decides they don’t need the help anymore. A quick visit to the user profile section presents an option to re-enable all the help boxes in the account just in-case the user forgot how to do something.

Nourish’s interface is documented in-line with descriptive help blocks.

37Signals accomplishes helping their users with their communications management applications like Basecamp in a similar manner. Sections which do not have any content yet display a screenshot of the section, populated with data. This screenshot is even linked to an instructional video on how to create content for the section. That’s user-friendly.

In Basecamp sections without any content display a screenshot of the section, populated with data.

Last.fm provides users with leads on what they can do with their social online radio application via contextual tips and descriptive defaults, teaching the user how use and understand the interaction without taking them away from it as a FAQ would do.

Last.fm uses contextual tips and descriptive defaults, teaching the user how use and understand the interaction.

To ease a user into your application, the application needs to teach the user how to use it. Once the user has moved beyond the beginner level with that application, the application should allow the user to skip all the help boxes and tool-tips or they should be un-obtrusive enough that they are never in the way to begin with. It is best to allow your users to re-enable the tips on how to use your application. Though never assume your user is done learning how to use your application the first time they read your helpful tips.

However, teaching a user how to use your interface is not just limited to providing tool-tips and lots of descriptive fields. You can easily teach a user by setting good default data. Setting good default data demonstrates to the user how a field should be formatted or what kind of information is expected in a particular text panel.

By entering in an email field email@domain.com as the default value it is perfectly clear what you are expecting to be entered in this field and how it is supposed to be formatted. To complete the interaction a bit of simple JavaScript can be used to make the form field even more usable by clearing the default value when the user gives focus to the field and then returning the default value if they did not enter any information.

This technique can even be taken into other fields where you may be expecting specific descriptive data to be entered, such as placing Describe the details of this project… as the default value in a textarea expecting the description of a project. Setting good defaults not only helps ensure that you’ll get the data is entered correctly, but it helps teach the user how the pieces of your application function.

User Interfaces Should Guide

Setting good defaults in your user interface and providing helpful tips will also allow you to guide users through processes and prevent having to correct them. There is nothing worse for the user experience than filling out a form of non-descript fields, and then alerting, via JavaScript, back to the user about how they did not fill the form out properly. Utilizing debugging implementations for instructive communication is a very alienating way of communicating instruction to users. A better way of instructing a user is to guide them through your form and prevent errors from ever happening.

Yahoo places defaults in fields that are not self-descriptive, but these defaults disappear when the field is given focus so as not to interrupt the user’s flow when filling out the form. When form fields are given focus, a simple description of the field and its parameters is given to the right, providing simple instruction without interrupting the user’s flow through the form.

On Yahoo defaults in fields disappear when the fields are entering the focus state.

Microsoft’s Live Mail signup also provides descriptive examples and parameters for fields that require them. Microsoft additionally groups fields in the signup form that are related to each other, providing a description of the section to the right of the form interaction area.

Microsoft groups fields in the signup form that are related, providing a description of the section to the right of the form interaction area.

The form only displays the description for the section the user is currently interacting with to keep the form area from becoming cluttered, allowing the user to focus on the section they are in before moving to the next.

Squidoo’s lens signup wizard is another example of a guiding interface. Their lens signup process provides human descriptions of each step making it easy to understand what is being done. The contact form seems to communicate with the users throughout their registration.

Squidoo also gives feedback to the user in their multi step process of how many steps they have to go providing the user an understanding of the scope of the signup process.

Setting up a form with these implementations humanizes the experience and hand-holds the user as they are walked through the form.

With AJAX and JavaScript DHTML, form fields can now be validated in real-time — no more submitting and going back is necessary. For instance, Yahoo’s account signup form display’s a green check mark if the data is correct, and highlights the invalid field with a friendly description of what was filled out incorrectly and why.

Zooomr.com validates their signup form in real-time with personable, yet helpful descriptions of field parameters

Zooomr, an online photo storage and sharing service, validates their signup form in real-time with personable, yet helpful descriptions of field parameters and valid (or invalid) entered data.

Conclusion

The average web user demographic has changed and so must the user interface. By creating a more usable, easier to understand and less intimidating experience your web application will encourage people to use it. Designing a web interface isn’t about how many features you can stick in one navigation or how pretty that subtle gradient might be.

Designing a web interface is about creating a conduit for users which is easy to use and understand, helps to to accomplish tasks and improves their experience. Show the users how you would like them to user your application, but don’t force it on them. Allow your web application to guide your users through the process, teaching them how to become experts at it and make the application work for them.

Dave Shepard is the Lead User Interface Developer at digital-telepathy specializing in web standards, user interaction, interface development and technology.

Published in How-To, January 16th, 2008
Tags: ui, usability

1.

Rasmus (January 16th, 2008, 9:42 am)

Nice article - to the point.
2.

Inder (January 16th, 2008, 9:42 am)

Excellent post. An aspect that majority of the times goes unlooked.
3.

killjoy (January 16th, 2008, 9:50 am)

nicely done article, i’ve seen a growing trend along these lines and its refreshing to see people supporting it, despite the extra work involved.

some sites i’ve used on a regular basis have adopted this approach, and it has certainly shortened their learning curve. i’ve found its very refreshing when going through semantic, step by step forms to know what sort of time i may be comitting to overall, up front. some people visit sites and don’t have the time that a form would require.. this lets you know when you’re still interested, and can bookmark the site for later use, when time is more permitting.
4.

Stefan (January 16th, 2008, 10:07 am)

So, talking about an userfriendly navigation how does this fit for content design? Is minimalistic the way to go or should one always style to their usergroup?
5.

ptamaro (January 16th, 2008, 10:27 am)

Really helpful post. From this you can make a nice checklist of things to do and incorporate into the interface design process to help make the results intuitive for the user. Guiding the user helps to create a positive user experience in addition to helping them use your web application, web site, or service — they’ll be more likely to return and perhaps even help spread the word.
6.

Bughy (January 16th, 2008, 10:32 am)

Cool article. I was talking today with my boss, who is a designer, about better user interfaces.
7.

aravind (January 16th, 2008, 10:38 am)

wow cool… SM simply makes web a more beautiful world…. :)
8.

Frank (January 16th, 2008, 11:58 am)

Great article once again.
I learn so much from Smashing Magazine, thanks!
9.

Evan Meagher (January 16th, 2008, 12:17 pm)

As long as interfaces maintain at least some degree of intuitiveness and plug all the holes with guiding help messages like these, tomorrow’s interfaces will be a dream. Good article!
10.

BJ Cook (January 16th, 2008, 12:28 pm)

Great article Dave, lots of great insights! The sign-up piece was great.
11.

Yamil G. (January 16th, 2008, 2:32 pm)

Thanks a lot, very interesting and useful article :)
12.

Shaun (January 16th, 2008, 2:44 pm)

I really needed this, thanks!
13.

Dave Shepard (January 16th, 2008, 3:22 pm)

Re: Stefan (#4)

Your interface should always be designed with your user audience in mind. You can build the greatest web application in the world, but if your interface does not cater to those who you’re trying to target, it won’t be adopted. I can’t say whether or not minimalistic is the targeted way to go, but usually this is a pretty safe bet. You don’t want to overwhelm your users with information - no matter their skill level.
14.

ellomoto (January 16th, 2008, 4:05 pm)

Good read thks. Keeping it simple has worked for so many years and will continue to do so. I find that trying to keep peoples thinking to a mininal really helps the longevity of your web app. Unobstrusive features can really help, joomla 1.5 administrative interface is using unobstrusive js tooltips to help the user understand the functionality quicker if they feel they need it. In my oppinion another good example of educating the users.
15.

Talyah (January 17th, 2008, 12:02 am)

Helpful post. It would have been beneficial if we could enlarge the image of the attached examples.
It is impossible to lean from the tiny photos.
Thanks. Talyah.
16.

Sonny (January 17th, 2008, 12:12 am)

great thing.. I’ll use it for my website soon.. thanks a lot!
17.

Berry (January 17th, 2008, 1:49 am)

Very good article, and very useful too. I think that today only those tools are successfull that are easy to use. That’s why I like Link [www.wrike.com] - the project management tool that I use. I wish I could insert a screenshot.
18.

dharma (January 17th, 2008, 2:30 am)

Very good article, we have been following the Yahoo method and looks like they have a real good UI team out there…
19.

Leigh Nugent (January 17th, 2008, 2:43 am)

Really useful article - I’m definately going to implement some of these ideas on future projects!
20.

Joefrey Mahusay (January 17th, 2008, 4:39 am)

Thanks for sharing this very informative infos. It inspired me a lot.
21.

Diego (January 17th, 2008, 4:49 am)

mmm… this article looks like to some chapters of this book…

Link [www.amazon.com]

mmm…
22.

Anders Toxboe (January 17th, 2008, 5:19 am)

You might want to check out ui-patterns.com (http://ui-patterns.com) - that has categorized much of what you explain into categories (for instance “Blank Slate” for basecamps help texts and “Good Defaults” for the Yahoo example.

Great article!
23.

Robert Marbun (January 17th, 2008, 8:08 pm)

Next time they will create web for those who have difficulties of choosing underwear. Great article!
24.

Alexis Brion (January 18th, 2008, 2:10 am)

Nice article, also shows the importance of self explanatory interfaces.
25.

Chris (January 18th, 2008, 2:58 am)

As usual your posts are timely and relevant - thanks, I have all the ammo I need to get through my next client/design meeting.
26.

affiliate blog (January 18th, 2008, 10:59 am)

Thanks for the advice. I’m in the process of developing a administrative program for my customers and I will have to apply some of these tips.
27.

Prasanth (January 25th, 2008, 5:08 am)

Nicely put. To the point. I like the AJAX Real time validation. Nice idea. Thanks a lot! Keep smashing!
28.

Piney (February 4th, 2008, 8:40 pm)

Love it, now I gotta teach myself how it’s done.
29.

Simon Pascal Klein (February 7th, 2008, 7:20 pm)

Attempts at making feedback for interactive tasks personable makes me want to stick my fist through the screen; a simple ‘Password needs to be composed of alpha-numeric characters’ is suffices.
30.

Sandeep Jangir (February 27th, 2008, 3:09 am)

really good article once again. Smashing Magazine, thank you so much
31.

mxsf (May 15th, 2008, 7:45 pm)

like sign up of yahoo
32.

Y.Boy (July 16th, 2008, 5:12 am)

Link [www.riahome.cn]
G0od!
33.

Amit (February 10th, 2009, 2:49 am)

Nice article!
Although you have covered all basic points, but sometime its good to brushup your basics.