Embed Size (px)
Citation preview
Smart Transitions in UI DesignAdrian Zumbrunnen / @azumbrunnen_
Flow
– Mihaly Csikszentmihalyi
The holistic experience that people feel when they act with total involvement.
“
Aiming for delight is not enough.It’s about creating smart interactions
Thinking in spatial terms
our perception of the world
districts
layers
nodes
spatial representation
spatial orientation
spatial orientation
Write App
The Elements of Smart Transitions
Orientation
1
Moving from one information space to another takes a certain amount of time.
orientation through details
Responsiveness
2
https://dribbble.com/shots/1717944-Material-Design-Keynote-Animation
performing actions optimistically
optimistic action: twitter
seamless top of mind actions
pull to refresh
responsive fade / reveal
smart progressive disclosure
animations tell stories.
https://dribbble.com/antalik
Time
3
time is relative.
– Albert Einstein
An hour sitting with a pretty girl on a park bench passes like a minute, but a minute sitting on a hot stove seems like an hour.
“
perception changes our reality.
linear ease
Cushioning
4
– Laurian Gridinoc, Creative Technologist
Out of all hand-throwable things, socks have the most unpredictable trajectory.
“
Source: Transitional Interfaces
Source: Transitional Interfaces
easing makes our user interfaces behave in a more natural way
State Abstraction
5
http://fian.my.id/marka/
state abstraction is about steadily communicating the state of a UI to the user
Personality
6
facebook paper
facebook paper
nike make app
nike make app
yahoo news digest
https://dribbble.com/shots/1901531-Loading?list=users&offset=1
personality is key in creating memorable experiences
Communicating animation
1. Refer to examples
- capptivate.com
- dribbble
- userinterfaces.io
- useyourinterface.com
- hoverstat.es
2. Apple Keynote
3. After Effects
A user interface from hell
4. Framer
5. Invision
6. Use understandable vocabulary Or how to talk about easing
Thanks!Let’s keep in touch! We can exchange on talk on the following platforms:
web: azumbrunnen.me twitter: @azumbrunnen_ mail: [email protected]
