<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="https://elezea.com/wp-content/themes/elz_2023/styles/pretty-feed-v3.xsl" type="text/xsl"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:slash="http://purl.org/rss/1.0/modules/slash/" >
  <channel>
    <title>Elezea by Rian van der Merwe - RSS Feed</title>
    <atom:link href="https://elezea.com/2015/03/icon-labels/feed/" rel="self" type="application/rss+xml" />
    <link>https://elezea.com/2015/03/icon-labels/</link>
    <description>A personal blog about product, technology, and interesting things that are worth sharing.</description>
    <lastBuildDate>Thu, 02 Apr 2026 17:43:52 +0000</lastBuildDate>
    <language></language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>https://wordpress.org/?v=6.9.4</generator>
          <item>
        <title>Label your icons</title>
        <link>https://elezea.com/2015/03/icon-labels/</link>
        <pubDate>Fri, 13 Mar 2015 15:38:13 +0000</pubDate>
        <dc:creator>Rian van der Merwe</dc:creator>
        <guid isPermaLink="false">https://elezea.com/?p=5246</guid>
        <description>
          <![CDATA[They're not as easy to understand as you might think.]]>
        </description>
        <content:encoded>
          <![CDATA[<p>I&#8217;ve been spending way more time with Google&#8217;s <a href="http://www.google.com/design/spec/material-design/introduction.html">Material Design guidelines</a> than I ever thought I would, but such is life.</p>
<p>Anyway, as I was going through it, and started to think about the Android side of an app I&#8217;m working on, I tweeted this:</p>
<blockquote class="twitter-tweet" lang="en">
<p>Concerned about Material Design&#39;s reliance on label-less icons. Pretty sure most users don&#39;t know what these mean. <a href="http://t.co/aH1IZvAyG6">pic.twitter.com/aH1IZvAyG6</a></p>
<p>&mdash; Rian van der Merwe (@RianVDM) <a href="https://twitter.com/RianVDM/status/575788075340562432">March 11, 2015</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>That screenshot is from the <a href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">section on Icons</a> in the guidelines, but it&#8217;s not the only example. The whole document is full of screen shots of label-less icons. There&#8217;s not a single label in <a href="http://www.google.com/design/spec/style/typography.html#typography-standard-styles">the section on Typography</a>.</p>
<p><img decoding="async" style="display: block; margin-left: auto; margin-right: auto;" title="No labels" src="https://cdn.elezea.com/images/labels-no.jpg" border="0" alt="No labels" /></p>
<p>There&#8217;s lots of research about why this is a bad idea, but I&#8217;ll just cite two articles on the topic. First, Aurora Bedford sums it up nicely in <em><a href="http://www.nngroup.com/articles/icon-usability/">Icon Usability</a></em>:</p>
<blockquote>
<p>A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.</p>
</blockquote>
<p>And Josh Porter also makes a good point in <em><a href="http://bokardo.com/archives/labels-always-win/">Labels always win</a></em>:</p>
<blockquote>
<p>I think labels should be kept around in almost all cases as they turn guesses into clear decisions. Nothing says “manage” like “manage”. In other words, in the battle of clarity between icons and labels, labels always win.</p>
</blockquote>
<p>Beyond that, there&#8217;s also plenty of evidence from A/B testing that even much-used icons like the hamburger menu is simply not well understood (see <em><a href="http://exisweb.net/menu-eats-hamburger">Hamburger vs Menu: The Final AB Test</a></em>). So, be kind. Label your icons.</p>
<p><strong>Update March 16, 2015</strong></p>
<p>I&#8217;ve received some interesting and helpful responses from the Android community:</p>
<blockquote class="twitter-tweet" data-conversation="none" lang="en">
<p><a href="https://twitter.com/RianVDM">@RianVDM</a> Agree, but they are labeled here which I have used countless times <a href="https://t.co/GYVxBoCOH9">https://t.co/GYVxBoCOH9</a></p>
<p>&mdash; Mike Arney (@mike_arney) <a href="https://twitter.com/mike_arney/status/577467011552423937">March 16, 2015</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<blockquote class="twitter-tweet" data-conversation="none" lang="en">
<p><a href="https://twitter.com/RianVDM">@RianVDM</a> on Android a long press should show you the label of the icon, it&#39;s required when you develop an app for Android</p>
<p>&mdash; Omar Tosca (@otozk) <a href="https://twitter.com/otozk/status/577523897085530112">March 16, 2015</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
          <br>
          <br>
          <hr>
          Thanks for still believing in RSS! Get in touch <a href="https://elezea.com/contact">here</a> if you'd like.]]>
        </content:encoded>
                      </item>
      </channel>
</rss>