• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Navigation guidelines on Windows Modern UI
 

Navigation guidelines on Windows Modern UI

on

  • 2,799 views

My presentation about Navigation guidelines on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE

My presentation about Navigation guidelines on Windows Modern UI at WORLDWIDE HACKATHON FOR WINDOWS - ATHENS, GREECE

Statistics

Views

Total Views
2,799
Views on SlideShare
2,790
Embed Views
9

Actions

Likes
5
Downloads
53
Comments
0

2 Embeds 9

http://www.linkedin.com 8
http://www.pearltrees.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Navigation guidelines on Windows Modern UI Navigation guidelines on Windows Modern UI Presentation Transcript

  • NavigationNavigation guidelines on Windows Modern UI
  • Maria NasiotiUI Designer at BugSenseMicrosoft Trainer for Windows 8Expert Mobile Designer
  • Within Windows 8 apps,there are new gestures andnew navigation features.How can I organize the content in my app so users can move easilyfrom one page to another?What commands and other UI can I use to help users find their wayaround?
  • Hierarchical system An essence of the Hierarchical system is the separation of content into different sections and levels of detail.Flat system This pattern is best when the scenario involves fast switching between a small number of pages or tabs. Like games, browsers etc where the user moves between pages, tabs, or modes that all reside at the same hierarchical level.
  • Hierarchical systemAn essence of the Hierarchical system is the separation ofcontentinto different sections and levels of detail.
  • Hub pages
  • Hub pages are the users entry point to the app. Here content isdisplayed in a rich horizontally panning view allowing users to get aglimpse of whats new and available.The Hub consists of different categories of content.Hub should offer a lot of visual variety, engage users, and drawthem in to different parts of the app.
  • Section pages
  • Section pages
  • Section pages are the second level of an app. Here content can bedisplayed in any form that best represents the scenario and contentthe Section contains.
  • Detail pages
  • Detail pages are the third level of an app. Here the details ofindividual items are displayed
  • Hub pageSection pageDetail page
  • Flat systemThe essence of the Flat system is the separation of content intodifferent pages.
  • Top app bar
  • Switching
  • Top app barSwitching
  • Navigation AnatomyThe following show the anatomy navigating between sections inan app, between different levels in the hierarchy, and within asingle app page.
  • A. Header and Back button The header labels the current page and is useful for wayfinding. The back button makes it fast to get back to where you were.B. Content Section orCategories Content sections can be formatted to best display the functionality or items they promote.
  • C. Hub It gives the user a birds-eye view of everything available in the app.D. Semantic zoom Semantic zoom makes scanning and moving around a view fast and fluid, especially when the view is a long panning list.
  • Semantic view
  • E. Header menu, G. Home link The header menu is available from anywhere in the app, and allows users to quickly jump from one section of the app to another. The home link, located at the bottom of the header menu, is a quick way to get back to the root of the app.F. Top app bar The navigation bar contains transient access to navigation controls or to other areas of the app.
  • H. View/Sort/Filter These commands change the way in which content is displayed within a specific view. The best place for them to reside is in the app bar.I. Bottom app bar The bottom app bar contains transient access to commands relevant to a particular view.J. EdgeSwiping from the edge of the screen is what makes the app bars andcharms appear.
  • Navigating with the edge swipe Users can navigate within apps and throughout the system by swiping a finger or thumb from an edge.1. Swiping from the bottom or top edge of the screen reveals thenavigation and command app bars.2. Swiping from the right edge of the screen reveals the charmsthat expose system commands.3. Swiping from the left edge cycles through currently runningapps.4.Sliding from the top edge toward the bottom edge of the screencloses the current app.5. Sliding from the top edge down and to the left or right edgesnaps the current app to that side of the screen.
  • Linkshttp://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspxhttp://blendinsider.com/technical/ux-guidelines-for-metro-style-app-development-2011-10-21/http://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012
  • Thank you!Twitter: @maria_nasSlideshare: http://www.slideshare.net/mnasioti