How To Be A Good Guide: Crafting Navigation Experiences (Push Conference 2016)

Editor's Notes

• #2: Today I’m going to talk about the thing called navigation - it’s the main component that gets users to flow through an app.
• #3: My presentation will cover following topics. It’s about great navigation for your products.
• #4: So what’s exactly navigation experience?
• #5: When you use a product (a site or an app), you have a particular goal. Let’s imagine a situation when you plan a vacation trip and want to visit a beautiful city of Munich. Your goal will be - to find a proper flight. And whether you wants to find a flight to the Munich you would probably would like to see the city in a popular destinations or search for the flight using search form. You want to complete the action - purchase a ticket, and navigation is a vehicle that helps you do it.
• #6: The simplest and most intuitive way to get from point ‘A’ to point ‘B’ based on the purpose of the application.
• #7: When we speak about navigation, normally we’re focussing on usability - we try to remove friction by making our navigation: Clear. Your navigation should be simple and it’s function must be self-evident. It should speak the language of the user rather than using complex terms and form factors unfamiliar to your users. If things get too weird, or away from the standard, users may get lost and never meet their initial goals for visiting your site or launching your app. It doesn’t matter how good your app or site is if users can’t find their way around it. Visible. The point of navigation is to help users find what they’re looking for — without stress and without too much effort. Navigation should be intuitive and predictable. No explanation or learning curve should be required. Your user should know how to go from point A to point B based on their first glance. Consistency. The funny thing - during a lunch break I’ve accidentally mixed coffee and tea in the same cup. This made quite a mess. Still that drink was OK and I could even drink it, but I preferred not to. The same works for your navigation. You can choose which type of navigation system will work best for your app, but once you make a decision, stick with it. Core principles apply to all app navigations, no matter which of the following patterns that you choose.
• #8: And the last thing - navigation should accommodate the needs of majority group of your users, your target audience. And here navigation patterns come to the scene. They are a shortcut for good app usability: UI patterns do wonders for learnability, since there’s less your user has to figure out on your app. Enough words, let’s take look at a few executions for navigations with pros and cons in context of mobile apps.
• #9: The first one navigation pattern which we consider is a hamburger menu or side drawer as Google Android developer call it.
• #10: Tasty?
• #11: These 3 lines “≡” is called a “hamburger menu” for its resemblance to a hamburger, the top and bottom lines representing the bun and its middle line representing the hamburger filling.
• #12: Does anybody wonder why these three stacked lines are everywhere? Screen space is a precious commodity on mobile and the hamburger menu (or side drawer) is one of the most popular mobile navigation patterns that helps you save it. Since this form of navigation is convenient to design on mobile, we’ve been seeing little hamburgers all over the place. Here is hamburger Menu (Side Drawer Menu) of Evernote, Gmail, VLC Player and Yahoo! Weather apps
• #13: This type of navigation works absolutely the same for the web sites. It hints to users to click the three-lined icon. When clicked, this icon reveals the navigation menu full of options. As you see the major advantage on this slide - hamburger menu saves space on the screen where the content gets more room.
• #14: However, sometimes we try to solve an individual problems (like screen space), and forget to step back in order to see the complete picture. A lot of posts have been written about the hamburger menu, mostly by designers, arguing against it. In a nutshell, it’s not about the icon itself but rather about hiding the navigation behind an icon. This pattern has two major disadvantages: “What’s out of sight, is out of mind.” Putting all of your main content categories into a drawer menu may make it harder for users to discover your navigation options, which could hurt conversions. And if we speak about it in context of UX design - from a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take. Failing to indicate the current location is another important problem related to the hamburger menu. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate. The hamburger icon adds an extra action to your navigation when it should take one click to reach a particular destination/or indicate the current state, it will now take two.
• #15: It’s tempting to rely on menu controls in order to simplify mobile interface designs —especially on small screens. But hiding critical parts of an application behind these kinds of menus could negatively impact usage. While the hamburger menu looked “cleaner”, engagement is down. On this slide you can see an example of Zeebox app , the social network for TV. Experiments show that exposing menu options in a more visible way increases engagement, user satisfaction and even revenue. The root cause? When critical parts of an application are made more visible, usage of them increase.
• #16: Another moment to mention is a clash with platform specifics. The side menu has become fashionable on Android but on iPhone the hamburger menu simply cannot be implemented without clashing with the standard navigation patterns. The hamburger menu placement on the screen is the exact same as the default for the back button: the top left corner. When both icons are needed, you’ll either have to squeeze both of them in next to each other, or sacrifice some usability by deleting one.
• #17: This one is just for fun. Sometimes designers experiment with hamburger navigation and create a mystery meat navigation. This type of navigation that doesn’t make any sense to the user and such interfaces lack a user-centered design, because users might be confused by these navigation options.
• #18: Summarizing what has been said before we’ll have following pros and following cons.
• #19: The next one navigation pattern we’ll overview is gestural navigation
• #20: Gestures… Star Track. Well, actually gestures in context of touch devices. When Apple introduced the iPhone in 2007, multi-touch technology got mainstream attention
• #21: Users learned that they could not only point and tap on the interface but also zoom, pinch and swipe it.
• #22: Gestures immediately became popular among designers and there were many apps that were designed around experimenting with gesture controls. Let me show you this video. As you can gestures have two major advantages: Just like hamburger menu navigation, gestures seem sometimes tempting for designers looking to save some screen estate. The more an app/site relies on gesture controls, the less buttons on-screen, and thus more content. * Offering touch gestures to operate your app is a great way to make the experience fast, fluid and delightful.
• #23: However, gesture is a dangerous pattern. Why? The main problem with gestures - they are always hidden. People need to remember them. Just like in case of the hamburger menu: if you hide an option, less people will use it. Another serious problem with gestures - they need to be discovered and learned. The more you rely on gestures over visible buttons, the greater the possibility for confusion. Yes, app designers try to help users discover gestures by using: walkthrough coach marks interactive on boarding But they aren’t real solutions, there’re workarounds. Why? Because they don’t solve the main problem (the problem of hidden navigation).
• #26: Last moment I would like to mention - most gestures aren’t standard and consistent across apps yet. They are simply not obvious for users. Even a simple gesture like swiping over an email works differently in various mail apps. In Apple Mail client swipe to the right gesture stands for Unread action. But in Gmail app for iOS it stands for Archive. Because there is so much potential and room for interpretation, gestures can also be confusing, especially when users switch between devices with contrasting controls.
• #28: A recognized ‘standard’ of navigations, the tab bar nav gets the job done for most sites and apps. This type of navigation consists of a few options that take users to the main sections of the site/app.
• #29: The main benefit of this type of navigation is navigation elements are always visible. This menu the user understand the context and navigate directly to the screen associated with it in one tap.
• #30: Another benefit of this type of navigation - It works in the most obvious way for the user. This is an example of how instant navigation from Twitter app for iOS. The user understand the context and navigate to the screen associated with in one tap.
• #31: It has all profits of visible navigation. For example, for app that moved from a hamburger menu to a bottom tab bar resulted in increased sessions and users. Not only did engagement go up when they moved from a “hamburger” menu to a tab bar in their Android app, but several other important metrics (like daily active users) went up as well.
• #32: This moment is very beneficial for mobile users - tab bar located at the bottom of the screen works good for thumb zone. Considering mobile devices’ “Thumb Zones” the top area can also be seen as ergonomically challenging to smartphone users. Steven Hoober in his research on mobile devices usage, found that 49% of people rely on a one thumb to get things done on their phones. In figure, the diagram that appears on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen. Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device. Hand positions and grip should influence the placement of controls on a mobile design: It’s important to place top-level menu, frequently-used controls and common actions to the green zone of the screen, because they are comfortably reached with one-thumb interactions. The bigger the display is, the less easily-accessible zone is, the more necessary is the adaptation of design to improve the user experience. This slide demonstrates what is the easy-access zone for modern phones such as iPhone 6. The last picture shows that Twitter has a tab bar at the bottom which covers almost all navigation controls and it is easily reachable.
• #33: Probably the most common complaint I’ve heard about tab bar is, “Yeah, tab bars are fine if you have only 5 menu items, but it’s not realistic for apps with more navigation than that.” Yes, usually the number of tabs in Android and iOS versions are the same — a maximum of five. It’s totally possible to consolidate navigation. Prioritization does. You should take the most important elements of the navigation and converted them into a tab bar. (The other elements can be available through links in the content lower on the page.)
• #34: But what if you’ve reviewed your information architecture and you have a lot of main destinations. If you have an app with a lot of sections, a bottom bar will be a lot harder to implement For this case I can advice the same solution as Facebook did for their official app - split functional between 2 apps. Facebook have split their functions,simple apps, instead of one complex one. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu. To create a tab experience we need to simplify our app, simplify again, and then simplify a bit more.
• #35: Besides the limited number of options tab bar has another problem - different platform conventions. Different location and logic for the tab bar: On iOS it’s located at the bottom of the screen. For Android it’s located at the top of the screen.
• #36: Android has it’s own a truly persistent bottom control bar - it has home, back and the app list available all the time. It’s not good to place a tab bar at the bottom of the screen presumably because of the hardware tab bar. Maybe if Google moves away from hardware button, but until then it seems like a bad idea for obvious reasons (users might accidentally tap wrong option)
• #37: Different logic: On iOS, it’s common to use a bottom tab bar to switch between views in the app. iOS uses segmented controllers to change state within a view. But Android doesn't really have tabs on the top, but an Action Bar and that's more used to take actions, instead of navigate. The Tabs Android are used most of all within a view to change states.
• #38: Summarizing what just being said we have following pros and cons.
• #39: Let’s talk about modern trends in design. Smart watches. Smart Watch was designed to blur the boundaries between device and software. With a deeper focus on  interaction, motion and visual design. It lets users interact seamlessly with onscreen content
• #40: A major UX advantage for each interface to be navigable with one hand. Device itself was designed for quick interactions that make the most of the display and its position on the user’s wrist. Interactions with watch are measured in seconds, so your app must quickly provide the user with essential information: information is quick and easy to access and dismiss. The best apps support fast interactions and focus on the content that users care about the most.
• #41: When you design a navigation for the watch your goal is to make it as simple as possible By choosing an appropriate navigation scheme and displaying only the most important information. This makes it easier for users to find what they need.
• #42: As an example of navigation for Smart watch let’s take a closer look at Apple Watch Navigation Pattern. The concept of the navigation is minimalistic. A Watch app may include more than one screen. When this is the case, choose the navigation model that best meets your needs: page-based or hierarchical. You can’t use both models in one app. This slide represents a hierarchical navigation. It’s well suited for master-detail interfaces or for presenting a navigable list of options. When users tap an item in a hierarchy, a new screen appears that displays details about that item. Hierarchical navigation is well suited for master-detail interfaces or for presenting a navigable list of options. It can also make it easier to extend your app and add new content later.
• #43: A hierarchical style is best suited for more complex apps and resembles a lot of existing iPhone apps with the user having to make a series of choices until reaching the final screen. Two important moment should be mentioned here: It’s best to limit the number of elements stacked horizontally (side-by-side) to three at the most, in order to avoid hampering the tap-target of each element. A key difference between the mobile and wearable platforms, when it comes to master detail, is that on the latter you can very easily get lost when you have four or five screens to drill down into. So you shouldn’t enforce the same level of detail you have on your iOS version on the Apple Watch.
• #44: Page-based navigation is an alternate way to present a flat collection of information in which all items are peers. Users swipe horizontally to navigate from page to page, and dots indicate their place in the set of pages.
• #45: This navigation is best if the data between pages isn’t tied to data on other pages. Because navigating through a large number of pages can be time-consuming, limit the number of pages you include in your interface. Continuing from being focused on essential and contextual content
• #46: I don’t want provide pros and cons for navigation patterns for watches, instead I should say that designing and developing for Apple Watch is really about embracing minimalism. You can see Uber’s Apple Watch app on this slide and it’s a shining example of simple design. The watch version consists of one button that allows users to request a car, and then the app notifies them when the driver is arriving. It’s simple, but it still gets the job done. All users need to do is glance down at their wrists and click a single button. It helps user achieve their initial goal.
• #47: What is VR? VR is a audio-visual communication medium whose mission is to sell the idea of entering a computer-generated, three-dimensional environment where the experience is so immersive it tricks our brain into believing this virtual world is actually reality. You may remember VR: it was big in the 90’s, with all sorts of high-end, high-cost rigs under development that promised true immersion in virtual worlds. But with the tools getting more user-friendly and affordable, today VR is one of the most stimulating and exciting new fields to develop for. It gives creators the freedom to bring their ideas to life.
• #48: But developing for VR is not the same as building for desktop or mobile. Why? Historically digital interfaces, have been crafted to suit the hardware requirements of 2D screens. Designers have been fitting content and navigation inside the frames of displays, translating our real world experiences to icons and other UI elements. However, designing for VR should not mean just transferring 2D practices to 3D, but also improving this paradigm.
• #49: This means that we shouldn’t throw existing patterns and navigation schemes and start from the scratch. Instead we should use our existing experience and knowledge and makes them suitable for 3D space. If we want to create a new environment our first task as designers and developers is to set-up design. UX designer needs to think of the spatial layout and how it will fit the experience. Since the environment is rarely an open environment. It is usually cluttered. Navigating the user via a certain path in a cluttered environment can be difficult without using conventional wayfinding UI elements. In order to makes things clear let me give you examples from non-tracked VR such as Google Cardboard. For navigating in such VR you can show contextual reticle (visual aid to track targets) - the specific point where users gaze. Visual triggers should be used to catch users' attention and guide them to focus on what's important. These hints should be contextual, and help to orient in space by showing the centre of focus:
• #50: The reticle should be activated when the user looks at any place that is approachable. When doing so, the reticle should transform into a larger pointer, highlighting the selectable area with a circle projected over it from the user’s perspective.
• #51: Interacting with objects — when the user turns his/her attention to an interactive object the reticle should react accordingly.
• #52: If not all objects are interactive, users should be hinted which objects they can interact with. The contextual reticle can be a help in this case, but in some cases, in order to avoid confusion, the interactive objects should change, too. This could be a minor change in the shading of the object or even a subtle sound describing its behavior whilst looking at it (e.g. subtle click in case of light switches). Using these features in a controlled manner, as the building blocks when designing the virtual environment, will result in (natural) VR experiences guided by human intuition.
• #53: But still we have to answer on the question how users will interact with objects? One possible way is to develop new hand gestures for each new feature. This becomes complicated for the user, especially as each new gesture is more likely to interfere with the others. But as I said before, we should’t start from the scratch. And we can use existing navigation patterns, such as menus in VR. Projects like Hovercast VR Menu (called power at Your Fingertips) makes it possible for people to make all menu actions controlled by simple hand movements and reliable gestures. As you rotate your palm toward your eyes, the Hovercast menu fades into view. This has two major benefits:* The sense of immersion is never broken. Users no need to reach into “real space” for their mouse or keyboard.* The learning curve is reduced. The user can easily discover options and perform actions using the simple hover-and-select menu mechanics – no tutorial necessary.
• #54: Interfaces of the future will be rich with dimensions, and will be on devices with are available to take an advantage of these dimensions. As you just saw, virtual reality is emerging as a new medium with the potential of having as strong an impact as radio or television did in the past century.
• #55: We see interfaces of the future as holographic and semi-transparent displays, like this one in Iron Man. This interface is really great because they make something see more powerful and intelligent for storytelling in a film, besides being a nice eye-candy. But if you gonna use these in a real life you probably don’t want a lot of animated text and graps, and you want something clear and easy to use. Let’s focus on we really want to do. We have content, we have application to create and consume content, we want to create content and manage it.
• #56: Some may argue VR is a future, other say that VR and AR will follow separate paths and never come together, and the solution for how to enhance virtual reality experiences is in bringing some AR learnings into it. But the main idea is that technology must make people's life easier. It will be more about the design of the actions you can perform, and less about the actual environment. Focus hard on the tools themselves and make sure user experiences are natural and fun. People will be using VR for productivity and multi tasking (internet browsing, multiple applications, scheduling, notification). Less time and cognition spent navigating between contexts.
• #57: Consider, for example, Microsoft's design for HoloLens, where the user can choose to focus on the virtual world or on the real world. This technology can be used for education. It showing how medical students can study the human anatomy holographically, from organs to bones to fully formed person. Notice gesture-based navigation here.
• #58: However, it should follow a well-known UX principle: guidance and assistance. We can't expect people to know what to do and where to go, so assistance is key to help users get acquainted with the interface. To do this, we need to show visual clues and provide clear feedback after any interaction.
• #59: This upcoming phase will again require new design solutions, but for now we need to focus on creating firm foundations to build upon. That’s why I should say it again - we’re creating a next creative medium with an current medium. Don’t forget the main rule about navigation - You’re designing for your users. It doesn't matter what product you create - an app, a site, a VR environment - always think about your user persona, think about the goals they have when using your app, and design your navigation to help them meet those goals. The easier your product is for them to use, the more likely they’ll be to use it. Thank you!