[Radio Button]: Micro-interactions while hovering and selecting

[AlexanderMelox]

Summary

This issue enhances Carbon's native Radio Button component. Currently, the Radio button component does not show any micro-interactions especially when you are hovering over the element and selecting another radio button.

Motion designer:
Tyler Watson
Slack: tyler.watson

Demo:

UX Specs:

Justification

Radio buttons are a great place to add micro-interactions especially when users are repeatedly using radio buttons in forms. The animation adds a breath of fresh air and makes the process a little fun, and exciting.

Desired UX and success metrics

Users would be able to select a radio button and see a micro-interaction when hovering over other options in the radio button group.

Required functionality

No response

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[AlexanderMelox]

Can I be assigned to this issue?

[tay1orjones]

Hey @AlexanderMelox, I'm happy to assign you. I've put this in our proposals queue for the team to review.

[jnm2377]

@johnbister do you have any feedback on this motion design?

[thyhmdo]

We will need to take this up to a larger work stream and do more research on this visual style.

[AlexanderMelox]

@thyhmdo any updates?

[thyhmdo]

hey @AlexanderMelox We haven't had resources to do the research work on this. This will wholistic look at all of our components to make sure they work consistently. Meanwhile, we probably need contributors for this project and we also have a related issue around this #10635

[ljcarot]

@kristastarr @johnbister @silvio-hajdin Is this something you all can pick up as it relates to the navigation animation work you have already started?

[silvio-hajdin]

@ljcarot @thyhmdo will say yes from my end, but totally agree with Thy regarding the research (which should also include an audit/snapshot of any micro-interactions or component-level animations already implemented across various IBM BUs/products).

If you're aware of any internal micro-interactions/motion moodboards, scrapbooks, and artifact repos/guidances beyond what's currently published on the Carbon and IDL websites (as well as the output/resources shared from the Animated Illustrations guild), would love to take a look at those first. Otherwise, happy to start on a smaller scale with this particular issue, and also pitch in as the broader effort ramps up, defining the component/pattern-level MI/motion approach and aesthetics.

[kristastarr]

@AlexanderMelox I know you have been working on the radio button microinteractions - is the animating of the “Rocket” icon related to that? If no, we could open an issue for it in the icons-motion repo and someone from the animated icons workgroup could work on adding it to the animated icons library. (@silvio-hajdin sounds like you are volunteering? 😄 )

@silvio-hajdin @thyhmdo I definitely agree it would be great to have comprehensive research and audit of where animated icons and microinteractions already exist. Seems like that will be a huge effort! @Motion-Mike was working on an audit as part of the microinteractions workgroup effort, which is working on adding microinteractions to existing and new Carbon and Carbon for IBM Products component (@AlexanderMelox's radio button microinteraction here is also part of that group's effort).

For now, when it comes to animating the icons specifically, I think it makes sense to create new animations that adhere with the animation guidelines that the icon animation workgroup created. We will definitely adapt the guidelines based on any research findings that may be identified in the future.

@johnbister what do you think?

[johnbister]

The animation provided looks great @AlexanderMelox Like everyone else has said, it has larger implications across Carbon that have to be considered.

@silvio-hajdin @kristastarr I think we should tackle the ‘toggle’ set of icons next as it includes this interaction and many other state change icons. Does that sound good to you?

@lisakaiser @skcele I know the microinteractions group has done a lot of work in this area. Do you want to compare notes? Let’s chat about crashing each other’s meetings this week to see how we can team up.

@sstrubberg thanks for trying to give me the heads up about this last week and for the reminder @ljcarot

[johnbister]

@AlexanderMelox Does this sound OK to you and Tyler? Are you OK with incorporating this into a larger set and helping spearhead other icons with similar behavior? We don't want to just hijack this great work you did so let us know if you wanted to move forward a specific way or if you have any concerns.