0

I am working on a medical application which helps therapists to determine whether patients meet the criteria to be diagnosed with certain illnesses and disorders. For the most part, it works as a survey with lots of multiple choice question which are collected and then analysed by the application afterwards.

The application is only used by expert users, so patients do not have access to it and is used in a face-to-face interview with the patient, where the patient cannot see the screen. Accessibility in terms of screenreaders etc is not an issue, since it will never be a requirement.

An example question would look something like this:

enter image description here

The answers are almost always radio button inputs, only one possible answer. There are some edge cases, but not necessary to mention here.

I have been given a new requirement where I have to try to implement the concept of time periods in this survey. Each question would have two answers, one for a time period, possibly 6 months previously and one for now. The actual time period is irrelevent in the application. It is more important that the interviewer can mark the 'then' and the 'now'.

Until now, they have done this either by creating two separate interviews or by adding the answer to one of the time periods in a note and then compiling the answers manually later. All very difficult and open to human error.

I know how add this feature technically, but my problem is the UI/UX side of things. I have basically landed on a design where there are two vertical radio groups, instead of one.

enter image description here

Again it is expert users we are dealing with, who will receive training. They are used to dealing with time periods in a paper version of the survey but I still think this is not very nice. Does anyone have any other ideas of how to implement this? I'm willing to think completely outside the box, with the understanding that it is important for the user to answer both time periods in the same question and quickly. We have both mouse and keyboard users, but no touch users (at least not yet).

An alternative solution was to have two radio lists side-by-side, duplicating the labels, but many of the questions have answers with lots of text and ends up looking very noisy.

Any alternative ideas would be most welcome!

Improve this question

1 Answer 1

Reset to default
1

I guess if you fill the form with double radio buttons per item it will end up being a flamenco dancer dress.

I would look for an alternative where the selectable elements only appear when the user makes active the item to place them. An example using the keyboard:

  • Up arrow, Down arrow or Tab to move from one item to the next highlighting it

  • Enter to make it active

    • The highlight changes the color

    • There's a reveal showing the selecting options P1 – P2

  • Left arrow, Right arrow or Tab to activate P1 or P2

  • Enter to select P1 or/and P2

  • Up arrow or Down arrow to deactivate this item and go to previous or next item in the list

The end form will only show the chosen options.

enter image description here

Improve this answer
1
  • 1
    Thank you so much for your detailed answer! What a great idea! I never thought about hiding the radio buttons. This is definitely something I can work with. Thanks again! 🙏
    – Metaman
    May 8, 2022 at 18:54

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.