The Digital Surface – Windows 8

Image

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.

Image
 Digital Authentic.

Image

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. 

Image
 Examples are Rock’n’Roll!

I feel one strong example of real world objects not working so well in applications are knobs. For some reason (especially music applications) designers insist on using the metaphor. Image

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.

Image

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.

Image
 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? 

Image
 We can’t afford a bad experience.

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.

Image
 Summary

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. 

Alex

About these ads
  1. May 20th, 2012
  2. June 13th, 2012

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: