Prototyping is used as a quick and dirty way to flesh out an idea or test out an issue that you don’t know the answer to. There are numerous different ways to use prototypes, ranging from stop motion animations using paper to flash animations to actual prototyping software.
I first started with paper prototyping on a new project with my co-worker & UX Strategist, Alli Dryer. We wanted to find a good layout for existing content for an iPad app. We used a mix of paper, crayons and a few printed out mockups and placed them in an iPad sized paper frame. This allowed us to quickly play with different layout options and get a feel for how each section could move. This helped us rule out the layouts that didn’t feel right in the device pretty quick and hone in on a few that we could play with further. It was a major time saver for the developer and us.
It is important to keep in mind that this is a proptype and not to spend your precious time making it perfect. Your inner OCD will appear as you begin to cut out pieces of paper and realize they don’t equally match. Don’t worry about this! Remind yourself that this is not a final product but merely a helpful tool to get the idea out there. Once the idea is established, it will be thrown away as new ideas branch off of this one.
The next iteration was testing out various interactions – basically just playing around to see how things work. It’s fast paced and helps you get a quick confirm (this totally works!) or deny (oh no, don’t ever do this again!). We really didn’t want to involve the developers in the testing phase of this cause it would really be wasting their time. It was best for us to just figure out what we could on our own, and then talk to them to test out our findings.
For this we used the app iStopMotion, it uses a combination of both the iPhone and iPad. I set up a tripod and positioned the iPhone to be used as a camera. The iPad was used as a base station, allowing us to play with the exposure, focus and taking the actual shots. The result was a quick stop motion video that mimics actual interaction enough to tell if it was something we wanted to move forward with or try something else.
Once the app was in the design phase, we started putting the comps in Field Test. This tool allows you to upload comps and apply tappable hotspots that animate with touches and gestures. You can share this project via a mobile friendly link and present the prototype on an actual device. This gave the client a sense of the look and feel of the app, so they weren’t just looking at flat paper comps. Although there were some limitations to animations, this became our living spec document.
Sometimes simply explaining animations verbally, adding various swooshing noises and crazy hand gestures, receives an audience of blank stares. Animation software, like flash, is also really handy when you are trying to explain how screens should transition between one another. This is also something that needs to be done right or the experience will lack polish. With this knowledge on my shoulders, I had to get the animation right (or pretty dang close) to show the developer. You can see below one of these animations:
Prototyping is great for design iterations, but it also a great tool to help others understand your idea concretely. Prototyping allowed us to brainstorm many options before plunging ourselves into the app building process. It also allowed us to fail without going in too deep and wasting time. Prototyping gave us something to show the client so they could see how things were going to function in the app, before the app was built. It was also helpful for the client to have something to show their team internally, making approvals to go by a little smoother on both sides.