0

In many ways this question is a sequel to many of the others

Header/Footer Icon usabilityhttps://ux.stackexchange.com/questions/107505/reducing-button-clutter-and-improving-ux

I have asked on this forum. Consider the image shown belowRetailer List

The actual retailer logos shown here are only by way of illustration.

One of the capabilities in my application is to display a list of retailer who currently have offers. In this list I would like to use retailer logos since users tend to associate strongly with logos for their preferred brands.

However, this results in a problem - the list layout with the dropdown button on the right hand side of each item is, in my view, easy to scan and the dropdown button strongly suggests that clicking on the logo will reveal further information. BUT the list layout devalues square logos in favor of linear (i.e. with a more pronounced horizontal dimention) ones. You will see what I mean in the image below - it looks like I am emphasizing Supervalu to the detriment of Hannaford and Shoprite.

Forcing the logos down to an "icon" would have the opposite effect - it would devalue the "linear" logos and make them appear "less important/interesting".

I have considered using tiled images and allowing them to keep their natural dimensions - though this is not strictly true since I would still be limiting the width of each tile. Even if there were a way not to do this I feel that tiles loose the clarity, interactivity and scannability provided by a list. They do not trigger

  • If I scroll down I might see my favorite retailer, "zzzzOOOM" OR
  • "Superbucks"? Let me click on that arrow and see what these guys do

apart from which I feel that a list should appear as a list rather than attempting to disguise itself as a tile, a cloud or anything else since any disguise is bound to devalue its utility.

These are my initial thoughts and I might well be wrong - I am not really a UX guy - so I am hoping that I will get some useful insights from others here.

  • 1
    Can you explain what is the goal of this screen? What User is supposed to achieve with it? Find the retailer with highest amount of offers/best offers/pick the retailer the User is most familiar with? – JakubTutaj May 7 '17 at 15:58
  • The screen will show all retailers who have on going offers so the user can click and browse offers by retailer. Prior to doing so they can find out more about the retailer - facilities (restaurants, disabled access...) etc. – DroidOS May 8 '17 at 9:05
1

It seems like the most common approach is to use tiling, potentially with the inclusion of other information that might be relevant on the top level (to avoid an unnecessary click through to the dropdown).

Here are a few examples of different approaches that may work for you:

ethn.io: scroll down to the "Customers" section of the homepage. They use equally-sized circles with extra information to display differently sized logos with equal prominence.

groupon: They use plaintext for the names of companies to avoid the issue altogether.

Stack Overflow Talent: They take a hybrid approach which I think might be particularly suited to your use case - the logo on top of a stock image, along with a plaintext descriptor below.

  • Thank you - particularly for suggesting the hybrid approach. In the end I evaluated the different options and settled for the groupon route of using Plaintext in the listing with the logo only shown when the user expands the list item - this has the incidental benefit of rendering the list faster since no images have to be fetched and drawn. – DroidOS May 8 '17 at 13:10

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.