40

Most common UX blunder: Icons

FUCK icons. The big problem with them is they assume a level of familiarity with the product. Someone who has never seen a folder before won't know what a button with a folder icon on it does!

This can be remedied with text NEXT to the icon, giving the button a readable purpose. But guess what? THAT SHIT AIN'T COMMON ENOUGH.

Here's a good example for you; cars. I am familiar with cars, but there's some fucking icons that I can't even figure out. And imagine if you aren't familiar with cars? That's what happens all the time; there's a hundred unused buttons on a car's interior these days because painted upon them is an icon, and only an icon! And who the hell cares enough to take out the manual and finger through it until you find that specific icon. In my experience, almost nobody.

Let's bring it back to software. It's the most overlooked UX sin to have icons without labels or some sort of describing text. As programmers, you and me have seen and can instantly recognize thousands of icons. But to get the typical user's experience, load up a complex program like Blender (assuming you aren't familiar with it yet) and see if you can tell me what all of the icons mean. Or don't, here's a screenshot from Blender 2.8 Beta. None of these icons have any labels.

Fucking frustrating, isn't it?

Don't rely on tooltips! Nobody wants to hover over every fucking icon and wait for it to pop up just to find what they're fucking looking for! Don't forget that a lot of users DON'T EVEN KNOW THEY EXIST! (This number isn't shrinking as fast as you'd expect with the newer generations, because many of the newer generations use touch devices where tooltips don't exist at all)

There's my UX rant. Remember that users are afraid to click things which they don't know what they do. For the most positive user experience, give users something to read; a way to understand what the fuck is going on without experimenting, and without waiting for the tooltip to appear.

Comments
  • 12
    On the other hand though, labels can create a lot of noise and repetitive information (don't make me read the label every time I want to use the fill tool).

    If you were to have both labels and icons in blender, that would be noisy. Only using labels might slow down the workflow because icons are more easily recognized than text labels (although not so sure about this)
  • 7
    On the other hand, the best option might be to have both and be able to switch.
  • 1
    @theuser You don't need to read text labels to know what they are. Remember that text is symbols in the same way an image is. You can recognize the general shape and length immediately, just like an icon.

    If you have redundant items in your program, it's your layout that is incorrect. Why would you have the same button visible twice in a normal user interface?
  • 2
    @BadFox Sure. Options like that are always the best. But by default, there should always be text. Remember that this applies in physical things too, you can't make a physical button toggle text. This is why I mentioned cars in my rant.
  • 5
    For me it's the other way round.

    Nobody wants to learn anything today.

    People expect the complicated things to just work without them having to read a handbook. But that doesn't work. It may be OK for simple things, but if you really want to master something, you have to learn it. But people have become lazy.
  • 2
    @ddephor Not everyone wants to master everything. In fact, quite the opposite. Maybe icons are good for professional workflows and programs but for generic UX they are a nightmare
  • 2
    I miss the colours these icons used to have, you could just remember "yellow = light properties" and not have to decipher the individual icons every time
  • 0
    @D3add3d Colored icons break a uniform design. Looks awful. Helpful, sure, but ugly.
  • 5
    @AlgoRythm I prefer utility over aesthetics in programs like Blender
  • 1
    @AlgoRythm Some text labels can be very long though, say your users did a particular workflow very often and you added a button to automate that. I do agree with your that buttons should have a text label by default, its a good principle. Whether or not a button should have a label and/or icon (and vice versa) is a lengthy UX discussion with lots of factors to take into consideration.
  • 0
    I missed exactly that when switching from Windows Phone to Android. In Windows Phone, all Icons had a text you could simply show by swiping. It was unobtrusive, looked great, and it was very helpful. Android doesn't have anything like that (and not even tooltips). Leading to moments like “Great! I found the ‘delete everything’ button!” in an UI without undo functionality.
  • 1
    @D3add3d Oh yes, I miss colors. Take a look at Gimp, the default is greyscale icons on grey background. Terrible. It's really hard to find the right tool.

    It's configurable, but the default is horrible.
  • 0
    @AlgoRythm Using Blender as an example LMAO It was and still is one of the worst UI and UX out there, but as you mentioned, 2.8 is Beta, previous versions were even worse, they are working on UI and UX right now.
    I disagree on having buttons with text everywhere, if you can't understand icon, then you hover, remember the text and move on.
    Argument about not willing to use manual is just laziness. If you want to know how to do something, you have to get the knowledge somewhere.

    Yes, not everyone wants to master the tool, but peaople tend to link images to actions better, in most cases. I mean, if you always put "yes" in popup on right side, I would click "no" if you put it on the right once. I would not read it. Same goes for icons, remember position and image, not the name of action, eases usage especially for people that don't know the language.

    TODO: get a screen of Blender, and edit it in Paint (cause, you know, at least less icons than PhotoShop), replacing EVERY icon with text.
  • 0
    @AlgoRythm Uniform design doesn't mean using a GUI without color or contrast.

    And I also don't get that design thing. If you want to look at something beautiful, go to the museum. But nearly everything made in software is some kind of tool to work with, and that should be primarily usable.
  • 1
    I actually think this is fine in a huge complicated program like Blender which has to balance two things

    1. The sheer number of options and controls and stuff that the software has

    2. Power usage in which you want to work really fast because Blender has a particular workflow which works really well for people who know it

    I think their current system works great for that. I've been using Blender 2.8 for "production" level stuff for a month and it's really easy to remember where everything is (especially with the fixes, like the light icon being the same regardless of light type).

    This is common for this kind of software - I worked in Maya for half a year and its UI (which is arguably shittier) also does the same thing. You get used to the icons really fast.

    Heck you're basically expected to go one level lower and work with keyboard shortcuts instead.
  • 0
    I think the best thing to do is make the icons be as clear as possible AND add immediate hover over text bubble which would immediately tell me what that button is, then set an option in the settings menu to let me disable this later on once I'm more familiar with the software.

    And also let the user know that this option exists on first startup.
  • 0
    @Revenger That is a possibility if executed correctly, although keep in mind no matter how hard you try to inform your users, they will still complain about the immediate hover that happens all the damn time and will ask how to turn it off.

    I think a possible strategy would be to let the hovers happen a couple of times and then you would prompt the user with the option to turn it off.
  • 0
    @theuser or let them Google it, which then leads you to your website, which leads to more hits, which leads to better SEO.

    (That is if that's how search engines work)
  • 0
    @1000cc Maybe it looks like a folder in real life, but what does pressing a button with a folder on it DO? Open a file dialog? Create a new folder? Who knows until you click it.

    Cars have standard icons. Those really weren't what I meant in my rant. There's buttons, especially in more expensive cars, that have something stupid like a piston and a gear. Who knows what the hell they do. It's in the manual, sure, but making the user go through that thing is bad UX. Nobody ever does.

    @blem14 This is about UX, not about how users are lazy. UX needs to account for how lazy users are and should not force them to memorize parts of your UI

    @ddephor Every utility can benefit from good UX, and most programs aren't utilities. I would say there's about a 50/50 of utilities and recreational programs like Netflix and games.
  • 1
    @1000cc UX is user experience, not user interface. It has to do with what happens when you click the button.

    I gave specific reasons for why Icons are commonly misused. I'm quite clearly not just saying that icons suck.

    Not all buttons in cars are to do with safety. Lots of them activate things like suspension control, and have confusing icons without any description.
  • 1
    Most symbols are general use ones. Your car example for example 95% of the icons in cars are part of a Dutch theory exam for a drivers license.
  • 2
    This "icon only" antipattern even has a name, at least in web design: mystery meat navigation, courtesy of http://webpagesthatsuck.com/mystery... .
  • 1
    I'll take vegetarian text labels over mystery meat anyday. Usability first, design second.
  • 2
    @AlgoRythm it is about users' laziness... have you done the TODO? You would see that icons are there so the UI won't look like a bunch of words thrown here and there.

    My opinion is unchanged: if you are not willing to learn you shall not demand others to ease usage for you. The UI designer shall not consider laziness, but productivity and efficiency. And think big picture, not only "I don't know what it does so thats bad UX".

    To your car example - you learn about standard buttons when getting license, the rest is where manual shall be used. Don't fuckin drive a car if not familliar with it. Period.
    Also, same thing as in TODO - show me car cocpit with these "misleading" icons changed to text. You have no fuckin time to read a button while driving. Also, one design can be used for every country, which is cheaper for companies.
  • 2
    @blem14 I upvoted you and you are on 0. I wonder who decrements posts that are totally not spam and an contain honest opinions.
  • 1
    @blem14 Disagree. Discoverability is one pillar of usability. You certainly like starting a car by just turning the key, right? Well that's because you're lazy. The first cars took half an hour to start with various levers and shit.

    Oh, and when I rent a car, I certainly DON'T want to read the stupid manual first, I expect that shit to work.
  • 0
    @Fast-Nop starting car with a key is not because of laziness, but efficiency, so your argument is invalid.
    If it comes to renting a car, you do not need all of the buttons to drive, and as I said, you should know standard ones, that makes it an invalid argument too, at least in my eyes.

    @Codex404 well, I have been a bit harsh and posted 2 really similar comments, so I see someone could -- that.

    That being said, I will no longer argue with others on this matter, I already said what I think.
  • 1
    🌟✨tooltips✨🌟
  • 0
    Mobile tooltips do exist, but are even less intuitive than desktop tooltips.
    In many apps, if you hold a button the tooltip pops up (toast or toast-like overlay near the button)
Add Comment