1. Web Design vs. GUI Design
Professor James Landay
Carnegie Mellon
Updated by Melody Moore Jackson 11/15/06
3/6/2002

2. Hall of Shame or Hall of Fame?
College of Arts & Crafts
California College of Arts and Crafts original website
3/6/2002

3. Hall of Shame College of Arts & Crafts What is this page about?
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 can’t read at all on a high-res monitor
Interesting mechanism, artistic, but very hard to understand
3/6/2002

4. Now improved…. College of Arts & Crafts What is this page about?
What is this page about?
no first read
no value proposition
How do I navigate?
Links are more clear
Updated in 2002
3/6/2002

5. Hall of Shame, but why?? content gets a small %
What is the focus of this page? How much of the page is actually devoted to the real focus? What is the rest of the page devoted to?
3/6/2002

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
Web user interfaces and GUI user interfaces have some major differences which are important for usability
3/6/2002

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
In the early days of the web, sites were commonly hard to navigate
3/6/2002

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
Web page is different from a GUI screen in several ways
3/6/2002

9. Desktop-based Wizard
Typical GUI wizard dialog – how would this change for the web?
3/6/2002

10. Web-based Wizard What is the difference?
Aside from the graphical look, how are the GUI and web registration functionally different?
What is the difference?
3/6/2002

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 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...
The dual method “back” – on browser button and on page, could have completely different functionality
3/6/2002

12. Desktop Dialog Box http://www.useit.com/alertbox/9705a.html
GUI version of a color-formatting dialog for powerpoint
3/6/2002

13. Web Dialog Box http://www.useit.com/alertbox/9705a.html
A web “dialog” which is really a page with links that look like buttons, the web version of a dialog
3/6/2002

14. Web Dialog Box What are the differences?
What are the differences?
3/6/2002

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!
Context issue
3/6/2002

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
3/6/2002

17. Other Differences Device diversity
don’t know what they will be browsing on
Web
Server
Internet
In traditional GUI design, you control every pixel on the screen: as you lay out a dialog box, you can rest assured that it will look exactly the same on the user's screen. You know what system you are designing for, you know what fonts it has installed, you know how large the screen typically will be, and you have the system vendor's styleguide to tell you the rules for combining the interaction widgets.
On the Web, all these assumptions fall apart. Users may be accessing the Web through traditional computers, but could easily be using a WebTV, a pen-based hand-held device, a Nokia cellphone, or even their car as an Internet device. In traditional design, the difference in screen area between a laptop and a high-end workstation is a factor of six. On the Web, we currently need to accommodate a factor of 100 in screen area between handhelds and workstations and a factor of 1,000 in bandwidth between modems and T-3 connections.
3/6/2002

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
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
We have much less control over the paths a web user takes than a GUI user – they can “land” in the middle of your site
3/6/2002

19. Top Ten Mistakes in Web Design
Should be controversial - feel free to disagree
Top Ten Mistakes in Web Design
1996,
3/6/2002

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
Now – rule is closer to 4 seconds
3/6/2002

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)
Web content must be relevant
3/6/2002

22. 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?
According to Jakob Neilsen (useit.com) blue text reduces readability – and having the most important text on the page in blue is unfortunate. However changing this
Convention can cause people to revisit links multiple times because they don’t realize they have already visited them.
3/6/2002

23. 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 showing where you currently are
Clearly visible and persistent navigation bars are important
Location bread crumbs list links from homepage in order (hierarchichal)
3/6/2002

24. Navigation Left-justified or top-justified navigation rail
Needs to be a contrasting color
Fitt’s law – place navigation close to scroll bar
Content should start on the left
Navigation rails need to be a different color
3/6/2002

25. Navigation Location breadcrumb trail
Usually across top under navigation bar
3/6/2002

26. What Might be Wrong Here?
Horrible navigation! No navigation bar, just a long, unorganized series of links
3/6/2002

27. Mystery Meat Navigation
3/6/2002

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.
3/6/2002

29. What Might be Wrong Here?
Say this page came up in a Google search for “User Interface” – would you know where it came from? How would you find out?
3/6/2002

30. What Might be Wrong Here?
Now with context added, is much more understandable.
3/6/2002

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
3/6/2002

32. What Might be Wrong Here?
(Look in the site for the URL)
3/6/2002

33. 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 properly
wrapping, etc. *** biggest issue today ***
3/6/2002

34. What Might be Wrong Here?
From
3/6/2002

35. 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

36. What Might be Wrong Here?
3/6/2002

37. 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

38. What Might be Wrong Here?
Too many compartments – frames!
3/6/2002

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?
can’t bookmark the current page & return to it
fixed in Explorer 5
URLs stop working
can’t share with others (lose social filtering)
ing links still doesn’t work...
3/6/2002

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
3/6/2002

41. References Nielsen’s top 10 list (required reading)
Web pages that are interesting
Net tips for designers
User Interface Engineering
3/6/2002

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
3/6/2002