An Introduction to the Microsoft 'Modern UI' Design Philosophy

DevToolsGuy / Thursday, August 29, 2013

It has been a rather significant twelve months for Microsoft. Not only have they rolled out new versions of some of its biggest software lines (Windows 8, Windows Phone 8, Office 2013, Office 365), but they has also changed the way we view and interact with these products by implementing their new ‘Modern User Interface’ design philosophy across the board.

Formally known as ‘Metro’, the ‘Modern UI’ is the design language Microsoft now uses for its entire product range. More than just a simple interface guide, Microsoft is using the Modern UI as a whole new way of approaching how it designs software. Albert Shum, general manager of Windows Phone Brand and Design goes as far as to call it an ‘Ethos’. Steve Ballmer, Microsoft CEO, said "Metro will drive the new magic across all of our user experiences," during the 2012 Consumer Electronics Show in Las Vegas.

Originally created for the Windows Phone operating system, the Modern UI actually has roots going back as far as the Zune music player. The original design team cited inspiration from the design language found on the King County Metro Transit system used within the greater Seattle area, and these influences can clearly be seen today. Modern UI encourages a strong focus on typography (even stipulating its own font - Segoe UI designed by Steve Matteson at Agfa Montype) over images; and on text navigation over buttons.

Animation and transitions also play a large part in the function of Modern UI, as it is very much designed for Microsoft's self-professed ‘touch first’ future. A huge emphasis has been placed on how user interactions are communicated, which can most clearly be seen in the latest version of the Windows operating system and its radical rethinking of the Start menu.

The Future

It seems Microsoft has only just got started with Modern UI, and we are starting to see glimpses of the future. The impending release of Windows 8.1 shows how hard Microsoft is working to ensure Modern UI caters for a wide range of use cases, and how willing it is to listen to feedback from the community. Microsoft also recently offered a brief teaser of a Modern UI version of its all-powerful Office Suite. At the BUILD 2013 developer conference, Julie Larson-Green showed a quick glimpse of a new style PowerPoint app. This software is expected to hit shelves next year, and is sure to put the Modern UI in the hands of even more users.

Find Out More

Modern Design at Microsoft

http://www.microsoft.com/en-us/news/stories/design/

UX Guidelines for Windows Store Apps

http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

A Useful Blog Post on How the Design Came About

http://www.stephanemassey.com/metro-design-principles/