Multiple primary actions

Question

I'm designing a modal popup which consists of a form where the user can fill a textarea with a comment, and a set of buttons that represent the primary and secondary actions the user can take.

A commonly used pattern for this scenario is to visually distinguish primary and secondary actions, as in http://www.lukew.com/ff/entry.asp?571. However, all the examples I've seen only have a single primary action, and a single secondary action, typically Submit/Save and Close. In my particular case, however, I have multiple primary actions (Approve and Reject) that allow a given workflow to resume, and a single secondary action (Close) which essentially closes the modal popup.

How'd you adapt this pattern for this setting? My first thought was to turn both "Approve" and "Reject" into primary actions, and "Close" secondary. Another alternative, is to turn the "Cancel" button into a primary action, leaving the remaining two as secondary; this way, we'd still have a single primary action, which is the most prominent button in the page, though it'd have a rather odd "primary" action as a consequence.

Answer 1

I would use different visual indicators, and a secondary, like so:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The important thing is how often users will be selecting the actions... if they will 'Accept' 90% of the time, Reject 9%, and cancel 1%, then it's likely Accept should be larger/easier to hit than Reject, as shown above. If the ratio is more even, then you would keep them both the same size.

Answer 2

I like Myrddin's suggestion a lot and think the concept works. Another option, to get away from red/green (which can look the same to some color blind users]) and use a green check icon in conjunction with "Accept" and a red x icon in conjunction with "Reject". If the icons are different colors that's a good visual cue to those that can see it, but the shapes are also generally recognizable without having to read the words with it - a quick visual cue to help me know the goal of the modal.

Answer 3

i like Myrddin's suggestion as well. and although I dont think the community has definitevly put the 2 primary buttons / 1 secondary link issue to rest (i know my org hasnt), i definitely would not recommend swapping primary and secondary actions to shoehorn this concention into your design. A primary action in a particular use case is always the primary action. It is not subject to design considerations such as placement or visual treatment of buttons.