With the launch of Windows 8 preview and working on Windows Phone 7 and Xbox, I have been spending a good part of my days working with Metro (Microsoft’s design language). I recently did a presentation at a local Melbourne user group about the subject and one part of the talk that seemed to gel with lots of people was the idea that we are designing UI for a digital surface. The idea that it’s pixels on the screen and nothing more, so why aren’t we playing to it’s abilities.
I have been watching lots of future UI videos lately and after a while you start to see patterns, these videos are not focusing on highly graphical UI but relying on the interactions, content and the technology behind it to make them look amazing.
As soon as we start realising that you don’t need to make the graphics in an app represent real world objects, we can really start to focus on making experiences that are completely inline with the way users are interacting with them. On a screen. Whether its touch, mouse/keyboard, voice, or full body gestures, we should be playing to the abilities of the device, instead of taking what we know from the real world, and trying to make it work on a digital platform.
This is a bit of a pet hate, controls like this work fantastic in the real world, they are compact and allow accurate control. But the idea just doesn’t translate as well on a screen. Even when a user can directly interact with the control through touch, what is the standard? Applications use up and down, left or right and even a circular motion to change the value. It always a bit of a guessing game and if you are using 10 different apps with knobs that are all different, it can get pretty frustrating.
Sticking with the metaphor, I designed up a quick concept of how to utilise direct manipulation and the digital platform to create a better experience.
This does a couple of things well, whilst retaining the fine control element of a real world knob, it also helps avoid screen occlusion by the hand a bit. Its not perfect, but its a start.
Moving past Skeuomorphism.
Metro design language moves past the need to complex graphics and gradients to achieve it’s goal, which is to complete tasks and deliver content to users in most cases. It takes a step back and focuses on what is the most important part of an application, the content!
This isn’t without its own set of problems though, the first being the lack of affordance, how do users know what they can press and interact with, when a button doesn’t always look like a button?
Through the use of animation and direct manipulation we are able to make experiences that feels alive and interactive. Allowing the user to feel connected to the content and in complete control will urge users to explore your application with confidence, and with that in mind, consistency becomes very important.
Making sure your user feels at home with your application is an easy task to achieve with Metro if you spend the time to understand the platform and guidelines. Making your content interactive and using common controls can go along way when you are not relying on graphical affordance within your app.
Another way Metro combats this, is by placing all action controls in a common place. The use of app bars and charms gives users a big head start when they are seeing an app for the first time. If an app follows the guidelines, users can be pretty sure that all the content is interactive (able to click through items to drill into more content ect.) and any actions that may be needed can be found in the same location as all the other apps they use day to day.
Metro is the base design language for Windows 8 and Windows Phone 7, so anyone who uses one of these devices should have a good feeling for it already and through consistency, should feel comfortable to jump right into your app and get things done.
What do you guys think?
Thanks for reading.