3

Below you can see a section from a booking system.

Staff's Photo, Name and a Button to Call

In this section users should be able to select a staff to book and also call him when they need. However, we received feedback about that some users clicked on the "call" button to select the staff instead of selecting the staff by clicking on the photo.

This is how a selected image radio button looks like.

The question is, what should be done to prevent this user misconception?

  • 1
    So, there's two functions, correct? I can call them right then and there, or book an appt instead? – Mike M Apr 12 at 20:13
  • There are two functions in a box. First, you can select the staff by clicking on his photo. Second, you can call the staff by clicking on the "Call" button. – Melih Apr 12 at 20:15
  • And you can select multiple staff, but obviously call only one at a time, correct? Is there a dominant action? – Mike M Apr 12 at 20:16
  • Oh no. I mean radio button not checkbox. (I'll fix it right now.) So, you can select only one staff at a time. – Melih Apr 12 at 20:20
  • 1
    @marvinpoo After days, I totally agree with you about that it's not a matter of misconception. The answer of MikeM was my very first plan but I expected to find better solutions (e.g. with less buttons) than I can think, here. – Melih May 13 at 12:15
2

Don't overload actions onto images, unless you want users to accidentally perform unwanted actions. Allow calls, and other actions, only after a selection has been made.

Add a call confirmation before beginning the call. This could be in the form of showing info that users can choose to act on, such as selecting which of multiple email addresses or phone numbers to use.

4

Try separating a multistep action (booking flow) from an immediate one (calling) with explicit actions.

In this case, one path leads to an immediate (desired?) interruption for the staff: You're calling them.

The other path is a booking. I'm assuming there's a separate, at least 1 step path to completion.

enter image description here

Tradeoffs

  • The extra buttons do add more visual elements
  • The button labels surface each explicit action
  • This seems to be the most accurate option. – marvinpoo May 13 at 12:03
  • If the primary action is expected to be booking an appointment, consider making "Call now" not look like a button with similar importance. Perhaps try making it a hyperlink, possibly with additional information (e.g. "Call for more details" or whatever the intended purpose for calling is). – jamesdlin May 14 at 18:52
2

I would have done the same, in your explanation you say each one of those images are two buttons, but what its see is an image with its corresponding button. Plus, the call button contrast gives a greater visual presence than the rest of the elements.

Perhaps finding some way to create two buttons without altering too much the design giving more importance to the select button and visually relegating to a second instance the call button:

enter image description here

  • 1
    The white square is not perceived as a checkbox, not until one other entry is checked. It looks like an input field to me, where I can type a number, for example. I think that the concept of booking implies a schedule, so you agree in advance when the appointment takes place. In that case, replacing the checkbox with a calendar icon might be a better way to convey its purpose. – ralien Apr 15 at 8:36
  • If this is for mobile, having two small clickable regions next to each other is problematic. – Acccumulation May 14 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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