Phd Slides

Expertise centre for Digital Media (EDM) - UHasselt
26/04/2011
Tool Support for
Designing, Managing and Optimizing
Multi-Device User Interfaces
Jan Meskens
jan.meskens@uhasselt.be
Advisor: prof. dr. Karin Coninx
Co-Advisor: prof. dr. Kris Luyten

2
People use Multiple Devices
Tablet PCs
Mobile Phones
Interactive TV

3
Existing Multi-Device
UI Design approaches
Models
Manually
Model Based

4
Problems with these approaches
Switching between incompatibletools
Duplicated design effort
Models are often complex
Automatic generation can lead to unexpected results
Models
Myers, 2000
Grigoreanu, 2009
Lin, 2005

Designers need
Multi-Device Design Tools to...
1
2
3
Createrealistic high fidelity prototypes
Managemultiple
device-specific prototypes
IterativelyOptimizedesigns for the targeted devices
5

1
2
3
Managemultiple
6

7
Gummy design environment
Multi-device graphical design environment
What You See Is What You Get (WYSIWYG)
Models are used behind the scenes

8
Presented at AVI’08 and AVI’10

9
Device-specific workspaces

10
Toolbox

11
Canvas

12
Properties panel

13
Gummycan target many platforms
Mobile
Web
Desktop

Integration of new platforms by means of “platform plug-ins”
Hiding the underlying UI models
Providing visual design feedback (WYSIWYG)
14
Gummy architecture: requirements

15
Gummy architecture: MVC
Model
Controller
Screenshot
Screenshot
Platform
Plug-In
Design Change
Render
View
XMPP
Pierce et al., 2008

16
Gummy’s underlying Model
A
B
C
Root Panel
Properties
...
Panel
Layout Information
Rendering Information
Button
Rounded Range

17
Example UI: Video Explorer
Desktop (.NET)
Mobile (Android)
Web (Flex)
Keyframes
Video Player

18
Limitations of Gummy
Repetitive design effort
Hard to keep prototypes consistent
Desktop (.NET)
Mobile (Android)

1
2
3
Managemultiple
19

20
Why Managing Tool Support?
Reduce repetitive design effort
Keep prototypes consistent
Desktop (.NET)
Grigoreanu, 2009
Lin, 2005
Mobile (Android)

21
Managing Techniques
Automatic Transformations + Linked Editing
Design tool Macros(D-Macs)

22
Managing Techniques

Copy
Paste
Edit Contents
Presented at AVI’10
23

26
Limitations of automatic transformations and linked editing
A
B
C
Only predefined transformations
Designers cannot create their own transformations
Difficult to integrate new components
Semantic UI Network
Vermeulen et al., 2007
Demeure et al., 2006

27
Managing Techniques

28
D-Macs approach
Design
Record
Replay
Presented at UIST’10

29
D-Macs design action recorder

30
Example UI: News Video Explorer
Desktop (.NET)
Mobile (Android)

32
Replay design actions using a
mixed initiative approach
Manual action
Computer action
Leshed et al, 2008
Li et al, 2010

34
Replay can fail
Success:
Add item to collection
Add item to collection
Switch to android
Switch to android
Dependency
Select android.widget.gallery
Select android.widget.button
Failure:

36
D-Macs action sharing
D-macs repository
Add
recording
Reuse
recording
http://dmacs
Designer A
Designer B

37
Online Action Repository
Query Repository
View Recording

1
2
3
Managemultiple
38

Iteratively Optimizing
User Interfaces
39
Design
Test
Rethink

40
Problems when Iteratively
OptimizingUser Interfaces
GUI Deployment takes time
Testing is often postponed to the end of the design process
Design changes are more expensive
Design
Test
Rethink

41
Live UI Design:
Intertwine test and design
Hartmann et al., 2006
Bila et al., 2007
Pagetailor
d.tools

42
Multi-device
Live UI Design Techniques
Design Mirror
Continuous Design Pointer
Design Toolglass

43
Multi-device
Design Mirror
Design Toolglass

44
Design Mirror
Device A
B
C
Real Time
Visualization
Device A
Design Environment
Presented at VL/HCC’09

46
Evaluation
7 HCI Professionals
Observations:
Changing widget sizes,
Replacing widgets,
Fine-tuning colors
One recurring suggestion:“the integration of a technique to drag elements from the toolbox directly to the target device”

47
Multi-device
Design Mirror
Design Toolglass

48
Device A
B
C
Device A
Design Environment
Presented at EICS’09

50
Multi-device
Design Mirror
Design Toolglass

51
Design Toolglass
Device A
B
C
Transparent Canvas
Design Environment
Emulator of Device A

52
Design Toolglass
Windows Mobile Emulator
Canvas
Canvas
Android Emulator
Windows Mobile
Android

1
2
3
Managemultiple
53

54
Conclusions

55
Contributions
Gummy Multi-device Graphical Design Environment
1
WYSIWYG
Models are used in the background
Open source

56
Contributions
Automate parts of the design process
2
Managemultiple
Reduce duplicated design effort
Keep prototypes consistent
Automation techniques:
Design Tool Macros (D-Macs)

57
Contributions
Live UI Design:
Intertwine design and test
3
Reduce deployment time
Stimulate design iterations
Design techniques:
Design Mirror
Design Toolglass

A
B
C
58
Extensions and Outlook
ISO 9241
http
Storyboards
Haesen et al., MDDAUI 2011
Web Services
IBBT Croslocis, 2009
Usability Evaluation
DFKI Kaiserslautern
EICS 2011

Questions?
1
2
3
Managemultiple
59

Phd Slides

by jmeskens on Apr 29, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Phd Slides Presentation Transcript