Reducing Button Clutter and improving UX

Question

This question follows on from some of my previous questions on this forum:

header-footer-icon-usability

capabilities-detrimental-to-usability

With the help of the answers and suggestions I got here I eventually came up with something similar to this:

This layout has gone down very well with my test user group. Tapping (this is all mostly for mobile devices) on an offer header shows more information regarding the offer, pricing details and times along with a few buttons. It is the buttons that are causing me an issue here. A few notes by way of explanation first

1. The buttons shown with a broken red outline do not always appear.
2. I am using icons rather than text captions on the buttons in the interests of saving space and making the app easier to internationalize.

The buttons are (top right to bottom left)

• "Like" the offer
• "Dislike" the offer
• "Share" the offer (not always visible)
• Link to web page with more info (not always)
• Ask a question prior to buying (not always)
• Buy
• Close the offer detail panel
• Delete this offer

The two other features I want to put in are

• blocking the retailer who made that offer
• blocking that entire offer category (say, Fruit) for which I cannot find anything that makes for an understandable, culture neutral image.

Whilst I do need these buttons I find that they are creating several issues

• A general feeling of "clutter"
• Taking away from the readability of the offer detail (in my view the user's eye is drawn away from the detail to the buttons)
• Confusion?? (are those icons actually clear?)
• Overload?? (Whoa! What do you want me to do here?)
• Finally - not being able to use icons for those last two (BLOCK ...#) buttons over-emphasizes them which is not at all the intention.

Tucking any/all the buttons away into a further drop down of some description (remember the offer detail itself is a sort of "drop down") is unlikely to make things any more intuitive.

I am hoping that some of the design experts here might be able to offer some suggestions.

---

Answers to some of the initial comments to this question

• Liking, disliking and buying are all equally likely and valid actions
• The issue I see with "weighting" the more important/likely actions is that the others are liable to get harder to use, i.e. tap on.
• You may well be right that other than the thumb icons (I would humbly also include the share icon which I think is getting very common these days) the meaning of the others is not immediately clear. But then if I go down the route of labelled buttons I am making the problem even worse - the offer detail dropdown content will be even more heavily skewed visually and the viewer is liable to see mostly buttons not the actual offer detail information (my view, correct me if I am wrong)

Answer 1

Make very clear what you want your user to do.

By knowing this you can create a hierarchy of icons that fits your user goals.

I would sort the icons in three levels.

1. Primary action (large button)
2. Secondary actions (set of icons)
3. Optional actions (hidden behind menu icon)

Do this by having a larger button for the action, not just an icon. The secondary actions are all aligned horizontally below the product details. Optional icons are hidden behind a menu icon in the top right corner. See the image below.

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.

For example, Facebook has it's 'social actions' (like, love, etc) below the text. Android has a 'show more' icon (the three dots) in the top right corner. These are patterns. Users expect it to be there. Make use of that.

After seeing your question I think that 'add to card' is the primary action. Social actions like (dis)liking and sharing are secondary and less used actions are optional (based on your red outlining). This is of course only my opinion. Check with your users!

Use a product detail page

I would also suggest having an own detail page for products (image one) instead of collapsing/expanding the products into a detail view (image two). This way you clean up your view. The back navigation can move to the header which frees up room for the tertiary actions.

Consider using labels for your icons.

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

Source: Icon Usability