Thursday, August 4, 2016

gui design - Three state button for a medical chart


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.



Answer



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.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...