Implementation: LoFi Paper Prototyping
LoFi Paper Prototyping ScriptHi I'm Lorenz and I welcome you to the introduction of implementation practice.
When implementing, there's a bunch of methods and tools that you can apply. Let's have a sneak peek into two categories of prototypes, why you would use them and which are some of the tools that you can use to achieve the desired results. As you should know by now, when we speak of implementation we do not necessarily mean coding.
In this phase, we subsume everything that you do when bringing your prototype out of your head and making it a reality. And I cannot stress this enough, a prototype is an entity that can represent a certain idea without having to explain it first. This is why stories or simple sketches are as good as a prototype and in many cases better than semi- or fully-functional applications.
So, let's start where everyone should: with low fidelity prototypes. Paper prototyping, or the use of simple sketches of screens and options to get a feel for your prototype, might not seem fancy but it's the oldest trick in the book for a reason: it works. Since one of the essential goals of prototyping is the identification of flaws or mistakes as early as possible in the design process, simply putting them on a piece of paper is a rational first step. Sometimes you'll notice the flaws in your design right away when you have sketched some screens and, because it's deliberately shitty, it shouldn't be a problem for you to admit that. This way, paper enables you to avoid one of the most dangerous traps for user-centered design: falling in love with your prototype. Humans have the tendency to judge something that they have spent a lot of resources on, be that money, time or whatever else, as of higher value than it might actually have. This is a basic psychological process and, by the way, one of the reasons why fraternities have so many initiation rights, and terribly dangerous for developing products. This is the reason why you want to make your paper prototype as quick and dirty as possible. Use simple materials, do not be artsy with your sketches. A good paper prototype is not a beautiful one! The sketchy look also facilitates honest feedback. If something does not look like you've spent hours creating it, people will not feel bad about their criticism.
Some additional tips and tricks when you start prototyping on paper: Use a pen, not a pencil. Why would you use a pen, though? Well, the pen creates a sense of commitment. After all, it's impossible to erase it. This facilitates two things: a) if something goes bananas, you have to throw the sketch away, this ensures that you don't spend too much time on it, since the risk is inherently there already. B) when you've started a sketch, you're more likely to finish it because it feels more final than a rough draft with a pencil. Mobile first: if your application will be available on a mobile phone, which it is in this course, you should prototype for the mobile screen first. Because of the limited size you'll have to immensely prioritize what you want to display and won't have any problems to scale it up for a desktop application in the long run. Don't polish: paper prototyping is not about perfecting your arts and craft skills, it's about finding a solution to a problem as fast as possible. Don't spend time making sure everything looks perfect or is aligned correctly, just remember most likely you'll end up throwing your sketches into the trash as soon as they have fulfilled their purpose anyways.
When testing, don't underestimate the stress that a proper user test with a paper prototype will put you under. In order to make sure you actually obtain all the relevant insights, have a dedicated interviewer and another person "operating", so to speak, your prototype. Depending on your method of documentation, essentially anytime you don't record the entire thing via video it is also a good idea to have a third person writing everything down. If you can't or don't want to prototype on physical paper, for example, if you do your evaluations online or you work in a remote team, there are several tools to do a digital paper prototype. The big difference to digital high fidelity tools such as Photoshop, Adobe XD or similar is, again, the deliberately sketchy look of it.
Using Nielsen's (2012) Usability 101, create sketched early stage vertical prototypes on paper of (more than five) different views of your interactive application that address your analysis and design stages.
Usability 101 by Jakob Nielsen, online article
Paper Prototyping by Jakob Nielsen, online article
Upload your screen images to a folder iteration-1/prototype in the GitHub master branch.