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

  • 624 views
Uploaded on

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

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

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
624
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Plug-and-designe: Distributed Mobile GUI Design Tool
  • Runs on the targetdevice and pc of the designer. In otherwords: the targetdeviceisembraced as part of the design environment.
  • It allows designers to createUis on this mobile targetdevice
  • Devicecanbepluggedinto the environment.
  • The cornerstone of this approach is a continuous multi-device mouse pointer which can for example start on the desktop PC of the designer, cross the bezel of the screen and end on the screen of the mobile device
  • As an example,let’sconsider…
  • Adding thetargetdevice to the design environmentisdonethroughthiswizard:Designer selects availabledeviceInspectsitsspecifications andSpecifiesits orientation wrt the designer’s PC
  • Devices have several interaction mechanisms: explain…Plug-and-design provides designers with a mouse to createUIs, devicescanstillbetested by using the existing interaction mechanism
  • The goal of myresearchis to dosomething on the existing gap between a UI design tool and the Mobile Target Devices

Transcript

  • 1. Plug-and-Design: Embracing Mobile Devices as Part of the Design Environment
    Jan Meskens, Kris Luyten, Karin Coninx
    Hasselt University – tUL – IBBT
    Expertise Centre for Digital Media
    Belgium
  • 2. A Mouse Pointer on a PDA …
  • 3. Plug-and-design
    Distributed Mobile GUI Design Tool
  • 4. Plug-and-design
    Distributed Mobile GUI Design Tool
    Designer’s PC
    Target Device
  • 5. Plug-and-design
    Distributed Mobile GUI Design Tool
    Designer’s PC
    Target Device
  • 6. Distributed Mobile GUI Design Tool
    Plug-and-design
    Target Device
    Designer’s PC
  • 7. Distributed Mobile GUI Design Tool
    Plug-and-design
    Designer’s PC
    Target Device
  • 8. Multi-DeviceContinuous Mouse Pointer
    Design actions
    Adding new elements
    Selectingelements
    Resizingelements
    A custom ‘design pointer’
    Can beused on deviceswithout a mouse pointer
    Intertwine design and runtimeoperations
  • 9. Intertwining design and runtime
  • 10. Dynamic Setup Wizard
  • 11. Distributed Mobile GUI Design Tool
    Plug-and-design
    Designer’s PC
    Target Device
  • 12. Related Techniques
  • 13. Device Emulators

    Emulatorsbehavedifferentlyfrom the actualdevice…
  • 14. Live UI Design
    « Edit a UI while the UI is running »
    UI Façades
    [Stuerzlinger et al., UIST’06]
    PageTailor
    [Bila et al., MobiSys’07]
  • 15. Live UI Design isdifficult to generalize
    Multi-Touch
    Screen
    Stylus
    Hardware Keyboard
    TouchScreen
    Plug-and-Design canbeapplied to all these mobile devices!
  • 16. Implementation
  • 17. Implementation
    Mouse Server
    XMPP
    (Jabber)
  • 18. Goal
    CombinationIterative – P&D
    MobileTarget Device
    UI Design Tool
  • 19. Goal
  • 20. Mobile UI Design
    Design
    Verify
    UI Design Tool
    MobileTarget Device
    Improve
    Deploy
  • 21. No ContextSwitchesRequired
    Photo Bridge
    UI Design Tool
    MobileTarget Device
    Instant feedback!
  • 22. Plug-and-Design Limitations
  • 23. Target deviceisalwaysrequired
  • 24. Development of noveldesign techniques
    Design Mirror
    Design Toolglass
  • 25. There is more than mobile...
  • 26. There is more than mobile…
    Verydifferentdevicecharacteristics…
    … requiresmore than a continuous design pointer
    [Nacenta et al., UIST’07]
  • 27. New design techniques
    Design Mirror
    Design Toolglass
  • 28. Design Mirror
    [Meskens et al., VL/HCC’09]
  • 29. Design Toolglass
  • 30. Towards one Live Mobile GUI Design System
  • 31. Conclusion
  • 32. Questions?
    http://research.edm.uhasselt.be/~jmeskens
  • 33. Questions?