Johanna Rowe: A few tips about Microsoft PixelSense...

Our thanks again to Johanna Rowe, designer and Hardware Interaction Design and Development MVP, for sharing another guest blog post in French and English:

A few tips about Microsoft PixelSense – A process to create great applications for the Samsung SUR40.

Each time you want to create a PixelSense application, it's because this technology answers to a particular use you want to enable for you or your clients.

But why would you choose Samsung SUR40 with Microsoft PixelSense?

Firstly, the fact that it can be a table, allows you to create multiuser and collaborative experiences.

Secondly, when used horizontally, six people can use it simultaneously in a collaborative activity.

Because Microsoft PixelSense technology will allow you to recognize the position of the different people around the table (thanks to the finger’s detection of orientation of contacts) you'll be able to automatically orientate parts of the interface towards each user, (pictures, texts, diagrams, videos etc).
I worked on several applications for Samsung SUR40 with Microsoft PixelSense and before that, on Microsoft Surface (2008) and here's what I've learned.

 

Tip number 1: Use a darker background.
It is not a good idea to build an application with a white or other light color background because this is very tiring for the eyes.

 

Ophthalmologists agree that concentrating, at close quarters, to details on a big and highly contrasting screen content is very bad for eye fatigue and should be avoided.

The second point is that using background colors other than white helps to improve touch and contact detection. So, this gives two good reasons for adhering to tip number one.

 

Tip number 2: Each kind of interaction has a contact type.

When you create an interface, remember that people can have clothing with sleeves that can touch the surface. They can also be wearing long necklaces, bracelets, charms, watches etc. All these items can come into contact with the table and could create an error in detection and therefore manipulation.

If this occurs, the user experience can diminish. People will often not immediately recognize the reasons for the unintended behavior and will usually think one of two things:

Either: "this application is really no good"
Or, "what did I do wrong? I don't understand, (It's too complicated)."
Both of those reactions can inevitably lead people to stop using the application and getting annoyed.

Tip number two is to always "filter" your controls on fingers, if the action must be done only by the user's finger.

If an action is determinative and important don't hesitate to apply filtering on the finger and to add a timer bar with a sound so that the user will not affect the action by mistake.

Filter only on a tag, if it's only with a tag that you allow access to more information. For instance, if the application needs to use a menu but not very often you can take it out of the interface and use an object with a tag under it.

 

Tip number 3: A splash screen that's lively
“Lively” is one of the most used words at the moment by Microsoft to talk about interfaces.

This is a very important point for Windows Phone, Windows 8 and the Xbox interface.
Your application must also be "lively", and this applies even more for Microsoft PixelSense applications.

We are not talking about simply creating an app to read news or purchase a pair of shoes from an internet store. The Samsung SUR40 is above all aimed at creating far more immersive experiences than are possible on other devices.

Sometimes, a little animation at the beginning, where you can see the different components appearing, can really add a great "wow" effect.

But be careful if you put an animation on the application loading, it can be played in the background during the loading by the Surface Shell, in this case start the animation when your application is clearly visible on the table.

Immersion in your application is the key for ensuring great user experience so let your user dive into a lively application.

 

Tip number 4: Four corners to remember
A horizontal form factor doesn’t have the same ergonomic challenges you have when creating a single-user interface on a small screen (tablet, phone). One thing which is very important to remember is that people need to be able to easily get out of your application (even if you would prefer them to stay in indefinitely).

So, when your graphic designer is creating the visuals give him or her the size and the position of the four Access Points (which provide access to the Launcher). They must not put interactive elements too close to these corners.
 
This tip can be also reversed when you will only have one application and don't want the user to leave the application.

 

Tip number 5: A good design starts with a good "paper prototype"
1920x1080?
Above all, remember that as an interaction designer, the most important information you need to know is the physical size of the screen 34.87 in x 19.56 in (886 mm x 497 mm).

Remember also that the user’s fingers are not measured in pixels but in millimeters (or inches). When an interaction designer builds their full scale prototype, they create all the components with paper and measure in inch to test it in real conditions. Each interactive element of the interface must be at least 0.7 in x 0.7 in (18 mm x 18 mm) large so that the user can take it, tap on it and move it. The bigger your elements are, the lower the number of manipulation errors there will be. Also keep touch targets a minimum of 3 mm apart from one another. There's no need to create 40 inch "buttons", but remaining above 18 mm² should greatly reduce the number of manipulation errors. On the Samsung SUR40 display, 1 inch (25.4 millimeters) ≈ 55 px.

 

Tip number 6: Interact with objects
A touch interface is generally 2D, but why not add a little relief with physical objects? Tangible objects are a good solution to help create an application with a more value.

People like being able to touch and hold objects in their hands, it adds a little magic when you put an inert object on a surface and something appears. There are two important points to take into account here.

The first point is the possibility that an object can easily be stolen. Though this rarely happens, you may prefer inexpensive objects for applications used in public places so you can easily replace them if stolen.

The second point is to create objects at least 1 inch thickness so users can easily manipulate them.

 

Tip number 7: Love at first sight
When we create applications, we can have a bad habit of forgetting a few small details. For a Windows Phone or Windows 8 applications it might be a tile or the background for the Store.
The forgotten detail is generally part of the components we do at the end of the graphic design process.

For Microsoft PixelSense applications, the last thing teams do is often the "visual" for the Launcher seen in the Shell.

Even if this is always the first thing the user sees, it is almost invariably, the last thing we do. Tip number 7 is, remember what your users see first.

 

Tip number 8: Intuitive for the world?
An intuitive interface is an interface that enables you to do the task you are intended to do without worrying how you must do it. Visual and audio feedback cues are very useful in helping the user make the correct action and in indicating if they did it right or wrong.
When designing an application, remember that you are always creating it for someone else.  Remember that there are several levels of intuitivity (the degree to which something is perceived as easy to use or understand) and you must consequently design your application to be intuitive for some users but not for absolutely everyone.

The levels of intuitivity required must be in line with the population who will use a given application. For instance, a high level of intuitivity could be necessary in the case of an app that is intended to be displayed in a hotel lobby. A lower level of intuitivity will be required for a professional application on which trained people work or use often.

To conclude, it’s important to prepare and anticipate all aspects of your Microsoft PixelSense application to optimize the user experience.

Johanna Rowe
Hardware Interaction Design and Development MVP
www.johannarowe.com
Twitter: @johanna_rowe
Facebook page: Design in progress

Comments

• Anonymous
  March 27, 2013
  thanks for the consolidation of information

• Anonymous
  March 28, 2013
  Thanks for the practical tips! Immediately, I saw a place in my design where double taps should be replaced with a hold motion.  Would love to see more articles on PixelSense development!

• Anonymous
  April 29, 2013
  Great article. I would also advice developers on reading the Development Guide for Prevention of Long Term Image Retention after Johanna's great tips to choose the appropriate color combination: social.msdn.microsoft.com/.../85312f53-1696-46f4-b5c6-9eb209fad6ff

• Anonymous
  May 09, 2013
  @JoeProgram, my own experience on building PixelSense application based on proven rules and succesfull deployment. The last one, the Bank of new Zeland. sergecalderara.wordpress.com/.../tips-experience-from-the-field-on-designing-a-pixelsense-application

• Anonymous
  June 13, 2013
  Great tips Johanna!

• Anonymous
  November 15, 2013
  The comment has been removed