{"id":66,"date":"2023-05-13T08:39:41","date_gmt":"2023-05-13T08:39:41","guid":{"rendered":"https:\/\/www.lasselaursen.com\/?page_id=66"},"modified":"2023-12-07T13:55:33","modified_gmt":"2023-12-07T13:55:33","slug":"icon-set-selection-via-human-computation","status":"publish","type":"page","link":"https:\/\/www.lasselaursen.com\/projects\/icon-set-selection-via-human-computation\/","title":{"rendered":"Icon Set Selection via Human Computation"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Icons have long been a cornerstone of GUI design, ever since the emergence of WIMP (Windows, Icons, Menus, Pointers) by Xerox. Given the &#8220;Mobile App Boom&#8221; there&#8217;s even more functionality being expressed via icons than ever before. Figuring out which icons work best is no easy task, and to compound matters even further, what makes a good icon often depends on the beholder of the icon in question.<\/p>\n\n\n\n<p>Most important is whether users have an easy time understanding and finding the icons in a given graphical user interface (GUI). In some cases it is possible to rely on a well established iconography and leverage well known symbols.<\/p>\n\n\n\n<p>But what if there is no established iconography, or what if the established symbol is losing it&#8217;s relevance, like the floppy disk?<\/p>\n\n\n\n<p>Traditionally you&#8217;d rely on an icon designer coupled with user testing if your budget allows for it. But user testing is both time consuming and expensive. This is where our method helps with the heavy lifting and provides a objective evaluation of the available icon candidates.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Icon Set Selection via Human Computation\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/bGmqtp76Me0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Publication and resources<\/h4>\n\n\n\n<ul>\n<li><strong>Icon Set Selection via Human Computation<\/strong><br>Lasse Farnung Laursen, Yuki Koyama, Hsiang-Ting Chen, Elena Garces, Diego Gutierrez, Richard Harper, Takeo Igarashi, in Pacific Graphics &#8217;16: The 24th Pacific Conference on Computer Graphics and Applications,<br><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/pg2016-icon-paper-camera-pub.pdf\">Local PDF<\/a> | <a href=\"http:\/\/diglib.eg.org\/handle\/10.2312\/pg20161326\">Published PDF<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/pg2016-supplemental.pdf\" data-type=\"attachment\" data-id=\"132\">Supplemental material<\/a> &#8211; Icons, Filters, and Crowdworker tutorials<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Quick Facts<\/h4>\n\n\n\n<ul>\n<li>Conceived and implemented over the course of six months.<\/li>\n\n\n\n<li>Produces icon-sets optimized for <em>comprehensibility<\/em> and <em>identifiability<\/em>.<\/li>\n\n\n\n<li>Method applied with approximately 2500 human computation worker costing approximately 500 USD.<\/li>\n\n\n\n<li><a href=\"http:\/\/www.lasselaursen.com\/project\/iconselect#user-study\">User tested 4 icon-set selected via our method using the same pool of icons with over 50 participants per set.<\/a><\/li>\n\n\n\n<li>Surveyed popular VJ software and surveyed artists to determine top 9 filters and create an optimized icon set for visual filters.<\/li>\n\n\n\n<li>The most comprehensible method selected icon-set surpasses the hand-picked designer icon-set in terms of <em>comprehensibility<\/em>.<\/li>\n\n\n\n<li>Created in collaboration with <a href=\"http:\/\/www.microsoft.com\/en-us\/research\/lab\/microsoft-research-cambridge\/\">Microsoft Research Cambridge<\/a>.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Important icon properties<\/h4>\n\n\n\n<p>Our goal is to select a set of icons that optimized for important icon properties, but before we get to these important properties, we briefly need to clarify what an icon is. An icon consists of a signifier, the shape which the icon takes, and the signified, the concept the shape\/icon represents. For example, a traffic sign with a train on it (signifier) can represent a railroad crossing (signified). When designing a new icon, one of the most important tasks is to choose the right signifier. The signifier determines an icon&#8217;s <em>comprehensibility<\/em> and <em>identifiability<\/em>.<\/p>\n\n\n\n<p><em>Comprehensibility<\/em> describes how well an icon communicates what it is intended to represent to the user. <em>Identifiability<\/em> refers to how visually distinguishable an icon is, i.e. how easily it is found among other icons. Both these properties are of high importance when determining if an icon works well as part of a graphical user interface. These are the properties we wish to optimize.<\/p>\n\n\n\n<p>Comprehensibility and identifiability are dependent on the end user. Crudely speaking, how identifiable and comprehensible an icon is, will vary from person to person depending on their experience, culture, preferences, etc. None of these concepts are absolute or universal; they are, at best, conventions. It is no surprise then, that effective signifiers are often re-used, such as a trash-can signifying deletion, or a floppy disk signifying saving data. However, in some cases there are no widely established signifiers to rely on. Additionally, even well-established signifiers &#8211; such as the floppy disk &#8211; may find their usefulness diminish as the referenced object disappears from popular culture.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Method overview<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Having determined which icon properties we&#8217;re trying to optimize, let&#8217;s look at a general overview of our method:<\/p>\n\n\n\n<ol>\n<li>Our method accepts <em>n<\/em> icon candidate groups as input. Each group represents one function\/concept and may contain an arbitrary number of icons. For the sake of simplicity we pretend that each group contains the same number of candidates throughout the description of our method.<\/li>\n\n\n\n<li>All icons within these groups are measured for <em>comprehensibility<\/em> and <em>identifiability<\/em>, using human computation. We compare the various icons in-between eachother and determine both <em>comprehensibility<\/em> and <em>identifiability<\/em> using human computation.<\/li>\n\n\n\n<li>Having estimated each icons <em>comprehensibility<\/em> and <em>identifiability<\/em> score, an exhaustive search is performed to find a complete icon set optimized for both these properties.<\/li>\n\n\n\n<li>A complete optimized icon set is found!<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview.png\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"An overview of our method\" data-rl_caption=\"An overview of our icon-set-selection method. For n functions requiring iconic representation, our method takes as input; n sets of icon candidates. All icon candidates, in each set, are assigned a comprehensibility and identifiability score using data gathered via human computation. Our method then automatically selects an icon set optimized for comprehensibility and identifiability.\" title=\"An overview of our method\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview-1024x341.png\" alt=\"\" class=\"wp-image-181\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview-1024x341.png 1024w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview-300x100.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview-768x256.png 768w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-method-overview.png 1338w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">An overview of our method<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Icon set optimization<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>In order to measure both <em>comprehensibility<\/em> and <em>identifiability<\/em> we need to compare all of our icons to one another. <em>Comprehensibility<\/em> and <em>identifiability<\/em> each require a unique approach to estimate. Which icon best communicates a given function (comprehensibility) depends on the other candidates representing the same function in question. Thus, we need to perform a comparison between every icon intended to represent the same function. Which icon is most visually distinguishable is a more complex problem, as it depends on the other icons it is to be presented among. Therefore, we must compare every icon intended to represent a given function with all icons representing other functionality. Although this can result in a significant number of comparisons, it generalizes our approach to support any type and amount of functionality.<\/p>\n\n\n\n<p><em>Comprehensibility<\/em>, i.e. which icon best communicates a given function, depends on the other candidates representing the same function in question. Therefore we need to perform a comparison between every icon intended to represent the same function. <a>We show workers participating in our human-computation tasks to pick between two candidate icons, to describe a function\/concept.<\/a> With sufficient data we apply the <a href=\"http:\/\/arxiv.org\/abs\/1011.1761\">Bradley-Terry model as described by Caron and Doucet<\/a> to determine a ranking in-between all of the icons according to <em>comprehensibility<\/em>.<\/p>\n\n\n\n<p><em>Identifiability<\/em>, i.e. how easily an icon is found among other icons, relies on inter-icon-candidate group comparisons. Meaning a single icon from a given icon candidate group has to be compared to all icons from all other icon candidate groups. <a>Workers participating in our human-computation task are asked to pick which of two icons from one candidate group is most similar to an icon from a different candidate group.<\/a> Once we&#8217;ve collected enough comparison data via human computation we use <a href=\"http:\/\/http:\/\/homepage.tudelft.nl\/19j49\/ste\/Stochastic_Triplet_Embedding.html\">stochastic triplet embedding as described by Maaten and Weinberg<\/a> to determine how these <a>icons might lie in a euclidean space<\/a>.<\/p>\n\n\n\n<p>The exact formula, which is further detailed in our paper, is as follows:<\/p>\n\n\n\n\n<a name=\"id897128090\"><\/a><p class=\"ql-center-displayed-equation\" style=\"line-height: 135px;\"><span class=\"ql-right-eqno\"> (1) <\/span><span class=\"ql-left-eqno\"> &nbsp; <\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/ql-cache\/quicklatex.com-bfb703d3fcd5bc18451ab29fd2afce80_l3.png\" height=\"135\" width=\"461\" class=\"ql-img-displayed-equation quicklatex-auto-format\" alt=\"&#92;&#98;&#101;&#103;&#105;&#110;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125; &#92;&#98;&#101;&#103;&#105;&#110;&#123;&#97;&#108;&#105;&#103;&#110;&#101;&#100;&#125; &#38;&#32;&#92;&#117;&#110;&#100;&#101;&#114;&#115;&#101;&#116;&#123;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#125;&#123;&#92;&#116;&#101;&#120;&#116;&#123;&#109;&#97;&#120;&#105;&#109;&#105;&#122;&#101;&#125;&#125;&#32;&#38;&#32;&#102;&#95;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#115;&#99;&#111;&#114;&#101;&#125;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#38;&#32;&#61;&#32;&#38;&#38;&#32;&#102;&#95;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#99;&#111;&#109;&#112;&#125;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#43;&#32;&#92;&#112;&#104;&#105;&#32;&#92;&#116;&#105;&#109;&#101;&#115;&#32;&#102;&#95;&#123;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#105;&#100;&#101;&#110;&#116;&#125;&#125;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#44;&#32;&#92;&#92; &#38;&#32;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#119;&#104;&#101;&#114;&#101;&#125;&#32;&#38;&#32;&#102;&#95;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#99;&#111;&#109;&#112;&#125;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#38;&#32;&#61;&#32;&#38;&#38;&#32;&#92;&#102;&#114;&#97;&#99;&#123;&#49;&#125;&#123;&#110;&#125;&#32;&#92;&#115;&#117;&#109;&#95;&#123;&#73;&#32;&#92;&#105;&#110;&#32;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#125;&#32;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#99;&#111;&#109;&#112;&#125;&#40;&#32;&#92;&#32;&#73;&#32;&#92;&#32;&#41;&#44;&#32;&#92;&#92;&#32; &#38;&#32;&#38;&#32;&#102;&#95;&#92;&#109;&#97;&#116;&#104;&#114;&#109;&#123;&#105;&#100;&#101;&#110;&#116;&#125;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#38;&#32;&#61;&#32;&#38;&#38;&#32;&#92;&#109;&#105;&#110;&#40;&#92;&#32;&#68;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#92;&#32;&#41;&#44;&#92;&#92; &#38;&#32;&#38;&#68;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#40;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#41;&#32;&#38;&#32;&#61;&#32;&#38;&#38;&#32;&#92;&#44;&#32;&#92;&#123;&#32;&#92;&#32;&#100;&#105;&#115;&#116;&#40;&#73;&#95;&#97;&#44;&#32;&#73;&#95;&#98;&#41;&#32;&#92;&#32;&#124;&#32;&#92;&#32;&#40;&#73;&#95;&#97;&#32;&#44;&#32;&#73;&#95;&#98;&#41;&#32;&#92;&#105;&#110;&#32;&#92;&#109;&#97;&#116;&#104;&#99;&#97;&#108;&#123;&#83;&#125;&#44;&#32;&#97;&#32;&#92;&#110;&#101;&#113;&#32;&#98;&#32;&#92;&#32;&#92;&#125;&#46; &#92;&#101;&#110;&#100;&#123;&#97;&#108;&#105;&#103;&#110;&#101;&#100;&#125; &#92;&#101;&#110;&#100;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125;\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n\n\n\n<p>The parameter \u03a6 allows the user to preference either <em>comprehensibility<\/em> or <em>identifiability<\/em>. The function <em>comp()<\/em> returns a ranking score determined by the <a href=\"http:\/\/arxiv.org\/abs\/1011.1761\">Bradley-Terry model, as described by Caron and Doucet <\/a>. The function <em>dist()<\/em> returns the euclidean distance between two icons calculated using <a href=\"http:\/\/http:\/\/homepage.tudelft.nl\/19j49\/ste\/Stochastic_Triplet_Embedding.html\">stochastic triplet embedding as described by Maaten and Weinberger<\/a>. Since we are interested in maximizing the perceived visual difference between all icons in our complete set, we use the smallest distance (within a set of distances) as an indicator for how visually distinct the complete icon set is.<\/p>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-comprehension.jpg\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"A sample human-computation comprehensibility task\" data-rl_caption=\"A sample comprehensibility task where the workers are shown a thresholding filter and asked to pick the icon they feel best describes the function\/concept on display.\" title=\"A sample human-computation comprehensibility task\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"834\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-comprehension.jpg\" alt=\"\" class=\"wp-image-179\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-comprehension.jpg 923w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-comprehension-300x271.jpg 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-comprehension-768x694.jpg 768w\" sizes=\"(max-width: 923px) 100vw, 923px\" \/><\/a><figcaption class=\"wp-element-caption\">A sample human-computation comprehensibility task<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-identifiability.jpg\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"A sample human-computation identifiability task\" data-rl_caption=\"A sample identifiability task where the worker is asked to pick the icon which is most similar to the one being presented.\" title=\"A sample human-computation identifiability task\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"812\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-identifiability.jpg\" alt=\"\" class=\"wp-image-180\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-identifiability.jpg 923w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-identifiability-300x264.jpg 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-hc-identifiability-768x676.jpg 768w\" sizes=\"(max-width: 923px) 100vw, 923px\" \/><\/a><figcaption class=\"wp-element-caption\">A sample human-computation identifiability task<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-euclidean-embedding.png\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"Euclidean embedding of icons according to an estimated distance function\" data-rl_caption=\"One of many possible euclidean embeddings (estimated using Stochastic Triplet embedding). For the purposes of easy visualization this embedding was estimated in two dimensions, although any dimensionality is possible.\" title=\"Euclidean embedding of icons according to an estimated distance function\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"782\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-euclidean-embedding.png\" alt=\"\" class=\"wp-image-178\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-euclidean-embedding.png 844w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-euclidean-embedding-300x278.png 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-euclidean-embedding-768x712.png 768w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/a><figcaption class=\"wp-element-caption\">Euclidean embedding of icons according to an estimated distance function<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">User study<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>We conducted a user study that compared the <em>comprehensibility<\/em> and <em>identifiability<\/em> between <a>four complete icon sets produced by our method (highlighted with a shaded background) and one complete icon set chosen by the original icon designer<\/a>. Among the four generated sets, two sets were optimized for only <em>identifiability\/comprehensibility<\/em> and two sets covers the \u03a6 spread of 0.2-0.5 and 0.7-1.0 to maximize variety.<\/p>\n\n\n\n<p>To test <em>comprehensibility<\/em>, we present each participant with <a>a representation of one of our nine visual filters and a complete icon set below<\/a>. The participants are then asked to pick the icon they feel best represents the filter. They are explicitly informed that they can pick the same icon multiple times, for different filters. This task is repeated once for every filter. The icon set order is randomized for every user, but kept in that same order for the duration of the nine tasks, so the user can rely on spatial awareness to avoid unintentionally selecting the same icon multiple times.<\/p>\n\n\n\n<p>To test <em>identifiability<\/em>, we show each participant <a>one of the nine icons on screen and ask them to memorize it.<\/a> On the following screen <a>the users are asked to pick the icon they just memorized as quickly as possible, among the complete icon set.<\/a> This task is repeated once for each of the nine icons, and the complete set is always shown in a randomized order.<\/p>\n\n\n\n<p>We compare our estimated <em>comprehensibility<\/em> and <em>identifiability<\/em> scores with the <a>results from our user study<\/a>. There is a correlation between the comprehensibility score as determined by our method and the percentage of correctly picked icons (during comprehensibility tasks) from a given set. The results pertaining to identifiability did not yield significant results. Furthermore our results indicate that icon sets picked using our method can have a similar or higher comprehensibility score as one picked by a designer. For functionality without a well established iconography, or GUI&#8217;s with a high amount of functionality to represent, our method becomes particularly helpful. Without past signs or symbols to rely on, or with an increasing number of hard-to-quantify user preferences, manually picking the best icons becomes very difficult. Using our method, the icon designer can be left to focus on simply coming up with as many representative icons as possible.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-comprehension.jpg\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"A sample user study comprehensibility task\" data-rl_caption=\"A sample comprehensibility task where the workers are shown a thresholding filter and asked to pick the icon they feel best describes the function\/concept on display.\" title=\"A sample user study comprehensibility task\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"740\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-comprehension.jpg\" alt=\"\" class=\"wp-image-182\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-comprehension.jpg 1000w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-comprehension-300x222.jpg 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-comprehension-768x568.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">A sample user study comprehensibility task<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p1.jpg\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"Part one of a sample user study identifiability task\" data-rl_caption=\"Part one of a sample user study identifiability task&quot;, &quot;A sample identifiability task where the worker is asked to pick the icon which is most similar to the one being presented.\" title=\"Part one of a sample user study identifiability task\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"740\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p1.jpg\" alt=\"\" class=\"wp-image-183\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p1.jpg 1000w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p1-300x222.jpg 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p1-768x568.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">Part one of a sample user study identifiability task<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p2.jpg\" data-rel=\"lightbox-gallery-f5kL6IY8\" data-magnific_type=\"image\" data-rl_title=\"Part two of a sample user study identifiability task\" data-rl_caption=\"Part two of a sample user study identifiability task&quot;, &quot;A sample identifiability task where the worker is asked to pick the icon which is most similar to the one being presented.\" title=\"Part two of a sample user study identifiability task\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"740\" src=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p2.jpg\" alt=\"\" class=\"wp-image-184\" style=\"border-width:1px\" srcset=\"https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p2.jpg 1000w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p2-300x222.jpg 300w, https:\/\/www.lasselaursen.com\/wp-content\/uploads\/2023\/05\/icon-us-identifiability-p2-768x568.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption class=\"wp-element-caption\">Part two of a sample user study identifiability task<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Acknowledgements<\/h4>\n\n\n\n<p>Thank you to <a href=\"http:\/\/koyama.xyz\/\">Yuki Koyama<\/a>, <a href=\"http:\/\/www.ht-timchen.com\/\">Hsiang-Ting Chen<\/a>, <a href=\"http:\/\/giga.cps.unizar.es\/~elenag\/\">Elena Garces<\/a>, <a href=\"http:\/\/giga.cps.unizar.es\/~diegog\/\">Diego Gutierrez<\/a>, <a href=\"https:\/\/rhrharper.com\/\">Richard Harper<\/a>, and last but certainly not least <a href=\"http:\/\/www-ui.is.s.u-tokyo.ac.jp\/~takeo\/\">Takeo Igarashi<\/a> for their help in creating this work.<\/p>\n\n\n\n<p>I&#8217;d also like to thank participating artists, <a href=\"http:\/\/www.hellbender.org\/\">Adam Kendall<\/a>, <a href=\"http:\/\/cargocollective.com\/visual-agency\/VISUAL-AGENCY-1\">Ana Carvalho<\/a>, <a href=\"http:\/\/www.bentoncbainbridge.com\/\">Benton C Bainbridge<\/a>, and <a href=\"http:\/\/www.olisorenson.com\/\">Oli Sorenson<\/a>, the helpful individuals at <a href=\"http:\/\/www.microsoft.com\/en-us\/research\/lab\/microsoft-research-cambridge\/\">Microsoft Cambridge Research<\/a>, the participating crowd-workers, and <a href=\"http:\/\/www.behance.net\/nachevart\">Iliyan Nachev<\/a> who designed all the icon candidates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icons have long been a cornerstone of GUI design, ever since the emergence of WIMP (Windows, Icons, Menus, Pointers) by Xerox. Given the &#8220;Mobile App Boom&#8221; there&#8217;s even more functionality being expressed via icons than ever before. Figuring out which icons work best is no easy task, and to compound matters even further, what makes [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":550,"parent":142,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/66"}],"collection":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":35,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/66\/revisions"}],"predecessor-version":[{"id":759,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/66\/revisions\/759"}],"up":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/pages\/142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media\/550"}],"wp:attachment":[{"href":"https:\/\/www.lasselaursen.com\/wp-json\/wp\/v2\/media?parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}