adding label app ui design
Label Your Icons
No, we can't read your mind. Please label your icons.
N ot labeling your icons is the same as assuming that we are all fluent in ancient hieroglyphics. Are you? Can you just walk up to Cleopatra's needle and read it like you could read a children's book? Even emojis, our modern hieroglyphics don't mean the same thing to each person. If I send you an eggplant am I talking about my garden or something else? How about a goat? Am I talking about my trip to the farm or an athlete that I feel is the "greatest of all time?" How about a snake? or fire? But a smiley face is a smiley face, right? I urge you to overthink and debate that.
The Struggle Is Real.
As a designer, I feel like we are all victims to the struggle of thinking there are conventional icons that everyone knows. But after lots of user testing over the years, I have found that this cannot be further from the truth. There is no convention for icons, there's no set of icons everyone knows. there's no standard. There are no "laws" per se when it comes to what icons anyone can use for anything. Due to this, people can use whatever they want for any meaning. That's right, no one is stopping you! Go make a cat on a horse your home icon!
But that's just the tip of the ice burg when it comes to our icon struggles.
Another issue we run into is, as we design things, we tend to think about our brand when we think about icons. We try to match our brand's look, giving us creative freedom to make icons that match the brand and look similar to some "commonly used icons." (Which again, don't really exist. They are just common to you.) We assume that people can understand that because we took the door off and made the outlines thinner of a house icon we found on google, that people will understand that it means 'home' or 'menu'. But because Icons are not road signs that have standards, there is no real indicator that means that your icon means what you think it does. And there's also a good chance that your design style that matches your brand, has blurred any sort of familiarity a user might have with it, making it hard to understand or figure out.
How about the argument about space? As designers, our jobs revolve around solving problems. The most common one I have come across is wanting to fit as many things as possible in small amounts of space. Usually, this happens when a website or web app needs to be on a mobile platform. On a website, you have all this room to have full words. But *GASP* on phones we do not! The horror! So our first thought? Oh, make that title an icon. Problem solved. Don't worry, everyone has said this same thing. I myself am a victim of the "just make it an icon" phrase. On some mobile apps, for example, Instagram, where they only have a few actions, this solution sorta works. (see example below) But what about apps with more than 5 things in their navigation menu? Or they have unique actions in their menu? Suddenly your icons do not translate.
To illustrate this issue, I have attached an example below. The images are of the bottom navigation menu for Instagram vs the bottom navigation menu of an app I worked on for Discount Tire. In the first example, there are no labels. See how many you can guess correctly before looking at the second image with the labels.
Have a good idea of what each icon represents? Let's see how you did.
You might think, well this example is really obscure. How would I ever know that the car meant 'new car'? And my question to you would be, well if you can't understand it, what makes you think someone who works at Discount Tire would? This is the first time they have ever seen this app. It's new. You could have worked there for 20 years and you still wouldn't know that the car meant 'new car'. And so you might say, well then it needs labels, but Instagram is super easy to understand, that's why they don't have labels. And I would again say no, because, how many of you thought the heart meant 'favorites'? For people that do not use the app often or ever, they didn't know that icon meant notifications. And if you showed these icons to people outside the context of knowing where they are located in the app, most Instagram users would not know that the heart meant notifications either. Even if I told the users that it was an icon used by Instagram, they would still get it wrong most of the time. The users are more likely to say the icon means 'like' or 'favorite' than they are to say it would be 'notifications'.
Finally, one of the biggest things I hear is from the business side.
"The users have seen this icon everywhere. They will know what it means."
We have all heard this before. We might have even said it ourselves. But saying that the users will know what it is because they have seen it everywhere is like saying that anyone can identify any kind of tree because they have seen a tree before. Just because I have seen a tree doesn't mean I can identify a maple tree. And for icons, this can be compared to seeing a hamburger icon and a house icon and they both mean "menu". This " they will know what it means" logic does not work. Not only does it not make sense, but following that logic is literally making an assumption for the user. We are not the users. What we assume they have seen is probably not what they have actually seen. We should never assume the users will understand things because we think its basic knowledge.
Why Labels Are Important
A good user experience can be defined in many ways. One measure is the ability to reduce the user's cognitive load. In other words, reduce the user's need to think. The Nielson Norman Group defines this as the interaction cost.
The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals.
An important factor that contributes to the mental effort or cognitive load, is the ability to determine the meaning of something quickly and efficiently. This is called a sign. A 'sign' is made up of two parts: the Signifier and the Signified.
A signifier illustrates or describes what an object is and what it can do. A signifier can be made of multiple things or just one simple thing, like a label. Colors and context are also often used to elevate the meaning of a signifier faster.
For example, stop signs. You see the word "STOP" in upper case text on a big red sign. The signifiers are; the color red, the uppercase text, and the word "stop." You can also say that the location of the stop sign gives background context to the meaning of the sign as well. If you saw a stop sign while driving you would know to stop at the line. As if you saw a stop sign on a door, you might think, "Oh, I can't go in there."
All those things clearly define what you are supposed to do in this situation using color psychology (in western cultures, red means stop. Studies done on the color read have shown that it grabs your attention faster than any other color and elevates your heart rate upon viewing), typography psychology (uppercase text is often seen as more authoritative, loud and demanding), and of course, the word is giving you the direct meaning through written communication. A strong Signifier will make use of as many components as possible if it hopes to reduce the interaction cost and create an effortless user experience.
A signified is the meaning or idea expressed by a sign, as distinct from the physical form in which it is expressed. A signified is often called an affordance in user experience. An affordance is what an object can do. What an object can do can be revealed by the user interacting with the thing, or by the user's prior knowledge in using something that they see as similar. This is called "empirical knowledge" or "a posteriori knowledge" which both refer to knowledge based on experience. In the stop sign example, the signified would be an abstract conceptual thought of stopping at the place where the stop sign is located. It may also be the octagon shape of the sign. We would know that we need to stop because of our previous knowledge on what this sign does.
This concept comes into play in user interfaces when you see a red octagon icon next to something. We understand based on prior knowledge that this icon is a stop sign. But we don't know why it is there or what we need to do without the signifier. The user would also not know this if they had no prior knowledge of stop signs. The icon would mean nothing to the user.
Both the signifier and the signified elements make up the 'sign' and together they create meaning that can be interpreted by the user. By removing either the signifier or the signified, the other remaining elements are weakened and the meaning becomes blurred.
So in other words, adding a label to your icon greatly decreases the cognitive load a user has to take on to determine what they need to do and how to do it. As a rule, the lower the cognitive load, the better experience a user will have with your product. This is important.
Users are not trying to understand your site, they are trying to use it.
Users are not looking for puzzles or guessing games. They are looking to easily complete a task.
Adding labels to your icons will immensely help your users use and complete tasks. Again, this is important.
Test Your Icon Knowledge
I can write all I want about how labeling icons improves the user experience and decreases cognitive load. But for some, that might not be enough. The easiest way to prove my point is to try it yourself. Below I have compiled icons. The goal is to go through each set of icons and determine which icon represents the word. Try to do this as quickly as possible. If it helps, time yourself for 5 seconds per set. Make sure you write down your answers as you go so you do not forget your initial assumption.
Group One: Which icon means: Lists
Group Two: Which icon means: Discover / Explore
Group Three: Which icon means: Refresh
Extra Credit: Which icon means: Rotate
Notice, a lot of these icons look similar or could maybe both mean the same thing.
Was choosing which icon represented the word easy or hard?
Did it take you longer than 5 seconds to decide?
If it did this is important to note because most users won't even try to figure it out for a full 5 seconds. They will glance at something and either read the label and determine its meaning, or assume the icon means something, or do nothing at all. They may even leave the site or page if they cannot figure out the tool they need to complete their task. If you couldn't figure out what these icons meant in 5 seconds without context, think about how your user is feeling.
How many of those do you think you got right? How many stumped you? Let's review what each icon means.
Group One: A. The heart icon is the 'lists' icon for Wayfair. The three-line icon is the 'menu' icon for CNN.
Group Two: B. The compass icon is used as the 'explore' or 'discover' icon for the Instagram web page. This icon is not used on their mobile app. The globe icon is used by Amazon for their language setting.
Group Three: B. The arrow looping towards the right or forward, in a circle is the 'refresh' icon for Google Chrome. The looping arrow going towards the left, or backward, in a circle around a clock, is the 'recent' icon in Confluence.
Extra Credit: A. The first set of arrows moving in a circle is the 'rotate' icon in the design program, Sketch. The second set of arrows is also in the Sketch program, in the same menu bar in fact but, that icon means 'create symbol'.
Note how many of these icons you did not guess correctly. Again think about the users, trying to make the same choices. For example, the last bonus questions about 'rotate' and 'create symbol' seems crazy confusing. But, the system offers labels that make finding what the user needs easier and clearer. The icons are more of a nod to other design programs like Adobe Photoshop and Adobe Illustrator than actual identifiers. The labels are what make the program usable.
Let's level up to bigger groupings now. The rules are a little different for this round.
Rules: All the icons below all represent the same action. The goal is to go through the group of icons and determine what that icon group means. Try to do this as quickly as possible. If it helps, time yourself for 10 seconds per set. Make sure you write down your answers as you go so you do not forget your initial assumption.
Group One:
Group Two:
Group Three:
Group Four:
How many of those do you think you got right? How many stumped you? Let's review the action that these groupings represent.
Group One: Save
Group Two: Menu
Group Three: Edit
Group Four: Download
Kinda crazy to see how many different icons mean the same thing, right?
How did you do? Did you find it super easy to figure out these icons? Or did you find it difficult?
Did you think you had an answer and then as you looked through the other icons you realized that you might not be right? If you felt that sense of confusion or second-guessing, think about how your user feels when you use similar icons. Especially since you are now armed with the knowledge that all of these icons are commonly used for these actions across the web. There is no standard. So your user might be used to seeing one icon on another site they frequent, but your new site does not have that same icon. And now the user is questioning what that icon means and where to go to complete the task they want to do.
Did you find a few you recognized and used context clues to determine which grouping meant what? If you did use context clues, are you going to put all these icons next to each other on your app too? Or maybe we can use the best context clue of all: a label.
I hope these exercises helped illuminate the issues users are facing with icons. I sincerely hope that you try this exercise with your peers and coworkers to see why labeling icons is so important. You can also do this exercise with your users to determine which icons you should and should not use in your app to go along with your label.
Popular Exceptions — That Don't Have Merit.
I have heard arguments about progressive reduction, but as much as it makes the pages look cleaner, it does not help new users. Progressive reduction assumes that all the users on the platform have been using the product since the icons introduced with labels were released. This theory also assumes that this person might be using this app multiple times a day or a week so that they become familiar with the icons. However, this theory does not account for a good share of the use case of new users. How are they supposed to know what those icons mean without the background knowledge that all the power users know?
I have also heard arguments for the click and explore methods of finding out what things do. This is specific to particular age groups, and technology use, making it a big assumption about large user bases. I have personally found in user studies that people that are younger millennials to toddlers are more likely to click around sites and apps and discover what things do without fear of repercussions. They will tap and click things until they figure out what they need. That is if they are interested enough to try to find what they want before leaving the site completely to run a google search for it.
Older millennials and older generations are less likely to click around sites due to what I call "CLICK HERE! PTSD." In the age of the internet in the 90s and early 2000s, it was so easy to click something that seemed like it must be the correct button, only to download a crazy virus and lose all your files in moments. Buttons that seemed harmless and like the right thing to do, started feeling like huge decisions. Users started second-guessing every click. On top of getting computer wiping viruses, computers would also end up on webpages that would lock the users on a page so that they could not go back. It seemed like there was no safety net for users. So why when most clickbait only lives on Facebook and bad news blogs, would users still not trust the click here buttons? I mean common. If you had to keep replacing your virus-induced computers, would you trust buttons easily? No.
If the user doesn't fall into the "Click Here! PTSD" boat, they might just not be that tech-savvy and are afraid of getting lost or stuck without any clear breadcrumbs to follow. I have plenty of non-tech-savvy younger millennial friends in this boat. They will often open multiple tabs of the same webpage to keep their spots just in case they cannot figure out how to navigate back to that place. These people are also hesitant about clicking around. They do not want to lose any of the things they had just worked on or, any of the things they had found. They are afraid that one click will lose all their hard work. This fear of losing what they have will prevent them from exploring. This is most common in online school portals, workspace pages like Confluence or Jira, or other work apps like Google docs, Service Titan, slides, or even email apps. Because these apps are work or school-related, users navigate with an abundance of cautiousness to make sure they do not click the wrong thing and break the whole system for the whole class, school, company, office, etc. Why would you click a bunch of buttons in your email to try to figure out how to write a new email, if you were afraid you would delete all email addresses in the companies system? You wouldn't. And although to someone more tech-savvy that concept may seem irrational, just like the "Click-Here! PTSD", but for some users, it's a real fear that prevents them from trying to understand what your icons mean.
adding label app ui design
Source: https://uxdesign.cc/label-your-icons-e2bd57366d37
Posted by: fryaraim1986.blogspot.com
0 Response to "adding label app ui design"
Post a Comment