- January 16th, 2008
- 34 Comments
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.
Nourish’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.
In 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.
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.
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
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.
On 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.
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 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.
Zooomr.com validates their signup form in real-time with personable, yet helpful descriptions of field parameters
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.
- 1 http://nouri.sh/
- 2 http://nouri.sh/
- 3 http://www.basecamphq.com/
- 4 http://www.basecamphq.com/
- 5 http://www.last.fm/
- 6 http://www.last.fm/
- 7 https://edit.yahoo.com/registration
- 8 http://www.yahoo.com/
- 9 http://www.hotmail.com/
- 10 http://www.hotmail.com/
- 11 http://www.squidoo.com/wizard/start
- 12 http://www.squidoo.com/
- 13 http://www.zooomr.com/
- 14 http://www.zooomr.com/