Html "click" effect on mobile browsers

Question

This question touches on "clickability", but rather is about what should happen after the user touch-clicks a surface on a mobile device. Here's a jsfiddle with a clickable surface:

https://jsfiddle.net/cfL7jkxo/2/

On an iPad, when you tap on "I am Clickabul", the surface will flash momentarily. When I do this on my Nexus 6 Android phone, the surface doesn't react (you can see the click function happen though - writing "click").

I just got a report from a tester about how such a surface doesn't react on a non-iOS device, on the Web site that we work with. Does the tester have a point? If a surface looks clickable enough, does it matter what happens after the user taps it? Can after-effects like on iOS help indicating clickability?

Note: I'm asking about which is the better user experience, and possibly if there are other effects one can use when reacting to a click to not give the user the impression that the site is broken - not about how this should be implemented.

Answer 1

Before answering the usability question, I want to make this note: The non-IOS functionality here would be correct, according to your code. There's no css:hover or css:active loadout. I don't know if it's a loading issue related to white flashes, or if it's an intentional change by iOS. But your site/element as is shouldn't be flashing.

Can after-effects like on iOS help indicating clickability?

No. Not for the initial user experience.

However, it DOES give the user feedback that something has happened. So it's still giving valuable information. It reinforces the idea of clickable elements. So also, yes. It does help indicating clickability for future re-use of the site and similar elements.

---

Does it matter what happens after the user taps it?

Yes. Like I already mentioned, it can reinforce the idea the user has about clickability. Generally, when something is interactable, if you do something, it should react both visually and by doing what it intends to do. In videogames when you jump on the ground, you don't just stop, you get some screen shake. When you get hit, your health goes down, and the screen flashes red.

However it could also be too big an effect, for example when you flash a large (say 50% of the screen) element between two very high contrasting colors. So keep that in mind. Or if you have a lot of interactive elements on a page that don't really do much in the end; it could end up looking messy like a minefield of slight changes.

---

Does the tester have a point?

Yes. Several, even.

One: he's pointing it out because he thinks it's a bug (it's not) causing the flash to just work on one of the platforms. Any bugs should be pointed out.

Two: you want to be as consistent as possible. So even though the element works correct on both platforms, they're different. You'll want to make it more consistent, either by making all flash, or by stopping iOS from flashing.

Three: He's not sure which is supposed to be the good one, and neither are you. Neither am I, 100%. But it's almost certainly to have a bit of a flash on all platforms.

---

My suggestion:

Create a subtle flash animation. This will enhance usability on non-flashing platforms, while simultaneously making the experience-gap between platforms smaller.

If you're lucky, iOS might even recognize that there is an CSS:active behaviour, and replace the standard flash with yours, making it exactly the same across all platforms.

Answer 2

Yes, the tester has a point. He is thinking from end-user's perspective. So when user usually clicks some animation/click effect should be shown so as to show user that the click was successful.

Imagine if the click effect is not there, user will click multiple times by mistake resulting in some weird operation maybe.

Remember one of the golden rules of Shneiderman: Offer informative feedback :)

So user is confident while using the system. Hope that helps.

Answer 3

Based on the little knowledge I have, you should not base your app behavior only on the OS (or device browser) default behavior, because it can (and will) be different. But rather provide your own behavior, this way users can recognize and expect your app to have the same workflow across devices, plataforms, browsers and so on. Doesn't matter where he access it from, he will be familiar with it.

On my projects, for example, I tend to use a ripple effect on all clickable elements, this way doesn't matter if it's an IOS, Android or computer, when the user clicks something, it will have this animation effect indicating at least the click was registered.