Human-Computer Interaction: Motion

1. Human—Computer
Interaction
07: Motion

2. Motion
change in time
additional dimension = more information

3. 1. Microinteraction
— state: hover / active / clickable / loading
— labels
— validation: completed action
— alert

8. 2. User
fl
ow
— direction
— continuity

11. 3. Structure
— importance / hierarchy
— grouping data
— relationships

13. 4. Immersion
— interaction
— change

15. 5. Delight
— eye catching
— expressive
— fun

17. Downsides
1. performance
2. distraction
3. sensory overload

18. WCAG
The intent of this Success Criterion
is to allow users to prevent
animation from being displayed on
Web pages. Some users experience
distraction or nausea from
animated content.

19. Designing motion

20. 1. Transitions
— color (transparency)
— position
— scale
— rotation

21. 2. Speed
— duration
— easing (acceleration over time)
— oscillation (bounce)

22. 3. Timeline
— order
— stagger
— speed
— transition