Introduction to Metro UI

Introduction to METRO UI

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

METRO UIwhat 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

METRO UIdesign 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

METRO UIdesign 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

METRO UIdesign 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

METRO UIdesign 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

METRO UIdesign 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

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

METRO UImetro uxmetro in practice what is metrodesign principles

METRO UImetro 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

METRO UImetro 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

METRO UImetro 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

METRO UImetro in practice what is metrodesign principles metro ux

METRO UImetro in practice what is metrodesign principles metro uxhttp://ux.artu.tv/?p=165

METRO UI

METRO UIstart 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 phones 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

METRO UIstart 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.

METRO UIsplash screen Keep it simple Emphasize your Brand Play with motions

METRO UIpivotDisplay 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

METRO UIpivot -2 -1 0 1 2

METRO UIpivot 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. Dont use controls that can pan or scroll inside a pivot control. Such as slider, toggles or map control.

METRO UIpanoramaPut 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.

METRO UIpanorama

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

METRO UIpanorama

METRO UIpivot 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

METRO UIsingle page

METRO UI The application bar provides a placeapp 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.

METRO UIapp 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.

METRO UIapp 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

METRO UICommon controls

METRO UITarget 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

Thank you! @Maria_Nas

http://blog.scoutzie.com	771
http://avangeline.lolnote.com	18
https://si0.twimg.com	5
http://www.linkedin.com	5
https://twimg0-a.akamaihd.net	4
https://twitter.com	4
http://campaign.magazine.tm	2
http://us-w1.rockmelt.com	2
http://translate.googleusercontent.com	1

Introduction to Metro UI

by Maria Nasioti on Feb 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 812

Statistics

Introduction to Metro UI Presentation Transcript