Gambit

{

Enhancing Collaborative Sketching
Activities with Context-aware Adaptation
Guidelines
Vivian Genaro Motti
Ugo S...
Motivations



Several contexts of use


Multiple users’ profile



Fragmented device market



Heterogeneous environm...
[HaptiMap, 2012]
Motivations



Users expect




Plastic UIs through a responsive design

Stakeholders


Find only partial support for ...
Existing UI Editors


BALSAMIQ





JUSTINMIND






a platform for defining prototypes for web and mobile
applicat...
Context


User profiles vary




Platforms have




age, expertise levels, preferences, and needs
screen dimensions, ...
Sketching activities


Sketching




Sharing




one or more participants produce sketches to express the
ideas
parti...
Gambit


Web-based tool



Infinite workspace



Collaborative sketching



Virtual meeting room



Cross-device sket...
Enhancing Sketching



3-steps methodology


XML description of the target context



UI sketching and recognition



...
Application scenario



Car rental example


Mobile devices: smartphone, tablet PC



Able-bodied user, elderly user

...
Flow
Design Decisions


Alternatives


Target context description: XML-based, ontologies,
DDR



UI elements recognition: au...
Discussion



Distinguish similar UI elements



Fine grained vs. coarse grained analysis



Semantic vs. syntactic ana...
Final Remarks


Many tools support UI design




Contexts vary significantly




Few integrate UI guidelines
Designer...
Acknowledgments

The authors gratefully acknowledge the
support of the FP7 Serenoa project, funded
by the European Union t...
Q&A
@vivianmotti
References
Balsamiq Mockups: Rapid Wireframing Tool, 2012. www.balsamiq.com.
JustInMind: a platform to define web and mobi...
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines
Upcoming SlideShare
Loading in …5
×

Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines

4,474 views

Published on

The paper entitled 'Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines' has been presented on November 6th, 2013, during WebMedia 2013.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,474
On SlideShare
0
From Embeds
0
Number of Embeds
3,385
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Specific ui elements: differentiating iconsGlobal vs. local analysisLayout vs. content analysisPrioritize patterns and guidelines by severity and impact, costsList of alternative and coherent designs
  • The authors gratefully acknowledge the support of the FP7 Serenoa project, funded by the European Union through under reference FP7-ICT-258030.
  • Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines

    1. 1. Gambit { Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines Vivian Genaro Motti Ugo Sangiorgi Jean Vanderdonckt LILab - Université catholique de Louvain Louvain-la-Neuve - Belgium
    2. 2. Motivations  Several contexts of use  Multiple users’ profile  Fragmented device market  Heterogeneous environments
    3. 3. [HaptiMap, 2012]
    4. 4. Motivations  Users expect   Plastic UIs through a responsive design Stakeholders  Find only partial support for design
    5. 5. Existing UI Editors  BALSAMIQ    JUSTINMIND    a platform for defining prototypes for web and mobile applications www.justinmind.com MAQETTA    to quickly sketch interfaces and to communicate design ideas balsamiq.com a WYSIWYG web-based visual authoring of HTML5 user interface maqetta.org SKETCHFLOW   an editor to create interactive prototypes www.microsoft.com/silverlight/sketchflow
    6. 6. Context  User profiles vary   Platforms have   age, expertise levels, preferences, and needs screen dimensions, interaction modalities, and capabilities Environments have  brightness, noise, and stability levels
    7. 7. Sketching activities  Sketching   Sharing   one or more participants produce sketches to express the ideas participants often share the drawings using a big sheet of paper and post-its. The sheets are arranged as a storyboard on a wall for discussion. Discussing  participants refine the sketches based on what their discussion results
    8. 8. Gambit  Web-based tool  Infinite workspace  Collaborative sketching  Virtual meeting room  Cross-device sketching
    9. 9. Enhancing Sketching  3-steps methodology  XML description of the target context  UI sketching and recognition  Adaptation guidelines proposal
    10. 10. Application scenario  Car rental example  Mobile devices: smartphone, tablet PC  Able-bodied user, elderly user  Non-stable environment: variable light and noise
    11. 11. Flow
    12. 12. Design Decisions  Alternatives  Target context description: XML-based, ontologies, DDR  UI elements recognition: automatic vs. manual, tagging  Adaptation guidelines and design patterns: repositories, online bases
    13. 13. Discussion  Distinguish similar UI elements  Fine grained vs. coarse grained analysis  Semantic vs. syntactic analysis  Prioritize adaptation guidelines  Provide effective solutions for stakeholders
    14. 14. Final Remarks  Many tools support UI design   Contexts vary significantly   Few integrate UI guidelines Designers are unaware of which and context information to consider and how to do it By integrating UI guidelines in UI sketching tools, stakeholders can be aware of relevant guidelines, and generate better UI’s
    15. 15. Acknowledgments The authors gratefully acknowledge the support of the FP7 Serenoa project, funded by the European Union through under reference FP7-ICT-258030.
    16. 16. Q&A @vivianmotti
    17. 17. References Balsamiq Mockups: Rapid Wireframing Tool, 2012. www.balsamiq.com. JustInMind: a platform to define web and mobile apps., 2012. http://www.justinmind.com/. Maqetta: Visual Authoring of HTML5 User Interfaces in the browser., 2012. http://dojofoundation.org/projects/maqetta. SketchFlow: Expression Studio Ultimate, 2012. http: //www.microsoft.com/silverlight/sketchflow/. Android Tablet Guidelines,2013.http://developer.android. com/distribute/googleplay/quality/tablet.html. Yahoo! Design Pattern Library, 2013. http://developer.yahoo.com/ypatterns/. Coyette, A., Schimke, S., Vanderdonckt, J., and Vielhauer, C. Trainable sketch recognizer for graphical user interface design. In INTERACT (1) (2007), 124–135. Motti, V. G., and Vanderdonckt, J. A computational Framework for Context-aware Adaptation of User Interfaces. In Proc. of the Research Challenges in Information Sciences Conference - RCIS ’13 (2013), 12. Sangiorgi, U. B., Beuvens, F., and Vanderdonckt, J. User Interface Design by Collaborative Sketching. In Proc. of the Designing Interactive Systems, DIS ’12, ACM Press (Newcastle, U.K., 2012), 378. Sangiorgi, U. B., Motti, V. G., Beuvens, F., andVanderdonckt, J. Assessing Lag Perception in Electronic Sketching. In Nordic Conference on Human-Computer Interaction (Copenhagen, DK, 2012).

    ×