I am working on an e-commerce website. When a buyer opens a product page, there is a button to contact the seller, this button send a message to the seller.

Now I want to add a phone call button. Which one the the following design is better?

Design 1: Call button on the first row enter image description here

Design 2: Call and Contact button side by side enter image description here

Design 3: Call button icon Displaying The action icons are:

  1. Add to my favorites
  2. Flag/Report this product
  3. Share on Facebook

Note: If the device does not support phone calling, clicking on the phone button would display the phone number.

This action won't be possible in the third design as there is no room to show the phone icon... in which case, I would either have to show a disabled icon or remove it altogether.

  • Have you asked your users? Also, what does "contact" mean in this context? Is it an in-app messaging system? Does it send you to Outlook or WhatsApp or Telegram? Commented Sep 5, 2021 at 18:22

1 Answer 1


As I can see that in the site, the primary CTAs are call and contact. First of all, I would like to point out that the options 'Call' and 'Contact' sounds similar and therefore might be confusing to the user, you might change the copyrighting a little bit to fix that, maybe use 'Message' or 'Chat' as the button label.

Other thing I notice that in your information architecture, you have prioritized call over the contact button, but with brighter color you have made the contact button more prominent, that creates a confusion.

Regarding choosing from one of your design, then I would go with Design 2. Because the information is more properly laid out, placing the button side by side it's easy to scan. It also gives you more screen real-estate to put other details.

  • Glad it helped. Let me know if I can help with something else.
    – Alok Kumar
    Commented Sep 1, 2021 at 7:07

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