Outline. Lecture 13: Web Usability. Top Ten Web Design Mistakes. Web Usability Principles Usability Evaluations

Transcription

1 Lecture 13: Web Usability Outline Web Usability Principles Usability Evaluations Wendy Liu CSC309F Fall What Makes Web Application Development Hard? Target audience can be difficult to define Due to the global nature of the Web and the wide range of demographics Diversity in end user configurations Hardware, software, browsers, connectivity, and bandwidth Short development schedules Little time to incorporate user-centred design techniques Keeping users interested is challenging Top Ten Web Design Mistakes 1. Legibility problems 2. Non-standard links 3. Excessive use of Flash 4. Content that's not written for the web 5. Bad search 6. Browser incompatibility 7. Cumbersome forms 8. No contact information or other company info 9. Frozen layouts with fixed page widths 10.Inadequate photo enlargement [Nielsen, 2005] User has many options and has not made any 1

2 Usability Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use [ ISO 9241 Specification: Ergonomic Requirements for Office Work with Visual Display Terminals ] A usable Web interface is one that is accessible, appealing, consistent, clear, simple, navigable and forgiving of user blunders [ Murray and Costanzo, Usability and the Web: An Overview, August 1999 ] Usability problems refer to aspects that make the application ineffective, inefficient, and difficult to learn and use Why Usability Matters? Web users are notoriously impatient and fickle Bad usability may result in Loss of clients or reduced revenues due to unsuccessful transactions Users unable to find the information they need Determine the acceptance level of a web application Is it easy to find useful information Is it organized and well-structured Access and navigation 5 6 Web Usability Principles 7 Learnability Usability Principles Easy to learn the functionality and behavior of the system Easy to find what services are available and how to look them up Efficiency A high level of attainable productivity Easy to reach content and orient oneself within the site Few errors Help users to avoid errors and recover from errors easily E.g., correct data still in the form after using the back button 8 2

3 Usability Principles (Cont d) Memorability Easy to remember the system functionality So to avoid re-learning Easy to re-orient oneself on site/page User satisfaction Make the system pleasant to use Make the user feel in control and understand the content and site navigation mechanism [Nielsen 93] Data/content Design Dimensions Hypertext links/navigation Presentation (UI) Focus on information finding, browsing, and user orientation 9 10 Content Visibility Core information concepts Content objects and classes Answers to user s (information) requests Hypertext modularity Help users to identify location of core concepts Organize hypertext into areas Group pages of homogeneous content together Define areas as global landmarks accessible through links Use global navigation bars to display on all pages Within each area, define most representative pages as local landmarks Reachable in local navigation bars, display on pages of the area (Landmarks highlighted content) To enhance user orientation, learnability, memorability, and error recovery local navigation bar Example page navigation bar global navigation bar

4 Navigation Navigating access Access paths Multi-level index Navigate from pages with high visibility (e.g., home page) to pages of core concepts Match the conceptual content hierarchy Direct access Keyword-based search mechanisms One-step jump to desired information 13 Accessibility Universal access by any class of users and technology Properties of markup that make page readable by technologies assisting impaired users Cross-modality/device access E.g., text to voice Rules of thumb Separating presentation from content and navigation design Augmenting multimedia content with textual descriptions Creating documents that can be accessed by different types of hardware devices E.g., pages should work without a pointing device 14 Nielsen s Golden Rules Visibility of system status Keep users informed about what is going on, through appropriate feedback within reasonable time Mapping between system and the real world Speak the users' language With words, phrases and concepts familiar to the user Follow real-world conventions Making information appear in a natural and logical order User control and freedom Users may choose system functions by mistake and need a "emergency exit" to leave the unwanted state Support undo and redo Consistency and conformance to conventions Do different words, situations, or actions mean the same thing Follow platform conventions Nielsen s Golden Rules (cont d) Error prevention Eliminate error-prone conditions Check for errors and provide confirmation option before committing to an action Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible The user should not have to remember information from one part of the dialogue to another Instructions for use of the system should be visible or easily retrievable whenever appropriate Flexibility and efficiency of use Allow users to tailor frequent actions (expert users)

5 Nielsen s Golden Rules (cont d) Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility Help users to recognize, diagnose, and recover from errors Error messages should be expressed in plain language Precisely indicate the problem Constructively suggest a solution Help and documentation Easy to search Focused on the user's task List concrete steps to be carried out Good Design Guidelines Text users can read Content that answers their questions Navigation and search that help them find what they want Short and simple forms (streamlined registration, checkout, and other workflow) No bugs, typos, or corrupted data; no linkrot; no outdated content Iterative Design Process Iterate Iterate 1. Design Guidelines for how to organize the application by means of usable solutions Prevent designers from adopting solutions that can lead to unusable applications 2. Prototype implementation 3. Evaluation Benchmarks for usability assessment 4. Deployment Usability Evaluations

6 Evaluation Goals Assess application s functionality Verify that users can easily retrieve and browse content Verify that users can easily invoke available services and operations Evaluation Categories Formative evaluations Take place during design stage Check design team s understanding of user requirements Test design choices quickly and informally Summative evaluations Take place after product release Identify user difficulties using the application Help improve the final product or prototype Evaluation Methods User testing Usability inspections Web usage analysis User Testing Investigate how real users interact with applications Representative sample of user population Users perform a set of well-defined tasks Investigator observes and gathers data E.g., execution time, number of errors, user satisfaction Use the collected data to analyze and improve application s usability

7 User Test Steps Define test goals E.g., evaluate the effectiveness of a navigation bar, or the readability of labels Define user sample Should be representative of user population About 5 users are enough to find 90% of usability problems Select tasks and scenarios Tasks need to be realistic Define how you plan to measure usability Metrics can be qualitative e.g., user satisfaction; more difficulty to use Or quantitative e.g., task completion time, number and type of errors, rate of successfully accomplished tasks, number of times users required help Prepare material and experimental environment Conduct pilot to check and refine test procedure Other issues: Guarantee participant anonymity Provide participants with test results Data Gathering Techniques Observation Experimenter notes, also audio and video recording Think aloud Subject is asked to talk while performing task, and explain the action they are performing Co-discovery Two participants execute task together helping each other Active intervention Investigator asks participants to reflect upon the events of the test session Surveys Questionnaires and interviews