1. ©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Design Elements Readings in HCI, pp. 411-443 Wednesday Design Elements cont.

2. ©2001 Southern Illinois University, Edwardsville All rights reserved. Mental Models & Human Factors Mental models are: The way we think about something. The way we organize The strategies for accomplishing tasks We must also design for the abilities and limitations of our “Human Equipment” Cognition  Memory abilities & limitations  Attention Perception  Vision, Hearing Tactile, Olfactory, Taste

3. ©2001 Southern Illinois University, Edwardsville All rights reserved. It would be nice to have a - Graphic Designer Presentation of information so that the eye and brain can see what the presenter intended to be seen. Human Factors Specialist Study human physical and mental capabilities relevant to design

4. ©2001 Southern Illinois University, Edwardsville All rights reserved. Interface Evaluation Design elements and conventions are guidelines Ultimately it comes down to using the application Remember We are striving to design applications that let users focus on how the task they are doing and not the application. The application should become a natural part of the task process

5. ©2001 Southern Illinois University, Edwardsville All rights reserved. Static vs. Dynamic Evaluation Static Evaluation Heuristic Evaluation Cognitive Walkthroughs  Good to use while designing  Good to use when you can not get any users to do live testing Dynamic Evaluation Prototype testing Usability testing

6. ©2001 Southern Illinois University, Edwardsville All rights reserved. Heuristic Evaluation Nielsen 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 Use words and concepts from the user’s world. Don’t use system-specific engineering 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’s not needed. 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. 5. Provide feedback Let users know what effect their actions have on the system. 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. 7. Provide shortcuts Shortcuts can help experienced users avoid lengthy dialogs and informational messages that they don’t need. 8. Good error messages Good error messages let the user know what the problem is and how to correct it. 9. Prevent errors Whenever you write an error message you should also ask, can this error be avoided?

7. ©2001 Southern Illinois University, Edwardsville All rights reserved. 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/system External: across applications/systems Real World: consistent with physical systems

8. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Office 2000 keeps a similar look, feel, and button/menu placement across the different program interfaces.

9. ©2001 Southern Illinois University, Edwardsville All rights reserved.Innovation Deviate when a change provides a benefit to the user Example Kid Pix uses multiple different icons to erase a picture. Why?

10. ©2001 Southern Illinois University, Edwardsville All rights reserved. Simplicity Avoid Visual Noise Excess or extra items that serve as distractions Minimize number of items or groupings to make things easier to find and understand Cognitive overload

11. ©2001 Southern Illinois University, Edwardsville All rights reserved. Simplicity Minimize use of colors “Vegas”, “fruit salad” effect, or color pollution http://www.geocities.com/webtekrocks/

12. ©2001 Southern Illinois University, Edwardsville All rights reserved. Readability and Legibility Legibility - Individual elements should be easily noticeable and distinguishable Readability - Display is comprehensible Font  10 point font minimum, 12 point font preferred  Sans Serif is generally easier to read on screen Emotional Style Italics for emphasis Capitals for Yelling  Dangerous Animals in Area

13. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Text used in a tutorial

14. ©2001 Southern Illinois University, Edwardsville All rights reserved. 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

15. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Too many groupings!Fewer groupings

16. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Everything aligned, similar items grouped by proximity, with borders to reinforce and a title to label.

17. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Labels are not aligned to the fields they are associated with, causing the eyes to zig-zag around the screen as the user attempts to locate a field of interest. The choice of color to distinguish labels from editable fields further adds to the confusion.

18. ©2001 Southern Illinois University, Edwardsville All rights reserved. Hierarchy Arrange elements in display according to their importance Visual hierarchies communicate both reading order and the perceived order of importance of information Western readers will look at upper left corner first Caps, point size, bolding, color, grouping, and isolation set items off from the rest of the screen

19. ©2001 Southern Illinois University, Edwardsville All rights reserved. Hierarchy: What is being emphasized on this page? www.siue.edu/ENGINEER www.siue.edu/ENGINEER

20. ©2001 Southern Illinois University, Edwardsville All rights reserved. White Space or Negative Space Not wasted space! Makes interface easier to scan Helps critical elements stand out Reduces the feeling of complexity

21. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Hierarchy: Grouping, fonts, and location, show importance and category Readability and Legibility: Sans Serif, 12 point, and use of white space

22. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Weak hierarchy and poor organization. What is most important? What goes with what? Poor use of white space

23. ©2001 Southern Illinois University, Edwardsville All rights reserved. Balance Creates a sense of unity and structure within the visual elements Think in terms of gravitational pull, like a fulcrum Squint test or look from a distance

24. ©2001 Southern Illinois University, Edwardsville All rights reserved. Principles of Interface Design: Organization & Visual Composition Example: Balanced Example: Not Balanced

25. ©2001 Southern Illinois University, Edwardsville All rights reserved. Example 1

26. ©2001 Southern Illinois University, Edwardsville All rights reserved. Example 2

27. ©2001 Southern Illinois University, Edwardsville All rights reserved. Example 3 TCP/IP Configuration

28. ©2001 Southern Illinois University, Edwardsville All rights reserved. Example 4 A Real Estate Application to help buyers find houses