Predicting and Evaluating Interactor Efficacy

layout:false

# Why is selection (and testing) important .red[*]
.left-column50[

![:img Image showing a false alarm in hawaii that led everyone to
think there wsa a nuclear event, 100%](img/alert1.jpg)
]
.right-column50[
![:img Image showing the screen that led to this error, 100%](img/alert.jpg)
]

.footnote[.red[*] [Washington Post Article](https://www.washingtonpost.com/news/morning-mix/wp/2018/01/16/that-was-no-wrong-button-in-hawaii-take-a-look/?utm_term=.1848969db923)
]
---
name: inverse
layout: true
class: center, middle, inverse
---
# Predicting and Evaluating Interaction Efficacy

Jennifer Mankoff
CSE 340 Spring 2019 
---
layout: false

[//]: # (Outline Slide)
# Today's Learning goals
- Introduce key coding concepts for Menus Assignment
- **Using Properties of People To Predict Design Outcomes**
---
.title[Comments on Feedback]
.body[
Thanks for the feedback on the class!
- Quizzes show. Assignments are taking a long time. We will try to post information
about expected time, please reach out for help if you go beyond that

- Start early (some people are starting ColorPicker today), so you can ask us for help with time to spare!

]
???
Feedback from Monday 
---
.title[Menus Assignment]
.body[
Will compare pie menus to linear menus

Demo
]

---
.left-column50[
## Interface  Structure

<div class="mermaid">
graph LR
FrameLayout --> ActionBar[ActionBar]
ActionBar --> TextView[TextView:Pie/Menu]
ActionBar --> Hamburger[Hamburger:Next Session/ClearCSV]
FrameLayout --> MainLayout[MainLayout]
MainLayout --> MenuExperimentView[MenuExperimentView]
MainLayout --> InstructionText[InstructionTextView]

classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px;
classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px;
classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px;
classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF

class FrameLayout,ActionBar,MainLayout,TextView,Hamburger,MenuExperimentView,InstructionText normal
</div>
]

.right-column50[
## Inheritance Structure

<div class="mermaid">
graph LR
MenuExperimentView[MenuExperimentView] --> PieMenuView[PieMenuView]
MenuExperimentView --> NormalMenuView[NormalMenuView]
</div>

]
 
---
.title[PPS for assignment]
.body[
Implemented in MenuExperimentView

<div class="mermaid">
graph LR
S((.)) --> A((Start))
A -- "Press?drawMenu;startTrial;startPoint=p" --> I((Inside))
I -- "Release:endTrial;reset();onOptionSelected(trial)" --> E[End]
I -- "Drag:currentIndex=menuItem" --> I

class S invisible
class A start
class E finish
class I normal
</div>

Works in both Menus!
]

---
.title[Enums]
.body[

Group of named constants

- Used for PPS in colorPicker (PPS States; Essential Geometry)

- Used for PPS in Menu assignment *and* for experimental conditions

- Easy to inspect if you want to (we do this in ExperimentSession)

[Documentation](https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html)
]

---
.title[Custom Listeners]
.body[
- Used in ColorPicker and Menus. You'll use them lots
- Why create custom listeners?
]
--
.body[
 - Let you execute code when your view's model has changed
 - No other way to know that has happened

]

---
.title[How to implement]
.body[

Custom View needs
- To define the custom interface 
- To keep track of listeners
]
--
.body[
Anything using the view needs
- To implement the interface (specifically, the method that will be called)
- To register itself as a listener
]
---
.title[Example Custom View -- ColorPicker: We setup the Custom View side for you]
.body[
```java
    /** Currently registered ColorListener instance or null. */
    protected ColorListener mColorListener;

/**
     * Class which defines a listener to be called when a new color is selected.
     */
    public interface ColorListener {
        void onColorSelected(@ColorInt int color);
    }

/**
     * Registers a new listener for the color of this ColorPicker, or replaces
     * any existing listener.
     *
     * @param colorListener New listener or null.
     */
    public final void setColorListener(@Nullable ColorListener colorListener) {
        mColorListener = colorListener;
    }
```
]
---
.title[You need to do this yourself in Menus]

.body[

```java
 /**
     * You need to create a listener interface so the application
     * can be notified when a selection is made. This will trigger
     * the move to the next trial.
     */
    protected MenuExperimentViewSolution.MenuListener menuListener;
```
]
---
.title[Example Custom Listener -- ColorPicker: You need to implement
this]

.body[
`// TODO: Register callback to update {color,label} View when color changed.`

What method do we call to register the callback?  setColorListener

What method is called when?

What do we usually do in a callback? update application state
]
???
 Draw a time based diagram 
---
.title[Listener in Menus]
.body[
`setMenuListener` needs to be implemented, should

- record the result of that trial
- Update the experiment to show the next menu (or nothing if the
session is over)
- Update the instructions to the user
]
---
.title[OnDraw changes to Canvas]
.body[
Views `MATCH_PARENT`

Makes drawing tricky

Translate (like a parent view does for kids)

]
---
layout: false

[//]: # (Outline Slide)
# Today's Learning goals
- Introduce key coding concepts for Menus Assignment
- **Using Properties of People To Predict Design Outcomes**
---
.title[Fitts Law]
.body[
Quiz Results to discuss
]

---
.title[Other laws we might use to make predictions about what will go better]
.body[
- Fitts Law (compare distance and size; check for infinite size)
- Steering Law (distance and size over a path)
- Cognitive modeling (complex multi-step model of expert behavior)
 - Does someone have to 'check' something? More than once?
 - Do they have to move? More than once
- Gestalt Psychology (will they see it at all?)
- Errors (will they be reduced)
]
---
#Which is better and which laws explain it?
.left-column50[
#A Pie Menu
![:img Pie Menu, 80%](img/pie.jpg)
]
.right-column50[
#B Pull down Menu
![:img Traditional Menu inside a web browser, 80%](img/menu.png)
]
???

What analysis methods can we use to predict?

- Fitts Law (compare distance and size; check for infinite size)
- Steering Law (distance and size over a path)
- Cognitive modeling (complex multi-step model of expert behavior)
 - Does someone have to 'check' something? More than once?
 - Do they have to move? More than once
- Gestalt Psychology (will they see it at all?)
- Errors (will they be reduced)

---
# Which is better and which law explains it?
.left-column50[
#A Pie Menu
![:img Pie Menu, 80%](img/pie.jpg)
]
.right-column50[
#B Marking Menu
![:youtube Video assigned before class, 8c58bN6ajJ4?t=30]
]
???

- Fitts Law (compare distance and size; check for infinite size)
- Steering Law (distance and size over a path)
- Cognitive modeling (complex multi-step model of expert behavior)
 - **Does someone have to 'check' something? More than once?**
 - **Do they have to move? More than once**
- Gestalt Psychology (will they see it at all?)
- Errors (will they be reduced)
---
.title[Which is better and which laws explain it?]

.body[
A: Tapping B: Crossing
![:youtube Video of using crossing for selection, kp2Zl4ONuik]
]

???

- **Fitts Law (compare distance and size; check for infinite size)**
- Steering Law (distance and size over a path)
- Cognitive modeling (complex multi-step model of expert behavior)
 - Does someone have to 'check' something? More than once?
 - Do they have to move? More than once
- Gestalt Psychology (will they see it at all?)
- Errors (will they be reduced)

---
#Which is better and which laws explain it?
.left-column50[
#A
![:img Picture of the Graffiti gesture recognition alphabet from the Palm Pilot, 100%](img/Grafitti.png)
]
.right-column50[
#B
![:img Picture of the Edgewrite gesture recognition alphabet, 50%](img/Edgewrite.png)

]
???

---
#Which is better and which laws explain it?

.left-column50[
#A
![:img Picture of old facebook security page with icons and text mixed
up,100%](img/facebook.png)
]
.right-column50[
#B

![:img Picture of March 2019 facebook security page with icons and
text clearly aligned, 100%](img/facebook2.png)
]
???

- Fitts Law (compare distance and size; check for infinite size)
- Steering Law (distance and size over a path)
- Cognitive modeling (complex multi-step model of expert behavior)
 - Does someone have to 'check' something? More than once?
 - Do they have to move? More than once
- **Gestalt Psychology (group?)**
- **Errors (will they be reduced)**
---
# How do we actually **prove** such theories?

--
# Collect Data!
---

.left-column[##Kinds of data we can collect?]
???
Discuss
--
.right-column[
- Video
- Timing/Errors
- Descriptions of behaviors
- Notes
- Can transcribe and analyze interviews with users
- Can look for patterns across users
]
---
.left-column[##Qualitative data collection to test theory]
.right-column[
Identify Critical Incidents (can be good or bad)

Critical Incidents are Situations that: 
- Provoke silence 
- Provoke puzzlement 
- Provoke user comments

Capture using Critical Incident reports

]
---
.left-column[##Quantitative data collection to test theories]
.right-column[
Identify Hypothesis

Hypothesis is 
- Relevant
- Testable

Capture data that proves or disproves hypothesis

]
---
# How do we prove our theories? Hypothesis

<div class="mermaid">
graph LR
S((.)) --> Hypothesis((Hypothesis))

linkStyle 0 stroke-width:4px;

class S invisible
class Hypothesis start
</div>

---
# How do we prove our theories? Method

<div class="mermaid">
graph LR
S((.)) --> Hypothesis((Hypothesis))
Hypothesis -- "Study Design" --> Method((Method))

linkStyle 0 stroke-width:4px;
linkStyle 1 stroke-width:4px;

class S invisible
class Hypothesis start
class Method normal
</div>

---
# How do we prove our theories? Data

<div class="mermaid">
graph LR
S((.)) --> Hypothesis((Hypothesis))
Hypothesis -- "Study Design" --> Method((Method))
Method -- "Run Study" --> Data((Data))

linkStyle 0 stroke-width:4px;
linkStyle 1 stroke-width:4px;
linkStyle 2 stroke-width:4px;

class S invisible
class Hypothesis start
class Method,Data normal
</div>
---
# How do we prove our theories? Analysis

<div class="mermaid">
graph LR
S((.)) --> Hypothesis((Hypothesis))
Hypothesis -- "Study Design" --> Method((Method))
Method -- "Run Study" --> Data((Data))
Data -- "Clean and Prep" --> Analysis((Analysis))

linkStyle 0 stroke-width:4px;
linkStyle 1 stroke-width:4px;
linkStyle 2 stroke-width:4px;
linkStyle 3 stroke-width:4px;

class S invisible
class Hypothesis start
class Method,Data,Analysis normal
</div>

---
# How do we prove our theories? Conclusions

linkStyle 0 stroke-width:4px;
linkStyle 1 stroke-width:4px;
linkStyle 2 stroke-width:4px;
linkStyle 3 stroke-width:4px;
linkStyle 4 stroke-width:4px;

class S invisible
class Hypothesis,Conclusions start
class Method,Data,Analysis normal
</div>

.left-column50[
#A
![:img Picture of the Graffiti gesture recognition alphabet from the Palm Pilot, 100%](img/Grafitti.png)
]
.right-column50[
#B
![:img Picture of the Edgewrite gesture recognition alphabet, 50%](img/Edgewrite.png)

]

???
Hypothesis: Errors (will they be reduced)
Method:?? 
Data:??
Analysis??
Conclusions??

---
# How do we prove our theories? Conclusions

linkStyle 0 stroke-width:4px;
linkStyle 1 stroke-width:4px;
linkStyle 2 stroke-width:4px;
linkStyle 3 stroke-width:4px;
linkStyle 4 stroke-width:4px;

class S invisible
class Hypothesis,Conclusions start
class Method,Data,Analysis normal
</div>

.left-column50[
#A Pie Menu
![:img Pie Menu, 80%](img/pie.jpg)
]
.right-column50[
#B Pull down Menu
![:img Traditional Menu inside a web browser, 80%](img/menu.png)
]
???

Hypothesis: Errors will be reduced; 
Hypothesis: Motion will be faster due to low level motor things 
Hypothesis: fewer cognitive checks needed
Method:?? 
Data:??
Analysis??
Conclusions??

layout: true