Transcript Task Analysis #3 - Georgia Institute of Technology

Web Design vs. GUI Design
CS 160, Spring 2002
Professor James Landay
March 6, 2002
3/6/2002
1
Hall of Shame or Hall of
Fame?

College of Arts & Crafts

3/6/2002
http://www.ccac-art.edu/
2
Hall of Shame

College of Arts & Crafts


What is this page about?




tiny links at the very
bottom
scrolled off many
screens!
Second page…


3/6/2002
no first read
no value proposition
How do I navigate?


http://www.ccac-art.edu/
how do I do anything?
fonts so small you can’t
read at all on a high-res
monitor
3
Now improved….

College of Arts & Crafts


What is this page about?



tiny links at the very bottom
scrolled off many screens!
Second page…


3/6/2002
no first read
no value proposition
How do I navigate?



http://www.ccac-art.edu/
how do I do anything?
fonts so small you can’t read at all on
a high-res monitor
4
Hall of Shame, but why??
content gets
a small %
3/6/2002
5
Web Design vs. GUI Design
CS 160, Spring 2002
Professor James Landay
March 6, 2002
3/6/2002
6
Outline





Review
Example of value of good web design
Diffs between web & desktop UIs
Administrivia
Top ten mistakes in web design
3/6/2002
7
Review
 Personalization. Why?
 if content isn’t fresh, visitors won’t return
 four ways to collect information?
 edit, interview, deduce, collaborative filter
 Key idea to inverse-pyramid writing style?
 start with the conclusions & add details below
 Non-intuitive empirical results
 “readable” pages were less effective. why?
 users scan! – the style of links matters
 navigation must be linked to content. why?
 so users can predict where links will take them
 don’t violate the “sales script.” why?
 user’s must trust you before giving personal info
3/6/2002
8
Good Web Site Design can
Lead to Healthy Sales
 NY Times on IBM web site, 8/30/99
 “Most popular feature was … search … because people
couldn't figure out how to navigate the site“
 “The second most popular feature was the help button,
because the search technology was so ineffective.”
 After the redesign, use of the “help” button
decreased 84 percent, while sales increased 400
percent
 Good Web Site Design can Lead to Healthy Sales
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
3/6/2002
9
Jakob Nielsen
 Self-described Web Guru
 worked on Hypertext long before the web
 Great mailing list / archive site
 http://www.useit.com/alertbox/
 2 articles for today from this archive
3/6/2002
10
The Web Page Represents...
1) User's view of information on screen
2) Unit of navigation
 what you get when you click a link / bookmark
3) Address to get info. over net (URL)
4) Storage of the information
 on the server & the author's editing unit
 except embedded objects like images
 Page is an atomic unit unifying these concepts
3/6/2002
11
Desktop-based Wizard
3/6/2002
12
Web-based Wizard
3/6/2002
What is the difference?
13
Where is the Application &
the State?
 Back (previous) in desktop wizards
 typically undoes any changes made on that step
 Back on web pages
 is it the “back” button of the browser?
 server isn’t necessarily aware of it - no change to state
 is it the “back” link on the page?
 server could do something to state with this
 can you keep the user from using browser’s back?
 with some work… but not a good idea
 Clearly defined exits are important
 obvious on the desktop example, but not the web...
3/6/2002
14
Desktop Dialog Box
3/6/2002
15
Desktop-based Wizard
3/6/2002
16
Web-based Wizard
What are the differences?
3/6/2002
17
Where is the Application &
the State?
 Back (previous) in desktop wizards
 typically undoes any changes made on that step
 Back on web pages
 is it the “back” button of the browser?
 server isn’t necessarily aware of it - no change to
state
 is it the “back” link on the page?
 server could do something to its state
 can you keep the user from using browser’s back?
 with some work… but not a good idea
 Clearly defined exits are important
 obvious on the desktop example, but not the web...
3/6/2002
18
Desktop Dialog Box
3/6/2002
19
Web Dialog Box
3/6/2002
20
Web Dialog Box
What are the differences?
3/6/2002
21
“What am I Buying?”
 Desktop apps bring up dialogs boxes
 usually smaller than main window
 leave you context (below) about your main task
 Web apps bring you to a new page
 need to move back & forth to get context
 browser “forward” may lose old values after a “back”
 often a LARGE delay between page loads
 need to remember context over time!
3/6/2002
22
Solutions to the Context
Problem
 Repeat context
 add new information to the current page
 appears to the user as if page is expanding
 Optimize pages for loading speed
 reduce graphics
 improve server performance
3/6/2002
23
Other Differences
 Device diversity
 don’t know what they will be browsing on
Web
Server
Internet
3/6/2002
24
Other Differences
 The user controls navigation




users can take paths you never intended
come in via search engines directly to pages
bookmark favorite pages
email from friends
 Can’t depend on people starting from homepage
 Part of a whole experience
 users move between sites
 where are the borders? not as clear
3/6/2002
25
Administrivia
 Homework questions?
 We will have last assignment available for
pickup by end of week (will send email)
 Anything else on your mind?
 Team appointments for next week TBA
3/6/2002
26
Top Ten Mistakes in Web Design
Should be controversial - feel free to
disagree
Top Ten Mistakes in Web Design
1996, http://www.useit.com/alertbox/9605.html
3/6/2002
27
10. Overly Long Download Times
 10 second rule
 amount of wait time before users lose interest
 traditional human factors studies back this up
 15 seconds may be acceptable on web
 people are getting trained to endure
 but only for a few key pages
 True even for business sites
 busy during day & surf at home for work info
3/6/2002
28
9. Outdated Information
 Hire a web gardener for your team
 “root out the weeds and replant the flowers”
 Most people rather create content than
do maintenance
 Cheap way of enhancing content
 still relevant  link to new pages
 otherwise remove them
 Outdated content also leads to a lack of
trust (important for e-commerce)
3/6/2002
29
8. Non-standard Link Colors
 Links to
 pages that haven’t been seen are blue
 previously seen pages are purple/red
 Don't mess with these colors
 one of the few standard navigational aides
 consistency is important for learning
 don’t underline other objects with blue/red!
 OBVIOUS LINKS (K10)
 What is unfortunate about this convention?
3/6/2002
30
7. Lack of Navigation Support
 Users don’t know much about your site
 they always have difficulty finding information
 give a strong sense of structure and place
 Communicate site structure
 provide a site map
 so users know where they are & where they can go
 provide a good search feature
 the best navigation support will never be enough
 People now expect these
 site logo in upper left linked to home page
 LOCATION BREAD CRUMBS (K6) showing where you currently are
3/6/2002
31
What Might be Wrong Here?
3/6/2002
32
6. Long Scrolling Pages
 Many users do not scroll beyond visible section
when page comes up
 All critical content & navigation should be ABOVE
THE FOLD (I2)
 Leaf nodes can be longer
 people who have that interest will be reading it
 still good to be brief
 Becoming less of an issue
 top items will STILL dominate
 should be careful not to go past 3 screens max.
3/6/2002
33
What Might be Wrong Here?
3/6/2002
34
What Might be Wrong Here?
3/6/2002
35
5. Orphan Pages
 All pages should have a clear indication of what
web site they belong to
 users may not come in through your home page
 Every page should have
 a link up to your home page
 some indication of where they fit within the structure
of your information space
3/6/2002
36
What Might be Wrong Here?
3/6/2002
37
4. Complex URLs
 Shouldn’t have exposed machine address
 Users try to decode URLs of pages
 to infer the structure of web sites
 lack of support for navigation & sense of location
 URL should be human-readable
 names should reflect nature of the info. space
 sometimes need to type in URL->minimize typos
 use lower-case, short names with no special chars
• many people don't know how to type a ~
 Long URLs are hard to email properly
 wrapping, etc. *** biggest issue today ***
3/6/2002
38
What Might be Wrong Here?
3/6/2002
39
3. Constantly Running
Animations
 Don’t have elements that move
incessantly
 moving images have an overpowering effect
on the human peripheral vision
 no animations, scrolling text, marquees
 Users tune them out
 so do not put anything important there!
 Give your user some peace and quiet to
actually read the text!
3/6/2002
40
What Might be Wrong Here?
3/6/2002
41
2. Gratuitous use of
Bleeding Edge Technology
 Don’t try to attract people using it
 you’ll get the nerd crowd, but mainstream users care
about content and service
 If their system crashes
 they will never come back
 E.g., use VRML if your info maps to 3d
 architectural design or surgery planning
 Caveat: appropriate if selling those products
3/6/2002
42
What Might be Wrong Here?
3/6/2002
43
1. Using Frames
 Confusing for users
 breaks the user model of the web page
 sequence of actions rather than single act
 unit of navigation no longer equal to unit of view
 Lose predictability of user actions
 what information appears where when you click?
 can’t bookmark the current page & return to it
• fixed in Explorer 5
 URLs stop working
 can’t share with others (lose social filtering)
• emailing links still doesn’t work...
3/6/2002
44
Frames (cont.)
 Search engines have problems w/ frames
 what part of frames do you include in
indexes?
 Early surveys found most users preferred
frame-less sites
 recent surveys back this up ~70-90%
 Caveat: experienced designers can
sometimes use frames to good effect
3/6/2002
45
References
 Nielsen’s top 10 list (required reading)
 http://www.useit.com/alertbox/9605.html
 Web pages that suck
 http://www.webpagesthatsuck.com/
 Net tips for designers
 http://www.dsiegel.com/tips/
 User Interface Engineering
 http://www.uie.com
3/6/2002
46
Next Time
 Rapid prototyping
 "The Perils of Prototyping" by Alan Cooper
 Lewis & Rieman Ch. 6
3/6/2002
47