{"id":1509,"date":"2016-04-26T16:35:22","date_gmt":"2016-04-26T13:35:22","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=1509"},"modified":"2023-08-17T12:17:42","modified_gmt":"2023-08-17T12:17:42","slug":"visual-perception-icons-vs-copy-in-ui","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/","title":{"rendered":"Visual Perception. Icons vs Copy in UI"},"content":{"rendered":"<p><span style=\"color: #333333;\">Our eyes are a powerful instrument of getting a great deal of information in split seconds. What is more, we do not need to apply too much effort: most of the data is absorbed unconsciously. And that puts the issue of visual perception in the top significant concerns in the sphere of design, especially in product design which solves user&#8217;s problems and satisfies needs.<\/span><\/p>\n<p><span style=\"color: #333333;\">We have already shared our ideas about the <a href=\"https:\/\/blog.tubikstudio.com\/iconic-simplicity-the-vital-role-of-icons\/\">role of icons in interfaces<\/a> in the article describing their most important advantages. Today&#8217;s article deals with one of the aspects initiated by <a style=\"color: #333333;\" href=\"https:\/\/www.quora.com\/In-UIs-do-people-recognize-icons-faster-than-words\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Quora question<\/a> \u201c<strong>In UIs, do people recognize icons faster than words?<\/strong>\u201d Having shared our ideas <a style=\"color: #333333;\" href=\"https:\/\/www.quora.com\/In-UIs-do-people-recognize-icons-faster-than-words\/answer\/Marina-Yalanska\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">in the answer<\/a>, we decided to provide its extended version here for our readers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9780\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg\" alt=\"tubikstudio icons design\" width=\"1500\" height=\"1042\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design-300x208.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design-768x534.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design-1024x711.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design-150x104.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<h2><span style=\"color: #333333;\">The aspect of speed<\/span><\/h2>\n<p><span style=\"color: #333333;\">Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as <a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">icons<\/a> and their impact on the general efficiency of the product has been an actual topic in the global design community for a long time.<\/span><\/p>\n<p><span style=\"color: #333333;\">In the scientific <a style=\"color: #333333;\" href=\"http:\/\/www.research.rutgers.edu\/~asantell\/thesis.pdf\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">research about visual perception<\/a>, after theoretic analysis and the set of practical experiments, \u00a0A. Santella made a conclusion: \u201cThe fact that eye tracking is sufficient for some level of abstraction in our context makes an interesting point. It suggests that the understanding underlying abstraction, and perhaps other artistic judgments, is not some mysterious ability of a visionary few, but a basic visual competence. Though not everyone can draw, everyone it seems can control abstraction in a computer rendering.\u201d People, in general, have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of a high level of abstraction. That is the important fact designers widely use to improve usability and navigability of their solutions.<\/span><\/p>\n<p><span style=\"color: #333333;\">If the only aspect a designer is interested in using icons is <strong>speed<\/strong>, then the idea in the original question will work positively. Yes, in the vast majority of cases <strong>people fix and perceive pictorial elements like icons and illustrations faster than words<\/strong>. A great proportion\u00a0of users are visually-driven creatures by nature, so the following mechanisms of visual perception often work and should be considered in the design process:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">human eye fixes images much faster than written text<\/span><\/li>\n<li><span style=\"color: #333333;\">as psychologists claim, people need about 1\/10 of a second to get a general perception of a visual scene or element (that speed is indeed impossible for textual items)<\/span><\/li>\n<li><span style=\"color: #333333;\">visuals are transmitted to the brain much faster and important pieces of information are often fixed by the brain as visual images even if they were obtained via text perception<\/span><\/li>\n<li><span style=\"color: #333333;\">images are less vulnerable in combination with the background and surrounding elements while the <a href=\"https:\/\/blog.tubikstudio.com\/user-experience-tips-ux-writing\/\">text<\/a> is highly dependent on the <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">aspect of readability<\/a><\/span><\/li>\n<li><span style=\"color: #333333;\">images have a tendency to stick better in long-term memory which means that in interactions with the interface people will not need to process and remember more data than it&#8217;s really necessary, so interactions get faster.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Moreover, icons and other sorts of visuals in the interface can make it more universal in cases when an\u00a0app or a website is used by people from different countries. So, we can claim that using icons improves general comprehension. In addition, pictures push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7659\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-tab-bar-animation.gif\" alt=\"tubikstudio tab bar animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Tab Bar Interactions<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">One of the popular elements of the layout where icons play highly practical value is a <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">tab bar<\/a>. Featuring <a href=\"https:\/\/blog.tubikstudio.com\/small-stars-of-big-design-interactive-ui-elements\/\">interactive elements<\/a> it has limited space capacity, therefore icons as the visual symbols of available\u00a0interactions become an efficient design solution. The concept provided above shows that <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\">interface animation<\/a> can liven up\u00a0the\u00a0visual elements and <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">enhance microinteractions<\/a>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7962\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design.jpg\" alt=\"weather icons app design\" width=\"2432\" height=\"1824\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design.jpg 2432w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design-1024x768.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/weather-icons-app-design-150x113.jpg 150w\" sizes=\"auto, (max-width: 2432px) 100vw, 2432px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Weather Icons Presentation\u00a0<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">Here&#8217;s one more example showing how icons provide a user with the necessary information by visual means. Symbolic images of weather conditions are easy to understand and at the same time they save a lot of space and give the opportunity to make all the layout of the screen informative but not overloaded.<\/span><\/p>\n<p><span style=\"color: #333333;\">In user interfaces, where in many cases basic interactions should take seconds, this aspect is highly important and it is the essential reason to turn hell out of everything into the graphic material. All the things mentioned above feature great advantage of visual elements of the layout, for example, icons, as a\u00a0tool of fast and easy interaction with the product. However, there are some more aspects to analyze before making final design decisions.<\/span><\/p>\n<h2><span style=\"color: #333333;\">The aspect of meaning<\/span><\/h2>\n<p><span style=\"color: #333333;\">On the basis of diverse design projects and concepts designed in Tubik Studio, we deeply believe that speed should not be the only reason to consider and analyze in the process of creating a user interface layout. People can perceive icons super fast but if the message they transfer is not clear and can have double-reading, this speed will not bring positive user experience. Fast capturing of the icon bringing wrong understanding cannot be defined as recognition, it&#8217;s just fast noticing. <strong>Recognition means not only speed but also the right action or information which this icon should bring to the user<\/strong>.<\/span><\/p>\n<p><span style=\"color: #333333;\"> There are loads of widely-recognized icons such as a telephone receiver for a phone call, the envelope for mail, magnifier for search, and so on. Certainly, using these icons you create a much faster perception of the UI functionality than using copy instead of them. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. If the icon doesn&#8217;t correspond with the goal and meaning it is assigned for, the speed of recognition doesn&#8217;t matter. That&#8217;s why there are cases when text transfers the idea or data more clearly and sometimes it is more effective to use the double scheme when the icon is supported by the text.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9579\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/ipad-interactions-animation-1-1.gif\" alt=\"ipad interactions animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>iPad App Interactions\u00a0<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">Here is the concept showing the mutual support of copy and icons. This technique activates several elements of perception during one interaction and provides a higher level of recognizability for <a href=\"https:\/\/blog.tubikstudio.com\/call-for-attention-powerful-cta-button-design\/\">call-to-action elements<\/a>. People, who instantly understand the symbol transferred with the icon, won&#8217;t pay a big attention to the text. The same will happen to those who have problems with fast copy recognition. However, using the copy together with the icon decreases the risk of misunderstanding or wrong interactions for people who can possibly misinterpret the meaning of the image.\u00a0<\/span><\/p>\n<p><span style=\"color: #333333;\">One more\u00a0case when icons are often used together with copy is diverse side menus. Depending on the general stylistic concept of the interface icons can imply a different level of complexity from simple stroke icons to sophisticated and detailed ones.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8933\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik.png\" alt=\"blog app UI design tubik\" width=\"1600\" height=\"1200\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik.png 1600w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/blog-app-UI-design-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Blog App\u00a0<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">This design concept of the blog app shows how icons can become a multipurpose visual element. In the presented interface they support the titles of the categories for blog posts. The textual presentation of the category is visually supported by a good-looking and memorable image. At the same time, copy removes the possibility that different users can see different meanings of the images. What is more, in this case, icons support another important function providing color markers for the categories. This technique makes interaction with the app faster and easier for users and at the same time enhances usability and navigation.\u00a0<\/span><\/p>\n<p><span style=\"color: #333333;\">Anyway, the decision on applying icon, text, or both in the layout should be based on thoughtful analysis of the <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a> and understanding the goals and conversions which have to be obtained via the interaction.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Reasons for\u00a0applying icons in the interface<\/span><\/h2>\n<p><span style=\"color: #333333;\">Summing up the points mentioned above, we can define several popular reasons for using <a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">icons in the interface<\/a>:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">speeding up data perception<\/span><\/li>\n<li><span style=\"color: #333333;\">enhancing the memorability of the element via visual images<\/span><\/li>\n<li><span style=\"color: #333333;\">improving navigation with visual markers<\/span><\/li>\n<li><span style=\"color: #333333;\">saving up space on the screen or page when the long words or phrases are replaced with icons<\/span><\/li>\n<li><span style=\"color: #333333;\">supporting copy material and providing its additional visual explanation<\/span><\/li>\n<li><span style=\"color: #333333;\">supporting the general stylistic concept and its harmonic expression in a broad perspective.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9781\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens.jpg\" alt=\"passfold project feed screens\" width=\"1200\" height=\"1063\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens.jpg 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens-300x266.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens-768x680.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens-1024x907.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/passfold-project-feed-screens-150x133.jpg 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>User interface design solutions for <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-passfold-designing-ui\/\">PassFold project<\/a><\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Points to consider<\/span><\/h2>\n<p>Obviously, it is impossible to satisfy any user and consider every existing cognitive scheme, but there are some general aspects\u00a0which have to be thought out in the aspect of design with high visual perception:<\/p>\n<p><span style=\"color: #333333;\">&#8211; <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a> (physical abilities, age, cultural background, general development, and education level)<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; typical user&#8217;s reading skills<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; a typical environment of product use<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; level of global or local product spread<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; level of recognition for the chosen graphics<\/span><\/p>\n<p><span style=\"color: #333333;\">&#8211; level of distraction\/concentration provided by the graphics<\/span><\/p>\n<p><span style=\"color: #333333;\"> All the mentioned points deal with human cognitive abilities influencing the quality and efficiency of visual data perception. For designers, it&#8217;s important to bear in mind: it&#8217;s not enough to make users see the elements of the layout, it&#8217;s vital to make them recognize their meaning and quickly understand their message. Copy and icons should not fight against each other to see which one is stronger, they should support each other for the sake of better user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8759\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/restaurant-menu-animation-ui.gif\" alt=\"restaurant menu animation ui\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Restaurant Menu\u00a0<\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Recommended reading<\/span><\/h2>\n<p><span style=\"color: #333333;\">Diverse issues of visual perception have been an\u00a0object of scientific and applied research for many decades. In terms of design issues, we could recommend the following articles for those who would like to know more :<\/span><\/p>\n<p><span style=\"color: #333333;\"><strong>What Designers Should Know About Visual Perception and Memory<\/strong> \u2013 <a style=\"color: #333333;\" href=\"http:\/\/vanseodesign.com\/web-design\/visual-perception-memory\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the article by VanseoDesign<\/a> analyzing basic aspects of visual perception from the design perspective;<\/span><\/p>\n<p><span style=\"color: #333333;\"> <strong>Design Principles: Visual Perception And The Principles Of Gestalt<\/strong> \u2013 <a style=\"color: #333333;\" href=\"https:\/\/www.smashingmagazine.com\/2014\/03\/design-principles-visual-perception-and-the-principles-of-gestalt\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the article by SmashingMagazine<\/a> considering the principles of <a href=\"https:\/\/blog.tubikstudio.com\/gestalt-theory-for-efficient-ux-principle-of-similarity\/\">Gestalt theory<\/a> essential for design practice;<\/span><\/p>\n<p><span style=\"color: #333333;\"> <strong>37 Visual Content Marketing Statistics You Should Know in 2016<\/strong>\u00a0\u2013 <a style=\"color: #333333;\" href=\"http:\/\/blog.hubspot.com\/marketing\/visual-content-marketing-strategy\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the article by HubSpot<\/a> about trends on visual content with some stats;<\/span><\/p>\n<p><span style=\"color: #333333;\"> <strong>From Icons Perception to Mobile Interaction<\/strong> \u2013 <a style=\"color: #333333;\" href=\"https:\/\/fedcsis.org\/proceedings\/2011\/pliks\/36.pdf\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the scientific article<\/a>\u00a0about icons perception in mobile interfaces;<\/span><\/p>\n<p><span style=\"color: #333333;\"> <strong>Visual Perception<\/strong> \u2013 <a style=\"color: #333333;\" href=\"https:\/\/www.questia.com\/library\/psychology\/cognitive-psychology\/perception\/visual-perception\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the list of books<\/a> on general aspects of visual perception which can possibly be helpful for those who are interested in the topic;<\/span><\/p>\n<p><span style=\"color: #333333;\"> <strong>The Art of Seeing: Visual Perception in the design and evaluation of non-photorealistic rendering<\/strong> \u2013 the theses of scientific <a style=\"color: #333333;\" href=\"http:\/\/www.research.rutgers.edu\/~asantell\/thesis.pdf\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">research by Anthony Santella<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.<\/p>\n","protected":false},"author":3,"featured_media":9782,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,7,9],"tags":[256,533,319,336,365,437,447,16,457,20,479,83,482,100,485,147,487,151,491,212,492,233,502,237,515,248,528],"coauthors":[],"class_list":["post-1509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-illustration","category-processes_and_tools","category-ui_ux","tag-interaction-design","tag-web-design","tag-mobile-app","tag-motion-design","tag-product-design","tag-tips","tag-tubik-studio","tag-animation","tag-ui","tag-app-design","tag-usability","tag-copy","tag-user-experience","tag-design","tag-user-experience-design","tag-design-studio","tag-user-experience-design-process","tag-design-tips","tag-user-interface","tag-graphic-design","tag-user-interface-design","tag-human-computer-interaction","tag-ux","tag-icons","tag-uxui","tag-illustration","tag-visual-perception"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual Perception. Icons vs Copy in UI<\/title>\n<meta name=\"description\" content=\"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Perception. Icons vs Copy in UI\" \/>\n<meta property=\"og:description\" content=\"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-26T13:35:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T12:17:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1031\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/\",\"name\":\"Visual Perception. Icons vs Copy in UI\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg\",\"datePublished\":\"2016-04-26T13:35:22+00:00\",\"dateModified\":\"2023-08-17T12:17:42+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg\",\"width\":1500,\"height\":1031,\"caption\":\"tubikstudio graphic design icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Perception. Icons vs Copy in UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Perception. Icons vs Copy in UI","description":"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/","og_locale":"en_US","og_type":"article","og_title":"Visual Perception. Icons vs Copy in UI","og_description":"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.","og_url":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-04-26T13:35:22+00:00","article_modified_time":"2023-08-17T12:17:42+00:00","og_image":[{"width":1500,"height":1031,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/","url":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/","name":"Visual Perception. Icons vs Copy in UI","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg","datePublished":"2016-04-26T13:35:22+00:00","dateModified":"2023-08-17T12:17:42+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article about relations between copy and icons in app and web user interfaces in perspective of natural visual perception. Practical UI design examples.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubikstudio-graphic-design-icons.jpg","width":1500,"height":1031,"caption":"tubikstudio graphic design icons"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/visual-perception-icons-vs-copy-in-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visual Perception. Icons vs Copy in UI"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=1509"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1509\/revisions"}],"predecessor-version":[{"id":14732,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1509\/revisions\/14732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9782"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=1509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=1509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=1509"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}