March, 2013 - Microsoft PixelSense Blog - Site Home - MSDN Blogs
Blog Entries
  • Microsoft PixelSense Blog

    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"
    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
    Twitter: @johanna_rowe
    Facebook page: Design in progress

  • Microsoft PixelSense Blog

    Johanna Rowe: Astuces concernant 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:

    Astuces concernant Microsoft PixelSense - Comment créer des applications efficaces pour la table Samsung SUR40.

    Chaque fois que vous avez envie de créer une application PixelSense, voici comment tirer parti de cette technologie de façon optimale pour vous et vos clients.

    Cependant, pourquoi choisir la table Samsung SUR 40 avec Microsoft PixelSense ?
    D’une part, le fait qu’elle puisse être utilisée comme une table permet de créer des expériences collaboratives et multi-utilisateurs.

    D’autre part, quand elle est utilisée horizontalement, six personnes peuvent l'utiliser simultanément dans une activité collaborative.

    Le fait que la technologie Microsoft PixelSense permette de reconnaître la position des différentes personnes autour de la table (grâce à la détection de l’orientation des contacts), vous permet automatiquement d’orienter les éléments de l'interface face à chaque utilisateur (images, textes, vidéos, etc.).
    J'ai travaillé sur plusieurs applications pour la table Samsung SUR40 et aussi son prédécesseur (Microsoft Surface) et voici un retour d’expérience sur ces supports.

    Astuce numéro 1 : Utiliser un fond foncé

    Évitez de créer des applications en utilisant un fond de couleur clair ou lumineux, car l'expérience montre que c’est très fatigant pour les yeux.


    Des ophtalmologues s'accordent à dire que le fait de se concentrer de près sur des détails sur un grand écran très lumineux est mauvais pour les yeux et doit être évité.

    D'autre part, l'utilisation d’une couleur de fond, autre que blanc, permet d'améliorer la détection des contacts sur la surface, une raison supplémentaire d’adopter l’astuce numéro 1.


    Astuce numéro 2 : A chaque type d’interaction son type de contact

    En créant une interface, rappelez-vous que les utilisateurs peuvent porter des vêtements avec des manches longues.
    Ils portent aussi des bijoux comme des pendentifs, des bracelets, des montres, etc.
    Tous ces objets peuvent facilement toucher la surface et ainsi créer des erreurs de détection et donc de manipulation.

    Si cela arrive, les utilisateurs ne se rendent pas compte immédiatement de l'origine du comportement inattendu. Ainsi, leur réaction va généralement être l'une des deux suivantes.

    Soit : « Cette application ne marche pas bien »

    Soit : « Qu'ai-je fait de mal, je ne comprends pas, (c'est trop compliqué). »

    Peu importe la raison, cela va agacer l'utilisateur qui va souvent abandonner son utilisation de l'application.

    L’astuce numéro deux est donc de toujours "filtrer" vos contrôles sur le contact du doigt, si l'action doit être accomplie uniquement avec le doigt de l'utilisateur par exemple.

    Si une action est critique, n'hésitez pas à appliquer un filtrage sur le contact du doigt et à ajouter un minuteur visuel, associé à une alerte sonore, pour éviter que l'utilisateur ne fasse l'action sans s’en rendre compte.

    Action de Base : un contact unique / Action Importante : Bouton "Secours" : Zone de contact avec maintien long, pour les cas où aucune erreur de détection n'est pas tolérable.

    Pour certains types d’action ou d’information vous pouvez utiliser un filtrage par tag (ci-dessous).

    Par exemple, si l'application nécessite un accès peu fréquent à un menu spécifique, l'utilisation d'objets avec un tag est idéale. 

    Le menu critique apparaît uniquement quand un objet spécifique (avec un Tag) est posé sur la Samsung SUR40


    Astuce numéro 3 : Un écran d'accueil « vivant »

    C’est un détail très important pour Windows Phone, Windows 8 et l'interface Xbox, c’est donc aussi un détail important pour les applications Microsoft PixelSense, votre application doit être « vivante ».

    Nous ne parlons pas ici d'applications simples pour faire des achats dans un magasin en ligne, ou de lire le journal. En effet, la table Samsung SUR40 vise surtout des expériences utilisateurs beaucoup plus "immersives" que celles qui sont envisageables avec les autres supports.

    Parfois, un peu d'animation au début de l’application faisant apparaître progressivement les divers éléments, peut ajouter un excellent effet "Wow". Mais faites attention si vous mettez une animation au chargement de l’application, celle-ci peut se jouer en arrière-plan pendant le chargement par le Shell Surface, dans ce cas lancez l’animation au moment où votre application est bien visible sur la table.

    Une profonde immersion dans votre application est la clef pour assurer à l'utilisateur une expérience enrichissante, donc aider le à plonger dans une application « vivante » et non trop statique.


    Astuce numéro 4 : N'oubliez pas les quatre coins

    Un grand format horizontal n'a pas les mêmes contraintes ergonomiques qu'un petit, écran mono-utilisateur comme une tablette ou un téléphone.
    Par exemple, rappelez-vous que vos utilisateurs doivent pouvoir sortir rapidement et très facilement de votre application, (même si vous aimeriez qu'ils y restent indéfiniment).

    Ainsi, assurez-vous que votre graphiste connaisse bien la taille et la position des quatre boutons de retour vers le Shell Surface situés dans les coins de l’écran et qui  permettent de retourner au lanceur d’applications. Cela évitera qu'il ne place d'autres objets interactifs trop près.
    Par contre, si vous êtes en mode « application unique » sur la table, vous pouvez ne pas tenir compte de cette astuce.


    Astuce numéro 5 : Une bonne conception commence par un bon prototype papier
    1920x1080 ?

    Avant tout, rappelez-vous qu'en qualité de designer d’interaction, l'information la plus importante est de connaître avec précision la taille physique exacte de l'écran 886 mm x 497 mm.

    Rappelez-vous aussi que les doigts des utilisateurs ne sont pas mesurés en pixels mais en Millimètres. Quand un designer d’interactions construit son prototype à échelle 1, il fabrique chaque élément en papier afin de tester l’utilisabilité.
    Chaque élément doit donc mesurer au moins 18mm x 18mm, afin que l'utilisateur puisse facilement les prendre, les toucher ou les bouger. Plus les dimensions utilisées pour les objets sont grandes,  plus faible sera le nombre d'erreurs de manipulation.  S’assurer que les éléments sont séparés par au moins 3mm va encore réduire ces erreurs.
    Bien sûr, nous n'avons pas besoin de faire des "boutons" de 50cm, mais rappelez-vous de ne jamais descendre en dessous de 18mm de côté.
    Sur la table Samsung SUR40, 1px = 0.46mm et donc 18 mm ~ 39 px.


    Astuce numéro 6 : Interagir avec des objets

    Une interface tactile de ce type est généralement en 2 dimensions, mais pourquoi ne pas ajouter un peu de relief avec de vrais objets physiques ?
    Des objets physiques sont une excellente solution pour aider à créer une application avec plus de valeur et d'impact.
    Les utilisateurs aiment pouvoir toucher et prendre des objets dans leurs mains, et cela ajoute un peu de magie quand, le fait de poser un objet inanimé sur la surface fait apparaître quelque chose.

    Par contre de tels objets peuvent être facilement perdus, endommagés ou même volés. Si votre application est prévue pour un lieu public, prévoir donc des objets de faible valeur, qui peuvent être facilement remplacés.

    Le second point important est d'utiliser exclusivement des objets assez grands afin qu’ils soient facilement manipulés (2 - 3cm de côté).


    Astuce numéro 7 : Coup de foudre

    En créant des applications, il est très courant d'oublier certains petits détails importants.
    Par exemple, pour une application Windows Phone ou Windows 8, ceci pourrait être l'oubli d'une "Tile" ou même le fond d'écran pour le "Store".
    Ces détails oubliés sont pratiquement toujours des éléments que nous avons laissés pour la fin du travail de conception.

    Pour des applications Microsoft PixelSense, la dernière action des équipes est très souvent la conception du visuel pour le lanceur d'application.
    C’est étonnant et malgré le fait que cela est invariablement la première chose que l'utilisateur voit, c'est souvent la dernière chose que nous faisons.
    L’astuce numéro 7 est donc de penser à ce que l'utilisateur voit en premier et de vous en occuper en conséquence, car la première impression est toujours la plus importante.


    Astuce numéro 8 : Intuitive pour tout le monde.

    Une in-terface intuitive doit vous permettre de faire une tâche que vous avez besoin d'accomplir, sans réfléchir à comment vous allez la faire.
    Au départ, il faut toujours se rappeler que vous êtes en train de concevoir une application pour quelqu'un d'autre que vous-même.
    Rappelez-vous qu’il y a plusieurs niveaux d’intuitivité (le degré de perception qu’un utilisateur a pour comprendre et utiliser l’application) et vous devez par conséquent concevoir votre application pour être intuitive pour vos utilisateurs et non pour le monde entier.

    Le niveau d'intuitivité doit donc être parfaitement en phase avec la population qui va être amenée à utiliser une application donnée.
    Un niveau élevé d'intuitivité sera essentiel pour une application en libre-service, installée par exemple dans un hall d'hôtel ou dans un aéroport.
    Par contre, pour une application professionnelle, utilisée exclusivement par des spécialistes, le niveau d'intuitivité peut être nettement plus faible car c’est un outil qu’ils utiliseront au quotidien.

    En conclusion, il est important de préparer et d’anticiper tous les aspects de votre application Microsoft PixelSense pour optimiser l’expérience utilisateur.

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

  • Microsoft PixelSense Blog

    Property Sense for the SUR40 makes debut in the United Kingdom


    Microsoft PixelSense Development Partner, Solatys, introduces Property Sense, an application that provides a unique approach to property searching for customers visiting real estate agencies. This new app for the Samsung SUR40 with Microsoft PixelSense enables more informed buyers and more property viewings, creating a dynamic and engaging experience.

    “The immediate reaction we’ve got at the moment is ‘wow’! This is a very unique and different way of engaging with a prospective customer,” says Colin Siggs, Director at Just Property. “I would go as far as saying that ten times out of ten, everybody that we’ve had into this office who are looking to sell their property have given us an opportunity to give them a market appraisal and I believe that’s on the strength of this table. It is the most unique marketing tool for an estate agent. It just gives us the edge.”

    Property Sense by Solatys

    The SUR40 adds new dimension to this application. Properties get displayed on a Bing map where full property details can be displayed on screen and shared between different customers. Property details can be printed, emailed, and instantly scanned to the customer’s phone through the help of Microsoft Tags, or added to a shopping basket for later comparison and browsing. The basket can also be saved for later retrieval.

    Property Sense implements physical objects to provide powerful search filtering capabilities based on property types and map region. This brings an added value to customers by reducing the time needed to find what they want. The application remains connected to the real estate agency’s property database system, enabling real-time synchronizations and up-to-date information.

    This application is deployed in the United Kingdom with the help of Solatys’ local partner, Astec Technology. They recently installed the Property Sense solution into the new office of Just Property in Hastings, East Sussex. The use of Property Sense on the SUR40 had an immediate and very positive impact on customers visiting their office.

Page 1 of 1 (3 items)

March, 2013