Media Design course

Autumn 2016

Producing Design Solutions

Prototyping

INDEX

1. Introduction

2. Early visualizations

3. Prototyping

4. Low-fi prototyping

5. Medium-high fidelity prototyping

6. Key ideas about prototyping

1. INTRODUCTION

A prototype is an early embodiment of a design concept.

Definition

Yang and Epstein, 2005

1. INTRODUCTION

•  Proof-of concept prototype: helps to better understand what approach to take in

designing a product a the early stages of the design process

•  Proof-of-product prototype: clarifies a design’s physical embodiment and production

feasibility.

Prototype purposes (Ullman, 2003)

•  Proof-of-process prototype: shows that the production methods and materials can

successfully result in the desired product.

•  Proof-of-production prototype: demonstrates that the complete manufacturing process

is effective.

1. INTRODUCTION

EARLY VISUALIZATIONS

•  Sketches

LOW-FIDELITY PROTOTYPES

•  Wireframes

•  Paper prototypes

•  Storyboards

MEDIUM – HIGH FIDELITY PROTOTYPES

•  Clickthrough prototypes

•  Mock-ups

Prototypes level of fidelity

1. INTRODUCTION

•  Parallel design is a method/technique in which several people create an initial design

from the same set of requirements.

Parallel design

•  The aim is to assess the different ideas before settling on a single concept for

continued development.

Benefits: !

•  Several ideas can be generated quickly and cost effectively

•  Allows compressing the concept development schedule

•  The concepts generated can often be combined so that the final solution

benefits from all ideas proposed.

2. EARLY VISUALIZATIONS

Sketches show early ideas. The main objective is to explore different design possibilities.

Sketches Feeler prototype

Sketches

3. PROTOTYPING

According to Sanders and Stappers (2008), prototypes:

•  Are physical manifestations of ideas or concepts. They range from rough (giving the overall idea only) to finished (resembling the actual end result).

•  Give form to an idea, and to explore technical and social feasibility.

•  Prototypes can be made from a very wide array of materials including clay, foam, wood, plastic, simple digital and electronic elements.

•  Help to envision their ideas and to display and to get feedback on these ideas from other stakeholders.

•  Serve as design tools. End-users may use the prototypes during evaluative research events.

Ach So! app wireframe

A wireframe is a basic and low quality sketch of the Information Architecture of a user interface design. It is used to show a fast design/sketch and allow communication between the team members, as well as users and clients.

Wireframes

4. LOW-FI PROTOTYPING

Advantages (Snyder, 2003):

•  Fast and inexpensive

•  Identifies problems before they are coded

•  Evokes more and better feedback from the users

•  Helps developers think creatively

•  Gets users and other stakeholders involved in the process

•  Fosters team work and communication

Paper prototyping

4. LOW-FI PROTOTYPING

Reflex app paper prototype Feeler paper prototype

4. LOW-FI PROTOTYPING

Paper prototyping

https://www.youtube.com/watch?v=GrV2SZuRPv0

When preparing a test with a paper prototype it’s necessary to take into account:•  Objectives (what needs to be tested?)•  Tasks (what would be the user asked to do?)•  Organization (facilitation, documentation…)

4. LOW-FI PROTOTYPING

Paper prototyping

Social Augmented Reality app storyboard

 A storyboard is a representation of the user interface in which a set of behaviors are implemented. Storyboard are more conceptual than paper prototypes and retain most of the information flow.

Storyboards

4. LOW-FI PROTOTYPING

Prototype image from Sketching user experiences (Buxton, 2010).

Storyboards

4. LOW-FI PROTOTYPING

Clickthrough prototypes

5. MEDIUM – HIGH FIDELITY PROTOTYPING

Screen capture of Feeler clickthrough prototype

Screen capture of Feeler clickthrough prototype

Clickthrough prototypes

5. MEDIUM – HIGH FIDELITY PROTOTYPING

Ach So! app mock-ups

Mock-ups

Static visualization that aims to represent the “final” prototype.

5. MEDIUM – HIGH FIDELITY PROTOTYPING

6. KEY IDEAS ABOUT PROTOTYPING

Square 1, v.1 prototypes

Continuous iteration

Square 1, v.2

Testing solutions since the beginning

Development process of SoAR

6. KEY IDEAS ABOUT PROTOTYPING

Tests of Feeler prototypes

6. KEY IDEAS ABOUT PROTOTYPING

Testing solutions since the beginning

FURTHER READINGS

This material uses Creative Commons License

Recognition – Share alike.

Buxton, B. (2010). Sketching user experiences: getting the design right and the right design. Morgan Kaufmann.

Houde, S., & Hill, C. (1997). What do prototypes prototype. Handbook of human-computer interaction, 2, 367-381.

Nielsen, J., & Faber, J. M. (1996). Improving system usability through parallel design. Computer, 29(2), 29-35.

Sanders, E. B. N., & Stappers, P. J. (2008). Co-creation and the new landscapes of design. Co-design, 4(1), 5-18.

Snyder, C. (2003). Paper prototyping: The fast and easy way to design and refine user interfaces. Morgan Kaufmann.

Poldoja, H. (2015). User Interface Prototyping Techniques: Low Fidelity Prototyping. http://www.slideshare.net/hanspoldoja/user-interface-prototyping-techniques-low-fidelity-prototyping

Ullman, D. G. (1992). The mechanical design process (Vol. 2). New York: McGraw-Hill.

Walker, M., Takayama, L., & Landay, J. A. (2002, September). High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes. In Proceedings of the human factors and ergonomics society annual meeting (Vol. 46, No. 5, pp. 661-665). SAGE Publications. 

FURTHER READINGS

This material uses Creative Commons License

Recognition – Share alike.

Warfel, T. Z. (2009). Prototyping: a practitioner's guide. Rosenfeld Media.

Yang, M. C. (2005). A study of prototypes, design activity, and design outcome. Design Studies, 26(6), 649-669.