Download as PDF, PPTX
Uploaded byRobby Grant
Animate a Smarter UI: Tips for Motion on the Web
The document discusses the use of web animation to enhance user experience, emphasizing that animation should only be implemented when it adds value. It outlines golden rules and provides reasons for using animation, such as focusing user attention, guiding actions, and providing contextual information. The overall message encourages adaptation and learning more about the services offered on their website.
Animate a Smarter UI: Tips for Motion on the Web
- 1. ANIMATE ASMARTERUI Tips formotion on the web @fourgrant and @gabemartin #smarterUI
- 2.
- 3. Learnmoreaboutthestuff we offer onour website. Evolution&Adaptation Callto Action!
- 4. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 5. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 6. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 7. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 8. Learn more about thestuff we offer on our website. Callto Action! Evolution&Adaptation
- 9. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 10. Learn more aboutthe stuff we offer on our website. Callto Action! Evolution&Adaptation
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. Focus clarify an action isolatespecific content direct user attention
- 18. Focus Clarify anaction
- 19. Focus Isolate specificcontent
- 20. Focus Direct userattention
- 21.
- 22.
- 23. Hint guide the user suggestan action highlight an option
- 24. Hint Guide theuser Gmail tab example (removed)
- 25. Hint Suggest anaction
- 26. Hint Highlight anoption
- 27.
- 28.
- 29. Notify show that contentrequires attention alert the user to updates inform the user of new content
- 30. Notify Show thatcontent requires attention Facebook Message example
- 31. Notify Alert theuser to updates
- 32. Notify Alert theuser to updates
- 33. Notify Inform theuser of new content
- 34.
- 35.
- 36. React give confidence touser confirm an action prove the interface is working
- 37. React Give confidenceto the user
- 38. React Confirm anaction
- 39. React Prove theinterface is working
- 40.
- 41.
- 42. Orient show user’s relationshipto content give context expand virtual space
- 43. Orient Show user’srelationship to content
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.