The Metro is coming. Windows 8 will be available for consumers on October 26, and the UI of the new Microsoft operating system is known as “Metro”. The Metro User Interface is arguably the greatest change in the history of the OS, and it is completely optimized for touch and mobile devices.
The web is also always looking for ways of improving itself, and web interaction designers are always looking for ways of improving the experience of the web for touch and mobile devices. So doesn’t it make sense to listen to people who have thought long and hard about this issue? Of course websites are not applications (although some wish to be), but still it could be worthwhile to look at some of the principles of Metro UI and think about what they could mean for the web.
But what is Metro? There are plugins and themes on the market that promise to “Metrofy” your website. There are also websites that show features of “Metro style”, like JanuaryCreative.com and MyKindOfPhone.com. Looking at these examples leads one to think that tiles are the essence of Metro. But although a tile-based interface is very tough-friendly, tiles are the building blocks of the Windows 8 operating system, not of Windows 8 applications. Win8 apps that are “Metro” make use of the Metro Design Language and of the elements of the Metro UI. The Metro Design Language is about visual design, and typography. it is very strict about fonts (Segoe), colors, and fontsizes, so using this Design Language for the web is only advisable when your website tries to sell Microsoft-associated products.
But the Metro style UI is a different story, because it consists of a set of (more or less) abstract principles. For example “Touch first”, which means that applications need to be optimized for interaction by touch, and “Content before Chrome”, which basically means that the design of an application needs to be stripped of everything that is not content. From the beginning of Windows up until Windows 7, the UI of the operating system is defined by scroll bars, frames, and close buttons. And many more buttons. The Metro now says that you have to lose all this, and that a “Content before Chrome” approach gives the user the most immersive experience.
But how do you navigate through your application / website without Chrome and only Content? Metro UI proposes two solutions with two navigation systems: the hierarchical navigation system and the flat navigation system. The hiearchical system consists of three types of pages: hub pages (which grants access to all types of content), section pages (which offers a collection of content items), and detail pages (the content itself, including text, images, video, etc.). There is also the “header” to indicate the current page, and the back button, which helps the user to navigate back up the content tree.
This should look very familiar for web designers. A website’s homepage is the hub, because it usually grants access to all kinds of content with a latest news overview, a list of upcoming events, and an overview of the most popular products, for example. Through these “widgets” the visitor is lead to the larger news overview page, the complete list of events, and the product list page. And through these to the news detail page, product detail page, etc.
The header and the back button are both incorporated in the breadcrumb, that helps the visitor to orient where he is now and where he has been. And also enables him to go back a step in the tree.
Thusfar it is really familiar, but another component of the hierarchical system is called “Semantic zoom“. This could be something to keep in mind for the web. Semantic zoom is not to be confused with optical zoom. On a section page, when there could be an enormous amount of content, it is often tedious to scroll through hundreds of products. Now, when the user zooms out from a section page, the list does not become smaller, but it transforms, in a logical manner. A collection of books for example, could transform into a collection of blocks that represent genres, while the genres that contain a larger amount of books, could be shown as larger blocks.
This is certainly more touch-friendly than an alphabetical list of items, which forces a user on a touch device to hit a small letter “i” in a list of letters.
There is also the flat navigation system. Flat navigation consists of the pages being horizontally organized, and allows the user to swipe back and forth between pages. This is used for applications with a limited amount of content, like documents, instant messengers, and also Internet Explorer 10 (as an application).
Flat navigation is less familiar but not completely unknown on the web. We have a lot of sliders. Sliders are used to browse through content in two directions: back and forth. Sliders are normally used for limited purposes, but there are websites that have incorporated the slider principle (effectively the flat navigation system) and based the whole (sub)site on it. The Dutch grocer Albert Heijn celebrated its 125 year existence, and incorporated this on the website.
The pages under “125jaar” are effectively very large sliders. It is could be seen here that flat navigation is convenient for showing content chronologically, as in a story. It lets the user browse back and forth through the content.
There is probably a lot more to say about Metro, but these are principles that could be kept in mind when designing the interaction for websites.