feature[animation]: illustrate error text replacing help text

[jeanservaas]

feature[animation]:illustrate error text replacing help text

This is a situation where showing the micro-animation will really help people understand. This is also an animation that can appear in several places on the site.

Behavior: Text input

Help text:

Error text should animate over help text:

Behavior: Dropdown

Help text:

Error text animates over the help text:

Potential places to put this animation:

• Guidelines > Content > Error messaging
• Patterns > Forms > Errors and validation
• Components > Text input > Help text
• Components > Dropdown > Help text (this will require a separate video, same animation but using dropdown component instead of text input component)

Example animation on Material.io (something like this with our timing/easing is what we would like)

https://material.io/components/text-fields#anatomy

To-do

• Animation size: 8-column animation (608 x 304px exported at 2x); vertically centered, 64px side margins
• Follow Carbon motion guidelines (timing, easing/motion curves)
• Make an animation for text input and one for the dropdown component (dropdown assets to come)
• Animation can't loop due to accessibility constraints, it will have to have a player so the user can play and pause

Here's a mini storyboard for Text input

Enabled text input:

User types address:

Error replaces help text:

Error_message_svg_assets.zip

[johnbister]

@jeanservaas @janchild

Hello! Here's v1 of the Text Input Error animation. I apologize that it loops (I can only upload gifs to GitHub issue comments). I'll make sure the motion is polished and doesn't loop for the final output. Let me know what you think.

A couple of questions:

1. What is the final file output? mp4?

2. Do you know how many frames per second were used on previous animations? 30?

Thanks!

[jeanservaas]

@mjabbink

Wondering if we could get some motion experts like @shixiedesign @wonilsuhibm and @petervachon / @cameroncalder to take turns reviewing some of john's animations against our motion guidance.

The goal is to add more small animations to our usage guidance showing micro-interactions. We get a lot of questions about the error text animating over the help text so we thought we would show it. @janchild may tweak the content a little.

[mjabbink]

Agree. We just need to ask them and see if one of the 3 can do it whenever we want to do a review.

[jeanservaas]

@johnbister here are the dropdown assets. After you put together a cut of this one, I'll reach out to those guys above and arrange for one of them to review it. Again, @janchild may want to change the example copy

step 1: enabled dropdown with helper text

step 2: user opens dropdown and hovers but does not make a selection

step 3: dropdown closes an error message happens because user did not make a choice

dropdown_assets.zip

[johnbister]

@jeanservaas @janchild Here is the first go at the dropdown animation. I figure it would be good to have a first draft of all issues for this sprint ready before I meet with another motion designer for review. I should be ready for that by Monday (9/14) if you wanted to set something up or let me know if you'd like to reach out to one of them directly. Thanks!

[shixiedesign]

Hey there I think the general motion is good but it's hard to review gifs because it's unstable frame rate. Can you post the videos?

• The motion videos on the site are Apple ProRes renders uploaded to Vimeo so essentially MP4s. But we relied on Vimeo to do the conversion.
• Frame rate is 30

[johnbister]

Thanks @shixiedesign Here are the MP4s. Does github let you upload MP4 directly for an easier preview? I've been uploading gifs just because it's a supported file type.

1653_dropdown_v1.mp4.zip
1653_v1.mp4.zip

[shixiedesign]

Hi @johnbister , just got to take a look at the videos and sorry for the delay - thanks for the reminder. The motion doesn't really matter in dropdown since the open drawer blocks it. So speaking specifically about the text input prototype, the main issue I see is the old helper text disappeared completely for a moment before the error text came in, making it seems discontinuous. To avoid it, you can mask out the helper text from top to bottom as the error text drops in. If it is difficult to implement, at least fade it out is my suggestion.

Was going to post a quick prototype but my principle app is not recording somehow. Will post it it here later when i figure it out.

[johnbister]

Thanks! @shixiedesign I did a top-to-bottom mask and slight fade on the helper text so it feels more continuous. Do you mind doing one last check for us?

1653_v2.mp4.zip

[shixiedesign]

LOOKS GOOD!! 👍

[johnbister]

@jeanservaas Here are the approved animations. Please let me know if you need anything else for this. Thanks!

1653_vFinal.mp4.zip
1653_dropdown_vFinal.mp4.zip