Three state button for a medical chart

Question

I am working on UI design for a new web based medical charting system. The users are used to charting on paper where they circle a symptom if it is present, cross it out if it is absent, and don't touch it at all if they don't address it. I need to replicate those three states in the UI. I don't want to use radio buttons since there is no conventional way to "clear" radio buttons, and three radio buttons per item feels cluttered. I put a few ideas below, but I'd appreciate any input.

Update 2

Here is a jquery plugin that implements this design. Go easy on me, I'm new to web coding.

Update

So here is how I decided to solve this problem, based on the answers from smurf and tim.baker below, modified for a mouse vs touch environment.

To keep the target areas from being too small, I made the entire half of the label a target. Here is a fiddle so you can play with it. Let me know what you think, I'm planning on making it into a jquery plugin.

Answer 1

Seamless has a nice implementation of this actually:

Here, the user can slide each option either way, or just leave it and continue scrolling if the condition was not discussed.

Adapted from the elegant and modern design of @tim.baker (I would just add in the "x"s and "check"s, to help with clarity and in case of a person who is colorblind). This also allows for clicking of the buttons, instead of swiping, which may be better for a mouse interface. Whether to center, left justify, or right justify the symbols probably depends on how you want to align the text.

If, however, you do want to encourage swiping I think you would need to change the design a bit, to something like the following (excuse the poor quality):

So that it looks like one long bar to swipe along, rather than individual buttons. And, when the user does swipe, the section they swipe actually moves, instead of just having text appear where they swiped to.

Answer 2

Why not replicate the way the users are used to deal with this on a form? That's what you're basicaly already doing in your second mockup.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The way to change from the one into the other would be clicking on it, and cycling through the three states.

Answer 3

I wanted to speak to the part of your question where you said:

I don't want to use radio buttons since there is no conventional way to "clear" radio buttons, and three radio buttons per item feels cluttered.

First, grouped radio buttons should always have one of the values checked. If by clear, you mean reset, that's simply a routine that sets the form elements back to their default values.

Second, there's a way to not make the radio buttons look cluttered. Let me explain:

Since you are creating a new web-based application, you most likely will be using JavaScript at some point for client side scripting. I use jQuery, a JavaScript library. jQuery has a sister site called jQuery UI for anything that has to do with the user interface. Check out their Demos and their Theme Roller where you can customize your UI controls to match your color scheme.

What I want to focus on is one of the UI controls, the Button. It's your standard run-of-the-mill button, but with some varying functionality. They did something really cool which was to combine radio buttons into what they call a Button Set. This is where you can de-clutter (if that's a word) your multiple radio button choices.

This is a great approach that will solve your issue. It's clean. It's simple. And ... it's supported by the community. I created a live jsFiddle demo where you can interact with the choices or you can just view the screen capture below:

Color to State Breakdown:

• Black ( Default )
• Blue ( Hover )
• Orange ( Checked )

---

UPDATE

As @smurf pointed out in the comments, these button sets by default are rather large and could draw your eye away from the actual question labels. That's a very simple fix with a little css, so I went ahead and created another live jsFiddle demo with larger question labels combined with smaller button sets:

Answer 4

I am making an a couple of assumptions here (based on what your questions says obviously):

• Although experienced your users are mixed capability
• They are pressed for time
• Like most users they don't like change
• The "default" state is "Not Addressed" which essentially means N/A

On those assumptions I would use something highly visual which minimises the users tasks by setting a default and gives reassurance. Note: although I would like to use a cross through line, this just never really works digitally.

Default state:

The user can then swipe right (or click) to confirm the symptom is present:

Symptom Present:

Not Present (left swipe):

What a set of symptoms may look like:

Answer 5

I'd suggest something more "humanistic". Like a question they have to answer.

Chest Pain : Yes | No | I don't know

By default there is nothing selected (the third state). I know sometimes you're not sure if you have a pain somewhere so a "I don't know" or "I'm not sure" could be interesting (or not).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 6

I don't think you can easily replicate the "real-world" habit on a web page unless you want to let your users really draw something (a cross, a circle). Instead you could use a 3-state UI element, e.g. a checkbox to represent that. The user can cycle through the possible values (undetermined, no pain, pain). A state label beside that can show what the current check state means.

A nicer way would be to use a horizontal slider button with 3 positions, left for undetermined, middle for no pain and right position for pain. By aligning those controls you can then show a header line that displays the meaning of the 3 positions, instead to replicate it over and over again for each individual entry.

Yet another possibility is to use the very common star rating approach (maybe even with more than 3 possible values to let the user choose how strong the pain is, where appropriate).