Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

up vote 10 down vote accepted

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

mockup

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.

share|improve this answer
    
@ReneeGrebe Good point on color blind, and I would even consider showing an 'x' or a checkmark as part of the button text. If you put this into an answer, I would indeed +1 it –  greenforest May 1 '12 at 7:07
    
Thank you very much for your feedback Myrddin. I have a follow-up question, though. These indicators work particularly well for this scenario where we have two primary actions that are commonly associated with green and red. But suppose that instead of two actions, you have three, and they do not have any association to colors (e.g. "Resend", "Reschedule", and "Escalate"). One strategy would be to follow your design, but instead of using two different colors for the primary buttons, use a neutral color for all of them, since they have equal chance of being chosen. What do you think? –  John Silva May 1 '12 at 11:18
    
@user12999 done! :) –  Renee Grebe May 1 '12 at 15:09
    
@ReneeGrebe I updated my answer to incorporate icons. I couldn't really think of a good alternate color than red for 'Reject', but that's quite dependent on the color scheme of the entire application anyway. –  Myrddin Emrys May 1 '12 at 21:23

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.