Web Design Tips, Tutorials & More!

UI Tricks: Teaching and Guiding Users

When’s the last time you visited a site and had no clue what to do with it?  It’s a terribly frustrating feeling.  In fact, there’s no better way to lose an audience than to leave them in the dark about how to use an application.  Even the most complex sites can be broken down and made more accessible to users with just a little teaching and guidance.

When design fails to educate its users, it ceases to be user friendly because no matter how well it functions, users never gain access to its full potential.  The other scenario is that users simply walk away after one try due to frustration and confusion.

Designers must keep in mind that users are impatient and their time is valuable to them.  In this post, we’ll talk about various ways to teach and guide users through your application using design techniques that avoid wasting precious time and effort.

Educational Design

Today’s designer simply cannot force users to rely on help pages and FAQ’s alone to explain the in’s and out’s of using an application.  This may have been possible in the days of yesteryear, when the only people who really knew anything about the Internet were the technophallic users in possession of Computer Science degrees from Harvard.  Times have changed.

These days, almost every household contains a computer, and whole households know full well how to use them.  Not only that but other devices, like smartphones and multi-touch tablet PCs, have joined in as well,  everyone, from Uncle Billy, who never owned a computer until he was 40, to little Billy Jr.,  Who is only three and works with a wireless mouse like a pro, knows how to use the Internet.  Not everyone, however, knows how to use your application.

This is why educational design techniques are so important. The essence of educating the user lies in a designer’s ability to communicate user-friendly tips and techniques throughout the design.  For instance, tips and page descriptions can convey a great introductory message to users as shown below.

Nourish

Here, the designer delivers helpful information to the user via embedded help boxes.  These help boxes can be conveniently clicked away or called back as needed.
 

Basecamp

In a similar fashion, this site instructs via video.

Last.fm

The Last.fm site is also user friendly.  Its user interface incorporates instructional tips and defaults that educate the user on how best to use the site’s features.  These are especially helpful and convenient because the user never has to leave the application and journey over to a help page to figure things out.

Guiding the User

Good guidance built into applications in unobtrusive ways help users feel comfortable with the task at hand – whether it’s filling out a form or registering for future log-ins.  Many designers make the unfortunate mistake of thinking that a few tips and an introduction will do the trick, but real guidance is much more than that.  Take a look at the following examples:

Yahoo

Notice that Yahoo’s defaults are placed sparingly only in places that aren’t self-explanatory.  The defaults are clearly visible, short and straight-forward – very user friendly.

Squidoo’s lens signup wizard

The most user-friendly applications and sites provide guidance in the form of friendly and communicative options and choices.  Squiddo has done a great job of connecting with the visitors, providing a visual and verbal hand to hold throughout the registration process.

Conclusion

Remember, the fact of the matter is that no matter how educated a user is; only you the designer knows the applications you’ve designed as well as you do.  Why not share that knowledge with the ones you’re creating for and offer a little teaching and guidance along the way?

Leave a Reply