Icons suck

Axess Lab has a great post on the same topic.

However, instead of TED, I'll be talking about the Android alarm interface. Welcome to hell, if hell was your phone and it's screaming at you as you're trying to sleep. If you haven't seen this interface before, here's a picture of it.

Picture this: I'm lying in bed, having a great dream, and then my alarm goes off. Very loudly. I want to stop it as soon as possible. My brain is barely working, and my eyes are blurry. (Doesn't help that I normally wear glasses, except for while sleeping.) I grab my phone and see that mess on the screen.

So the "zzz" icon is to snooze. I have no idea what the other two icons mean. For some reason they have no text labels at all. I also have no idea how to activate them. Attempting to touch one of them displays some small text that I can't see properly. My phone is still making loud noises. I have to work out what the icons mean and how to activate them with a dizzy mind, blurry eyes, and a loud sound that is stealing all of my mental attention. Any normal person would have a hard time with this, but it's particularly bad for people with poor eyesight, as mentioned, and it's also particularly bad for people with ADHD or autism who have trouble focusing on a task with distractions around them. The thing you're trying to interact with making loud noises is one of the most distracting things possible.

Here is how to make an alarm UI. Put a gigantic red button on the screen that says STOP in big letters, and then a different coloured button near to it that says SNOOZE in big letters. Just fill up the whole screen with the buttons, it's not like you need the rest of the screen space for anything else. Touching a button does the thing. That's it. That's all you have to do.

UI designers, if your icon is not in the following list of icons that I have arbitrarily approved as being universally understandable, then add a freaking label next to it. I know you love icons, and I'm not saying don't use them. Icons are helpful. They just often can't complete the picture on their own. Icons with text labels are the best, because the text helps new people find what they're looking for, and the icons help returning people quickly link a button that they've previously used with an idea.

Here's the arbitrary list of icons that I have approved as being understandable enough to use without a label (but only if you REALLY have to, labels are still good no matter what):

I will also list the least helpful icons that most need to have text next to them, in traditional countdown fashion, based entirely on my opinion and what is at the front of my mind at the moment.

  1. Three horizontal lines above each other.
  2. A shield. This is used for protection-related things, but it could be safety from other people, it could be managing passwords, it could be blocking things, it could be run as system administrator.
  3. A star. Sometimes this makes sense in context, like starring a post on social media. Sometimes it doesn't, like bookmarking a page in your browser.
  4. A plus. What are you adding, to what? The answer is usually not obvious.
  5. An envelope. Especially inside an email app, where anything could theoretically be represented with an envelope.
  6. The rightmost button in the Android alarm ringing interface. PLEASE.
  7. Three dots in a straight line.

Did you like this post? Don't forget to press the heart or star, hit the speech bubble or pencil, smash the button that says subscribe because there's no icons that represent subscribing, and click on the bell.

— Cadence

← Previous: Celeste speedrunsNext: Escape room →