1. UX Crash Course / Psych Foundations
Jamiahus Walton  |  Kaitlyn Ouverson
Human Computer Interaction
Virtual Reality Applications Center

2. Who am I? Thanks for asking, I’m Jamiahus.
Student
2nd year grad student in Human Computer Interaction program
PhD - Spring 2019 (anticipated)
MS - Fall 2015 (HCI)
BS - Spring 2013 (Physics)
5th year as research assistant

3. Who am I? Research Assistant Primary research focus is teams
Dissertation: Intelligent tutoring system for teams
Research Interests
Intelligent Tutors
User research

4. Major Influences
Faith
Family

5. Interests / Hobbies Soccer TV/Movies (e.g., Psych, Bad Boy 1 & 2)
Video Games (e.g., WoW)

6. Homework 1.5
How was it? What did you learn? 3 minute presentations

7. Homework 1.5
CooL:SLiCE "Hierarchical Task Analysis"

8. Homework 1.5
Nav "Affinity Diagram"

9. Homework 1.5
TIMELI "Affinity Diagram"

10. Homework 1.5
VR/AR "Affinity Diagram"

11. A Quick Note about Homework 1.5
Affinity Diagramming is a process of grouping like items together (our Ames example + headings) HTA is a type of user journey map – the task being analyzed is that of the user working toward a goal

12. HTA - Example

13. What is UX?
Who’s heard of UX? Who's heard of usability? Any ideas on what they are?

14. What is UX?
What is User Experience (UX) and where does it fit? Is Usability the same as UX? “Does it work?” vs “How did you feel?” Both have value, ideally both can be witnessed and used appropriately for the situation.
An article I found about QA vs UX (

15. User Experience: What is it?
"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. -NNGroup

16. Usability: What is it? 
Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment. 
- ISO 9241

17. WHEN should it happen?
As early as possible. Imagine… We test your product at the end of a project. What do you do with the feedback? Toss it We test at the beginning of the project. What do you do with the feedback? You might implement it!

18. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?
Modified from Garrett’s The Elements of User Experience

19. 1. Users’ goals? Team’s goals?
Start with these questions: 1) What do our users want to get out of it? 2) What do we want to get out of this service? For us, you likely know what you want to get out of the service, but what do your users want? As you know, students expect a lot from their library, including spaces for work, study, & groups, semi-social non-disruptive areas, snack & beverages, and familiar search experience when remotely using library services. Because students do not make a distinction between the library and commercial services (e.g., Google, Microsoft, Apple, etc.) there are high expectations placed on the library’s online experience.
Current Example: TIMELI – We want to get rid of multiple windows and put everything into one application, 

20. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?
Modified from Garrett’s The Elements of User Experience

21. 2. What are the requirements/specifications?
Now that you’ve identified (or gotten close to identifying) your goals and user goals, they need to turn into something more concrete. Outline your requirements and specifications so you don’t get caught in perpetual development and feature creep scenarios down the road.

22. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?
Modified from Garrett’s The Elements of User Experience

23. 3. IXD / IA
First pass at Interaction design (IxD) and information architecture (IA). With specifications set, start to sketch what the interaction and workflow could look like. IA can begin to be built with your known content and tested out with a simple open card sort.

24. Librarians make great IA people
Information Architect
Not sure how to explain this figure.
Alternative career paths for librarians

25. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?
Modified from Garrett’s The Elements of User Experience

26. 4. Interface design
Building the skeleton is where that early prototyping comes into play. Utilizing your specifications and newly planned out IXD/IA an early mock-up can be made and even tested.
Done! --->

27. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?

28. 5. Visual Design
Make it aesthetically pleasing without damaging the usability of the interface

29. What’s the process? (bottom up!)
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?

30. 6. Evaluate & Iterate
User testing shines here, early and often. But you can also use non- user methods such as heuristic review. Once you have something to test with, goals still set, and a means to capture the feedback, gather some data.
If goals are not met, feedback can be taken to iterate design.

31. Questions?
6. Evaluate & Iterate 5. Visual design 4. Interface design 3. IxD / IA 2. Requirements/specifications? 1. Users’ goals? Team’s goals?

32. UX Methods
Combination of qualitative and quantitative measures. Qualitative - Gets at the majority of issues and gives direction. Quantitative - Bolsters results with “proof” and validates qualitative findings (assuming they support each other).

33. Null Hypothesis Significance Testing
UX Methods
Large combination of qualitative and quantitative measures available. - Qualitative: gets at the majority of issues and gives direction. - Quantitative: bolsters results with “proof” and validates qual findings.
Quantitative
Qualitative
Null Hypothesis Significance Testing
UX metrics:
Error rate
Time on task
Efficiency
Abandonment
Behavioral coding
Interview
Think-aloud protocol
Larger samples
Smaller samples

34. UX Methods
Lavoie 2015
“Stories are just data with soul.” Brown, 2010.

35. UX Methods It’s ok to go the “quick and dirty” rapid route as well.
Formal
Informal
Academic Research
User testing
Heuristic review
Paper Prototype

36. Prototyping
Fidelity levels help scope your design and testing. Usually, less is more. Additionally, low fidelity helps you avoid the “pretty bias.”
Focus on functions
Full test, less “pretty time”
Focus on full experience

37. Oralce UX Group Example
Navigation Flow
Paper Prototype
Low-Fidelity Prototypes
Wire Framing
High-Fidelity Prototype

38. Why would you waste your time?
“We’ve made X this way for years. We sell more than anyone else, why would we invest in that now?” -Paraphrasing from: 1970’s US Auto Industry (see: Honda, Toyota, Nissan) 1990’s Microsoft, SEGA (see: Apple) 2000’s Healthcare/Accounting/Business software (see Epic, Workiva)

39. Homework 1
Show us!

40. Big picture
Evaluate as early as possible, with the correct tool for the job, with respect to your goals (yours and the users’). UX has very much become an exercise in empathy, really consider things from the user’s perspective. UX can be relatively cheap to implement and the ROI is almost certainly worth it.

41. Matching mental models
As you can see, the problems we have are not the same as the problems others have (or designers expect!). This gets to where we (as UX practitioners) need to consider and consult our users mental model.

42. Mental (conceptual) models
User’s mental model should match designer’s mental model. This is currently seen as an exercise in user empathy. Don Norman described this.

44. Cognitive Psychology
THE FOUNDATION

45. The Human in HCI Inputs and Outputs Vision Hearing
Touch
Movement
Vision-devoted neurons make up 30% of the brain
Hearing-2%
Touch-8%
Numbers taken from my old neuroscience book

47. Vision

48. Visual Angle / Visual Acuity
Spaces detectable at
30 sec – 1 min of visual arc
What your brain expects: this plays into the illusions with the monsters, etc

49. Brightness
Luminance is physical (photometer), brightness is perception
Measured in JNDs (Just Noticable Difference in luminance)
Higher Luminance
Higher acuity
Higher flicker

50. Color
HUE
SAT.
VALUE /
BRIGHTNESS

51. Colorblindness ~ 8% of males ~ 1% of females ~ 12% of females
Protanopia – no red
~ 8% of males
~ 1% of females
Deuteranopia – no green
~ 12% of females
carry the gene for
four cones
Tritanopia – no blue
rare

52. Tetrachromacy
Approximately 2-3% of all women are tetrachromats Concetta Antico

53. Optical Illusions
OK Go – The Writing’s on the Wall video and Videos by Brusspup

54. Optical Illusions
Inattentional Blindness

55. HUDs (Heads Up Displays)
“Two of the pilots never saw the jet on the runway and landed right through it.” – the invisible gorilla
-SIMULATION-

56. Hearing Pitch Loudness (perception of amplitude) Timbre
Cocktail party effect
Shepard Tones

57. Hearing is Believing?
Vision is super complicated, but humans (in general) rely heavily on it. One of the questions in robotics deals with object recognition in the absence of vision.

58. Hearing is Believing?
Griffith, S., Sukhoy, V., Wetger, T., & Stoychev, A., “Object Categorization in the Sink…”, 2012 ICRA

59. Developmental Robotics Lab
Alexander Stoychev (Director) “…truly intelligent robot behavior cannot be achieved in the absence of a prolonged interaction with a physical or a social environment.”

60. Touch Thermoreceptors (heat/cold) Nociceptors (pressure & pain)
Mechanoreceptors
Rapidly adapting (poke)
Slowly adapting (hold)
Kinesthesis

62. Touch: Homunculus
Somatosensory
Motor

63. Relatedly, Movement
Hick-Hyman law – time to choose Fitts’s law – time to move
Selection Time = a + b log2N
Click to add text
Click to add text
Click to add text
Reaction Time = a + b log2(distance/size + 1)

64. Memory
All feed back to each other (remember Dr Dark’s talk!)

65. Stroop

66. BLACK
RED
GREEN
BLUE

67. RED
BLACK
BLUE
GREEN
This is Stroop

68. Memory

69. Mental Representations
Semantic Network Schemata (or Schemas)

70. Semantic Network

71. Schemas Imagine going to a sit-down restaurant
What do you do when you get there? How do you order?

72. Schemas A schema of ordering at a sit-down restaurant:
Wait for hostess, sit at assigned table, order with waitress at the table
When something
breaks the pattern?

73. We love to find patterns
Gestalt Principles! Law of Closure

74. We love to find patterns
Gestalt Principles! Law of Figure-Ground

75. Gestalt Design

76. Experience Dictates Perception
We are NOT logical!
…at least not without effort
The book plot in 1ish sentences

77. Reasoning Fact: Rule: Question:
All cards have letter on one side and number on the other
Rule:
If there’s a vowel on one side, there’s an odd number on the other side.
Question:
Which card(s) do you turn over to verify the rule?
The A and the 8; P and Not-Q

78. Reasoning Fact: Rule: Question:
All cards represent people - the person’s drink is on one side, age is on the other.
Rule:
If the person is drinking alcohol, he or she must be over 21
Question:
Which card(s) do you turn over to verify the rule?
The Beer and the 17

79. And if you like Kahneman
You’ll like Thaler
iNcentives
Understand “mappings”
Defaults
Give feedback
Expect error
Structure complex choices

80. Default behaviors
So nudge people to make better decisions. e.g. Retirement funds should be “opt-out” not “opt-in.” Understand your user and you can design around our biases: Anchoring bias - we gravitate where we start (cost of home) Availability bias – we overestimate things we can recall (plane crashes) Representative bias – see patterns that aren’t there (lucky hat) Plus many more!

81. Homework: Good UX Scavenger Hunt
* Choose a software you have used during your REU projects so far (e.g., Google docs, box, etc.)
* 3 reasons why you think it is good for what you are doing 
* 2 design principles each reason connects to