User Interface Design by Collaborative Sketching
•Télécharger en tant que PPTX, PDF•
4 j'aime•1,218 vues
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.
Recommandé
Recommandé
Contenu connexe
Plus de Jean Vanderdonckt
Plus de Jean Vanderdonckt (20)
Dernier
Dernier (20)
User Interface Design by Collaborative Sketching
- 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. • Sketching for UI design and prototyping • Requirements • GAMBIT • Preliminary Study • Directions • Conclusion 14/06/2012 2
- 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) @ugosan 14/06/2012 3
- 4. 14/06/2012 4
- 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. Functions of sketching [Van der lugt, 2002]: Individual idea generation (visual thinking) Evaluating others’ ideas / explaining to others Recalling previous ideas /organizing 14/06/2012 6
- 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. 14/06/2012 8
- 9. Single-platform, targeting multi-platform Damask [Lin, 2002] 14/06/2012 9
- 10. 14/06/2012 10
- 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 fidelities 14/06/2012 11
- 12. R1 - Support sketch production and visualization 14/06/2012 12
- 13. R2 - Support session storage and retrieval 14/06/2012 13
- 14. R3 - Support private/public production of sketches 14/06/2012 14
- 15. R4 - Provide a broad view of the drawings (like papers arranged on a wall) 14/06/2012 15
- 16. R5 - Provide a fine view of a drawing 14/06/2012 16
- 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. Gatherings and Meetings with Beamers and Interactive Tablets 14/06/2012 18
- 21. 14/06/2012 21
- 22. Multi-platform Cloud-based AppEngine (Google) AppScale (Open Source) HTML5 14/06/2012 22
- 23. 14/06/2012 23
- 24. present future 14/06/2012 24
- 25. 9 designers Large: Tabletop Medium: iPad Small: iPhone 14/06/2012 25
- 26. 14/06/2012 26
- 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,22 47,89 45,93 Q13 60,93 Other Q12 Wall screen Q11 Tabletop 7,15 Q10 32,96 Tablet 27,52 iPad Q9 10,43 35,99 24,81 19,34 iPhone Q8 37,78 Q7 38,59 20,46 15,93 Q6 19,04 20,74 15,09 19,00 Q5 13,21 0,28 Q4 10,43 4,85 2,22 3,46 4,67 1,56 Q3 18,22 23,15 10,40 12,59 18,89 7,07 8,46 8,16 11,48 Q2 3,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 9 14/06/2012 27
- 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 9 14/06/2012 28
- 29. 14/06/2012 29
- 30. 14/06/2012 30
- 31. 14/06/2012 31
- 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 devices 14/06/2012 32
- 33. Not a replacement, but an addition 14/06/2012 33
- 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.be 14/06/2012 35
Notes de l'éditeur
- 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.