The Frontier of User Experience
Jeffrey Veen
Long Live Webmonkey!
Lovejoy’s, 6pm (6th & Neches)
Hi, I'm remodeling my kitchen and buying new appliances. While researching my decisions, I visited your site to see how your refrigerators compared to other manufactures. One of the most important factors in my decision is the amount of energy the product uses -- but I couldn't find this information listed on your site anywhere. Am I not looking in the right place? -jeff
Dear Jeff, Thank you for visiting the Maytag Home Page. We welcome the opportunity to assist you. Please forward your model number and we can send the energy rating for the model. Eric Maytag Customer Service
Eric, I think you may be misunderstanding my query. I'm interested in buying a new refrigerator. One of my key decisionmaking points is the energy rating of the product. I'd like to be able to see the rating of all of your models on their respective product description pages. -jeff
Dear Jeff, Unfortunately, the energy ratings are not listed on the web page. Sorry for the inconvenience. Jennifer Maytag Customer Service
Jennifer, Right. I realize that. That's why I mentioned it. It's a pretty crucial decision-making point for a lot of people (including me). You should consider having your Web team add it to the standard product page. -jeff
Dear Jeff, Thank you for your comments regarding the Maytag.com Home Page. In the future, please include the model number of your Maytag appliance so that we may assist you more efficiently. Scott Maytag Customer Service
Feasibility
Viability
Desirability
Good design means following rules! My rules!
Top Ten “Guidelines” for Homepage Usability
Following are ten things you can do to “increase the usability” of your homepage and thus “enhance” your website's “business value.” 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 4. Emphasize the Site's Top HighPriority Tasks 5. Include a Search Input Box 6. Show Examples of Real Site Content 7. Begin Link Names with the Most Important Keyword 8. Offer Easy Access to Recent Homepage Features 9. Don't Over-Format Critical Content, Such as Navigation Areas 10. Use Meaningful Graphics
Jakob Nielson Alertbox, May 12, 2002 http://www.useit.com/alertbox/20020512.html
So, I can’t just follow the rules?
‘Obeying rules without an understanding of the reasons behind them creates an approximation of competence which leaves one vulnerable to the exceptions.’
Sea Kayaker's Deep Trouble
A Different Perspective
We have only experienced the point on the tip of the iceberg The Web may have best practices for design, but it is too early to depend on them exclusively There is no “One True Way” or “Four-Step Process”
• Sell more stuff • Make more profit • Increase brand awareness
company.com
• Get errands done • Find best price • Feel special
Defining User Centered Design
To develop an experience based on the patterns inherent in your stuff that empowers users to accomplish their goals.
It’s how we get a pile of stuff...
...into a structured experience.
This includes labeling...
Squares Squares Triangles Triangles Circles Circles
...and navigation systems...
...that are intuitive to users.
Squares
Triangles
Circles
Ah Ha!
But! Not all users have the same goals.
Shapes!
Colors!
So, good design lets many users...
...access lots of content...
...in many ways.
But this isn’t always as easy as it sounds...
However, classifications differ…
What do you call this?
Is it Coke? Pop? Soda?
http://www.ugcs.caltech.edu/~almccon/pop_soda/
“Coke”
“Pop”
“Soda”
But wait! There’s more...
fizz fris phosphate bubble-water lolly-water Tingle Fizz Fuzz mixer sweet drink tonic sodie cocola soder dopes
Design faces global issues...
Colors? Colours? ¿De Colores?
?
?
?
?
?
?
?
?
?
Design faces accessibility issues...
Colors
???
Design suffers from jargon...
Shapes WebBeanstm
?
?
?
?
?
?
?
?
?
This is often driven by marketing...
...or internal jargon creeps in.
Design suffers from politics...
???
Excellent!
User
CEO
Customers used to interact directly with departments...
Big Corp
A B C D E
But that doesn’t translate to the Web at all...
Big Corp
A B C D E
?
?
?
?
?
?
?
?
?
Design must also be extensible...
!?!
We don’t even know what else they’re doing…
!!!
Successful design comes from two approaches...
Top-down • Interview/observe users • Develop mental models • Derive site’s main areas Bottom-up • Inventory what you have • Develop a content model • Apply librarianship
Surface architecture comes from Mental Model
The Two Parts of IA, Diagrammed
Deep architecture comes from the Content Model
How do we help our users?
Does this change how we do design?
How an audience thinks about and approaches tasks and goals... …separate from a Web experience
What is a Mental Model?
Fill coffee maker with water Go to cafe for beans Measure and scoop grounds Find clean mug Clean out filter Wipe up counter Take first glorious sip Grind beans
Wait impatiently
What Does a Mental Model Look Like?
Research the Needs Research the Products
Set Requirements Set Feature Requirements Get Input from People within Company Research Corporate Needs Understand Existing Process Determine the ROI Solicit EndUser Input for Features Get Buy-In from Key Players Get Buy-In from IT Department Set Report Requirements Set Data Storage Requirements Set Security Requirements Find Out High-Level Information Set Technology Requirements Explore WebBased Solutions Explore Wireless Solutions Read Vendor Marketing Materials Distrust Marketing Material Attend Conferences Find Out What Other People Say Get Input from Other Customers Get Proposals Write Requests for Proposals
Find Vendors
Refine Requirements Refine Requirements Based on Research
Set Integration Requirements
Find Vendors
Read Proposals
Read Reviews
Yak yak yak yak yak yak yak yak yak yak yak yak kak yak yak yak....
Yak yak yak yak yak yak yak yak yak yak yak yak kak yak yak yak....
Yak yak yak yak yak yak yak yak yak yak yak yak kak yak yak yak....
Ah Ha!
Walls of Stickies
The Mental Model and Content Map
What a Mental Model Looks Like
Individual Tasks
Research the Needs Research the Products
Set Requirements
Set Feature Requirements
Get Input from People within Company Research Corporate Needs Understand Existing Process Determine the ROI Solicit EndUser Input for Features Get Buy-In from Key Players Get Buy-In from IT Department
Set Report Requirements Set Data Storage Requirements Set Security Requirements
Find Out High-Level Information Set Technology Requirements Explore WebBased Solutions Explore Wireless Solutions Read Vendor Marketing Materials Distrust Marketing Material Attend Conferences Find Out What Other People Say Get Input from Other Customers
Get Proposals Write Requests for Proposals
Find Vendors
Refine Requirements Refine Requirements Based on Research
Set Integration Requirements
Find Vendors
Read Proposals
Read Reviews
The individual tasks that people perform when attempting to achieve a larger goal
What a Mental Model Looks Like
Task Groups
Research the Needs Research the Products
Set Requirements
Set Feature Requirements
Get Input from People within Company Research Corporate Needs Understand Existing Process Determine the ROI Solicit EndUser Input for Features Get Buy-In from Key Players Get Buy-In from IT Department
Set Report Requirements Set Data Storage Requirements Set Security Requirements
Find Out High-Level Information Set Technology Requirements Explore WebBased Solutions Explore Wireless Solutions Read Vendor Marketing Materials Distrust Marketing Material Attend Conferences Find Out What Other People Say Get Input from Other Customers
Get Proposals Write Requests for Proposals
Find Vendors
Refine Requirements Refine Requirements Based on Research
Set Integration Requirements
Find Vendors
Read Proposals
Read Reviews
Tasks for the same goal grouped together
What a Mental Model Looks Like
Goal Collection
Research the Needs Research the Products
Set Requirements
Set Feature Requirements
Get Input from People within Company Research Corporate Needs Understand Existing Process Determine the ROI Solicit EndUser Input for Features Get Buy-In from Key Players Get Buy-In from IT Department
Set Report Requirements Set Data Storage Requirements Set Security Requirements
Find Out High-Level Information Set Technology Requirements Explore WebBased Solutions Explore Wireless Solutions Read Vendor Marketing Materials Distrust Marketing Material Attend Conferences Find Out What Other People Say Get Input from Other Customers
Get Proposals Write Requests for Proposals
Find Vendors
Refine Requirements Refine Requirements Based on Research
Set Integration Requirements
Find Vendors
Read Proposals
Read Reviews
The set of goals which together form a complete activity
Faucet Facet Finder
Innovation in Classification
The Mental Model and Content Map