Download - Principles of Web Usabilty II - Fall 2007
![Page 1: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/1.jpg)
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
![Page 2: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/2.jpg)
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
![Page 3: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/3.jpg)
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
![Page 4: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/4.jpg)
If your web site people wo
October 16, 2006
is too hard to use…on’t use it.
![Page 5: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/5.jpg)
![Page 6: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/6.jpg)
![Page 7: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/7.jpg)
![Page 8: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/8.jpg)
![Page 9: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/9.jpg)
![Page 10: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/10.jpg)
![Page 11: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/11.jpg)
![Page 12: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/12.jpg)
Amazon’s Four ThingsAmazon s Four Things
1. Powerful Search1. Powerful Search2. Exhaustive Information3 Clean3. Clean4. Simple Conversion
October 16, 2006
ss
n
![Page 13: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/13.jpg)
![Page 14: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/14.jpg)
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
![Page 15: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/15.jpg)
![Page 16: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/16.jpg)
![Page 17: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/17.jpg)
Airlines FormulaAirlines Formula
1. Good Usability…1. Good Usability…2. Leads to Conversions3 Sell More Save $$3. Sell More, Save $$
October 16, 2006
…
![Page 18: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/18.jpg)
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
![Page 19: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/19.jpg)
![Page 20: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/20.jpg)
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.
![Page 21: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/21.jpg)
![Page 22: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/22.jpg)
![Page 23: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/23.jpg)
Low home page entrance
Large Trailing Tail
![Page 24: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/24.jpg)
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%)
![Page 25: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/25.jpg)
![Page 26: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/26.jpg)
![Page 27: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/27.jpg)
![Page 28: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/28.jpg)
![Page 29: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/29.jpg)
![Page 30: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/30.jpg)
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
![Page 31: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/31.jpg)
![Page 32: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/32.jpg)
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
![Page 33: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/33.jpg)
![Page 34: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/34.jpg)
![Page 35: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/35.jpg)
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
![Page 36: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/36.jpg)
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
![Page 37: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/37.jpg)
![Page 38: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/38.jpg)
![Page 39: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/39.jpg)
![Page 40: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/40.jpg)
![Page 41: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/41.jpg)
![Page 42: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/42.jpg)
![Page 43: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/43.jpg)
![Page 44: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/44.jpg)
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
![Page 45: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/45.jpg)
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.
![Page 46: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/46.jpg)
WebDesignersDesigners
![Page 47: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/47.jpg)
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
![Page 48: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/48.jpg)
WebDesigners ExecutivesDesigners
![Page 49: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/49.jpg)
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
![Page 50: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/50.jpg)
WebDesigners Executives PDesigners P
IT rofessionalsrofessionals
![Page 51: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/51.jpg)
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
![Page 52: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/52.jpg)
WebDesigners Executives PDesigners P
IT rofessionals
MarketingProfessionalsrofessionals Professionals
![Page 53: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/53.jpg)
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’
![Page 54: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/54.jpg)
Aim for sim
The truth is…simp
mplicity
plicity is hard
![Page 55: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/55.jpg)
Group UsaCan you
ability Studyu find…
![Page 56: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/56.jpg)
October 16, 2006
![Page 57: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/57.jpg)
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
![Page 58: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/58.jpg)
Usability TestingUsability Testing
• InformalInformal • Low cost and effective
A f 3 5• As few as 3-5 userse
![Page 59: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/59.jpg)
![Page 60: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/60.jpg)
![Page 61: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/61.jpg)
![Page 62: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/62.jpg)
![Page 63: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/63.jpg)
![Page 64: Principles of Web Usabilty II - Fall 2007](https://reader034.vdocument.in/reader034/viewer/2022051611/54b38a2d4a795968368b460b/html5/thumbnails/64.jpg)
“It’s not the numit’s how hard eit s how hard e
mber of clicks... each click is!”each click is!
- Steve Krugg