Web Design vs. GUI Design

Professor James LandayCarnegie Mellon

Updated by Melody Moore Jackson 11/15/06

3/6/2002 1

Hall of Shame or Hall of Fame?

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

3/6/2002 2

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 can’t

read at all on a high-res monitor

3/6/2002 3

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

3/6/2002 4

Hall of Shame, but why??

3/6/2002 5

content gets a small %

Web Design vs. GUI Design

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

3/6/2002 6

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 Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html

3/6/2002 7

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 8

Desktop-based Wizard

3/6/2002 9

Web-based Wizard

3/6/2002 10What is the difference?

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 11

Desktop Dialog Box

3/6/2002 12

Web Dialog Box

3/6/2002 13

Web Dialog Box

3/6/2002 14

What are the differences?

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

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 16

Other Differences

• Device diversity– don’t know what they will be browsing on

3/6/2002 17

Internet

WebServer

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 18

Top Ten Mistakes in Web Design

Should be controversial - feel free to disagree

3/6/2002 19

Top Ten Mistakes in Web Design1996, http://www.useit.com/alertbox/9605.html

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 20

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 21

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 22

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

3/6/2002 23

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

3/6/2002 24

Navigation

• Location breadcrumb trail– Usually across top under navigation bar

http://www.usdf.org

3/6/2002 25

What Might be Wrong Here?

3/6/2002 26

Mystery Meat Navigation

3/6/2002 27

http://www.customstaffinginc.com/

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 28

What Might be Wrong Here?

3/6/2002 29

What Might be Wrong Here?

3/6/2002 30

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 31

What Might be Wrong Here?

3/6/2002 32

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 33

What Might be Wrong Here?

3/6/2002 34

http://www.neiu.edu/~fldept/flanglab/

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 35

What Might be Wrong Here?

3/6/2002 36

http://www.mjau-mjau.com/classic.html

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 37

What Might be Wrong Here?

3/6/2002 38

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 39

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 40

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 41

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 42