1

I am working on an app which is used by workers to complete an order within a fixed/ closed process. Since the process is closed until the order is finished, workers need the option to abort in case they run into serious issues (e.g. accident, not enough resources etc.) so the order can be reassigned or the problem can be fixed.

For this they have a context menu where they can choose the option 'abort order'. After that they are shown 5 common reasons to abort, which they now have to choose from in order to abort (+ an 'Other' option, so six in total)

The struggle currently is to find a way to display those options with components/styles that are already used when a choice has to be made. I included wireframes for 2 options we already somewhat have in the app. However, trying to use it for this function means either lack of space, too many steps or too much white space.

Does anyone maybe have a tip on how to change the concept to make it work? suggestions for totally different ideas are also welcome!

Thank you!

Option 1

enter image description here

Option 2

enter image description here

3
  • What is the issue exactly? Option 2 should fit the mental model of the user, makes the flow a bit easier than option 1.
    – Chris
    Mar 23, 2022 at 10:06
  • Nice job actually showing options visually.
    – JohnGB
    Apr 17 at 20:06
  • Option 2 looks like it takes up a lot of space in the wireframe, but I'd bet it could be more vertically compact without losing usability. Have you investigated the design in hi-fi by now?
    – Izquierdo
    May 17 at 21:34

3 Answers 3

0

I think the most intuitive in this case, knowing it's a modal window, are some radio buttons and a text field for the last option, the simpler the better:

enter image description here

1
  • With this design, you won't need a button next to Other. Just filling in the Other box will say plenty.
    – Steve
    Apr 17 at 22:48
0

General Rule of Thumb

Radio buttons and a dropdown selections both fulfill the same purpose: they let the user select one option from a list of mutually exclusive options.

The main difference is when to use one. The general rule of thumb is as follows:

  • Few options: radio buttons are the way to go
  • Many options: you need a dropdown selection, because the radio buttons would clutter the screen

The answer to "how many is few and many??" depends on context, available space and users' familiarity with the options.


enter image description here

Lists of standalone radio buttons for single selection are appropriate when there is a small number of options available. With many options, use either a listbox or a dropdown list, depending on the screen space available and on how much you want to encourage users to make changes. Both elements hold more items and take up less screen space than listing many items vertically on the page.
NNGroup - Listboxes vs. Dropdown Lists

Further related reads:

0

Option 2 is by far the better option.

It's clearer at a glance, a more appropriate size for touch interaction, has one fewer tap, and does everything that option 1 does.

Besides those fairly obvious benefits, it is also more extendable if you ever have to have sub categories of reasons to abort an order, as a tap on a button can easily lead to a second screen with sub-options. That would be really clunky to implement with option 1.

You could also provide additional information when selecting a button without cluttering the interface with details of each reason, and then allow a second tap on the button to be a confirm action. I'm not saying that these are necessarily something that should be done, but there are situations where it would improve the UX, and with the second option, you can easily do that.

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.