Presentation on theme: "User Interface Design for the Web"— Presentation transcript:
1 User Interface Design for the Web Lawrence Najjar
2 Outline Why usability is important Challenges for designing Web-based user interfacesWeb user interface design process
3 Why Usability is Important Biggest problem with Web is download time1Second biggest reason people don’t buy from Web site is navigation difficulties228% of Web shoppers surveyed had trouble finding the product they wanted383% of Web shoppers surveyed left a site due to bad performance, especially poor navigation and slow downloads462% of Web shoppers surveyed gave up looking for a product online3Dissatisfied customers tell about 10 others5
4 Why Usability is Important (continued) If usability improved, sales can improveIBM sales increased 400% after site redesign6Digital Equipment Corporation found 80% increase in revenue7One 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 timesLimited interaction options (ex. no drag-and-drop)Broad user populationImpatient usersMany application choicesDiverse interaction hardware and softwareMultiple languagesDisabled users
6 Web User Interface Design Process Define usersDefine functional requirementsWrite use casesDevelop site diagramBuild interactive wireframe mockupTest usabilityWrite functional design specificationsPerform 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 oldEducationHigh school graduateIncome$25,000 to $45,000 per yearLocationFacility manager office in office buildingComputer experienceModerate. Facility manager uses computer for and researching products on the WebComputerIBM-compatible personal computerWeb connectionSlow connections (56K modem)ObjectivesWant to save time, reduce costs of running facility, monitor security, and control specific equipment as needed.
12 Functional Requirements DescriptionPriorityRegisterEnter registration and personalization informationLowSearchFind productHighBrowseBrowse catalog for product
13 3. Write Use Cases Identify use cases Prioritize use cases Scope use casesSelect use casesGet client approval
14 Use Cases Function Description Priority Use Case Register Enter registration and personalization informationLowUse CaseTask FlowDescriptionUser PreferenceDifferentiation from CompetitorsTechnical DifficultyShow confirmationProvide confirmation when user adds, edits, or erases registrationMediumLowRemove confirmationTake the confirmation off the pageChange registrationEdit user’s reg. informationRemove registrationErase user’s registrationHigh
15 4. Develop Site Diagram Identify sections and subsections Name sectionsIterate with client
19 6. Test Usability Add graphics to several typical task pathways Recruit five representative usersAsk users to try to perform typical tasksRecord problemsAsk participants to complete questionnairesFix interactive wireframe mockupRepeat
21 7. Write Functional Design Specifications Capture image of functional design of each pageList each controlDescribe how each control works
22 Functional Design Specifications Global buttons – top navigation barGE Home - links to the GE Home page atCustomer Center Home - links to the Power Systems customer center atSales and Service Home - links to the GE Power Systems Sales and Service home page
23 8. Perform User Acceptance Test Use actual pre-launch siteAsk representative users to perform typical tasks
24 Conclusion Web usability is important A user interface design methodology can help improve usabilityThe real world is different from the academic world
25 References1 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.com3 Seminerio, M. (1998, September 10). Study: One In Three Experienced Surfers Find Online Shopping Difficult. Week. Available: b.html4 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 ReadingsNajjar, 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.comNielsen, J. (2000). Designing Web usability. Indianapolis: New Riders.