Unlabeled Icons: Sacrificing Usability for Aesthetics | DevsDay.ru

IT-блоги Unlabeled Icons: Sacrificing Usability for Aesthetics

UX Planet 21 апреля 2021 г. Jacob Michelini


Do you really not have room to label that?

cave painting
Uhh…Emu hunting? Friends list? Ea-nasir owes me fine copper ingots?

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.

Do people understand unlabeled icons?

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.

Vague Icons, Unsure Effects

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?”

It is:

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:

icon: person and +
icon: upward trend line with arrow
icon: computer behind speaker

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?

icon: camera with a +
Facebook: “Create Group Video Chatroom”
icon: camera with a plus
Youtube: “Upload Video”

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.

Inequitable Icons

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?

Inconsistent Icons

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?

Twitter: “Share”
Instagram: “Share”
Android: “Share”
Facebook: “Share”

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.

Totally New Icons 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.

blue stars icon
Astronomy probably
maze icon
Uh…a maze?

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.

The Simple Solution: Use Labels

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.

So Why Are Unlabeled Icons Used So Frequently?

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.

  • You’re still sacrificing the experience of new users during their introduction to your product and onboarding process. This is the most crucial usability period, as it’s when users are deciding if they will bother to to use your product. Being confusing or frustrated here will often lead to them leaving and never coming back. They have no investment to hold them on your platform.
  • Jakob’s Law. User’s spend most of their time using other products, not your product. Since icons are regularly used inconsistently across other products, it’s extremely difficult for users to actually learn their specific functions in your product. Other products are constantly teaching them the “wrong” meanings.
  • If your user gets confused and can’t remember or infer an icon meaning in your app one time, or even just has to think hard for a few seconds to figure it out, then time and effort wasted massively outweighs the tiny incremental benefits of faster icon recognition. This happens more than one time in reality.
  • Experienced users actually often don’t even look at signifiers at all, they memorize the position of buttons. What UI change always drives power users insane? When an update moves where a button is located.
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?

Absolutely not.

facebook top bar
Here’s Facebook’s top bar. All the room in to world for a nice set of labels. No labels.
instagram top bar
Here’s Instagram. Tons of room. Very non-standard use of the heart icon. No labels.
gmail app
Gmail app. Plenty of room. No labels
venmo app
Venmo. Plenty of room, some really unusual icons. No labels.
spotify app
Spotify App. Great tracts of land. No labels.
Postmates App
Postmates. You could write a novel up there. No label.

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.

3D artists are woefully underpaid.

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.

icon: computer behind speaker
How could you not get this? There’s the speaker and the computer right there you moron!

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.

“Very slick, love the animations, nice work!”

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.

How do we fix this?

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 Planet

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

product-design design icons ui ux

Читайте также


Как работать над тестовым заданием

Дизайн Дизайн-кабак 8 мая 2021 г. 21:02
Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB.Веду телеграм-канал «Заметки дизайнера» , где делюсь полезными ссылками, интересными продуктами для собственного анализаи статьями.В этом статье я дам несколько рекомендаций по тому, как лучш...... читать далее
user-research ux-design user-experience product-design ui-design

Prototypes, Early Validations and Streamlining the Design Process

Дизайн UX Planet 7 мая 2021 г. 12:24
In 2020 I wrote an article under the title “Sketching and Quick Ideation in Design Processes”, which aimed to draw focus on the powerful narrative that is created when teams utilize Sketching exercises, to rapidly devise visible and potential solutio...... читать далее
design-thinking design innovation ux product-design

Дизайн UX Planet 6 мая 2021 г. 8:31

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

Дизайн UX Planet 4 мая 2021 г. 21:17

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

Дизайн UX Planet 3 мая 2021 г. 9:32

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

Дизайн UX Planet 28 апреля 2021 г. 15:38

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 Planet 25 апреля 2021 г. 12:11

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

Популярные темы

новости (401) javascript (382) ux (380) design (347) headline (300) python (286) devops (251) ubuntu (233) ux-design (225) tutorial (215) security (210) programming (206) новость (204) web dev (196) webdev (158) seo (152) working in tech (152) дайджесты вакансий от new.hr (150) статьи (143) ui (135) testing roundup (122) software testing (121) user-experience (116) css (113) java (113) react (109) дизайн (102) google (100) product-design (94) игровые проекты (90) beginners (88) ui-design (88) design-thinking (85) technology (83) php (82) primary (80) прочее (80) productivity (80) движки и конструкторы игр (78) api5 (76) технологии (76) cloud (76) job hunting (75) windows 10 (73) бизнес (73) docker (71) laravel (70) debian (68) bash programming (68) uncategorized (68) hardware (67) tutorials (67) android (66) news (60) мероприятия (60) linux mint (59) обучение (58) kubernetes (56) работа (56) linux (54) games (54) art (54) networking (53) ios (53) machine learning (53) инструкции (52) angular (52) español (51) web design and applications (50) ux-research (50) case-study (50) covid-19 (50) aws (50) разработчики (50) api (49) обзоры (49) cybersecurity (49) apple (49) data (49) engineering (48) chrome (48) html (47) inspiration (47) турбо-страницы (47) linux commands (46) job skills (46) web (46) home page stories (45) publication (45) typescript (45) git (45) mobile (44) powershell (44) node (43) c++ (43) навыки алисы (43) tools (43) dotnet (42) testing (41) mysql mariadb (41)