Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (10)
Ähnlich wie Prototyping with purpose
Ähnlich wie Prototyping with purpose (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Prototyping with purpose
- 2. @abbott567 Craig Abbott 11.7K 191 19.3K 5,597 Craig Abbott @abbott567 Interaction Designer at @DWPDigital. Lover of cats and code. David Attenborough is my hero. #Vegan Newcastle upon Tyne
- 3. What you will get from this talk @abbott567 • what a prototype is • why we use them • common mistakes • how to make one • tools and resources you can use
- 4. What is a prototype? @abbott567
- 5. What is a prototype not? @abbott567
- 6. @abbott567 A prototype is not a wireframe
- 7. A prototype is not always high fidelity @abbott567 50px 30px 30px 30px 40px 20px 40px 20px 50px 30px
- 8. A prototype is not the final product !important @abbott567
- 9. prototype noun a first or preliminary version of a device or vehicle from which other forms are developed. https://www.google.co.uk/search?q=define+prototype @abbott567
- 10. @abbott567
- 11. prototype noun something you literally throw together to research if your idea sucks or not. @abbott567
- 12. Why do we use prototypes? @abbott567
- 13. Tell me and I’ll forget Show me and I may remember Involve me and I’ll understand @abbott567
- 14. As a designer, I use prototypes to understand if my design is meeting the needs of the people that use it @abbott567
- 15. Prototypes add value to user research @abbott567
- 16. Product development costs money… …lots of money @abbott567
- 17. A prototype should be quick, dirty and disposable @abbott567
- 20. @abbott567
- 21. @abbott567
- 25. Good design is a process You’ll always find things that don’t work before you find things that do. @abbott567
- 26. I have not failed, I’ve just found 10,000 ways that won’t work. ~ Thomas Edison @abbott567
- 29. @abbott567 Pretty bad idea New hypothesis A good design solution My hypothesis Time
- 30. @abbott567 Meh, idea Pretty bad idea New hypothesis A good design solution My hypothesis Time
- 31. @abbott567 “Keep going.” @BenHolliday Design Director, @FutureGov
- 32. It’s better to fail often and learn from it, than to do no research at all @abbott567
- 33. James Dyson I made 5,127 prototypes of my vacuum before I got it right. But I learned from each one. That’s how I came up with a solution. Inventor of cyclonic vacuum technology @abbott567
- 34. It’s about being able to create just enough of a prototype to help the wider team learn about user needs for a given scenario @abbott567
- 35. A prototype won’t tell you how pretty your design is, but it will tell you if it meets the user need @abbott567
- 36. Prototyping fails @abbott567 …some mistakes I’ve made
- 37. Start with user needs @abbott567
- 38. Don’t ask users what they think of your prototype. Watch them use it… …and probably fail. @abbott567
- 39. @abbott567 Don’t make your prototype too complex
- 41. @abbott567 Keep dynamic data to a minimum Cookies, not databases
- 42. A prototype doesn’t have to be perfect @abbott567
- 43. @abbott567 Let’s build ALL OF THE THINGS!
- 45. @abbott567
- 46. @abbott567
- 48. @abbott567 Photo credit: Paul Downey Photo credit: Richard Pope
- 50. @abbott567 Paper prototypes Pros • Cheap • Fast • Fun • Notes • No specialist skills
- 51. @abbott567 Paper prototypes • Cheap • Fast • Fun • Notes • No specialist skills • Unrealistic • Unwanted feedback • Relies on imagination Pros Cons
- 53. © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Phone number Phone call Text message Email Choose as many as you like How would you like to be contacted? Continue @abbott567
- 54. @abbott567
- 56. @abbott567 © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Phone call Text message Email Choose as many as you like How would you like to be contacted? Continue
- 57. @abbott567 © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Phone call Text message Email Choose as many as you like How would you like to be contacted? Continue © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Email address Email Text message Phone call Choose as many as you like How would you like to be contacted? Continue
- 58. © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Phone call Text message Email Choose as many as you like How would you like to be contacted? Continue © Crown copyrightAll content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Email address Email Text message Phone call Choose as many as you like How would you like to be contacted? Continue All content is available under the Open Government Licence v3.0, except where otherwise stated ALPHA This is a new service – your feedback will help us to improve it. GOV.UK Phone number Phone call Text message Email Choose as many as you like How would you like to be contacted? Continue @abbott567
- 59. @abbott567 Digital prototypes • Can be cheap • Realistic looking • Interactive (sort of) • Creative Pros
- 60. @abbott567 Digital prototypes • Can be cheap • Realistic looking • Interactive (sort of) • Creative • Can be expensive • Can be time consuming • Duplicate effort to code • Interactions are limited • Learning more software Pros Cons
- 62. @abbott567http://gov.uk … or is it?
- 63. @abbott567 Real code prototypes work on: desktop, mobile or tablet
- 64. @abbott567 Parts of real code prototypes can be used in production
- 65. @abbott567 First name cannot be blank Check the following There’s been a problem
- 67. @abbott567
- 68. @abbott567
- 69. @abbott567 Real code prototypes • Cheap • Reusable in production • Interactive • Multiple devices • Accessibility testing • Validation • Realistic Pros
- 70. @abbott567 Real code prototypes • Learning curve • May need a framework • Cheap • Reusable in production • Interactive • Multiple devices • Accessibility testing • Validation • Realistic Pros Cons
- 71. @abbott567 Tools you can use to prototype FREE that isn’t enterprise software ,
- 82. @abbott567
- 83. @abbott567 Up-skill yourself It’s never too late to start coding.
- 85. @abbott567 Ask for help Pester front-end developers
- 86. “ ” @abbott567 Pass on what what you have learned ~ Yoda
- 87. “A prototype is worth 1000 meetings.” @abbott567 Mike Davidson @mikeindustries ex VP of design @twitter
- 88. KTHXBAI Twitter: @abbott567 Email: craig@craigabbott.co.uk Paper prototyping video: http://abtt.co/paper-prototype-research Paper prototyping tools: http://abtt.co/paper-prototyping-tools GOVUK prototyping kit: http://abtt.co/govuk-prototyping-kit Free prototyping tools: https://uxtools.co/tools/prototyping Raspberry Pi Kiosk: http://abtt.co/raspberry-pi-kiosk
Hinweis der Redaktion
- Im Craig, I work for the Department for Work and Pensions as an interaction designer.
- This is what I plan to cover.
- This always seems like a logical place to start.
- But I’s normally easier to start here. Sometimes people aren’t sure what a prototype actually is.
- A prototype is not a wireframe. A wireframe is an artefact. It’s static. It’s flat. You can’t interact with a wireframe.
- A prototype is not always high fidelity. It doesn't have to show you exactly how it will look. You don't have to take a margin, a height or a font size from it. It might not even look anything like your brand.
- It’s important to remember, a prototype is not the final product. There is no end to this. The final product is not even the final product. You should always be learning and iterating, even when the product is live.
- This is how google defines a prototype. A prototype is just an early version of something. Could be a car, an online service, a military weapon, or a jetpack!
- Do you think this prototype is ready for market yet?
- This is what a prototype should be. Something you literally throw together to research an idea.
- Ok, so now we know what one is. Why do we use them?
- This is an old Chinese proverb, but it relates to what we do. If you involve them in user research, they will understand. This might be users understanding the product, or stakeholders understanding your design decisions.
- This is what I build prototypes for. I need to understand if its going to work. If you’re in charge, or if your boss says you don't have enough money for user research, then you may have to think about it from a different perspective.
- Think about this. Design and development work is expensive and time consuming. You don’t want to spend months of your lives and thousands of pounds developing something, only to release it to the world, and then find out it sucks.
- A prototype should be quick, dirty and disposable They should be cheap. They’re just a way to research an idea before you spend money on it.
- For example, I helped build a room booking app for our building. It was built on real user needs. People were using excel etc. We were able to test prototypes the same way we would for any service. This is still being used today and seems to work pretty well
- I had a crazy idea. We could build hardware! What if we fixed something outside of a room that would show you if the room was free or not in realtime. It would be red or green so you could easily spot it from distance.
- We built one prototype. I donated a Raspberry Pi, somebody else donated a screen. I butchered a case with my dads workbench and taped up some foam. It cost about £5 in total just to buy foam and tape, and a weekend of my time.
- and the cat helped… and by help I mean, he got in the way… a lot.
- This was the product. We were super excited. We tested it for a month on one room. And nobody needed it. It was a ‘nice to have’. The other app was already meeting their need. We took it down, and nobody actually noticed. But we had only wasted a fiver, we just dismantled it. We could have wasted hundreds on Pi’s alone if we didn't do any research using a prototype.
- But at least I learned a lot about hacking Raspberry Pi’s. If it’s something you fancy, for your own project, I’ve written a step by step guide of how I did it.
- At DWP digital, we research early in a products life cycle, and we research often, at least once every two weeks. By the time you start investing heavily in an idea, you know its heading in the right direction, or you can throw it away like we did with the Pi idea.
- Good design is a process. You don't always think of the best design right away. It’s just a series of experiments to determine whether an expected outcome is achieved.
- You don't learn anything unless you fail a few times. It sums up exactly how we should be designing things. If it doesn't work, you know not to try that again and to try something else.
- Here is my design process. Your best idea is all you have to work with at this point. It’s a punt. Experience will get you so far, but its still a guess… And you will probably think its great.
- You usually find out that idea wasn’t great. You take it out and research it and it falls over. So you change parts of it, or change the whole thing. Maybe its a bit better this time when you research it.
- Nope, still sucks. Not as quite bad, but still bad.
- You keep redesigning, keep iterating, and each time you get closer to a good design solution. A prototype is just the vessel that carries you on that journey. Without one, all you’d release is that first awful idea.
- Ben Holliday, who leads the UX team at DWP has a favourite saying, ‘Keep going’. If you keep failing, just keep going. It’s how you learn! It’s easy to give up, or doubt yourself if you don't get it right But it will impact the product and might cost even more time and money to fix if you don't keep trying.
- Its better to fail over and over again, than it is to do no research at all. As long as you learn from it you’re still making progress. And a prototype is the easiest way to do that.
- James Dyson, made 5,127 prototypes before he got his design to work. He learned from each one, and eventually he got to the right design. If he just made one and released it to market it would have been a disaster.
- At DWP Digital, we say it’s about being able to create just enough of a prototype to help the wider team learn about user needs for a given scenario. As long as you can research if your design is meeting a particular user need, thats all that matters
- You’re not researching whether your users find your design aesthetically pleasing, you’re researching if it actually meets their needs. Keep learning, keep researching and keep iterating.
- It’s easy to fall into a few traps when prototyping. Here are a few that have taught me the hard way.
- Before designing features, find out if you need them. If it’s not something people need, why are you designing anything? The Pi example I showed you earlier was an example of this failing.
- You’re not trying to find out if they like the design. You’re trying to find out if they can use it. You’re trying to find out if they understand it.
- Complex prototypes are hard to build, maintain and update. They can be frustrating to work with, and time consuming to get right They're more likely to throw bugs or break during user research They’re also not disposable. If you’ve spent 4 days developing it, you’re not going to want to throw it away and start again. They stop being prototypes and start being bad production builds.
- Don’t go too big. If you’re researching if a user can add a product to the cart and pay for it, you don't have to have an entire blog full of articles they can read. You can always link all your prototypes together to create a more end to end journey later on if you need to.
- If you’re not testing the youtube video on your homepage, take it off. People will literally waste 3 minutes of their life (and yours) watching it. We lost a guy down a rabbit hole, spent 45 minutes trawling gov.uk looking up information on how to defer his state pension.
- Hard code as much as possible. Use predefined scenarios if its easier than using real information. Don’t use a database. If you absolutely have to play information back, you can use cookies. Remember to clear them after a user research session.
- It’s alright if it looks a bit rubbish. It’s alright if it doesn't work flawlessly. It’s alright if it’s just you switching out bits of paper. It just has to work enough for you to learn from it.
- Hopefully you’ll get something from this next part that you can go away and try. These are some things you can use to build prototypes
- Paper prototypes Always a good place to start Especially if its a brand new idea.
- All you need is a few pens and some paper. Prototypes are not wireframes, but you can turn wireframes into prototypes. They become prototypes when you put them in front of users and have them interact with them.
- They can be as simple or as creative as you like You’re giving it to a user just to see how they would interact with it.
- Paper prototypes are good for note taking. Instead of writing on a piece of paper and trying to remember which screen it was related to, you just write it on the prototype!
- If he had coded that, and hadn't anticipated the user colouring background, it wouldn't have tested as well.
- Pros Cheap, literally just pens and paper. Fast, if something isn't working, you can draw up a new idea in between sessions Fun, it can be a really good team building exercise Good for note taking. No specialist skills are needed
- Cons No matter how well you put it together, it will never truly feel real, and that could affect their behaviour. Unwanted feedback. The boxes were aren't uniform, or the button isn’t aligned. Because it isn’t working software, how well it tests often relies on how open minded the user is.
- Digital prototypes Look more like real software, without actually being real code
- These can be PDFs, you can make them using Sketch, Photoshop, illustrator etc If you don't want to make the assets yourself, you can get prototyping software that comes with its own. I’ll go through some of these in a bit. They look more realistic, but its important to remember branding really isn't important at this point
- Just layers and vector shapes Sketch is good because you can create components and reuse them But it’s bad because it’s still not interactive, they’re just wireframes at this point.
- To bring it to life on screen, you need additional software This is Invision, you can drag a click area over a part of the image, and then you can link it to another pdf or a web page. Ill show you this later on
- Like paper prototypes, it can be difficult to get digital prototypes truly feel real. You need lots of pages. This looks fine, until you start trying to make it interactive.
- What if one of these checkboxes is ticked, it reveals some content. These are two separate designs. I have to clone the page then physically edit it.
- What if a different one is selected? What if ALL of them are selected? You’re trying to map static assets to website behaviour. You end up needing a lot of designs to cater for something you can do relatively easy in code.
- Pros The CAN be cheap, depending on which software you’re using Realistic looking, they can be as low fidelity or as high fidelity as you like. They can be SORT OF interactive, but the interactions are still basic They’re visually creative, you’re not bound by a framework.
- Cons I just said they CAN be cheap, but they can also be really expensive if you use stuff like Axure, which is £29.99 per month per user. They can be time consuming, editing designs for each interaction. Duplicate effort when transitioning to code. Interactions are still limited Still requires learning more software. You can waste a lot of time learning how to hack the software to make something thats not a website behave like a website, it will never feel 100% right.
- Real code prototypes, sometimes called HTML prototypes, but they can be javascript, php etc You can use whatever code you want, but remember you’re building JUST ENOUGH of a prototype, don't over complicate it.
- These look like digital prototypes, but are real code in a browser. Is this a prototype, is it the real gov.uk? How can you know? You can’t, and that’s kinda the point.
- You can test it on any device, as long as it has a browser. You can run it on a smart tv if you really want to. Anything thats connected to the internet.
- You already have most of the HTML, maybe even the CSS. These can be used in the production build. It might need cleaned up or tweaked, but its there as a starting point.
- Because its code in a browser, you can test it with things like screen readers. Screen readers just read HTML code.
- Can handle actual validation. Because its code, you can do whatever you like. I like to use javascript to mess with what they entered, and they genuinely believe it was their fault, which gets real reactions. Like deleting a character from an account number. If you’re using static assets you’d have to get them to pretend they did something wrong which again relies on imagination.
- Pros Cheap, the language is free, browsers can read html Reusable, if you’re a competent coder, prototype code can be production code Interacts exactly like a web page, because it is one. You can use it on a phone or a tablet or a Tesla car (that’s a thing) You can test things like screen readers. You can test validation. Its as realistic as you can get! This is really important. If you want to get the best results from your research, then it has to look and feel as close to the real thing as possible.
- Cons If you don't know how to code it can be intimidating or impossible at first. It can stifle creativity, sometimes you spend longer trying to get your code to work or trying to get the CSS to line something up, than you do designing anything. If this is the case though, you’re probably trying to make it to complex. If you’re not using something like bootstrap, it will take a while to write all the HTML and CSS from scratch.
- Disclaimer, I’m not covering Axure in any of these examples, because personally, I’ve never been able to justify paying £29.99 per month per user. It doesn’t mean you shouldn’t use Axure, but I’d like to show you that prototyping doesn't have to be expensive, and there are other options out there.
- For the sake of these examples, I’ve created a little prototype where people can apply to pet my cats.
- JustInMind is probably the best free tool I’ve come across. Theres a paid version but you don't have to upgrade. Comes with majority of bootstrap components out the box. Really nice interface, and loads into safari so components style like real webkit. Probably the best one if you’re not looking to do custom views.
- Ive had to upload 4 PDFs I made in Sketch for a 3 page journey, for the radios.
- There a load of these you can have a play around with. Probably too many if I’m honest. If you go to uxtools.co/tools/prototyping theres a list of around 60/70. It will allow you to compare prices and features.
- Who’s heard of bootstrap? For prototyping its excellent. What it’s like for production is another argument i’m not covering in this talk.
- Bootstrap gives you access to a host of components. Very quick to just copy and paste in HTML from their examples. Fully responsive, so you can research on mobile devices. Really well supported. Tonnes of tutorials and documentation.
- Lots of work initially, as you have to build the kit, but it saves time in the long run All open source on github Good for big organisations that have lots of designers as it keeps things consistent.
- The kit works with GOVUK Elements It’s sort of Gov’s own version of bootstrap HTML examples Our code examples have proper valid markup, so even people with lower coding abilities can benefit from these components.
- HTML example. None of the previous examples could change the journey dynamically. With code, you can do whatever you like. Its on github so you can go look at exactly what I did.
- You can see in the browser inspector, the link on the button is just changing based on the option that you select.
- Theres two radio buttons called ‘do you like cats’ but their values are different When you click on a radio called do you like cats it fires the function Answer is the value of whichever button you clicked If the answer is no, it changed the link on the button to fail, otherwise it changes it to success
- Take the time to up-skill yourself. People often haven’t had the time to learn code, but it’s never too late to start. Lots of the designers in DWP had never coded before, but they do now.
- Codecademy has a ton of free courses for learning HTML, CSS, Javascript etc. I highly recommend the jQuery course. It’s much easier than vanilla Javascript.
- If you get stuck, ask the devs on your team to help you. Its better to have them show you where you went wrong than to just do it for you.
- Once you have the hang of the basics, be the designer that bangs the drum. You can learn from each other. Put all your code on github. People do crazy things with prototypes, and you can reuse those ideas. Over time copy and pasting makes things so much faster. Introduce code clubs into your workplace. Stripe did a code club for all its employees, and people started coding.
- If you only take one thing away from this talk, take away this. If a picture is worth 1000 words, a prototype is worth 1000 meetings. If you build a prototype, and show it to people they understand what you’re trying to do, particularly stakeholders They’re way more valuable than user journey maps and power point slides describing a design.
- Any questions?