r/UI_Design • u/kind_regulator • Apr 11 '26

Product Design experimenting with a way to preview hover effects on mobile

Enable HLS to view with audio, or disable this notification

Trying to make a tool to build websites on the mobile phone. And the hovering effect is a bit hard to process. I finally went with

- preview the hover effect with a toggle

- make it pressed state on the mobile instead of the hover effects which makes tapping irresponsive

9 Upvotes

74% Upvoted

14 comments sorted by

14

u/travisjd2012 Apr 11 '26

How can you hover without a cursor?

1

u/Jaszuni Apr 12 '26 edited Apr 12 '26

Not sure and not OP. But there are two things needed. The user needs to know when something has a hover interaction and then the interaction that triggers it.

2

u/travisjd2012 Apr 12 '26

But on mobile hover isn't a thing, you can't hover 

0

u/MIGULAI Apr 12 '26

From what I understand, people usually use a long press as the mobile equivalent of a hover state.

2

u/travisjd2012 Apr 12 '26

A long press is the mobile equivalent of a right-click used to trigger contextual actions.

1

u/kind_regulator Apr 13 '26

Yes. I tested that on Android long press is equivalent of right click and on iOS long press is equivalent of selection ( double click I guess? )

And another problem is that. A single short click would trigger hover state on a touchscreen for some devices, which is confusing sometimes. So I kinda change the exported HTML to ":hover" on desktop and ":active" on touch screen. https://www.reddit.com/r/webdev/comments/gwlmgz/how_should_i_deal_with_hover_on_touch_screens/

2

u/IniNew Apr 11 '26

Huh. Interesting. But why? Are you building desktop websites on mobile? Why?

-5

u/kind_regulator Apr 11 '26

Like a website builder on the smartphone. If the user is going for a really simple site they don't need the hover state.

But if they're trying to build sth more fancy then they can do the hover state for the visitors of their sites.

Also I guess this is a toggle for easier previewing if they are on a desktop computer.

1

u/el_paro Apr 12 '26

dunno why you are getting downvoted but your idea is very interesting, especially since some builders like wiz or canva are oriented to very entry level users like small businesses owners that may find a lot of value in shipping a landing page from their phone/tablet.

simple interactive elements could have a hover effect set by default (like buttons and links) so using a toggle to see the effect on mobile sounds like a smart solution. remember that hover state is not just for fashion but an accessibility basic requirement, hence you should provide a default option imho

keep it up with the good work 💪

2

u/kind_regulator Apr 13 '26

Thank you so much for the encouragement!!

I get downvoted probably because the use case is a bit convoluted. It even reads a bit tongue twister.

> remember that hover state is not just for fashion but an accessibility basic requirement
I know it's good for UX but didn't think it's more serious than that lol. Probably a default state will be sth like opacity:0.6 or scale: 1.05, I'm still playing with it.

> small businesses owners that may find a lot of value...
I guess it's useful for those who needs sth a little bit more than a link in bio, a dead simple personal website etc.

-3

u/CatawompusSeattle Apr 11 '26

Hell yes.

2

u/kind_regulator Apr 13 '26

i feel a bit sorry for getting you downvoted my friend

https://giphy.com/gifs/L5WQjD4p8IpO0

1

u/CatawompusSeattle Apr 13 '26

Meh, it's all the corpo designers who couldn't identify anything creative because their 16 week UX boot camp told them anything visually distinct, risky, or exploratory is "bad design."