Animate a Smarter UI: Tips for Motion on the Web

67 %
33 %
Information about Animate a Smarter UI: Tips for Motion on the Web
Design

Published on March 11, 2014

Author: robbygrant

Source: slideshare.net

Description

Join the conversation: #smarterUI

Animate a Smarter UI: Tips for Motion on the Web
Gabe Martin (@gabemartin) & Robby Grant (@fourgrant)

Some of the mp4 examples are here: http://d.pr/f/xUx6/4DjJHI5t (not all but some)

Description:
You’ve seen them. The blinking, pulsing eyesores. Animations used by developers and designers who think “Because I can” is a good excuse.
It’s not.
On the web, there should be a reason for everything. Every transition, triggered event, and state change needs a purpose.
In this session, we’ll cover the only 5 reasons to ever use web animations:
1. Focus
2. Notify
3. Hint
4. React
5. Orient
(Plus one bonus — but it’s a secret.)
We’ll break down each category, looking at what works and what doesn’t — and why. You’ll see some brilliant uses of UI animation. And some terrible displays of superfluous bouncies.
Then, we’ll dig into some real code and give a live demo of creating some simple, purposeful animations with a little personality.
You’ll leave with a few new tricks up your sleeve and a fresh outlook on animations on the web.

http://schedule.sxsw.com/2014/events/event_IAP23559

ANIMATE ASMARTERUI Tips for motion on the web @fourgrant and @gabemartin #smarterUI

It’syourjob
 toadapt

Learnmoreaboutthestuff we offer on our website. Evolution&Adaptation Callto Action!

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation

Animationcanaddlife

Animationcanaddspace

Animationcanadddelight

Onlyuseanimation when itimprovesuser experience The Golden Rule:

5reasonsto use 
 webanimation

Focus

Focus clarify an action isolate specific content direct user attention

Focus Clarify an action

Focus Isolate specific content

Focus Direct user attention

Focus Hint

Hint

Hint guide the user suggest an action highlight an option

Hint Guide the user Gmail tab example (removed)

Hint Suggest an action

Hint Highlight an option

Focus NotifyHint

Notify

Notify show that content requires attention alert the user to updates inform the user of new content

Notify Show that content requires attention Facebook Message example

Notify Alert the user to updates

Notify Alert the user to updates

Notify Inform the user of new content

Focus React NotifyHint

React

React give confidence to user confirm an action prove the interface is working

React Give confidence to the user

React Confirm an action

React Prove the interface is working

Focus React NotifyHint Orient

Orient

Orient show user’s relationship to content give context expand virtual space

Orient Show user’s relationship to content

Orient Give context

Orient Expand virtual space

Focus React NotifyHint Orient Personify

Personify

Personify

Personify

Personify

Focus React NotifyHint Orient Personify

Focus React NotifyHint Orient Personify

Onlyuseanimation when itimprovesuser experience The Golden Rule:

CodeDemo

Thankyou

Add a comment

Related presentations

Related pages

Animate a Smarter UI: Tips for Motion on the Web (with ...

Animate a Smarter UI: Tips for Motion on the Web SXSW Day #5 You’ve seen them. The blinking, pulsing eyesores. Animations used by developers and ...
Read more

Animate a Smarter UI: Tips for Motion on the Web - Design

1. ANIMATE ASMARTERUI Tips for motion on the web @fourgrant and @gabemartin #smarterUI ; 2 ...
Read more

Animate a Smarter UI #smarterUI #sxsw - storify.com

Animate a Smarter UI: Tips for Motion on the Web. #sxsw #smarterUI. You’ve seen them. ... Animate a Smarter UI: Tips for Motion on the Web. Jamie_Russell ...
Read more

Tips When Researching For A Chіrorrastor On The Internet ...

Share Tips When Researching For A Chіrorrastor On ... Creek Web Site? Internet safety tips Internet ... Animate a Smarter UI: Tips for Motion on ...
Read more

Slide Elements in Different Directions | Learning jQuery

Slide Elements in Different Directions ... Tips, Techniques, Tutorials | My Web ... Merging jQuery Deferreds and .animate() A jQuery UI Combobox ...
Read more

Displaying UI elements - Lynda.com

A collection of over 40 tips and tricks will help you work smarter, ... Displaying UI elements. ... Web Use Policy ...
Read more

Create a Windows-like Interface with jQuery UI

... we'll create a Windows-like interface ... utf-8"> Creating a windows-like interface with jQuery UI ... smarter, faster, and cheaper ...<br> <a rel="nofollow" href="http://code.tutsplus.com/tutorials/create-a-windows-like-interface-with-jquery-ui--net-23078" class="readMore">Read more</a> </p> <h3>Using Motion For User Experience On Apps And Websites ...</h3> <p> Search on Smashing Magazine Search. X. ... just the right way to approach motion on the web. 8. 2. ... on here that think UI/UX didn’t exist before the web.<br> <a rel="nofollow" href="https://www.smashingmagazine.com/2015/01/using-motion-for-ux-on-apps-and-websites/" class="readMore">Read more</a> </p> <h3>5 Great Examples of Simple Web Animations - HOW Design</h3> <p> Now it's time to see about how agile methodologies can help you work smarter, ... Web Design Tips ... 5 Great Examples of Simple Web ...<br> <a rel="nofollow" href="http://www.howdesign.com/design-creativity/5-great-examples-of-simple-web-animations/" class="readMore">Read more</a> </p> </div> </div> </div> <div class="clear"></div> </div> <div class="footer"> <div class="content"> <div class="conIn"> <p style="border-bottom: 1px solid #E5E5E5; padding-bottom: 1em;"> <strong>SlideSearchEngine.com</strong> is a specialised online agregator and search engine! We collect presentations from publicly available sources.<br> These presentations are classified and categorized, so you will always find everything clearly laid out and in context. We are staying up to date! We are looking for more relevant data on social networks. </p> 2014 SlideSearchEngine.com <a class="right" href="/request">Contact</a> <div class="clear"></div> </div> </div> </div> </body> </html>