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)
User Interface Design by Collaborative Sketching
2
Agenda
• Sketching for UI design and prototyping• Requirements• GAMBIT• Preliminary Study• Directions• Conclusion
14/06/2012
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
User Interface Design by Collaborative Sketching
4
Idea
14/06/2012
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)
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
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/
User Interface Design by Collaborative Sketching
8
The real world
14/06/2012
User Interface Design by Collaborative Sketching
9
Available UI Sketching applications
Single-platform, targeting multi-platformDamask [Lin, 2002]
14/06/2012
User Interface Design by Collaborative Sketching
10
Related work
14/06/2012
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
User Interface Design by Collaborative Sketching
12
Requirements
R1 - Support sketch production and visualization
14/06/2012
User Interface Design by Collaborative Sketching
13
Requirements
R2 - Support session storage and retrieval
14/06/2012
User Interface Design by Collaborative Sketching
14
Requirements
R3 - Support private/public production of sketches
14/06/2012
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
User Interface Design by Collaborative Sketching
16
Requirements
R5 - Provide a fine view of a drawing
14/06/2012
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/
User Interface Design by Collaborative Sketching
18
GAMBIT
14/06/2012
Gatherings and Meetings with Beamers and Interactive Tablets
User Interface Design by Collaborative Sketching
19
GAMBIT
14/06/2012
http://gambit-alpha.appspot.com
User Interface Design by Collaborative Sketching
20
GAMBIThttp://gambit-alpha.appspot.com
14/06/2012
User Interface Design by Collaborative Sketching
21
GAMBIT
14/06/2012
User Interface Design by Collaborative Sketching
22
GAMBIT Architecture
Multi-platform
14/06/2012
Cloud-based
AppEngine (Google)AppScale (Open Source)
HTML5
User Interface Design by Collaborative Sketching
23
GAMBIT Architecture
14/06/2012
User Interface Design by Collaborative Sketching
24
GAMBIT
14/06/2012
present
future
User Interface Design by Collaborative Sketching
25
Preliminary Study
9 designers
Large: Tabletop
Medium: iPad
Small: iPhone
14/06/2012
User Interface Design by Collaborative Sketching
26
Preliminary Study
14/06/2012
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
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
User Interface Design by Collaborative Sketching
29
Demo session
14/06/2012
User Interface Design by Collaborative Sketching
30
Demo session
14/06/2012
User Interface Design by Collaborative Sketching
31
Demo session
14/06/2012
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
User Interface Design by Collaborative Sketching
33
Conclusion
Not a replacement, but an addition
14/06/2012
User Interface Design by Collaborative Sketching
34
Thank you very much for your attention
14/06/2012
Gambit (http://gambit-alpha.appspot.com)
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
Top Related