Users today have an expectation of a good experience where "things just work" without needing to read a manual to figure it out, making it ever more important to create a well-designed interaction. Building prototypes helps you to lead the conversation in the interaction design, communicate your ideas more clearly, and solidify a good experience for your users.
Prototypes allow you to lead the conversation and design the direction of the user experience.
Prototypes start the conversation of how the interaction should be. Before getting too heavily into development, you have a chance to design and say something first about the behavior of the information’s layers, states, animations and transitions. Here’s your opportunity to think like a sculptor. Unlike a painter, a sculptor doesn’t only work on the front side of a piece of art. A sculptor works and manipulates every angle, making sure that no matter which side the viewer is looking at, the viewer has a captivating experience and wants to move around the sculpture. Your prototype lets you design your user’s experience from end to end and help maximize ways to delight and guide them through to the next task. With this thought process and the design finished before the development phase begins, your application’s experience will improve and you’ll kick off the project in the right direction.
Prototypes help you communicate your ideas more clearly.
You do not work alone (even if you do, you have to sell your ideas/work to someone), and everyone does not think like you. So it is important to utilize the right tools to communicate your ideas quickly and effectively. If a picture is worth a thousand words, a prototype is a word multiplier that tells the story with the most efficient use of time.
Your communication to your team is better with a prototype.
A prototype helps you communicate your design to other people, such as the development team. I can’t tell you how many times I’ve laid out a non-interactive design in front of the team, thinking the interaction was obvious, and every single person had a different assumption of the behavior. With prototypes, I don’t run into that problem.
It is like when I ask a group of 20 people to picture the color of Coca-Cola Red. If I could print out or display the color that each individual was thinking, I would have 20 different colors of red, plus the actual Coca-Cola Red. So if I want to make sure we are all on the same page, I need to bring a sample. This same concept applies with interaction design. If you want to make sure the team understands your design intentions clearly, then bring a prototype to quickly demonstrate your idea. You could try to explain it in words, but you eliminate guesswork and inability to imagine the concept by showing rather than talking.
Your idea is better with a prototype.
We know that people learn by listening (lectures), reading (text books), seeing (visuals), and doing (assignments). So for people to learn and understand your idea, not only do you have to talk to them about it, write a few emails, and design some screens, you also need to provide a way for people to experience your idea on their own and get to know it through their own eyes. As much as we enjoy (or don’t mind) people explaining their ideas, we get a chance to really understand it when we have the space to explore it and see it for ourselves. With a prototype, you reduce uncertainty and make it easier for people to buy into your idea as well as portray your idea in a way that is easier for people to understand.
Prototypes allow you to prove your theories and fail fast with minimal cost.
While educated guesswork can make a good design, making the actual interaction design gives you the tools to get feedback and results to measure and weigh your “gut instinct” and assumptions. When people interact with your design and get the concept right away, you can prove your hypothesis as valid. Sometimes however, you might make a few oversights and find that your hypothesis isn’t valid. For example, I designed a page with several filters on the left hand side. On click, a user would see a panel slide out and they could modify the filter selection. Further into the project development, we went back to the first filter grouping and exploded the selections with every option needed and added some tools to help users narrow down and find the right selections.
I built a mega panel (or what I like to call a "mega menu") prototype for this to show how some of the tools worked in this panel. For consistency, I kept the interaction for opening and closing the panel the same as the smaller ones. The problem was that once people interacted with this panel, it didn’t feel the same as the others and the pattern that worked for saving and closing before didn’t work for this. My prototype helped me see things I overlooked and I was quickly able to create a better solution before this was worked on by development, QA, and released to the world. This prototype proved my tools were effective and helped us avoid creating a bad user experience.
Prototypes are an important tool to help explain, design, and share your interaction design. While frontend coding is one way to build a prototype, you can find several products that make the prototyping process easier and more robust without having to know much or any code. Currently I’m using Invision for most of my prototypes. While I can’t refine my interactions as well as I would like, it is one of the easiest ways to build a click-through prototype and the learning curve is not very steep. It also has some great collaboration and commentary features as well as easy ways to update designs. Axure is one of the most well-known programs, but I find learning the software rather time intensive. I’ve been to talks where design teams explain that they use the animations and transitions in Keynote or PowerPoint to build their prototype. Other tools include Avocode, Atomic, Flinto, Framer, Indigo Studio, Origami, Marvel, Pixate, Proto.io, and Prott.
Whichever tool you use, the key is to develop a prototype that lets you have better control of the interaction design, lead the conversation and clearly communicate your ideas to others, test out your concepts and find weak spots before going through the development process.
To learn more about how Dialexa converts ideas into functionality, including our approach to the new product development process for software, click the image below.