Interface evaluation

1. Interface evaluation An application of evaluative methods

2. Today’s topics • Research methods • Web application • Navigation • Link structure (see slides in week) • Image (see slides in week) • Interactivity • User Information Behavior and Design Implications • Artifact models • Examples with questionnaires S519

3. Research methods • Survey • Interviews • Focus groups • Observations/Contextual Inquiry • Usage Statistics, Log Analysis • Usability Testing • Card Sorting S519

4. Comparison (I) Source: Ding, W. & Lin, X. (2010). Information architecture: The design and integration of information spaces. Morgan & Claypool Publishers. S519

5. Comparison (II) S519

6. Comparison (III) S519

7. Three Generations of the Web (I) S519

8. Three Generations of the Web (II) S519

9. Web Applications Source: Ding, W. & Lin, X. (2010). Information architecture: The design and integration of information spaces. Morgan & Claypool Publishers. S519

10. Web 2.0 applications • Wiki, blog, and SNS S519

11. Example: Campaign websites

12. Navigation (I) • Purpose of navigation • Where am I? (orientation). • What can I do? (content, interaction, search). • Where can I go from here? • Drill up via global navigation. • Parallel move via local navigation. • Drill down via associative navigation. S519

13. Navigation (II) • Navigation types • Global navigation and sectional navigation • Local navigation • Supplemental navigation • Process navigation S519

14. S519

15. S519

16. Compare the two navigation systems • http://www.libraries.iub.edu/index.php • http://www.lis.illinois.edu/ S519

17. Interaction Design Principles • Design for Fitts • Design for Color Blindness • Design for Affordance • Design for Efficiency • Design for Forgiveness • Design for User Perceptions S519

18. Fitt’s law: Design for Fitts • Fitts’ Law maintains that the time required to move rapidly from a starting point to a final target area is a function of the distance to the target and the size of the target. • Bigger is better: Important functions should be presented with large objects (reasonably big). • Closer is faster: The contextual action buttons or links should be presented within the reasonable proximity of user activities. S519

19. An example • Which one is better? • What about this? S519

20. Design for color blindness • Besides color, they also use shapes to convey the information. S519

21. Design for affordance • An affordance is whatever can be done to an object • a chair affords sitting • a button affords pushing • a handle afford turning or pulling • To ensure perceived affordance, the design should meet user expectations. Following conventions usually gives good affordance • Make sure people can easily tell which is clickable and which is not S519

22. Design for efficiency • Efficiency allows the user to accomplish the task more quickly • Ways to ensure efficiency • decreasing data entry (Amazon) • limiting decision making on the user’s side S519

23. Design for forgiveness • Forgiveness allows the user to feel less anxiety about making mistakes, and allows for imperfections in human activity. • There are different ways to offer forgiveness • Easy reversal of actions ((are you sure?) dialogs) • Error prevention • Error handling S519

24. Design for user perceptions • User perceptions are not always right • However, it is very important for designers to be aware of it during the design process • It is important to provide multiple ways to accommodate different users so that they can choose the preferred method to perform their tasks S519

25. An example • A classic example occurred in the 1930s in New York City, where “users” in a large new high-rise office building consistently complained about the wait times at the elevators. Engineers consulted concluded that there was no way to either speed up the elevators or to increase the number or capacity of the elevators. A designer was then called in, and he was able to solve the problem. • What the designer understood was that the real problem was not that wait time was too long, but that the wait time was perceived as too long. The designer solved the perception problem by placing floor-to-ceiling mirrors all around the elevator lobbies. People now engaged in looking at themselves and in surreptitiously looking at others, through the bounce off multiple mirrors. Their minds were fully occupied and time flew by. S519

26. How people use websites (I) • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar. Finally, users scan the content’s left side in a vertical movement. http://www.useit.com/alertbox/reading_pattern.html. S519

27. How people use websites (II) • Users tend to sacrifice information quality for easy access (e.g. Wikipedia vs. Encyclopedia) • Relying more on web search engines than individual websites S519

28. Work models • Work models • Work models = a graphical language to capture knowledge about work • Models make concepts concrete, in order for the team to share and discuss ideas • Models can be used to communicate with clients • Types of work models • Flow model, sequence model, culture model, artifact model, and physical model S519

29. Artifact model • Artifacts are tangible things people create or use to help them get their work done • Presentations • Information presented by the object • Parts of the object • Structure of the parts • Annotations • Presentation • Additional conceptual distinctions • Usage • Breakdowns • A few examples S519

30. Questionnaires on interface evaluation • http://oldwww.acm.org/perlman/question.html S519