The Fine Art of Web Design

“We Want to Be the World’s Most Customer-Centric

Company”.Jeff Bezos | Amazon.com

How does that affect your Web Site Design?

Design is knowing your Core Target Audience!

Personalization.

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.

The Producer’s Triangle

Good

Cheap Fast

.

You can only have two!

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 Persona Example• Name• Context• Picture• Goals• Quote

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

Wire Frame Review

Mood Boards

Mood Boards

Mood Boards

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

UI Score Card

Initial Impression Clear?

Initial Impression Clear? Why?

Information Design

• Terminology clear and appropriate?• Information Stratification helpful?• Information rich and helpful?• Is the visual communication strong?

– (Here’s a great Tufte)

Terms Clear and Appropriate?

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

Stratification Comparison

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.

Is the attitude helpful?

Jeeves is trying to be helpful.

Nordstrom’s lost opportunity

Navigation and Access

• Is the Navigation Persistent?

• Is the Navigation Minimized?

• Does every Click Deliver?

Navigation Persistent?

www.goodwill.org3 clicks3 navigation schemes

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.

Does Every Click Deliver?

Input the necessary information,click to get your Price.

Wasted ClicksIncreasing your “click count” at the expense of the user is short sighted work.

Speaking of “Clicks”What ever happened to Amazon?

Remember their original site.. single row of tabs. No thought was necessary.

2nd Generation “Clicks”What ever happened to Amazon?

Double tabs, too many options, too confusing

3rd Generation “Clicks”What ever happened to Amazon?

(current) Now the navigation makes the user think too much .

Site Assessment

Step-1 Home page

Web sites are like a business, how will each click get me

closer to my goal?

Step 2-City siteWhere would you go?

Why does it seem like everything is screaming at me?

  

If this was a brick and mortarcompany each "click" would

be like having to go toa new room.

 

Step 3- Job tabsNote the 5 digit numerical pin number the user must remember.

Step 4- Register InfoI just registered, now I’m being told why?

Step 5- Sign in (interrogation)All forms are pesky and annoying…

You can either motivate a user or interrogate one!

Step 6- Pin numberDid you remember your pin number?

Step 8- Skill categories

Step 9- Skill Specific

Step 10- Job AgentThis means they will flood you with e-mails.

Step 11- Resume

Step 12- Registration

Step 13- Search

Step 14- Advance SearchCongratulations! You made it.

Comparative Access

The Elections (was it the web site?)

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

Visual Design

Where do you start?

Gather Content Voraciously

Know your Audience!

Less is More

Stay away from “I” and “Me” Words

Be clear and concise

Explore New Directions

You can be Weird, but not too Weird

The Epiphany

Where content meets the Target Audience.

The Epiphany

GEN-XAdjective List:Edgy, bold, animated, abstract, hip & cool, vague, arty, soft-sell

Fonts & palette:Contrasting colors, avant-garde,

experimental fonts

Gen-X

Gen-X

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

Baby Boomers

Baby Boomers

Content Meets Retirees

RETIREESAdjective List:Very human, kind, trustworthy, simple, no nonsense

Fonts & palette:Large, established, mellow

Retirees

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

Scheme 1

Scheme 2

Scheme 3

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

What matters:

Work Well TogetherBe Proud of your WorkKeep 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