1. CS 235: User Interface Design September 29 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Today’s Presentations: Section 2 Design teamProductClient team Ux-plorersSystem task schedulerLeague of Berryessa Mind BogglersHealth care dataNewBee Study planner and organizerThe Interfacers 2

3. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Cognitive Science  The interdisciplinary study of the mind, intelligence, and behavior.  How does the mind process information? perception language memory reasoning emotion 3 http://en.wikipedia.org/wiki/Cognitive_science

4. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Perception Can be Biased  What we see is actually an “alternate reality”.  Heavily biased by: The past: our experience The present: the current context The future: our goals _ 4

5. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Bias by Experience: Priming  Suppose you own an insurance company.  There is a small complex of office buildings that you want to insure, so you get an outline map of the buildings: 5 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

6. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Bias by Experience: Priming, cont’d  Suppose you own an insurance company.  You want to design a large sign to advertise your life insurance policies: 6 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

7. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Bias by Experience: Familiar Patterns  We expect and desire consistency. 7 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

8. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Bias by Experience: Context  What is the meaning? 8 Polish silverware.Fold napkins.Wash dishes. Polish silverware.French napkins.German dishes.

9. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Bias by Experience: Context, cont’d 9 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

10. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Perception Biased by Goals  Our goals influence where we look.  Our goals sensitize us to what we see.  You’re on the home page of the University of Canterbury.  You want information about financial support for postgraduate students in the computer science department.  How would you find it? 10

11. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Perception Biased by Goals, cont’d 11 Did you notice this? Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

12. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Perception and UI Design  Take biased perception into account!  Avoid ambiguity. Make sure all users interpret your design in the same way.  Be consistent. Place controls in consistent locations. Use consistent shapes, colors, fonts, etc.  Understand goals. Different users may have different goals. Ensure your UI clearly directs users to the right goal. 12

13. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Perception Video 13 https://www.youtube.com/watch?v=9Il_D3Xt9W0

14. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory  Perceptions enter through our visual, auditory, olfactory, gustatory, and tactile sensory systems.  Long-term memory is recorded in our brains by changes in the neurons that are involved in a neural activity pattern. _ 14

15. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory: Recognition vs. Recall  Recognition New perceptions similar to previous ones reactivate the same pattern of neurons.  Recall Other brain activity causes a pattern of neurons to reactivate. _ 15

16. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Short-Term Memory  A combination of phenomena involving: perception attention retrieval from long-term memory  Working memory The main component of short-term memory. The tiny subset of all available information from our perceptual systems and our long-term memory that we are aware of right now. 16

17. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Working Memory Analogy  Long-term memory is a dark warehouse full of stuff.  Doors and windows represent our perceptual senses.  Working memory consists of whatever is lit up by a few searchlights.  The searchlights move to shine on different objects as our attention (what we are aware of now) shifts. 17

18. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Working Memory Analogy, cont’d 18 Working memory is not a memory store! Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

19. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Attention and Working Memory  Attention is highly focused and selective. Objects and events related to our current goals. Movement near or toward us. Threats, faces, food, sex.  Capacity of attention Old theory: 7 plus or minus 2 Actual average capacity: 4 plus or minus 1  Volatility of working memory Easy to forget goals and details. 19

20. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Working Memory and UI Design  Remind users what their search terms were. 20 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

21. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Working Memory and UI Design, cont’d  Leave breadcrumbs behind 21

22. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Working Memory and UI Design, cont’d  Don’t force the user to memorize instructions. 22 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

23. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory  Long-term memory is a memory store (a dark warehouse).  Error-prone Not an accurate, high-resolution recording.  Weighted by emotions  Retroactively alterable _ 23

24. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory and UI Design  Do not burden long-term memory.  Example: Don’t make it impossible to create an easy-to-remember PIN. 24 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

25. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory and UI Design, cont’d  Example: Users may have a hard time to come up with unique and memorable answers to standard authentication questions. 25 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

26. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Long-Term Memory and UI Design, cont’d  Solution: Let the users pick their own questions. 26 Designing with the Mind in Mind, 2 nd ed. by Jeff Johnson Morgan Kaufmann, 2014

27. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Attention and Goals  We focus on our goals and pay little attention to things not related to our goals.  Attention blindness When we are occupied with a task or goal, we can fail to notice objects and events that we would otherwise notice.  Change blindness When our attention is focused, we fail to notice change. 27

28. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Attention and Change Blindness Videos 28 https://www.youtube.com/watch?v=IGQmdoK_ZfY&index=2&list=PLB228A1652CD49370

29. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Recognition is Easy  Recognition = perception + long-term memory  Recognition is often very fast. Recognize threats Recognize faces 29

30. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Recall is Hard  Our brains did not evolve to recall facts well. We all hated to memorize facts in school.  Modern memory aids include: PowerPoint slides Account books Address books Calendars Alarm clocks 30

31. Computer Science Dept. Fall 2014: September 29 CS 235: User Interface Design © R. Mak Recognition and UI Design  Docked icons convey function via recognition.  PowerPoint thumbnails provide an overview of a presentation based on recognition. 31