1. User Interface Design for the Web
Lawrence Najjar

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

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
Description
Priority
Register
Enter registration and personalization information
Low
Search
Find product
High
Browse
Browse catalog for product

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 Use Case 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
Remove confirmation
Take the confirmation off the page
Change registration
Edit user’s reg. information
Remove registration
Erase user’s registration
High

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
Don’t show graphics
Don’t use raw HTML
Don’t 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
Customer Center Home - links to the Power Systems customer center at
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). GVU’s 9th WWW User Survey. Atlanta: Georgia Institute of Technology, College of Computing, Graphics, Visualization, and Usability Center. Available:
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: forrester.com
3 Seminerio, M. (1998, September 10). Study: One In Three Experienced Surfers Find Online Shopping Difficult. Week. Available: b.html
4 Thompson, M. J. (1999, August 9). How to frustrate Web surfers. Industry Standard [On-line]. Available:
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:
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:

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:

27. Additional Readings
Najjar, L. J. (1990). Using color effectively (TR ). Atlanta, GA: IBM Corporation. Available:
Najjar, L. J. (1999, June). Beyond Web usability. Internetworking, 2.2 [On-line]. Available:
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:
Nielsen, J. Useit.com
Nielsen, J. (2000). Designing Web usability. Indianapolis: New Riders.