Usability and User Interface Design

Size: px

Start display at page:

Download "Usability and User Interface Design"

Dustin Bennett
5 years ago
Views:

1 Usability and User Interface Design Minsoo Ryu Hanyang University

2 Design for Usability Usability of a computer system is a combination of factors: User interface design Functionality Performance Help systems and documentation Freedom from errors Anything else? 2 2

3 User Interface Design The user interface design is the appearance on the screen and the actual manipulation by the user (look and feel) Fonts, colors, logos, key board controls, menus, buttons Mouse control or keyboard control? Conventions (e.g., "back", "help") 3 3

4 Same Functions, Different Interface The user interface design is different from the functionality provided Example 1: Microsoft Word on Windows and Macintosh: Different user interfaces for the same functionality. Example 2: The desk top metaphor Mouse -- 1 button (Macintosh), 2 button (Windows) or 3 button (Unix) Close button -- left of window (Macintosh) or right of window (Windows) 4 4

5 User Interface Design: 1960s 5 5

6 User Interface Design: 1980s 6 6

7 User Interface Design: 1990s 7 7

8 User Interface Design: 2000s 8 8

9 User Interface Design: Requirements and Refinement It is very difficult to specify and comprehend an interactive interface in a textual documents Requirement documents benefit from sketches, comparison with existing systems, etc Design documents should definitely include graphical elements and often benefit from a mock-up or other form of prototype Implementation plans should include evaluation of user factors and time to make changes USER INTERFACES MUST BE TESTED WITH USERS 9 9

10 The Design/Evaluate Loop Analyze requirements Design? Build Evaluate 10 10

11 Methods for Specifying Usability Requirements and Evaluation of Usability 11 11

12 Focus Group A focus group is a group interview Interviewer Potential users Typically 5 to 12 Similar characteristics (e.g., same viewpoint) Structured set of questions May show mock-ups Group discussions Repeated with contrasting user groups 12 12

13 Usability Laboratory Monitor users while they use system (or a prototype) Evaluators User one-way mirror 13 13

14 Usability Laboratory 14 14

15 Observing techniques Human observer Video camera Tape recording Usability Laboratory Study techniques Human protocol (user talks aloud while using system) User carries out specified list of tasks Software designer presents story board (mock-up) to user 15 15

16 Eye Tracking 16 16

17 Eye Tracking 17 17

18 Measurement Basic concept: log events in the users' interactions with a system Examples from a Web system Clicks (when, where on screen, etc.) Navigation (from page to page) Keystrokes (e.g., input typed on keyboard) Use of help system Errors May be used for statistical analysis or for detailed tracking of individual user 18 18

19 Mandel s Golden Rules The Elements of User Interface Design written by Theo Mandel, PhD Three rules 1. Place Users in Control 2. Reduce Users Memory Load 3. Make the Interface Consistent 19 19

20 Place Users in Control Use modes judiciously (modeless) Allow users to use either the keyboard or mouse (flexible) Allow users to change focus (interruptible) Display descriptive messages and text(helpful) Provide immediate and reversible actions, and feedback (forgiving) Provide meaningful paths and exits (navigable) Accommodate users with different skill levels (accessible) Make the user interface transparent (facilitative) Allow users to customize the interface (preferences) Allow users to directly manipulate interface objects (interactive) 20 20

21 Reduce Users Memory Load Relieve short-term memory (remember) Rely on recognition, not recall (recognition) Provide visual cues (inform) Provide defaults, undo, and redo (forgiving) Provide interface shortcuts (frequency) Promote an object-action syntax (intuitive) Use real-world metaphors (transfer) User progressive disclosure (context) Promote visual clarity (organize) 21 21

22 Example: Overly Complex UI 22 22

23 Make the Interface Consistent Sustain the context of users tasks (continuity) Maintain consistency within and across products (experience) Keep interaction results the same (expectations) Provide aesthetic appeal and integrity (attitude) Encourage exploration (predictable) 23 23

Example: Inconsistent UI A two-month calendar showing what happens for a trip that starts on March 10 and ends on March 15 In the second pop-up, the month of March has moved to the left, leaving room

24 Example: Inconsistent UI A two-month calendar showing what happens for a trip that starts on March 10 and ends on March 15 In the second pop-up, the month of March has moved to the left, leaving room for April to appear on the right This may seem like a convenient shortcut, since there's no way the user would want a February return date when traveling out in March In reality, however, the user is looking for March 15 in the same spot where it appeared in the first pop-up calendar 24 24

SE 2730 Final Review

SE 2730 Final Review 1. Introduction 1) What is software: programs, associated documentations and data 2) Three types of software products: generic, custom, semi-custom Why is semi-custom product more