A super quick journey through the interactive prototyping landscape

Tech Exeter, 6 April 2017

Transcript

1. A super quick journey through the interactive prototyping landscape
2. fffunction: a user-centred design agency…
3. …and we love creating prototypes
5. Prototype: our definition Something to test, explore, and communicate design ideas for a thing which we’re designing. Something: a lower fidelity representation, could be a paper sketch, wireframe-like clickable prototype, fully interactive implementation. A thing: something we’re designing. A website, web app, native app, system, or process.
6. Why prototype? Work collaboratively. Communicate our design ideas in a more powerful and engaging way. Engage stakeholders. Bring users into our design process: research, collaboration, testing. Save time and money.
7. The prototyping landscape is big! Lots of tools. Lots of techniques. Lots of folk have attempted to classify prototyping tools: typically by fidelity, complexity / speed of tool, or some combination of these.
8. https://blog.prototypr.io/14-prototyping-tools-how-each-can-be-used-1c804fab33a6
9. Problems with classifying by fidelity More than just visual design quality: level of complexity; breadth and/or depth being presented; richness of interactions. Easy to conflate fidelity with complexity and speed of prototyping. They don’t always correlate. Many tools operate across a range of fidelities.
10. Problems with classifying by prototyping tool complexity Learning curve, speed of prototype creation, and complexity sometimes correlate, sometimes don’t. Different tools suit different designers and teams. Some tools are quicker to get going with if you’re already creating design deliverables of some kind (e.g. sketches, mockups in Sketch or Photoshop).
14. Paper Prototyping Creating Clickable Prototypes from Designs Integrated Tools for Drawing and Creating Prototypes HTML Prototypes
15. Paper prototyping
16. Paper prototyping
17. Paper prototyping
18. Great for working rapidly and collaboratively; generating ideas; testing and iterating. Anyone can get involved. Quickly becomes impractical to prototype and and test a large site. Not easy to share and present prototypes. Paper prototyping
19. Clickable prototypes from designs: Marvel
20. Clickable prototypes from designs: PDFs
21. Clickable prototypes from designs: InVision
22. Clickable prototypes from designs: InVision
23. Clickable prototypes from designs: InVision
24. Can take any existing design deliverables, including simple sketches, and turn them into clickable prototypes quickly and easily. Clickable prototypes can be created with existing PDFs editing tools. Tools like InVision and Marvel bring a wide range of features specifically to aid prototyping workflow. Clickable prototypes from designs
25. Tools for drawing and creating prototypes: Keynote / Powerpoint
26. Tools for drawing and creating prototypes: Keynote / Powerpoint
27. Tools for drawing and creating prototypes: Keynote / Powerpoint
28. Tools for drawing and creating prototypes: Balsamiq
29. Tools for drawing and creating prototypes: Axure
30. Tools for drawing and creating prototypes: Adobe XD
31. Wide range of tools to suit those prototyping across a range of design and development experience. From Keynote / Powerpoint through to Axure and Adobe XD. Some tools can be used to prototype larger sites; with real data and content; and complex interactions. A wide range of fidelities available across the various tools. Tools for drawing and creating prototypes
32. HTML prototypes
33. HTML prototypes
34. Full responsive prototyping. Good for building structural prototypes across the breadth / depth of a full site structure. Can prototype interactions to whatever depth you wish. A wide range of frameworks and tools. With hosting sorted, sharing is ‘easy’. Learning curve, or work with developers! HTML prototypes
35. Other prototyping tools: Principle, Framer
36. Other prototyping tools: Facebook Origami Studio
37. Too many to list! Always changing: old tools die or get bought, new tools arriving all the time. Think about tools in terms of our categories (and maybe your own too). Then as tools come and go, you can get a feel for which ones will be useful to you. Other prototyping tools
41. https://www.sitepoint.com/premium/books/designing-ux-prototyping Designing UX - Prototyping Ben Coleman, Dan Goodwin SitePoint ISBN: 0994347081 Thank you @bouncingdan @fffunction http://fffunction.co https://www.amazon.co.uk/dp/0994347081