People have been confused by unlabeled pictograms for over 10,000 years. I am not the first person to write a version of this article. However, despite 2021 being several thousand years after the invention of written language, modern applications are still swarming with naked, unlabeled symbols.
No. We can dive deep into user research to tell us this, or we can simply take a look around us and honestly admit how often we ourselves are confused about icon meaning. If you’re reading this, you likely work in UX, or at least in a field related to tech. If you, an expert, have trouble interpreting icon meaning, then it’s very safe to assume that the public is totally baffled…and their parents are twice as baffled.
Remember, when you are considering presenting an unlabeled icon to a user, the question isn’t:
Does this icon make sense when I know the function?”
Can all of the users guess the whole function accurately from only the icon?
Take a look at these unlabeled icons used in extremely popular applications, where they are presented with minimal context. Try and quickly guess what functions they indicate:
It’s very difficult to do accurately. They are, in order, “Start a Group Order”, “Sort by Popular” and “Show Available Devices”. If you tested random people on the street, you probably wouldn’t expect many to get them right.
Below are two examples of a somewhat common icon, but what exactly will happen when you tap them on a page with no label?
Quite different effects. Information scent and clarity is very important. If a user is unsure of the effect of an input, they experience confusion, avoidance, and frustration. Even if a user is able to interpret the general meaning of this icon (create something with video), that still isn’t enough to give them an accurate picture of the icon’s function across sites.
For extraordinarily commonly used, old, and consistent icons, such as the magnifying glass for search, recognizability can be pretty good. However, the number of icons in this class are few. If you have to think at all about what icon should represent a given functionality in your product, then your icon is almost certainly not among them.
For mass consumption, symbols sometimes successfully cross culture and ability barriers, but often they fail. If you’re designing for a diverse audience, this can become a huge issue.
For low-vision users, many icons contain tiny details that make them indistinguishable. For screen-reader users, they are totally unreadable unless tagged properly. For users with fine motor impairment, the tiny unlabeled icon you chose to just barely fit the UI is a nightmare to accurately tap. It’s also a nightmare for all users when they’re trying to operate your app with one thumb while carrying groceries on the bus.
The super snazzy icon you whipped up to fit the site theme might even work great for users in your country, but completely mislead users in another. In China, a compass icon means “More Options” (the equivalent of a hamburger or three-dot icon), a T-shirt means “Customization Options”. Or, for example, mailboxes in their country might look completely different than mailboxes in your country. Once you’ve made a mistake like this, it’s often hard to catch. Are you planning to test your product on users from multiple different cultures?
Then we have delightful things like the one thousand different share icons. You might have memorized these, but do you expect a seventy year-old, a child, or someone who spends 1/100th of the time you do on the internet to have memorized them?
Yikes. Icons used in this way require a lot of experience and thought to help the user guess at their meaning. Unfortunately, this isn’t even the end of the problem. As difficult as it is for many users to identify uncommon or somewhat vague icons, there exist sets of icons even more impossible to parse: Totally new icons that nobody has ever seen before.
Here are some lovely new icons invented just in the last few years, with almost no visible clues as to their meaning. Again, these are presented without labels in their respective apps.
The first is, of course, “Toggle Top-Tweets/Latest-Tweets” from Twitter. The second is “Gaming”, an icon that had never been seen in history before Facebook created it recently. These icons are, for all intents and purposes, impossible for a first time user to correctly identify. Their creators are expecting users to tap/click them blindly and deduce the function.
This is not ideal user-centered design.
Given all of these serious difficulties, is there some possible technique we could employ to drastically increase functionality? I’m glad you asked. Yes, all this can be avoided by just slapping one or two word labels on those icons.
Well written labels are absolutely fantastic for conveying complex actions. They are much harder to misinterpret. In fact, the icon and the label can even work synergistically, each conveying meaning which becomes even more clear based on it’s contextual relationship to the other. No research that I know of has ever shown labeled icons to be less scannable/recognizable than unlabeled ones. You can’t lose.
As designers, we know this already. Non-designers know this already. If I took you out on the street and bet you $100 that people would more accurately guess the functions of a list of twenty labeled icons versus twenty unlabeled icons…..None of you would take me up on that bet.
There are a few reasons, both spoken and unspoken, behind this practice:
Icons are quickly recognized once learned, even faster than text!
This is a very bad argument for several reasons.
Naked icons save space, we can’t possibly fit labels into this interface!
Ok, this is true. Icons do save space. However, knowing just how many severe and common problems there are with using unlabeled icons, there must be a very compelling reason you can’t fit labels into an interface. Is this actually the case in the wild?
And these are examples of interfaces planned around using small unlabeled icons, which we can still easily fit labels on. If designers were really prioritizing labels, they could design completely different interfaces to specifically accommodate text for all icons displayed. If you can’t fit five labels across the top of your app, maybe you could reduce the items to four categories instead.
Is it harder to design UI’s where each button has a minimum size and restricted aspect ratio based on font size and word length? Yes. But it’s not impossible, or even particularly challenging for most applications. Most products are not Autodesk Maya.
But I don’t think space or usability claims are the primary reason for the current situation. I think the real reason we continue to see so many unlabeled icon is this:
They look very nice!
Now first of all, looking good is not a trivial benefit. Multiple studies have shown that people generally report more satisfaction and rate usability higher on attractive interfaces. Having a beautiful product is good and UX designers should think about beauty. The issue is when designers lose sight of what is being sacrificed to achieve that look.
Replacing a sea of text with a few artistic icons is very satisfying. It looks very clean and minimal. It looks very “designed”. It’s how interfaces have looked for many years, and it’s something we’re used to. It’s very easy, from the position of creators, to forget just how much it’s hurting users to do this.
Designers and developers work on a product intensely for weeks, months, or even years. Every single icon and it’s function have been engraved directly into their brains a thousand times over. When you know what a button does as intensely as the design team does after building a project, it’s very hard to remember just how much your users won’t know it. After long enough, people legitimately forget there can be any other interpretation for an icon. This is why creators often get so shocked and frustrated watching user testing. After enough repetition, the idea that someone wouldn’t see this as “Show Available Devices” becomes surprising and unbelievable.
Other stakeholders in the process face the opposite problem. They look at the interface occasionally as a manager or to sign off their approval, but rarely ever actually use it. For these people a “clean” attractive interface looks fantastic, and the problems created by stripping out all the descriptive text are rarely experienced. If they do “use” the interface, it’s often just clicking around aimlessly without any real goal or purpose. For this use case, unlabeled icons perform excellently.
This isn’t a criticism of those roles. It’s not their job to critique usability, they aren’t designers. But it does lead to a system of perverse incentives where a design which performs worse can often receive more praise and attention than a design which performs better.
The collision of these roles, and the unfortunate status-quo where a designer can easily back up a decision to use indecipherable icons by pointing out Facebook and Apple doing the same thing, has led us to the sub-optimal spot we’re at today.
We’re making progress. Some big players are releasing updates labeling more icons right now, and there are some great popular apps with excellent descriptive (and pretty) interfaces. But…we’re still not there yet.
First of all, user testing. Actually going out and putting the interface in front of the user gives both the designers and the rest of the team the reality check they need, hopefully with some quantifiable metrics to objectively back things up for stakeholders. If you’re running A/B tests, make sure one of your trials compares labeled versus unlabeled variants. Even if you’re working on a small project without the budget for extensive research, at least make sure you force all your friends to try things out at multiple steps in the process. Resist assuming afterward that all your friends are dumb and your design is perfect.
Secondly, education. This is something that designers need to know deeply, and consciously hold in mind throughout the creative process. Especially on those small teams and bootstrapped startups, where there’s nobody with the time or energy to check your work, you need to empathize with those confused users. If you’re responsible for establishing style guides or design patterns, make it default practice to have everything labeled.
Deciding to use a naked icon isn’t the end of the world. Sometimes it really is the best solution for a situation, but you should be weighing the potential serious downsides when making that decision, not just doing it on a whim or to fit a style.
It’s not going to feel natural. It feels natural to just assume everyone knows what you mean and copy Snapchat.
Unlabeled Icons: Sacrificing Usability for Aesthetics was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
Источник: UX Planetproduct-design design icons ui ux
This activity helps us to reconnect with co-workers in a way we never experienced before.“Describe how you’re feeling as you wrap-up this week.”“Fatigued. Tired. Overwhelmed…”A month ago, we distributed a survey to all UX members at our company to do...... читать далееproduct-design product-thinking ux ux-design team-building
UI/UX DESIGNQuill — The padhai app design case studyIn this case study, I am going to share my design process while designing this app.Blog coverIntroductionQuill is a learning app developed by Target Publications that has learning content from 6th s...... читать далееui-design product-management ui-ux-design product-design ux-design
It was a design challenge and it took me 4 days to finish, including the documentation of this case study.Problem StatementToday, societies & apartments do not have a great system to share concerns/complaints and track the progress of these issue...... читать далееcomplaints ui-design society ux-design product-design
I’ve been fortunate to have worked across a wide variety of products and industries, all of which present themselves with a set of challenges, constraints and requirements that are quite unique. However when it comes to the essence of a solution, and...... читать далееux product-design innovation design-thinking design
UX THOUGHTSThings I did to improve my designs — Before vs AfterI’ll share my journey from a “Designer” to a “Product Designer” in 2 years (while in college).PrologueSo before starting, I would like to give you some background information about myself...... читать далееproduct-management personal-branding full-stack-designer ui-ux-design product-design