The Fine Art of Web Design

The Fine Art of Web Design

“We Want to Be the World’s Most Customer-Centric Company”.Jeff Bezos | Amazon.comHow 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 You can only have two! Good CheapFast .

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

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.

Target Audience • Persona Personas Represent the Audience 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 Mother Heal Her Patients Balance 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 Design By sketching first, you can run through lots of ideas quickly. • White Board, Wire Frame, Mood Boards

Wire Frame Review

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 theirinterestin 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

Stratification Comparison

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 theirinterestin the offering on the first screen.

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.org 3 clicks 3 navigation schemes

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

Does Every Click Deliver? Input the necessary information, click to get your Price.

Wasted Clicks Increasing 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 site Where would you go? Why does it seem like everything is screaming at me?

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

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

Step 4- Register Info I 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 number Did you remember your pin number?

The Fine Art of Web Design