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

1. Navigation
Navigation guidelines on Windows Modern UI

2. Maria Nasioti
UI Designer at BugSense
Microsoft Trainer for Windows 8
Expert Mobile Designer

3. Within Windows 8 apps,
there are new gestures and
new navigation features.
How can I organize the content in my app so users can move easily
from one page to another?
What commands and other UI can I use to help users find their way
around?

4. 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.

5. Hierarchical system
An essence of the Hierarchical system is the separation of
content
into different sections and levels of detail.

6. Hub pages

7. Hub pages are the user's entry point to the app. Here content is
displayed in a rich horizontally panning view allowing users to get a
glimpse of what's new and available.
The Hub consists of different categories of content.
Hub should offer a lot of visual variety, engage users, and draw
them in to different parts of the app.

8. Section pages

9. Section pages

10. Section pages are the second level of an app. Here content can be
displayed in any form that best represents the scenario and content
the Section contains.

11. Detail pages

12. Detail pages are the third level of an app. Here the details of
individual items are displayed

13. Hub page
Section page
Detail page

15. Flat system
The essence of the Flat system is the separation of content into
different pages.

16. Top app bar

17. Switching

18. Top app bar
Switching

19. Navigation Anatomy
The following show the anatomy navigating between sections in
an app, between different levels in the hierarchy, and within a
single app page.

21. 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 or
Categories
Content sections can be formatted to best
display the functionality or items they
promote.

22. C. Hub
It gives the user a bird's-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.

23. Semantic view

25. 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.

27. 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. Edge
Swiping from the edge of the screen is what makes the app bars and
charms appear.

30. 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 the
navigation and command app bars.
2. Swiping from the right edge of the screen reveals the charms
that expose system commands.
3. Swiping from the left edge cycles through currently running
apps.
4.Sliding from the top edge toward the bottom edge of the screen
closes the current app.
5. Sliding from the top edge down and to the left or right edge
snaps the current app to that side of the screen.

31. Links
http://msdn.microsoft.com/en-us/library/windows/apps/
hh779072.aspx
http://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

32. Thank you!
Twitter: @maria_nas
Slideshare: http://www.slideshare.net/mnasioti