2. ©2001 Southern Illinois University, Edwardsville All rights reserved. Today Thursday CS 321 Human-Computer Interaction Midterm Q & A Design Elements Midterm Exam Reading: ABF Ch.s 8, 9, & 19 Tuesday Milestone #1 – bring consolidated models and affinity diagram

3. ©2001 Southern Illinois University, Edwardsville All rights reserved. "Why doesn't this work right? What am I supposed to do with this now?" World Usability Day, November 14, 2006, is for everyone who's ever asked these questions. This Earth Day style event, focused on raising awareness and visibility of usability engineering and user centered design. World Usability Day 2006 promotes the belief that every user has the responsibility to ask for things that work better.

4. ©2001 Southern Illinois University, Edwardsville All rights reserved. User Modeling & Human Factors Contextual Design looks for User’s Mental Models The way we think about things The way we organize The strategies for accomplishing tasks We must also design for the abilities & limitations of our “Human Equipment” Limitations of Cognition  memory  attention Limitations of Perception  Vision, tactile, hearing Limitations of Dexterity

5. ©2001 Southern Illinois University, Edwardsville All rights reserved. Multidisciplinary Design Team It would be great to have a … Graphic Designer  Presentation of information so that the eye and brain can see what the presenter intends to be seen Human Factors Specialist  Study human physical and mental capabilities relevant to design

6. ©2001 Southern Illinois University, Edwardsville All rights reserved. Static vs. Dynamic Evaluation Dynamic Evaluation Paper prototype testing Usability testing Static Evaluation (Expert Evaluation) Heuristic Evaluation Cognitive Walkthroughs  Good to use while designing  Good to use when you cannot get any users to do live testing

7. ©2001 Southern Illinois University, Edwardsville All rights reserved. Heuristic Evaluation Nielson and Molich’s Nine Heuristics 1.Simple and natural dialog Simple means no irrelevant or rarely used information Natural means an order that matches the task 2.Speak the user’s language User words and concepts from the user’s world. Don’t use system specific technology terms. 3.Minimize user memory load Don’t make the user remember things from one action to the next. Leave information on the screen until it is not needed.

8. ©2001 Southern Illinois University, Edwardsville All rights reserved. Heuristic Evaluation Nielson and Molich’s Nine Heuristics 4.Be consistent Users should be able to learn an action sequence in one part of the system and apply it again to get similar results in other places Terminology, UI components should be same or similar Icons share characteristics that relate and contrast with each other. 5. Provide feedback Let users know what effects their actions have on the system Use verbal or non-verbal feedback to convey status Use verbal or non-verbal feedback to convey how long a process will take. 6. Provide clearly marked exits If users get into part of the system that doesn’t interest them, they should always be able to get out quickly without damaging anything

9. ©2001 Southern Illinois University, Edwardsville All rights reserved. Heuristic Evaluation Nielson and Molich’s Nine Heuristics 7.Provide shortcuts Shortcuts can help experienced users avoid lengthy dialogs and informational messages that they don’t need. Keyboard shortcuts, toolbars, and other accelerators are sought for and appreciated by users, but they should not get in the way of people that are not looking for them. 8.Good error messages Good error messages let the user know what the problem is and how to correct it. Good error messages do not blame the user.

10. ©2001 Southern Illinois University, Edwardsville All rights reserved. Heuristic Evaluation Nielson and Molich’s Nine Heuristics 9.Prevent errors Design so as to prevent errors Whenever you write an error message you should ask “can this error be prevented?”

11. ©2001 Southern Illinois University, Edwardsville All rights reserved. Cognitive Walkthrough Small group of people do a step-by-step walkthrough No actual users, working with assumptions and projections of the user cognition and behavior for each step necessary to work the interface User profiles Start with a non-technical statement of the task Point of view of first time user State the goals of the user With each user step identify… What the user is likely to perceive What ‘goals” or tactics the users will add or drop in order to work through the interface

12. ©2001 Southern Illinois University, Edwardsville All rights reserved. SOFTWARE POSTURE The way a program presents itself to users Its posture reflects how it is used and affects the way users relate to it. EACH PROGRAM IS DESIGNED TO HAVE PRIMARY OR SECONDARY FOCUS, SHORT-TERM OR LONG-TERM DURATION, OR FOREGROUND OR BACKGROUND PROCESSING. THESE POSTURE DETERMINATIONS ARE DICTATED BY THE PURPOSE OF THE PROGRAM.

13. ©2001 Southern Illinois University, Edwardsville All rights reserved. SOVEREIGN POSTURE The application is heavily used and requires the user’s full attention The user wants access to many feature at once The user will be irritated by small inefficiencies EXAMPLES: VIDEO GAMES SPREADSHEETS POWERPOINT DEVELOPER STUDIO

14. ©2001 Southern Illinois University, Edwardsville All rights reserved. SOVEREIGN SOFTWARE DESIGN THE NATURE OF SOVEREIGN PROGRAMS YIELDS CERTAIN DESIGN PREFERENCES: Assume the users will be viewing the application for long periods of time – make it easy to view. Child windows – supporting tasks should be maximized. Assume that users will mainly view the application in full screen mode – use the space.

15. ©2001 Southern Illinois University, Edwardsville All rights reserved. TRANSIENT POSTURE The user will only want to use the application briefly Application has a limited number of controls Application should be easily understood by first- time users EXAMPLES: INSTALLERS SMALL UTILITIES DIALOG BOXES Transient programs should have instructions built into their surface.

16. ©2001 Southern Illinois University, Edwardsville All rights reserved. DAEMONIC POSTURE Software that has no (rare) interaction with the user is said to have a DAEMONIC POSTURE. EXAMPLES: DRIVERS OPERATING SYSTEMS Daemonic programs tend to use transient programs to configure them and on screen icons to access them (e.g., MS system tray).

17. ©2001 Southern Illinois University, Edwardsville All rights reserved. AUXILIARY POSTURE A.K.A. A PARASITIC POSTURE Continually present like a soverien application but performs a supporting role like a transient application EXAMPLES: ON-SCREEN CLOCKS E-MAIL MONITORS TASKBARS Auxiliary applications must be readily accessible when needed but unobtrusive otherwise

18. ©2001 Southern Illinois University, Edwardsville All rights reserved. Human Factor Principle: Fitt’s Law The time to acquire a target is a function of the distance to and size of the target. Many ways it can be applied to improve user’s experience Tool bar layout Menu placement Hierarchical menu access Fittize elements

19. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principle: Consistency Maintaining interface element meaning, placement, and organization Advantages Reduces memory load Reduces learning curve Supports the user’s navigation Keeps interface predictable Type of Consistency Internal: within an application External: across applications Real World: consistent with the outside world

20. ©2001 Southern Illinois University, Edwardsville All rights reserved. Consistency MS Office keeps a similar look, feel, and button/menu placement across the different program interfaces

21. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principle: Simplicity Avoid Visual Noise Excess or extra items serve as distractions Minimize the number of items or groupings to make things easier to find

22. ©2001 Southern Illinois University, Edwardsville All rights reserved. Simplicity Minimize the use of colors Vegas effect Fruit salad effect Color pollution

23. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principles: Readability and Legibility Legibility - Individual elements should be easily noticeable and distinguishable Readability - Display is comprehensible Font  10 point minimum, 12 point preferred  San Serif is generally easier to read on screen  Use no more than three fonts on a display, preferably just one or two

24. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principles: Readability and Legibility Emotional Style Italics for emphasis Capitals for YELLING Bold for emphasis  Dangerous Animals in Area Use emotional style sparsely

25. ©2001 Southern Illinois University, Edwardsville All rights reserved. Readability and Legibility  Bad Example: text used in a tutorial. It’s illegible! A A SERIFS SANS SERIF CAPS ARE LESS LEGIBLE Mixed cases are more legible.

26. ©2001 Southern Illinois University, Edwardsville All rights reserved. Design Principle: Grouping Keeping similar or related items together Advantages Helps users to find information quickly Allows users to discern what goes together Ways to group Color Borders Alignment Gestalt Principles Proximity Similarity

27. ©2001 Southern Illinois University, Edwardsville All rights reserved. Visual Perception Constructivist Theory Perception involves the intervention of representations and memories. The visual system constructs a models of the world by transforming, enhancing, distorting, and discarding information. Our ability to perceive objects is effected by our prior knowledge and expectations

28. ©2001 Southern Illinois University, Edwardsville All rights reserved. Context We interpret objects based on their context as a result of our prior knowledge

29. ©2001 Southern Illinois University, Edwardsville All rights reserved. Gestalt Laws of Perceptual Organization Visual construction involves decomposing or partitioning an image into separate entities that are readily recognizable a)Proximity b)Similarity c)Closure d)Continuity e)Symmetry

30. ©2001 Southern Illinois University, Edwardsville All rights reserved. Which Gestalt Principles are being used? Proximity Similarity Closure Continuity Symmetry