UI Design for the Web

1
UI Design for the Web

• Creating Effective Sites and Pages

2
Agenda
3
Why web site design matters

• Tests of time to complete shopping tasks at
  several major on-line stores - number of clicks
  varied from 8 to 50 high abandonment rate on
  poor sites
• Jakob Nielsen review of comparative tests on web
  sites - average 68 difference in task completion
  times
• Nielsen finds 135 improvement from redesign
  effort
• see http//www.useit.com/alertbox/20040119.html

4
Whats in a Web site?

• Information design
• Graphic design
• Navigation design
• Information architecture
• Involves information navigation design
• User-interface design
• Includes usability evaluation

5
Special design challenges

• On WWW, you dont know your users platform and
  capabilities
• Screen size from PDA to really big
• Connection speed from dial-up to really fast
• Plug-ins
• What else????
• Color B / W to 8-bit color to 32-bit color
• Input device pen, mouse, joystick, keypad

6
Where do Web sites come from?

• Web site design process

Discovery
Design Exploration
Design Refinement
Production
followed by implementation maintenance
Content borrowed fromJames Landay
7
Web design process
Content borrowed fromJames Landay
8
Discovery

• Determine scope of project
• Understand clients expectations
• Understand characteristics of users (and their
  needs)
• Remember difference between clients and users
• Evaluate existing site and / or competition

9
Think big
10
Design exploration

• Create multiple designs
• Early information navigation designs
• Site maps high-level, coarse-grained view of
  entire site
• Storyboards interaction sequence, minimal page
  level detail
• Early graphic designs

11
Design refinement

• Select one design alternative for development
• Increase level of detail
• Schematics page structure with respect to
  information navigation
• Heavy emphasis on graphic design

12
Production

• Prepare final deliverable for handoff
• Provide as much detail as possible in design
• Mockups high-fidelity, precise representation of
  page
• Actual site (?)

13
Sound familiar?
14
What else is familiar?

• Many of the usability principles can be applied
  towards the design of a good Web site
• Can be tailored for the WWW
• Lets try a few

15
Predictability

• Bad examples?
• http//www.actsofvolition.com/steven/hallofshame
• Good example?
• http//cnn.com

16
Synthesizability

• Good examples?
• Bad examples?

17
Customizability

• Personalized based on profile
• Recommendations

18
Consistency

• Same look feel through out a site
• Why?

19
Some advice

• Make a positive first impression
• Focus on a single item of interest
• Build your site brand
• Make navigation easy to use
• Lure visitors to return
• Make it download quickly

Content borrowed fromJames Landay
20
A different approach

• Web patterns
• Similar to design patterns
• Used in architecture
• Used in software engineering

21
Example

• Take a look at these sites
• IBM
• Microsoft
• ESPN
• CoC
• Best Buy
• Office Depot
• Office Max

22
Web design patterns book

• The Design of Sites, by Doug van Duyne, James
  Landay, Jason Hong
• Patterns broken into groups

• trust credibility
• completing tasks
• page layouts
• site search
• navigation
• fast sites

• site genres
• navigational framework
• homepages
• writing managing content
• basic e-commerce
• advanced e-commerce

23
Tools for designing Web sites

• Lots for creating HTML
• What about for the design process?