Learning to Love the Process

At Gvio, we work on a range of projects, from dashboards to mobile apps. Behind each one, we think granularly about every step the user takes—the way they get from point A to point B. If you think about every time you’re on a website or an app on your phone, you go through one process after another—uploading files, creating profiles, adding items to a cart, scheduling a trip, interacting with that new self-tracking app you just got…and the list goes on.

Now take a step away from your computer and look around you. Seen or unseen, processes are everywhere on every scale imaginable. Traveling, cooking or baking, your commute to work—these activities all involve getting from here to there, with steps and actions to complete in between. There is a start and a finish, whether that be reaching a destination or just having a meal. Since processes are ever-present in our lives, it’s nice for them to be manageable and seamless—and if we’re lucky, maybe even enjoyable.

When conceptualizing an on-screen process, it’s helpful to take some cues from life off-screen.

 

Are we there yet?

People like to be aware.

Think back to the last time you were on a long car trip—I bet there’s a 99% chance you asked this question and if you didn’t ask it, you definitely thought about it (or maybe you checked with Siri or Google Maps to see if they had the answer). We like to know what we’re doing, where we’re going, how we’re getting there, and of course, why we’re doing this? What is the end goal?

When I’m interacting with a site or an app, I like to know the general actions I have to take and where each one will take me. An easy way to accomplish this is to show progress, whether through a progress or status bar or giving a high-level view of the steps and the completed ones along the way. Other elements to include are feedback, reminders, and goals. In subtle ways, we can tell the user how they are doing and offer hints to help them stay on track or incremental goals to complete.
Facebook process example
When creating a profile, Facebook shows the user steps completed and offers context information for the current step.

Elements that may seem small and go unrecognized at times can actually go a long way in making it easy and more intuitive for a user to work through a process.
 

What if I make a mistake?

People like to be confident.

Have you ever decided to try to bake those cookies that look so delicious in the photo but the recipe seems so long you never attempted it? There are so many steps and you just don’t know if they’ll turn out the way they’re supposed to. We worry when something seems complex or daunting. But take a closer look, the recipe is broken down into sections: an overview of how long it will take and the serving size, the ingredients, the preparation, and finally, the baking.

When I’m working through a big task, it’s helpful when I take it one chunk at a time so that I’m not thinking about a hundred things at once. Breaking down what may seem like an overwhelming amount of information into manageable portions can make something more painless to use; it’s important to avoid user anxiety. We can ease the user into a process, rather than throwing them in the deep end head first. Initially there could be a more straightforward approach, like a step-by-step wizard, and then they might be more familiar with the material to work on their own. Maybe there are tooltips to give the user help if needed or an intro guide to walk the user through how the process works before getting started.

The key is to design something enjoyable rather than daunting; find the balance in the flow of information.
 

Can I go a different way?

People like to play.

Do you ever get tired of traveling to work the same way every day? Do you ever switch up your route or mode of travel to break the routine? Maybe you bike one day and take the train the next. You could split up the trip by grabbing coffee and a bagel at that really good shop that’s on the way. We live our lives based on routine, so once we familiarize ourselves with something, it’s nice to explore and have options.

If I visit the same website on a regular basis, I like to be able to do things a little differently (or quicker) and maybe cut some corners where I can, compared to my first visit. For example, Pinterest, the image-sharing site offers its users two workflows, both with the same end goal: one working directly off the homepage, while the other takes the user into a detailed-view.

Pinterest process example
On Pinterest, the user can pin and share directly from the homepage through mouseover buttons.

Pinterest process example detail
The user can also click into a pin to work in a more detailed-view

It’s important to keep in mind that we should appeal to new users and power users alike—not everyone is using the app for the first time and needs to be guided through. We can do this by offering options and flexibility to complete a process. Maybe in addition to a step-by-step wizard, there is also a more modular, live-edit path to take. Maybe there are shortcuts integrated into it. While a process should always be intuitive for a new user, we can allow for some discovery and exploration.
 
When designing a process, sometimes it is easier to take it out of context and think of it in terms of scenarios we encounter on a daily basis. It might enable a clearer train of thought without getting too caught up in the details.