User Interface Design by Collaborative Sketching


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Good morning everyone, for those who were not able to see it yesterday during the demo, this work describes a multi-platform system for prototyping user interfaces, called GAMBIT.It is a system aimed at supporting the early stages of UI design using electronic sketching, just like many tools already did in the past, but with the main difference that here the sketching activity is performed at different devices while using the same system on all of those devices. We will be able to prototype an interface for a tablet application using the same tablet
  • I will talk about the context of the work, which is Sketching for UI design and prototyping. Then I will talk about the requirements we identified by observing some design sessions In Belgian companies. Then I will talk about gambit and the very first study we conducted to assess designer’s preferences regarding different devices for sketching. I will then show some directions for gambit in the future, and conclude
  • I’m a researcher at Louvain Interaction Lab, in Belgium. I’m currently involved on a investigation of Multi-platform collaborative sketching for designing User Interfaces. And im involved in two projects: Gambit and Eclipse Sketch.
  • So the idea of the system came up by observing paper prototyping sessions in Belgian companies. From those sessions we were able to design the system in order to mimic that setup. Regardeless of the client or the project, those sessions always proceeded with Sketching and Prototyping.
  • So The two main sides of this work are Sketching and Prototyping. We consider Sketching (for design) as a cyclic process of drawing, reviewing and refining..Schon describes that as a process in which the designers engage on a conversation with the object they are designing. And that’s an important concept to keep in mind when you don’t want to interrupt the designer’s flow of thought. Some sketching tools had considered that like Denim and Calico and they were very sucessful. We want to do the same.
  • Sketching has three functions: individual idea generation, we can call it visual thinking, is when you put ideas on paper to reflect about them.explaining ideas to others, when you externalize an idea in order to explain it to someone elserecalling previous designs and ideas, since they are already externalized and can be easily fetched
  • Prototyping, on the other hand, is very efficient for avoiding redesigning. Mainly because they allow users to give a more precise feedback about the design. It gives designers the best possible way of seeing how an idea will behave in the real world.
  • The problem is that In the real world there are a lot of different devices, different resolutions and different context of use. It’s a big problem to develop interfaces on that diverse context.
  • Some tools had approached the problem of multi-platform interfaces, like DAMASK. Here we have separate flows for different platforms. But the majority of tools available today, like DAMASK, are single-user and single-platform. That means that they cannot be used on different devices, even though they are targeted at designing for different devices.
  • In the paper there is a comparison table explaining the related work.
  • So finally the sessions from which we gathered the requirements usually proceeded withsketching and papers organized onto a wall, and the designers then took pictures for recalling what was discussed. Based on those sessions we constructed a list of requirements, with 6 initial requirements for supporting that kind of setup.
  • First, to produce sketches for visualization and discussion. The designers also simulated the experience. On that photo, there is a barcode scanner on the table. That specific system needed this kind of interaction
  • Second, to support session storage and retrieval.The designers on that company either took pictures of the produced interfaces for future meetings, or even took the same sheets of paper and placed again on the wall, to continue from where they stopped
  • Third:the public or private production of sketches. This one was based on some interviews. A designer can be confident enough to sketch in front of others, but we were told that its often not the case for users and stakeholders, which are very often involved in the process. They sometimes wanted to sketch privately for showing some idea later.
  • The fourth requirement is to be able to see and discuss the design by refering to the sketches placed on the wall. So to provide a broad view of drawings.
  • Also to be able to discuss the design separately.
  • And the last one is fidelity. Some projects on those companies used pictures OF REAL interfaces to build the prototypes. It was often the case when they need to re-design an interface.
  • So finally Gambit was designed to support co-located collaborative design of user interfaces, doing an analogy to the scenarios observed at design sessions
  • We were aiming at producing a system that could mimic the sheets of paper on a wall, so we used a projection of the drawings. The designers would gather around a table, sketch together using different devices and discuss. The idea is to be less system-centric, and more oriented to support the design itself.
  • We built it using HTML5, so we can run it on browsers on large powerful devices, like a desktop. or on tablets and smartphones using the browser itself or a wrapper application that it is a browser, but only shows the system (not the address bar, etc).
  • The projection can be just a browser opened on the page. It can be also a touch sensitive monitor. We could have a lot of different projections as well.
  • Speaking about the architecture:It is then multi-platform, it’s a single system running on many platforms, and it is cloud based, so it can be deployed at AppEngine from Google or to AppScale.
  • As an overview, we have the gambit server which receives AJAX requests from different users connected to them and manage the collaboration.
  • Today we have already the production of sketches and collaboration, and we are heading towards later generation of user interfaces in the future. But we need first to support the design in the early stages, that’s why the generation is a future point.
  • We conducted an initial study just to validate the requirements and test different devices on a design session. We asked three groups of designers to prototype an application during half an hour, and after 10 minutes we changed to device type, so they could test all three. This big tabletop, in the first figure is a smartboard with projection from above. The other ones are an ipad and an iphone
  • This is the wall, the designers controlled it using a tablet.
  • We then aske them to fill an IBM CSUQ questionnaire just for evaluating how the designers perceived the system in overall. And we asked them to give their opinions.
  • I will not get into detail about the results of the questionnaire, but the most significant observations we did is thatThe designers didn’t liked sketching on small devices (because of the size and the performance), but pointed the value of testing and seeing how the interface would look like in oneThe designers discussed more about the UI itself with the large tabletop and more about behavior with the smaller devicesOf course all of that need to be confirmed in a larger study, but already points some direction
  • We had a great demo yesterday. Unfortunately we didn’t used a projector, instead we used a big monitor to serve as the wall. Here we have put two devices: a laptop connected to a wacom and an android tablet.
  • People could sketch,share and move the virtual sheets of paper around
  • And they connected their own devices as well to collaborate. We can have as many devices as we want, and this is important, since the designers and users could use their own tablets to sketch and test things.
  • We recognize that the experiment was not the ideal, due to the short number of people and the time spent.We think that to observe a tool like gambit in a real context, with real designers, a way more extensive study is needed. The observations we want to do are developed over time.In the short term we will finish the prototyping part of the system, allowing interaction flows and prototyping on different devices, and then make some more observationsRight now we are not worried about generation of user interfaces but on properly supporting the initial steps on UI design.
  • GAMBIT is not intended to be a replacement of the current design processes, but it would be one element in addition to a design session. We are expecting that by having a more complete prototype at hand, designers would discuss more about how the interface will perform on that specific device. By allowing designers and users to interact with this prototype, we are aiming at enriching the conversation around a solution.
  • User Interface Design by Collaborative Sketching

    1. 1. Ugo Sangiorgi – François Beuvens – franç Jean Vanderdonckt – 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 ( Eclipse 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 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 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 ( 34
    35. 35. Gambit: UsiXML (User Interface eXtensible Markup Language): & Louvain Interaction Laboratory:, www.lilab.be14/06/2012 35