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.

Nourish1 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.

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

37Signals accomplishes helping their users with their communications management applications like Basecamp3 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.

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

Last.fm5 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.

6Last.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.

Yahoo7 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.

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

Microsoft’s Live Mail9 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.

10Microsoft 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 wizard11 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.

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

Zooomr14, 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 Developer and Architect at digital-telepathy specializing in application architecture, user interaction, interface development and technology. Dave is the lead developer of the SlideDeck WordPress plugin and Hello Bar the website notification bar.

Rasmus

Inder

killjoy

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.

ptamaro

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.

Yamil G.

Shaun

Dave Shepard

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.

0

14

ellomoto

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.

Sonny

Berry

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 Wrike – the project management tool that I use. I wish I could insert a screenshot.

Anders Toxboe

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.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.