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