[Patternfly] Animations

[Gabriel Cardoso]

Hi Andres,

I agree with you, we can make a good usage of animation to improve user experience.

Great job on the toastr :) I agree with Matt, I’d remove the progress bar. 

I’d also remove the animation in the icon. When it comes down I can recognize that it is success because of the green, and I’m interested in the text, so I felt that the icon animation calls attention to the icon itself, distracting me a bit from the content that I’m interested in.

Thanks,
Gabriel

> On Dec 14, 2015, at 11:35 AM, Matt Carrano <mcarrano at redhat.com> wrote:
> 
> Hi Andres,
> 
> In general I like the idea of adding animation in selective places, and agree that if done well, it can enhance the experience, draw the user's attention, and help convey behavior.
> 
> As for the toaster alert, I like the way it fades in/out.  But the progress bar is unnecessary and potentially confusing IMO.  It implies that there is an associated process happening in the background.
> 
> Matt 
> 
> On Mon, Dec 14, 2015 at 6:14 AM, Andres Galante <agalante at redhat.com <mailto:agalante at redhat.com>> wrote:
> Hello Patternflyers!
> 
> I've been thinking about adding animations on some of our components. I know that there is a thin line between a good animation and a bad one, and we've learn our lesson after the flash era, but If we use them wisely, animations will enhance our interactions.
> 
> I've animated the new toast notification pattern <https://www.patternfly.org/patterns/toast-notifications/>, and although it is a simple example there are some thing going on:
> 
> First the toast appears, directing the attention of the user to the notification.
> 
> Then the icon appears telling the user what kind of notification he is looking at.
> 
> Immediately after the text fades in, directing the attention of the user to the text, and half a second later the action kicks in.
> 
> There is also a progress bar that indicates the 8 seconds that it takes to disappear.
> 
> In total it takes 9 seconds: 0.5 to appear, 8 seconds on screen and 0.5 to disappear.
> 
> Here is the result (click on "show toast notification"):
> 
> http://codepen.io/andresgalante/pen/MKaoGR <http://codepen.io/andresgalante/pen/MKaoGR>
> 
> Maybe this is over the top and there is too much going on. I just want to introduce this topic as a tool we can (and IMO should) use to improve our interactions. 
> 
> If we want to go on with it, we can even create a guide to standardize when to use them and how to style them.
> 
> What do you think?
> 
> Andrés
> 
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com <mailto:Patternfly at redhat.com>
> https://www.redhat.com/mailman/listinfo/patternfly <https://www.redhat.com/mailman/listinfo/patternfly>
> 
> 
> 
> 
> -- 
> Matt Carrano
> Sr. Interaction Designer
> Red Hat, Inc.
> mcarrano at redhat.com <mailto:mcarrano at redhat.com>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly

Gabriel Cardoso
UX designer @ Red Hat



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20151214/fe6beee2/attachment.htm>