5

I'm looking for a pattern that clearly lays out how to make the pair of buttons look clickable (or tappable) in the following states:

  • Nothing has been selected yet
  • One of the two options has been selected

I want it to be clear to the user that they can change their mind and tap the other button, but I also want to make it clear which option they have selected.

Side note: I've always found toggle buttons with only two options to be problematic. Three is much better since the selected option stands out, but since thumbs up and thumbs down have become more standard, I am using thumbs up/down.

  • 3
    The upvote/downvote arrows on this site sound functionally equivalent to your need. Is there an issue you see with how these paired voting elements work? – maxathousand Jun 8 '18 at 18:17
  • 1
    This comment might clear up your discomfort with two-state toggles: Put the state labels outside the toggle. – Ken Mohnkern Jun 8 '18 at 18:17
  • @maxathousand I do like that pattern. I did some research after posting this and I think I will go with something exactly like that. – pixelfairy Jun 8 '18 at 22:08
  • @KenMohnkern in this case, I'm not using labels ..there is already a ton of extra text around the buttons. – pixelfairy Jun 8 '18 at 22:09
  • @pixelfairy You can think of your thumbs up/down as labels. – Ken Mohnkern Jun 11 '18 at 15:18
1
+50

The answer I found was here on this pattern library https://unitid.nl/androidpatterns/uap_pattern/thumbs-updown

Basically, the buttons are styled the same, then once pressed the pressed button changes state and the other button stays the same.

In my case, I wanted the user to be able to change their mind, so the un-chosen option stays clickable(tappable).

  • Both options should stay clickable: the user can thumbs up or down by accident, and may want to remove their choice without voting in the opposite way. Clicking a 2nd time on the same icon would remove the vote. – celinelenoble Aug 10 '18 at 23:42
  • The link suggests that it is an Android pattern, which is not something that you specified in the question. There were also a couple of different implementation of the design pattern, so it would be good if you can uupdate with screenshot. Does it also work on iOS platforms? – Michael Lai Aug 10 '18 at 23:53
  • Anything else you would like to add? I'd like to award the bounty for a more complete response (e.g. some screenshots, explanation etc.) but since no one else answered it would be good to close this off on a positive note :) – Michael Lai Aug 12 '18 at 0:30
  • @MichaelLai Sure. I'll add a screenshot. To your point about it being an Android pattern. I know, I too was hoping to fine a desktrop browser app pattern. ..but in the end since the web app I'm designing is responsive, it's all the same. – pixelfairy Aug 13 '18 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.