How to present six or more options in a card / modal on mobile screen (to abort an order)

Question

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

Option 2

Answer 1

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:

Answer 2

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.

---

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:

• What's the difference between a toggle switch, radio buttons and a tickbox? What's the best cases these patterns can be use?
• Radio Buttons vs Dropdown Lists: 9 Questions to Help You Choose

Answer 3

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.