2

I am trying to understand the merits of having labels with my icons.

Need your opinion on : Clarity of labels in addition to their way of presentation.

Approach One

  1. Prepaid (Netbanking, Credit Cards, Debit Cards)
  2. Cash on Delivery - COD

Use 2 icons for representing the above choices.

Approach Two

Separate icons for each payment option with a lot more detail and elaborate labels :

  • Netbanking
  • Credit Cards
  • Debit Cards
  • Cash on Delivery (COD)

enter image description here

I like the approach one, it makes for a wide range of use cases with a small footprint and the labels are concise.

The second approach is very elaborate and makes me wonder if we need icons at all if we are to use full texts as labels.

  • Can you add a $ sign on the COD icon? Not being native English tongue I'm not sure how established the COD abbreviation is, but I would have hard to interpret the first approach, therefore leaning towards the second. – AndroidHustle Sep 24 '14 at 7:22
  • Do you even have enough screen size to display 4 icons? Is it mobile first? – Dave Kirk Sep 24 '14 at 7:24
  • @AndroidHustle This is for Indian audience and so the INR symbol instead of the USD – Vaibhav Kanwal Sep 24 '14 at 7:25
  • 1
    Then I would go with approach two. Understandable by everyone and no Abbreviations. – Jitendra Vyas Sep 24 '14 at 7:41
  • 1
    Let us continue this discussion in chat. – Vaibhav Kanwal Sep 24 '14 at 9:27
5

There are quite a few usability concerns with option one which I would caution against:

enter image description here

  1. You are making the assumption that users can understand that the word prepaid and it has a whole list of options namely credit card, debit card and netbanking. The user is left to make an assumption about the word prepaid entails which can lead to many interpretations. Also if he goes with an incorrect assumption that the service does not support debit cards you might lose a particular customer as well. The customer might also think that Paypal might be a prepaid option and be surprised to find that its not an option leading to increasing frustration.

  2. Increased number of interactions : The user on selecting your prepaid option would then need to choose which prepaid option which is an additional cognitive load on him

  3. Increased cognitive load to recognize what terms mean : This partly goes back to my first point where the user is required to understand what Prepaid or COD means (I would get what COD means but if I asked my father, I am afraid he would not understand what it means)


The advantages of option Two are

enter image description here

  1. Easy visibility of all the options : The user is aware of all the options straight up front with no confusion about what each term means.

  2. Quick access to the desired payment option : This ties in with the previous point but with the option of showing all the payment options, you allow the user to make a quick decision and get to the payment option desired.


Now coming to whether icons are needed ?

I would say yes since your icons provide a quick visual indicator of the payment method as the user scans from left to right and the labels will serve to confirm the users understanding of the icon in case there is any confusion. To quote this article

All user interfaces make cognitive demands on users. Users must master special rules of system use, learn new concepts, and retain information in short-term memory. They must create and refine a mental model of how the system works and how they should use it. Successful user interface designs must respect the limitations of human cognitive processing.

Tests showed that visuals are processed 60,000 times faster than text, and people could remember more than 2,500 pictures with at least 90% accuracy several days post-exposure, even though subjects saw each picture for about 10 seconds.

The inefficiency of text has received particular attention. One of the reasons that text is less capable than pictures is that the brain sees words as lots of tiny pictures. And when we read, most of us try to visualize what the text is telling us. We essentially create icons inside our heads.

Using icons or symbols on a device serve as aids to memory, thereby reducing cognitive load since we can process icons and symbols much quicker than we can read text.

That said, only using icons is not a good idea as this UX Myth article talks about

The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar

  • 1
    I completely agree. I didn't even know what the term COD meant. Nor did I know what prepaid meant. I thought it meant I needed a card from them like a gift card to move forward. Ambiguity is never a good thing in the UX world. – Majo0od Sep 24 '14 at 18:00
  • Almost same thing which I mentioned in comments – Jitendra Vyas Sep 29 '14 at 5:48
2

If I remove the text, will people still understand the icons?

That's the question to ask yourself. Your icons don't pass this test, but to be fair, most icons don't pass because there are relatively few things that have universally established visual representations. I call it the paradox of icon usage: an icon should be so universal it could be used without text, even though it should never actually be used without text.

One practical problem with your second set of icons and labels is, if your site is in other languages, the labels might not fit into spaces that arrow or be as uniformly tall. You might also have to change the abbreviations of your CC and DC icons.

Just remember users will end up reading the labels anyway (Sources: common knowledge, personal experience), so you might as well make it easy for them.

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.