The Fine Art of Web Design

1
The Fine Art of Web Design
2
We Want to Be the Worlds Most Customer-Centric
Company.Jeff Bezos Amazon.comHow does that
affect your Web Site Design?
3
Design is knowing your Core Target
Audience!Personalization.
4
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
• Lets 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 cant believe the client hasnt sent us all
  the copy text yet and theyre 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 well make the flash
  movie.

5
Discovery Design Phase

• Depth Time
• The opportunity costs for cutting a project short
  and finding short cuts.

6
The Producers Triangle
You can only have two!

• Good
• Cheap Fast
• .

7
Using Methodology

• Discovery
• Client Materials
• Contextual Inquiry
• Personas
• Design
• White Board
• Wire Frames/Mood Boards
• Visual Design
• Presenting your Work

8
Contextual Inquiry

• Observe 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.

9
Personas Represent the Audience
For More About Personas and Goal Directed Design,
refer to Alan Coopers book The Inmates are
Running the Asylum.
10
A Persona Example

• Name
• Context
• Picture
• Goals
• Quote

11
A Powerful Tool

• Personas are a design tool to help
• Summarize what you learn
• Focus the entire team (Marketing, Business,
  Technology, Operations)
• Communicate!

12
End the Feature Creep

• Lets make a community board.
• The competitive products all do that.
• That would be cool.
• No the user doesnt want that.
• My grandmother cant 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.

13
Design for Goals, not Tasks

• Dr. Bernards Goals
• Be a Good Mother
• Heal Her Patients
• Balance Work and Family
• One of Dr. Bernards Tasks
• Order Prescriptions
• (She resents the time she wastes on the phone
  navigating phone trees and staying on hold
  listening to annoying store promos.)

14
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.

15
Interaction Design

• By sketching first, you can run through lots of
  ideas quickly.
• White Board, Wire Frame, Mood Boards

16
Wire Frame Review
17
Mood Boards
18
Mood Boards
19
Mood Boards
20
Mood Boards
21
Interactive Judging

• Lets 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...

22
Judging Interaction Design

• Some important criteria
• Initial Impression
• Information Design
• Navigation and Access
• Overall Experience
• Experience Over Time

23
UI Score Card
24
Initial Impression Clear?
25
Initial Impression Clear? Why?
26
Information Design

• Terminology clear and appropriate?
• Information Stratification helpful?
• Information rich and helpful?
• Is the visual communication strong?
• (Heres a great Tufte)

27
Terms Clear and Appropriate?
28
Information Stratification

• Organize information to minimize navigation.

Top Provides rich summary information,
allowing the user to evaluate their interest in
the offering.
Screen
Middle Provides full detail about the offering,
allowing the user to make a decision.
Screen
Bottom Provides interesting related
information, allowing the user to further explore.
Screen
29
Stratification Comparison
30
Stratification Comparison
31
Stratification Comparison

• Date
• Location
• Title
• Company
• Pay Rate
• Job Summary
• Full Job Description

To evaluate their interest in a job posted on
monster.com, the user must navigate back and
forth, back and forth.
Computerjobs.com provides dense summary
information, allowing the user to evaluate their
interest in the offering on the first screen.
32
Is the attitude helpful?
33
Jeeves is trying to be helpful.
34
Nordstroms lost opportunity
35
Navigation and Access

• Is the Navigation Persistent?
• Is the Navigation Minimized?
• Does every Click Deliver?

36
Navigation Persistent?

• www.goodwill.org
• 3 clicks
• 3 navigation schemes

37
Navigation Minimized?

• Navigation is a competitive attribute.

Less navigation means your target users get where
they want to go faster.
www.computerjobs.com
www.techies.com
38
Does Every Click Deliver?
Input the necessary information, click to get
your Price.
39
Wasted Clicks
Increasing your click count at the expense of
the user is short sighted work.
40
Speaking of Clicks

• What ever happened to Amazon?
• Remember their original site.. single row of
  tabs. No thought was necessary.

41
2nd Generation Clicks

• What ever happened to Amazon?
• Double tabs, too many options, too confusing

42
3rd Generation Clicks

• What ever happened to Amazon?
• (current) Now the navigation makes the user think
  too much .

43
Site Assessment

• Step-1 Home page

44

• Web sites are like a business,
• how will each click get me
• closer to my goal?

45
Step 2-City site

• Where would you go?
• Why does it seem like everything is screaming at
  me?

46

•  
•  
• If this was a brick and mortar
• company each "click" would
• be like having to go to
• a new room.
•  

47
Step 3- Job tabs
Note the 5 digit numerical pin number the user
must remember.
48
Step 4- Register Info
I just registered, now Im being told why?
49
Step 5- Sign in (interrogation)
All forms are pesky and annoying You can either
motivate a user or interrogate one!
50
Step 6- Pin number
Did you remember your pin number?
51
Step 8- Skill categories
52
Step 9- Skill Specific
53
Step 10- Job Agent
This means they will flood you with e-mails.
54
Step 11- Resume
55
Step 12- Registration
56
Step 13- Search
57
Step 14- Advance Search
Congratulations! You made it.
58
Comparative Access
59
The Elections (was it the web site?)
60
Internet Advisory Boards

• Bush
• Michael Dell
• Jim Barksdale
• Floyd Kvamme
• Advice
• Make sure you can email, make it easy to use

Gore Bill Joy John Doerr Kim Polese Advice Offer
stuff to kids. Have lots of icons and links
61
Will these URLs win the Election?

• www.RealPlansforRealPeople.com
• www.GoreWillSayAnything.com
• www.IKnowWhatYouDidinTexas.com
• www.GeorgeBushisaLittleJerk.com
• www.AlBoreisasStiffasaBoard.com

62
Visual Design

• Where do you start?

63
Gather Content Voraciously
64
Know your Audience!
65
Less is More
66
Stay away from I and Me Words
67
Be clear and concise
68
Explore New Directions
69
You can be Weird, but not too Weird
70
The Epiphany

• Where content meets the Target Audience.

71
The Epiphany

• GEN-X
• Adjective List
• Edgy, bold, animated, abstract,
• hip cool, vague, arty, soft-sell
• Fonts palette
• Contrasting colors, avant-garde, experimental
  fonts

72
Gen-X
73
Gen-X
74
Content meets Boomers

• BABY BOOMERS
• Adjective List
• Clear, concise, human, life style, consumption,
• fashion, not edgy, not conservative
• Fonts palette
• Soothing colors, friendly fonts, recognizable
• and familiar

75
Baby Boomers
76
Baby Boomers
77
Content Meets Retirees

• RETIREES
• Adjective List
• Very human, kind, trustworthy, simple,
• no nonsense
• Fonts palette
• Large, established, mellow

78
Retirees
79
The Target Audience Inspires

• The imagery is quite different
• The visual messaging is different
• The design is quite different

80
Presenting Your Work

• Experts At What We Do!
• Acting like Experts
• An Expert process
• Communicating our Expertise

81
Act like an Expert!

• Experts Dont 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

82
Scheme 1
83
Scheme 2
84
Scheme 3
85
Experts Know

• Presenting drastically
• different design solutions show a lack of design
  vision and commitment!

86
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.

87
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

88
What matters Work Well Together Be Proud of
your Work Keep Clients Delighted I wanted to
hang out with bright people, do cool work for
demanding clients, and have a good time doing
so. Erik Spiekermann, MetaDesign