An Icon is Worth 1,000 Words

A picture is worth one thousand words. This aphorism means even more when we apply it to icons: save, open, and print are just a few of the many actions we associate with a simply sketched image. The “hamburger” menu icon is newer to the icon family, and yet it is now nearly as ubiquitous as its namesake food. Yet when UX designer James Foster conducted a series of A/B tests, he found it suffered in clarity compared to the simple word “menu.” James Foster began A/B testing to satisfy his curiosity: would the full hamburger test better than the simple “three lines” menu icon? It did. He then compared the full hamburger to the word “menu” surrounded by a border, and that tested even better – 12.9% better. The test led him to the conclusion that the hamburger icon is not as universally understood as a square button—like box with the name of the item. For those of us with less time on our hands, we can’t spend days running A/B tests on every icon and word combination. Even if we could, the tests alone might not provide a clear answer; plenty of designers and developers have struggled over whether icons or text are “better” with no clear decision. This article will do the heavy lifting for us, compiling research on when icons are the better choice, and when the written word will best suit our needs. Icons for space constraints The primary reason a designer might choose icons rather than text is simple: icons take up less space. This has risen to the top of the priority...