Feedback required on Iconography with labels for Payment Method

Question

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

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)

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.

Answer 1

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

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

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

Answer 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.