Prototyping - the what, why and how at the University of Edinburgh
•Download as PPT, PDF•
1 like•671 views
Edited highlights of my prototyping training session. These slides are essentially the intro to a 3 hour practical, collaborative learning experience using pencil/paper and Balsamiq. The slides cover: - What is prototyping? - Prototypes and the design process - Example projects - How to prototype - Case study: Website search results page - Balsamiq demo
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Prototyping - the what, why and how at the University of Edinburgh
Similar to Prototyping - the what, why and how at the University of Edinburgh (20)
More from Neil Allison
More from Neil Allison (20)
Recently uploaded
Recently uploaded (20)
Prototyping - the what, why and how at the University of Edinburgh
- 1. Prototyping The what, why and how at the University of Edinburgh Neil Allison University Website Programme Web Publishers Community October 2015
- 2. Overview • What is prototyping? • Prototypes and the design process • Example projects • How to prototype • Case study: Website search results page • Balsamiq demo
- 3. Shared understanding is vital
- 5. What is prototyping? • Sketching out how an idea or concept will work
- 6. Why should I prototype? • Anyone can prototype – not just specialists • It encourages upfront planning • It’s a useful team design exercise • It means you can test with users and make changes quickly and cheaply • You can try out different concepts • Effective way to communicate with stakeholders, designers, programmers
- 7. Prototyping basics • Prototypes are good in the early design phase – Focus on navigation, workflow, terminology and functionality than visual design • Too much visual design is a bad thing – It encourages focus on the wrong things • Paper prototyping brings out problem solving skills – Not sketching or technical skills Read more: 7 myths about paper prototyping www.userfocus.co.uk/articles/paperprototyping.html
- 8. When is a prototype not a prototype? • When you can’t implement changes quickly for retesting • When it’s a pain to try alternative approaches, particularly in parallel • When you get too attached and the thought of starting over because something fundamental is wrong makes you want to cry
- 9. PROTOTYPES AND THE DESIGN PROCESS
- 10. How prototypes fit in the design process • Know who your users are and what tasks they will do (personas) • Create prototypes of the designs • User test (not show!) the prototypes with the representative audience • Make changes and test again (and repeat)
- 11. User testing with prototypes • Testing, not just showing, is an important part of prototyping – What people say and what they do is different! • It is important to have a solid understanding of the tasks before putting screens in front on users – Always have a pilot test
- 12. Pocket guide to running a usability test with a prototype 1. Set the scene – talk through the scenario we’ve provided so participant can play the role of the target user 2. Play computer – enable your prototype to replicate functionality to allow participant to work through the scenario (e.g. Changing tabbed content) 3. Ask questions – prompt participant to think aloud, but save the ‘why’ questions til the end 4. Make notes – pertinent comments and actions
- 13. …so long as you can be when you present or test them Prototypes don’t have to be clever or sophisticated…
- 14. Video demo of paper prototype
- 15. EXAMPLE PROJECTS
- 16. Example 1: Requirements gathering http://www.slideshare.net/mrscammels/prototyping-for-responsive-web-design
- 17. Example 2: AB testing http://ausweb.scu.edu.au/aw04/papers/refereed/alexander/paper.html
- 18. Example 3: Rapid iterations http://www.bunnyfoot.com/about/clients/screwfix.php
- 19. Example 4: Communicate ideas
- 20. HOW TO PROTOTYPE
- 21. Prototype sophistication • It depends: – On what you’re looking to find – On where you are in the design process – On who you’re working with • Does it facilitate – Interaction? – Communication?
- 22. Choosing the right tools • Use the tool(s) that work best for you • Doesn’t matter what you prototype with – Are you comfortable with it? – Can you work quickly? – Opportunities for collaboration are good too
- 23. Prototyping options • Pencil, paper, post-it notes • Graphics package (we love Snagit) • Office packages: PowerPoint, Visio, Word • Firefox free add-on: Pencil • Online services like Mockingbird, UXPin... • Specialist tools like Axure, iRise, Balsamiq • Your preferred development framework
- 24. CASE STUDY: RAPID ITERATIVE PROTOTYPING
- 25. Website search results page • We needed to redevelop website search to fit the new website design – Responsive layout vital • Early draft designs were taking too long and not testing well with users • New approach: Rapid, iterative, collaborative prototyping
- 26. Rapid team prototyping • Quick: Session took 90 minutes • Cheap: Team time, pencils and paper • Inclusive: 6 members of UWP involved with a range of backgrounds • Creative consensus: 20+ rough designs evolved into a single preferred option
- 27. How to… 1. Everyone spends 5 minutes independently generating as many solutions to a problem as possible 2. Everyone presents their ideas to the group 3. Everyone independently sketches their one preferred solution – Must include at least one idea from someone else
- 28. How to… 4. Everyone presents back to the group again 5. Working in pairs each team evolves their design again 6. Final presentation to the group
- 29. What happened next • By the final round designs had significantly converged • Designer/developer used this prototype as the basis for a revised design – Rough interactive prototype produced & tested with users – significantly better results • Interactive prototype evolved into the current search page design Read more: http://bit.ly/uwp-search-sketch
- 31. Balsamiq – EdWeb templates
- 32. Share your experiences • Has anyone – Used prototyping as part of a development process? – Attended our training on prototyping? – Used Balsamiq?
- 33. Thank you Get in touch if you’d like support or advice to begin prototyping in your team neil.allison@ed.ac.uk UX Manager, University Website Programme
Editor's Notes
- When something is wrong and you know what is wrong, it is useful to start to think about how it could be better. I use basic prototypes a lot when i criticize sites. I come up with lots of problems and solutions, but the best way to illustrate them is to put them into an interface and see if they make sense. They help developers: Create more accurate budget and timeline estimates Design and code more accurately from the beginning Unite team members with a variety of job functions behind one vision Wireframes help clients: Explore (and modify) ideas with minimal investment Get internal buy-in and approvals more easily because it's easier to envision Understand user experience with clickable navigational paths Discern the differences in functions across different web and/or mobile devices
- http://www.userfocus.co.uk/articles/paperprototyping.html
- One of the main barriers to change in a prototyping project is someone being resistant to it changing. This typically happens because someone has either Written code Added design The rough and readier and early prototype is the easier it will be make changes and get the concept right. After that it can be refined for specifics like design
- http://teamddm.com/articles/wireframes-getting-a-shared-understanding http://www.uxmatters.com/mt/archives/2012/10/tips-on-prototyping-for-usability-testing.php
- We learned a long time ago the secret to this technique: it's not about 'showing' the interface, it's about 'using' it. You want enough detail in the design for users to complete their tasks. Sometimes, this makes creating the prototype a little burdensome, but the quick ability to change the design outweighs the upfront effort requirements. When you show a design to a user, you end up asking questions, such as "What do you think?" The users always reply with their opinions, but we've seen many times that what users say they like and how they interact with a design can differ dramatically. http://www.uie.com/articles/looking_back_on_paper_prototyping/
- Examples of paper prototyping: Using cards to replicate tabbed browsing Using post it notes to investigate potential location of a log in interface On a whiteboard, so the participant and rub out and amend the design with you Slightly more sophisticated prototype using powerpoint More sophisticated still, with the graphic design overlaid
- http://www.slideshare.net/mrscammels/prototyping-for-responsive-web-design In the example above the designer started designing for mobile because that forced the client to focus on the ‘essential content’. Sketching allowed for discussion and instant iternations Prototypes can be very effective at gathering feedback. Low fidelity prototypes can be used as an active listening tool. Often, when people can not articulate a particular need in the abstract, they can quickly assess if a design approach would address the need. Prototypes are most efficiently done with quick sketches of interfaces and storyboards. Prototypes are even being used as the “official requirements” in some situations. http://tynerblain.com/blog/2006/11/21/ten-requirements-gathering-techniques/
- http://ausweb.scu.edu.au/aw04/papers/refereed/alexander/paper.html If you are debating two approaches the simple solution si to mock them up and quickly test them. This quickly and easily shows which direction works better and keeps the politics out of the decision making
- http://www.bunnyfoot.com/about/clients/screwfix.php The quick and cheap nature of prototyping mean that it is easy to test and change. This means that by the time you get to coding you can be confident that the fundamental of the design are solid
- The structure or concept of a site is much easier to communicate to a wide group of people if it is in a format that they understand. Sketches help translate requirements documents and sitemaps into something that is easy to understand and feedback on.
- Looking to find: Quick questions focused on a page layout or the nature of some content? Or fundamental decisions about your information archictecture and the user journey? Where you are in the design process: You may or may not have a graphic design organised yet. Typically the look and feel is prioritised ahead of things like content and architecture, when really it should be the final step. The icing on the cake. Who you’re working with: I’ve had experiences where some development partners have doubted PP findings and recommendations because the prototypes were so crude. “Well that won’t be a problem once we have a look and feel. We can get the graphic designer to address that.” While I’d say this is rarely a feasible solution, you do need to bear in mind whether the people you’re working with buy into what you’re doing.
- As with accompanied surfing – pencil and paper is often best. And again, templates you scribble on can save you some effort. Power point can be good as you can present your prototypes on screen. You can add links and begin to more closely mimic the website experience. Vision is a great tool for paper prototyping as it’s so quick and easy to drag and drop items. There are also some templates and shapes available online for free that can speed up the process still further, Link included in the further reading page. Visio is on site license at the University – it just isn’t part of the standard MS Office package. Your computing officer will be able to get you a copy. Axure is a specialist package that works much like Visio, but creates real web pages from your drawings.
- Balsamiq Demonstration Script Log into the University Wiki, opening two pages: https://www.wiki.ed.ac.uk/x/so88Bw (prototyping wiki home) https://www.wiki.ed.ac.uk/x/G5A8Bw (University website balsamiq templates) From the Wiki Home - open the “Sandbox – public test area”, then the page for today’s training (in the format 2014-03-11). Open the “demonstrator” page, then click “edit”, then “Insert” (+) and choose “UI Mockup”. Balsamiq will open.