Abdul Rauf1 Interaction Design and Evaluation Example Usability Engineering: Process, Products, and Examples Chapter 12

Abdul Rauf2 Interaction Design Process High-level design Low-level design

Abdul Rauf3 Steps for High-level Design STEP 1. Review your situational variables. STEP 2. Choose an interaction style or styles. STEP 3. Review the general guidelines. STEP 4. Make specific decisions. STEP 5. Identify a standard look and feel. STEP 6. Think about the dynamic. STEP 7. Review general and visual guidelines.

Abdul Rauf4 In Class Exercise Recall our problem from Chapter 11. Suppose that you are asked to build a user interface for a map tool for a cell phone.

Abdul Rauf5 Tasks Supported by Map Tool When the user dials MAP-DRAW, their display shows a map of the county where they are currently located based on GPS data. The user can employ the navigational keys on the phone to move the map cursor to any desired location. The user can employ an “OK” button to show a text box that contains an interesting fact about the location.

Abdul Rauf6 Example Approximate map of Wood County, Ohio Mungen Mungen is a ghost town in Wood County from the Oil Boom era.

Abdul Rauf7 Usability Considerations The user will be likely to use the map tool to bring up interesting facts frequently. The user will be likely to be an occasional or sporadic user of the tool. The user interface should support high levels of ease of learning.

Abdul Rauf8 1. Review Situational Variables Task variables –Frequency? In general, the user interface will be used frequently. –Rigidness? Although not explicitly stated, the task seems fairly rigid - given a map image, activate a caption by selecting a place. Ramifications –Frequent tasks should not involve a long sequence of operations. –Rigid tasks should have a clear sequence of operations to support the task structure.

Abdul Rauf9 1. Review Situational Variables User variables –The user will likely be an occasional or sporadic user of the tool. Ramifications –The users will likely remember the functions that the software under the user interface performs. –They will remember the tasks that they accomplished with the user interface. –They are not likely to remember detailed operational sequences for the user interface.

Abdul Rauf10 Other Situational Variables The cell phone itself imposes a set of situational variables. –For example, the cell phone has a small screen that is only an output device. Any on-screen controls will take up screen space and will need to be big enough to be seen. On-screen controls that overlay the map potentially may obscure the map itself. –The cell phone that we are envisioning does not have a stylus or a gestural input that connects to the screen. –Our input devices are the arrow keys and the OK button. We have no keyboard.

Abdul Rauf11 Other Situational Variables Ramifications –We can use an onscreen keyboard using the arrow keys and the OK if we opt for a keyboard. –We can use the arrow keys to move around the screen as in direct manipulation, but it will not be precise. –We can use the arrow keys as a pointing device.

Abdul Rauf12 User Interface Variables The user interface should support high levels of ease of learning. Ramifications –The user interface should have built in support for first time use or reuse. –The designer can expect the user’s performance to improve over time. –It is unlikely that the user will be tolerant of a long training period, given the nature of the application. People often use cell phones while they are moving. This application would likely be used in a car or on a bike. Asking the user to do a long training session seems a poor task match.

Abdul Rauf13 2. Choose an Interaction Style Based on the requirements as specified in the situational and user interface variables, we note the following: –Operational sequence should be limited. –Limited operations and choices. –Limited formalized training for the UI. –We can use the arrow keys/OK button for onscreen keyboard, pointing, or direct manipulation input.

Abdul Rauf14 2. Choose an Interaction Style What styles can we eliminate? –Multimodal - no hardware to support –Game - no requirement for fun –Form fill-in - no requirement for extensive data entry –Virtual reality - no hardware for support –Haptic interaction - no hardware for support

Abdul Rauf15 2. Choose an Interaction Style Menus –Advantages Recognition. Infrequent or new users have cuing to reduce learning or relearning time. –Disadvantages Few options in terms of operations. Many options in terms of sites to choose from. We could have a long menu of sites or an artificial menu hierarchy. For example, sites could be organized into quadrants of the county. The user would first select the quadrant and then select the site. The call to MAP-DRAW is returning a map on the screen. The user will have cognitive overhead in finding the site of interest in the map on a list in a menu.

Abdul Rauf16 2. Choose an Interaction Style Command line –Advantages Few options in terms of operations so few commands. Rigid sequences so command sequences would be limited. The infrequent user would not need to derive one out of a huge set of possible command sequences. The call to MAP-DRAW is returning a map on the screen. The user will have the visual names of the site as a cue for the command input. –Disadvatages Typing with an onscreen keyboard could be slow and error prone. No evidence that the phone has speech input. Recall. Infrequent or new users may have some problems recalling the precise command language and its syntax.

Abdul Rauf17 2. Choose an Interaction Style Natural Language –Advantages Few options in terms of operations so few types of operations to remember. The call to MAP-DRAW is returning a map on the screen. The user will have the visual names of the site as a cue for the command input. –Disadvantages Rigid sequences so user would need to remember sequences Typing with an onscreen keyboard could be slow and error prone. No evidence that phone has speech input. Recall. Infrequent or new users may have some problems recalling what the inputs should be.

Abdul Rauf18 2. Choose an Interaction Style Windowed Interaction –Advantages The map that is generated by the call to MAP-DRAW is itself a bounded visual space; i.e., it is a window. –Disadvantages Multiple windows (say of controls, menus, onscreen keyboards and so on) will necessarily be laid over the map because of the small screen size. It is possible that the controls may obscure the map, increasing the user’s cognitive workload as they will need to remember the map elements.

Abdul Rauf19 2. Choose an Interaction Style Direct Manipulation Interaction –Advantages Users will not need to remember a command set or recognize commands from menu. Users will see direct result of operations. Task match is good. User will move around map to find sites of interest much as they would move around a physical space to sites of interest. –Disadvantages Infrequent users will need to remember the meaning of direct manipulation operations. Hardware does not include an interactive device that moves in any direction (e.g., stylus, mouse). User movements within the displayed map, via arrow keys, will be more gross and more at right angles.

Abdul Rauf20 2. Choose an Interaction Style Selection of style –Several styles would work. –We will choose a direct manipulation interaction mostly because it will not require an onscreen keyboard or menus displayed in the small screen space and potentially on top of the map.

Abdul Rauf21 3. Review the General Guidelines We have reviewed a number of guidelines as we assessed different interaction styles. In the next few slides we review the relevant guidelines.

Abdul Rauf22 3. Review the General Guidelines Guideline 1: Facilitate the Development and Use of Workable Mental Models –Guide new (or infrequent) users through normal and reasonable patterns of usage. The direct manipulation interaction, navigated by arrow keys, should guide users. Pushing the left arrow button for example will move the cursor left. That expected pattern should help guide the user. The user is not navigating a menu hierarchy that does not match the task.

Abdul Rauf23 3. Review the General Guidelines Guideline 1: Facilitate the Development and Use of Workable Mental Models –Provide feedback. Similarly the correspondence between the arrow directions on the buttons and the expression of the arrow use in the interaction should provide feedback. –Support wayfinding. Navigation within the interaction is via the arrow keys and is confined to one screen.

Abdul Rauf24 3. Review the General Guidelines Guideline 5: Reduce the Cognitive Workload of the User –Present options clearly and explicitly and avoid presentations that include multiple, reasonable interpretations. There are only two options in the interaction: move the cursor to a site and select a site. There are also only two sets of input buttons. –Reduce strain on the user’s working memory. The user does not need to remember a command set or command sequence.

Abdul Rauf25 3. Review the General Guidelines Guideline 5: Reduce the Cognitive Workload of the User –Reduce the number of cognitive transformations or translations from the interface to the user’s mental model by enforcing good task match Moving the arrow keys around the map resembles moving a person, car, or bicycle through a geography so task match is good.

Abdul Rauf26 4. Make Specific Decisions Now we will make specific decisions about our direct manipulation interaction.

Abdul Rauf27 5. Identify Standard Look and Feel OK Description of Function: - Use arrow keys to move onscreen cursor to position of interest in map. - Click with OK to activate the embedded caption. Sketch of phone: Screen Map Controls

Abdul Rauf28 Finishing High-level Design STEP 6. Think about the dynamic. STEP 7. Review general and visual guidelines. –These are iterative review steps. To accomplish these, conduct an assessment on your prototype. –Exercise. Build a paper prototype of your design. Design and build a formative, heuristic assessment of your paper prototype. The experts should assess your paper prototype against the guidelines presented in the book as well as against the specification. Conduct your heuristic assessment. Revisit your design and make improvements.

Abdul Rauf29 Steps for Low-level Design STEP 1. Map the task structure onto your design. STEP 2. Design your individual interactions. STEP 3. Check the design of your individual screens or interactions against both the general guidelines and the visual design guidelines from Chapter 9 and any other project or commercial platforms that you have.

Abdul Rauf30 1. Map Task Structure Onto Design In some regard we have done this. Our task has two subtasks: –Locate site of interest. We are using the arrow keys to accomplish. –Activate caption for site of interest. We are using the OK button.

Abdul Rauf31 2. Design Individual Interactions We still have some questions to answer. For example: –Where does the cursor start as the default position? –Is there a way to return the cursor to the default position? –How many sites can we realistically show on our screen and have them be legible? Should we consider having the size of the names of the sites become larger as the cursor passes over them? –What happens if our current county is large? –How will you indicate the location of the cursor. Exercise –Determine the answers to these and any other questions that you can think of.

Abdul Rauf32 3. Check Design Against Guidelines Exercise –Build a demonstration prototype of your design. –Design and build a formative, heuristic assessment of your paper prototype. The experts should assess your paper prototype against the guidelines presented in the book as well as against the specification. –Conduct your heuristic assessment. –Revisit your design and make improvements.

Abdul Rauf33 Conclusions We have gone over a series of steps to help in the design of an interaction. The steps take into account information from the specification. Iteration is key to a good design. In our demonstration in this unit we used prototyping and heuristic assessments as techniques to guide our iterations.