Effective User Interfaces in Windows Presentation Foundation and Microsoft Silverlight
Laurence MoroneyJimmy Kim, Albert Song, Peter Chang, Andy Lee
What we do
Some of our clients and partners
Common requirements
Multiple ProductsAbundant High Definition Digital Assets
Need for an integrated, interactive, next generation sales platform
Req. 01 – One Source Multi-use
Req. 01 – One Source Multi-use
Req. 01 – One Source Multi-use
Req. 02 – Touch: The new in-terface
Touch and Zoomable User In-terface
• Better Metrics
• Better Presen-tation
• Better Inte-gration
Touch and Zoomable User In-terface
Demo: infiniti showroom sales tool
Designing for Touch
Designing for Touch
Attracting an audience that…- doesn’t know about touch- doesn’t know if they’re “allowed” to touch- doesn’t feel like touching
Designing for TouchEncouraging touch interaction with…
Designing for TouchEncouraging touch interaction with…
Designing for TouchEncouraging touch interaction with…
Designing for TouchEncouraging touch interaction with…
Designing for TouchEncouraging touch interaction with…
Designing for Touch• Physical distance from screen, peripheral vision• Menu positioning, leading the eye
Designing for TouchEncouraging touch interaction with…
Designing for Touch• Interaction limitations for current mainstream touch
technology - no scroll wheel, no right click, no rollovers
• Drag?
• Button tool- Created to enable designer to find optimal but-ton sizes for target display medium and reduce error rate of audience.
• Log Analysis tool- Created for clients to analyze how their cus-tomers were using their touch solutions.- Designers use it to test various UIs and to reor-ganize content based on access frequency.
Tools for optimizing the UX
Extending XAML
Custom ControlsCustom
ControlsCustom Controls
XAML
XAML Extension
XAMLXAMLCustom
Tags
Extending XAML Editor + Player Ap-proach
XAMLXAMLCustom
Tags
Custom ControlsCustom
ControlsCustom Controls
XAML
XAML Extension
PlayerEditorContent Manage-
ment
ContentDistribution
Display Manage-ment
Log Analysis
Backend Solutions
Device Support– Cameras– Merger– Digital Video Recorders– Sensors and Actuators
Multiple Display Support
ZUI Platform– Maps & Floor plans−Zooming Contents
Actions & Templates
FAST Implementation
EASY Maintenance
GREAT User Interface
• InnoWATCH for CCTV Control Room Applications
Extending XAML WHY?
Editor
Player
EASY Authoring
& Operation
• Camera Device− Box/Dome Camera− IP/Analog Camera
• Video Merge Sys-tem
• Digital Video Recorder
• Joystick• Sensors• Actuators
Extending XAML Device Support
• Demo
Extending XAML Device Support
[XAML Code]<Canvas Name="LayoutRoot" Width="1280" Height="1024" Hor-
izontalAlignment="Left" VerticalAlignment="Top" AllowDrop="True" ClipToBounds="True">
<iuc:CameraControl pOperationMode="2" pSour-cePath="" pVisualBrushRow="0" pVisualBrushCol="0" pIsAutoPlay="False" pEnableMoveResize="True" pActionRe-sult="“ Name="Element_CameraControl000001" Width="343" Height="231" ContextMenu="{x:Null}" Opacity="1" Can-vas.Left="81" Canvas.Top="57" Panel.ZIndex="2"/>
</Canvas>
Extending XAML Device Support
Extending XAML Device Support
XAMLXAML
XAML
Custom ControlsCustom
ControlsCustom Controls
Expression Blend
Expression Design
• Graphic Designs• Effects• Animations
• Multiple Display Support• Device Components• ZUI platform• Easy Layout
Extending Blend
Editor
Extending Blend
One Source Multi Use
• Extended XAML
• ZUI
WindowsPresenta-tionFoundation
Demo
-What we’re going to cover
- about us- intro video- clients- current trends / client needs
- one source multi-use- touch
- effective UI- extending xaml
- Demo 01 – device support (adding camera device support)
- Demo 02 – device support merger (intersec)- Demo 03 – editor demo - Wrap up demo
