June, 2012 - Microsoft PixelSense Blog - Site Home - MSDN Blogs
Blog Entries
  • Microsoft PixelSense Blog

    Garage: Photos App sample and controls


    The Garage is back to share the Photos App -- a sample application with reusable sample controls for use with the Microsoft Surface 2.0 Software Development Kit (SDK), It's more goodness for the Microsoft PixelSense community. This seemingly straightforward application packs some important design and engineering innovations that make it easy for people to walk right up to a Samsung SUR40 with Microsoft PixelSense, insert USB removable media, and immediately share their photos with friends, colleagues and customers. This sample application can be readily deployed and completely customized with the included code sample and reusable controls -- it is provided as-is, and is not supported. Click here to download Photos App by Garage.

    Image: Photos App by Garage

    Included Photos App sample controls

    This sample application includes several reusable sample controlsthat developers can use to make their own applications even better:

    • Dockable ScatterView | Flick content to the side of the screen for later, have it intelligently organize itself
    • Just-in-time Chrome | Touch a piece of content to display information about it, let the text fade away when done
    • Background file copy | Move files from removable media to the device
    • Background removable media monitoring | Let your app know when new content is available
    • Background loading of pictures into ScatterViews | Take content from removable media and import into Microsoft Surface ScatterView content containers

    Installing Photos App

    This sample applications does not come with its own installer.Copy the .zip file contents to a folder that all users will have access to (e.g.: C:\SurfaceApps\). Right-click on the PhotosApp\Release\PhotosApp.xml file and Create Shortcut. Copy that shortcut file to C:\ProgramData\Microsoft\Surface\Programs\ and then use the Surface Configuration Utility to add the application to Launcher.

    Using removable USB media with Photos App

    The Photos App has the ability to display photos from an external USB storage device. All you have to do is create a directory on the USB drive called \PhotosApp\Content\ and put your photos in there. Launch the Photos Apps and insert the removable USB drive into your Samsung SUR40. The photos will replace the existing contents of the Photos Apps directory and will persist until another removable USB device with new content is inserted and copied over. If you want to disable the ability to copy photos from removable media change the content in the application directory on the hard drive \PhotosApp\Content\ to read-only. This will prevent the file system from overwriting the original files with new pictures and effectively block users from sharing their photos on the device.

    About Garage

    Garage is a community of Microsoft employees that are passionate about Microsoft PixelSense, Samsung SUR40, computer vision, and natural user interface (NUI) technologies. Last year TechCrunch reporter Devin Coldewey visited the Surface Garage wrote a great article that gives a little more background on the group: "Microsoft’s Surface Garage: A Cross-Department Development Team, With Pizza And Beer." One of the group's goals is to contribute helpful code samples and demos to the greater PixelSense development community. This work is done by enthusiastic employees in their off-hours. The nature of these projects creates code which is outside the scope of a standard product release; but, as samples they can be valuable to the community.


    The Garage team would appreciate feedback on the usefulness of this sample application and controls for developers. Feedback will help frame future contributions from Garage. Options include releasing more samples in an agile format similar to this one, which puts more work on the developer to figure out how to put things together. Or, they can do a slower contribution cadence with more polished source code, but fewer posts. Since the Surface Garage is really looking to help the PixelSense development community, they'd really like to know what you think. Please post your thoughts and comments below.

  • Microsoft PixelSense Blog

    Johanna Rowe: Designing a Microsoft Surface 2.0 application


    Our thanks and appreciation to Johanna Rowe, designer and Surface MVP, for sharing the following guest blog in French and English:

    Over the last few years developers have started working with professionals from several new fields of activity. These include ergonomists, graphics professionals and much more recently, "design" specialists, coming from industrial environments.

    Such design professionals are often specialists in human interactions and accordingly always place user experience at the top of the list of system requirements. This is easily understandable because, from the very outset of their educational courses, designers are trained to treat end-user experience as the most important factor of any new project.

    Their creative and artistic spirits, coupled with a solid technical knowledge and an understanding of user needs and desires, make such designers invaluable, not only during the creative phase of a project but in all stages of the product development.

    In successful industrial companies, end-user requirements, brand studies, content pertinence, navigation and basic functions, are always treated as highly critical elements. This philosophy is however relatively new to the field of computing and specifically for innovative user interfaces. Let us thus apply this philosophy to the following topic: Designing a Microsoft Surface 2.0 application.

    We need to keep in mind four specific points when dealing with this application:

    The first point is User Experience. A satisfying user experience is a very strong emotional event and will drive the customer to communicate favorably about the company, "I was really impressed with the new touchscreen application...” A successful user experience can often be summarized by a unexpectedly easy completion of the required action, or surprisingly rapid access to information needed.

    The second point is the total respect of the Brand Image. When working on a new application for an industrial company or an association etc, it is of prime importance to respect the fundamental "image" and main corporate values. Key image marker notions "such as, "green," "young," "technical mastery," etc., must be carefully taken into account and should be reflected in the look and feel of the application.

    The third point is the Microsoft Surface Design Principles. These principles share a commonality with the “Metro” design found in other Microsoft products, from the Xbox 360 dashboard to Windows Phone and Zune to future Windows 8 tablets. Each product has a specific way of using "metro." For the Microsoft Surface 2.0 interfaces this does not imply using rectangles, squares and palettes of the same color, but simply to using the overall philosophy. There are five Surface design principles: simple, organized, authentically digital, content oriented and lively. This is the basis of Surface application design and should be taken into account the interests of the end-user.

    The fourth point is the application of a dedicated design phase. At the very outset of the project, this takes account of all the possible touch interactions, the user gestures, the components, the content and the intended physical aspect. All this should be clearly and visually transcribed in the form of an exhaustive application storyboard. A well prepared and highly visual storyboard, reduces the chance of misunderstanding between project participants. It allows for rapid and reliable validation by the technical managers at the very beginning of the project and above all, before the development phase and graphics design phase.

    These four points are clearly critical to project success and must necessarily be taken into account very early in the project as they will have a critical impact on the overall application. However, it is clearly interesting to ask how this process takes place in the minds of designers. This line of thought is useful to pursue, because I frequently meet people who are very unhappy with the idea of not being able to explain logically and scientifically what a designer does, which enables them to produce innovative ideas. They want to understand how the designers brain functions to enable them to reproduce the process...

    Well, here is one concrete example of how my industrial designer brain managed to generate ideas concerning interactions.

    I challenge any one, to find a way of artificially triggering a similar chain reaction. A few days ago I was watching the cartoon film version of Snow White (in French). I was prompted to do this after a particularly wearing day, in order to find peace and beauty. To my surprise, after several desperately uncreative days, innovative ideas suddenly started to spring to life as I lay in bed, between waking and sleep. The simple innocence and magic of this film reminded me of the sparkling eyes of users, the first time they touched the Microsoft Surface 1.0.

    The reaction of fascination and pleasant surprise, created by the beauty of this innocent and touching film, seemed thus to me, to be identical to that of people to whom I presented the Surface a few years ago. Thanks to Snow White, a new train of thought was triggered and instead of going to sleep, I got up and started sketching a series of new interaction ideas. Here are a few of the sketches from this "Snow White" Phase...

    The design of Surface applications is above all about exchanging with end users and customers, about sketching, about cutting and pasting, about finding inspiration in everyday objects, materials, images and even in other interfaces.

    It is thus armed simply with a pair of scissors a few sheets of paper and some sharpened pencils that some beautiful Surface applications are born, from the minds of Interactions Designers.

    Many thanks to Franck Roth for the magnificent illustration which cost him a few weekends of his spare time.

    Johanna Rowe
    Surface MVP
    Twitter : @johanna_rowe
    Facebook page : Design in progress

  • Microsoft PixelSense Blog

    Johanna Rowe: Design d’une application sur Microsoft Surface 2.0


    Our thanks and appreciation to Johanna Rowe, designer and Surface MVP, for sharing the following guest blog in French and English:

    Depuis quelques années, de nouveaux métiers commencent à travailler avec les développeurs. Des ergonomes, des graphistes et plus récemment : des designers venus du monde l’industrie. Ces designers sont souvent spécialisés dans le design d’interactions et militent pour des expériences utilisateurs réussies. Ils sont bien placés pour faire ce travail car leur métier ainsi que leur formation les amènent à toujours placer l’utilisateur au centre de leur réflexion.

    Son esprit créatif allié à son sens pratique, sa rigueur technique et son empathie en font un intervenant pertinent aussi bien en tout début de projet pour la partie créative que tout au long du projet pour ses connaissances à la fois du monde artistique, technique et sa compréhension de l’utilisateur final. Bien que courante dans le monde de l’industrie, la phase d’étude de la marque, la prise en compte des utilisateurs finaux et la réflexion sur les usages, la navigation ainsi que la pertinence du contenu par rapport au support reste assez nouvelle dans le monde de l’informatique et des nouvelles interfaces utilisateurs.

    Mais revenons au sujet qui nous intéresse aujourd’hui : Designer une application Surface 2.0. Il y a quatre points à toujours garder en tête lorsque l’on conçoit une application Surface 2.0.

    Le premier point c’est l’expérience utilisateur, une bonne expérience amènera à une réelle satisfaction et donc à un client/utilisateur content qui parlera de la marque en termes positifs « j’ai utilisé la nouvelle application tactile de la société… c’était vraiment ludique/intéressant/amusant/etc. ». Une expérience utilisateur réussie peut se résumer à un plaisir d’utilisation, une facilité de prise en main et un accès rapide et simple à l’information ou à l’action souhaitée.

    Le deuxième point est le respect de l’image de marque, lorsque l’on conçoit une application pour une société, une association ou autre, il faut toujours respecter à la fois la charte graphique mais aussi les valeurs clés à mettre en avant du type « savoir-faire », « développement durable », « jeune ».

    Le troisième point correspondent les Principes de Design Microsoft Surface. Ces principes se recoupent avec ceux de Metro que l’on retrouve dans les autres produits Microsoft. Du tableau de bord de la Xbox 360 au Windows Phone en passant Zune et les tablettes Windows 8 à venir. Chaque support a sa propre façon d’utiliser Metro. Pour les interfaces Surface 2.0, il ne s’agit pas d’utiliser des rectangles, des carrés et des aplats de couleurs ni même d’utiliser la « grille » mais de prendre en compte la philosophie de Metro qui peut se résumer en 5 principes « simplicité, organisation et hiérarchisation, authentiquement digital, le contenu avant tout, vivant et dynamique ». Ceci est la base du design des applications Surface et devra être pris en compte dans l’intérêt des utilisateurs finaux.

    Le quatrième point est la réalisation, toujours en amont du projet, de la phase de design avec toutes les interactions tactiles, les gestuelles, les composants (leur aspect sous forme de croquis et leur fonctionnement) ainsi que le contenu. Tout cela est retranscrit sous forme d’un storyboard complet de l’application. Ce storyboard permet une validation rapide et fiable par l’équipe technique au tout début du projet et donc avant le début du développement et de la conception graphique. Cette validation permet de réduire les chances d’incompréhension entre les différents intervenants du projet.

    Ces quatres points sont essentiels et à prendre en compte sérieusement pendant la première phase du projet car ils auront un impact sur la totalité de l’application.

    Cependant, il est clairement intéressant de se demander comment ce processus se déroule dans l'esprit des designers. Cette ligne de pensée est utile à comprendre, car je rencontre fréquemment des gens qui sont malheureux à l'idée de ne pas être en mesure d'expliquer logiquement et scientifiquement ce qu'un designer fait, ce qui lui permet d’obtenir des idées novatrices. Ils veulent comprendre le fonctionnement du cerveau des designers afin de leur permettre de reproduire le processus.

    Eh bien, voici un exemple concret de la façon dont mon cerveau de designer industriel a réussi à générer des idées concernant les interactions.

    Il y a quelques mois, j’ai regardé le film d’animation Blanche Neige. Une envie d’un peu de naïveté et de beauté après une journée difficile. A ma grande surprise, après avoir passé plusieurs jours en panne de créativité, et au moment de dormir, les idées ont recommencé à fuser. La sensation d’émerveillement, d’innocence et le sourire provoqué à la vue de ce dessin animé me rappelait le pétillement dans les yeux des utilisateurs de la table Microsoft Surface 1.0, la première fois qu’ils l’ont touchée.


    La réaction de fascination et la surprise face à la beauté d’un beau film d’animation étaient les mêmes que celles que j’ai tant vues dans les yeux des personnes à qui je faisais découvrir la table Surface il y a quelques années. Et c’est tout simplement sur cette idée (et grâce à Blanche Neige) que j’ai commencé à dessiner (au lieu de dormir) les idées d’interactions qui me venaient en tête. Voici quelques croquis de cette folle nuit de créativité.

    Faire le design d’une application Surface c’est avant tout échanger avec les utilisateurs et les clients, dessiner, découper, trouver l’inspiration dans des objets, interfaces, images et matières que l’on utilise ou que l’on voit au quotidien.

    C’est donc armé d’une paire de ciseaux, de papiers, de crayons que naissent les belles applications Surface. Toutes droites sorties des mains d’un Designer d’Interactions.

    Merci à Franck Roth pour la magnifique illustration qui lui a valu quelques week-end de travail :-)

    Johanna Rowe
    Surface MVP
    Twitter : @johanna_rowe
    Facebook page : Design in progress

Page 1 of 1 (3 items)

June, 2012