UX Oxford Prototyping

Transcript

1. form follows function
2. A super quick journey through the interactive prototyping landscape
3. F F F UN C T I O N: A U SE R-C ENTRED DESI G N AGENCY… fffunction.co/are
4. … A ND W E LO VE CRE AT ING P ROT OT YP ES
6. WE W RO T E A B OO K
7. THE B IT WH E R E I S AY WH AT I’ LL S AY What a prototype is. Why prototyping is a good thing to do. Mapping the prototyping landscape. A tour round that landscape. Lots of time for questions, help, and chat.
8. What is a prototype?
9. PR OT OTY P E : OUR D E FIN ITIO N 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, or a fully interactive implementation. A thing: something we’re designing. A website, web app, native app, system, or a process.
10. Why prototype?
11. WH Y PR OT OTY P E ? Work collaboratively.
12. WH Y PR OT OTY P E ? Work collaboratively. Communicate our design ideas in a more powerful and engaging way.
13. WH Y PR OT OTY P E ? Work collaboratively. Communicate our design ideas in a more powerful and engaging way. Engage stakeholders.
14. WH Y PR OT OTY P E ? Work collaboratively. Communicate our design ideas in a more powerful and engaging way. Engage stakeholders. Bring users into our design process.
15. WH Y PR OT OTY P E ? Work collaboratively. Communicate our design ideas in a more powerful and engaging way. Engage stakeholders. Bring users into our design process. Save time and money.
16. W HY ? SAV E T IME AN D MO NEY
17. Mapping the prototyping landscape
18. THE P RO T OT Y PIN G LAN D S C A P E IS B I G ! 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.
19. T O OL C L A SSI FI CATIO N https://blog.prototypr.io/14-prototyping-tools-how-each-can-be-used-1c804fab33a6
20. PR OB LE M S WIT H CLAS S IFY IN G B Y F I D E L I T Y More than just visual design quality Easy to conflate fidelity with complexity and speed of prototyping. They don’t always correlate. Many tools operate across a range of fidelities.
21. PR OB LE M S WIT H CLAS S IFY IN G B Y P R O T O T Y P I NG TO OL C OMPLE X ITY 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 than others.
22. FID EL I TY Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Hand sketch Wireframe Full-fidelity design mockup
23. C OM PLE XIT Y / S P E E D OF P R O T O T Y P E C R E AT I O N / L EA RN IN G CU R VE Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Easy / quick / shallow Medium Hard / slow / steep
24. WH AT YO U’R E US IN G A P R O T O T Y P E T O D O Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Rapidly generate design ideas for interfaces and user flow and explore them Design and present simple structures and layouts Design and present more complex content structures and / or lengthy, involved user journeys
25. PR OT OTY P IN G TOOL GR OUP S Paper prototyping Creating clickable prototypes from designs Integrated tools for drawing and creating prototypes HTML prototypes
26. Paper prototyping
27. PA P E R P R O TO TY PI NG
28. PA P E R P R O TO TY PI NG
29. PA P E R P R O TO TY PI NG
30. PA P E R P R O TO TY PI NG
31. PAPER PR OT O TY PI N G Great for working rapidly and collaboratively; generating ideas; testing and iterating.
32. PAPER PR OT O TY PI N G Great for working rapidly and collaboratively; generating ideas; testing and iterating. Anyone can get involved.
33. PAPER PR OT O TY PI N G Great for working rapidly and collaboratively; generating ideas; testing and iterating. Anyone can get involved. Quickly becomes impractical to prototype and test a large site.
34. PAPER PR OT O TY PI N G Great for working rapidly and collaboratively; generating ideas; testing and iterating. Anyone can get involved. Quickly becomes impractical to prototype and test a large site. Not easy to share and present prototypes.
35. Clickable prototypes from designs
36. C L I C K A B L E P RO T O T Y P ES F RO M DESI GNS: M ARVEL
37. C L I C K A B L E P RO T O T Y P ES F RO M DESI GNS: PDFS
38. C L I C K A B L E P RO T O T Y P ES F RO M DESI GNS: I NVI SI ON
39. C L I C K A B L E P RO T O T Y P ES F RO M DESI GNS: I NVI SI ON
40. C L I C K A B L E P RO T O T Y P ES F RO M DESI GNS: I NVI SI ON
41. C LI CKA BL E P R O T OTY P E S FR O M D E SI G NS Can take any existing design deliverables, including simple sketches, and turn them into clickable prototypes quickly and easily.
42. C LI CKA BL E P R O T OTY P E S FR O M D E SI G NS 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 tools for creating / editing PDFs.
43. C LI CKA BL E P R O T OTY P E S FR O M D E SI G NS 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 tools for creating / editing PDFs. Tools like InVision and Marvel bring a wide range of features specifically to aid prototyping workflow.
44. Tools for drawing and creating prototypes
45. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: BALSAM I Q
46. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: OM NI G RAFFLE
47. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: AX URE
48. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: ADOBE X D
49. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: K EYNOTE / P OW E R P O I NT
50. T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: K EYNOTE / P OW E R P O I NT
51. Image: https://medium.com/@BenUserMood/what-would-you-learn-if-you-read-the-google-design-sprint-book-8183aa9a120e T O OL S F OR D RAW IN G A ND C REAT ING PROTOTYPES: K EYNOTE / P OW E R P O I NT
52. TO OLS F OR D R AWIN G AN D C RE AT I NG P R O T O T Y P E S 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.
53. TO OLS F OR D R AWIN G AN D C RE AT I NG P R O T O T Y P E S 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.
54. TO OLS F OR D R AWIN G AN D C RE AT I NG P R O T O T Y P E S 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.
55. HTML prototypes
56. H TM L P R O TO TY P ES
57. H TM L P R O TO TY P ES
58. H TM L P R O TO TY P ES
59. H TM L P R O TO TY P ES
60. H TM L P R O TO TY P ES
61. H TM L PR OTO T Y P ES Full responsive prototyping.
62. H TM L PR OTO T Y P ES Full responsive prototyping. Good for building structural prototypes across the breadth and / or depth of a full site structure.
63. H TM L PR OTO T Y P ES Full responsive prototyping. Good for building structural prototypes across the breadth and / or depth of a full site structure. Can prototype interactions to whatever depth you wish.
64. H TM L PR OTO T Y P ES Full responsive prototyping. Good for building structural prototypes across the breadth and / or depth of a full site structure. Can prototype interactions to whatever depth you wish. A wide range of frameworks and tools.
65. H TM L PR OTO T Y P ES Full responsive prototyping. Good for building structural prototypes across the breadth and / or depth of a full site structure. Can prototype interactions to whatever depth you wish. A wide range of frameworks and tools. With hosting and workflow sorted, sharing is ‘easy’.
66. H TM L PR OTO T Y P ES Full responsive prototyping. Good for building structural prototypes across the breadth and / or depth of a full site structure. Can prototype interactions to whatever depth you wish. A wide range of frameworks and tools. With hosting and workflow sorted, sharing is ‘easy’. Potentially steep learning curve, or work with developers!
67. O T HE R PR O T O T Y P ING T O O LS : PRINC IP LE
68. O T HE R PR O T O T Y P ING T O O LS : FRAM ER
69. O T HE R PR O T O T Y P ING T O O LS : FACEBOOK ORIGAMI STUDIO
70. O T HE R PR O T O T Y P ING T O O LS : INV ISIO N STUDI O
71. O THER P R OTO T Y P IN G TOOLS Too many to list!
72. O THER P R OTO T Y P IN G TOOLS Too many to list! Always changing: old tools die or get bought, new tools arriving all the time.
73. O THER P R OTO T Y P IN G TOOLS 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.
74. FID EL I TY Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Hand sketch Wireframe Full-fidelity design mockup
75. C OM PLE XIT Y / S P E E D OF P R O T O T Y P E C R E AT I O N / L EA RN IN G CU R VE Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Easy / quick / shallow Medium Hard / slow / steep
76. WH AT YO U’R E US IN G A P R O T O T Y P E T O D O Paper Marvel PDFs InVision Keynote / PowerPoint Balsamiq OmniGraffle Axure Adobe XD HTML Rapidly generate design ideas for interfaces and user flow and explore them Design and present simple structures and layouts Design and present more complex content structures and / or lengthy, involved user journeys
77. THA NK Y OU Designing UX - Prototyping Ben Coleman, Dan Goodwin SitePoint ISBN: 0994347081 https://www.sitepoint.com/premium/books/designing-ux-prototyping http://bit.ly/prototyping-ux @bencoleman / @bouncingdan / @fffunction
78. Thank you http://bit.ly/ux-oxford-prototyping https://fffunction.co @bencoleman