[Patternfly] Animations

[Andres Galante]

Thanks for the feedback.

You are right, the progress bar doesn't indicate what I intended. I'll play
more with this once we have an implementation for the toast notification.


On Mon, Dec 14, 2015 at 12:12 PM, Eric Wittmann <eric.wittmann at redhat.com>
wrote:

> +1 to animations being great when used properly.  They can improve user
> interactions and make an application more interesting and fun.  Of course,
> animations done badly can have the reverse effect. :)
>
> I disagree about the icon animation - I think it looks super cool and I
> love it.
>
> -Eric
>
> On 12/14/2015 10:03 AM, Gabriel Cardoso wrote:
>
>> 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
>>> <mailto: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
>>>
>>>     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
>>>
>>>
>>>
>>>
>>> --
>>> Matt Carrano
>>> Sr. Interaction Designer
>>> Red Hat, Inc.
>>> mcarrano at redhat.com <mailto:mcarrano at redhat.com>
>>> _______________________________________________
>>> Patternfly mailing list
>>> Patternfly at redhat.com <mailto:Patternfly at redhat.com>
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>
>> Gabriel Cardoso
>> UX designer @ Red Hat
>>
>>
>>
>>
>>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20151216/a1b4f909/attachment.htm>