Principles oPrinciples oStrategy and Desgy

PresePatrick Bieser Sr PresidePatrick Bieser Sr., Preside

f Usability IIf Usability IIsign for Web Sitesg

ent by ent Northwoods Softwareent Northwoods Software

Who am I?Who am I?

• Created hundreds of weCreated hundreds of we• Search logs and web site• Usability studies• Usability studies• Usability books• Made mistakes• Made mistakes• Studied best / most succ

M d D d b• Mom and Dad are web u• User (just like you)

March 14, 2007

b sitesb sitese statistics

cessful sitesusers

Summary of Today’s PSummary of Today s P• Lots of little things

• McDonalds• Examplesa p es• User behaviors

M l• More examples• Usability testing

• Fixes cost 75% less b• No “right” way. It depo g ay dep

October 16, 2006

PresentationPresentation

before launchpends. pe ds

If your web site people wo

October 16, 2006

is too hard to use…on’t use it.

Amazon’s Four ThingsAmazon s Four Things

1. Powerful Search1. Powerful Search2. Exhaustive Information3 Clean3. Clean4. Simple Conversion

October 16, 2006

ss

n

Craig’s List – Three ThCraig s List Three Th

1 Instant ‘Get it’1. Instant Get it2. Content is Navigation3 Simple Conversion3. Simple Conversion

October 16, 2006

hingshings

Airlines FormulaAirlines Formula

1. Good Usability…1. Good Usability…2. Leads to Conversions3 Sell More Save $$3. Sell More, Save $$

October 16, 2006

…

UsersUsers

• Scan - they’re in a hScan they re in a h• Are goal-oriented

G t f t t d il• Get frustrated easily• Dislike choices that • Are easily disoriente

October 16, 2006

hurryhurry

yrequire thinking

ed

Aoccdrnig to a rscheeAoccdrnig to a rscheeUinervtisy, it deosn't the ltteers in a wrod athe ltteers in a wrod aiprmoatnt tihng is tahltt b t th hitltteer be at the rghit pthe huamn mnid deosby istlef, but the wrod

earch at Cmabrigdeearch at Cmabrigde mttaer in waht oredr are the olnyare, the olny ht the frist and lsat

l Tih i bpclae. Tihs is bcuseae s not raed ervey lteter d as a wlohe.

Low home page entrance

Large Trailing Tail

First 5 SecondsFirst 5 Seconds

S /• Use Search / Key App• Scan the home page p g• Mixed strategies (site

October 16, 2006

( %)plication (50%)and click (30%)( ) map, etc.) (20%)

Writing for the WebWriting for the Web

• Write to be scanned• One thought per para

especially on home pa– especially on home pa• Cut your words in half• Use graphic accents t

– Not to show off your gy g• “Flytrap” your content

March 14, 2007

agraph ageagef then cut againto draw attention

graphic skillgt

Web Page TipsWeb Page Tips

• No marketing lingo or• No “happy talk” or ins• Show don’t tell!• Show – don t tell!

October 16, 2006

r brands in navigationstructions

Home Page - IHome Page I

• Don’t make content lo• Skip “Welcome!” mes

Magic 7• Magic 7• Group Corporate stuff

– about us, stock price, • Group Utilitiesp

– search, site map, login• Graphics: less is more• Graphics: less is more

– 5% - 15%

October 16, 2006

ook like an Adssages

ffcontact us, jobs, etc.

n, etc.ee

Home Page - IIHome Page II

• Avoid navigation redug– waste of space

Use conventions of po• Use conventions of po– search– site map – breadcrumbsbreadcrumbs– logo click takes you

October 16, 2006

undancyy

opular sitesopular sites

u to Home Page

Summary of LessonsSummary of Lessons

Key Ratiosy• Content (Substance) 90%• Conventions 75% to CreConventions 75% to Cre• Simplicity = Usability• Usability = Successful W• Usability = Successful W

s So Fars So Far

% to Brand (Sizzle) 10%eative 25%eative 25%

WebsiteWebsite

The DifferencesThe DifferencesThe purpose of non-web• Grab eyeballs• Grab eyeballs• Create an impression• Build brand awareness• Drive conversions (i.e. go toThe purpose of a website• Offer intuitive and useful info

annoying or confusing your reach a goal page and convg p g

b marketing

o your website)eormation, without visitor, so they will

vert.

WebDesignersDesigners

Stereotypes of Key InfStereotypes of Key Inf

Web DesignersWeb Designers• Are not normal• They are power usersy p• Don’t think / behave like our au• Went to school to learn: visual

marketing for print TV radiomarketing for print, TV, radio. • Not taught about the web • Hire to be creative and clever, ,

fluencersfluencers

udiencesdesign, branding and

not to follow conventions

WebDesigners ExecutivesDesigners

Stereotypes of Key InfStereotypes of Key Inf

Directors / ExecutivesDirectors / Executives• Have a skewed list of favorite w• Want more “Sizzle”• Listen to well meaning people t

skewed list of favorite web sites• Need to be patiently educated

fluencersfluencers

web sites

they trust (who also have a s)by credible sources

WebDesigners Executives PDesigners P

IT rofessionalsrofessionals

Stereotypes of Key InfStereotypes of Key Inf

IT ProfessionalsIT Professionals• Web is a technology• Branding? Usability? WhatevBranding? Usability? Whatev• Tools, certifications, and integr• Need to have their web sensiti

increased by credible sources

fluencersfluencers

ver….ver….ration needsivity patiently y p y

WebDesigners Executives PDesigners P

IT rofessionals

MarketingProfessionalsrofessionals Professionals

Stereotypes of Key InfStereotypes of Key Inf

Marketing TypesMarketing Types• Put too much emphasis on look• See the web as an extension oSee the web as an extension o• Assume print and web are mos• Need to read ‘Don’t Make Me T

fluencersfluencers

k and feel of their branding initiativesof their branding initiativesstly the sameThink’

Aim for sim

The truth is…simp

mplicity

plicity is hard

Group UsaCan you

ability Studyu find…

October 16, 2006

Usability MethodsUsability Methods• Card Sorting:

G t d d– Group top and second– Name them

C t Sit• Current Site: – Ten tasks

T lk t l d– Talk out loud – Tape it

P P t t• Paper Prototype: – What would you click o

• Look at web / search l• 80% of 80%

d i tid navigation

on?logs

Usability TestingUsability Testing

• InformalInformal • Low cost and effective

A f 3 5• As few as 3-5 userse

“It’s not the numit’s how hard eit s how hard e

mber of clicks... each click is!”each click is!

- Steve Krugg