CSc 238 Human Computer Interface Design. Part II Making Well-behaved Products. Chapter 12. Reducing Work and Eliminating Excise

Size: px

Start display at page:

Download "CSc 238 Human Computer Interface Design. Part II Making Well-behaved Products. Chapter 12. Reducing Work and Eliminating Excise"

Lindsey Day
5 years ago
Views:

1 BBuckley - 1 CSc 238 Human Computer Interface Design Part II Making Well-behaved Products Chapter 12 Reducing Work and Eliminating Excise ABOUT FACE The Essentials of Interaction Design Cooper, Reimann, Cronin, and Noessel

2 Cognitive work interactions that require unnecessary work for users Comprehending product behaviors, as well as text and organizational structures Memory work Recalling product behaviors, commands, passwords, names and locations of data objects and controls, and other relationships between objects Visual work Figuring out where they should start on the screen, finding one object among many, decoding layouts, and differentiating among visually coded interface elements Physical work Keystrokes, mouse movements, gestures, switching between input mode, and number of clicks required to navigate 2

3 When the 4 are not minimized for users 3 The added work for users is an excise tax Human actions required to accomplish a task that is not directly related to achieving their goals an interrupt for the user The task is what the software should be directed to do! Examples: Installing software, updating, configuring networks, backing-up files Excise a primary cause of user dissatisfaction with software-enabled products DESIGN PRINCIPLE Elimnate excise whenever possible

4 Navigation is Excise 4 The programmer s implementation model and not the user s! Navigation is any action that takes a user to a new part of the interface or which requires him or her to locate objects, tools, or data. Navigate to another window the original disappears or is obstructed this requires the user to worry about window management. Navigate to another window and you broke the Back button Navigational trauma good phrase

5 Navigation Any action that takes the user to a new part of the interface or that requires locating objects, tools or data elsewhere in the system Occurs at multiple levels Across multiple windows, views or pages Across multiple panes or frames within a window, view or page Across tools, commands, or menus Within information displayed in a pane or frame (such as scrolling, panning, zooming, following links) Unnecessary or difficult navigation is a major frustration to users 5

6 Visual Excise 6 Disney.com much improved The work needed to decode visual information Finding a single item in a list Figuring out where to begin reading on a screen Determining which elements are clickable and which are decoration

7 Interrupts 7 Interrupting a user s flow for no good reason is stopping the proceedings with idiocy! Poorly designed SW will make assertions that no self-respecting individual would ever make. Pass this on The error message box is unnecessary! Says something the user doesn t care about. Demands user fix a situation that the software can and should fix. Don t make users ask permission! To change a displayed value should not require you to go to a different room. Allow input wherever you have output.

8 Forcing users to: Common Excise Traps Go to another window to perform a function that affects the current window. Remember where they put things in a hierarchical file system. Resize windows unnecessarily. Move windows. Reenter their personal settings. Fill fields to satisfy some arbitrary measure of completeness. Ask permission. Confirm their actions. and letting a user s actions result in an error. 8

9 Navigation between panes 9

10 Navigation between panes 10 It is rarely possible to describe accurately the contents of a tab with a succinct label.

11 Problems with pane 11 Too many panes Panes do not match user s workflow Panes contain unrelated functionality Break functions into pieces that is not easily communicated to the user Tab label does not adequately describe the contents

12 Navigation of Information 12 Choices: Scrolling Rule of Thumb Linking Zooming Make your choice fit your users mental model and Don t forget, this is a visual dislocating activity (used for visualization of 3D and detailed 2D data)

13 Skeuomorphic excise 13 Skeuomorphism refers to the practice of working certain nonfunctional design details into physical objects, or graphical user interface (GUI) elements which are often metaphorical and ornamental in nature. Typically these elements will serve no actual purpose aside from helping to allude to the item s intended purpose Examples: A volume control slider which has been designed to resemble a hi-fi volume dial A notepad application with an entry field designed to look like a piece of lined paper, with decorative elements being present, like virtual coffeestains, paperclips, creases, etc. A calculator program which mimics the LCD display and plastic buttons of a physical pocket calculator

14 14

15 15

16 Skeuomorphic excise 16 Jony Ive Explains Why He Decided to Gut Skeuomophism From ios 7 (handout) Video

17 Modal Excise 17 DESIGN PRINCIPLE Don't stop the procedings with idiocy 1. Errors, notifiers, and confirmation messages 2. Making users ask permission You can t verify or identify what it tells you, and it gives no options other than to admit your error by clicking OK. The message comes up only when the application is saving when you have entrusted it do something simple and straightforward... it can t save a file without help, but won t explain what help is needed

18 Modal Excise 18 DESIGN PRINCIPLE Don't stop the procedings with idiocy 1. Errors, notifiers, and confirmation messages 2. Making users ask permission Rules Wizard Rules Wizard Rules created in this profile conflict with rules on the Microsoft Exchange Server. Only one set of rules can be saved, which rules do you want to save? Client Server Cancel The software detected the difference, why can t it correct the problem. The options offered are scary, telling you that you can explode one of the two boxes: one contains garbage, and other contains the family dog but the application won t say which is which. And if you click Cancel, what does that mean? Will it still explode your dog?

19 Modal Excise 19 DESIGN PRINCIPLE Don't stop the procedings with idiocy 1. Errors, notifiers, and confirmation messages 2. Making users ask permission Amazon: to change a saved address, you must click a button to go to a different page If you want to change a displayed value, you should be able to change it right there! DESIGN PRINCIPLE Don't make users ask permission Many applications have one place where the values are displayed and another place where users input to them is accepted. Carryover from the implementation world treating input and output as separate processes DESIGN PRINCIPLE Allow input wherever you have output

20 Fig 12-8 Stylistic Excise what to expect when you click? 20

21 Excise is Contextual 21 A function or action is excise if it is forced on the user rather than made available allowing the user to decide Example window management If a primary persona needs to see two applications at a time on the screen on the screen to compare or transfer information, the ability to configure the main window is not excise Always excise: hardware-management tasks that the software should handle

22 Eliminating Excise 1 22 How? Reduce the number of places to go Provide signposts Provide overviews Properly map controls to functions Avoid hierarchies Don t replicate mechanical models 1 Navigational excise the most prevalent type of excise

23 Eliminating Excise Reduce the number of places to go 23 If the number of modes, pages, or screens is kept to a minimum, people s ability to stay oriented increases dramatically. Keep the number of windows & views to a minimum Limit the number of adjacent panes in your interface to the minimum needed for the users to achieve goals Limit the number of controls also Minimize scrolling when possible Worst case examples online stores in attempting to serve all with one generic site

24 Eliminating Excise Provide signposts 24 Users navigate by reference to persistent object placed in a user interface helping to orient customers Men s Shoes Women s Shoes Men s Apparel Women s Apparel Gear Nutrition Brands Sale AHA

25 25

26 Eliminating Excise Provide overviews to help orient users within the content rather than within the application as a whole Adobe Photoshop examples 26 breadcrumbs As a navigational aid and control

27 Annotated Scrollbar 27

symbolically to the object it affects requires users to stop and

28 Eliminating Excise Properly map controls to functions Poor mapping when control does not relate visually, spatially or symbolically to the object it affects requires users to stop and think breaking the flow can result in serious user errors 28 Which is which?

29 Eliminating Excise Avoid hierarches 29 Current desktop metaphor: nesting a folder within another folder ad infinitum most humans have a difficult time understanding nested systems The normal method of organizing things is a single layer of groups that never exceeds a single level of nesting monocline grouping We use hierarchical structures as tools to solve problems of managing massive quantities of data but this is not useful as a represented model for users

30 Monocline Grouping 30

31 But 31 Monocline grouping is inadequate for physically managing large quantities of data So render the structure as the user imagines it monocline grouping but provide search and access tools that only a deep hierarchical organizational structure can offer Obviously (I hope) we would not force users to navigate deep, complex tree structures

Eliminating Excise Don t replicate mechanical models How can a new, digital version of a product and its features be streamlined and adapted to take advantage of the digital environment?

32 Eliminating Excise Don t replicate mechanical models How can a new, digital version of a product and its features be streamlined and adapted to take advantage of the digital environment? 32 If we don t inform our assumptions about product use with an analysis of user goals, we will lend up building excise-riddled software that remains in the Mechanical Age. Better software is based on Information- Age thinking DESIGN PRINCIPLE Significant change must be significantly better!

33 Other Common Excise Transgressions 33 Don t force users to: Go to another window to perform a function that affects the current window Remember where they put things in the hierarchical file system Resize windows unnecessarily When a child window pops up on the screen the application should size it appropriately for its contents Don t make it big and empty or so small that it requires constant scrolling Move windows If there is open space on the desktop, put the application there instead of directly over some other already open application Reenter their personal settings If the user has ever set a font, color, indentation, or sound, make sure that she doesn t have to do so again unless she wants to change

34 Other Common Excise Transgressions 34 Don t force users to: Fill in fields to satisfy some arbitrary measure of completeness If the user wants to omit some details from the transaction entry screen don t force him to enter them Assume that he has a good reason for doing so. In most instances, the completeness of the database isn t worth badgering users over it Ask permission Typically, this a symptom of not allowing input in he same place as output Confirm their actions This is frequently a symptom of not allowing input in the same place as output Don t let the user s actions result in an error

Note 7: Eliminating Excise

Computer Science and Software Engineering University of Wisconsin - Platteville Note 7: Eliminating Excise Yan Shi Lecture Notes for SE 3330 UW-Platteville Based on About Face 3: Chapter 11 & 16 Excise