Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Best Practices of Metro UI Design

Tips on designing a Metro interface, made for my design course :)

Emma Pea

on 7 July 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Best Practices of Metro UI Design

Using low-chrome framing is key to minimizing chrome in your Metro design, so it’s important to
steer away from framing tools that add chrome (i.e. photographic realism)
. Many UI design styles favour high-chrome framing, often in an effort to create realism - for example, ribbon bars that show the reflection of each icon, or gradients that give buttons and bars a 3D, beveled look - but these are chrome-heavy. When you're working with Metro, it’s even good to minimize the prevalence of lines (rules), and other such visual devices that we typically think of as “frames.”

Instead, Metro emphasizes the use of
low-chrome framing tools
, notably
whitespace, shape, size, and colour
When we talk about “balancing text and image” in this module, we’re dealing with
the ratio of text to image
- how much of the screen space and what proportion of the viewer’s attention are occupied by text versus image? Calling up our core principle for Metro design, “content over chrome”, we want to
emphasize text and minimize the focus on visual elements
that may distract the viewer from the text. Metro still has great visual appeal; for example, Microsoft’s use of symmetry and asymmetry, colour, and framing in Windows 8 holds great appeal for some viewers. The Metro aesthetic is based on minimalism, founded on the principles discussed above, and a great thing about this is its enormous flexibility: Metro can be chic, professional, quirky, friendly - and best of all, the
minimalist aesthetic makes it easy to customize
interface design goes back about 50 years, but it has recently been in the spotlight thanks to Microsoft’s new Windows 8 operating system. The catchphrase of Metro is
“Content over Chrome”
: the idea is, essentially, that a digital design should focus on the core information, or content (typically the text), and minimize visual clutter, or chrome (graphic features that communicate subtle semiotic messages but allegedly distract from the content).

Note: a
is included at the end of the tutorial (slides 17-22; bottom right corner of this intro).
Touch navigation has several advantages. Most importantly for Metro design, touch navigation is visually simple and it is responsive (see Sowards, "Content Over Chrome"). When you navigate through touch, you
interact directly with the interface
- and it is responding to you.

Another advantage is that instead of having to move a cursor or a fingertip to the top left corner of a screen, you can perform a touch gesture on any part of the screen. This is handy with both the small screens on
tablets and smart phones
, and the larger screens of netbooks and flatscreens, although a keyboard shortcut helps if the device isn't touch screen (for a detailed explanation, look up
Fitt's Law

Claeys and Zheng discuss some key aspects of Windows 8's touch navigation. These are the three we feel are the most useful:

Edge-swipe for commands
- to access system commands, swipe in from the right edge of the screen.

Cross-slide to select objects
- slide your finger diagonally across the touch surface to select objects, such as files.

Pinch and stretch to zoom
- this will be familiar to many people from smart phones: pinch your fingers together across the screen to zoom in, and stretch them apart across the screen to zoom out.

It's fairly simple, really - three sentences on an instruction manual and you've got the basics!
Sources Cited

Claeys, Bart and Qixing Zheng. “Design Case Study: iPad to Metro Style App.” The Windows 8 Centre at sourceforge: App Experience. http://windows8center. sourceforge.net/design-case-study-ipad-to-metro-style-app/. Geeknet: July 31, 2012. Accessed January 26, 2013.

An in-depth analysis of an iPad app and how to redesign it as a Metro app. Claeys and Zheng give insightful but concise information on five topics: layout and navigation; commands and actions; contracts, i.e. links within the app and to other apps (search, share, and others); touch interaction; orientation and views; and notifications.

Sowards, Andy. "50+ Epic Metro Style Design." Andy Sowards. http://www.andysowards.com/blog/2012/50-epic-metro-style-design/ . Accessed January 26, 2013.

This article has many visual examples of different kinds of Metro interfaces.

Sowards, Andy. “Content Over Chrome: Metro Design." Andy Sowards. http://www.andysowards.com/blog/
2012/content-over-chrome-metro-design/ . Accessed January 26, 2013.

In this article, Sowards discusses Metro design as structured around the principle of typography, simplicity, and response.
Metro UI Design
Framing Tools that Minimize Chrome
Further Reading
Navigating Through Touch
Flattening Navigation Hierarchy
Best Practices of
Balancing Text and Image
An example of a navigation hierarchy would be the menus in old versions of Microsoft Word, or the navigation bar and pagination controls for iPad apps.
In a navigation hierarchy, you interact with an interface through a system of controls arranged in a hierarchy using chrome (such as tabs or bars that are permanently on screen).

Metro favours flattened (minimal or no) navigation hierarchy.
Claeys and Zheng write that, "Our first goal was to
remove all UI elements that were not directly relevant to the core functionality of the app
. For example, the top navigation bar, pagination controls, and the bottom control bar can all be removed." Basically, if you take away all of the tabs, menus, and icons we're used to seeing at the top of word processors, web browsers, and apps, you're removing a lot of images (and text) that don't relate directly to the content (you're taking out a lot of chrome). This helps balance text and image and, in typical Metro style, makes the design simpler overall (see Sowards, "Content Over Chrome").

So what does Metro use to move through an interface
instead of hierarchical navigation
? Contemporary Metro designs, such as Windows 8, use
touch interfaces
. We'll cover navigating through touch on the next slide. Right now, we'll go over tips on what should stay and what should go when you're flattening navigation hierarchy.
Other Useful Articles
Carlson, Caron. “Microsoft Office's touch-based, Metro-style makeover.” FierceCIO. http://www.fiercecio.com/story/microsoft-offices-touch-based-metro-style-makeover/2011-09-16 . FierceMarkets: September 16, 2011. Accessed January 25, 2013.

Carlson gives a brief analysis of then-possibilities for Metro, pointing out Microsoft’s plan to give users the option of classic style “Desktop” apps that "‘don't assume that users will want/need to rely on touch as the primary way that they interact with them’” (Mary Jo Foley 2011, in Carlson).

Keizer, Gregg. "Microsoft CEO hints at 'Metro-ization' of Office." Computerworld: Topics: Applications. http://www.computerworld.com/s/article/9220091 /Microsoft_CEO_hints_at_Metro_ization_of_Office . Computerworld Inc.: September 16, 2011. Accessed January 25, 2013.

Keizer highlights Microsoft’s reasons for switching to a Metro UI for Windows 8. He emphasizes the need for a UI that transfers easily between large and small devices, and enables small devices like tablets and mobile phones to run heavy-duty apps.

Perera, Gilberto. “Windows 8 Is Packed With Awesome Features.” About.com: Windows. http://windows.about.com/od/windowsosversions/ss/Windows-8-Is- Packed-With-Awesome-Features_all.htm . About.com: 2013. Accessed January 25, 2013.

Perera discusses five features of the Windows 8 Metro UI: an overview of Metro UI and how it relates to touch interaction, the connectedness of the Windows 8’s HTML5 apps, the improvements Windows 8 offers as compared to Windows 7, the decluttered Internet Explorer 10, and most importantly, Windows 8’s transferability between large and small devices, thanks to its Metro UI.

Sabnis, Mahesh. “Windows 8 Metro Style Business Apps in VS 2012.” dotnetcurry: DNC Magazine. http://www.dotnetcurry.com/ShowArticle.aspx?ID=837 . dotnetcurry.com: October 8, 2012. Accessed January 25, 2013.

The first three sections of the article (the introduction; “Developers and Metro Applications”; “A Glimpse of Metro”) are of interest for designers; the rest is written for programmers. In these three sections, Sabnis goes over the basic information about the history of the Metro UI design and sheds light on Metro as an interface made for users working on small devices, rather than programmers working on large desktops or notebooks.

Soluto. “What is the Metro User Interface?” Soluto. http://www.soluto.com/knowledge base/what-is-the-metro-user-interface . Soluto: 2013. Accessed January 25, 2013.

Soluto offers a brief overview of the history and benefits of Metro UI design. This article also highlights some of the more useful features of Metro design.
De-chrome your text:
avoid serif fonts
choose a
simple font that is easy to read
, such as Calibri
basically, your font should be low-chrome

Use images effectively:
reduce the number of images to what is crucial
to clearly and effectively communicate your message
you may not need to have what we typically consider to be "images" at all, and instead illustrate concepts using framing, as we've done in our calendar app.
if necessary,
reorganize your remaining images
to more clearly and effectively communicate your message, or replace the appropriate ones with an image or other design element that does the job better
reduce chrome in your remaining images
, unless you need to depict something literally (i.e. a photograph or screenshot). As well as choosing images that aim for visual simplicity over realism (for example, cartoon pictures instead of photos), reducing chrome in images includes deleting or reducing the number/salience of borders (see the next slide, "framing").
it may actually be easiest to design your own image and create it in an image editor, like Photoshop, as we did for this tutorial
Text is the “content” in “content over chrome," so it needs to be a)
easy to read
, and b)

main focus of the design
- other design elements such as images, colours, and shapes should help draw the viewer's eye to the text. To accomplish these two essential goals, you'll need to carefully plan how you design your text and how you use images.
Shape and Size
We're going to discuss whitespace through two
subcategories: proximity and alignment

and alignment are great framing tools for Metro design because they don't use chrome.

Here, we've used proximity as one framing tool for the "This week" app. The
live tiles
for each day of the week are very close together, emphasizing that they are related to each other. They are distinctly separated from the calendar grid to show that they are not as closely connected to it. Proximity
Things of the same shape or size are perceived to be closely related
; things of different shapes or sizes are perceived to be less closely related.
Live tiles
illustrate these concepts: they are all similar in shape (four-sided shapes with four 90˚ angles), and most of them are the same size. Their similar framing communicates their
functional relatedness
. Conversely, slight differences in size and shape illustrate
differences in importance
, and, potentially, in function; to use Windows 8 as an example, users can choose to make certain tiles extra wide. One reason you might want to do this is to make the larger tiles stand out (make them

more salient), likely
Most metro designs have a flat,
neutral background colour and bright, saturated hues for the foreground
. The contrast between the background (negative space) and the salient icons pulls the eye to the icons, which in turn frame the content.

Some metro designs favour a minimalist aesthetic with only a couple of colours (perhaps only one colour
for the foreground), whereas others use several foreground colours, often to help differentiate elements when there are many components to the app. Here, we've used teal as the main foreground colour, but in the calendar grid, official holidays are a darker shade of teal, and personal appointments are purple. The
font, like the background, is a neutral colour
(white) that contrasts with the foreground.

When developing a colour scheme, remember that
the more colours
involved, the more difficult it is to balance them
. Generally, the maximum recommended number of colours in a design is 5. A binary colour scheme is easy to balance; you can choose complementary colours (strong contrast, high salience). A triadic colour scheme will also balance well, and provides high contrast while remaining harmonious. Quadratic colour schemes are very rich, but are difficult to balance and harmonize.
works as a framing tool because
viewers perceive things that are close together as being more related to each other than things farther away from them, and vice versa
. Another way to put it is that things placed close together form a single visual unit.

Alignment also helps with framing. If our-days-of-the-week
live tiles weren't all aligned, it would be more difficult to see that they are related to each other. Similarly,
because the text "This week" is aligned with the tiles, you can see that they're related
, even though there is a wide space between the text and the tiles.
because you need to access those apps frequently (a manifestation of the 80/20 Rule). Framing through shape and size in this way communicates the importance of these apps to you.

We like tiles for Metro apps because they're touch-friendly (goodbye tiny buttons!) and practically chrome-free. By framing live tiles with colour, whitespace, shape and size, you eliminate the need for high-chrome framing such as borders and beveling. For example, our "This week" app is set up in live tiles, and therefore uses colour, whitespace, shape, and size for framing tools.
What should go: chrome - take out menus, control bars, and icons

What should stay: content
make “more content... accessible via the app’s hub screen, eliminating the need for navigation” (Claeys and Zheng)
in this app we put the "This week" app on the hub screen for the calendar app, rather than creating an icon to access it with. Similarly, to see the schedule for any one day, you can click on that day in "This week" or the calendar for the month, eliminating the need for icons or control bars to access the daily schedule.
80/20 rule - aka Pareto's Principle
The 80/20 rule states that in any large system, a high percentage of effects are caused by a low percentage of variables; in design, this translates to the fact that not all elements of your design will be used equally, so the most frequently used elements should be emphasized, for example by having their own icon on a ribbon bar.

content over chrome
The Metro principle that a digital design should focus on the core information, or content (typically the text), and minimize visual clutter, or chrome (graphic features that communicate subtle semiotic messages but distract from the content).

(design) element

Fitt's Law
Fitt's Law states that the time required to move to a target is a function of the target size and the distance to the target; therefore, the smaller and farther away an object is, the longer it takes to get to it.
Whitespace: Proximity and Alignment
Shape and Size
Other useful articles :D
See how it's done
See how it's done
See how it's done
The warmth or coolness of a colour; warm hues (yellow to red-violet) move objects into the foregournd; cool hues (violet to green-yellow) move objects into the background.

quadratic colour scheme
AKA tetradic; has four colours arranged in two pairs of complementary colours; richest colour scheme, but hard to harmonize.

saturated (saturation)

triadic colour scheme
Hgas three colours, evenly spaced around the colour wheel; gives high contrast while retaining harmony.
Grouping together elements within the "frame," and separating them from elements outside the frame. The thicker, bolder, and more graphically pronounced the frame, the stronger the connection/disconnection.

Elements that are algined (on a straight or a curved line of good continuation) are perceived to be more related than elements that are not aligned, and vice versa.

live tiles
Square tiles used in Metro design in place of high-chrome icons.

rules - lines.

Elements that are close together are perceived as being more related than elements that are further apart, and vice versa.
Metro design
A style of graphical user interface design that focuses on content (text) over chrome (visuals); contemporary versions may use touch so the user can interact directly with the interface.

navigation hierarchy
A way of navigating through an interface that is arranged in a hierarchy, partially hidden and accessed through chrome (i.e. drop-down menus, ribbon bars).

salience (salient)
Making something stand out visually through placement (foregrounding), eye contact/sight lines, unusual content (here not limited to text in the Metro sense; instead, refers by and large to visuals), or contrast (in colour, shape, size, tone, focus, or by using upper-case letters).
Miscellaneous: Metro - salience
Miscellaneous: 80/20 rule - Fitt's Law
Used to attract attention, group elements, indicate meaning, and enhance aesthetics.

analogous colours
Two colours adjacent on the colour wheel; emphasize harmony and downplay contrast.

colour scheme
The palette or the combination of colours used in a design.

complementary colours
Two colours opposite on the colour wheel; provide the strongest contrast.

A stark difference in colour (or another visual quality) between elements that clearly distinguishes the elements from each other.
Colour: colour - contrast
Colour: hue - triadic
Full transcript