Four purposes of prototyping interfaces
Prototypes are about getting feedback quickly. Knowing how to prototype at different project stages is key.
It’s a hot topic. From panel discussions and workshops, to posts here on Medium and around the Internet, interface prototyping is highly debated. A host of amazing tools are now readily available for designers, and it can be confusing to understand the differences. During my recent research on prototyping (watch the presentation), I came up with four distinct purposes that can help clarify the process and choice of tools.
1. Concept exploration
At the beginning of a project, all you have are rough ideas. Your framework for the project is just starting to take shape, and you need to quickly test out ideas to see if they live up to your vision. Maybe it’s an idea for a page layout, an illustration style, or a particular animation for a key user interaction.
Since you’re starting with nothing, the goal is to quickly sketch your idea with tools you are comfortable with. If you work on an app and like sketching on paper, you can try the Marvel or Prott apps to scan in your sketches and make them clickable in a few minutes. If you want to collaboratively sketch out simple wireframes, you can try Precursor or Moqups. Apple uses Keynote for rapid exploratory prototypes.
Just keep in mind not to fall in love with these prototypes, they are disposable. The goal is to quickly test, get feedback, and move on. Depending on your team and client, you might want to be very deliberate who you share these prototypes with. If you are exploring wild ideas, you might scare off a client or create concern in another team in your company.
2. Collaboration & communication
A prototype can be a very powerful tool to communicate the future state and story of a project to all stakeholders. Every project involves people with different specializations, and ensuring that they all pull in the same direction goes a long way. So the key here is to make a prototype that accurately communicates the overall flow, as well as design decisions you made that affect the work of others. So if you are designing a landing page that your client’s marketing team creates content for, you need to ensure that they can follow the design progress, give feedback, and adjust their work accordingly.
These types of prototypes can be simple technically, but need to allow for fast iteration, easy sharing, and effortless conversation. Marvel and Invision are two great services to look into. With both, you create simple, clickable prototypes from static images. The whole team and clients can access the prototypes at all times, and leave feedback on specific pages and details. Extra features like Dropbox syncing and PSD import allow for rapid iteration, and notifications ensure that everybody involved is up-to-date.
This approach does not communciate everything that goes into the final design and production of a project (custom animations, component states, etc), but it is a great way align everybody’s thinking and efforts. And that goes a long way.
3. Execution testing
You’ve explored ideas and communicated the big picture, now it’s time to ensure that all the custom and difficult things you have in mind can actually be executed perfectly. Your users likely spent 80% of their time on 20% of your interface, so it’s good to prototype those areas in high detail to ensure the experience is intuitive and fun. The tech team may have also raised a flag about a particular interaction, and want to write actual code before production kicks off to catch potential issues ahead of time.
Protoyping execution is about isolating the one thing you are testing and actually building it exactly the way users will eventually encounter it. If you’re testing a custom screen transition for an iOS app, you could use Pixate (they have great video tutorials), a visual editor for creating high-fidelity, native prototypes that you can actually run and interact with on your phone. If you need access to the gyroscope, you could use Google Form (here’s an intro). For a website, it might make sense to just use your favorite coding tool and start writing HTML, CSS and JS. Or if you are building on top of an existing technology stack, you might want to start there.
This approach is great for ensuring something you have envisioned can actually be done, before you commit to it. Sharing and collaboration here can be limited to the people involved in the final production, and the people that will be affected if your validation does not work out so well.
4. User testing
User testing is like a scientific experiment. You create a highly specific environment for somebody else to act within, and measure the results with minimal interference. Your prototype is at the core of the experiment, but the instructions and context you provide to users is just as important.
Getting feedback from actual users can be done at any stage of a project. For research, validating a direction, ensuring the way you executed something actually works well for others, post-launch behavior changes, etc. Similar to concept exploration, the tools and medium you choose for your prototype are up to you. Your choices just need to effectively simulate the experience you want your test subjects to give feedback on. So whether you go for print-outs on a wall, interactive Axure wire frames, or simulating an app in Javascript with Framer (see Designing Twitter Video), it’s your call. You will likely throw out your prototype after the experiment, so just pick the most appropriate tool for this specific job.
The bigger the difference between you and the end-user, the more important user testing becomes. For example, I would not trust my design decisions about an interface to be used by a doctor during heart surgery without thorough testing. It’s good to be humble when creating things for others.
No one size fits all
Like sketching, prototyping is just a way to make something more real. The best way to prototype is the way that is most appropriate to your specific situation. Nonetheless, I think there are some general guidelines that we can hopefully agree on to facility our conversations and the way we structure our work. To me, knowing that prototyping can be done for different purposes is a good starting point for that. Now we can go deeper into specific approaches, tools, and techniques. That’s the most fun part anyways.
I discussed these ideas at my presentation about UX prototyping. Follow the link to for a video screencast and a list of tools and references.
