Design Metro Style Apps – Day 1 of Build 2011
In this post let me write about some highlights about Metro UI that I saw in the Big Picture sessions of Day 1. (Update: You can watch the entire keynote here )
Microsoft has done a lot of user study to see the most ideal and convenient position on the screen where user’s thumb can reach and they are on the edges. As a result, it is good practice to put frequently used interaction surfaces near the edges.
When you are porting your existing Windows Apps UI to Metro, best is to start from scratch, when you can’t even simple things make a lot of improvement (like removing the lines and borders, more spaced out, large icons and so on). See the improvements made from the first image to the fourth image below:
Touch is direct, so performance issues are felt more directly and viscerally. Animations that appear when content is changing makes it a fluid experience. Metro Apps require assets in 3 sizes (100%, 140% and 180%) and better still you can provide them in vector formats (SVG) or CSS primitives or XAML.
Your content needs to adapt to multiple screen sizes and orientations:
Contracts are the glue that binds Metro style apps together and to the system UI. There are many contracts, but the three of the most fundamental is Share, Search and Picker.
There are many styles of Live Tiles. You can choose the one that suits your app. Live Tiles are updated using your “Local” logic, Scheduled or Push using Windows Push Notification Service (WNS)
In-box controls that ship in Windows 8 for Metro style apps are shown below:
Metro style apps when making calls to WinRT those calls go directly to Core OS or through a broker (only on select cases). All running Metro apps are suspended by the OS when the user switches away from it, this is done to preserve the battery live and give maximum performance to the foreground application. This means Apps get about 5 seconds to save their state before the OS puts them on Suspend. Apps when in Suspend are still in memory but no CPU cycles are spent and Windows kernel never schedules those threads. Apps are also terminated when there are low resources, in those cases Apps never notified at all.
Five main design principles of Metro style apps are
- Pride in craftsmanship
- Be fast and fluid
- Authentically digital
- Do more with less
- Win as one