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

Hall of Shame or Hall of Fame? College of Arts & Crafts http://www.ccac-art.edu/ California College of Arts and Crafts original website 3/6/2002

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

Now improved…. College of Arts & Crafts What is this page about? http://www.ccac-art.edu/ 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

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

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

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

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

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

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

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

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

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

Web Dialog Box What are the differences? http://www.useit.com/alertbox/9705a.html What are the differences? 3/6/2002

“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

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

Other Differences Device diversity don’t know what they will be browsing on Web Server Internet http://www.useit.com/alertbox/9705a.html 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

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

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

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

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

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

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

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 http://www.amazon.com Navigation rails need to be a different color 3/6/2002

Navigation Location breadcrumb trail Usually across top under navigation bar http://www.usdf.org 3/6/2002

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

Mystery Meat Navigation http://www.customstaffinginc.com/ 3/6/2002

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

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

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

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

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

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

What Might be Wrong Here? http://www.neiu.edu/~fldept/flanglab/ From www.websitesthatsuck.com 3/6/2002

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

What Might be Wrong Here? http://www.mjau-mjau.com/classic.html 3/6/2002

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

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

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

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

References Nielsen’s 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 3/6/2002

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