Chapter 1: Understanding RIAs (part 3)
1.3 RIA interactions
As an interaction designer, RIAs represent my day in the sun. The great impetus for Web 2.0 and RIAs in general is to improve the user experience! How could I not be behind that?!? Alas, RIAs still have their share of detractors, even among designers. I can sum up their reservations in two words: Skip Intro. At first blush all the new features available in RIAs may seem be a surface polish only, designed to enhance a site’s cool factor with some sparkly (yet gratuitous) animations. But in truth, the advent of truly interactive web applications represents a significant shift in the online user experience and great opportunities for designers and creators of online software. Now we’ll look in depth at some ways the interfaces. – and even users’ habits – are changing as a result.
1.3.1 Searching
On a fundamental level, RIAs enable a change to users’ searching pattern, or how they find data more directly on a website. The typical user’s searching pattern online can be characterized somewhat like a tree. The user starts at the trunk (a homepage or perhaps a page of Google search results). The trajectory then follows a branch, each joint representing a decision node, or a choice to further refine the data. At the end of each branch is a leaf, an endpoint where no further refinement can take place.
On a site like Home Depot, if I’m looking for, say, reflective insulation for my roof (and choose not to perform a search for it), I need to start my journey by guessing where this item lives on the site, choosing a main category and subsequent subcategories until I find the item. For the insulation, I must traverse this path: homedepot.com > Building Supplies > Building Materials > Roofing, Gutters and Siding > Roofing > Roofing Accessories > Reflectix Reflective Insulation ($21.00). The Home Depot site gives me a breadcrumb trail to jump back to earlier nodes and branches if I find I’m in the wrong section. But if I’m looking for an item and don’t have enough information to perform a search, I must essentially keep guessing, narrowing my search until I find what I’m looking for, or come up empty and choose a different node.
I liken this approach to fishing. When you’re out on the lake with your fishing pole, there may be one fish in that lake or one thousand, but you don’t know because you can’t see below the surface of the water. One of my main goals in almost every project I touch is to remove that opaque layer and let people see what’s inside before they start to fish.
RIAs remove some of that opaque layer by offering the leaf nodes further up the branch, simply by incorporating them into the current view. A good example of this is the revamped Gap site, which applies a rollover detail view. Instead of clicking an item in a list to see it in detail, then clicking the back button to return to my list, I may simply hover over the item or one of its neighbors without leaving the page. Snap offers a similar feature for links in blogs and search result pages, allowing the user to preview the link before leaving the current page.
Smaller branches can also be incorporated further down the tree as well. For example, adding something to a shopping cart was often a 2-3 page operation in the old days (page 1: click “add to my cart”, page 2: confirm “Add to my cart?” click Yes/No, page 3: “This item has been added to your cart” click Return to Shopping/Check Out). This kind of path derails the user’s shopping experience for a routine action. RIAs in contrast often allow the user to add an item to the shopping cart without leaving the page, and sometimes even allow viewing the cart’s contents as well.
Another great example of incorporating branches is expandable navigation. If I am able to find my item before committing to a page refresh, I’ll feel much more efficient and have a better overall experience on the site. Done well, the entire site map can be accessible in a few clicks from the main navigation.
1.3.2 The new taxonomy
Categorizing data , or supporting findability, is a key concept in interaction design, and a front where some progress has been made (although miles to go before we sleep). In my Home Depot example, we see a very top-down approach to categorization or taxonomy. I may know what I want, but I also need to know what Home Depot thinks it’s called and where they think it should live on their site. Sometimes things are difficult to find because of a disconnect in how I think about something versus how the site creator thinks about it.
Tagging is one solution to this problem, allowing users to label and categorize data (coined folksonomy) to help others find their way to content. As I mentioned before, it’s not always the optimal way to add information, but given the right context and user base, it can be very helpful. In fact, tagging is just another way for users at large to add metadata to items on a site (purposefully or unconsciously), data that others can use as filters: I can search for flickr photos tagged “bunnies”, I can browse 4-star movies on netflix, I can see the “Videos being watched right now” on Youtube.
1.3.3 Serendipitous browsing
The layout of a site like Home Depot is very purposeful: very focused and task driven. I want to find what I need, pay, and get out, and I will measure my success by how little time it takes me. This is great for some sites, but other sites may want their visitors to settle in for a while, explore and find things they weren’t necessarily looking for. This notion is called “unconscious” or “serendipitous” browsing.
On sites measured by their stickiness – how long their users remain on the site – it’s to your advantage to figure out new ways to prolong the trip. Offering tangents up for exploration (people who liked x also liked y, bestseller lists, most watched lists, etc.) is a good way for people to find new content. Also keep in mind the “long tail”, meaning the less frequently accessed content essential to niche audiences. Markers like “most watched” and “most popular” create a self-reinforcing pattern: they bubble to the top because a few people liked them, then stay there because they’re the first thing that people see. Help users find hidden gems at the bottom of the barrel by offering content derived from means other than popularity contests. This can come in the form of random selections, user generated recommendations, or other curated lists. Departure from the usual suspects can add the sense of surprise and delight in your application.
1.3.4 Other rich interactions
Many of the new interactions in RIAs are actually old interactions borrowed from desktop software. Nifty conventions like drag and drop, multiple-selection, and direct manipulation are used to great effect in RIAs, orienting the user, explaining the interface, and allowing the user to interact with data in more intuitive ways.
Some of the new style of interactions available in RIAs may be a little foreign to web users, and require some getting used to. I can say with authority that old conventions in a new setting can wreak havoc in a usability test, but I also feel that the accompanying richness and power can be worth the learning curve.
