{"id":25603,"date":"2016-02-09T21:01:34","date_gmt":"2016-02-09T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25603"},"modified":"2022-02-09T22:39:41","modified_gmt":"2022-02-09T14:39:41","slug":"utility-navigation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/","title":{"rendered":"Utility Navigation: How it Influences User Experience Design"},"content":{"rendered":"<p>To design an effective and user-friendly navigation, we don\u2019t only need to think about how to <strong>group our content into well-structured menus<\/strong> to enable users to easily find what they want, but also about how to <strong>design the tools they will need to interact with the site<\/strong><\/p>\n<p>Navigation that is not strictly related to the content, and helps users perform different actions is called <strong>utility navigation<\/strong>, and it\u2019s a less widely discussed but hugely important aspect of <a href=\"https:\/\/www.hongkiat.com\/blog\/web-design-to-experience-design\/\">user experience design<\/a>. Search bars, login and signup forms, subscribe, sharing and print buttons, shopping carts, contextual menus, and tools that allow users to switch languages or font size are typical examples of utility navigation.<\/p>\n<p>Designing them is not as easy as it seems at first sight, it <strong>requires consideration to find out what elements we need, where to place and how to display them<\/strong> to make sure that our visitors can quickly find them and understand how they work.<\/p>\n<h2>How Utility Navigation Impacts UX<\/h2>\n<p>When we design utility navigation we need to decide how we want our users to interact with our site. We need to provide them with an <strong>interaction structure<\/strong> that fits our business goals, leads users through the customer journey, gives them easy-to-understand options, and provides them with a pleasant user experience.<\/p>\n<p>First of all, <strong>they need to be able to quickly perform the actions they want<\/strong>. If we enable them to do so, <a href=\"https:\/\/study.com\/academy\/lesson\/what-is-customer-satisfaction-definition-examples-quiz.html\" target=\"_blank\" rel=\"noopener\">customer satisfaction<\/a> will grow, and pleased users tend to spend more time and more money on websites.<\/p>\n<p>The home page of <a href=\"https:\/\/www.airbnb.com\/\" target=\"_blank\" rel=\"noopener\">AirBnB<\/a> follows this UX principle, and its top menu only contains utility tools. It\u2019s not a usual solution, but if we take a look at AirBnB\u2019s incredible <a href=\"https:\/\/www.businessinsider.com\/airbnbs-summer-reach-has-grown-by-353-times-in-5-years-2015-9\" target=\"_blank\" rel=\"noopener\">growth rate<\/a>, it\u2019s the perfect choice for them.<\/p>\n<p>The 4 top menu items target the 4 main <a href=\"https:\/\/www.hongkiat.com\/blog\/creating-personas\/\" target=\"_blank\" rel=\"noopener\">personas<\/a> who usually visit AirBnB\u2019s site: people who are interested in becoming a host (\u201cBecome a Host\u201d), people who want to solve a problem that took place while they used the service (\u201cHelp\u201d), new and returning users (\u201cSign Up\u201d and \u201cLog In\u201d). AirBnB\u2019s utility-focused home page also contains a quick search bar that is a crucial tool on an accommodation renting website.<\/p>\n<figure><a href=\"https:\/\/www.airbnb.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg\" alt=\"AirBnB Utility Navigation\" width=\"700\" height=\"339\"><\/a><\/figure>\n<p>Secondly, <strong>users don\u2019t need superfluous utilities, as too much clutter distracts attention and reduces focus.<\/strong> What tools are necessary in our utility navigation and what are not depend on the nature of our site. For example it can be useful to include a Print view on a blog or a news site, but the same feature can be an unnecessary distraction on a forum board or a social media website.<\/p>\n<p><a href=\"https:\/\/www.washingtonpost.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Washington Post<\/a> for example displays  utility navigation on its single post pages differently from on the homepage. This way users only meet utility tools that are relevant, and are not pestered with options that they wouldn\u2019t want to use anyway.<\/p>\n<p>There are 3 utility navigation items that visitors may want to use site-wide. These are smartly included in the fixed top bar (search tool, \u201cSign In\u201d, and \u201cSubscribe\u201d), but users don\u2019t have to think about options related to single posts such as \u201cReading List\u201d when they are browsing the home page or one of the category pages.<\/p>\n<p class=\"note\"><strong>Read more: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/anticipatory-design\/\">Anticipatory Design \u2013 When Choice is Removed From Decision Making<\/a><\/p>\n<figure><a href=\"https:\/\/www.washingtonpost.com\/news\/capital-weather-gang\/wp\/2016\/01\/23\/blizzard-warning-updates-waking-up-to-thundersnow-as-white-stuff-piles-past-one-foot-and-counting\/\" target=\"_blank\" rel=\"noopener nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/washingtonpost-utility-nav.jpg\" alt=\"Washington Post Utility Navigation\" width=\"700\" height=\"358\"><\/a><\/figure>\n<p>Thirdly, <strong>users need to quickly understand what they can do on our site<\/strong>. Visitors don\u2019t necessarily know what they want, so we always need to provide them with information about the options they have.<\/p>\n<p>If you take a look at the screenshot below, you can see that <a href=\"https:\/\/www.nytimes.com\/\" target=\"_blank\" rel=\"noopener\">The New York Times<\/a> informs users about the availability of 3 different editions: <em>American<\/em>, <em>International<\/em>, and <em>Chinese<\/em>, and also enables them to <strong>quickly switch between the three<\/strong>. This great example of smart utility navigation shows users less-obvious options they probably wouldn\u2019t find on their own, in a non-obstrusive and elegant way.<\/p>\n<figure><a href=\"https:\/\/www.nytimes.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/nytimes-utility-nav.jpg\" alt=\"New York Times Utility Navigation\" width=\"700\" height=\"370\"><\/a><\/figure>\n<h2>Find The Best Place<\/h2>\n<p>There are typical placements for utility navigation where users intuitively look for these tools, as that\u2019s what they\u2019ve got used to on the majority of websites. <a href=\"https:\/\/www.nngroup.com\/articles\/breaking-web-conventions\/\" target=\"_blank\" rel=\"noopener\">Breaking web design conventions<\/a> is considered bad user experience practice, and it\u2019s especially true for utility navigation that, in most cases, is more about usability than creativity.<\/p>\n<p>As utility navigation is secondary to content-based navigation in most websites, it\u2019s frequently placed in less prominent but still visible areas. This usually means the (1) top-right corner of websites, and the (2) lower part of the footer. It\u2019s <strong>a good idea to follow these conventions<\/strong>, as <strong>these are the places where most users look for utility tools first<\/strong>.<\/p>\n<p>As you can see below, <a href=\"https:\/\/www.reuters.com\/\" target=\"_blank\" rel=\"noopener\">Reuters<\/a> has positioned most of its utility tools into these two typical areas, the top right corner of the site, and the lower part of the footer below the content-based navigation. The unique solution here is the fixed extra footer with 2 utility items that designers thought to be the most important: \u201cLogin or register\u201d and \u201cLatest from My Wire\u201d.<\/p>\n<p>It\u2019s interesting to note that the extra utility navigation area is still placed into a kind of footer where users would normally look for similar tools, so Reuters\u2019 designers were <strong>creative in a way<\/strong> but <strong>still followed web design conventions to maintain usability<\/strong>.<\/p>\n<figure><a href=\"https:\/\/www.reuters.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/reuters-utility-nav-1.jpg\" alt=\"Reuters Utility Navigation 1\" width=\"700\" height=\"349\"><\/a><\/figure>\n<figure><a href=\"https:\/\/www.reuters.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/reuters-utility-nav-2.jpg\" alt=\"Reuters Utility Navigation 2\" width=\"700\" height=\"349\"><\/a><\/figure>\n<h2>Build A Logical Structure<\/h2>\n<p>Grouping utility tools into a logical structure is crucial if we want to build a site with a high conversion rate. This can be a challenge even if we don\u2019t want to provide users with many options, but <a href=\"https:\/\/www.amazon.com\/\/\" target=\"_blank\" rel=\"noopener\">Amazon<\/a> takes the complexity of utility navigation to the next level. Amazon has an incredibly complicated utility navigation with many options, <strong>but if we use Amazon regularly enough, it doesn\u2019t appear so.<\/strong> This is the magic of smart design.<\/p>\n<p>They didn\u2019t only place utility navigation on the top-right corner where users expect to find it, but they also divided it into 3 main groups: (1) a search bar, (2) user-related information (below the search bar), and (3) actions that users can perform on the site.<\/p>\n<p>It\u2019s smart because, thanks to the visual cues such as the shopping cart or the search icon, customers can decide in the twinkling of an eye which group they want to use, and from then on they can ignore the other two. There\u2019s only one group (\u201cYour Account\u201d, \u201cTry Prime\u201d, \u201cBasket\u201d, and \u201cWish List\u201d) that has submenus that are also logically structured, and the different submenu groups are divided by discreet but visible separators to help users quickly find what they want.<\/p>\n<figure><a href=\"https:\/\/www.amazon.com\/\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/amazon-utility-nav.jpg\" alt=\"Amazon Utility Navigation\" width=\"700\" height=\"404\"><\/a><\/figure>\n<h2>Create An Effective Visual Design<\/h2>\n<p>The visual design of effective utility navigation needs to follow the famous <a href=\"https:\/\/people.apache.org\/~fhanik\/kiss.html\" target=\"_blank\" rel=\"noopener nofollow\">KISS<\/a> principle (Keep It Simple, Stupid). It\u2019s <a href=\"https:\/\/www.nngroup.com\/articles\/utility-navigation\/\" target=\"_blank\" rel=\"noopener\">recommended<\/a> to provide icons with text labels, make controls look like controls, and visually emphasize the most important actions. It can also be a good idea to distinguish utility and content-based navigation by using a slightly different design.<\/p>\n<p>Two great examples of effective visual design can be found on <a href=\"http:\/\/www.walmart.com\/\" target=\"_blank\" rel=\"noopener\">Walmart<\/a>\u2018s and <a href=\"https:\/\/www.etsy.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Etsy<\/a>\u2018s website. Designers placed utility navigation on the topmost of both sites, and highlighted it with colours that vary from the rest of the navigation, Walmart with a blue background, and Etsy with blue fonts.<\/p>\n<p>Both sites <strong>emphasize the most important user actions with different visual design elements<\/strong>, Walmart uses yellow for the Search and the Sign In buttons, while Etsy gives a discreet blue border to the Sign In button, and includes a gray shopping cart icon above the Cart menu.<\/p>\n<p>This is the only place where Etsy uses an icon in its utility menu, while Walmart displays an icon next to each item, but still doesn\u2019t forget to include the necessary text labels right next to the icons.<\/p>\n<figure><a href=\"http:\/\/www.walmart.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/walmart-utility-nav.jpg\" alt=\"Walmart Utility Navigation\" width=\"700\" height=\"358\"><\/a><\/figure>\n<figure><a href=\"https:\/\/www.etsy.com\/\" target=\"_blank\" rel=\"noopener nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/etsy-utility-nav.jpg\" alt=\"Etsy Utility Navigation\" width=\"700\" height=\"326\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>To design an effective and user-friendly navigation, we don\u2019t only need to think about how to group our content into well-structured menus to enable users to easily find what they want, but also about how to design the tools they will need to interact with the site Navigation that is not strictly related to the&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[3573],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Utility Navigation: How it Influences User Experience Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"To design an effective and user-friendly navigation, we don&#039;t only need to think about how to group our content into well-structured menus to enable users\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utility Navigation: How it Influences User Experience Design\" \/>\n<meta property=\"og:description\" content=\"To design an effective and user-friendly navigation, we don&#039;t only need to think about how to group our content into well-structured menus to enable users\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-09T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-09T14:39:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Utility Navigation: How it Influences User Experience Design\",\"datePublished\":\"2016-02-09T13:01:34+00:00\",\"dateModified\":\"2022-02-09T14:39:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/\"},\"wordCount\":1264,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-navigation\\\/airbnb-utility-nav.jpg\",\"keywords\":[\"user experience\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/\",\"name\":\"Utility Navigation: How it Influences User Experience Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-navigation\\\/airbnb-utility-nav.jpg\",\"datePublished\":\"2016-02-09T13:01:34+00:00\",\"dateModified\":\"2022-02-09T14:39:41+00:00\",\"description\":\"To design an effective and user-friendly navigation, we don't only need to think about how to group our content into well-structured menus to enable users\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-navigation\\\/airbnb-utility-nav.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/utility-navigation\\\/airbnb-utility-nav.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/utility-navigation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utility Navigation: How it Influences User Experience Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Utility Navigation: How it Influences User Experience Design - Hongkiat","description":"To design an effective and user-friendly navigation, we don't only need to think about how to group our content into well-structured menus to enable users","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:\/\/www.hongkiat.com\/blog\/utility-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Utility Navigation: How it Influences User Experience Design","og_description":"To design an effective and user-friendly navigation, we don't only need to think about how to group our content into well-structured menus to enable users","og_url":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-02-09T13:01:34+00:00","article_modified_time":"2022-02-09T14:39:41+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Utility Navigation: How it Influences User Experience Design","datePublished":"2016-02-09T13:01:34+00:00","dateModified":"2022-02-09T14:39:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/"},"wordCount":1264,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg","keywords":["user experience"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/","url":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/","name":"Utility Navigation: How it Influences User Experience Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg","datePublished":"2016-02-09T13:01:34+00:00","dateModified":"2022-02-09T14:39:41+00:00","description":"To design an effective and user-friendly navigation, we don't only need to think about how to group our content into well-structured menus to enable users","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/utility-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/utility-navigation\/airbnb-utility-nav.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/utility-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Utility Navigation: How it Influences User Experience Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6EX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25603"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25603\/revisions"}],"predecessor-version":[{"id":58853,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25603\/revisions\/58853"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25603"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}