Page MenuHomePhabricator

[Design spike] Define touch states for tapping elements on mobile web
Open, MediumPublic

Description

Background
On mobile web it's important to provide users with feedback when they tap on links/button/active elements. While mobile browsers (Safari & Chrome) add this type of feedback by default, in the past we've intentionally disabled the default feedback so that we could provide and style our own custom feedback. This strategy recently failed on iOS browsers, resulting in no feedback for users (since we were disabling the default, and our behavior was not showing). We've fixed this issue here T188043.

Current State

  • Android: we override default behavior. Custom feedback is shown when clicking on hyperlinks (they turn yellow) and some buttons. Some tappable elements don't provide feedback (e.g. search results, section headers, images)
  • iOS: we allow the default behavior to handle feedback. Any element in an <a> tag provides feedback in the same manner. Feedback is shown more comprehensively than on Android, but is unstyled.

Opportunity
We could come up with a more intentional approach to touch feedback, specifically:

  • Which elements, when tapped, should provide feedback? Do we want to be more comprehensive than we currently are on Android?
  • How should the styling of feedback differ for various elements (e.g. images vs. links)?
  • How important is maintaining consistency between iOS and Android behavior?

Event Timeline

Jdlrobson triaged this task as Medium priority.Nov 29 2018, 11:48 PM
Jdlrobson subscribed.

@alexhollender should this be tagged with Minerva? Is it still relevant?

@alexhollender should this be tagged with Minerva? Is it still relevant?

this is intended for mobilefrontend, but Minerva on desktop would benefit from this as well.

alexhollender_WMF renamed this task from Provide immediate and consistent feedback when tapping elements on MW to [Design spike] Define touch states for tapping elements on mobile web.Jun 14 2021, 1:31 PM

Would it also apply to Vector for users on a mobile phone?

I'd assume that something user-interface/interaction specific should clearly live in the skin, hence tagging with Minerva.

In Design Style Guide/OOUI components we went with touch feedback on every component as it is more important for user satisfaction without the physical button/key feedback.
As links weren't part of OOUI, we didn't go into details here.

Since Minerva and Vector are converging on the WVUI designs with the intention of using them for server side rendering in future I'm tagging WVUI for this one instead of MinervaNeue