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.

Improve this question
10
  • 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, 2018 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, 2018 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, 2018 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, 2018 at 22:09
  • @pixelfairy You can think of your thumbs up/down as labels.
    – Ken Mohnkern
    Jun 11, 2018 at 15:18

1 Answer 1

Reset to default
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).

Improve this answer
4
  • 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, 2018 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, 2018 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, 2018 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, 2018 at 2:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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