SlideShare a Scribd company logo
1 of 58
Download to read offline
How To Be A
Good Guide
Crafting Navigation
Experiences
What You’ll Learn Today
• Why does navigation matter
• How do we design for different environments
• What lies ahead? (the future of navigation)
What is a Navigation
Experience?
The Principles of Good
Navigation
Clear Visible Consistent
Hamburger
Source: demacmedia
Source: Anas KA
Source: codyhouse
● Hidden options
● Failing to indicate
current location
● Clash with platform
specifics (iOS and
Android)
● Save screen estate
Gestures
Source: Aaron Wade
Apple Mail
Gmail
● De-clutter UI
● Delightful details
● Hidden options
● Need to be learned
● Aren’t consistent
across apps yet
Tabs
Source: Ramotion
Source: Steven Hoober / Scott Hurff / Dmitry Kovalenko
Source: Optimalworkshop
● Visible
● Easily provides
user’s location
● Predictable for user
● Designed for
Thumbs
● Limited number of
options
● Different
requirements for bar
location for iOS and
Android
Source: howdesign
Source: designmodo
Source: designmodo
Source: Mike Alger
Source: Jonathan Ravasz
Source: Jonathan Ravasz
Source: Jonathan Ravasz
Source: Zach Kinstner
The Future of
Navigation in User
Interfaces
nick@babich.biz 101babich|
Nick Babich
Thank You!

More Related Content

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

State of responsive web design in 2019 and beyond
State of responsive web design in 2019 and beyondState of responsive web design in 2019 and beyond
State of responsive web design in 2019 and beyondKamil Biedrzycki
 
Android Design Patterns
Android Design PatternsAndroid Design Patterns
Android Design PatternsFernando Cejas
 
Making Cross-Platform apps with Xamarin
Making Cross-Platform apps with XamarinMaking Cross-Platform apps with Xamarin
Making Cross-Platform apps with XamarinDiogo Cardoso
 
Mobile frameworks and Titanium specifically
Mobile frameworks and Titanium specificallyMobile frameworks and Titanium specifically
Mobile frameworks and Titanium specificallyJan van den Berg
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth elementFernando Cejas
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejaswebcat
 
Google glass panel GDG Albuquerque Dev Fest, November 2013
Google glass panel GDG Albuquerque Dev Fest, November 2013Google glass panel GDG Albuquerque Dev Fest, November 2013
Google glass panel GDG Albuquerque Dev Fest, November 2013ghchinoy
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicKadhem Soltani
 
The Rise of Mobile for Nonprofit Communication & Fundraising
The Rise of Mobile for Nonprofit Communication & FundraisingThe Rise of Mobile for Nonprofit Communication & Fundraising
The Rise of Mobile for Nonprofit Communication & FundraisingJeffTe
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju JosephvodQA
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju JosephThoughtworks
 
BigDesign 2014 - What's Before Mobile First?
BigDesign 2014 - What's Before Mobile First?BigDesign 2014 - What's Before Mobile First?
BigDesign 2014 - What's Before Mobile First?Ken Tabor
 
What is user experience and why does it matter
What is user experience and why does it matterWhat is user experience and why does it matter
What is user experience and why does it matterSarah Horton
 
Become a mobile developer from scratch
Become a mobile developer from scratchBecome a mobile developer from scratch
Become a mobile developer from scratchRuben Goncalves
 
Beginners guide to creating mobile apps
Beginners guide to creating mobile appsBeginners guide to creating mobile apps
Beginners guide to creating mobile appsJames Quick
 
UX - Usability - The road to UX
UX - Usability - The road to UXUX - Usability - The road to UX
UX - Usability - The road to UXCtac Belgium
 

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

State of responsive web design in 2019 and beyond
State of responsive web design in 2019 and beyondState of responsive web design in 2019 and beyond
State of responsive web design in 2019 and beyond
 
Android Design Patterns
Android Design PatternsAndroid Design Patterns
Android Design Patterns
 
Making Cross-Platform apps with Xamarin
Making Cross-Platform apps with XamarinMaking Cross-Platform apps with Xamarin
Making Cross-Platform apps with Xamarin
 
Mobile frameworks and Titanium specifically
Mobile frameworks and Titanium specificallyMobile frameworks and Titanium specifically
Mobile frameworks and Titanium specifically
 
Uxperts mobi 2013 soa & challenges
Uxperts mobi 2013   soa & challengesUxperts mobi 2013   soa & challenges
Uxperts mobi 2013 soa & challenges
 
Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas
 
Google glass panel GDG Albuquerque Dev Fest, November 2013
Google glass panel GDG Albuquerque Dev Fest, November 2013Google glass panel GDG Albuquerque Dev Fest, November 2013
Google glass panel GDG Albuquerque Dev Fest, November 2013
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
The Rise of Mobile for Nonprofit Communication & Fundraising
The Rise of Mobile for Nonprofit Communication & FundraisingThe Rise of Mobile for Nonprofit Communication & Fundraising
The Rise of Mobile for Nonprofit Communication & Fundraising
 
Rwd Testing Baiju Joseph
Rwd Testing Baiju JosephRwd Testing Baiju Joseph
Rwd Testing Baiju Joseph
 
RWD Testing - Baiju Joseph
RWD Testing - Baiju JosephRWD Testing - Baiju Joseph
RWD Testing - Baiju Joseph
 
BigDesign 2014 - What's Before Mobile First?
BigDesign 2014 - What's Before Mobile First?BigDesign 2014 - What's Before Mobile First?
BigDesign 2014 - What's Before Mobile First?
 
What is user experience and why does it matter
What is user experience and why does it matterWhat is user experience and why does it matter
What is user experience and why does it matter
 
Become a mobile developer from scratch
Become a mobile developer from scratchBecome a mobile developer from scratch
Become a mobile developer from scratch
 
Beginners guide to creating mobile apps
Beginners guide to creating mobile appsBeginners guide to creating mobile apps
Beginners guide to creating mobile apps
 
UX - Usability - The road to UX
UX - Usability - The road to UXUX - Usability - The road to UX
UX - Usability - The road to UX
 

Recently uploaded

Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Recently uploaded (20)

Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

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

Editor's Notes

  1. Today I’m going to talk about the thing called navigation - it’s the main component that gets users to flow through an app.
  2. My presentation will cover following topics. It’s about great navigation for your products.
  3. So what’s exactly navigation experience?
  4. 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.
  5. The simplest and most intuitive way to get from point ‘A’ to point ‘B’ based on the purpose of the application.
  6. 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.
  7. 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.
  8. The first one navigation pattern which we consider is a hamburger menu or side drawer as Google Android developer call it.
  9. Tasty?
  10. 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.
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. Summarizing what has been said before we’ll have following pros and following cons.
  18. The next one navigation pattern we’ll overview is gestural navigation
  19. Gestures… Star Track. Well, actually gestures in context of touch devices. When Apple introduced the iPhone in 2007, multi-touch technology got mainstream attention
  20. Users learned that they could not only point and tap on the interface but also zoom, pinch and swipe it.
  21. 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.
  22. 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).
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.)
  30. 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.
  31. 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.
  32. 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)
  33. 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.
  34. Summarizing what just being said we have following pros and cons.
  35. 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
  36. 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.
  37. 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.
  38. 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.
  39. 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.
  40. 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.
  41. 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
  42. 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.
  43. 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.
  44. 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.
  45. 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:
  46. 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.
  47. Interacting with objects — when the user turns his/her attention to an interactive object the reticle should react accordingly.
  48. 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.
  49. 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.
  50. 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.
  51. 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.
  52. 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.
  53. 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.
  54. 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.
  55. 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!