Learning Metro UI

Coming from a  background of a Windows desktop developer with experience in Winforms and WPF, the new design language of Metro which is core of Microsoft’s Windows 8 operating system is something completely new to me.

I am a personal fan of the minimalistic concept of using “content over chrome” and the clean fonts that is prevalent within the Windows 8 environment. I enlisted the help of Rob Fonseca-Ensor to guide me over some of the main concepts and to point me in the right direction on how to get more informed on this design concept. Rob has working experience with Silverlight, iOS and Windows 8 applications, author of  Beginning Windows Phone 7 Application Development and is also creator of the Windows phone application Bus Alert London.

One UI

“Touch first”

Desktop, web, tablet or mobile? Mouse or finger? How does one start designing for an interface that potentially could be used in various device forms? You should approach the design of the UI as touch first. You can do that by focusing on direct interactions and to use space as your ally

Direct interactions

“Try to remove the clutter of the concept of toolbars and menus”

By focusing on touch first you need to challenge the notion of UI controls that were always there. One of those key items in traditional Windows applications are the toolbars and menus. One of the most iconic menu is the “Start” menu in the Windows operating system, this is now gone in Windows 8. What you need to embrace is direct interaction; lose the file menu and make everything accessible.  Have people click, tap or drag the item directly to access/explore the app. Leveraging fonts and removing the chrome around the application can help people focus on what is important in the application.

Segoe over icons

“Typography determines hierarchy”

One key thing you see with the Metro design is the fact that menus and titles are essentially large text.  The font name used in Metro applications is Segoe WP, which is a special version of the Segoe font. Gone are the flashy borders around menu items that try to capture the user’s attention with heavily styled icons and colour. By using different font sizes you can emphasize titles, categories and headers as seen in the image below.

Glanceability

“Attracts and pulls you in. More time to live”

Tiles are interactive icons and are the main gateway to the application. Interactive icons are not a new concept. The “Recycling Bin” is a classic example of an icon that shows you information about an application. If the Recycling Bin is empty it show and empty waste basket and if there are items in the Recycling Bin then there is some scrunched up paper in the bin as the icon.

With the introduction of tiles, they are much larger and thus can hold more information. In the image below we can see an example of how information can be displayed in real time on the tiles also known as live tiles. For example the “Weather” app can show the icon as well as textual information to allow the user to get the information they need without having to enter the application itself. This is a change in the concept of an application where you have to enter and interact/use it. The interaction with an app now happens at an earlier stage and which gives you a good high level knowledge and the option to drill into the application to find out more information is available. With people on the go and mobile more often, the idea that information can be presented in a “dashboard” manner makes consuming data easier .

Final Words

With larger fonts and bigger tiles, one thing going on in my mind is the thought that with all of this minimalist design, is it too simple?  Rob responded “No, most Windows 8 apps are aimed at consumers, if your apps are too complicated then you need to rethink it”.  For anyone who wants to get a deeper understanding of the Metro design language the best advice is to read the UX guidelines and try creating a Metro app.

What song are you listening to at the moment?

My final question for Rob was what he was listening to at the moment and the artist on that he recommended was Sufjan Stevens.  In fact he recommended the whole album, Age of Adz, but if you don’t have time to check out the whole album a song to check out is “Vesuvius”

References

  1. Microsoft Windows 8 Complete Guide
  2. 5 Things you ought to know when designing metro screens
  3. Jeff Wilcox’s “Metro” design guide for developers, v1.00
  4. Designing UX for apps
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s