1. Enhancing Collaborative
Sketching with Adaptation
Guidelines
London – England, 24/06/2013
Vivian Motti
Ugo Sangiorgi, Jean Vanderdonckt
Louvain Interaction Laboratory
Université catholique de Louvain
vivian.genaromotti@uclouvain.be

2. Goals
• Propose an approach for augmenting the
sketching activities with
– Context-awareness
– Adaptation
• Aiding stakeholders by means of
– Guidelines
– Patterns
22

3. 3
Heterogeneous contexts of use

4. Motivations
• Challenge for stakeholders
– Identify what is the relevant context information
– and how to appropriately handle it
• One-size-does-not-fit-all
– Accessibility issues may rise
– Preventing or hindering the interaction
• Guidelines and Patterns
– Provide support
44

5. Editors
• Balsamiq
• JustInMind
• Maqetta
• SketchFlow
• Drawbacks
– Only sketching, or designing, or modeling
– No context-awareness (or specific one)
– No support to guidelines and patterns
55

6. Balsamiq
66

7. JustInMind
77

8. Maqetta
88

9. SketchFlow
99

10. Main Shortcomings
• Existing editors do not provide support to
– Cross-platform design
– Context-awareness
– Adaptation
– Collaboration
1010

11. Gambit
• Collaborative tool for collaborative sketching
– Since early development stages
– Running on different devices
– Supports
• Sketching
• Sharing
• Discussing
1111

12. Gambit Extension
• Multi-dimensional Context-awareness
• Multi-platform
– Cross device applications
• Multi-user
– Different profiles
• Multi-environment
– Various constraints and characteristics
1212

13. Architecture
1313

14. Guidelines
• Covering different UI components
– Navigation: adapting the hierarchy and
arrangement of the tasks
– Presentation: targeting the layout and the
graphical aspects of the UI
– Contents: focusing on specific components of the
UI’s
1414

15. Steps
• Context: users provide the target context of use
• UI Sketching: users define the UI layout
• Pattern Recognition: the system recognizes UI
elements
• Guidelines Suggestions: based on the recognized
element the system provides guidelines that match
context and UI element
• User Feedback: the user gives feedback about the
system suggestion
– accepting, rejecting, evaluating
1515

16. Scenario
• Elderly users
• Task
– Search for a movie
– Selecting categories
– Visualizing results
• Scroll bar recognition
– Appropriate guidelines suggested
1616

17. Scenario
1717

18. Final Remarks
1818
• Editors already support UI design
– But excluding UI guidelines and design patterns
• Challenging for stakeholders
– To consider heterogeneous contexts of use
– To properly consider context information
• Sketching can be enhanced
– When appropriate guidelines are suggested

19. For more information and downloading,
http://www.lilab.be
User Interface eXtensible Markup Language
http://www.usixml.org
Thank you very much!
FP7 Serenoa project
http://www.serenoa-fp7.eu