Buttons containing icon & text VS. Buttons containing icons, with text below

Question

I'm designing an e-commerce product page that needs a Product Video button and a Try This Ring On button.

I've tried a few different methods and have researched best practices for this, but haven't found an exact answer.

One option shows the icons and text in large squares, but this takes up a lot of screen real estate. The next option shows just the icons above text, but these seem to be floating in space. The last option shows the icons in circular buttons with the text right below.

Not sure which is the best route to take here. I know icons and text being in the same button is easily recognizable, but I've also know iOS and other products have buttons with descriptive text right below.

Looking for the best way to execute this.

Answer 1

I would choose the latter for the following reasons:

• Circles are generally more indicative of being a button than rounded rectangles, or an icon, in flat interfaces.
  • Rounded rectangles are often used as content areas.
  • See the image below.
• The label is close enough to the button for the user to understand that the label belongs to the button.
  • Moving the label even closer to the button will better enforce this.

If there is some flexibility with your design, applying a drop shadow to the button will further express that it is a button.

As Alan Cooper mentions in About Face, the main criticism of flat design is that it removes one of the main indicators of pliancy: the drop shadow.

Aside from that, I would consider the latter to be a usable design.

Answer 2

I think you should move the buttons outside of the image. Consider the image below. If you break your examples down to wireframes, you have your buttons in your image (left). Try and move the buttons below of the image (right).

This is bring more balance to your user interface.

Now, about your question. Make sure it has two properties;

• It must look like a button
• Use a label and an icon

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Source: Icon Usability

Think about how the design communicates affordance. How do users understand the element as a button? Use shape and color to make the element look like a button.

Source: Button UX Design

You tick these boxes by having the labels (point one), giving your icons and labels a color (dark red, point two) and adding a stroke.

I'd say, go with your product's branding but make sure you have your labels and color for your buttons. All three are good.