phd slides
DESCRIPTION
The slides of Jan Meskens' Phd defenseTRANSCRIPT
Tool Support for Designing, Managing and Optimizing Multi-Device User Interfaces
Jan Meskens
Expertise centre for Digital Media (EDM) - UHasselt 26/04/2011
Advisor: prof. dr. Karin ConinxCo-Advisor: prof. dr. Kris Luyten
2
Tablet PCs Mobile Phones Interactive TV
People use Multiple Devices
3
Existing Multi-Device UI Design approaches
Manually Model Based
Models
o Switching between incompatibletools
o Duplicated design effort
o Models are often complex
o Automatic generation can lead to unexpected results
4
Problems with these approaches
Myers, 2000Grigoreanu, 2009
Lin, 2005
Models
Designers need Multi-Device Design Tools to...
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
5
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
6
7
Gummy design environment
o Multi-device graphical design environment
o What You See Is What You Get (WYSIWYG)
o Models are used behind the scenes
8Presented at AVI’08 and AVI’10
Gummy design environment
9Presented at AVI’08 and AVI’10
Gummy design environmentDevice-specific workspaces
10Presented at AVI’08 and AVI’10
Gummy design environment
Toolbox
11Presented at AVI’08 and AVI’10
Gummy design environment
Canvas
12Presented at AVI’08 and AVI’10
Gummy design environment
Properties panel
13Presented at AVI’08 and AVI’10
Gummy can target many platforms
Mobile Web Desktop
o Integration of new platforms by means of “platform plug-ins”
o Hiding the underlying UI models
o Providing visual design feedback (WYSIWYG)
14
Gummy architecture: requirements
Presented at AVI’08 and AVI’10
15Presented at AVI’08 and AVI’10
XMPP
View
Model
Controller
Platform Plug-In
Screenshot
Design Change
Screenshot
Render
Gummy architecture: MVC
Pierce et al., 2008
16
Gummy’s underlying Model
Presented at AVI’08 and AVI’10
Layout Information
Rendering Information
Properties
Root Panel
... Panel
Button Rounded Range
A B C
17
Example UI: Video ExplorerDesktop (.NET)
Web (Flex)
Mobile (Android)
Video PlayerKeyframes
o Repetitive design effort
o Hard to keep prototypes consistent
18
Limitations of Gummy
Desktop (.NET)
Mobile (Android)
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
19
o Reduce repetitive design effort
o Keep prototypes consistent
20
Why Managing Tool Support?
Grigoreanu, 2009Lin, 2005
Desktop (.NET)
Mobile (Android)
21
Managing TechniquesAutomatic Transformations + Linked Editing
Design tool Macros (D-Macs)
22
Managing TechniquesAutomatic Transformations + Linked Editing
Design tool Macros (D-Macs)
23
Automatic Transformations + Linked Editing
Copy
Paste Edit Contents
Presented at AVI’10
24
25
26
Limitations of automatic transformations and linked editingo Only predefined
transformations
o Designers cannot create their own transformations
o Difficult to integrate new components
A B C
Semantic UI Network
Vermeulen et al., 2007Demeure et al., 2006
27
Managing TechniquesAutomatic Transformations + Linked Editing
Design tool Macros (D-Macs)
28
D-Macs approach
Design Record
Replay
Presented at UIST’10
29
D-Macs design action recorder
Presented at UIST’10
30Presented at UIST’10
Example UI: News Video Explorer
Desktop (.NET)
Mobile (Android)
31
32
Replay design actions using a mixed initiative approach
Leshed et al, 2008Li et al, 2010 Presented at UIST’10
Manual action
Computer action
33
34
Replay can fail
Presented at UIST’10
Switch to android
Select android.widget.gallery
Add item to collectionDependency
Switch to android
Select android.widget.button
Add item to collection
Success:
Failure:
35
36
D-Macs action sharing
Designer A Designer B
D-macs repository
Add recording
http://dmacs Reuse recording
Presented at UIST’10
37
Online Action Repository
Query Repository
View Recording
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
38
Iteratively Optimizing User Interfaces
39
Design Test
Rethink
40
Problems when Iteratively Optimizing User Interfaces
Design Test
Rethink
o GUI Deployment takes time
o Testing is often postponed to the end of the design process
o Design changes are more expensive
41
Live UI Design: Intertwine test and design
Hartmann et al., 2006Bila et al., 2007
Pagetailor d.tools
42
Multi-device Live UI Design Techniques
Design Mirror
Continuous Design Pointer
Design Toolglass
43
Multi-device Live UI Design Techniques
Design Mirror
Continuous Design Pointer
Design Toolglass
44Presented at VL/HCC’09
Design Mirror
Device A B C
Device ADesign Environment
Real Time Visualization
45
46
Evaluationo 7 HCI Professionals
o Observations: Changing widget sizes, Replacing widgets, Fine-tuning colors
o One recurring suggestion:
“the integration of a technique to drag elements from the toolbox directly to the target device”
47
Multi-device Live UI Design Techniques
Design Mirror
Continuous Design Pointer
Design Toolglass
48Presented at EICS’09
Continuous Design Pointer
Device A B C
Device ADesign Environment
49
50
Multi-device Live UI Design Techniques
Design Mirror
Continuous Design Pointer
Design Toolglass
51
Device A B C
Design Toolglass
Emulator of Device A
Design Environment
Presented at AVI’10
Transparent Canvas
52
Design Toolglass
Presented at AVI’10
Canvas
Windows Mobile Emulator
Android EmulatorCanvas
Windows MobileAndroid
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
53
54
Conclusions
55
Contributions
1 Create realistic high fidelity prototypes
o WYSIWYG
o Models are used in the background
o Open source
Gummy Multi-device Graphical Design Environment
56
Contributions
2 Manage multiple device-specific prototypes
o Reduce duplicated design efforto Keep prototypes consistent
o Automation techniques: Automatic Transformations
+ Linked Editing Design Tool Macros
(D-Macs)
Automate parts of the design process
57
Contributions
3 Iteratively
Optimize designs for the targeted devices
o Reduce deployment timeo Stimulate design iterations
o Design techniques: Design Mirror Continuous Design Pointer Design Toolglass
Live UI Design:Intertwine design and test
A B C
58
Extensions and Outlook
Storyboards
Haesen et al., MDDAUI 2011
Web Services
IBBT Croslocis, 2009
Usability Evaluation
DFKI KaiserslauternEICS 2011
http
ISO 9241
Questions?
1 2 3Create realistic high fidelity prototypes
Manage multiple device-specific prototypes
Iteratively
Optimize designs for the targeted devices
59