Plug-and-Design: Embracing Mobile Devices as Part of the Design Environment<br />Jan Meskens, Kris Luyten, Karin Coninx<br...
A Mouse Pointer on a PDA …<br />
Plug-and-design<br />Distributed Mobile GUI Design Tool<br />
Plug-and-design<br />Distributed Mobile GUI Design Tool<br />Designer’s PC<br />Target Device<br />
Plug-and-design<br />Distributed Mobile GUI Design Tool<br />Designer’s PC<br />Target Device<br />
Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Target Device<br />Designer’s PC<br />
Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Designer’s PC<br />Target Device<br />
Multi-DeviceContinuous Mouse Pointer<br />Design actions<br />Adding new elements<br />Selectingelements<br />Resizingelem...
Intertwining design and runtime<br />
Dynamic Setup Wizard<br />
Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Designer’s PC<br />Target Device<br />
Related Techniques<br />
Device Emulators<br />≠<br />Emulatorsbehavedifferentlyfrom the actualdevice…<br />
Live UI Design<br />« Edit a UI while the UI is running »<br />UI Façades<br />[Stuerzlinger et al., UIST’06]<br />PageTai...
Live UI Design isdifficult to generalize<br />Multi-Touch<br />Screen<br />Stylus<br />Hardware Keyboard<br />TouchScreen<...
Implementation<br />
Implementation<br />Mouse Server<br />XMPP<br />(Jabber)<br />
Goal<br />CombinationIterative – P&D<br />MobileTarget Device<br />UI Design Tool<br />
Goal<br />
Mobile UI Design<br />Design<br />Verify<br />UI Design Tool<br />MobileTarget Device<br />Improve<br />Deploy<br />
No ContextSwitchesRequired<br />Photo Bridge<br />UI Design Tool<br />MobileTarget Device<br />Instant feedback!<br />
Plug-and-Design Limitations<br />
Target deviceisalwaysrequired<br />
Development of noveldesign techniques<br />Design Mirror<br />Design Toolglass<br />
There is more than mobile...<br />
Upcoming SlideShare
Loading in …5
×

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

790 views

Published on

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

Presented at Engineering Interactive Computing Systems '09 (EICS'09)
Pittsburgh, PA, USA

Presenter: Jan Meskens
Date: July 16, 2009

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Plug-and-Design: Embracing Mobile Devices as Part of the Design Environment<br />Jan Meskens, Kris Luyten, Karin Coninx<br />Hasselt University – tUL – IBBT<br />Expertise Centre for Digital Media<br />Belgium<br />
  2. 2. A Mouse Pointer on a PDA …<br />
  3. 3. Plug-and-design<br />Distributed Mobile GUI Design Tool<br />
  4. 4. Plug-and-design<br />Distributed Mobile GUI Design Tool<br />Designer’s PC<br />Target Device<br />
  5. 5. Plug-and-design<br />Distributed Mobile GUI Design Tool<br />Designer’s PC<br />Target Device<br />
  6. 6. Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Target Device<br />Designer’s PC<br />
  7. 7. Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Designer’s PC<br />Target Device<br />
  8. 8. Multi-DeviceContinuous Mouse Pointer<br />Design actions<br />Adding new elements<br />Selectingelements<br />Resizingelements<br />A custom ‘design pointer’<br />Can beused on deviceswithout a mouse pointer<br />Intertwine design and runtimeoperations<br />
  9. 9. Intertwining design and runtime<br />
  10. 10. Dynamic Setup Wizard<br />
  11. 11. Distributed Mobile GUI Design Tool<br />Plug-and-design<br />Designer’s PC<br />Target Device<br />
  12. 12. Related Techniques<br />
  13. 13. Device Emulators<br />≠<br />Emulatorsbehavedifferentlyfrom the actualdevice…<br />
  14. 14. Live UI Design<br />« Edit a UI while the UI is running »<br />UI Façades<br />[Stuerzlinger et al., UIST’06]<br />PageTailor<br />[Bila et al., MobiSys’07]<br />
  15. 15. Live UI Design isdifficult to generalize<br />Multi-Touch<br />Screen<br />Stylus<br />Hardware Keyboard<br />TouchScreen<br />Plug-and-Design canbeapplied to all these mobile devices!<br />
  16. 16. Implementation<br />
  17. 17. Implementation<br />Mouse Server<br />XMPP<br />(Jabber)<br />
  18. 18. Goal<br />CombinationIterative – P&D<br />MobileTarget Device<br />UI Design Tool<br />
  19. 19. Goal<br />
  20. 20. Mobile UI Design<br />Design<br />Verify<br />UI Design Tool<br />MobileTarget Device<br />Improve<br />Deploy<br />
  21. 21. No ContextSwitchesRequired<br />Photo Bridge<br />UI Design Tool<br />MobileTarget Device<br />Instant feedback!<br />
  22. 22. Plug-and-Design Limitations<br />
  23. 23. Target deviceisalwaysrequired<br />
  24. 24. Development of noveldesign techniques<br />Design Mirror<br />Design Toolglass<br />
  25. 25. There is more than mobile...<br />
  26. 26. There is more than mobile…<br />Verydifferentdevicecharacteristics…<br />… requiresmore than a continuous design pointer<br />[Nacenta et al., UIST’07]<br />
  27. 27. New design techniques<br />Design Mirror<br />Design Toolglass<br />
  28. 28. Design Mirror<br />[Meskens et al., VL/HCC’09]<br />
  29. 29. Design Toolglass<br />
  30. 30. Towards one Live Mobile GUI Design System<br />
  31. 31. Conclusion<br />
  32. 32. Questions?<br />http://research.edm.uhasselt.be/~jmeskens<br />
  33. 33. Questions?<br />…<br />

×