The Five Planes of User Experience

When working with a user interface designer, or a ui designer is working with a client, there are 5 levels of looking at the ui design:

• 5: Surface Plane: web pages made up of images and text.
• 4: Skeleton Plane: the placement of buttons, tabs, images, and blocks of text.
• 3: Structure Plane: abstract structure of the site.
• 2: Scope Plane: features and functionality.
• 1: Strategy Plane: what the owners and users of the site want to achieve.

The five planes build from bottom to top.

The planes have slight nuances, depending on whether the (part of the) web site under design is task-
oriented or information-oriented.


Stagger Work on Planes
Do not wait for work on one plane to finish before starting on the next. There must be some degree of
iteration (feedback loop).
Work on a particular plane cannot finish before work on lower planes has finished.

Prof. Dr. Keith Andrews
http://courses.iicm.tugraz.at/iaweb/iaweb.pdf
Information Architecture and Web Usability
706.041 Information Architecture and Web Usability WS 2007/2008 3VU
Graz University of Technology
Inffeldgasse Austria

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

How to Start Thinking About Redesigning Your Corporate Site

Where Do We Start, What Will We Get?
Redesigning a customer facing corporate site is expensive, it can be a joy or it can be painful - how do we start thinking about it? What will we get, what can we expect?

Among the many variables in how to approach renovating existing business or customer facing websites, there are three top level considerations:
1. Information
2. Functionality
3. Look and Feel

What you sell drives your website’s look and feel. What your customers need to do on your website or with their information drives your site’s functionality. An entertainment and communication site for example, can be as lively, vigorous, and exciting as wished, as long as it presents the information your customers seek, in a way that is easy to find. It is said that:

“Beauty Communicates.”[1]

“Good design adds value faster than it adds cost.”[2]
“The Motorola RAZR is now selling at a rate of about four million units each month -- 1.5 per second. If Motorola spends another million or two improving the design, they can make it back in a day.” - Joel on Software

Look to your competitors. The larger they are -- the more money they have to invest in usability studies. A large business competitor such as ATT, or Amazon, is doing a great job communicating with their customer base on their websites in an organized and friendly way. They have probably performed a great deal of research around the presentation, and it only makes sense to adapt what they learned where it is appropriate to your firm. It is also a great idea to look at your smaller competitor’s sites, and the local ones.

First let’s talk about how to make decisions, how to make sure they are the right ones. Then, in later blogs we will find out what some experts advise, and do a walk through your site to contrast and compare to your competitor’s website, while gathering relevant ideas along the way.

Customers and Business Intelligence
The most important place to begin is with the customer, and discovering what they need or want through a Business Intelligence process.

Business Intelligence has three top level goals-
• Making better decisions faster
• Converting data into information
• Using a rational approach to management

Business Intelligence advises us to make business decisions based on well-informed logic -- that will meet or exceed our goals. Many goals even when realized do not immediately make money, but they generally point in that direction, or are goals which uncover ways to help earn money or satisfy our customers. In the case of a website redesign, the governing discipline of user interface, application design, and related decision making is Information Management; specifically user-centered design.

Measurement
You may also want to verify that the decisions made have a good return on investment by measuring them. The metrics of business intelligence which are useful and relevant to a decision, called key performance indicators (KPIs) are those things from which we may determine return on investment (ROI). On the Web this is related to Web analytics and conversion rates, which means the tracking data and its relationship to customers buying your products or services. These are most interesting because they can be traced, and over time, iteratively improved.

“Key Performance Indicators” and “Return On Investment” are fancy phrases for how you know you are right. Measurement is what keeps the iterative practices pointed in the right directions.

Information Management
Contemporary information management offers this sage advice –

Every single decision about the strategy, content, and presentation of information on business websites needs to be driven from a stated business goal.

Here 'websites' means portals, intranet, and extranet sites.

It is not possible to collect and evaluate all the relevant information required to make solid decisions at a reasonable price (time/effort), therefore reasonable inquiries, of the stakeholders, of the business goals, and of the end users requirements are needed to create the strategies which most align with those business goals and objectives.

So how is this achieved? The process begins by collecting business objectives from the different stakeholders, including the primary actual end users of the information on these sites. Business goals and users end goals may not be exactly the same, or may even appear diametrically opposed, e.g.:

Users and Their Goals
Business
Make Money
Add customers
Retain customers
Reduce support costs

Customer
Save Money
Get lots of usable stuff
Have Fun
Get information now

But the information collected can be used in a discovery process which shows us how to please both parties. A fundamental information management design statement is:

“Know your user ... and you are not your user.”

That last part is most important to designers and decision makers who may believe that they know what their end users want without asking them.

"You are not your end user."

The intention of such a whimsical and obvious fact is to help drive home the point that businesses must discover who their end users, that is, their customers are; what are their demographics: ages, genders, locations, etc? What are their wants, needs, limitations, communities? What are their languages, technical skill levels, attention span, interest level, and so forth?

For example, how many of your end users encounter accessibility issues online? Any of these things may be turned into a business advantage:

"Enabling accessible technology is a growth opportunity, it meets customer needs, and it's the right thing to do … As the Baby Boom generation ages, more and more people will face the challenges of reduced dexterity, vision, and hearing. So enabling accessible technology is a growth opportunity... [3] “ Steve Ballmer (CEO of Microsoft), 2001, Businessweek.com

You may inquire about your users in a variety of ways, but all of them include asking the customer for input or feedback, some even without them knowing. You want to learn to “See through your customers' eyes.”[4]

What Methods Do Big Companies Use to Know Their Customers?
· Amazon conducts a form of choice modeling[5], called A/B testing live on its site – does the user chose A or B?, which one the end user actually selects drives how the information about the product is presented. They have a large in-house UI design team.

· Premera (Blue Cross + Blue Shield insurance) meets in person with a selection of its end users, brokers for example, and asks them what they want. They contract with specialist companies to conduct usability testing.

· Classmates meets with end users and asks them in person among other things, if certain functionality was available would they pay for it?

· Microsoft uses a wide variety of tools and skills, including extensive user interface testing, Web surveys, customer feedback forms, opt-in PII data and error collection. They outsource a great deal of their backend and UI design, and they have several internal usability teams. They design new standards.

Why do companies do all this work to discover what the user wants and who they are?

The end user is king.

Knowing about the customer drives the business in their decision making. Business earns revenue from customers. If a business does not know their customer, they will not know what they need and want. Without this knowledge and the skill to use it businesses will not be able to conjure the means to effectively satisfy and ultimately attract and keep their customer.

Next time:
An example, and next steps ...

[1] Paul Moment, http://www.electroglyph.com/, "Beauty Communicates" company tagline, Seattle, Washington, 2005

[2] "Thomas Gale, a well-known automobile designer for Chrysler, put it well when he said, "Good design adds value faster than it adds cost." "
http://www.joelonsoftware.com/design/1stDraft/01.html/ accessed March 7, 2008.

[3] A Chat with Microsoft's Steve Ballmer, Businessweek.com, http://www.businessweek.com/bwdaily/dnflash/jun2001/nf20010613_081.htm/ accessed March 3, 2008

[4] Kelly Fraznick, Blink IA, http://www.blinkia.com/, "See through your customers' eyes" company tagline, Seattle, Washington.

[5] Choice Modeling definition, wikipedia, http://en.wikipedia.org/wiki/Choice_Modelling accessed March 3, 2008.

Hello World

Hello World!