Web Design vs. GUI Design

1
Web Design vs. GUI Design

• Professor James Landay
• Carnegie Mellon
• Updated by Melody Moore Jackson 11/15/06

2
Hall of Shame or Hall of Fame?

• College of Arts Crafts
• http//www.ccac-art.edu/

3
Hall of Shame

• College of Arts Crafts
• http//www.ccac-art.edu/
• What is this page about?
• no first read
• no value proposition
• How do I navigate?
• tiny links at the very bottom
• scrolled off many screens!
• Second page
• how do I do anything?
• fonts so small you cant read at all on a
  high-res monitor

4
Now improved.

• College of Arts Crafts
• http//www.ccac-art.edu/
• What is this page about?
• no first read
• no value proposition
• How do I navigate?
• Links are more clear

5
Hall of Shame, but why??
content gets a small
6
Web Design vs. GUI Design

• Review
• Example of value of good web design
• Diffs between web desktop UIs
• Top ten mistakes in web design

7
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/co
  mmerce/30commerce.html

8
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

9
Desktop-based Wizard
10
Web-based Wizard
What is the difference?
11
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 isnt 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 browsers back?
• with some work but not a good idea
• Clearly defined exits are important
• obvious on the desktop example, but not the web...

12
Desktop Dialog Box
13
Web Dialog Box
14
Web Dialog Box
What are the differences?
15
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!

16
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

17
Other Differences

• Device diversity
• dont know what they will be browsing on

Web Server
Internet
18
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
• Cant depend on people starting from homepage
• Part of a whole experience
• users move between sites
• where are the borders? not as clear

19
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
20
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

21
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)

22
8. Non-standard Link Colors

• Links to
• pages that havent 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
• dont underline other objects with blue/red!
• OBVIOUS LINKS (K10)
• What is unfortunate about this convention?

23
7. Lack of Navigation Support

• Users dont 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 showing where you currently
  are

24
Navigation

• Left-justified or top-justified navigation rail
• Needs to be a contrasting color
• Fitts law place navigation close to scroll bar
• Content should start on the left
• http//www.amazon.com

25
Navigation

• Location breadcrumb trail
• Usually across top under navigation bar
• http//www.usdf.org

26
What Might be Wrong Here?
27
Mystery Meat Navigation
http//www.customstaffinginc.com/
28
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.

29
What Might be Wrong Here?
30
What Might be Wrong Here?
31
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

32
What Might be Wrong Here?
33
4. Complex URLs

• Shouldnt 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

34
What Might be Wrong Here?
http//www.neiu.edu/fldept/flanglab/
35
3. Constantly Running Animations

• Dont 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!

36
What Might be Wrong Here?
http//www.mjau-mjau.com/classic.html
37
2. Gratuitous use of Bleeding Edge Technology

• Dont try to attract people using it
• youll 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

38
What Might be Wrong Here?
39
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?
• cant bookmark the current page return to it
• fixed in Explorer 5
• URLs stop working
• cant share with others (lose social filtering)
• emailing links still doesnt work...

40
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

41
References

• Nielsens top 10 list (required reading)
• http//www.useit.com/alertbox/9605.html
• Web pages that are interesting
• http//www.bloatedyak.com/
• Net tips for designers
• http//www.dsiegel.com/tips/
• User Interface Engineering
• http//www.uie.com

42
In-Class Exercise

• Look through the site
• www.websitesthatsuck.com
• Choose a worst website and evaluate it against
  the ten top website design mistakes