{"id":16301,"date":"2018-10-22T19:56:47","date_gmt":"2018-10-22T18:56:47","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=16301"},"modified":"2020-11-20T17:44:11","modified_gmt":"2020-11-20T17:44:11","slug":"3-creative-concepts-of-mobile-tab-bar-navigation","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/","title":{"rendered":"3 Creative Concepts of Mobile Tab Bar Navigation"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When it comes to selecting a pattern for the primary mobile navigation, product designers usually choose between two options \u2014<em> side drawer<\/em> (also known as a hamburger menu) and <em>tab bar<\/em>. Both navigation patterns have their pros and cons.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><\/p>\n<div id=\"attachment_6580\" style=\"width: 630px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1dqKkovjxi4IPxVJzdi8DFA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1dqKkovjxi4IPxVJzdi8DFA.png\" alt=\"\" width=\"620\" height=\"419\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Tab bar vs. Side drawer (hamburger menu). Image:\u00a0Google<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center>Since this article is about tab bar, let\u2019s start with its advantages over sider drawer:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Visibility of current user location.<\/em> No need to tap on a hamburger menu to find out where you are in the app. It\u2019s possible to get this information in a glance.<\/li>\n<li><em>Good discoverability<\/em>. Users see all top-level navigation options right from the start.<\/li>\n<li><em>Thumb-friendly. <\/em>Tab bar is located in easy to reach zone (bottom of the screen). Users don\u2019t need to stretch fingers to reach a particular option.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">But tab bar also has a few downsides:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Limited number of navigation options. <\/em>It\u2019s possible to place from five to seven navigation options in the tab bar without making the size of the touch target too tiny.<\/li>\n<li><em>Tab bar takes a part of the screen.<\/em> Since good navigation should be visible all the time, tab bar will take a part of the valuable screen space.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this article, you\u2019ll find three interesting concepts of tab bar navigation. I also provide links to the source code so you can use some of those concepts in your projects.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1. Nested navigation options<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As was mentioned above, one of the significant downsides of tab bar is a limited number of options. On mobile phones, it\u2019s possible to place a maximum seven top-level navigation options in a tab bar. While the limited number of navigation options won\u2019t be a problem for a vast majority of mobile apps, some apps might need to provide more options.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Below you can find a concept that tries to solve a problem of a limited number of options. When users tap on a folder icon, a few more options become visible in the same physical space. The size of a folder icon (the one that acts as a parent for other three option) implies that this object does more than other options for users.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pros: <\/strong>Provide more options in the same physical space.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Cons:<\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Animated effects might require extra development time.<\/li>\n<li>High interaction cost. Extra tap required to select a nested option.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1p0todCqWtsVwG8kOFCyPEA.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1p0todCqWtsVwG8kOFCyPEA.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/Hoanguyen\">Hoang\u00a0Nguyen<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2. Separating the active tab button from the tab\u00a0bar<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since tab bar usually has top-level navigation options, each option in a bar acts as an independent destination. The concept demonstrated below tries to separate the targets visually.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ketan (the author of this animation) provides the source code of this animated bar <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/github.com\/Mindinventory\/react-native-tabbar-interaction\">React Native Tabbar Interaction<\/a>. He also describes a process of creation of this bar in details in his article <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.mindinventory.com\/blog\/create-tabbar-plugin-with-react-native\/\">FAB Tabbar \u2014 Concept to Reality<\/a><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pros:<\/strong> Nice visual transition clearly distinguishes source and destination.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Cons:<\/strong> An animation feels a bit slow. This can be annoying especially when you have to constantly switch between the tabs to interact with an app.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/16bhHtndsImoe9yFfhvkL1w.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/16bhHtndsImoe9yFfhvkL1w.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/KetanRajput\">Ketan<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">3. Animated effects on\u00a0tap<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Creating good first impression is one of the most important goals mobile developers have today. Considering the fact that an average app <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/andrewchen.co\/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better\/\">loses 80% of their users<\/a> soon after the installation, creating a good impression is a chance to reduce this percentage.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One of the ways to achieve this goal is to create a memorable experience. When we interact with a digital product we don\u2019t remember the entire process of interaction, what we usually remember are specific details. This might be something as simple as a funny mascot, vibrant colors or fine animation. That\u2019s why many designers say over and over again that<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The details are not the details. They make the design.\" -Charles\u00a0Eames<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Smooth animated effects which are used in the following concept are able to create a truly memorable first-time experience. Ramotion (the author of this concept) provides <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/github.com\/Ramotion\/animated-tab-bar\">source code for this animation.<\/a><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pros:<\/strong> Animated effect helps to create a good first impression.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Cons:<\/strong> Animated effects can be annoying for regular users. Just imagine users who see such effects each time when they interact with an app.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1FVjvQgXpRlIBkcPLx9dGig.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/10\/1FVjvQgXpRlIBkcPLx9dGig.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image:<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/ramotion.com\"> Ramotion<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/?p=16301&amp;preview=true\">Nick's Medium page<\/a>.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/designing-iphone-x\/\" target=\"_blank\" rel=\"noopener noreferrer\">Designing for iPhone X<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/ooux\/\" target=\"_blank\" rel=\"noopener noreferrer\">Object-Oriented UX<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/psychology-principles-every-uiux-designer-needs-know\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Psychology Principles Every UI\/UX Designer Needs to Know<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/what-is-product-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">What is Product Design?<span class=\"A11yNotice-u1v0gg-0 dWDZbM\">(Opens in a new browser tab)<\/span><\/a><span class=\"LinkSuggestion__Badge-sc-1mdih4x-3 ibsFhU\" title=\"Post\">Post<\/span><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/using-ux-design-skills-one-product-needs-most%e2%80%8a-%e2%80%8ayourself-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using Your UX Design Skills on the One Product That Needs It Most\u200a\u2014\u200aYourself<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to selecting a pattern for the primary mobile navigation, product designers usually choose between two options \u2014 side drawer (also known as a hamburger menu) and tab bar. Both navigation patterns have their pros and cons. Since this article is about tab bar, let\u2019s start with its advantages over sider drawer: Visibility of current user location. No&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":165,"featured_media":16309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-16301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"When it comes to selecting a pattern for the primary mobile navigation, product designers usually choose between two options - side drawer and tab bar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Creative Concepts of Mobile Tab Bar Navigation | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"When it comes to selecting a pattern for the primary mobile navigation, product designers usually choose between two options - side drawer and tab bar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-22T18:56:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T17:44:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/10\/app-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/10\/app-design.png\",\"width\":\"1600\",\"height\":\"700\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/\",\"name\":\"3 Creative Concepts of Mobile Tab Bar Navigation | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#primaryimage\"},\"datePublished\":\"2018-10-22T18:56:47+00:00\",\"dateModified\":\"2020-11-20T17:44:11+00:00\",\"description\":\"When it comes to selecting a pattern for the primary mobile navigation, product designers usually choose between two options - side drawer and tab bar.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\"},\"headline\":\"3 Creative Concepts of Mobile Tab Bar Navigation\",\"datePublished\":\"2018-10-22T18:56:47+00:00\",\"dateModified\":\"2020-11-20T17:44:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/3-creative-concepts-of-mobile-tab-bar-navigation\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2b91d9b457afee054f90b68440ad9e23902300b23c8109206f0a7d32fe0fbea4?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"I\\u2019m a software developer, tech enthusiast and UI\/UX lover. http:\/\/babich.biz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/16301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/165"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=16301"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/16301\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/16309"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=16301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=16301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=16301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}