Windows 8 is not just about the Operating system. More than the OS, there comes a new Design language or paradigm that needs to be adhered while building the new breed of Windows 8 Applications. Whether Microsoft calls it Metro design or Modern App Design, the name doesn’t matter. However, the design paradigm for a Windows Store App is very strong and defined in its own way. As a reminder, the Windows 8 Store Applications are not just meant for Desktops any longer; also suitable for other form factors like a Tablet or a Surface or new class of touch and type laptops. They also have a very high potential to be migrated/ported to the smaller form factors siblings like a Mobile phone. It is imperative that a developer should keep these important aspects in mind before could design and develop a Windows Store App.
In this write-up, we try to cover the features of Windows Store App as a compilation and provide an overview, more as a teaser so that developers are encouraged to deep dive with the links provided against each of these design elements. Before we get into the individual aspects, there are few basic underlying design principles based on which each one of these aspects are built upon
First and foremost, one striking similarities between all Windows Store app is the way UI for the application to look alike. We can take the cue from the way the start menu is organized. Look for the spacing on the sides. More space on the Left and ample space for the title and the main content is focused to the area where user has high visibility and focus. UI Layout style for windows store app has evolved from much Usability research and understanding patterns. Layouts are driven by the philosophy of “Showing pride in craftsmanship”.
The application supports different layouts like a landscape or portrait or snapped layout. A device can be rotated so that the view is changed from Landscpe to Portrait. The windows store application should support all these three layout models.
An application can be snapped to the Left (or right) side of the screen to enable multiple window view at the same time. The snapping enhances multi-tasking ability.
As mentioned earlier these application are tuned to be viewed across multiple form factors, so they need to be able to get resized according to the host screen size and also scalable to the pixel density offered. The images used in the application should be ensured to have good resolution when viewed in different formats or form factors.
All Windows Store Apps has one Window (Of course no chrome, no close buttons, title bars or neither status bar) and takes up maximum space possible on the screen. However, the single window supports multiple views. The Windows Store apps supports multiple layouts and views to create a ‘Fast and fluid’ harmonious user experience across different form factors and devices. The navigation from one view to another should happen with no distraction.
The navigation framework in the application supports going back and forward. Each view would have a View header, Back Button (if not the first page), and the content view. The content view can be a Hub page or Content details page. Windows App store supports multiple templates to fill content. Read more about the templates here.
Care about the Edges
The System has special meaning for each of the corners in the display. For example, when the user hover on Lower left corner it takes them to start or previous app and top right corner brings in the Charm bar. Application we design should keep these special corners in mind so that these corners are preserved only for the system usage and no meaningful content or event is overlapped.
Effective use of App Bars
App Bar is the primary command interface. In the App Bar, navigation, special commands and tools to the application is displayed, typically. While it is tempting to add too many buttons into the App Bars, it is the time to revisit the basic design principles of windows store apps: “Do more with less”. Unlike a Desktop application, design philosophy of Windows store app is to provide less number of buttons and focus more on the content itself. Having said, App Bars are optional interface touch points for the application which can be effective in providing needed functionality. Also the App Bars do not clutter the UI and is invoked, only when it is required, through swiping of finger from the top or bottom of the screen, Right mouse click also invokes the App Bar. App bars are not the place for doing commands or events related to Contracts (we’ll find details later in this article about contracts) as Charms are the perfect place for them.
Live Tiles update
Gone are the days of static Icons. Tiles represents the applications in the Start screen. They are not just picture in different sizes (two size: Square and wide), they can have live updates from the application. The application can have Tile updated in the start screen even if the application is running in the background. Live Tiles are very useful to indicate notifications to the User even without entering or starting the application.
Some of the very useful implementation of Live Tiles includes a Mail application that gives the subject preview and a news app giving latest headlines. The User can disable the live updates for a tile, as a preference.
The Notifications on the live tiles can be text, images or just an app logo or could be notification badge (like the number in the Store Tile above). The Notifications on the live tile can be cycling (System can handle up to 5 notifications). Developer could also build a Secondary Tiles and that can work independent of the main tile.
Windows 8 is all about Touch first interface and also animations that be both fast and fluid too. Touch interface brings in more ways in which user can interact with the application through gestures. One of the most touch-optimized feature is Semantic Zoom. It helps the user navigate large amount of content, through a pinch gesture, User can zoom-in and zoom-out of the content semantically. For instance, in the Zoomed-in can show the detailed contents and zoomed-out can show the overview categories.
Also, do not forget the good old Keyboard & Mouse, Windows 8 is still about desktop too. Applications should be able to still work in the same way where Touch is not available but mimic the events using Keyboard and mouse.
Event Model and App Life cycle
Windows run time or the system takes care of application life cycle management. So the User need not explicitly close or terminate the application. That also brings an interesting dimension to the application, always keep the state of the application saved internally. So that, when the application is moved from Suspended state back to active state, the User experience is improved with the state restored to the place it was before being suspended.
More about the guidelines on suspend and resume. When an application is started, instead of getting into the initial state, it is suggested to load from the state were the user has left, the previous time. This gives an impression to the end-user that, the application was always running in the backdrop. When the application loads, check for the saved application state and restore the state, wherever it could. Always handle the Suspend event to release heavy objects and resource handles and also use it to save the state of the application.
Apps needs to talks to the other Apps and also to the system. In order to make this experience better, Windows 8 application paradigm introduces ‘Contracts’, it is the glue that bonds app with Windows 8 and other apps. Contracts is like an agreement between one or more apps. Contracts define the requirements that apps must need to interact. When two application that has implemented the same contracts, they can communicate through the contracts. For instance, when App 1 wants to search the content from Application 2, App 1 uses the search contract exposed by App 2. Contracts are different than the Extensions. Typically, Extensions is more an agreement between an App and the Windows system or may be customized and extended for other applications to use it further.
Some of the Contracts that is commonly shared across applications are
Charms is the vertical bar that is invoked when the User hove on the Right Top Screen corner. Charm is the place where windows has hosted the popular contracts like Search, Share, Devices and Settings. The Contracts in the charm work in context of the application that’s loaded. When Application 1 is running the settings in the charm is in the context of the Application 1. Similarly, Search and Share are related to the App that’s running than the system itself.
In order to make a better App, the developer needs to expose right set of contracts (like Search, Share, Device, etc.). On the contrary, when search is not a key feature of the application, developer may refrain from adding the Search contract as part of the application. Because the implication is, when the other applications that intend to search ends up with a bad experience.
New devices and new horizons
While the applications work on the desktop, the Tablets and Mobile platform brings in other new opportunities to unleash. Mobility opens up new gadgets and techniques. While it comes to mobility, it is about building applications that can be used on the move not just for those devices which can be portable. In order to make that happen, the application could tap the potentials of devices and sensors that are available in Tablets:
Cameras, pictures/Music from external Storage devices
Proximity Sensors and Gestures
Geo Locations aware applications
Above all, when we target the application to work across desktops too, we need to have alternative approaches to make these applications work gracefully in the laptops and desktops that do not have these features.
Accessibility, Globalization and Localization
Invariably, any application that is targeted for global consumption, needs to focus on accessibility features like Screen reading, keyboard accessibility, and visual accessibility (making screen elements bigger). Globalization and Location, like any other application is important to make a wider appeal cross different users.
This write-up is more an overview and trying to provide a teaser on various aspects of the design philosophy that needs to be kept in mind while coming up with Windows Store App. Further deep dive into links provided against each aspects would prove to be beneficial. In addition, Learn to build Windows Store apps is a good place to grab more details on Windows Store App design and development.
Learn to build Windows Store apps