Date post: | 14-Apr-2017 |
Category: |
Design |
Upload: | eva-durall |
View: | 113 times |
Download: | 0 times |
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
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
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
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.