Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ugo Sangiorgi – ugo.sangiorgi@uclouvain.be                François Beuvens – françois.beuvens@uclouvain.be             Jea...
•      Sketching for UI design and prototyping  •      Requirements  •      GAMBIT  •      Preliminary Study  •      Direc...
Ugo Sangiorgi PhD Candidate and Research Assistant at Louvain Interaction Lab – Belgium Multi-platform Collaborative Sketc...
14/06/2012   4
Cyclic process of drawing, reviewing, refining              Designers engage on a conversation with the artifact, iterativ...
Functions of sketching [Van der lugt, 2002]:                      Individual idea generation (visual thinking)            ...
• Avoids redesign             • Precise user feedback             • Test (simulate) how the solution will behave in the re...
14/06/2012   8
Single-platform, targeting multi-platform                 Damask [Lin, 2002]14/06/2012                                   9
14/06/2012   10
R1 - Support sketch             production and visualization             R2 - Support session             storage and retr...
R1 - Support sketch production and visualization14/06/2012                                          12
R2 - Support session storage and retrieval14/06/2012                                    13
R3 - Support private/public production of sketches14/06/2012                                            14
R4 - Provide a broad view of the drawings (like papers arranged on a wall)14/06/2012                                      ...
R5 - Provide a fine view of a drawing14/06/2012                               16
R6 - Support the UI design with different level of fidelities              http://www.uxbooth.com/blog/concerning-fidelity...
Gatherings and Meetings with Beamers and Interactive Tablets14/06/2012                                                    ...
http://gambit-alpha.appspot.com14/06/2012                          19
http://gambit-alpha.appspot.com14/06/2012                          20
14/06/2012   21
Multi-platform     Cloud-based                       AppEngine (Google)                       AppScale (Open Source)      ...
14/06/2012   23
present                       future14/06/2012              24
9 designers  Large: Tabletop  Medium: iPad  Small: iPhone14/06/2012          25
14/06/2012   26
I strongly disagree       I disagree   I am so so   I agree   I strongly agree                                            ...
•     Small devices were rejected for                 47,89                                                               ...
14/06/2012   29
14/06/2012   30
14/06/2012   31
•     Short Term             •   Observe design sessions with paper + gambit             •   Allow building of interaction...
Not a replacement, but an addition14/06/2012                            33
Gambit (http://gambit-alpha.appspot.com)14/06/2012                                              34
Gambit: http://gambit-alpha.appspot.com UsiXML (User Interface eXtensible Markup Language): www.usixml.eu & www.usixml.org...
Upcoming SlideShare
Loading in …5
×

User Interface Design by Collaborative Sketching

1,553 views

Published on

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.

Published in: Technology, News & Politics
  • Be the first to comment

User Interface Design by Collaborative Sketching

  1. 1. Ugo Sangiorgi – ugo.sangiorgi@uclouvain.be François Beuvens – françois.beuvens@uclouvain.be Jean Vanderdonckt – jean.vanderdonckt@uclouvain.be Louvain Interaction Laboratory (Lilab) Louvain School of Management Université catholique de Louvain , Place des Doyens, 1 B-1348 Louvain-la-Neuve (Belgium)14/06/2012 1
  2. 2. • Sketching for UI design and prototyping • Requirements • GAMBIT • Preliminary Study • Directions • Conclusion14/06/2012 2
  3. 3. Ugo Sangiorgi PhD 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) @ugosan14/06/2012 3
  4. 4. 14/06/2012 4
  5. 5. 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)14/06/2012 5
  6. 6. Functions of sketching [Van der lugt, 2002]: Individual idea generation (visual thinking) Evaluating others’ ideas / explaining to others Recalling previous ideas /organizing14/06/2012 6
  7. 7. • 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/14/06/2012 7
  8. 8. 14/06/2012 8
  9. 9. Single-platform, targeting multi-platform Damask [Lin, 2002]14/06/2012 9
  10. 10. 14/06/2012 10
  11. 11. R1 - 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 fidelities14/06/2012 11
  12. 12. R1 - Support sketch production and visualization14/06/2012 12
  13. 13. R2 - Support session storage and retrieval14/06/2012 13
  14. 14. R3 - Support private/public production of sketches14/06/2012 14
  15. 15. R4 - Provide a broad view of the drawings (like papers arranged on a wall)14/06/2012 15
  16. 16. R5 - Provide a fine view of a drawing14/06/2012 16
  17. 17. R6 - Support the UI design with different level of fidelities http://www.uxbooth.com/blog/concerning-fidelity-and-design/14/06/2012 17
  18. 18. Gatherings and Meetings with Beamers and Interactive Tablets14/06/2012 18
  19. 19. http://gambit-alpha.appspot.com14/06/2012 19
  20. 20. http://gambit-alpha.appspot.com14/06/2012 20
  21. 21. 14/06/2012 21
  22. 22. Multi-platform Cloud-based AppEngine (Google) AppScale (Open Source) HTML514/06/2012 22
  23. 23. 14/06/2012 23
  24. 24. present future14/06/2012 24
  25. 25. 9 designers Large: Tabletop Medium: iPad Small: iPhone14/06/2012 25
  26. 26. 14/06/2012 26
  27. 27. I strongly disagree I disagree I am so so I agree I strongly agree Q19 Q18 Q17 Q16 Q15 29,26 36,05 33,97 Q14 40,37 40,00 42,2247,89 45,93 Q13 60,93 Other Q12 Wall screen Q11 Tabletop 7,15 Q10 32,96 Tablet 27,52 iPad Q910,43 35,99 24,81 19,34 iPhone Q8 37,78 Q7 38,5920,46 15,93 Q6 19,04 20,74 15,09 19,00 Q5 13,21 0,28 Q410,43 4,85 2,22 3,46 4,67 1,56 Q3 18,22 23,15 10,40 12,59 18,897,07 8,46 8,16 11,48 Q23,72 2,84 4,23 2,22 2,90 1,22 0,44 1,11 0,56 0,22 0,00 Q1 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 1 2 3 4 5 6 7 8 914/06/2012 27
  28. 28. • Small devices were rejected for 47,89 36,05 33,97 29,26 45,93 40,37 40,00 42,22 60,93 Other sketching but accepted for Wall screen Tabletop 7,15 32,96 Tablet 27,52 iPad 10,43 35,99 24,81 19,34 iPhone 37,78 38,59 prototyping 20,46 15,93 19,04 20,74 15,09 19,00 13,21 0,28 10,43 4,85 2,22 3,46 4,67 1,56 18,22 23,15 10,40 12,59 18,89 7,07 8,46 8,16 11,48 3,72 2,84 4,23 2,22 2,90 1,22 0,44 1,11 • 0,56 0,22 0,00 Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9 Designers discussed • about UI with the large tabletop I strongly disagree Q19 I disagree I am so so I agree I strongly agree • Q18 About behavior with smartphones and Q17 Q16 tablets Q15 Q14 Q13 Q12 Q11 Q10 Q9 Q8 Q7 Q6 Q5 Q4 Q3 Q2 Q1 1 2 3 4 5 6 7 8 914/06/2012 28
  29. 29. 14/06/2012 29
  30. 30. 14/06/2012 30
  31. 31. 14/06/2012 31
  32. 32. • 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 devices14/06/2012 32
  33. 33. Not a replacement, but an addition14/06/2012 33
  34. 34. Gambit (http://gambit-alpha.appspot.com)14/06/2012 34
  35. 35. 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.be14/06/2012 35

×