3

Our smart home interface has customizable buttons that activate moods like, morning, night, or away. As of now, if the user presses a mood button it changes color to signal that this mood is now active. However, this mood cannot be turned off, the user will have to switch to another mood and the button does not work as an on/off toggle.

How do I shape the button in order to signal that it is not re-clickableenter image description here

Improve this question
6
  • 1
    Why do you think you need to style it differently? Standard HTML radio buttons cannot be unclicked and users are not confused by those. Has you done some usability testing on this and found users are confused? Because if you've not actually found it to be a problem you might just be assuming a problem where one doesn't exist.
    – JonW ♦
    Jun 22, 2021 at 9:03
  • 1
    I agree with @JonW, I think that users will quickly learn that buttons can't be unchecked as soon as they try to click on one again. Or notice the radiobutton-like behavior when clicking on another button. Also, it already says "1 of 8 moods active" right above it. To visually show activeness, it might be a nice addition to animate the icons in the active buttons. A smoking chimney, a rocking hand, tv screen 'on', cards moving back and forth, palm tree waving, etc.
    – Jos van Weesel
    Jun 22, 2021 at 9:10
  • 2
    If it says "1 of 8 moods active", that implies that you can activate more than one at a time. If this is the case, then why are you trying to prevent users from deselecting? What if they click the wrong one?
    – musefan
    Jun 22, 2021 at 9:49
  • @musefan Yes, this shows that adding words can make what was clear become confusing. No radio I recall ever had to tell anyone that they could only listen to one channel at a time. Maybe the widespread use of radio buttons should cause us to ask ourselves more design questions. Can you have two 'moods' at a time? Maybe mood was the wrong metaphor? Proper design should make wrong actions impossible and wrong understanding unthinkable.
    – BreakingGnus
    Jun 22, 2021 at 10:30
  • You could add an Off option, then it would be a clear and complete set.
    – BreakingGnus
    Jun 22, 2021 at 12:20

1 Answer 1

Reset to default
3

First of all, do you really need to make it that clear? Even when people try to unselect the selected item, they only have to do that once to understand it is not possible. But if it is a real problem then a solution is to remove the selected item from the list and set it separate. Give it a prominent position opposed to the other options like so for example:

enter image description here

The change of selection should be immediate so the list doesn't shift.

enter image description here

Improve this answer

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.