(Dansk) How to: fingermaling

0 Comments | This entry was posted on Apr 04 2011

Prototyping early in the designprocess

0 Comments | This entry was posted on Apr 03 2011

This blog post will be somewhat different than our usual project news and descriptions. While looking through some of our projects we saw a tendency to use prototypes or bodystorming early in our designprocesses. We would like to share our experiences with this approach and show several concrete examples from our work. Maybe it can help other students with their first designprocesses or enlighten anyone interested in design 🙂

The prototypes we will show here are made and used very early in the design proces. Some of the prototypes are used to conduct preliminary tests with users and others are simply as an object for discussion inside the design team. The prototypes, for inside the designteam, are used as a generative method by communicating ideas and agreeing on them. It also enables us to visualize and imagine what it would be like to use the product we are designing. The simplicity of the prototype enables us to quickly and cheaply adjust any aspect and allows us to improve it as we get new ideas for how to solve problems in the concept. These early prototypes are usually focused on an aspect of the final product; e.g. the interaction, the physical structure or the overall concept.
Below we have tried to categorize some early prototypes from our projects. Each category contains a textual description of what it is and what those kind of prototypes are used for, together with concrete examples from our projects.

Interface Paper Prototypes

One type of prototypes are paper prototypes. These prototypes are typically used when designing interfaces and are quick mock-ups of how the interfaces could be structured. It is usually not about the specific graphics but more about how the interface can be structured to provide the necessary functionality in a usable and intuitive way.
A paper prototype is made simply by sketching the interface on pieces of paper and by using multiple pieces of paper; one for every element of the interface. By sketching each element on a different piece of paper it is possible to easily experiment with different representations for each element or different structuring of the interface.
The paper prototype is mostly used for testing how the interface would work. By having all the pieces of paper with the interfaces sketched on them, you can simulate what would happen when you press the different buttons etc. The testing of the interface often involves users but doesn’t necessarily have to – though we would recommend it, whenever possible.

As an example of a paper prototype we have used the method to design a Flash interface for a project in a course called Interaction Design. Part of our product was an interface for browsing and reading/hearing a recipe. The paper prototype enabled us to focus on and visualize the interface together in the group, and during an user test we identified flaws and corrected them during the test and afterwards. The prototype and our iterative development on it made us able to specify exactly how we wanted the interface to look like before we went ahead and implemented it, which often saves a lot of wasted implementation – the earlier mistakes are caught, the better. The paper prototype can be seen in the gallery below, together with some earlier sketching on a whiteboard (which was the starting point for making the paper prototype):

Video Prototypes

Video prototypes is also a way of making an early prototype. These prototypes are used for visualizing, showing and communicating through, and not for e.g. testing with users, as the paper prototypes are.
A video prototype is a recording of people (often the designers) acting out a scenario of what it would be like to use the final product. The acting out can involve quick mock-ups made out of pretty much anything that is easily accesible during that time of the design proces. We usually use whatever items we can find that may substitute or symbolize different elements of the product/concept (e.g. sketchings on whiteboards, post-it notes, clothing). The video data can be edited afterwards if necessary, for example by adding sound effects which would also be in the usage of the final product.
A finished videoprototype can be used to show other people (in our case Lecturers) how the final product might be used. A quickly performed videoprototype might also just be to document initial thoughts and bodystormings about the interactions and the functionality of the prototype.

The first example of a videoprototype is from our Music Cubes project. This videoprototype was one of the first visualizations of the concept, and we used it to document and agree on what our final prototype should be able to do, and afterwards also to explain the concept to our Lecturer. In the video you see Jonas as the user and Tobias as the “system”. The interesting thing is the simplicity of the tools we used; a whiteboard for drawing stationary objects and post-it notes for simulating moving balls, which made us able to act out the concept very quickly after we came up with the idea.

This second example of a videoprototype is from our project; James conductor suit project. This videoprototype was later in our proces at a time where we were beginning to have an idea of the concept and most of the gestures we wanted to use. Again we made a videoprototype in order to show our concept to others attending the same course and our Lecturer, in order to be able to more easily explain what the final interaction might look like. As you can see in the video we hadn’t decided on what the physical appearance should be, but in order to show that the prototype would be implemented in some sort of clothing, we decided to use black clothing on the bodyparts that were used to control the interaction. It is also an example of a videoprototype where we did some editing by adding sounds, since these were essentiel to our concept.

Physical Prototypes

This category is less well-defined than the rest, and covers different kinds of early physical prototypes. A physical prototype can be a mock-up of the final prototype. The mock-up can be made without any kind of technology and it can be made to test different aspects of the concept. As with many of the other kinds of early prototypes they can be used for user testing or for trying different approaches to a certain aspect, e.g. different ways of interacting with the product.

The first example of a physical prototype is from our MuMiT project where we made a quick mock-up of the interaction for our game to get a feeling of how the gameplay would be like and to see how the elastic band would react to the ball in order to be able to use that in the game software. This is an another good example of how simple means can allow the designer to actually try out different options and thereby reveal the qualities and the disadvantages instead of just talking about it.

Another example of a physical prototype is from our Bachelor project where we made a prototype that some might call a low fidelity prototype. This was used to compare different ideas for one of the two prototypes we wanted to make. We made the low-fi prototype out of what we could find around us, that would enable us to visualize the functionality sufficiently enough for a user to understand and be able to try it out. We combined the physical parts (which was clay and a slider) with something similar to a paper prototype in order to be able to update the low-fi prototype whenever the user or the system would change something. This way we were able to let the user try it out and observe and interview what was good about the concept and what wasn’t. Below here you can see a picture of what it looked like (unfortunately we didn’t take pictures of the low-fi prototype we ended up choosing as the best solution for the concept):

Yet another different kind of physical prototype is one focusing on the technical aspect of a prototype. This example is from our project; James conductor suit project. We had already made an early video prototype (which you can see in the category “Video Prototypes”) and one of the next steps were to test how the technology, that were available to us, could support the functionality we wanted to implement. In order to try it out we bought a suit for painting in, and mounted all our sensors onto that. This enabled us to focus on the sensors and since we only mounted them with ducttape it was easy to replace them and try out different options for capturing the data we needed.

3D Model Prototypes

The last category of prototypes we will present for you in this post is 3D Model Prototypes. As the name suggests they are 3D Models created in some sort of CAD software. These prototypes is purely visual and cannot be interacted with, other than printed out and used to annotate and sketch on. They can be used to try out different physical appearances before actually building the final prototype. And they are also good for showing the scale of the designed object by for example placing people or know objects next to it. Just as the video prototypes they are purely for visualizing, showing and communicating a suggestion for the design.

Below are pictures of 3D models from our MuMiT project. You can see the progression in the physical design from picture to picture until we found the final design (the first picture shown is the final design though). We used the 3D models to visualize the physical design and for showing what it would look like with several tables connected and people around it. The 3D model was also necessary since we didn’t have enough time or materials to actually build a table that looked like the design we wanted.