Transcript User Interface Design for the Web - lawrence

User Interface Design
for the Web
Lawrence Najjar
[email protected]
Outline
• Why usability is important
• Challenges for designing Web-based user interfaces
• Web user interface design process
2
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
3
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%.
4
Challenges for Designing Webbased 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
5
Web User Interface Design
Process
1.
2.
3.
4.
5.
6.
7.
8.
Define users
Define functional requirements
Write use cases
Develop site diagram
Build interactive wireframe mockup
Test usability
Write functional design specifications
Perform acceptance test
6
1. Define Users
•
•
•
Develop user profile
Perform experience architecture
Create personas and scenarios
7
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.
8
Experience Architecture
Audience
Learn about products
Intent
Solve problems
Get entertained
Home
Work
Context
9
10
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
11
Functional Requirements
Function
Description
Priority
Register
Enter registration and
personalization information
Low
Search
Find product
High
Browse
Browse catalog for product
High
12
3. Write Use Cases
•
•
•
•
•
Identify use cases
Prioritize use cases
Scope use cases
Select use cases
Get client approval
13
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
Provide confirmation
confirmation when user adds, edits,
or erases registration
Medium
Low
Low
Remove
Take the confirmation
confirmation off the page
Low
Low
Low
Change
registration
Edit user’s reg.
information
Medium
Medium
Low
Remove
registration
Erase user’s
registration
Low
High
Low
14
4. Develop Site Diagram
•
•
•
Identify sections and subsections
Name sections
Iterate with client
15
Site Diagram
Hom e Page
Global Navigation
Home Page
Search
Widgets
Gadgets
Browse
Contact
Us
About Us
Privacy
Terms &
Condition
s
Geegaws
Analog
Handheld
General
Digital
Remote
Controlled
Childrens'
Customized
Supersonic
Geegaw
Selector Tool
16
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
17
Interactive Wireframe Mockup
18
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
19
Usability Test
20
7. Write Functional Design
Specifications
•
•
•
Capture image of functional design of each page
List each control
Describe how each control works
21
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 page22
8. Perform User Acceptance Test
•
•
Use actual pre-launch site
Ask representative users to perform typical tasks
23
Conclusion
•
•
•
Web usability is important
A user interface design methodology can help
improve usability
The real world is different from the academic
world
24
References
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: 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@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/metrics/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 ecommerce report [On-line]. Available:
http://www.nytimes.com/library/tech/99/08/cyber/commerce/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/
25
1
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/dec00/article_cui.html
26
Additional Readings
•
•
•
•
•
Najjar, L. J. (1990). Using color effectively (TR 52.0018). Atlanta, GA: IBM
Corporation. Available: http://mime1.gtri.gatech.edu/mime/papers/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/papers/ecommerce%20user%20interface%20design%20for%20the%20Web.html
Nielsen, J. Useit.com http://www.useit.com
Nielsen, J. (2000). Designing Web usability. Indianapolis: New Riders.
27