interaction design & rapid prototyping
TRANSCRIPT
![Page 1: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/1.jpg)
WHAT IS INTERACTION DESIGN?
![Page 2: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/2.jpg)
“For every action, there is an equal and opposite reaction.”
SIR ISAAC NEWTON
![Page 3: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/3.jpg)
WHAT IS INTERACTION DESIGN?
➡ Subset of UX Design
➡ Comes from HCI and ergonomics
➡ Interrelated to UI Design
![Page 4: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/4.jpg)
WHERE DOES IT FIT INTO?
➡ Macro-level:
• Concerned with flows through the system
➡ Micro-level:
• Concerned with affordances on an interface
![Page 5: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/5.jpg)
AFFORDANCE
SIGNIFIER
A quality that makes a potential action possible.
Some sort of indicator, some signal in the physical or social world that can be interpreted meaningfully.
![Page 6: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/6.jpg)
“Design must seduce, shape, and more importantly, evoke an emotional response.” APRIL GREIMAN
![Page 7: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/7.jpg)
![Page 8: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/8.jpg)
![Page 9: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/9.jpg)
![Page 10: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/10.jpg)
![Page 11: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/11.jpg)
![Page 12: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/12.jpg)
![Page 13: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/13.jpg)
“Don't even open Photoshop until you've prototyped and tested your low-fidelity concepts with your users.” THERESA NEIL
![Page 14: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/14.jpg)
METHODS
![Page 15: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/15.jpg)
1. Images with hotspots
๏ Convert paper sketches into prototypes
๏ Convert high-fidelity mocks into prototypes
๏ Good workflow for visual designer
๏ Limited interaction fidelity
![Page 16: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/16.jpg)
2. “Pure” Prototypes
๏ Make wireframes clickable right away
๏ Good work flow for IAs
๏ Desktop and web based tools
๏ Many export HTML
![Page 17: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/17.jpg)
![Page 18: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/18.jpg)
![Page 19: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/19.jpg)
![Page 20: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/20.jpg)
![Page 21: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/21.jpg)
![Page 22: Interaction Design & Rapid Prototyping](https://reader033.vdocument.in/reader033/viewer/2022042522/55c48f69bb61ebf1528b4828/html5/thumbnails/22.jpg)
THANKS SO MUCH!!!!!!