Windows 8 and Metro UI!
Windows 8 and Metro UI!
Tablets and mobile computing have taken over the consumer marketplace, keeping pace with smart phones on the digital gadget “It List.” While iOS got an early jump on the market, Microsoft will be unveiling a competitive and anticipated answer in their next generation operating system; Windows 8.
Windows 8 incorporates the elegance of Metro as the first primarily touch interaction operating system aimed specifically to create a familiar and unified user experience across a wide selection of hardware devices ranging from smart phones and tablets to PCs.
There are several elements that make Windows 8 and apps a pleasant user experience, and a solid competitor for other tablet and mobile devices. First , and foremost is the simplistic elegance and comprehensive design framework of Metro. Metro sets the foundational guidelines , and gives a unified and familiar framework to organize and display content without chrome or extraneous visual detail. Great applications begin with these guiding the design principles for limiting distractions and giving users what they want most; your content.
Understand the Touch Language:
When considering the overall architecture in creating a Windows 8 app, the creative team needs to first consider how users interact with mobile devices and tablets in particular. Microsoft has created a unified touch language to aid in how users will expect to interact with an app through the established Windows 8 mental model. Windows 8’s touch based interactions are used throughout , and reinforce behavior that is familiar to the user. While a mouse and pen are precise, fingers are not, so Microsoft has developed these interactions following Metro design tenets to make apps intuitive and easy to use while adding in the precision of selecting features of the OS and within applications.
- Swipe and select,
- Tap and hold
- Pan to view
- Turn to rotate
- Pitching and stretching to browse through content using semantic zoom
- Swiping in from the edge for app commands and switching between programs
Also remember that most users are right-handed, and based on the physical dimensions of the tablet, will be more accustomed to holding the device in landscape position given the device’s oblong rectangular shape or resting the tablet flat on a surface.
The Anatomy of Windows 8 Canvas:
The canvas is where all the content is displayed. It is also where all primary user interactions and navigation should take place. However the majority of controls should go in the App bar if the main focus of the app is browsing content, such as a photo gallery, blog, news, or magazine app.
Hub Pages:
The Hub page is the main page the user will arrive on when starting your app. The Hub page is generally organized in landscape mode on a tablet , and Portrait mode on a Mobile phone. However, the user should be able to enjoy the app’s content in both portrait and landscape modes. The user should be able to swipe through content in a panoramic setting left to right or right to left depending on localization optimization. Content on the Hub page can be divided and organized into categories and sections by the use of tiles.
Within the hub page there are filters, pivots, sorts, and views which are the design language of how the user can alter the way they consume content within the app.
| Filter | Using criteria to remove or hide data or content | i.e. Viewing only photographs of just one city taken in France from a recent trip | ||
| Pivot | Using content to reorganize content | Organize photographs by city, tags, dates | ||
| Sort | Altering the order content is displayed | View photographs in descending order by date | ||
| View | Modifying the style or method of how content is displayed | Switching views of photographs from a group of tiles to viewing them on a map. | ||
Section pages:
These pages are the second level of a Windows 8 app. Content should be displayed in whichever form makes the most logical sense to the user following the Metro design guidelines. Section pages can be layered out in sections or in a panoramic view, and each section should have its own Detail page.
Detail pages:
Detail pages are the third level of an app. Content consists of the individual items in the hierarchy. Layout patterns can vary quite significantly based on the type of content. An example would be a photograph with some metadata or description. Detail pages can also have command functions such as purchasing the before referenced photo via an ‘Add to cart’ button.
App Bar:
The App bar is best utilized as a consistent place for command and functions for your app. It, however, can be used as a place to alter how the user views content in the app and should only manipulate content in the current view. It should not be used as a way to navigate between different sections of the app.
When deciding which commands the user will need to make the application an intuitive and pleasant user experience, consider how the user will physically hold the device. The user will find the app bar is very convenient and natural to operate commands with their thumbs. Buttons should be placed starting from the right and left edges moving inward towards the center. App commands such as adding and removing items should begin on the right side of the App bar. As contextual commands are added they should start on the right or left causing the standard set of commands to slide towards the center.
Charm Bar:
The charm bar is used to advocate app sharing, and easing the user interaction between common elements across apps such as settings, sharing content, and searching for content in a particular app as well as across apps through contracts. For example if your app is a photo album the user can manipulate the charm bar to share photos with friends on a popular social media website or application.
Contracts:
Contracts enable Windows 8 applications to work seamlessly together in an elegant way without the apps knowing anything about each other. Contract sharing is done through the operating system, and gives users of Windows 8 and more importantly your app a richer user experience.
An application can expose data to other apps through a contract, in loose terms as a mental model think of the Windows clipboard.
Snap bar:
Taking data sharing and contracts a step further is the snap-to function, a powerful advantage to the overall mobile user experience. Here the user can have two apps open , and display them simultaneously side by side on the canvas. Snap-to facilitates an easy and robust way to share, as well as comparing content between multiple apps with a simple swipe gesture. The design should take in account how the UI will look within the snap state and best accelerate common and desired user interactions to make the user’s experience richer.
The structure of Metro
Begin with thinking about your content , and the hierarchy of how this content is to be displayed. What is the most important action or actions your user will need to make to get the most out of your app and content.
Content over chrome:
Tiles:
Content is organized into sections of the grid called tiles. Tiles can be square and rectangular of various sizes following a ratio of 5px increments. Tiles exist at both the Operating System level and within various applications. Tiles represent the main navigation points throughout the User Experience, as well as an elegant and useful way to convey important content to the user.
Consideration should be taken of not making tiles smaller then 50px2 ; this allows the user a good touch point, given fingertip dimension of 6 – 9mm. As an example in this case, considering an 11pt font, there should be a comfortable amount of padding around the word/phrase to aid in the prevention of accidently click on an unintended button or link. Follow the rule of about 10-15px of padding around an 11pt font button or 5-10px around a 20pt font button.
A powerful feature of a tile is the concept of the live tile. Live tiles can be used to provide fresh and real time content to the user both at the Operating System and application level. Important information such as a stock quote, new photographs, social media status updates can be pushed to the user via the tile and provide an engaging call to action for the user to actively interact with your application on a frequent basis.
Typography:
The Metro design framework guides the designer/developers in organizing content in a grid system with clean, real or implied lines. The solid practice is to use typography to dictate hierarchy rather then lines and unnecessary chrome for example; gradients, hard lines, and borders. Font face is also an important characteristic in creating clean and legible copy for users to consume. Segoe UI is the main go to font for designing Metro applications. This font is used to titles and captions and to reinforce a clear hierarchy within the app. Microsoft suggests Cambria as a good legible Serif font for large block sections of text. When utilizing typography as the basis of content hierarchy consider this example.
Use Segoe UI 42pt font as an equivalent of a page title, think <h1> tags in HTML. Subtitles utilize a 20pt font; again visualize the <h2> tag and so on…
While the Metro guidelines suggest Segoe UI as a clean sans serif font for design the UX professional is free to use whichever font best follows the branding of their organization. Just keep in mind, using easily readable fonts that are ergonomically optimized to make reading text on a screen easy will help to prevent eye fatigue of the user.
Navigation:
The navigational language in which the user moves around the application throughout Windows 8 follows one of these methods.
Navigation Bar and Home Button:
Swipe in from top or bottom of tablet to reveal the Navigation and App bars. Depending on the structure of content and how the application will be used it can make sense to use a flat navigation structure, and just move through pages like using tabs. In this case building the navigation commands in the top Navigation Bar creates a steady navigation throughout the application as the Navigation Bar is always available. The designer and development team can set the bar so that it is always visible or starts out as visible to the user, who then can set the auto hide feature.
Header and Back Button:
The Header used as a pivot between content, such as a dropdown, is an elegant way to give the user an intuitive and well-designed way to navigate through content. The Header is available from anywhere within the application.
The Back button, which is placed to the left of the header, provides a convenient and consistent way to navigate back in history to previous pages.
Canvas Navigation:
Through the use of tiles, the user has an engaging way to explore content in a very straightforward manner. By tapping the tile in conjunction with motion and responsive design, the user is navigated into the corresponding content. Conversely, section titles can be used as navigation devices through content by utilizing font hierarchy. This design pattern avoids the need to have links and use tile space within content.
Semantic zoom:
Within a Hub or Section page, the user can navigate through content on the canvas by pinching or stretching. Sematic zoom facilitates scanning across content and fluidly zooming into the desired section very quickly using mobile touch mechanisms they already understand. The user is able to effortlessly scan through a long panoramic list of content.
Motion:
The final element in a great Windows 8 app design is the use of fluid motion and animations to give the app a unique personality. Creating slight and engaging animations when the user performs an action or navigates through content will provide a richer user experience.
[simple-social-share]
