{"id":3067,"date":"2019-01-21T11:16:56","date_gmt":"2019-01-21T11:16:56","guid":{"rendered":"https:\/\/www.negup.com\/blog\/?p=3067"},"modified":"2025-12-04T10:21:42","modified_gmt":"2025-12-04T10:21:42","slug":"iconography-good-or-bad","status":"publish","type":"post","link":"https:\/\/www.negup.com\/blog\/iconography-good-or-bad\/","title":{"rendered":"Iconography. Good or bad?"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><div><div><a href=\"#8a83\">Icons as static\u00a0elements<\/a><div><div><a href=\"#bd92\">Iconography are\u00a0good<\/a><\/div><div><a href=\"#9ce9\">Iconography are\u00a0bad<\/a><\/div><div><a href=\"#9ce9-1\">Icons are\u00a0bad<\/a><\/div><\/div><\/div><div><a href=\"#dfb5\">Icons as interactive elements<\/a><div><div><a href=\"#af38\">Which icon,\u00a0when?<\/a><\/div><\/div><\/div><\/div><\/nav><\/div>\n\n\n\n<p class=\"graf graf--p graf-after--h3 wp-block-paragraph\" id=\"02aa\">Iconography are everywhere. Download one of thousands of free vector icon kits from the Internet\u2122\ufe0f and start throwing pixels in the shape of hamburgers, kebabs and magnifying glasses over your artboards and you\u2019ve got yourself a design. But have you stopped to think when to use an icon, and when not to use one? When to use which icon?<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p wp-block-paragraph\" id=\"37e6\">This piece shares some musing, and some research, from the <a href=\"http:\/\/www.seek.com.au\" target=\"_blank\" rel=\"noreferrer noopener\">SEEK<\/a> UX team regarding iconography, which hopefully makes you more aware of the UX complexities behind these little 8-bit pieces of art.<\/p>\n\n\n\n<h3 class=\"wp-block-heading graf graf--h3 graf-after--p\" id=\"8a83\">Icons as static&nbsp;elements<\/h3>\n\n\n\n<p class=\"graf graf--p graf-after--h3 wp-block-paragraph\" id=\"8cf2\">Static icons are those used as decorative elements, to communicate a discrete piece of information or to help with way finding. Like everything, they can be both good and bad.<\/p>\n\n\n\n<h4 class=\"wp-block-heading graf graf--h4 graf-after--p\" id=\"bd92\">Iconography are\u00a0good<\/h4>\n\n\n\n<p class=\"graf graf--p graf-after--h4 wp-block-paragraph\" id=\"751e\">Well designed, and easily recognisable, icons can quickly communicate information a user may be scanning for\u200a\u2014\u200afor example, scanning a page of search results for hotels that have WiFi, or the number of bedrooms in a property. We see this in symbolism for accessible car parks, signs for bathrooms and the universal symbol for poison.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"232\" height=\"218\" src=\"https:\/\/www.negup.com\/blog\/wp-content\/uploads\/2019\/01\/icon.png\" alt=\"Iconography\" class=\"wp-image-3068\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Icons save space, and reduce cognitive load by removing the need to re-read the same piece of information against every listing, reducing friction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Icons can also help with navigation for people who speak (or read) the language of the interface as a non-primary language (or not at all). I might not be able to read the text on the interface, but icons can give me an understanding of how to navigate around, or how to find what I\u2019m looking for. This is also true in the real world and is why we have standardised icons for bathrooms, airports, elevators etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"644\" height=\"483\" src=\"https:\/\/www.negup.com\/blog\/wp-content\/uploads\/2019\/01\/icon1.png\" alt=\"\" class=\"wp-image-3069\" srcset=\"https:\/\/www.negup.com\/blog\/wp-content\/uploads\/2019\/01\/icon1.png 644w, https:\/\/www.negup.com\/blog\/wp-content\/uploads\/2019\/01\/icon1-300x225.png 300w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading graf graf--h4 graf-after--figure\" id=\"9ce9\">Iconography are\u00a0bad<\/h4>\n\n\n\n<p class=\"graf graf--p graf-after--h4 wp-block-paragraph\" id=\"67b0\">Badly designed icons can add confusion when we don\u2019t know what they are trying to represent to us, especially when they are not accompanied with text or a tool tip.<\/p>\n\n\n\n<figure id=\"ab42\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*3G4Oy3ysbrmiA_Jt7i8M_A.png\" data-width=\"460\" data-height=\"152\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image graf graf--figure graf-after--p\" id=\"ab42\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*3G4Oy3ysbrmiA_Jt7i8M_A.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Without the text, does a flower represent \u2018spa and wellness&nbsp;centre\u2019?<\/figcaption><\/figure>\n\n\n\n<p class=\"graf graf--p graf-after--figure wp-block-paragraph\" id=\"3b89\">Icons for icons sake provide little value and add noise to the interface.<\/p>\n\n\n\n<figure id=\"d71d\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*fXio19o_xsx9x8mtCFU7Tw.png\" data-width=\"661\" data-height=\"198\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image graf graf--figure graf-after--p\" id=\"d71d\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*fXio19o_xsx9x8mtCFU7Tw.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">In the design on the left, the icons do not add any value so we removed them and reduced&nbsp;noise<\/figcaption><\/figure>\n\n\n\n<p class=\"graf graf--p graf-after--figure wp-block-paragraph\" id=\"de19\">Icons without alt-text, are confusing for screen reader users. Particularly if it just reads out something like \u2018Star\u2019 instead of \u2018Save Job\u2019. Text labels help reduce this confusion for sighted users too.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p wp-block-paragraph\" id=\"b76b\">Icons are subjective. The same icon can mean different things on different websites (e.g. a star for \u2018saving\u2019 and a star for \u2018rating\u2019). The same icon can mean different things in different contexts (e.g. an arrow for share, reply, forward, next). Icons can be indecipherable.<\/p>\n\n\n\n<figure id=\"79a6\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-width=\"703\" data-height=\"671\" data-action=\"zoom\" data-action-value=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<div class=\"aspectRatioPlaceholder is-locked\">\n<figure><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ab9Us153kyjHsxMs7HHScg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ab9Us153kyjHsxMs7HHScg.png\"><\/figure><div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-width=\"703\" data-height=\"671\" data-action=\"zoom\" data-action-value=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-scroll=\"native\"><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">What do all the different laundry icons even mean?<\/p>\n\n\n\n<h4 class=\"wp-block-heading graf graf--h4 graf-after--figure\" id=\"9ce9-1\">Icons are&nbsp;bad<\/h4>\n\n\n\n<p class=\"graf graf--p graf-after--h4 wp-block-paragraph\" id=\"67b0\">Badly designed icons can add confusion when we don\u2019t know what they are trying to represent to us, especially when they are not accompanied with text or a tool tip.<\/p>\n\n\n\n<figure id=\"ab42\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*3G4Oy3ysbrmiA_Jt7i8M_A.png\" data-width=\"460\" data-height=\"152\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image graf graf--figure graf-after--p\" id=\"ab42\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*3G4Oy3ysbrmiA_Jt7i8M_A.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Without the text, does a flower represent \u2018spa and wellness&nbsp;centre\u2019?<\/figcaption><\/figure>\n\n\n\n<p class=\"graf graf--p graf-after--figure wp-block-paragraph\" id=\"3b89\">Icons for icons sake provide little value and add noise to the interface.<\/p>\n\n\n\n<figure id=\"d71d\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*fXio19o_xsx9x8mtCFU7Tw.png\" data-width=\"661\" data-height=\"198\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image graf graf--figure graf-after--p\" id=\"d71d\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*fXio19o_xsx9x8mtCFU7Tw.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">In the design on the left, the icons do not add any value so we removed them and reduced&nbsp;noise<\/figcaption><\/figure>\n\n\n\n<p class=\"graf graf--p graf-after--figure wp-block-paragraph\" id=\"de19\">Icons without alt-text, are confusing for screen reader users. Particularly if it just reads out something like \u2018Star\u2019 instead of \u2018Save Job\u2019. Text labels help reduce this confusion for sighted users too.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p wp-block-paragraph\" id=\"b76b\">Icons are subjective. The same icon can mean different things on different websites (e.g. a star for \u2018saving\u2019 and a star for \u2018rating\u2019). The same icon can mean different things in different contexts (e.g. an arrow for share, reply, forward, next). Icons can be indecipherable.<\/p>\n\n\n\n<figure id=\"79a6\" class=\"graf graf--figure graf-after--p\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"aspectRatioPlaceholder-fill\"><\/div>\n<div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-width=\"703\" data-height=\"671\" data-action=\"zoom\" data-action-value=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-scroll=\"native\"><\/div>\n<\/div>\n<\/figure>\n\n\n\n<div class=\"aspectRatioPlaceholder is-locked\">\n<figure><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ab9Us153kyjHsxMs7HHScg.png\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*ab9Us153kyjHsxMs7HHScg.png\"><\/figure><div class=\"progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded\" data-image-id=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-width=\"703\" data-height=\"671\" data-action=\"zoom\" data-action-value=\"1*ab9Us153kyjHsxMs7HHScg.png\" data-scroll=\"native\"><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">What do all the different laundry icons even mean?<\/p>\n\n\n\n<h3 class=\"wp-block-heading graf graf--h3 graf-after--p\" id=\"dfb5\">Icons as interactive elements<\/h3>\n\n\n\n<p class=\"graf graf--p graf-after--h3 wp-block-paragraph\" id=\"47f4\">Seen an item you want to easily find again on an app or website? Just hit the handy dandy \u2018save\u2019 icon! But what, exactly, is a save icon?<\/p>\n\n\n\n<h4 class=\"wp-block-heading graf graf--h4 graf-after--p\" id=\"af38\">Which icon,&nbsp;when?<\/h4>\n\n\n\n<p class=\"graf graf--p graf-after--h4 wp-block-paragraph\" id=\"ba80\">It used to be an icon of a disk in the age of skeuomorphism\u200a\u2014\u200awhere an object in software was represented with its real world counterpart, in this instance a floppy diskette \ud83d\udcbe. The floppy disk never got an upgrade as we moved from disks to CDs to USBs and to the cloud, but its meaning is still known. You\u2019ve probably heard the folklore story of the child who said \u201cWow, someone 3-D printed the Save Icon!\u201d upon seeing a 3 1\/2 inch floppy disk IRL.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p wp-block-paragraph\" id=\"06c2\">You\u2019ll still see this in Microsoft Office products today.<\/p>\n\n\n\n<figure class=\"wp-block-image graf graf--figure graf-after--p\" id=\"076a\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*NkKmH3uYCtor2adM0QoJWQ.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Microsoft Save&nbsp;icon<p><\/p>\n<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Iconography are everywhere. Download one of thousands of free vector icon kits from the Internet\u2122\ufe0f and start throwing pixels in the shape of hamburgers, kebabs and magnifying glasses over your artboards and you\u2019ve got yourself a design. But have you stopped to think when to use an icon, and when not to use one? When [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[52],"tags":[],"class_list":["post-3067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"jetpack_sharing_enabled":true,"amp_enabled":true,"jetpack_featured_media_url":"https:\/\/www.negup.com\/blog\/wp-content\/uploads\/2019\/01\/icon4.png","_links":{"self":[{"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/posts\/3067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/comments?post=3067"}],"version-history":[{"count":2,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/posts\/3067\/revisions"}],"predecessor-version":[{"id":10812,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/posts\/3067\/revisions\/10812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/media\/3071"}],"wp:attachment":[{"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/media?parent=3067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/categories?post=3067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.negup.com\/blog\/wp-json\/wp\/v2\/tags?post=3067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}