Conditional Logic In Phase — { if/else Made Visual }
{ ❤️ } — Why Conditional Logic in Prototypes Matters
With every great app or website comes a long and complex design process. One of the most important parts of that process is prototyping. But why do we prototype and why are the prototypes so important?
Being designers means working on solving problems. One way to solve is to go with our intuition and release the new features we feel like releasing. But, as it happens, sometimes our gut is wrong. So it’s always a good idea to validate our solutions before we invest further development hours into deploying them. Not only does this save us lots of money and time, but the validation process also helps us better understand the people we’re designing for.
Prototyping ≠ Hollywood Movies
So we know that prototyping is important, but how do we know if we’re doing it right?
Our digital apps are not linear. All digital products, besides maybe one-page websites, have multiple dynamic flows that users can follow. But somehow, prototyping those flows is frustratingly hard.
There are basically two kinds of prototyping tools that exist. First, the visual tools. These prototyping tools are quite easy to learn, on the other hand, they don’t allow us to create prototypes that feel anywhere close to the final product.
Also, most visual prototyping apps use some kind of duplicate screen model. Duplicate a screen for every single element state, then put a pre-made interaction in between. So if our prototype has multiple flows, we have to prototype every single one separately.
So, to create a 3-switch lock, you need to have 8 different screens for every combination. But you also have to connect all of the screens with each other. With this level of permutations, good luck figuring out what’s missing and why the prototype doesn’t work. And that’s just for changing the positions of the switches. To prototype unlocking and locking the shackle, you would have to create exponentially more artboards.
The problem with prototyping is, we’re not really designing real digital products — we’re just faking it. This is where many of your clients get confused and lost. They expect to see how the app is going to work, not hear about how it might work once it’s coded.
Your other option is working with actual code. Coding tools don’t limit us in any way, but coding has a learning curve and getting proficient is a time-consuming process.
As designers, we deserve tools that allow us to prototype fully-working and complex solutions visually and without linear-flow limitations.
Prototyping, meet Conditional Logic
To prototype fully working apps, we should be able to reproduce multiple flows and scenarios. We need a way to use if/else conditions in our prototyping flow. If we look closely at the apps we’re using, we’ll see that these if/else conditions are everywhere.
For example, whenever you’re facing a login screen, an app is checking if the password you typed in matches the one stored on the server. If it’s correct, you’re redirected to a new screen. If the password is wrong, you’re asked to try again. These are two different actions that may happen, depending on one condition.
Or say you want to rent a bike or use any other service that requires you to have some cash on a digital balance. When you try to start a ride, the app checks to see if you have enough money to start a rental. If yes, you can give the bike a spin immediately. If no, you are asked to top up your account.
In other apps, you might have a list to choose from, with the option to select multiple items. Once you’re in selection mode, the action button will only be highlighted if you’ve selected at least one item. If you haven’t yet, you won’t be able to tap that “Confirm” button.
These examples are very simple, but reproducing them using the current prototyping tools is a great challenge.
So, why does this all even matter? Because if we could create digital prototypes that actually work, we could run better user tests and spot the missing pieces faster.
The next step in prototyping
Our challenge is the following: How do we take our prototypes to the next level? Do we just have to learn to code and spend countless hours making our prototypes work? That’s one way, but it doesn’t have to be the only one.
As designers, we truly love to work visually, without code and limitations. And we all intuitively know how we want things to look.
If you’ve ever played with LEGO Mindstorms or Sphero, you may be familiar with the concept of visual prototyping. You program robots by drag-and-dropping blocks that have some variables and/or conditions. We can also design 3D objects, cars, and games using similar visual building blocks.
Applying this idea to digital design: what kind of blocks would we need to prototype websites and apps? Once we’ve defined them, we can look at how they work in code. Let’s say you’re clicking a button on a website, it involves a few things:
First, the button itself has to be added as an interactive element. We’ll call this element a Selector. Then we want to be able to perform some sort of Event on it, like hovering or clicking. Here we can also add different States, that we can toggle in between using Actions — if we hover over the button, it changes from one state to the other by clicking. And once it’s clicked, we can assign an Instant Action (a.k.a. Operations) to define what happens after the button is clicked, like displaying a model with a message.
And that’s how we came up with the idea of Phase.
Of course, Phase also has Conditions. They are the same if/else conditions that allow us to create multiple flows in our digital products, made simple and visual.
Let’s come back to the previous example that I tried to prototype in a duplicate-screens tool. Combining States, Events, and Actions, you can make switches move. Same goes with the lock shackle. We could (of course visually) add a condition here that will make the lock open only when certain states are active.
Previously, prototyping such scenarios would involve coding, but that’s no longer the case.
Join Phase Community and help us in shaping the future of prototyping. If you want to give Phase a spin, give us a shoutout in #beta-testing channel there!
Join Phase Community 😇
- Phase Slack: https://phase.com/community/
- Twitter: https://twitter.com/phasecommunity
- Facebook: https://www.facebook.com/phasecommunity/
