the fine art of web design. “we want to be the world’s most customer-centric company”. jeff...
TRANSCRIPT
“We Want to Be the World’s Most Customer-Centric
Company”.Jeff Bezos | Amazon.com
How does that affect your Web Site Design?
First, lets build the Creative Team
Project Management “We are going to do “X”, using these people, in this amount of time”
UI Strategy | Information Architecture“Let’s start by focusing on the essential scenario. This feature serves the goals of the end user because…”
Visual Design“These are the typography, the palette, and the iconography that are
right for the target audience.”
Content Management“I can’t believe the client hasn’t sent us all the copy text yet and
they’re asking us to have a completed site by next week.”
Web Production“We are going to code this in HTML assuming a 4.0 browser and above.
Later we’ll make the flash movie.”
Discovery & Design Phase
Depth = Time
The opportunity costs for cutting a project short and finding short
cuts.
Using Methodology
• Discovery– Client Materials– Contextual Inquiry– Personas
• Design– White Board– Wire Frames/Mood Boards– Visual Design – Presenting your Work
Contextual InquiryObserve and interview end users in the
environment they will use the product/service.
What people say they do and what they actually do are often quite different.
Personas Represent the Audience
Target Audience
Persona
For More About Personas and Goal Directed Design,
refer to Alan Cooper’s book The Inmates are Running the Asylum.
A Powerful Tool
Personas are a design tool to help: • Summarize what you learn• Focus the entire team (Marketing,
Business, Technology, Operations)• Communicate!
End the Feature Creep
“Let’s make a community board.”“The competitive products all do that.”
“That would be cool.”“No the user doesn’t want that.”
“My grandmother can’t use pull down menus.”“Not all old people have a problem with that.”
“The user wants rasterized imaging.”
Personas, and their goals, help the team quickly determine a clear and compelling feature set.
Design for Goals, not Tasks
Dr. Bernard’s Goals:Be a Good MotherHeal Her PatientsBalance Work and Family
One of Dr. Bernard’s Tasks:Order Prescriptions (She resents the time she wastes on the phone navigating phone trees and staying on hold listening to annoying store promos.)
An Example of Task vs. Goal
A Prescription Ordering Service
• A task based solution- allows her to order drugs. (click here, drop down there)
• A goal based solution- allows her to order drugs and gives her the option to receive the latest information about drugs that are new to her, thereby addressing her goal to heal patients.
Interaction DesignBy sketching first, you can
run through lots of ideas quickly.
• White Board, Wire Frame, Mood Boards
Interactive Judging
Let’s have a dialog about good UI design and why it enriches our
work, and helps all of us get better.
What we designers think about...
Judging Interaction Design
Some important criteria:– Initial Impression– Information Design– Navigation and Access– Overall Experience– Experience Over Time
Information Design
• Terminology clear and appropriate?• Information Stratification helpful?• Information rich and helpful?• Is the visual communication strong?
– (Here’s a great Tufte)
Information Stratification
Organize information to minimize navigation.
Top: Provides rich summary information, allowing the user to evaluate their interest in the offering.
Middle: Provides full detail about the offering, allowing the user to make a decision.
Bottom: Provides interesting related information, allowing the user to further explore.
Screen
Screen
Screen
Stratification Comparison
Date
Location
Title
Company
Pay Rate
Job Summary
Full Job DescriptionComputerjobs.com provides dense summary information, allowing the user to evaluate their interest in the offering on the first screen.
To evaluate their interest in a job posted on monster.com, the user must navigate back and forth, back and forth.
Navigation and Access
• Is the Navigation Persistent?
• Is the Navigation Minimized?
• Does every Click Deliver?
Navigation Minimized?
Navigation is a competitive attribute.
www.computerjobs.com
www.techies.com
Less navigation meansyour target users get
where they want to go faster.
Speaking of “Clicks”What ever happened to Amazon?
Remember their original site.. single row of tabs. No thought was necessary.
3rd Generation “Clicks”What ever happened to Amazon?
(current) Now the navigation makes the user think too much .
Step 5- Sign in (interrogation)All forms are pesky and annoying…
You can either motivate a user or interrogate one!
Internet Advisory Boards
BushMichael DellJim BarksdaleFloyd KvammeAdvice:“Make sure you can email, make it easy to use”
GoreBill JoyJohn DoerrKim PoleseAdvice:“Offer stuff to kids. Have lots of icons and links”
Will these URL’s win the Election?
www.RealPlansforRealPeople.comwww.GoreWillSayAnything.comwww.IKnowWhatYouDidinTexas.comwww.GeorgeBushisaLittleJerk.comwww.AlBoreisasStiffasaBoard.com
The Epiphany
GEN-XAdjective List:Edgy, bold, animated, abstract, hip & cool, vague, arty, soft-sell
Fonts & palette:Contrasting colors, avant-garde,
experimental fonts
Content meets Boomers
BABY BOOMERSAdjective List:Clear, concise, human, life style, consumption, fashion, not edgy, not conservative
Fonts & palette:Soothing colors, friendly fonts, recognizable and familiar
Content Meets Retirees
RETIREESAdjective List:Very human, kind, trustworthy, simple, no nonsense
Fonts & palette:Large, established, mellow
The Target Audience Inspires
The imagery is quite different
The visual messaging is different The design is quite different
Presenting Your WorkExperts At What We Do!
• Acting like Experts
• An Expert process
• Communicating our Expertise
Act like an Expert!Experts Don’t Ask
The client to decide:– What is the best visual design– What navigation scheme is right– What features should be included
Some studios show their clients multiple schemes and ask the client to decide
Experts Know
Presenting drastically different design solutions
show a lack of design vision and commitment!
Experts Know
• What is the right visual imagery• What is the right feature set• What navigation scheme is right• What the page layout should be
Experts know what is right and why, because they know the target
audience.
Presenting your Work
Have a firm understanding of the target audience, grounded in primary research
Present the site architecture and explain why it is right for the target audience
Present the visual design and explain why it is right for the audience