New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tappable/Clickable things should look tappable/clickable #2379

Open
justinscherer opened this Issue Jan 2, 2018 · 0 comments

Comments

Projects
None yet
2 participants
@justinscherer

justinscherer commented Jan 2, 2018

Expected behaviour

All interactive elements need minimum 2 unique visual/semantic clues that differentiate them from normal text on mobile (i.e. hover states don't count because they only work on desktop). This can take many forms, including colour change (e.g. "link blue", font weight, font styling, appending graphical elements like chevrons and/or icons).

This is an endemic usability/accessibility problem in platform.

Actual behaviour

screen shot 2018-01-02 at 4 11 06 pm

^^ How can you tell which things are clickable and which aren't?

screen shot 2018-01-02 at 4 11 28 pm

^^How do I select the category? The yellow button? The checkbox? the card background? the text? In this case, many test participants actually delete the category by accident because it's the only thing that looks tappable on the page that isn't the yellow FAB.

Solution

We need to:

  • decide what visual cues we want to use to signal "clickable" in platform generally
  • refactor link styles
  • refactor clickable header styles
  • find and replace every other offending interactive element.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment