Introduction to Metro UI and my Skype concept for Windows Phone 7. Event: WindowsPhone 7.5 Apps: 2-Day HACKATHON

1. Introduction to METRO UI

2. Who Am I? Maria Nasioti@Maria_Nas
UX Designer at BugSense
Expert Mobile App Designer
Wannabe Jedi

3. METRO UI
what is metro design principles metro ux metro in practice
Metro is a design It’s It’s about content
language modern, clean, fast and typography.
and in motion

4. METRO UI
design principles metro ux metro in practice what is metro
Feels Fast and Responsive
Focus on Primary Tasks
Do a Lot with Very Little
Fierce Reduction of Unnecessary Elements
Fierce Reduction is not only about making clean
Clean, light, fast Uis but also and first, about simplifying the
application flow

5. METRO UI
design principles metro ux metro in practice what is metro
Remove Visuals that are Not Content
Content is the UI - The star of the show is
information/content, not UI controls or interface.
Direct Interaction with the Content
Content, not chrome

6. METRO UI
design principles metro ux metro in practice what is metro
Type is Beautiful, Not Just Legible
Use typography in different sizes and different
weights to convey structured information. Offers
unique visual design possibilities
Typography

7. METRO UI
design principles metro ux metro in practice what is metro
Feels Responsive and Alive
Gives Context to Improve Usability
Transition Between UI is as Important as the Design
of the UI
Adds Dimension and Depth
Alive in motion

8. METRO UI
design principles metro ux metro in practice what is metro
Don’t Try to be What It’s NOT - Recreating objects
from the physical world in a digital screen.
Be Direct
users care more about being able to consume
information than having “representations of physical
Authentically Digital world objects” inside their phones

9. METRO UI
metro uxmetro in practice what is metrodesign principles
Focuses on the Helps organize
Personal, Relevant, individual and their information and
Connected tasks applications

10. METRO UI
metro uxmetro in practice what is metrodesign principles

11. METRO UI
metro uxmetro in practice what is metrodesign principles
Personal Relevant Connected
Personal Weather surfaced Weather updated based Connected Weather for
on the live tile in Star on your location your contacts

12. METRO UI
metro in practice what is metrodesign principles metro ux
Build delightful Play with colors and Use typography
experience
Minimum text size 13px
Be inspired by METRO but
look for balance between the ..delight the user Pay attention to
METRO principles and your ..personalize experience balance, weight and scale
own style

13. METRO UI
metro in practice what is metrodesign principles metro ux
Use motion to Use iconography Hardware
delight the user but
Hardware buttons
Remember that pacing is Gestures
important – the more you use Be consistent One hand usage
it, the less special it becomes Test icons with user Touch size and spacing

14. METRO UI
metro in practice what is metrodesign principles metro ux

15. METRO UI
metro in practice what is metrodesign principles metro ux
http://ux.artu.tv/?p=165

16. METRO UI

17. METRO UI
start tiles
A refresh design better than icons.
A tile is an easily recognizable visual shortcut
for an application or its content that users can
set in the phone's start screen.
Important!
Surface information relevant to the application
Multiple tile images should be visually
consistent with each other and have a
recognizable theme or style

18. METRO UI
start tiles
Try and be flat, not glossy.
Limit the use of words.
Keep it simple.
Do not use white as your background color.
Do not try an use rounded corners within your
backgrounds.
If you use multiple tile images, they should be
visually consistent with each other and have a
recognizable theme or style.

19. METRO UI
splash screen
Keep it simple
Emphasize your Brand
Play with motions

20. METRO UI
pivot
Display a set of things in different ways
The pivot control provides a
quick way to manage views or
pages. It can be used for filtering
large datasets, viewing multiple
data sets, or switching
application views or related
content.
The pivot control places them
horizontally next to each
other, and manages the left/right
navigation of the individual
pages

21. METRO UI
pivot
-2 -1 0 1 2

22. METRO UI
pivot
Important!
The pivot control should be used only
to display items or data of similar type.
Never place a pivot control inside of a
panorama control, or another pivot
control.
Pivot pages should not be used for
task flow.
Don't use controls that can pan or
scroll inside a pivot control. Such as
slider, toggles or map control.

23. METRO UI
panorama
Put multiple sources of info into one place
The panorama control displays a
view of items that can be panned
side-to-side. It is a full-screen
container and navigation model
for an application.

24. METRO UI
panorama

25. METRO UI
Important!
panorama
Use either a single color background or an image that
spans the entire panorama but be careful with image
because it's very common the image principle do not
match with the end
and it looks ugly.
Don't use controls
that can pan or scroll
inside a panorama
control.
Limit yourself to 5
sections if you use
the panorama control

26. METRO UI
panorama

27. METRO UI
panorama

28. METRO UI
pivot VS panorama
Pivot Panorama
Supports a larger number of
"items" because the layout is
simpler. Tends to create more visually
stunning experiences
Loading pivot item and
unloading pivot item events Background images of any size
make it easy to defer content automatically wrap property
creation
Horizontally oriented panorama
More efficient use of screen items allow variably sized
space content to flow smoothly
portrait and landscape

29. METRO UI
single page

30. METRO UI
single page

31. METRO UI
The application bar provides a place
app bar to promote the most common tasks
and views of the application. For less
common tasks, applications can
include a single menu launched from
the application bar. An Application
Menu is not required, but if you have
one it is associated with the
application bar.

32. METRO UI
app bar
The context menu offers an additional way for the
user to access specific tasks.
The context menu should be used to express
secondary or advanced actions to the user, never
primary tasks, and may have no more than five items.

33. METRO UI
app bar
The Application Bar always stays on the same edge of
the display as the hardware buttons.
Up to 4 icon buttons can be displayed in the App Bar
but you could display down to 0 (zero) buttons if
needed.
If you don’t have icon buttons to display it’s better to
switch to the Mini App Bar.
http://ux.artu.tv/?p=236

34. METRO UI
Common controls

35. METRO UI
Target size
recommended minimum touch
target
minimum touch target
Minimum visual size for touchable item
Minimum spacing between elements is 6px
Visual size is 60%-100% of the touch target siz

36. Thank you! @Maria_Nas