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, users

• Evolve Your User Interface To Educate Your Users at Mobimeet (January 16th, 2008 at 10:25 am )
• Self Help » Blog Archive » Evolve Your User Interface To Educate Your Users (January 16th, 2008 at 10:51 am )
• Karine Sabatier » Blog Archive » Links (January 17th, 2008 at 9:10 am )
• The Almighty User Interface « nPost Startup Blog (January 17th, 2008 at 2:57 pm )
• Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Busy Week Edition (January 18th, 2008 at 6:27 am )
• links for 2008-01-18 | Ed Tech Hacks (January 18th, 2008 at 4:33 pm )
• Basecamp » Evolve Your User Interface To Educate Your Users (January 18th, 2008 at 8:09 pm )
• Interfaces Web modernes (January 20th, 2008 at 8:40 am )
• Caminews » Evolve Your User Interface To Educate Your Users | Know-How | Smashing Magazine (January 20th, 2008 at 1:02 pm )
• Trevor Davis | Blog » Weekly Link Round-Up #14 (January 20th, 2008 at 9:00 pm )
• Trevor Davis | Blog | Weekly Link Round-Up #14 (January 20th, 2008 at 9:01 pm )
• Обучающий интерфейс | Fresh: новости мира юзабилити (January 21st, 2008 at 2:40 am )
• Project83 Blog - Commentary on web development, standards and small business » Highlights - January 21 (January 21st, 2008 at 9:41 am )
• Evolving the user interface - Sharpenr (January 22nd, 2008 at 7:35 pm )
• links for 2008-01-25 « Kaigani’s Arbor Vitae (January 24th, 2008 at 5:35 pm )
• Revue de presse | Simple Entrepreneur (January 24th, 2008 at 11:03 pm )
• andre klapper’s blog. » Blog Archive » some (software) plans for 2008. (January 31st, 2008 at 9:07 pm )
• Evolve Your User Interface To Educate Your Users | How-To | Smashing Magazine :: Sam’s random musings (February 9th, 2008 at 4:28 pm )
• Devschuur » De gebruiker informeren (March 3rd, 2008 at 2:00 am )
• User Interface, User Education & Help | How to Make Your Users Happy (March 4th, 2008 at 3:50 am )
• Cyanto » Eolvere le interfacce per educare gli utenti (March 19th, 2008 at 1:24 am )

Leave a Reply