Content first, a Windows 8 philosophy for interaction design.

I recently attended a conference about the upcoming Windows 8 user interface from a UX perspective. The meeting held at the Microsoft’s headquarters is part of the company’s effort to accelerate application design for this new platform.
 
The talk by Lior Yair, a senior UX Designer inspired me to think that the new Windows 8 Metro (design language) is really about content first, traditional navigation and the application shell is now visually obsolete.
 
The concept and the philosophy for “content first” is not new when it comes to interface design but Microsoft really braved this idea forward and did a great job doing so. Content is now king when designing applications for the Metro UI; allowing people to interact directly with what they want to see helps design better experiences.
 
Here is an example:
RSS Reader app.  Before and After.  The area in green marks the content area.  In Windows 8 users will focus on content instead of trying to work around the navigation.
RSS Reader app. Before and After. The area in green marks the content area. In Windows 8 users will focus on content instead of trying to work around the navigation.
 
In the example above you can see the RSS Reader is stripped away from any navigational components and presented in a clean well structured environment relying on the actual content to also function as the main UI.
 
Additionally, the Windows Metro UI is specifically designed for Tablet and Personal Computers and offers advance thinking when it comes to these platforms. After seeing a demonstration of Windows 8, the iPad iOS feels now more than ever like an upgraded version of the iPhone iOS and not designed specifically for the larger screen. I say that with a great conviction because often I encounter UX blunders when using my iPad, for example the back button at the upper left corner is inconvenient to reach or even the simplest jump between two running applications takes extra clicks that the metro UI does not require. Furthermore, the new Windows UI offers a split screen view so you can run two applications at the same time with what they call “Snap View”.
 
Microsoft has created extensive documentation for developers and designers. I recommend reading more about this topic here: http://msdn.microsoft.com/en-us/library/windows/apps/

 

Designing Skype for Windows 8

I was motivated to investigate this topic even further, as a personal challenge I decided to brave and design Skype for Windows 8. I chose Skype because it’s a familiar program and hopefully people could relate to my design through their own experiences.
 
Login screen.  An opportunity to let the Skype brand shine
Login screen. An opportunity to let the Skype brand shine.
 
 
Sky for iPad.  The green marker shows the content area within the iPad user interface.
Skype for iPad. The green marker shows the content area within the iPad user interface.
 
 
The Home Screen.  Focusing on recent conversations and easy access to the Contact List.
My Design for the Home Screen. Focusing on recent conversations and easy access to the Contact List.
 
I felt that the content and substance of Skype is the Contact List. The people that you communicate with is the most important feature, and that’s why I created a home screen that allows you an easy overview of all your contacts and recent conversations.
 
 
Contact Page.  An overview of recent communications.
Contact Page. An overview of recent communications.
 
 
Call Screen.  Although the icons at the top right would be a perfect fit for the bottom App Bar I wanted to have a visual overview of the critical interactions on this page.
Call Screen. Although the icons at the top right would be a perfect fit for the bottom App Bar I wanted to have a visual overview of the critical interactions on this page.
 
 
Snap View allows you to surf the web while having a conversation.
Windows 8 Snap View allows you to surf the web while having a conversation.
 
 
In conclusion
If you plan to design applications for windows 8 I recommend considering the following points:

  • Content is king
  • Think minimalist. Less is more.
  • Metro is only framework and guidelines, it’s ok to think outside the box.
  • Negative space is positive. Spacing is your friend. Keep a consistent space between elements and always align.
  • Use typography to create structure and hierarchy
  • Present only relevant content for each screen.

 
Persisting with the Metro design language Microsoft has quite possibly created a revolution in interaction design and I definitely commend them for that.
 
You can read more about the Metro design principles here:
http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/
 
UX at Microsoft from a designer point of view:
http://ux.artu.tv/?page_id=190