User Interface Design by Collaborative Sketching

35
User Interface Design by Collaborative Sketching 14/06/2012 1 Ugo Sangiorgi – [email protected] François Beuvens – franç[email protected] Jean Vanderdonckt – [email protected] Louvain Interaction Laboratory (Lilab) Louvain School of Management Université catholique de Louvain , Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium)

description

User interface design consists of a collaborative activity where various stakeholders can all sketch the future interactive system at different levels of fidelity on different devices and computing platforms. User interfaces sketches are also intended to support prototypes on multiple computing platforms and operating systems that all impose their own capabilities and constraints. In order to support the needs for user interface design by sketching, this paper describes Gambit, a multi-platform system that provides a light-weight approach for prototyping graphical user interfaces by sketching with HTML5. The paper reports on an experiment for the most preferred platform/devices for three primary sketching functions by designers and developers in a Gambit-supported session.

Transcript of User Interface Design by Collaborative Sketching

Page 1: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

1

User Interface Design by Collaborative Sketching

14/06/2012

Ugo Sangiorgi – [email protected]çois Beuvens – franç[email protected]

Jean Vanderdonckt – [email protected]

Louvain Interaction Laboratory (Lilab)Louvain School of Management

Université catholique de Louvain , Place des Doyens, 1B-1348 Louvain-la-Neuve (Belgium)

Page 2: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

2

Agenda

• Sketching for UI design and prototyping• Requirements• GAMBIT• Preliminary Study• Directions• Conclusion

14/06/2012

Page 3: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

3

About meUgo SangiorgiPhD Candidate and Research Assistant at Louvain Interaction Lab – Belgium

Multi-platform Collaborative Sketching of User Interfaces

Gambit (http://gambit-alpha.appspot.com)

Eclipse Sketch (http://www.eclipse.org/sketch)

@ugosan

14/06/2012

Page 4: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

4

Idea

14/06/2012

Page 5: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

5

Sketching

14/06/2012

Cyclic process of drawing, reviewing, refining

Designers engage on a conversation with the artifact, iteratively building and evaluating the

solution [Schön, 1983](DENIM CALICO)

Page 6: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

614/06/2012

Functions of sketching [Van der lugt, 2002]:

Individual idea generation (visual thinking)

Evaluating others’ ideas / explaining to others

Recalling previous ideas /organizing

Page 7: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

714/06/2012

• Avoids redesign • Precise user feedback• Test (simulate) how the solution will behave in the

real world

http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/

Page 8: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

8

The real world

14/06/2012

Page 9: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

9

Available UI Sketching applications

Single-platform, targeting multi-platformDamask [Lin, 2002]

14/06/2012

Page 10: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

10

Related work

14/06/2012

Page 11: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

11

RequirementsR1 - Support sketch production and visualization

R2 - Support session storage and retrieval

R3 - Support private/public production of sketches

R4 - Provide a broad view of the drawings (like papers arranged on a wall)

R5 - Provide a fine view of a drawing

R6 - Support the UI design with different level of fidelities

14/06/2012

Page 12: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

12

Requirements

R1 - Support sketch production and visualization

14/06/2012

Page 13: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

13

Requirements

R2 - Support session storage and retrieval

14/06/2012

Page 14: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

14

Requirements

R3 - Support private/public production of sketches

14/06/2012

Page 15: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

15

Requirements

R4 - Provide a broad view of the drawings (like papers arranged on a wall)

14/06/2012

Page 16: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

16

Requirements

R5 - Provide a fine view of a drawing

14/06/2012

Page 17: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

17

Requirements

R6 - Support the UI design with different level of fidelities

14/06/2012

http://www.uxbooth.com/blog/concerning-fidelity-and-design/

Page 18: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

18

GAMBIT

14/06/2012

Gatherings and Meetings with Beamers and Interactive Tablets

Page 19: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

19

GAMBIT

14/06/2012

http://gambit-alpha.appspot.com

Page 20: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

20

GAMBIThttp://gambit-alpha.appspot.com

14/06/2012

Page 21: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

21

GAMBIT

14/06/2012

Page 22: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

22

GAMBIT Architecture

Multi-platform

14/06/2012

Cloud-based

AppEngine (Google)AppScale (Open Source)

HTML5

Page 23: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

23

GAMBIT Architecture

14/06/2012

Page 24: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

24

GAMBIT

14/06/2012

present

future

Page 25: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

25

Preliminary Study

9 designers

Large: Tabletop

Medium: iPad

Small: iPhone

14/06/2012

Page 26: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

26

Preliminary Study

14/06/2012

Page 27: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

27

IBM CSUQ

14/06/2012

1 2 3 4 5 6 7 8 9

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Q8

Q9

Q10

Q11

Q12

Q13

Q14

Q15

Q16

Q17

Q18

Q19

I strongly disagree I disagree I am so so I agree I strongly agree

3,72 2,84 4,23 2,22 2,90 0,56 1,22 0,22 0,00

7,07 8,4610,40 12,59 8,16

18,8911,48

1,11 0,00

10,433,46

4,85 2,224,67

0,28

1,56

0,44 0,00

20,46

13,21

19,04 20,7419,00

15,09

38,59

18,22 23,15

10,43 35,99

27,5232,96

19,3424,81

7,15

37,78

15,93

47,89

36,05 33,9729,26

45,9340,37 40,00 42,22

60,93

Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9

Other

Wall screen

Tabletop

Tablet

iPad

iPhone

Page 28: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

28

Observations• Small devices were rejected for

sketching but accepted for prototyping

• Designers discussed • about UI with the large tabletop• About behavior with smartphones and

tablets

14/06/2012

1 2 3 4 5 6 7 8 9

Q1

Q2

Q3

Q4

Q5

Q6

Q7

Q8

Q9

Q10

Q11

Q12

Q13

Q14

Q15

Q16

Q17

Q18

Q19

I strongly disagree I disagree I am so so I agree I strongly agree

3,72 2,84 4,23 2,22 2,90 0,56 1,22 0,22 0,00

7,07 8,4610,40 12,59 8,16

18,8911,48

1,11 0,00

10,433,46

4,85 2,224,67

0,28

1,56

0,44 0,00

20,46

13,21

19,04 20,7419,00

15,09

38,59

18,22 23,15

10,43 35,99

27,5232,96

19,3424,81

7,15

37,78

15,93

47,89

36,05 33,9729,26

45,9340,37 40,00 42,22

60,93

Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9

Other

Wall screen

Tabletop

Tablet

iPad

iPhone

Page 29: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

29

Demo session

14/06/2012

Page 30: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

30

Demo session

14/06/2012

Page 31: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

31

Demo session

14/06/2012

Page 32: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

32

Future Work

• Short Term • Observe design sessions with paper + gambit• Allow building of interaction flows (like DAMASK)• Testing the flows

• Long Term• More experiments• Generate User Interfaces for the target devices

14/06/2012

Page 33: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

33

Conclusion

Not a replacement, but an addition

14/06/2012

Page 34: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

34

Thank you very much for your attention

14/06/2012

Gambit (http://gambit-alpha.appspot.com)

Page 35: User Interface Design by Collaborative Sketching

User Interface Design by Collaborative Sketching

35

More information at

Gambit: http://gambit-alpha.appspot.com

UsiXML (User Interface eXtensible Markup Language): www.usixml.eu & www.usixml.org

Louvain Interaction Laboratory: www.lilab.eu, www.lilab.be

14/06/2012