Designing and developing microsoft surface applications

Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
Overview Microsoft
Surface Applications
Design & Development
Serge Calderara

Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comZac du Larry –Marin , 74200 Thonon les Bains - France
Before any Design Process…
Be sure to understand customer objectives1
Always 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 design3
Learn from those who have tried before4

Interaction Design Guide Lines
Surface Design Principles
Simple for Users Well Organized
Content Oriented
Dynamic
1

Multiuser 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 entire
application if it has a distinct top and bottom
Horizontal deployment

• 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 of
columns)
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

Think of a Single user as well
• Build a single user experience without requiring other users
• A single user should JOIN or LEAVE an application without
affecting the experience for other users
• Create an experience that comes alive with several users
• Create an experience that comes alive with several users

Use Direct Touch Interaction3
Do not redefine the standard gestures and do not replace these
gestures with controls.
Drag & Flick for move
Respond to multitouch

Use Direct Touch Interaction3
>
>3mm
>
Button control Height and Width
>18mm
Unusable interactive content
Optimize touch element

Use of objects4
Tagged Objects
Blob
• Respond immediately.
• Create an appropriate visual response for the
object.
• Clearly connect the object to its virtual effect.
• Respond immediately to the presence of untagged
objects
• Ensure that two physical are not merged into one
blob by the vision system as people move the
objects on the screen
• Use blob properties with caution. Not precise

Giving Feedback is a must4
Any user will understand that their action has been received
when they will noticed a visual change
Shadow feedback
Scale feedback
Hint feedback
Shadow gives the illusion
that the touch object lift up
Scale give the illusion that
the touch object comes
closer to you
Give more information on
further possible operations
to users.

Content 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 of
user’s attention
 Always Provide Tap and Slide gesture to all content
Tap Slide
NEVER REPLACE TOUCH OPEARTION BY CONTROLS AS LONG AS
TOUCH CAN BE PROVIDE AS THE PRIMARY INTERACTION

Use of Animation Scenarios5
Animation needs to be implemented with care and
only 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 a
live application
• Teaching second level of use of your application with extended
feature not necessary evident to discover in a natural way

Take in account Screen Edge5
SAFE TOUCH AREA
~1cm
~1cm
>=18 mm for touch detection
Access Point reserved area

Design for Surface Shell
The launcher1

Using Notification2
• Messages displayed by Surface applications or Services
• Appears at the bottom of the screen based on Orientation
property
• Notification message contains :
• Title
• Message
• Image
• Image caption

Using Tags object positionning3
• Tag positioning
// Physical offset (horizontal inches, vertical inches).
TagVisualizationDefinition tagDef = new
TagVisualizationDefinition ();
tagDef.PhysicalCenterOffsetFromTag = new
Vector(PropertyAgent.Properties.Settings.Default.PhysicalTag
OffsetX,
PropertyAgent.Properties.Settings.Default.PhysicalTagOffsetY
);
• Tag Orientation
Orientation = 0 Orientation = 90
// Orientation offset (default).
tagDef.OrientationOffsetFromTag = 0;
// Orientation offset (default).
tagDef.OrientationOffsetFromTag = -90;

Using Object Routing4
• Start your application without going to
the Launcher
• Personalize application access
• Identifier user accessing your
application
<Application>
<Title>Property Sense</Title>
<Description>Real Estate Application By Solatys</Description>
<ExecutableFile>PropertySense.exe</ExecutableFile>
<Arguments>
</Arguments>
<IconImageFile>Resourcesicon.png</IconImageFile>
<Tags>


<Tag Value="0xC0">
<Actions>
<Launch />
</Actions>
</Tag>
Application.xml file

Developing Surface Application
Application Types1
Surface
SDK 2.0
Service
Applications
Standard
Applications
WPF 4.0 / XNA FW
Register Start & Orient
UI thread
Unblocked
Loading
Complete

Environment and Tools2
• Visual Studio
• Snoop - This tool simplifies debugging of WPF apps at runtime.
• Mole - Awesome visualizer for Visual Studio. Highly recommended for not just
WPF work (although it was built for WPF).
• Kaxaml - Great little tool to “play” with XAML.
• Expression Blend - Design work.
• Microsoft Surface Simulator

Resources
• 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

Designing and developing microsoft surface applications

Recommandé

Recommandé

Contenu connexe

Similaire à Designing and developing microsoft surface applications

Similaire à Designing and developing microsoft surface applications (20)

Dernier

Dernier (20)

Designing and developing microsoft surface applications