Coloring Buttons

Question

I have a application that presents the user some information about an appointment and allows them to perform any one of various actions that the user will decide on based on the information presented.

For example, the actions are:

• Cancel appointment
• Remind visitor to bring items
• Reschedule appt to other location
• Adjust visitor's information
• Remind visitor to bring information
• Contact referrer
• Schedule appt with other provider
• False alarm
• OK as specified

The action (specified by a button) sends an email (with boilerplate and parameters supplied for each one). We currently allow as many of these as possible but only one of each so we disable after use (this is not the main point f this question but surely could be questioned and commented on).

The usability problem I see is how to distinguish among so many possible actions. The (not necessarily mutually exclusive) options I see are:

• coloring each button differently
• coloring most buttons one way, but 'OK' 'False alarm' and 'Cancel' differently
• coloring each button the same
• ordering the items (most important at beginning and end)
• alphabetizing

Which of these is the best? What is better than these (if anything)?

Answer 1

The best way to present a large number of actions is to group them and position them differently. Don't just put them all in a row.

For instance, you could:

• put main actions (OK, cancel/false alarm) at the bottom-right corner
• put secondary actions (remind visitor, reschedule, edit info, false alarm, etc.) in another grouping along bottom-left
• contextualize other actions, e.g.
  • if the referrer is listed, put the button for contacting them next to their name (or make it a link)
  • instead of an "edit" button, allow inline/live editing of info
  • put "false alarm"/"cancel" at the top-right corner as an "X"
  • simply make reschedule for another location the act of clicking on the location and changing it

You can also do what many webmail clients do and hide the less commonly used actions in a dropdown menu or dropdown list.

Ultimately, color isn't too important (and shouldn't be for the reason mentioned by ChrisF). You don't want a rainbow of colors in your UI. Use color sparingly as a distinguishing mark (i.e. your second option, or use color to group together the main actions).

Answer 2

There are many actions, and some actions are highly related to information provided in the appointment. For example: the reschedule is related to the current date/time of the appointment, the 'adjust visitor's information' seems highly related to what the information currently is, etc. I would place the buttons for these actions close to where the information is.

So drafting a bit along:

 Date: Jan 1st 2011 [reschedule]
 Customer: John and Jane Doe [adjust information]
 ------- 
 Items to be brought:
 * item 1
 * item 2
 * [remind customer to bring items]
 ------ 
 [OK as specified] [X Cancel appointment]

... etc

To sum up: Make the actions that are related to specific parts of the appointment close to where the information about that part is. The main actions that have the whole of the appointment go to the bottom, or if the list is very long, the most used could also go at the top, just below or next to the identifying information. (A red X for cancelling might not be the most obvious choice, red crosses are also perceived as 'get me out of here' - cancelling editing of the appointment is something completely different from cancelling the appointment itself. Make sure the users cannot confuse the two.

I wouldn't rely heavily on color for providing information (and most certainly not as the single way of providing it), but it is a helpful hint. Keep subdued tones (lime green and bright red crowd the interface so easily), and a limited set of colors.

It also seems an excellent case for some hallway testing of a few variations.