Layout

The first thing I noticed when playing with Windows 8 is the clean layout. Everything is composed by tiles that most of the time takes you to a detailed view of an item. These tiles are placed vertically but grouped horizontaly, so unlike an iPad app or a Website were most of the scrolling is vertical, on Windows 8 most of the scrolling is horizontal. For example here is a screenshot of the (all) Homework page of myHomework:

In iOS or Web these homework items would be placed one below the other where you would have to scroll down to see more. In Windows 8 once the tiles reach the bottom of the page the next tile is placed on the column to the right and whenever you need to see more you just scroll to the right.

But there are also some special occasions such as when you have some long text inside of a detailed view of an item or when you are in a snapped view (more about snapped views later) those usually scroll vertically.

Navigation

The second thing I noticed when playing with Windows 8 is the navigation. Instead of relying on a menu/tab bar, your most important items are somewhat already preloaded but grouped in different sections. For example here is the home screen of myHomework, or "hub" in Microsoft's verbiage.

Notice that we have 3 sections "Important", "Homework" and "Classes". In most cases these sections would be buttons in a menu/tab bar or links in a navigation bar. In Windows 8 we display that information already when the app is loaded.  However we cap the amount that is displayed so the user knows that there is more sections to see. For example when a student has a lot of homework we limit the homework section into 2 columns, but we add a load more tile that loads 2 more columns in that section.

Also notice that under "Homework >" and "Classes >"  there is a right arrow next to the word. This is a Windows 8 standard that indicates that there is a more detailed group view for that section, which you can see an example in the (all) Homework section picture under Layout up above.

Semantic Zoom

But what if there are multiple sections and a lot of tiles in one page? Scrolling all the way to the right to get to another section must be really annoying right?  Well, Microsoft's answer is Semantic Zoom. You can pinch out the main area and a grouping of all available sections appear. Once you touch on a tile you are automatically taken to that section. For example here is the (all) Homework page under semantic zoom.

Notice that we also add the count of how many items are under each section.  

Snapped View

Windows 8 allows you to "snap" an app to the side, which scales the app to somewhat of a mobile view. This allow users to have 2 apps side by side, in our case the user can have the list of homework due snapped to one side and be doing their homework or taking notes on the other. When in snapped view the layout changes to be vertical rather than horizontal, similar to an iPhone or Android app.

Since we built the app using HTML, CSS and JavaScript (WinJS) all we had to do to support snapped view was to use media queries. Similar to someone doing responsive UI on the web.

App Bar

Windows 8 also has an app bar, which is the place where you put most of your commands and actions relevant to the context of the current page or selection. The app bar is usually hidden, all the user has to do is swipe from the bottom and the app bar appears.

Data Entry

Data entry is pretty straight forward just like any platform, they provide some builtin controls that you can put it in a form. The question is where to put the form. Should we put it in it's own page? Should we put it in a light box that appears on the side or in the center? Should it be in a popover like some iPad apps? Microsoft's suggested approach is to put in it's own page, however I've seen some apps putting some small login forms in a centered light box.

We had some problems with optional date pickers. Right now they don't provide any date picker controls that are optional, you either have to write a custom one or change the UI to have an extra step to show the date picker, we chose the UI.

Search

Search is something that I find really neat in Windows 8. Instead of the app having its own search field that only works when the app is open, in Windows 8 search has it's own place and is available everywhere, even when the app is closed. All the user has to do is swipe from the right edge and a search button will appear which will allow the user to search any file, app or content within an app. Here is how search looks with myHomework.

Sharing

Sharing works similar to search, sharing is available everywhere. That way the developer doesn't have write its own sharing functionality to a social network, email or another app. All the user has to do is swipe from the right edge and a share button will appear which will allow the user to share using any installed app that supports sharing.

Conclusion

I personally believe that Windows 8 metro style is amazing! It's simple, clean, easy to understand and adapt. I'm really impressed by what Microsoft put together in this version of Windows. I especially love that we can easily build Windows 8 apps using web technologies. As a developer and designer for iOS and Web, developing and designing for Windows 8 was fast and fun! I hope other developers experience the same.

If you want more information about designing for Windows 8, they have a lot of documentation and examples available:

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

If you want more information about developing for Windows 8, their documentation and sample code is available at: