You Down with APP? Yeah! You Know Me!
Analog Powered Prototypes
The most powerful digital applications on earth were all born of analog methods. My most creative moments were disconnected, by myself with a drawing pad in hand. I am currently taking a course in user centered design, as much as I find research methods, testing and documentation best practices interesting, my favorite parts of any development project has always been inception and production. The moment when you ask yourself, wow that’s a great idea…but what will it look like?
This blog post will be dedicated to the age old analog practice of prototyping on paper. Recently, I learned of a user feedback practice called a cognitive walkthrough. A pluralistic walkthrough is when you invite both dev team and users to the same feedback session. Very early in a development project, users are invited into the process by being asked to provide feedback on paper prototypes of a proposed application. This can be very helpful for the development team because issues, workflow and logic issues can be caught early before time spent on design and coding. No matter how skilled your moderator, it would be pretty hard to set up user experience testing without something to test. So, it is always a symbiotic partnership with your UX colleagues. This is a great way to get both sides talking (or wear both hats) early in the project.
Please note, Many designers confuse mockups with prototypes. These are not the same thing. Prototypes should resemble simulation (read, “interactivity”), while mockups are static representations of design. A wireframe is an image or set of images which displays the functional elements of a screen, typically used for planning an interactive product structure and functionality.
Paper prototypes are similar to wireframes but are rough sketches of your screens and interfaces. Rough is a major advantage for paper prototypes. The technical term for looking rough is “low fidelity”. According to Issara Willenskomer of medium.com low fidelity designs are good because they:
- Don’t intimidate non-designers.
- Encourage honesty. No-one will spare your feelings if they disagree with something you only spent 5 minutes drawing.
- Keep them simple: No branding, colors, typography, spacing, and images
- Are easy to throw away when you move on to the next iteration.A main goal,
The basic goal and purpose of your product should be clear before you start. Personas, scenarios, user journeys or even storyboards should have been set up before you start prototyping. Based on this knowledge you start drawing interfaces that allow your user to perform this particular task. I know, some of you may be thinking “that is a really long explanation of just good old fashioned sketching” …..I agree, just keep in mind that its not just doodling on a pad, it is also a process, a way of working through an idea.
Start with a piece of paper and pencil. Sometimes it is helpful, but not required, to use grid sheets or printed templates with dimensions of the target device as a frame or guide. Smashing magazine has compiled a list of downloadable free printable sketching, wireframing and note-taking .pdf templates here. I prefer to to just start with a blank 8.5 x 11 sheet of paper folded in quarters for vertical phone screens or halfs for tablets.
For the main interface of a screen you might be using an entire sheet of paper. Some designers cut out elements or use sticky notes to represent UI elements and controls such as dropdowns, overlays, expandable etc.
These cut out elements will give you agility and flexibility when testing your paper prototype. Don’t forget different screen states such as selected or unselected checkboxes, radio-buttons etc.
Try to draw as many screen on your users journey as possible and don’t forget to leave space or build in elements to go back and forward with a swipe or button. These are going to be really helpful if you decide to scan and simulate interactivity with an application like Marvel’s POP, Adobe XD or MockPlus.
Check out these great video tips:
Bringing your paper prototypes to life with POP
Once you have your prototypes ready and all your screens in order you may want to take them to the next level. POP (Prototypes on Paper) is a wonderful free app that allows designers to upload their low-fi sketches and quickly turn them into interactive simulations by adding hot spots and linking pages.
This saves massive amounts of time and is great for testing or demos. You can show users on multiple (or their own) devices by downloading the app and loading your project. Easy Peasy. Hope these tips are helpful and have fun prototyping!
See this POP video demo:
Shawn is an Information Technology manager in Washington D.C. and a graduate student at Quinnipiac University pursuing his masters in Interactive Media and Communications.
Resources and references:
Nielsen, C. (2018). The unreasonable effectiveness of paper prototypes. Medium. Retrieved from https://medium.com/chris-nielsen/the-unreasonable-effectiveness-of-paper-prototypes-fad7416e592e
Nessler, D. (2018). A guide to paper prototyping & testing for web interfaces. Medium. Retrieved from https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f
Top 5 Prototyping Tools For Mobile Apps | CitrusBits. (2017, October 12). Retrieved from https://citrusbits.com/top-5-prototyping-tools-for-mobile-apps
Free Printable Sketching, Wireframing and Note-Taking PDF Templates. (2010, March 29). Retrieved from https://www.smashingmagazine.com/2010/03/free-printable-sketching-wireframing-and-note-taking-pdf-templates
A Beginner’s Guide to Wireframing. (2019, February 04). Retrieved from https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
Website wireframe – Wikipedia. (2019, February 02). Retrieved from https://en.wikipedia.org/wiki/Website_wireframe
Recent Posts from the ICM514: Understanding Your Audience:
- Clearing Up Content Concepts - Module 2, Part 2 - Content Strategy with Professor Phillip Simon This week, we are going to take a moment…
- My personal relationship with content - Module 1, Part 3 - Content Strategy with Professor Phillip Simon Two-Fold After giving my own relationship with content some…
- Content: Long Live The King. - Module 1, Part 2 - Content Strategy with Professor Phillip Simon Substance How did Netflix survive the rise of competitors…
- Jumping Into Content Strategy - Module 1 - Content Strategy with Professor Phillip Simon Nothing happens without people. We are content. The things we record,…
- Anticipatory Design – Good Help is Hard to Build. - Long-Form - Writing Interactive Media, Professor Susan Tamulevich Great Service is User-Centered You wake up in the morning and coffee…
- The Writers Paradox: “TO” and “FOR”. - Mod 3 - Writing Interactive Media, Professor Susan Tamulevich The Paradox Just as sound requires space, paint requires a surface…