{"id":3543,"date":"2017-09-20T18:02:12","date_gmt":"2017-09-20T15:02:12","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3543"},"modified":"2023-08-14T18:32:36","modified_gmt":"2023-08-14T18:32:36","slug":"ux-design-glossary-interface-navigation-elements-set-2","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/","title":{"rendered":"UX Design Glossary: Interface Navigation Elements. Set 2"},"content":{"rendered":"

Interface navigation belongs to the core issues of UX design. That’s not surprising: it’s hard to get to your destination if you can’t see the way. Being surrounded by more and more websites and applications every day, users are highly-fed with the diversity of offers and expect intuitive navigation as a must-have. So, let’s continue our talk about the theme with a new issue of navigation glossary to learn more about this powerful booster of usability. Earlier we presented you the first set of UX glossary for navigation<\/a> covering the definitions and examples for navigation, menu, button, CTA, bar, picker, switch, etc. \u00a0Today let’s add the new ones to the list: check the details for icons, search field<\/a> and tags.<\/span><\/p>\n

\"information<\/p>\n

 <\/p>\n

Icons<\/span><\/h2>\n

An icon can be defined as an image that has a high symbolic value and is used for the purpose of communication.<\/strong> Icons present signs which are informative and support data exchange between the informer and addressee alongside with words and sentences: while the copy is served with letters or characters, icons communicate via the images showing pictorial resemblance with an object of the physical world. In computing and digital design, icons are pictograms or ideograms used in the web or mobile interface to support its usability and provide the successful flow of human-computer interaction.<\/span><\/p>\n

One of the most valuable benefits of icons is the ability to effectively replace the text. This feature is able to boost usability and strengthen navigation as most users tend to perceive and decode images faster than words. However, even the slightest misperception or double meaning can become the reason for poor UX so the solutions on the type of icons should be carefully tested to reach the good balance of icons and copy for a particular target audience. One of the effective variants is using both copy and icon<\/a> so that different categories of users could feel good with that: this approach is particularly popular in various catalogs of e-commerce websites<\/a> where different positions are presented by both words and pictures giving the user double support for quick and clear navigation.<\/span><\/p>\n

\"UI<\/p>\n

Based on their\u00a0functions, icons can be classified\u00a0as:\u00a0<\/span><\/p>\n

– interactive icons:<\/strong> icons that are directly involved in the interaction process. They are clickable or tappable and respond to the user’s request doing the action symbolized by them. They inform users about the functions or features of the buttons, controls and other elements of interaction. In many cases, they are obvious and don’t need the copy support.<\/span><\/p>\n

– clarifying icons:<\/strong> icons aimed at explanation, visual markers explaining particular features or marking out categories of content. They may be not the layout elements of direct interaction; also, they are often found in combination with copy supporting their meaning.\u00a0<\/span><\/p>\n

– entertaining and decorative icons:<\/strong> icons aimed at aesthetic appeal rather than functionality, often used to present seasonal features and special offers. They present an effective way of attracting a user’s attention and enhance the general stylistic concept of a digital product.<\/span><\/p>\n

– app icons:<\/strong> interactive brand signs that present the application on different platforms supporting the original identity of the digital product.<\/span><\/p>\n

– favicons:<\/strong>\u00a0represents the product or brand in the URL-line of the browser as well as in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing.<\/span><\/p>\n

\"tubikstudio<\/p>\n

Read more about the types and functions of icons<\/a><\/em><\/span><\/p>\n

Search Field<\/span><\/h2>\n

A search field, which is also called a search box or search bar, presents the interface element enabling a user to type in the keywords and this way find the pieces of content that are needed. It is one of the core navigation elements for websites or apps with a big amount of content, in particular blogs, e-commerce and news websites, etc. Well-designed and easily found search field enables the user to jump to the necessary point without browsing through the numerous pages and menus: as this approach respects user’s time and effort, it is highly demanded in user-friendly interfaces.<\/span><\/p>\n

In terms of design, this element can be presented in different ways, from the framed tab to the interactive input line, or even a minimalist clickable icon. In the vast majority of cases, the search field is marked with the icon featuring a magnifying glass. This symbol is recognizable by a wide variety of users so it has proved itself effective for setting intuitive navigation. Experiments with this icon can have a bad influence on interactions and usability of the layout, so if other symbolic images are applied, they should be carefully tested. The flow of interaction can also be supported with the dropdown menu offering possible options or auto-filling functionality.<\/span><\/p>\n

\"tubik<\/p>\n

 <\/p>\n

Another important issue is the placement of the search graphic control in the interface. In web design, the search field can be often found in a header of a website and this is a good choice: as we mentioned in the article devoted to design practices for website headers<\/a>, for any website it is the zone of the highest visibility, so putting a search field there enables users to quickly get transferred to the pages they really need without wandering through the website and scrolling down. For example, it is applicable to big e-commerce<\/a> websites\u00a0often visited by users who have a particular goal, a specific item they are looking for – if they can’t find it quickly and conveniently, the risk is high that they will leave decreasing the profitability of the resource.\u00a0Moreover, the power of habit should also be taken into account: as numerous websites include search into their headers, users are accustomed to looking for it there when they need it.<\/span><\/p>\n

Talking about the search field in mobile interfaces, the situation differs as the designer is much more limited in the usable space. If the app is based on a lot of content and search is one of the central elements of interaction, it can be found in the tab bar and easily reached. In case the search is not crucial for the user goals and usability of the app, it can be hidden in menus or shown only on the screen where it’s potentially needed.<\/span><\/p>\n

\"tubik<\/p>\n

Tag<\/span><\/h2>\n

 <\/p>\n

Tag is an interactive element presented with a keyword or phrase that enables the user to move quickly to the items marked up with it. Tags are actually pieces of metadata that provide quick access to specific categories of content so they support navigation with the additional way of content classification. Moreover, tags are often the elements that users create by themselves comparing to the names of categories that are fixed by the website and can’t be changed by users.<\/span><\/p>\n

\"design4users<\/p>\n

Tags used as a part of navigation on Design4Users website<\/a><\/em><\/p>\n

Tags are widely used on the platforms based on user-generated content: when you upload the photo to the stock, post on the social networks or write on the blog, you can mark your content with the particular keywords which will then unite all the pieces of content marked with the tag. The screenshot above shows you the part of the home page of Design4Users<\/a> Blog which actively uses a cloud of tags to enhance navigation around the blog content. In terms of interaction, click on a tag moves the user to the webpage collecting all the content marked with this tag. Also, tags are an SEO-friendly technique increasing the chances that the content will be found via search engines.<\/span><\/p>\n

\"example<\/p>\n

As another example, here’s the tagging offered by Unsplash, the well-known platform for free stock photos. When users download a photo, they are offered to type their own tags aka keywords that would describe this photo, in the best way of helping other users to find it. As we can see, the input field for adding tags also supports users with prompts for better usability. So, tags present user-generated elements of navigation that make the interface closer and clearer to their target audience.\u00a0<\/span><\/p>\n

\n

Planning the navigation is hard work that demands a good knowledge of psychology and interaction patterns, user testing, and a serious approach to information architecture from the earliest stages of an app or website design. However, it becomes the solid ground for a positive user experience that will solve users’ problems and motivate them to get back to the product again and again.<\/span><\/p>\n

Today\u2019s set of our glossary is ready for those who need it, and we are going to continue this practice before long. Don\u2019t miss the new sets \u2014 the next one will continue the issues of navigation with deeper insights into types of menus, buttons<\/a>, and breadcrumbs<\/a>. New definitions are coming soon!<\/span><\/p>\n

Recommended reading<\/span><\/h2>\n

Here is the set of recommended materials for further reading for those who would like to get deeper into this topic and learn more about the theme.<\/span><\/p>\n

UI\/UX Design Glossary. Navigation Elements<\/a><\/span><\/p>\n

How to Design Effective Search in User Interfaces<\/a><\/p>\n

Small Elements, Big Impact: Types and Functions of UI Icons<\/a><\/p>\n

Basic Types of Buttons in User Interfaces<\/a><\/p>\n

Visual Dividers in User Interfaces: Types and Design Tips<\/a><\/p>\n

Directional Cues in User Interfaces<\/a><\/p>\n

Copywriting for Mobile and Web Interfaces: Types of UI Copy<\/a><\/p>\n

Error Screens and Messages: UX Design Practices<\/a><\/p>\n

How to Design User Onboarding<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.<\/p>\n","protected":false},"author":3,"featured_media":8871,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[237,469,256,479,264,482,319,491,324,502,347,504,20,365,515,100,437,533,123,440,534,139,447,142,457,147,463,151,465,209,466,212,467,233,468],"coauthors":[],"class_list":["post-3543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-icons","tag-ui-design-tips","tag-interaction-design","tag-usability","tag-interface-navigation","tag-user-experience","tag-mobile-app","tag-user-interface","tag-mobile-design-inspiration","tag-ux","tag-navigation","tag-ux-design-article","tag-app-design","tag-product-design","tag-uxui","tag-design","tag-tips","tag-web-design","tag-design-for-business","tag-tubik","tag-web-design-article","tag-design-psychology","tag-tubik-studio","tag-design-research","tag-ui","tag-design-studio","tag-ui-design-article","tag-design-tips","tag-ui-design-examples","tag-glossary","tag-ui-design-inspiration","tag-graphic-design","tag-ui-design-practices","tag-human-computer-interaction","tag-ui-design-process"],"acf":[],"yoast_head":"\nUX Design Glossary: Interface Navigation Elements<\/title>\n<meta name=\"description\" content=\"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.\" \/>\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\/ux-design-glossary-interface-navigation-elements-set-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UX Design Glossary: Interface Navigation Elements\" \/>\n<meta property=\"og:description\" content=\"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-20T15:02:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T18:32:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/\",\"name\":\"UX Design Glossary: Interface Navigation Elements\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg\",\"datePublished\":\"2017-09-20T15:02:12+00:00\",\"dateModified\":\"2023-08-14T18:32:36+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg\",\"width\":1280,\"height\":960,\"caption\":\"UI navigation design elements\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UX Design Glossary: Interface Navigation Elements. Set 2\"}]},{\"@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":"UX Design Glossary: Interface Navigation Elements","description":"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.","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\/ux-design-glossary-interface-navigation-elements-set-2\/","og_locale":"en_US","og_type":"article","og_title":"UX Design Glossary: Interface Navigation Elements","og_description":"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.","og_url":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-09-20T15:02:12+00:00","article_modified_time":"2023-08-14T18:32:36+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/","url":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/","name":"UX Design Glossary: Interface Navigation Elements","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg","datePublished":"2017-09-20T15:02:12+00:00","dateModified":"2023-08-14T18:32:36+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The second set of definitions and examples in UI\/UX Glossary devoted to the elements of interface navigation: read more about icons, tags and search field for web and mobile.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/09\/UI-navigation-design-elements.jpg","width":1280,"height":960,"caption":"UI navigation design elements"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/ux-design-glossary-interface-navigation-elements-set-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UX Design Glossary: Interface Navigation Elements. Set 2"}]},{"@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\/3543","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=3543"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3543\/revisions"}],"predecessor-version":[{"id":14582,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3543\/revisions\/14582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8871"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3543"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}