User%20Interface%20Design%20for%20the%20Web

1
User Interface Design for the Web

• Lawrence Najjar
• lnajjar_at_viant.com

2
Outline

• Why usability is important
• Challenges for designing Web-based user
  interfaces
• Web user interface design process

3
Why Usability is Important

• Biggest problem with Web is download time1
• Second biggest reason people dont buy from Web
  site is navigation difficulties2
• 28 of Web shoppers surveyed had trouble finding
  the product they wanted3
• 83 of Web shoppers surveyed left a site due to
  bad performance, especially poor navigation and
  slow downloads4
• 62 of Web shoppers surveyed gave up looking for
  a product online3
• Dissatisfied customers tell about 10 others5

4
Why Usability is Important (continued)

• If usability improved, sales can improve
• IBM sales increased 400 after site redesign6
• Digital Equipment Corporation found 80 increase
  in revenue7
• One study8 estimated that improving the customer
  experience increases conversion rate by 40 and
  increases order size by 10.

5
Challenges for Designing Web-based User Interfaces

• Short download times
• Limited interaction options (ex. no
  drag-and-drop)
• Broad user population
• Impatient users
• Many application choices
• Diverse interaction hardware and software
• Multiple languages
• Disabled users

6
Web User Interface Design Process

• Define users
• Define functional requirements
• Write use cases
• Develop site diagram
• Build interactive wireframe mockup
• Test usability
• Write functional design specifications
• Perform acceptance test

7
1. Define Users

• Develop user profile
• Perform experience architecture
• Create personas and scenarios

8
User Profile
Facility Managers
Gender Generally male
Age 30 to 50 years old
Education High school graduate
Income 25,000 to 45,000 per year
Location Facility manager office in office building
Computer experience Moderate. Facility manager uses computer for e-mail and researching products on the Web
Computer IBM-compatible personal computer
Web connection Slow connections (56K modem)
Objectives Want to save time, reduce costs of running facility, monitor security, and control specific equipment as needed.
9
Experience Architecture
Audience
Tech expert
Gadget lover
Tech novice
Learn about products
Intent
Solve problems
Home
Get entertained
Context
Work
10
(No Transcript)
11
2. Define Functional Requirements

• Identify functional requirements
• Ask client
• Ask users focus groups, interviews, contextual
  inquiry, questionnaires
• Prioritize functional requirements
• Select functional requirements
• Get client approval

12
Functional Requirements
Function Description Priority
Register Enter registration and personalization information Low
Search Find product High
Browse Browse catalog for product High
13
3. Write Use Cases

• Identify use cases
• Prioritize use cases
• Scope use cases
• Select use cases
• Get client approval

14
Use Cases
Function Description Priority
Register Enter registration and personalization information Low
Use Case
Task Flow Description User Preference Differentiation from Competitors Technical Difficulty
Show confirmation Provide confirmation when user adds, edits, or erases registration Medium Low Low
Remove confirmation Take the confirmation off the page Low Low Low
Change registration Edit users reg. information Medium Medium Low
Remove registration Erase users registration Low High Low
15
4. Develop Site Diagram

• Identify sections and subsections
• Name sections
• Iterate with client

16
Site Diagram
17
5. Build Interactive Wireframe Mockup

• Show how functions may work9
• Dont show graphics
• Dont use raw HTML
• Dont connect to databases or other tools
• Iterate with client
• Make changes quickly and cheaply

18
Interactive Wireframe Mockup
19
6. Test Usability

• Add graphics to several typical task pathways
• Recruit five representative users
• Ask users to try to perform typical tasks
• Record problems
• Ask participants to complete questionnaires
• Fix interactive wireframe mockup
• Repeat

20
Usability Test
21
7. Write Functional Design Specifications

• Capture image of functional design of each page
• List each control
• Describe how each control works

22
Functional Design Specifications

• Global buttons top navigation bar
• GE Home - links to the GE Home page at
  http//www.ge.com
• Customer Center Home - links to the Power Systems
  customer center at http//schexnweb.sch.ge.com/cgi
  -bin/xnetmainmenu.exe
• Sales and Service Home - links to the GE Power
  Systems Sales and Service home page

23
8. Perform User Acceptance Test

• Use actual pre-launch site
• Ask representative users to perform typical tasks

24
Conclusion

• Web usability is important
• A user interface design methodology can help
  improve usability
• The real world is different from the academic
  world

25
References

• 1 Graphics, Visualization, and Usability Center
  (1998). GVUs 9th WWW User Survey. Atlanta
  Georgia Institute of Technology, College of
  Computing, Graphics, Visualization, and Usability
  Center. Available http//www.gvu.gatech.edu/user_
  surveys/survey-1998-04
• 2 Kadison, M. L., Weisman, D. E., Modahl, M.,
  Lieu, K. C., and Levin, K. (1998, April). On-line
  Research Strategies The Look to Buy Imperative.
  Forrester Report, 1(1). Available http//www.
  forrester.com
• 3 Seminerio, M. (1998, September 10). Study One
  In Three Experienced Surfers Find Online Shopping
  Difficult. Inter_at_ctive Week. Available
  http//www.zdnet.com/intweek/quickpoll/981007/
  981007b.html
• 4 Thompson, M. J. (1999, August 9). How to
  frustrate Web surfers. Industry Standard
  On-line. Available http//www.thestandard.com/m
  etrics/display/0,1283,956,00.html
• 5 Albrecht, K. Zembre, R. E. (1985). Service
  America. New York Warner.
• 6 Tedeschi, B. (1999, August 30). Good Web site
  design can lead to healthy sales. New York Times
  e-commerce report On-line. Available
  http//www.nytimes.com/library/tech/99/08/cyber/co
  mmerce/30commerce.html
• 7 Wixon, D., Jones, S. (1992). Usability for
  fun and profit A case study of the design of DEC
  RALLY version 2. Internal report, Digital
  Equipment Corporation. Cited in Karat, C., A
  business case approach to usability cost
  justification. In Bias, R. G., Mayhew, D. J.
  (1994). Cost-justifying usability. San Diego
  Academic Press.
• 8 Creative Good (2000, June 12). The dotcom
  survival guide. Creative Good On-line.
  Available http//www.creativegood.com/survival/

26
References (continued)

• 9 Najjar, L. J. (2000). Conceptual User
  Interface A new tool for designing e-commerce
  user interfaces. Internetworking, 3.3 On-line.
  Available http//www.internettg.org/newsletter/de
  c00/article_cui.html

27
Additional Readings

• Najjar, L. J. (1990). Using color effectively (TR
  52.0018). Atlanta, GA IBM Corporation.
  Available http//mime1.gtri.gatech.edu/mime/paper
  s/colorTR.html
• Najjar, L. J. (1999, June). Beyond Web usability.
  Internetworking, 2.2 On-line. Available
  http//www.InternetTG.org/newsletter/jun99/beyond_
  web_usability.html
• Najjar, L. J. (in press). E-commerce user
  interface design for the Web. In Proceedings of
  9th International Conference on Human-Computer
  Interaction. Mahwah, NJ Lawrence Erlbaum.
  Available http//mime1.gtri.gatech.edu/mime/paper
  s/e-commerce20user20interface20design20for20t
  he20Web.html
• Nielsen, J. Useit.com http//www.useit.com
• Nielsen, J. (2000). Designing Web usability.
  Indianapolis New Riders.