The rise of ‘web 2.0′ has brought with it a slew of new interaction styles and concepts, most of which give the web some magical powers it never had before, making it a significantly more powerful platform for application development. But RSS, tagging, drag-and-drop, slide transitions, and many other new paradigms are unfamiliar to web audiences, who have been trained for years that the web has severely limited capabilities compared with the desktop.
So how do we teach our users to use all these fancy new gadgets? We do it through the magic of instructive design. Let’s take a look at how some simple design elements can be used to communicate the value of these new interactions and get our users moving forward quickly.
Instructive design
Instructive design is the use of design elements to help users climb over the learning curve in a web application (or anything else for that matter). This includes very typical elements such as text, graphics, and video, but in this case, it’s not about what you use, it’s about how you use it.
The goal of instructive design is to teach users about an interaction as effectively and efficiently as possible, without getting in the way of the experienced users who already ‘get it’. Many tricks can be used to accomplish this goal, the most common of which is plain ol’ text. Later, I’ll discuss how to handle the more complicated stuff, but first a glimpse into the basics.
The Basics: Plain ol’ Text
You know those paragraphs of instructions you often see at the top of an application screen? Hardly anyone actually reads them. This happens because they’re focused on doing, not reading, and users tend to completely avoid text when using web applications. But the problem goes much further than long blocks of instructions. In a recent usability session, ten out of ten users looked right past a prominently-displayed Help button, choosing instead to ’satisfice’ their way through the tasks they were asked to perform. One user, in fact, said out loud that she wished there was some sort of Help documentation available.
If text is used well, however, it can be your saving grace. You just need to follow a few simple rules, all of which are shown in this example from Squidoo.
First, keep instructive text to a maximum of one or two lines. Short lines. Anything more will most likely not be read. In most cases, it won’t even be ’seen’. After writing instructive text, go over it several times to see how you can shorten it.
Second, make sure the text is visually different than that of section headings, field labels, and so on. People notice things that are different from other elements on a page, so instructive text that has its own styling has a better chance of getting noticed. Using a slightly smaller font size, in a slightly lighter color (mid-tone gray, for example, when the rest of the text is black) or a different font weight, sets the instructive text apart from the rest, much like footnotes are set apart from body text in a book, and draws the eye to it.
Finally, position instructive text as closely as possible to the element the instructions are about. If the text explains what type of data to enter into a form field, for example, place it immediately above or below the field. Better yet, use the text as the default value for the field, so it’s impossible for users to miss it. (If you do this, be sure to use JavaScript to automatically highlight the default text, or remove it completely, so users can start typing immediately, without having to select the text themselves.)
These practices keep newer users informed about how to use an application, but stay out of the way so experienced users don’t trip over them while trying to get things done.
Teaching users about RSS, tagging, and drag-and-drop interactions takes a little more creativity than a simple line of instructive text, but it’s not any more complicated, providing we keep the concepts of instructive design in mind as we create applications. Following is a breakdown of the three most vital elements of instructive design: purpose, benefit, and usage.
Purpose
Before a user will be happy about learning to use a new style of interaction, she must first understand the purpose of it. Tagging, for example, possibly because of its name, doesn’t have a clear purpose to most users, so it must be described in a way that will enable the user to form a clear mental model. Despite its great value as a user-driven system of organization, most users have no pre-existing mental model of tagging on a website, let alone its purpose.
When Amazon decided to implement a tagging system to its product pages, it added a small ‘What’s this?’ link next to the section heading for users who aren’t familiar with the paradigm. The link produces a small pop-up window that explains the concept behind tagging and answers several questions about how it is used. While this is helpful to those who might read it, anyone who has used Amazon lately probably realizes this link is a little buried amongst the boatload of information shown on a product page, and the body of the pop-up window is significantly more thorough than most people will want to know.
So what if the application’s whole organization system depends on tagging?
For starters, you can use the tags the same way most sites display local navigation (navigation links for a specific section within a site). Instead of reserving a section of the page for ‘Tags’, stick them in the sidebar with the other navigation under the label ‘Related’ and offer a way to edit the keywords for the page, such as with a link at the bottom of the sidebar section. In other words, avoid the term ‘tags’ until users need to know what tagging means. Users form mental models of applications as they use them, and keywords have a recognizable real-world meaning that can tune users into the purpose of tagging. So, instead of explaining the purpose in a lengthy Help document, imply the purpose with a simple and appropriate section label.
Next - and this may seem counter-intuitive - instead of focusing on the tags themselves, show a tag cloud, like the one above, and use short instructive text to describe it. This way, you give users something interesting to look at that doesn’t do any harm if the user doesn’t understand its purpose (Last.fm also uses this device). After all, a tag cloud is just a list of links, regardless of the various font sizes assigned to each one. Then offer a way to edit the tags, again referring to them as keywords, and provide a separate page or some sort of in-page editing capability that describes the tags in a bit more detail. From here, you can certainly link off to a Help document about tagging. Just be sure to get users hooked on using the tags first. The purpose will become clear through the interaction.
Once users get this far, consider also using a short screencast to bring the basics to life. Find the person in your company with the best people skills, sit him or her down with an outline for what to do, crack open Camtasia, and hit Record. A few quick edits later, you’ll have a friendly, engaging way to learn about tagging instead of a dry Help article.
Benefit
In addition to describing the purpose of an interaction, we need to stress that users will actually gain something through the interaction. The software business may focus on feature lists for marketing material, but any salesperson will tell you that selling benefits is far more effective than selling features.
FeedBurner teaches users who are new to RSS the benefits of feeds without ever even using the term ‘RSS’. Instructive text is used at the very beginning to explain that FeedBurner “makes it easy to receive content updates” in various feed reader applications. But while helping new users along, FeedBurner also provides chicklets (subscription buttons) so the experienced users can subscribe to various readers with a single click.
FeedBurner helps users get up to speed by replacing what would normally be a page full of unstyled XML with meaningful, formatted content, complete with information about the format and links to various feed readers. FeedBurner also mentions in several places on the page why users should use it and what FeedBurner is all about.
You can leverage this on your own site by using FeedBurner’s services to teach users about site feeds, or you can do something unique with the same purpose. Create a page on your site about RSS and why it’s so useful, and link the obligatory RSS icon to it instead of linking straight to an XML page. Use the page in the same ways FeedBurner does - to instruct - and your users will pick up on the value much more quickly.
Usage
The final thing to demonstrate in instructive elements is how to interact with the design. In addition to describing the benefit and purpose of an interaction, we also need to make it clear how to use it.
Drag-and-drop interactions, for example, have been around for a long time in desktop applications, but the masses have not yet learned that such an interaction can exist on the web, which makes the interaction very difficult to discover. Because of this, there are a few tricks to getting users on track.
First, it’s best to maintain the standard set by desktop applications by always using the move cursor on drag-able areas instead of the hand or arrow pointers. This can easily be set in the stylesheet for an application, and it establishes the same standard on the web that users are accustomed to on the desktop, making it easier for users to discover the feature and learn to use it.
To push things along a little more, using a text label for the drag handle has been extremely effective. As in, instead of only using the move cursor, label the drag-able area using the word ‘drag’. This spells out the details of using the interaction in plain English and makes it even easier to discover.
In Dashboard HQ, we created a screen state that enables users to rearrange elements on the page, change pod titles, and so on. In this state, each pod has an explicit drag handle that is visually and functionally separate from the title bar for the pod.
By doing this, we made the functionality easy to discover. Users can simply glance around the page, see that each pod has a clearly-labeled drag handle, and quickly determine how to complete the task of rearranging elements on the page. In this case, the purpose and benefit of the interaction is intrinsically clear, because users often immediately see the value of being able to arrange the page exactly the way they want.
Moving On
To dive a little deeper into the practice of instructive design, you can try a couple of different things. First, you can open up an application you worked on in the not-so-recent past and try to take a fresh look at it. Find the areas that might confuse users, areas that are simply not as clear as they could be. Then figure out how you can apply instructive design elements to the screens to make the interactions more obvious. Practice is truly the best way to get proficient.
In my book, Designing the Obvious, there’s a whole chapter dedicated to getting users up to speed with instructive design, it also discusses how to error-proof your designs, surface the most important elements in a screen or task flow, make iterative improvements to everything from use cases to live applications, and why we should avoid bending to the whims of users and stick to a vision for our designs.
Moving forward, just keep the principles outlined here in mind as you design application screens. Hopefully, you’ll catch yourself next time you decide to write a paragraph of instructions at the top of the page and try something a little different.
Like this article? Digg it!
Great morning read! I think you are right that “purpose, benefit, and usage” are all vital elements of instructional design.
I do feel as though “instructional design” is something that gets lost when focusing on the buzz words like information architecture, user-experience design and interaction design. Sometimes we don’t stop to think about what we are actually trying to accomplish with a particular task.
[…] My first-ever Vitamin article is now live! Check out “Communicating web 2.0 through design” and learn to use instructive design elements to teach users how to use all those fancy new gadgets that come with Web 2.0 interfaces. […]
I totally agree on the drag handles. Pretty much every time I encounter drag and drop on the web, it’s a surprise. Make it brain-dead simple with explicit labels; don’t make me think about it.
On tag clouds: “This way, you give users something interesting to look at that doesn’t do any harm if the user doesn’t understand its purpose.”
Has anyone really shown that tag clouds are useful navigation devices, or that people really consider them “interesting to look at.?” Doesn’t “something interesting to look at” feel like a huge cop-out on the part of the designer? I’d love to try to defend that to my boss:
Boss: “why’d we put a tag cloud there? What user goals does it serve?”
Designer: “I don’t know, I just thought it would give users something interesting to look at.”
Features that the user doesn’t understand the purpose of are design failures. A distraction a user doesn’t understand is worse than that: it’s an active erosion of trust and flow. When the user has to stop and parse your “interesting” feature, she’s got to stop and think about what she’s supposed to do and why. This is not a good place to be, navigation-wise.
Andrew -
Thanks for your comments.
There are many arguments for and against the use of tag clouds, and I intentionally avoided the subject in this article, choosing to stay focused on how to communicte its usage when the paradigm is used. That said, I can tell you what I’ve seen.
Tag clouds are often used in an ancillary fashion, not as a prime focus and not as the main method of navigation. In this context, even the most negative emotional reaction to a tag cloud is unlikely to throw a user off track. In my own observations, users rarely even flinch when faced with them, especially when they’re accompanied by a little instructive text that explains the interaction, such as, “Larger = more popular. Smaller = less popular.”
I have not seen any formal usability testing sessions performed to evaluate the effectiveness of tag clouds - these are simply my own informal observations. Obviously, we’ll learn more as this design pattern becomes more popular.
Robert: I’m thoroughly enjoying Designing the Obvious. It’s one of the best books I’ve read on the subject. It’s also excellently designed. :)
I’d recommend the book to anyone who is diving deeper into usability and web application design.
[…] Excellent article over at Vitamin by Robert Hoekman Jr about useability and intuitive design of Web 2.0 apps. The article kinds of puts a method behind the madness of the design fads of web 2.0. No, reflections and gradients aren’t included but “RSS, tagging, drag-and-drop, slide transitions, and many other new paradigms are unfamiliar to web audiences” are. If you are designing or thinking about designing a web site or thinking about designing a site… or app, I highly suggest you check it out. Design, html, rss, tagging, useability […]
[…] Vitamin Features » Communicating web 2.0 through design Some thoughts on structures and strategies around web 2.0 and design (tags: design web2.0 best_practice) […]
David -
I’m very glad you’re enjoying it. Thanks for the kind words about the design. I designed the cover myself and provided direction for the design of the inner pages, so it means a lot when people notice. Thanks again.
Hi Robert,
Good article you cover most of the design aspects designers and developers are looking to implement in new UI’s.
I just completed a few additions to my own site, RSS, tag clouds and added some social bookmarking tools thanks to some nifty wordpress plugins
http://www.jayonline.co.uk
I love tag clouds!
Tag clouds are the best!
Hi Robert,
I really enjoyed your book on designing the obvious. This book was packed with great examples and concrete use cases. I’m sure this will do alot to reshape the web and create a better experience for all users. Anyways, thanks. Keep it up.
- Alex
[…] A great article that could improve the usability aspect of our page design as more complex interaction models used on the web: Communicating web 2.0 through design by Robert Hoekman Jr. […]
[…] Communicating web 2.0 through design Como educar a nuestros visitantes sobre las funciones de nuestro sitio a través del diseño. (tags: web2.0 diseño tips) […]
[…] Some sites, hip to the notion that we should communicate to users what’s going on, have opted to use a form of a poka-yoke device. Instead of waiting until the user presses Submit to show an error, these sites warn the user using a bit of instructive text. […]
[…] For this exercise, first take a moment to remember why instructive text exists. If you’ve read my article over on Vitamin on instructive design, you know that instructive text can be a great way to help get users oriented and communicate to them how to use an interaction (provided, of course, you keep it extremely short and make it stand out from other design elements). […]
I like your issue, I want to translate it into Chinese simplified and post to our team’s forum. Please ensure, thanks!
Tag clouds are smoke and mirrors.
Yups! Tag clouds rock!
[…] The majority of web users are still strugling to understand how to use many of the flashy controls on web sites such as Ajax drag and drop, tagging and in page tabs. This articles suggests some ways to teach your users how to use them through instructive design.read more | digg story […]
[…] Wrote my first Vitamin article, Communicating Web 2.0 Through Design. […]
[…] Vitamin Features » Communicating web 2.0 through design RSS, tagging, drag-and-drop, slide transitions, and many other new paradigms are unfamiliar to web audiences, who have been trained for years that the web has severely limited capabilities compared with the desktop. (tags: toread web webdesign ui usability design web2.0 user_experience) […]
I hate tag clouds but I do think they are interesting to look at.
[…] What is Web 2.0? What is Web 2.0? And how does it apply to me anyway? Paul Boag presents his screncast about the main aspects of new web culture. Besides: Communicating Web 2.0 Through Design: “So how do we teach our users to use all these fancy new gadgets? We do it through the magic of instructive design. Let’s take a look at how some simple design elements can be used to communicate the value of these new interactions and get our users moving forward quickly.”. […]
I too am no fan of drag handles or tag clouds. Drag handles do not appear on a Mac very much (one indication that they might be over used)
But tag clouds are just evil. Already web ads are littering the page with animations and blocking my view.
Tag clouds like anything else, should exist with a purpose that is useful to the user and should not be in the way.
Good article, will have to give those drag handles a go!
Giving the user multiple options instead of a more straight forward wizard interface seems to be one of the traits of web 2.0 design. A continual problem I find is how to alert users to what they can do next when there are multiple options. If you make the default option really obvious then they always seem to go for that and miss the others. However if you display all the options very prominently then the user can get over-stimulated and not know what to do, in my experience. Any hints on how to solve this problem would be greatly appreciated.
I am quite ambivalent about tag clouds so shall stay out of that discussion.
Pete
[…] Läs resten av artikeln hos Vitamin. […]
WoW! Thanks for this very good article … I use this to my home work to school … Can I translate this with all comments and insert on my site? … Thanks
[…] I’ve said in many a presentation and many a conversation (and even this article) to avoid using long bits of text at the top of a screen to provide instructions to a user about how a page is supposed to work or what they’re supposed to do. I suspect many people have doubted this tip. After all, how else can we explain it? […]
Nice shot. Very helpful artuicle. Sometimes I must search for something like that for a long time.
[…] Full Article digg_bgcolor = ‘#ffffff’; digg_skin = ‘compact’; Dropped in: News, Design, Web 2.0 around 10:01 pm […]
[…] My Flashforward session is actually based on my Vitamin article, Communicating Web 2.0 Through Design. I’ll discuss how to communicate the purpose, benefit, and usage of all the fancy new Web 2.0-style interactions and effectively use text, screenshots, screencasts, and other elements to make web applications easy to learn. […]
I find this article excellent. It provides the enough infomation regarding design aspect which most of the designers are looking for. Thanks for this useful resource.
It is a very useful resource for designing a web site. It cover most of the design aspect. I will redesign my website according to this article. Thanks for the help.
I really liked your book on designing. This book is full of good examples and use cases. Thanks, keep it up.
not bad graphics
I hate tag clouds but I do think they are interesting to look at.
Great interview! Keep the posts coming. I really enjoy reading about how you mix good web design with spreading the gospel.If you are designing or thinking about designing a web site or thinking about designing a site… or app, I highly suggest you check it out. Design, html, rss, tagging, useability
Hej Robert.
This article is very interesting.
I must write again:)
I really enjoyed your book on designing the obvious. This book was packed with great examples and concrete use cases. I’m sure this will do alot to reshape the web and create a better experience for all users. Anyways, thanks. Keep it up.
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
[…] read more | digg story Posted by seethepost Filed in news […]
merhaba ya dedik ya size olmayan birseylerden sizde yazin a.k
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
I totally agree on the drag handles. Pretty much every time I encounter drag and drop on the web, it’s a surprise. Make it brain-dead simple with explicit labels; don’t make me think about it.
I really liked your book on designing. This book is full of good examples and use cases. Thanks, keep it up.
Thank you for very informative art!
Can I translate this article in polish?
I totally agree on the drag handles. Pretty much every time I encounter drag and drop on the web, it’s a surprise. Make it brain-dead simple with explicit labels; don’t make me think about it.
thanks very nice.
Good article, will have to give those drag handles a go!
[…] The majority of web users don’t understand how to use many of the flashy new features (ie. Ajax drag and drop, tagging) - this articles suggests some ways to teach them through instructive design.read more | digg story […]
I know what you mean but unfortunatelly it is not usefull for me
Thank you for very informative art!
Nice shot. Very helpful artuicle.
I hate tag clouds but I do think they are interesting to look at.
I totally agree on the drag handles.
Nice site - thank you
Thanks for this very good article. I use this to my home work to school. Can I translate this with all comments and insert on my site? Thanks
Thank you for very informative and good article! Could you translate it into other language ????
Very, very helpful article.