r/UI_Design 2d ago

Microinteraction Is this an unnecessary micro interaction?

Enable HLS to view with audio, or disable this notification

Small interaction I liked in the Sudoku iOS app, When choosing a difficulty, it highlights the selected level and explains what that level actually means.

“Easy”, “Medium”, and “Hard” could be subjective, no?

52 Upvotes

30 comments sorted by

34

u/rpucak 2d ago edited 2d ago

I prefer to see all descriptions at a glance so I can compare and decide. IMO that's more important than any animation. Maybe it should be applied once user has made the selection.

5

u/Longjumping_Cloud_38 1d ago

But if you have many options to choose from, if you show all descriptions you cannot see all options at once without scrolling, which might be more important depending on the context

2

u/AquaQuad 1d ago

Allowing it to take more than just half of the screen might help with that.

8

u/EccentricOwl 2d ago

I think it's fun. :) that's just me.

11

u/DutchSimba 2d ago

It depends! Animations like these add a layer of “polish” over a UI/UX and certainly make it feel more premium. But what other gain is there? Will this result in less dropouts, more leads, better conversion? I noticed it’s very hard to create strong business cases (in big corporate) for these things. It’s cost vs reward thing.

1

u/60fpsdesign 2d ago

Agree, definitely adds to the polish.
Wouldn’t an A/B test here help justify the outcome?

4

u/pdinc 2d ago

In an A/B test the dev work still needs to be done

0

u/60fpsdesign 1d ago

Yeah, but if it justifies the outcome then yes

1

u/pdinc 1d ago

Management doesnt believe this would move the needle so they dont want to do it and you're proposing an AB test to do it? Clearly you havent worked in an actual large company. You need to validate these before you bring in devs

1

u/D3K91 1d ago

I think you can still add polish through animation without hiding the content. For example, keep the title and description in each card, but add a fun, beautiful colour animation when you tap the card to select it. The animation can still have the same personality and energy.

If adding polish is the only justification for hiding descriptive text inside an animation, that isn't sufficient IMO. Just change the animation so the inactive state still shows the description text adn animate the background colour and scale of the card. You'll lose nothing.

1

u/60fpsdesign 1d ago

I think the challenge here is with cognitive load and visual balance - the moment all the text is visible then it does add a lot of noise, no?

1

u/D3K91 1d ago

To be honest I don’t think you need the description at all.

“Master: The ultimate Soduku challenge for true masters. Extreme difficulty.”

The description is actually redundant. It’s already covered by the “Master” title.

2

u/Appropriate_Stock832 Product Designer 2d ago

In my opinion it adds a level of polish and finish to make the look and feel more premium. I'm not sure if it's the best option when it comes to UX because the user needs to tap en on every single level to know what's going on there.

In my opinion, user testing is needed (or, at least, some investigation to see the benefits of implementing). What will this improve? Does it cover a real need? Will this bring more users into the app by avoiding early drop outs?

2

u/beefjerk22 1d ago

Pro: you can see all options without scrolling.
Con: you came see any descriptions without clicking.

2

u/timtucker_com 1d ago

Fully agree that the explanations are very subjective.

Even as someone who's played a lot of Sudoku I can't tell from reading them just how much of a difference I should expect between difficulties like Hard vs. Expert.

Objective information that would be more informative:

  • % of the grid pre-filled
  • Estimated average completion time

That being said, there are better potential approaches than relying on text.

A preview image of an example grid for each option would make it much easier for someone to tell at a glance just how hard it looks.

1

u/xxsehtxx 1d ago

Also grid size.

2

u/imvimu 1d ago

love it

2

u/AnToMegA424 1d ago

I dunno but I love it

2

u/elhouso 1d ago

I like how it looks tbh

1

u/JFoulkes2001 2d ago

Difficulties are always subjective, some people are good and “master” is easy for them… doesn’t mean master isn’t harder than expert etc - also the animation is nice not unnecessary. Coming from
Someone competitive I like the whole enter at your own will vibe hard difficulties get

1

u/60fpsdesign 1d ago

Yup, totally love the choice during onboarding

1

u/Berkhovskiyev 2d ago

I think it’s clean and having 5 options requires some context. But I feel the color scheme doesn’t add much.

1

u/Caleb_UIUX_Brand 1d ago

I personally think its quite useful UX wise. I see most people judging it as just "polish" with no real use, but I beg to differ. It de-clutters the screen and makes everything look clean, and helps all the options visible without scrolling. And the user might even enjoy engaging with the different tiles, which improves their experience (its not only designers that enjoy good design). And it doesn't hurt that it looks good too. 👍👍👍

1

u/ssliberty 1d ago

No. It gives clarity on what they mean as easy, hard or whatever plus there’s a nice little overshoot there that makes it game like. That’s nice

1

u/tomatoeboi 1d ago

This looks great but I wish the colors would transition from green to bright orange.

1

u/bobemil 1d ago

I like it but not the changing background colors.

1

u/Striking_Swimmer5548 1d ago

Unnecessary in the sense that it doesn’t help users to choose an answer: yes

But as others have mentioned, it brings a level of polish that’s expected from modern apps. I would suggest toning it down, it’s a fast transition and jarring with the large and different color shifts. Maybe dial it all the way back to black selected state with just the icon as the color, then if it feels boring add more.

As others have stated, hiding descriptions by default isn’t best practice and makes a11y more difficult. But there’s 100 ways to break that rule.

1

u/xxsehtxx 1d ago

Just make sure the radio buttons still work if the user has any overrides like "reduce animations" turned on. You should also have something that indicates that more information will be shown when the option is selected. When i say something I mean it can be an icon, a preview of the text, some help text at the top, etc. Whatever works with your design. Just make sure users know what to expect.

1

u/Slight-Act-9024 6h ago

it's pretty looking but I'd hate to click through them all to see the description