Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Smart Transitions in User Interface Design

How we can improve both, the process and the way we think about animations to generate captivating user interfaces that are effectively easier to use.

Smart Transitions in User Interface Design

  1. 1. Smart Transitions in UI Design Adrian Zumbrunnen / @azumbrunnen_
  2. 2. Flow
  3. 3. – Mihaly Csikszentmihalyi The holistic experience that people feel when they act with total involvement. “
  4. 4. Aiming for delight is not enough.It’s about creating smart interactions
  5. 5. Thinking in spatial terms
  6. 6. our perception of the world
  7. 7. districts
  8. 8. layers
  9. 9. nodes
  10. 10. spatial representation
  11. 11. spatial orientation
  12. 12. spatial orientation
  13. 13. Write App
  14. 14. The Elements of Smart Transitions
  15. 15. Orientation 1
  16. 16. Moving from one information space to another takes a certain amount of time.
  17. 17. orientation through details
  18. 18. google.com/design
  19. 19. Responsiveness 2 https://dribbble.com/shots/1717944-Material-Design-Keynote-Animation
  20. 20. performing actions optimistically
  21. 21. optimistic action: twitter
  22. 22. seamless top of mind actions
  23. 23. pull to refresh
  24. 24. responsive fade / reveal
  25. 25. smart progressive disclosure
  26. 26. animations tell stories.
  27. 27. https://dribbble.com/antalik Time 3
  28. 28. time is relative.
  29. 29. – 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. “
  30. 30. perception changes our reality.
  31. 31. linear ease
  32. 32. Cushioning 4
  33. 33. – Laurian Gridinoc, Creative Technologist Out of all hand-throwable things, socks have the most unpredictable trajectory. “
  34. 34. Source: Transitional Interfaces
  35. 35. Source: Transitional Interfaces
  36. 36. easing makes our user interfaces behave in a more natural way
  37. 37. State Abstraction 5
  38. 38. http://fian.my.id/marka/
  39. 39. state abstraction is about steadily communicating the state of a UI to the user
  40. 40. Personality 6
  41. 41. facebook paper
  42. 42. facebook paper
  43. 43. nike make app
  44. 44. nike make app
  45. 45. yahoo news digest
  46. 46. https://dribbble.com/shots/1901531-Loading?list=users&offset=1
  47. 47. personality is key in creating memorable experiences
  48. 48. Communicating animation
  49. 49. 1. Refer to examples - capptivate.com - dribbble - userinterfaces.io - useyourinterface.com - hoverstat.es
  50. 50. 2. Apple Keynote
  51. 51. 3. After Effects
  52. 52. A user interface from hell
  53. 53. 4. Framer
  54. 54. 5. Invision
  55. 55. 6. Use understandable vocabulary Or how to talk about easing
  56. 56. Thanks! Let’s keep in touch! We can exchange on talk on the following platforms: web: azumbrunnen.me twitter: @azumbrunnen_ mail: azumbrunnen@gmail.com

    Be the first to comment

    Login to see the comments

  • alonlevi1

    Feb. 18, 2015
  • freakyfays

    Feb. 22, 2015
  • lukasnmueller

    Feb. 22, 2016
  • AlexanderMeinhardt1

    Jun. 26, 2017
  • MinaAtef6

    Mar. 17, 2019

How we can improve both, the process and the way we think about animations to generate captivating user interfaces that are effectively easier to use.

Views

Total views

5,163

On Slideshare

0

From embeds

0

Number of embeds

2,774

Actions

Downloads

64

Shares

0

Comments

0

Likes

5

×