Plug-and-Design: Embracing Mobile Devices as Part of the Design Environment

Jan Meskens, Kris Luyten, Karin Coninx

Hasselt University – tUL – IBBTExpertise Centre for Digital Media

Belgium

Plug-and-design

Distributed Mobile GUI Design Tool

Plug-and-design

Distributed Mobile GUI Design Tool

Designer’s PCTarget Device

Plug-and-design

Distributed Mobile GUI Design Tool

Designer’s PCTarget Device

Distributed Mobile GUI Design Tool

Plug-and-design

Designer’s PCTarget Device

Multi-Device Continuous Mouse Pointer

• Design actions– Adding new elements– Selecting elements– Resizing elements

• A custom ‘design pointer’– Can be used on devices

without a mouse pointer– Intertwine design and

runtime operations

Intertwining design and runtime

Dynamic Setup Wizard

Related Techniques

Device Emulators

≠Emulators behave differently from the actual

device…

Live UI Design

UI Façades[Stuerzlinger et al., UIST’06]

PageTailor[Bila et al., MobiSys’07]

« Edit a UI while the UI is running »

Live UI Design is difficult to generalize

Plug-and-Design can be applied to all these mobile devices !

Stylus Hardware Keyboard Touch Screen Multi-Touch Screen

Implementation

Mouse Server

XMPP(Jabber)

Goal

Mobile UI Design

UI Design Tool Mobile Target Device

Deploy

Verify

Improve

Design

No Context Switches Required

• Photo BridgeUI Design Tool Mobile Target

Device

Instant feedback!

Plug-and-Design Limitations

Target device is always required

Development of novel design techniques

Design Mirror Design Toolglass

Design Mirror

[Meskens et al., VL/HCC’09]

Design Toolglass

Towards one Live Mobile GUI Design System

Conclusion

Questions?

http://research.edm.uhasselt.be/~jmeskens