Lab 7 Slides

# CSE 340 Lab 7 (Winter 2021)
## Week 7: UX theory review, Menus

.title-slide-logo[
  ![:img Menu Types, 50%](img/menus.png)
]

---

# Timeline

- Color picker due tonight at 10:00pm! 
  - As usual: Code locks/Reflection due this Saturday @10pm
  - Reflection locks this Sunday

- Menus Part 1-4 due: Next Thursday, February 25th @ 10:00pm
  - Lock: Saturday, May 22 @ 10:00pm (if you are using late days)

- Remember to turn in the assignment once for 1-4 and again for 5-6
---
# Section 7 Objectives
- Review of lecture content: Interaction Theory
  - Design Laws (optional)
- Menus assignment
  - TrialListener
- Thank you for filling out the mid-quarter section feedback form!
  - answers to some anonymous questons
- Q&A

---
# Lecture Content Review: Interaction Theory
**Fitts Law explains how the… (Please choose one)**

- A: Time it takes for user to make a decision based on # of choices.

- B: Time the user spends moving to the target depends on the ratio of distance to and width of target.

- C: Non-dominant hand performs imprecise movements.

- D: Time the user spends moving a mouse cursor through a bounded tunnel (menu/scroll bar/slider) depends on the tunnel's size.

- E: Time spent exercising leads you to becoming Fitts

---
# Lecture Content Review: Interaction Theory 
**Fitts Law explains how the… (Please choose one)**

- **B: Time the user spends moving to the target depends on the ratio of distance to and width of target.**

- Longer duration (time) = Longer distance + Smaller target size 
  - T = a + [b * Log(2*D/W)] (you do NOT need to memorize this...)

---
# The other answers

- A: Time it takes for user to make a decision based on # of choices.
  - Hick's Law

- C: Non-dominant hand performs imprecise movements.
  - Guiard's (GEE - YARD) model of bimanual control

- D: Time the user spends moving a mouse cursor through a bounded tunnel (menu/scroll bar/slider) depends on the tunnel's size.
  - Steering Law

---
# ["Gestalt Principles" in Design Theory](https://blog.prototypr.io/gestalt-principles-applied-to-ux-design-af47bcf4bd28)
German for "form/shape": Gestalt Principles describe **how human cognition influences the way designs are perceived**
  - **Proximity**: objects close in proximity assumed to be part of the same entity

- **Similarity**: elements can be grouped together via color/shape/size/font
  ![:img 3 by 3 grid of circles, the 1st two columns have bright pink circles and the last column has dark purple circles, 100%, width](img/similarity.png)

---
# Gestalt continued
- **Continuation**: eye is naturally guided from 1 object to another

- **Closure**: people see shapes/letters as part of a whole even when they look incomplete
  - ex: a loading bar with a not completely filled status

- **Figure/Ground**: human ability to visually separate elements on different planes of focus
![:img Two user interface windows lying on top of each other, showing the bold black words Ground and Figure, 5%, width](img/figure.png)

---
# Miller's Law
- Humans can only memorize so much in short term memory!

- "Chunking"
  - 5 ~ 9 = average # of perceptual "chunks" humans can hold in working memory
  - Thus: always organize information on an interface in <= 9 categories

- Source: https://lawsofux.com/laws/millers-law/

---

# More UX Laws (optional to look at)
- https://lawsofux.com/

---
# AS5 Menus 
- Please read over the [spec](https://courses.cs.washington.edu/courses/cse340/21wi/assignments/menus.html)
- Make your own consent form (we give you a template at the top of the page)

---
# TrialListener in Menus
- (Do NOT edit this file, just look) **AbstractMenuExperimentView.java**
  - listener methods
  - keeps track of a listener (mTrialListener)

- **ExperimentActivity**
  - Register a TrialListener with the menu for the current trial (mMenuView) in showMenuForTrial()

- **MenuExperimentView**
  - call [trial listener].onTrialCompleted([get your trial]) in endSelection

---
# Feedback Survey: Answering some anon questions (1/3)
- How to update **paint opacity/etc** in color Picker in CircleColorPickerView (CCPV)? 
  - Hint: CCPV already keeps track of current state (see variable from ColorPickerView.java)
  - refer to that variable in onDraw

- **Reflection date on Gradescope**?
  - Yes. The due date is now Saturdays (no penalty). You will see this on Gradescope.
  - Sundays are the 10% penalty day for late reflections.

---
# Feedback Survey (2/3)
Event handling crash course review? 🤔
- Input process: Android framework takes in events First In First Out (queue)

- Dispatch process: **HOW** event is distributed to views
  - Focus (based on interest), ex: you press keyboard button while focused on an EditText
  - Positional (z-order under XY coordinate under cursor)

- Event propagation: what **ORDER** event is distributed
  - "Picking": views **put into a queue by REVERSE pre-order traversal**, then 
  filter out views that aren't relevant/listeners
  - "Bubbling": process of **removing** said views from queue (START to BACK)

---
# Feedback Survey (3/3)
Custom Listener in Color Picker?
1. Define **interface in View** class -> ColorChangeListener in AbstractCPV
  - Make setters/removers (of the listener) -> removeColorChangeListener in AbstractCPV

3. Set listeners to views in **Activity** 
-> MainActivity (circleColorPicker.addColorChangeListener(...))
  - Where callback method is defined (onColorSelected)

4. Define **method that notifies listeners in View class** -> invokeColorChangeListeners()
  - method is defined inside AbstractCPV
  - possibly **called in onTouchEvent inside CPV**

---
# Any last minute questions from Color Picker?
- For your convenience: quick link to lecture [slides](https://tinyurl.com/rsjc97a0) on 
implementing state machines in AS4 or AS5

---
# Work time on Menus

<div class="mermaid">
  classDiagram
  
  class MenuExperimentView {
    onTouchEvent()
    startSelection()
    endSelection()
    updateModel()
    onDraw()
  }
  
  AbstractMenuExperimentView <|-- MenuExperimentView
  
  AbstractMainActivity <|-- ExperimentActivity
  AbstractMainActivity <|-- TestActivity
  MenuExperimentView <|-- PieMenuView
  MenuExperimentView <|-- NormalMenuView
  MenuExperimentView <|-- CustomMenuView
  
  </div>