Chunking Data – Testing with Wireframes

So we are speaking about chunking up data, that is grouping information so it is easier for users to find what they want on corporate sites. A wireframe may be used to discover through testing the best groups or chunks of information to present to end users. Wireframes are used prior to extensive development, such as the graphics and functionality (look and feel). This can be a very effective way to test while reducing cost and time to market.

"Chunks" or "chunking' is the technical term actually used in the user interface design information industry for similar groups or buckets of information.

A wireframe is an outline, like an information blueprint - it is used to convey structure, taxonomy or that is related or grouped information in lists, which removes the pressure of immediately deciding what the site should look like, and more importantly details what the information model will be. The appearance is in many cases secondary to the main information on a corporate website, but it may be the first thing a customer focuses on, therefore it remains very important.

For our example a senior user experience architect, based on experience, divided the information presented on your corporate site into chunks. Using these information chunks she created the following wireframe, which represents your primary customer facing Web page:

Company Logo Sign In

Local Application Language 2 Search

1st Product 2nd Product 3rd Product

sub product sub product

Free Items Sales Unique Purchase topic topic topic

customer focused versatile reason to buy

Policy Contact Us Locations Shop Support Billing

Wireframes such as this one can be used in user centered design to help your decision making process about what should be on the main page. It will show if it makes sense how to navigate successfully to sub-pages. It is used to ask users what they would choose or what they would expect to see under each of the links. In this wireframe everything is a link, except the company logo, because the user is already on the main page.

This layout of information may differ a great deal from your existing site, this is just a virtual case study – if it were a real one – the wireframe would reflect your customers and your business needs. The next step would be to test it internally with you and your teams, tweak the wireframe and test it with a few customers. It is supposed to be generic looking, unfinished – just to see if the information is expected, and generally in the right locations.

We can also ask about the expected functionality under the selections that your customers and potential customers make. Other techniques include cognitive walkthrough, heuristic evaluation, and a site visit (where UI test visits a customer at their environment such as their office or home), as well as other usability testing. We can use paper prototypes to introduce other information links. Should you have a “Feedback” link for example?

We can use paper cut outs of the words and phases to see if they work in other configurations in this layout. A usability next step might be using the wireframe to test real users to see:

1. What they click on

2. Do they get expected results?

3. What else happens?

4. Can the presentation, the logical groupings be improved?

After massaging the content, context, location, and functional plans, then the look or skin will be added, based on the demographics that data mining uncovers about your customers.

This look, combined with the functionality of the site will in part generate a 'feel', which informs the customer a great deal about doing business with you. These things combined can make the user experience satisfying along the way.

Next time: What do all those Web Design Top Ten Lists mean? How are they useful?

A Persona Makes a Site Visit

Now let’s do a brief analysis of an imaginary corporate site, and compare and contrast to your competitor’s sites by using a plausible model, a persona, a use case to “visit” your site for the first time. This method is also termed "a cognitive walkthough." What will we learn?

Our persona, John, is a bi-lingual man in his forties, with a family. He is going to serve as our virtual actor in a practice use case of visiting your site for the first time to shop for services. He speaks both English and Spanish and has some college education, with a moderate amount of technical skills. John wears glasses. He has queried on Yahoo and Google to find a local service, and may be interested in other services. He likes bills to be in one unified place, and loves a deal. He has just come across your site through either his query results, or clicked on an ad in a local link to the right.

What the End User Finds
The first thing John noticed was the company logo, which he likes, it’s friendly and happy. After that your potential customer isn’t sure where to begin. The site lacks any visually compelling instruments – the text is mostly the same size and weight and the images are not the highest caliber – there is no clear personality.

All the information on the main page has the same visual weight with the exception of a central ad. Since he isn’t interested in ads, but in information, he avoids looking at them.[1] This is unfortunate but typical behavior because the information presented in the large central advertisements is exactly what he needs to know.

The fonts are generally the same, and the presentation style does not include indents and other visual direction to lead his eyes. John is used to the Web 2.0 look and feel so this site looks old fashioned, very dated to him. He isn’t quite sure which services the site or the company offers. He skips over anything which resembles an ad, and over much of the red text because it reminds him of an onscreen error or warning. At first he just wants to poke around a little to get a feel, before making a decision.

John clicks a link and then sees a form, so he clicks the browser back and selects another link. No matter what he clicks all link to the same form. He is frustrated because he just wants to browse and get a little more information before typing in any personally identifiable information.

What he notices are several things which stand out for no particularly good reason – they do not direct him to take action. John also notices for the first time that there is no option to turn on Spanish for the site, or to increase the font size so he may read it without glasses. He wonders why so much of the text is bright red when it is not urgent and he hasn’t yet clicked on it yet.[2]

His time is up on this site. John is disappointed, because the site is not fun, upbeat or modern. It does not function as he expected. He cannot find stuff, because he doesn’t want to look any more.This potential customer has not understood how great the prices are because he didn’t actually perceive them. John did not find the information he was seeking about a unified bill because that key information was buried below the fold and between too many other things of the same scale. As Dr. Jakob Nielsen put it, as information foragers:

“people like to get maximum benefit for minimum effort ... Progress must seem rapid enough to be worth the predicted effort required to reach the destination … your content [should] look like a nutritious meal and signal that it's an easy catch.”

John has not been converted to your services, and will be lead away by the ease of using search. He immediately searches again for a local service and discovers another company.[3]

John happens to notice the competitor’s site can be displayed in Spanish, which is great because his wife prefers reading sites in her first language Spanish. In the large central graphic he notices the link for the exact product he is looking for, which combined with the picture, makes him eager to click on it.

He is very pleased to see that he can get something he considers expensive for free on the site, so he clicks on the big image of it which reminds him that summer is coming. It makes him feel good. The options are well laid out and he actually wants one product because it is cutting edge– so he selects it and adds it to the shopping cart, even though he came to the site expressly to obtain other services for their new house.

John decides to read the top questions online for advice of how to optimize his budget and just get one bill with all the services they need. The help file answers almost every question he has. Returning to the main page he obtains service costs and other information by choosing a link that was mentioned in the self-service online help file.

Now he decides to comparison shop with competitor, which also turned up in his Google search.
This is the end of our visit with the persona John as a use case of visiting these sites for the first time. So where do we go from here? Back to information management, and analyzing what we have already seen.

Next time: How do we chunk together the data in a meaningful way, that makes it information?

[1] Jakob Nielsen, Top Ten Mistakes in Web Design 7. Anything That Looks Like an Advertisement http://www.useit.com/alertbox/9605.html/ accessed March 3, 2008

[2] Jakob Nielsen, Fancy Formatting, http://www.useit.com/alertbox/fancy-formatting.html/ accessed March 3, 2008

[3] Jakob Nielsen's Alertbox, June 30, 2003: Information Foraging: Why Google Makes People Leave Your Site Faster http://www.useit.com/alertbox/20030630.html/accessed March 3, 2008

Knowing Your End User Makes Your Company King

It's pretty simple - knowing about one's customer drives the business in decision making. Business earns revenue from customers. Business needs to know what customers need and want. Without this knowledge and the skill to use it they will not be able to conjure the means to effectively satisfy and ultimately attract and keep their customer.

Let’s bring this home with an example, say fixing dinner. What if you went to your folk’s house and your mom asked you to cook dinner, what would be your first step? Perhaps you would ask her, “What is available to cook?” You might crack open the refrigerator look in the cupboards, or even ask, “Who is coming to dinner?”, or “Will dad be home, does he want something grilled outside, do you think?”

What if you were staying at a friend’s house in Guadalajara, Mexico, with a Spanish speaker whose significant other is a vegetarian; would you ask more questions to begin with? Probably you would ask a lot more questions. Now, imagine you are a professional cook and your income for the next year will depend solely on how well the people eating the dinner you are about to cook enjoyed it. Now what kinds of questions would you ask?

Aha! Things become serious, because your job and income are at stake. As a professional chief you want to know as much as possible in as short of a time frame as you can discover about your diners. Questions would include –
“How much time do I have to select the food, shop for and prepare it?”
“Do your customers have allergies, what are their favorite foods?”
“What are these people like, are they adventurers?”
“What do they do for a living, how old are they, youth, male, female, are they professional food critics?”
and so forth might be the kinds of detailed questions you would ask. If the manager offered you their cell number so you could call them directly and ask, it is very likely that you would. In just the same way you can ask your end users questions and divine what you need to know.

Using Your Corporate Research
These same principles of inquiry that a cook uses to please their diners are used in user-centered design and development for your corporate site. Information that you have already gathered such as demographics of your customers, which pages receive the most hits, and what your business goals are for the future are all important things which we can use to help you make decisions on the information presented, functionality, and look and feel of your websites.

This is achieved by reasoning out who your customers are, gathering demographic and other information about them and from them, finding out what experts say, and investigating your competitor’s sites.

What Can Usability Advise?
There are experts in the field of usability and design that have studied thousands of websites and applications. What advice do they offer which may serve to inform your strategy?

In Web usability Jakob Nielsen is an acknowledged research leader because he has investigated so many sites, testing extensively in usability labs and field site visits using a variety of methods. Dr. Nielsen offers good advice about pitfalls to avoid:

The Top Ten Web Design Mistakes / Guidelines
1. Legibility Problems
2. Non-Standard Links
3. Flash
4. Content That's Not Written for the Web
Writing for the Web means making content short, scannable, and to the point (rather than full of fluffy marketese). Web content should also answer users' questions and use common language rather than made-up terms.
5. Bad Search
6. Browser Incompatibility
7. Cumbersome Forms
8. No Contact Information or Other Company Info
9. Frozen Layouts with Fixed Page Widths
10. Inadequate Photo Enlargement

The Ten Most Violated Homepage Design
1. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors
2. Use a liquid layout that lets users adjust the homepage size
3. Use color to distinguish visited and unvisited links
4. Use graphics to show real content, not just to decorate your homepage
5. Include a tag line that explicitly summarizes what the site or company does
6. Make it easy to access anything recently featured on your homepage
7. Include a short site description in the window title
8. Don't use a heading to label the search area; instead use a "Search" button to the right of the box
9. With statistics that change over time (stock quotes, etc), give the percentage of change, not just the points gained or lost
10. Don't include an active link to the homepage on the homepage
More importantly Dr. Nielsen also provides advice on what to do instead –

Top Ten Guidelines for Homepage Usability
Make the Site's Purpose Clear:
Explain Who You Are and What You Do
1. Include a One-Sentence Tagline
2. Write a Window Title with Good Visibility in Search Engines and Bookmark Lists
3. Group all Corporate Information in One Distinct Area
Help Users Find What They Need
4. Emphasize the Site's Top High-Priority Tasks
5. Include a Search Input Box
Reveal Site Content
6. Show Examples of Real Site Content
7. Begin Link Names with the Most Important Keyword
8. Offer Easy Access to Recent Homepage Features
Use Visual Design to Enhance, not Define, Interaction Design
9. Don't Over-Format Critical Content, Such as Navigation Areas
10. Use Meaningful Graphics

Summary:
A company's homepage is its face to the world and the starting point for most user visits. Improving your homepage multiplies the entire website's business value, so following key guidelines for homepage usability is well worth the investment.
…
Homepages are the most valuable real estate in the world.
…
A homepage's impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company's face to the world. Increasingly, potential customers will look at your company's online presence before doing business with you -- regardless of whether they plan to close the actual sale online.

While these are presented as hard and fast rules, really they are guidelines and jumping off points for discussion which leads to making every single decision about the strategy, content, and presentation of information on your business websites - portals, intranet, and extranet sites -- driven from a stated business goal.

Information Design Advisor
Jesse James Garrett is an experience design and information architecture author who views things from the other side of the creative viewpoint:
“Most people will tolerate a degree of impracticality in exchange for a measure of fun.”

”Trying to understand people by analyzing data is like trying to understand the shape of something by looking at its shadow.”

Next time: A persona makes a site visit ...

[1] Jakob Nielsen, The Top Ten Mistakes in Web Design http://www.useit.com/alertbox/designmistakes.html/ accessed March 3, 2008
[2] Jakob Nielsen, The Ten Most Violated Homepage Design Guidelineshttp://www.useit.com/alertbox/20031110.html/ accessed March 3, 2008
[3] Jakob Nielsen’ Alertbox, Top Ten Guidelines for Homepage Usability http://www.useit.com/alertbox/20020512.html/ accessed March 3, 2008
[4] You may enjoy a visit to Jesse James Garrett’s site as well - http://blog.jjg.net/ accessed March 5, 2008