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, 2019 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, 2019 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, 2019 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, 2019 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, 2019 at 12:15

3 Answers 3


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.


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


  • 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, 2019 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, 2019 at 18:52

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, 2019 at 8:36
  • If this is for mobile, having two small clickable regions next to each other is problematic. May 14, 2019 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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