The whole toolkit

name: inverse
layout: true
class: center, middle, inverse
---
# Review slides to help studying

Jennifer Mankoff

CSE 340 Winter 2020
---
layout:false

.left-column[
## And Introduced Model View Controller
]
.right-column[
Model
- Model of a single interactor: Typically a field
- Application model
 - Separate from view model
 - Typically more persistent (*e.g.,* a database)
 
View
- `onDraw()` in a single interactor
- Interactor hierarchy in an application

Controller
- state machine in a single interactor
- callbacks (*e.g.,* custom listeners) in an application
]
???
Different for Interactor and Application

---
.left-column-half[
## Event Dispatch

![:img Picture of interactor hierarchy connected to an interface and a
dotted line indicating application interface, 100%](img/whole/callbacks.png)]
.right-column-half[
Dispatch Strategies
- Positional (Bottom-first and top-down)
- Focus-based

State Machine describes *within-view* response to events
]
---
.left-column-half[
## Event Dispatch

![:img Picture of interactor hierarchy connected to an interface and a
dotted line indicating application interface and a do_action() call
happening below the line in response to a button_pressed(), 100%](img/whole/callbacks2.png)]
.right-column-half[
Callbacks handle *application* response to events
- Update Application Model

]

---
.left-column-half[
## Event Dispatch

![:img Picture of interactor hierarchy connected to an interface and a
dotted line indicating application interface with do_action() replaced
with an actionListener, 100%](img/whole/callbacks3.png)]
.right-column-half[
Callbacks handle *application* response to events
- Update Application Model
- Best implemented using custom listeners

]
---
# Value of component abstraction

Each component knows how to draw itself

Based on what it is and its internal state

Includes some common properties (inherited from a base class for all components), E.g.

- position (x,y relative to parent)
- size (w,h)
- visible
- Enabled

Typically includes some specialized properties (declared in
subclass)

---
# More Output/Drawing Concepts

Drawing primitives – populate a pixel array (*Frame Buffer*)

Coordinate transformations (translate/scale/rotate/shear) & Clipping

Fonts: Archaic origins, Non standardized
- UI toolkit implications?

---
.left-column[
## Input/Event Concepts
]
.right-column[
Devices

- Logical: Valuator, Locator, Button, etc
- Event vs. sampled devices
- Absolute vs. Relative (and clutched)

Event model to unify event and sampled devices
- What
- When
- Where
- Value
- Context
]
---
# Review: None-core concepts
---
layout:false

# How an animation is set up

Need the start and end value of the properties to be
modified. Typically use a
[Path](https://developer.android.com/reference/android/graphics/Path)
for this.

Need a *duration* (total time in ms for the animation)

Need the *pacing function* for animation. Can explore subclasses of
[Interpolator](https://developer.android.com/reference/android/view/animation/Interpolator)
(or make your own!) for this

---
.left-column[
## Example pacing functions
![:img Picture of for types of interpolation functions provided with
android, 100%](img/whole/interpolators.gif)
]
.right-column[
<br><br><br><br>
Slow in slow out (Accelerate/decelerate)

Slow in (Accelerate)

Anticipate (back up slightly, then accelerate)

Anticipate Overshoot (same, then go too far and slow down)
]
---
name: inverse
layout: true
class: center, middle, inverse

# Understanding People
---
layout:false

# HSV

RGB matches the eye (rods & cones, red green and blue)

HSV is much better for *people*
- Hue: Dominant wavelength of light
- Saturation: Purity (how much white/black mixed in)
- Value: Luminance or amount of light in color = max(R,G,B)

---
.left-column[
## Example Short Answer Exam Question
![:img Darker and lighter red boxes, 80%](img/whole/redcomp.png)
![:img Red with varying saturation (to white) and value (to black), 80%](img/whole/value-sat.png)

]
.right-column[
# Compare the following colors using HSV
Which is correct?

- A: Top color has different *hue* than bottom color
- B: Top color has higher *saturation* than bottom color
- C: Top color has higher *value* than bottom color
]
???
B: Saturation

---
# Know your speeds (order of magnitude is key thing here)

< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception

smooth animation: 24-40  frames per second

< ~100-200ms seems like “instant response”
- on web a difference of 250 ms can switch people to a competitor

< 1-2 seconds typically “good response time”

More than 10-15 sec is typically “bad response time”

---
# Recap of design tips

- Don't rely on blue for small objects
- Don't rely on blue for older users
- Make sure that contrast is high enough
- Minimize saturated colors
- Use redundant cues
- Make things distinct
- Use small multiples
- Manage expectations if you can't change response time
- Replace subtle changes with obvious ones
- Use well-tested visual grouping strategies
- Minimize the number of options 
- Rely on recognition rather than recall