prototypes.wiki (2297B)
1 %template math 2 == Prototypes == 3 Prototype: representation of design before final version exists. 4 Can be low fidelity to high fidelity media. 5 6 options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc. 7 8 why? 9 to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc. 10 it's faster than changing the real thing. 11 12 Waterfall model 13 * long lifecycle, step by step 14 * does not work 15 16 Iterative prototyping 17 * more like an agile method 18 * each iteration is short (2-6 weeks) 19 * do minimum necessary 20 * after every iteration you get feedback 21 * system grows incrementally 22 23 quality is a function of num of iterations & refinements before production. 24 fail early and often. 25 26 3 stages of prototyping: 27 28 {{local:../img/3-stages-prototyping.png|3 stages of prototyping graph}} 29 30 === Designing the prototype === 31 choose what to prototype for, identify measurable design goals 32 33 Describe the user's journey: 34 * Who is the user? 35 * How do they discover the app/site? 36 * let's assume for our project that they were recommended our app 37 * How do they use it? 38 * How do they benefit from it? 39 40 Aim to show why the app/site will work. 41 42 Prototyping: 43 * Low fi (early stage) 44 * Use whatever works (paper and pen, photo, video, whatever) 45 * Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff 46 * Medium fi 47 * Don't add filler text 48 * Wireframing: idea needs more detail than on paper, colors, clients need to see major design options 49 * Mockups with wood, play doh, whatever. Just fake the design 50 * Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now 51 * High fi 52 * Screen mockups (illustrator, photoshop, whatever) 53 * Clickthroughs (slideshow type stuff) 54 * Web tools (like Bootstrap) 55 * Web prototypes 56 * plain HTML/CSS 57 * use when systems is intended to run on the web 58 * Small screen prototypes 59 * JS (all phones have a browser, JS has a lot of functionality) 60 * can add events, interactions, etc. 61 * you can use mobile emulators on desktop 62 * but it's hard to prototype touch gestures (JS works decently) 63