10

I'm trying to think of a nice element where there are 3 states, but a simple checkbox would be a litlte overkill for what I want (I'd need two), as the states are:

  • Enabled
  • Default
  • Disabled

But I want the user to be able to change to this at any one time and I find tri-state checkboxeIs are too difficult to figure out how to use.

What do you think is the best way to implement this? I currently am thinking of just three buttons, but there must be something really obvious that does this which I'm more than capable of programming (I'm a programmer not a UX desginer)

3 Answers 3

9

What's wrong with just using the standard element for choosing one of multiple options - the dropdown list (or combobox or select, depending on your technology)? Or if you want, you can use three radio buttons (but I prefer dropdowns for something like this).

Why create something with non-standard functionality when something already exists that everyone already knows how to use?

5
  • True, thanks for that. Makes a lot of sense now :) Commented Apr 9, 2012 at 19:11
  • Good answer. You could also use a segmented control although that has more limited application. See developer.apple.com/library/mac/#documentation/UserExperience/… Commented Apr 9, 2012 at 19:31
  • @AdamSmith - that's pretty much exactly what Christofian is talking about in his answer; he just isn't calling it that very Apple-centric name. Commented Apr 9, 2012 at 19:51
  • I'm using a Bootstrap+jQuery powered Segmented control at the moment which looks very similar to what Apple are saying Commented Apr 14, 2012 at 15:32
  • The link provided by Adam is not working anymore, due to a major update from Apple. Here is the current link to Apple's Human Interface Guideline, describing the segmented control element: developer.apple.com/library/mac/documentation/UserExperience/…
    – Tafkadasoh
    Commented Sep 8, 2015 at 16:01
9

I think a button with a pop-up menu would be the best answer for this. See the image below.

3 state button prototype

You can easily create a custom control deriving from a toggle button and styling it accordingly. Depending on what technology you develop in this task may be easier or harder.

2
  • Thanks, that looks really darn good! I might create two versions and see what appeals best to people. (P.S what did you make that picture in, if it's some diagramming software I'd love to have a play with it) Commented Apr 14, 2012 at 15:33
  • I'm glad you like it, I used Photoshop to create it. :)
    – asuciu
    Commented Apr 16, 2012 at 14:13
5

Mayby something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

A row of buttons would work great for this purpose, and it shouldn't be that hard to make.

1
  • That's what I've got so far, I was wondering if there was anything else Commented Apr 8, 2012 at 18:30

Your Answer

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

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