Windows 8 Design Principles Simplified Part 3 - Fast and Fluid
Welcome to the 'Windows 8 design principles for dummies' series. One of the key reasons for apps being rejected or sent back for fixes is Design. This is a five part series where I will cover five key highlights for each design principle that aims at helping developers build a high quality app.
If you have had a chance to play with the Windows 8 devices in the market, you may have noticed that the user experience is Fast and Fluid. As you swipe across the touch screens on a Surface, laptop or desktop device, it is hard to miss the fluidity of the experience and elements flow in and out from the edges and glide across the screen.
This is part three of an ongoing series by Sonal Mane, a Microsoft Startup Technologist in Chicago. You can read parts one and two, which we published earlier in June: Part one -- Doing More with Less and Part Two -- Pride in Craftsmanship
Seamlessly blending into the content so users don’t think and just enjoy the experience. Designing for this requires three key areas that you will need to work on.
1. Continuity with motion = Animation
2. Design with ergonomics and touch in mind = Touch first experiences
3. Simplify the flow of users across devices and experiences
Let’s talk about each one of these areas briefly.
1. Continuity with motion
Animations are an integral part of the design language with Windows 8. They are used to bring the user interface to life, tie experiences together and tell a story. Scenario-based animations are easily available in the Windows 8 Animation Library. As you activate the keyboard, bring in the Charms bar, you will notice that elements come into view from where they ‘live’ on the system. This informs users where they reside and also communicates that they are easy to access when needed. The UI controls you used to build your UI and the Animation Library provide a set of pre-designed motions tailored for common Windows Store app scenarios. Each are purposely scenario-centric and designed to convey specific information.
2. Ergonomics and Touch
With the range of touch screens and tablets that are out there, you will need design with hands, fingers and ergonomics in mind. Try touching the UI or printing the UI to get a feel for how your users will interact with it. Try out your user scenarios with touch and interact with all elements on the screen. The Windows 8 simulator is a great tool to help simulate your app on a tablet like user experience. You can use
your mouse and keyboard to test your app without a touch device. Test by running the Windows 8 Simulator and it takes a few minutes to understand the commands.
With touch there are a few things that you will need to know,
* Because the finger is imprecise, provide instant visual feedback on touch down, commit on touch up.
* Actions should be reversible so users can safely explore
* Think beyond tap and take advantage of sliding interactions. Let things always directly follow your fingers
* Pan in 1 axis only. This allows for selection and provide a more stable rail.
3. Simplified flow
This means taking on the work so your users don’t have to waste time remembering and learning things. Allow users to establish settings and connections to improve their ongoing experiences. Use simple techniques to remember what users are doing and when they change views. Returning users can then pick up where they left off. Show errors inline. Yes, you no longer need to pop dialog boxes.
Being fast and fluid is more than just the look and feel. There are many decisions you can make in the design process to help create a simplified flow for users. These include offering the ability for your users to roam their settings, pick up on a task on a different device, save application state, suspend application state so when users return they can pick up where they left off.
To summarize, animations, touch-first experiences and a simplified user flow will ensure a fast and fluid experience for your users. Here’s a video which covers Windows 8 animations if you want to dive deeper. Photo credit for cover image via nmadi