Download User Interface Design for the Web - lawrence

User Interface Design
for the Web
Lawrence Najjar
Senior Usability Specialist, iXL
[email protected]
Presentation available at: http://mime1.gtri.gatech.edu/ui/index.htm
1
Lawrence’s Background
• MS Engineering Psychology, 1983, Georgia
Tech
• 10 years in industry (SRL, IBM)
• PhD Engineering Psychology, 1998,
Georgia Tech
• Worked at Georgia Tech Research Institute
as student
• 1.5 years at iXL in Atlanta
2
What is a “User Interface?”
3
What is a “User Interface?”
• Way that people interact with a computer
– Hardware: Keyboard, mouse, monitor
– Software: Graphical user interface, Web
browser
4
Why Worry about the Web User
Interface?
• Biggest problem with Web is download
time1
• 2nd biggest reason people don’t buy from
Web site is navigation difficulties2
• 28% of Web shoppers surveyed had trouble
finding the product they wanted3
5
Why Worry about the Web User
Interface (continued)
• 62% of Web shoppers surveyed gave up
looking for a product online4
• Dissatisfied customers tell about 10 others5
• Web usability not getting better6
6
Challenges for Designing WebBased User Interfaces
• Short download times
• Limited interaction options (e.g., drag and
drop item into shopping cart)
• Broad user population
• Diverse interaction hardware and software
• Impatient users (e.g., abandon bad sites)
• Many application choices
7
Web User Interface Design
Process
1. Perform needs analysis
2. Design draft site structure
3. Review with customer
4. Design individual screens
5. Review with customer
6. Evaluate usability
7. Iterate (38% better usability each time)7
8
Deliverables
•
•
•
•
Site structure diagrams
Conceptual user interface (CUI)
Screen design specifications
Usability evaluation reports
9
Site Structure Diagram
America
Online, Inc.
Who We Are
Media
Investors
(stock ticker;
link to Press
Releases,
Speeches)
Member
Services
aol.com
Tech Data
Contact Us
Point of View
Our Brands
(continued)
Speeches
(selectable
list, search)
Earnings
(continued)
Member
Benefits
Your AOL
Connection
Online Safety
Calendar of
Events
Calendar of
Events
Financial
(continued)
Access
Phone
Numbers
In the Future
Taxation
Company
History
Media
Contacts
Documents
Archive
(continued)
Data Points
Webmaster
Info
(opens new
browser)
Privacy
FAQ
Careers
Careers
Cable Access
Search
AOL
Foundation
(new logo;
misson; links;
employee
involvement)
Site Map
Careers
(instructions;
slogan; lists
of jobs by
Location,
Job Title, key
word search)
About the
Foundation
Interactive
Education
Initiative
(continued)
Civic
Involvement
Initiative
(continued)
AOL
Achievers
10
Conceptual User Interface
7
(CUI)
11
Screen 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 page12
Working Prototype
13
Usability Evaluation Reports
Sample Usability Problems
• Users were required to know three-letter airport codes
 Users should enter the month then the date, rather than vice
versa.
 The terms “Help,” “Info,” and “Tips” are too similar. Be
more descriptive by using options such as “Travel tips.”
14
Web User Interface Design
Suggestions
•
•
•
•
•
Keep it simple
Minimize animation and blinking
Don’t use frames
Make navigation consistent and obvious
Show users where they are and how they
got there
• Minimize scrolling
15
Web User Interface Design
Suggestions (continued)
•
•
•
•
•
•
Use standard link and visited link colors
Underline only links
Use contrast to make text legible
Minimize long text paragraphs
Match navigation labels with screen titles
Others?
16
Conclusions
• User interface for the Web is different
• Above all, keep it simple!
17
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, vol. 1(1). Available: http://www.
forrester.com
• 3, 4 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
• 5 Albrecht, K. and Zembre, R. E. (1985). Service America. New York:
Warner.
18
1
References (continued)
•
Thompson, M. J. (1999, October 11). Site usability isn’t improving.
The Standard. Available: http://www.zdnet.com/devhead/stories/
articles/0,4413,2137664,00.html
• 7 Nielsen, J. Users first! Web usability: Why and how. How to get a
usable website. Available: http://www.zdnet.com/devhead/stories/
articles/0,4413,2137664,00.html
• 8 Najjar, L. J. (2000). Conceptual User Interface: A new tool for
designing e-commerce user interfaces. Manuscript submitted for
publication. Available: http://mime1.gtri.gatech.edu/tim/imb/
papers/cui.html
6
19
Suggested Readings
• Christopher Wickens’ “Engineering psychology and human
performance” book
• Jakob Nielsen’s www.useit.com site
• Mayhew’s “Principles and guidelines for user interface design” book
• Najjar, L. J. (1998). Principles of educational multimedia user interface
design. Human Factors, 40(2), 311-323. Available: http://wearables.
gatech.edu/papers/larry.html
• Najjar, L. J. (1999, June). Beyond Web usability. Internetworking [Online], 2.2. Available: http://www.sandia.gov/itg/newsletter/jun99/
beyond_web_usability.html
20
User Interface Design
for the Web
Lawrence Najjar
Senior Usability Specialist, iXL
[email protected]
Presentation available at: http://mime1.gtri.gatech.edu/ui/index.htm
21