prototype, storyboards, mindmeistermelissa/web/20162-docs/inf1802... · storyboards storyboarding...
TRANSCRIPT
![Page 1: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/1.jpg)
Prototype, Storyboards, Mindmeister
INF1802
Profa. Melissa Lemos
![Page 2: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/2.jpg)
Outline
• Storyboarding
• Creating Paper Prototypes
• Mind maps
• Digital Mock-ups
![Page 3: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/3.jpg)
Storyboards
Storyboarding isn’t about “pretty pictures”
it’s about communicating ideas
From Scott Klemmer: www.hci-class.org
![Page 4: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/4.jpg)
From Scott Klemmer: www.hci-class.org
![Page 5: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/5.jpg)
![Page 6: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/6.jpg)
![Page 7: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/7.jpg)
![Page 8: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/8.jpg)
![Page 9: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/9.jpg)
![Page 10: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/10.jpg)
![Page 11: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/11.jpg)
![Page 12: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/12.jpg)
Storyboards
Setting
– People involved
– Environment
– Task being accomplished
• Sequence
– What steps are involved?
– What leads someone to use the app?
– What task is being illustrated?
• Satisfaction
– What’s motivates people to use this system?
– What does it enable people to accomplish?
– What need does the system fill?
From Amal Dar Aziz, Guide to Storyboarding, http://hci.st/story
![Page 13: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/13.jpg)
Benefits of Storyboarding
• Helps emphasize how an interface accomplishes a task
• Avoids commitment to a particular user interface (no buttons yet)
• Helps get all the stakeholders on the same page in terms of the goal
From Scott Klemmer: www.hci-class.org
![Page 14: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/14.jpg)
Paper Prototyping
• Lifalyze Video
– https://www.youtube.com/watch?v=J-bVzUahNIg
![Page 15: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/15.jpg)
Mindmeister
• A mind map is a diagram used to visually organize information.
![Page 16: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/16.jpg)
![Page 17: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/17.jpg)
![Page 18: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/18.jpg)
Digital Mockups/ Wireframes
• Tools for Design Mockups
– http://mashable.com/2012/06/07/mockup-tools/#wrH8G7D53SqO
– http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
• Balsamiq
– balsamiq.com/
– Google Drive
• Moqups
– https://moqups.com
![Page 19: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/19.jpg)
![Page 20: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/20.jpg)
Ver detalhes do mapa
![Page 21: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/21.jpg)
Ver detalhes do mapa
![Page 22: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/22.jpg)
Ver detalhes do mapa
![Page 23: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/23.jpg)
![Page 24: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/24.jpg)
![Page 25: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/25.jpg)
![Page 26: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/26.jpg)
![Page 27: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/27.jpg)
![Page 28: Prototype, Storyboards, Mindmeistermelissa/WEB/20162-docs/INF1802... · Storyboards Storyboarding isn’t about “pretty pictures” it’s about communicating ideas From Scott Klemmer:](https://reader034.vdocument.in/reader034/viewer/2022050607/5fae5b616e45d96aa55b5480/html5/thumbnails/28.jpg)