Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : ser...
Upcoming SlideShare
Loading in …5
×

Designing and developing microsoft surface applications

1,325 views

Published on

This presentation descrive the main approach on designing a Microsoft Surface application for Microsoft PixelSense device. This is a presentation I prepare by collectiing different type of information in order to deliver the essential for my customer

Published in: Technology

Designing and developing microsoft surface applications

  1. 1. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comOverview MicrosoftSurface ApplicationsDesign & DevelopmentSerge Calderara
  2. 2. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceBefore any Design Process…Be sure to understand customer objectives1Always remember basic questions before anything else2• What is the purpose of integrating the device in a selected location?• Does the location is suitable to receive the device? ( lighting condition,traffic,..)• Who will be your application users?• What type of application will be more suitable based on Rule 1• How the environment will be ? ( colors, style, branding,..)Forget what you have previously learn on traditional application design3Learn from those who have tried before4
  3. 3. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesSurface Design PrinciplesSimple for Users Well OrganizedContent OrientedDynamic1
  4. 4. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesMultiuser Experience2• Avoid content oriented toward one edge of the screen• Enable user to change content orientation by nature• Forcing content to a particular orientation should be avoid• Content must be oriented to user location• Use of Scatterview for 360 experience.• All users should be capable to reach content easily• Give a way to user to change the orientation of the entireapplication if it has a distinct top and bottomHorizontal deployment
  5. 5. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesMultiuser Experience2• Content oriented toward bottom of the screen for easy access• Upside down content should be avoid• Think of how people will share vertical space (example ofcolumns)Sharing Space• Make system change clear to users• Do not attached shared control to one side of the screen• Content position is based on share mode• Particular user = > check finger position• Global => Center to screen)Vertical deployment
  6. 6. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesThink of a Single user as well• Build a single user experience without requiring other users• A single user should JOIN or LEAVE an application withoutaffecting the experience for other users• Create an experience that comes alive with several usersMultiuser Experience2• Create an experience that comes alive with several users
  7. 7. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesUse Direct Touch Interaction3Do not redefine the standard gestures and do not replace thesegestures with controls.Drag & Flick for moveRespond to multitouch
  8. 8. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesUse Direct Touch Interaction3>>3mm>Button control Height and Width>18mmUnusable interactive contentOptimize touch element
  9. 9. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesUse of objects4Tagged ObjectsBlob• Respond immediately.• Create an appropriate visual response for theobject.• Clearly connect the object to its virtual effect.• Respond immediately to the presence of untaggedobjects• Ensure that two physical are not merged into oneblob by the vision system as people move theobjects on the screen• Use blob properties with caution. Not precise
  10. 10. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesGiving Feedback is a must4Any user will understand that their action has been receivedwhen they will noticed a visual changeShadow feedbackScale feedbackHint feedbackShadow gives the illusionthat the touch object lift upScale give the illusion thatthe touch object comescloser to youGive more information onfurther possible operationsto users.
  11. 11. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesContent as Primary Interaction Area5 Touch must be the primary interaction choice Interactive content must me clearly visible and identifiable Interactive content must me larger enough for faster catch ofuser’s attention Always Provide Tap and Slide gesture to all contentTap SlideNEVER REPLACE TOUCH OPEARTION BY CONTROLS AS LONG ASTOUCH CAN BE PROVIDE AS THE PRIMARY INTERACTION
  12. 12. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesUse of Animation Scenarios5Animation needs to be implemented with care andonly with a real objective in mind for your users• Smooth transition of objects on Visible and Hidden state• Ambient animation applied to content or controls indicating alive application• Teaching second level of use of your application with extendedfeature not necessary evident to discover in a natural way
  13. 13. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceInteraction Design Guide LinesTake in account Screen Edge5SAFE TOUCH AREA~1cm~1cm>=18 mm for touch detectionAccess Point reserved area
  14. 14. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDesign for Surface ShellThe launcher1
  15. 15. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDesign for Surface ShellUsing Notification2• Messages displayed by Surface applications or Services• Appears at the bottom of the screen based on Orientationproperty• Notification message contains :• Title• Message• Image• Image caption
  16. 16. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDesign for Surface ShellUsing Tags object positionning3• Tag positioning// Physical offset (horizontal inches, vertical inches).TagVisualizationDefinition tagDef = newTagVisualizationDefinition ();tagDef.PhysicalCenterOffsetFromTag = newVector(PropertyAgent.Properties.Settings.Default.PhysicalTagOffsetX,PropertyAgent.Properties.Settings.Default.PhysicalTagOffsetY);• Tag OrientationOrientation = 0 Orientation = 90// Orientation offset (default).tagDef.OrientationOffsetFromTag = 0;// Orientation offset (default).tagDef.OrientationOffsetFromTag = -90;
  17. 17. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDesign for Surface ShellUsing Object Routing4• Start your application without going tothe Launcher• Personalize application access• Identifier user accessing yourapplication<Application><Title>Property Sense</Title><Description>Real Estate Application By Solatys</Description><ExecutableFile>PropertySense.exe</ExecutableFile><Arguments></Arguments><IconImageFile>Resourcesicon.png</IconImageFile><Tags><!--If your application uses tagged objects, please uncomment this section to register thetags with the Shell.You can register Tags by using the appropriate instructions below.--><!--To register a specific value Tag:1. Please uncomment the Tag Element below.2. Replace "C0" below with the value of your Tag (in hexadecimal format). Repeat thissection (this element and its children) for other Tags3. Please remove the Launch element if you do not want to register the tag with ObjectRouting.--><Tag Value="0xC0"><Actions><Launch /></Actions></Tag>Application.xml file
  18. 18. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDeveloping Surface ApplicationApplication Types1SurfaceSDK 2.0ServiceApplicationsStandardApplicationsWPF 4.0 / XNA FWRegister Start & OrientUI threadUnblockedLoadingComplete
  19. 19. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDeveloping Surface ApplicationEnvironment and Tools2• Visual Studio• Snoop - This tool simplifies debugging of WPF apps at runtime.• Mole - Awesome visualizer for Visual Studio. Highly recommended for not justWPF work (although it was built for WPF).• Kaxaml - Great little tool to “play” with XAML.• Expression Blend - Design work.• Microsoft Surface Simulator
  20. 20. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - FranceDeveloping Surface ApplicationResources• PixelSense Design and Development Center.• Design and Interaction Guide• Hands on labs• PixelSense blog• Tips Experience from the field on Designing a PixelSense Application• My blog• PixelSense Community

×