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


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


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


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


9

Web-based tool Infinite workspace Collaborative sketching Virtual meeting room Cross-device sketching

Gambit


10

3-steps methodology XML description of the target context UI sketching and recognition Adaptation guidelines proposal

Enhancing Sketching


11

Car rental example Mobile devices: smartphone, tablet PC Able-bodied user, elderly user Non-stable environment: variable light

and noise

Application scenario


12

Flow


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


14

Distinguish similar UI elements Fine grained vs. coarse grained analysis Semantic vs. syntactic analysis Prioritize adaptation guidelines Provide effective solutions for

stakeholders

Discussion


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


16

Acknowledgments

The authors gratefully acknowledge the support of the FP7 Serenoa project, funded by the European Union through under reference FP7-ICT-258030.


17

Q&A

@vivianmotti


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

http://www.balsamiq.com/

http://www.justinmind.com/



http://dojofoundation.org/projects/maqetta




webmedia 2013: enhancing collaborative sketching activities with context-aware adaptation guidelines

Technology