Introduction to Prototyping: What, Why, How
0 likes1,428 views
The document provides an overview of interaction design and prototyping methodologies, emphasizing the importance of user involvement in creating usable products. It covers various prototyping techniques, their purposes, and exercises for practical application, such as redesigning an ATM interface. Additional brainstorming sessions introduce concepts like playful experiences and contextual awareness in interactive systems.
![Prototyping: what!
In
interac3on
design
it
can
be:
a
series
of
screen
sketches
a
storyboard,
i.e.
a
cartoon-‐like
series
of
scenes
a
Powerpoint
slide
show
a
video
simula3ng
the
use
of
a
system
a
lump
of
wood
(e.g.
PalmPilot)
[…]
In
prac3ce,
designers
prototype:
Technical
issues
Work
flow,
task
design
Screen
layouts
and
informa3on
display
Difficult,
controversial,
cri3cal
areas
8](https://image.slidesharecdn.com/prototypingintro-130123052059-phpapp01/85/Introduction-to-Prototyping-What-Why-How-8-320.jpg)
![Issues to Consider (Always…!)!
Usability
Feasibility
(cost,
effort)
Robustness
(can
withstand
different
condi3ons)
Scalability
(can
change
in
size
or
scale)
Privacy
Security
Safety
(health)
Maintainability
Durability
Trust
Playfulness
Originality
Transparency
Intelligibility
Extensibility
Likeability
Enjoyability
Collabora3ve
Compe33ve
22 […]](https://image.slidesharecdn.com/prototypingintro-130123052059-phpapp01/85/Introduction-to-Prototyping-What-Why-How-22-320.jpg)
Introduction to Prototyping: What, Why, How
- 1. Intelligent Interactive Systems (2012-2013): Introduction to Prototyping: what, why, how! Abdallah ‘Abdo’ El Ali http://staff.science.uva.nl/~elali/ Some slides taken and adapted from “Interac3on Design: Beyond Human-‐Computer Interac3on” (Ch. 11) hCp://www.id-‐book.com/
- 2. Outline! 1. What is Interac3on Design? 2. Prototyping: what why how 3. Group exercise: sketching interac3on with ING’s ATM 4. Group presenta3ons 2
- 3. 1 2 3 3
- 4. 4
- 5. Good Design! Need to take into account: Who the users are, their needs, and their past experiences What ac3vi3es are being carried out (e.g., speaking, making a phone call, moving cursor, etc.), and their granularity Where the interac3on is taking place Consider: calling from cell phone vs. calling from phone booth 5
- 6. What is this?! Juicy Salif (Philip Starck, 1990) 6
- 7. What is Interaction Design?! Designing interac3ve products to support the way people communicate and interact in their everyday and working lives Sharp, Rogers and Preece (2007) Goals: 1. Develop usable products Usability means easy to learn, effec3ve to use and provide an enjoyable experience 2. Involve users in the design process 7
- 8. Prototyping: what! In interac3on design it can be: a series of screen sketches a storyboard, i.e. a cartoon-‐like series of scenes a Powerpoint slide show a video simula3ng the use of a system a lump of wood (e.g. PalmPilot) […] In prac3ce, designers prototype: Technical issues Work flow, task design Screen layouts and informa3on display Difficult, controversial, cri3cal areas 8
- 9. Prototyping: why! Prototyping: allows evalua3on and feedback allows stakeholders to see, hold, interact with a prototype more easily than a document or a drawing allows team members to communicate effec3vely lets you test out ideas for yourself encourages reflec3on 9
- 10. Prototyping: how! Low-‐fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboard Is quick, cheap and easily changed Examples: Sketches of screens and task sequences using ‘Post-‐it’ notes, Storyboards Storyboards Ogen used with scenarios, bringing more detail, and a chance to role play Series of sketches used early in design showing how a user might progress through a task using the device Sketching Important for low-‐fidelity prototyping Don’t be inhibited by drawing ability 10
- 11. Storyboard Example! Goal: design a rich content experience for a mobile telecoms operator company Macro vs. micro view 11
- 12. Sketching Exercise (1)! Design Scenario: You are being asked to come up with a new design for the ING ATM machines. Their main goal is to improve their customer experience of drawing out money on a day-‐to day basis. To do that, they would like to have their en3re ATM interface redesigned. Task: Reflect on the basic opera3ons of the ATM, the seing, and how a typical person interacts with the machine, and sketch out the interac3on. How can you embed intelligent techniques in the process? E.g., context-‐awareness, vision-‐sensing, speech-‐recogni3on, etc. 12
- 13. Sketching Exercise (2)! Work in groups of X, order s3cky post-‐its on an interac3on 3meline Blue post-‐its: what the person is doing Pink post-‐its: what the ATM is doing Yellow post-‐its: other relevant factors 13
- 14. Group Presentations (3 min. elevator pitch!) 1 positive point 1 negative point (from audience)! 14
- 15. Questions?! 15
- 16. References! Sharp, H., Y. Rogers and J. Preece. (2007). Interac(on Design: Beyond Human−Computer Interac(on. New York: John Wiley and Sons, second edi3on, chapter 11. 16
- 17. Intelligent Interactive Systems (2012-2013): Brainstorming! Abdallah ‘Abdo’ El Ali http://staff.science.uva.nl/~elali/
- 18. Outline! 1. PLEX cards exercise 2. Group presenta3ons 18
- 19. Topics! Context-‐awareness & Ambient Intelligence Speech Vision Biometrics Home Systems (e.g., interac3ve TVs) Public Displays Robo3cs Affec3ve Compu3ng Wearables Mobile 19
- 20. PLEX Brainstorming Cards! Developed by Nokia Research Center Finland (Espoo) PLEX: Playful Experiences Framework Design for playfulness in interac3ve systems Target: researchers, designers, stakeholders Deck of 22 cards 20
- 21. PLEX Exercise: Rules! Each group receives 3 random PLEX cards. Player 1 starts by placing her card face up on the table, and then explores an idea related to both the topics and the card. Player 2 and player 3 listen carefully and engage in discussion. When one of them feels his/her card is relevant to the discussion, s/he places her card on the table. Record your ideas. CONTEXT: interac3ve system for your final report You have 20-‐25 min. 21
- 22. Issues to Consider (Always…!)! Usability Feasibility (cost, effort) Robustness (can withstand different condi3ons) Scalability (can change in size or scale) Privacy Security Safety (health) Maintainability Durability Trust Playfulness Originality Transparency Intelligibility Extensibility Likeability Enjoyability Collabora3ve Compe33ve 22 […]
- 23. PLEX Exercise: System Design! Work in your chosen group (USE ONLY ONE COLOR) Blue post-‐its: user(s) interac3on Yellow post-‐its: system(s) interac3on Pink post-‐its: nuts n’ bolts (technology: algorithms, mechanisms) – use your search engines! Orange post-‐its: Perceived design improvements (at least 1!) Red post-‐its: Perceived design boCle-‐necks (at least 1!) Green post-‐its: other relevant factors (social context, climate, etc.) Use ac3on or state keywords where applicable 23
- 24. Group Presentations Elevator pitch (3 min.) (at least) 1 positive point 1 negative point! 24
- 25. Questions?! 25