Download - Prototyping: What? Why? and How?
![Page 1: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/1.jpg)
Prototyping: What? Why? and How?
Emma J. Rose UW Technical Communication
![Page 2: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/2.jpg)
Emma J. Rose - UWTC
Today we’ll talk about What is a prototype Why and how prototypes are used How this applies to you Some examples
…and, if time permits, we’ll build a prototype
![Page 3: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/3.jpg)
Emma J. Rose - UWTC
What do you think when you hear the word “prototype”?
![Page 4: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/4.jpg)
Emma J. Rose - UWTC
What is a prototype An original … what other forms will be
developed from A physical model A design of some part (or entire) system
![Page 5: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/5.jpg)
Emma J. Rose - UWTC
What do prototypes look like? They are “mock ups” Rough drafts or sketched of a design Can be just a drawing or have extended
functionality A work in progress
![Page 6: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/6.jpg)
Emma J. Rose - UWTC
We use prototypes all the time User-centered design (UCD)
Is a philosophy and an approach to creating products and processes
Puts the user in the center of the design decisions
Usability Is an essential part of UCD Helps evaluate a product to see if it’s working
![Page 7: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/7.jpg)
Emma J. Rose - UWTC
Why do we use prototypes? To get a sense of how a product will work Identify essential features or components Have something to evaluate early on And….
![Page 8: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/8.jpg)
Emma J. Rose - UWTC
Why else do we use prototypes? Helps you from going in the
wrong direction A cheap way to do it! Let’s you make changes
quickly, try something new without being tied down.
![Page 9: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/9.jpg)
Emma J. Rose - UWTC
According to Jakob Nielsen Cheaper to change a product
early than later in the development process
Common estimate is that it's 100 times cheaper to make a change before any code has been written
![Page 10: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/10.jpg)
Emma J. Rose - UWTC
How are prototypes used Throughout the design process Help design and evaluate a product along
the way Moves from simple to more complex: this is
called fidelity
![Page 11: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/11.jpg)
Emma J. Rose - UWTC
Fidelity How detailed a mock up is How close to being “done”
Low - Paper Medium - Visio, PowerPoint, Word High - Programming can include full functionality
![Page 12: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/12.jpg)
Emma J. Rose - UWTC
Prototypes
Evaluate
Design
![Page 13: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/13.jpg)
Emma J. Rose - UWTC
Lower cost Higher cost
Summary of findings
evaluate
Summary of findings
evaluate
Summary of findings
evaluate
Low fidelity High fidelity
![Page 14: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/14.jpg)
Emma J. Rose - UWTC
What do prototypes look like?
Picture from Norman Nielsen Group (NNG.com)
![Page 15: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/15.jpg)
Emma J. Rose - UWTCPicture from Norman Nielsen Group (NNG.com)
![Page 16: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/16.jpg)
Emma J. Rose - UWTC
Many products started on paper Can just use stickies Draw idea on a
napkin!
![Page 17: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/17.jpg)
Emma J. Rose - UWTC
Choosing diamonds on Amazon.comMock up Actual interface
![Page 18: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/18.jpg)
Emma J. Rose - UWTC
How do we evaluate prototypes? Similarly to how we evaluate any product
An essential element to user-centered design…..
We do usability studies!
![Page 19: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/19.jpg)
Emma J. Rose - UWTC
Evaluating prototypes All you need is paper A person to play
“computer” Some imagination
Picture from Norman Nielsen Group (NNG.com)
![Page 20: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/20.jpg)
Emma J. Rose - UWTCPicture from Norman Nielsen Group (NNG.com)
![Page 21: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/21.jpg)
Emma J. Rose - UWTC
Objections you may hear I can’t use a prototype, my product is too
complex! How will people know what the system is
doing? It needs to be coded so it’s interactive.
How can we evaluate a paper version? Users will think it’s silly.
![Page 22: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/22.jpg)
Emma J. Rose - UWTC
How we respond No product is too complex! Think of it from
a user’s perspective. You can think just screen to screen.
An evaluation can be interactive, someone plays the computer and simulates interactivity
Users are willing to go along! They pretend it is real product.
![Page 23: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/23.jpg)
Emma J. Rose - UWTC
How this applies to you The Make it Better assignment
When you suggest a redesign, it is helpful to provide visual elements
Consider creating a prototype You can evaluate it with real users You will have data about what works and what
doesn’t Gives you an aid to talk about what you changed and why
All design is iterative…this is why you can “Make it Better”
![Page 24: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/24.jpg)
Emma J. Rose - UWTC
In class activity How many people drive in Seattle? How about park?
What’s hard about parking? How about after you park?
![Page 25: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/25.jpg)
Emma J. Rose - UWTC
Progress? We went from
![Page 26: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/26.jpg)
Emma J. Rose - UWTC
Design scenario The city of Tacoma has hired you to create
new digital parking meters After doing some research, they like some
aspects of the Seattle digital meters: Solar powered Send data to a central location Let users pay with credit card
However…
![Page 27: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/27.jpg)
Emma J. Rose - UWTC
They don’t like the design! Your task: Design an interface for a parking
meter It should:
Allow use of Credit cards, cash: bills and coins Be easy to use Not required lots of instructions on the design
itself
Use paper and pencil or pen
![Page 28: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/28.jpg)
Emma J. Rose - UWTC
Debrief What was easy or hard about the exercise?
What would you do next before pitching the design to the City of Tacoma?
What are some extra bonuses of doing a prototype?
![Page 29: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/29.jpg)
Emma J. Rose - UWTC
If you want to learn more About Paper Prototyping
Paper Prototyping by Carolyn Snyder
Jakob Nielsen’s article on Useit.com
![Page 30: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/30.jpg)
Emma J. Rose - UWTC
If you want to learn more about User centered design and usability
Coordinated study: Offered Spring 2006 Meets evenings and weekends 3 linked courses:
Theory of Human Computer Interaction User Experience Design Usability Research Methods
You get to design a product and evaluate it.
![Page 31: Prototyping: What? Why? and How?](https://reader035.vdocuments.mx/reader035/viewer/2022062422/56812c2a550346895d90a323/html5/thumbnails/31.jpg)
Emma J. Rose - UWTC
Thanks for your time! Questions? Email
Me: [email protected] TC advisor: [email protected]
Pick up a brochure See the website
http://www.uwtc.washington.edu/programs/certs/coordstudy.php