Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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.

enter image description here

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.

share|improve this question
1  
What do you mean by they dont address it? They dont know about it or dont want to tell about it? –  Mervin Johnsingh Jan 22 at 8:03
1  
@Mervin I would think he means if it isn't applicable, so an exagerated version they skip over the "ankle pain" question if they know it is chest related. It's medical so I would think nothing would be leading, just because it seams irrelevant if they don't ask the question they can't click absent. –  tim.baker Jan 23 at 0:12
    
Welcome to the site, @David! If I'm understanding your diagram right, an answer of "no" (which is probably the most common answer) would require 2 clicks in any of the three options you propose. On the other hand, radio buttons (with or without the common affordance of the circle beside the text) would require only one click each. In a form with a lot of questions, that would require a ton of extra clicking. Don't compromise usability for the sake of minimalist aesthetics. –  3nafish Jan 23 at 0:21
    
@Mervin, Tim has it right, there are many things that might be in the template that the physician doesn't feel the need to address in the actual interview. –  David K. Jan 23 at 3:17
    
@3nafish that's a great point, the only reason I was looking for something else was that I wanted to replicate the ability of paper to let the user skip over the answer, but I could do that by defaulting an N/A button –  David K. Jan 23 at 3:17
show 6 more comments

6 Answers

up vote 23 down vote accepted

Seamless has a nice implementation of this actually:

seamless cuisines

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.

tim.baker design

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):

tim.baker swiping

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.

share|improve this answer
2  
This is actually really slick, though I suspect it works better on a mobile device where the sliding gesture is a little more natural. +1 –  rbwhitaker Jan 23 at 0:17
    
Yeah, agreed on that part. Maybe the "x" and "check" areas could be more like buttons, and you could click either side? I can imagine sliding a lot of those back and forth with a mouse could get annoying. –  smurf Jan 23 at 0:25
1  
Thanks! That it really slick. Seems intuitive and very easy to quickly scan. I think it could be adapted to non-touch environment. –  David K. Jan 23 at 3:26
    
@smurf Let me know what you think of the above implementation. –  David K. Jan 24 at 3:50
    
Looks good to me. I'd say clicking the x is the same as sliding to the left. I'd label the column headers, "Absent", "Present". (Thinking more, I'm not sure what swiping actually adds though - as a user I'd probably just tap the tick/cross, even on touchscreen.) –  Steve Bennett Jan 28 at 23:53
show 1 more comment

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.

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.

share|improve this answer
1  
Clear, simple and contextual with what users are used to. Love it! You could even do the slash from top left to bottom right if you auto-detect the user is left handed. –  Roger Attrill Jan 22 at 8:59
    
This seems like the best, simplest answer. I'm not sure what the goal of "unaddressed" is, but if it means that this is a non-issue, it might help to grey the text. That's only useful though if you want them to be able to ignore it. On the other hand, if you want to call out that it wasn't addressed, maybe a color change or font weight change to set it off would be beneficial. –  Daniel Jan 23 at 18:03
    
This is simple and intuitive to read, unfortunately it is not intuitive to enter the data, and it requires two interactions to get to one of the states. –  Ben Voigt Jan 25 at 19:11
add comment

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:

default radio buttonset

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:

smaller radio buttonset

share|improve this answer
1  
I think the interaction with this is nice, and I like that it is very clear what I am clicking. One important thing I think needs to be improved though: I find myself looking directly at the buttons, and not focusing on the question that is being asked. The actual symptom seems secondary to the idea of whether it exists or not. This image: imgur.com/qmhJ1NH shows how your eyes jump right to the bold buttons and skip the content above. Often that's good, but not perfect for this application I think. –  smurf Jan 24 at 15:49
    
@smurf - Duly noted; my answer has been updated to acknowledge the size issue. However, like I said in my post, they have a Theme Roller where you can customize the colors of the UI controls. This is their Darkness UI theme, so that's why they are darker and bolder. You can make them much much subtler if you wish to. –  Code Maverick Jan 24 at 16:27
    
Your second fiddle is a broken link :( –  Ben Voigt Jan 25 at 19:13
    
@BenVoigt - Oh crap! I accidentally purged it when I was removing some unnecessary fiddles. I'll have to redo it. –  Code Maverick Jan 25 at 19:17
    
@BenVoigt - Ok ... it has been updated. –  Code Maverick Jan 25 at 19:25
add comment

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).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
These appear to be links. If there were a lot of them on the page, there would be no clear way to show which ones were selected. Styling them as buttons (each with an active and inactive state) with "I don't know" selected by default for each would be more effective. –  3nafish Jan 23 at 0:24
    
@3nafish I agree with you, there are probably better ways to design the choices and dozens of links on a page are clearly not a great thing. However, a selected link could be bold, not underlined, an other color, ... –  Zhouzi Jan 23 at 7:30
add comment

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: default state

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

Symptom Present: enter image description here

Not Present (left swipe): enter image description here

What a set of symptoms may look like: enter image description here

share|improve this answer
    
That text being not centered is annoying me more than it should. :P. Is there a specific reason why you made it gravitate towards the center? –  Andrew G Jan 23 at 2:23
    
I am not surprised, it would annoy me to seeing it without being in my reasoning... Although not likely relevant it is there in case it will be viewed on different sized screens! –  tim.baker Jan 23 at 2:50
    
@tim.baker, thanks! this seems like a flatter version of what smurf posted, I really like this solution. The baseline is N/A, one click for either direction, this seems very intuative –  David K. Jan 23 at 4:23
1  
I find the colors confusing,I associate having a symptom e.g. chest pain as bad and therefore red.. –  AndyM Jan 25 at 2:56
1  
@AndyM My thoughts exactly. –  Andrew G Jan 25 at 7:24
show 5 more comments

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).

share|improve this answer
1  
Your mockups don't actually show what your proposal would look like. The sliders don't allow 3 states, and the check boxes don't show the state clearly and need that label you're talking about. You can use the embedded Balsamic tool to make the sketches to illustrate your point. As to using the three-state checkbox at all: I would not do this. The grey state has a specific meaning of 'mixed' (usually: some children checked, some unchecked). What would that translate to in this context? –  André Jan 22 at 9:07
    
Sorry, yes, these are just images I grabbed from somewhere, no real mockups. Just to support the ideas. –  Mike Lischke Jan 22 at 10:40
2  
The problem is that they show something different than the idea, and thus confuse more than they clarify. Please edit your answer so they images show the actual solution you want to suggest instead. –  André Jan 22 at 11:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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