1

I'm redesigning an internal enterprise tool. There's a page to enter invoice details (or leave blank, if appealing or transfering), and there's a terrifying set of 9 Submit buttons. I'm trying to explore different ways to replace/simplify this: An image of multiple cta buttons

I'm considering putting a dropdown before some sort of 'complete' button - so they make a selection and click a single button. But I anticipate users saying "now I have to click two things instead of just picking the button I want"

The other option is a multiple choice "complete" submit button? I don't know how effective these are - or if they're confusing. Something similar to the 'pending payment' option you see in the image.

I can remove the cancel button or make that secondary, and the two buttons you see with dropdowns only have 2 options each.

The most commonly clicked button is "Ready to Invoice" - but I'm concerned about burying any other options because they're just as important.

Maybe someone has found good solutions for this?

Improve this question
1
  • Nice job showing us visually what you have. It always improves a question.
    – JohnGB ♦
    Apr 17 at 10:58

2 Answers 2

Reset to default
3

Try using a split button, and have the most common choice as the default action.

Split buttons can help when you have multiple choices, but don't want to overwhelm the user.

Get some data from your devs for the most common choices, and that's one way you can organize.

enter image description here

  • It's a fairly established control (Bootstrap and certain material libraries have them)
  • It can be ordered to support the most common use cases
  • It's scaleable if the number of choices grows
Improve this answer
2
  • That might work. Hopefully they go for it. A question - When clicking an item in the dropdown section, what's best practice? To automatically submit the form with that selection? Or, do I need to change the button text only and make them click again? I assume auto-submit
    – turpentyne
    Apr 16 at 22:16
  • I've only seen auto-submit, but you can make the case for both
    – Mike M
    Apr 16 at 23:07
1

I'm not sure of the context for this, but if this is software that a given user will use a lot (as often is the case with enterprise invoicing) and therefore become an expert in, I would suggest focusing on what makes life easier and faster for an expert user rather than what looks cleaner or is easier for a new user. Split buttons and dropdowns are frustrating for expert users, and make the entire process much slower and prone to mistakes.

I would suggest using grouping, colour, and keyboard shortcuts to speed up the ease of use for expert users.

For grouping I would look at which (if any) buttons are logically most related to each other or logically used together. They don't have to be in a straight, neat line, and it may make more logical sense (you'd have to do some user research to find this out) to stack certain buttons to help indicate their logical relation to each other.

When there are several buttons, having different colours (or shades) can help expert users to quickly focus on the button that they need as they are looking for a green button for example. I did extensive testing years ago on a data rating system where there were 5 options, and we found that contrasting colours made a significant improvement to the speed and ease of rating for expert users.

Finally, expert users tend to use the keyboard a lot more than new users. Just watch an expert developer with their favourite editor and compare them to a new user of the same editor. I would strongly suggest adding clear keyboard shortcuts to each of the options so that expert users can quickly select them. If possible, I would suggest using mnemonic letters for the actions rather than numbers, as they are easier to remember and less prone to finger slip errors. So the key h for Hold invoice rather than 1 for Hold invoice. In terms of communicating that letter, there are several options to explore. For example, instead of "Hold invoice", you could use "Hold invoice" or "Hold invoice (H)". You'd have to include a tip somewhere that there are shortcuts, but expert users will love you for them.

Improve this answer
2
  • 1
    Good food for thought! I like the shortcut key option. This is an experienced group of data-entry users, so they're definitely tabbing and keyboarding, more than a mouse at times. My initial thought was the split button could open when tabbed to, and the user tabs through options. I may need more clarity on how often some of these buttons are used. 'Ready for Invoice' is the most common, but I don't know if some of the other options are used 10% or 40%
    – turpentyne
    Apr 17 at 22:13
  • Given the additional information on your primary users, I would definitely not go for a split button. Spend some time watching how expert data-entry users work, and having anything hidden behind a dropdown that doesn't absolutely have to be, slows them down and annoys them. Your focus should be on their experience. I should have listed the order of tips in reverse order as the importance should be: keyboard shortcuts > colours > grouping. Try it out with them and I'm sure you'll end up with happier users.
    – JohnGB ♦
    Apr 18 at 22:06

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.