Download - Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines
{Gambit
Enhancing Collaborative Sketching Activities with Context-aware Adaptation Guidelines
Vivian Genaro MottiUgo Sangiorgi
Jean VanderdoncktLILab - Université catholique de Louvain
Louvain-la-Neuve - Belgium
2WebMedia'2013 - Salvador, BR - 06/11/2013
Several contexts of use Multiple users’ profile Fragmented device market Heterogeneous environments
Motivations
3WebMedia'2013 - Salvador, BR - 06/11/2013
4
[HaptiMap, 2012]
WebMedia'2013 - Salvador, BR - 06/11/2013
5
Users expect Plastic UIs through a responsive design
Stakeholders Find only partial support for design
Motivations
WebMedia'2013 - Salvador, BR - 06/11/2013
6
Existing UI Editors BALSAMIQ
to quickly sketch interfaces and to communicate design ideas
balsamiq.com JUSTINMIND
a platform for defining prototypes for web and mobile applications
www.justinmind.com MAQETTA
a WYSIWYG web-based visual authoring of HTML5 user interface
maqetta.org SKETCHFLOW
an editor to create interactive prototypes www.microsoft.com/silverlight/sketchflow
WebMedia'2013 - Salvador, BR - 06/11/2013
7
User profiles vary age, expertise levels, preferences, and needs
Platforms have screen dimensions, interaction modalities, and
capabilities Environments have
brightness, noise, and stability levels
Context
WebMedia'2013 - Salvador, BR - 06/11/2013
8
Sketching one or more participants produce sketches to
express the ideas Sharing
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
Sketching activities
WebMedia'2013 - Salvador, BR - 06/11/2013
9
Web-based tool Infinite workspace Collaborative sketching Virtual meeting room Cross-device sketching
Gambit
WebMedia'2013 - Salvador, BR - 06/11/2013
10
3-steps methodology XML description of the target context UI sketching and recognition Adaptation guidelines proposal
Enhancing Sketching
WebMedia'2013 - Salvador, BR - 06/11/2013
11
Car rental example Mobile devices: smartphone, tablet PC Able-bodied user, elderly user Non-stable environment: variable light
and noise
Application scenario
WebMedia'2013 - Salvador, BR - 06/11/2013
12
Flow
WebMedia'2013 - Salvador, BR - 06/11/2013
13
Alternatives Target context description: XML-based,
ontologies, DDR UI elements recognition: automatic vs.
manual, tagging Adaptation guidelines and design patterns:
repositories, online bases
Design Decisions
WebMedia'2013 - Salvador, BR - 06/11/2013
14
Distinguish similar UI elements Fine grained vs. coarse grained analysis Semantic vs. syntactic analysis Prioritize adaptation guidelines Provide effective solutions for
stakeholders
Discussion
WebMedia'2013 - Salvador, BR - 06/11/2013
15
Many tools support UI design Few integrate UI guidelines
Contexts vary significantly 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
Final Remarks
WebMedia'2013 - Salvador, BR - 06/11/2013
16
Acknowledgments
The authors gratefully acknowledge the support of the FP7 Serenoa project, funded by the European Union through under reference FP7-ICT-258030.
WebMedia'2013 - Salvador, BR - 06/11/2013
17
Q&A
@vivianmotti
WebMedia'2013 - Salvador, BR - 06/11/2013
18
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).
References