It has happened! Apple has given us a glimpse into the process they use to make their well-thought-out apps. In their presentation “Prototyping: Fake It Till You Make It,” I was pleasantly surprised to find my process wasn’t too far off from theirs. Sure, they are talking about iOS Apps, but who says these same techniques can’t be used for the web too.
Reasons for Prototyping
Prototyping can take many different forms, but no matter how you prototype, the goal is to test out ideas in a low-cost way to save time and money while discovering the right solution. Trying out new ideas can make your product user experience better.
How to Prototype
Before Making the Prototype
Starting is hard if you don’t know what your goals are. Apple points out asking these three questions to get you started:
What needs to be real? In other words, what is the one part of the experience we want to create and get more feedback on?
What can we fake? We don’t want to recreate the wheel, so using screenshots for UI elements we are not changing is a time saver.
Where will they use it? Determine whether users will use the product while walking down a busy sidewalk or maybe on their couch in front of the TV.
User Testing
After creating your prototype, you have to get another set of eyes (and hands) on it. Ask your testers the following questions—do not guide them, just watch and listen.
_Do you know how to ________? Insert the end goal of the experience you have been prototyping.
_Is it easy to ________? They may have figured it out, but you also want to find out if they had an experience in mind that would have made more sense to them.
How can we make this better? Testers may have answered this above, or they may give you some feedback on something as easy for you to change as unclear wording.
Rethink and Try Again
After laying out your idea and letting some people in that target audience test things out, you need to compare what your experience goal was to how it was perceived by the tester. You can start by asking these same questions the Apple prototypers ask themselves.
What’s working? Are there parts of your goal that came through smoothly? Don’t be disappointed if the answer is zero your first time around. That’s why we prototype.
What’s not working? This could be everything, but you will want to give yourself bullets of some key issues your testers had; otherwise, you’re back at square one.
What other ideas does this give us? Did your testers keep trying something that seemed like the obvious answer to them? Maybe they clicked on icons more than text or tried scrolling instead of using the navigations.
Prototyping CSS Animations and Page Transitions in Keynote - Why Didn’t I Think of That?
There are two types of Keynote animations that we can use to our advantage: “Build” is the action to animate an object on a slide, and “Transition” can be used between two slides. Since this presentation focused on iOS App prototyping, they pointed out some awesome animations that may not work as great on a website. I recommend you still watch how they did these animations—you never know when having these tricks up your sleeve might come in handy. (27 min into the presentation)
“Build” Animation
“Transition” Animation
Right away I had ideas for my current projects and other ways I could use these animations. I even see a great use for these when explaining to my team how an animation should work instead of worrying that the way I describe it is coming across right.
Exploring Specific Interactions
After a few rounds of faking the app and planning page transitions, Apple moved onto using Core Animation and Xcode to plan touch interactions. They point out not to engineer it but to hack it together quickly—this is still a prototype. If you aren’t familiar with these, this is the point you’ll want to ask a developer for help.
Check It Out
Find out how your prototyping process matches up. Watch the presentation: Prototyping: Fake It Till You Make It.
