Introduction

This lesson contains 1 activity that you should complete as you go through it.

What is Flow?

According to Mihaly Csikszentmihalyi (one of the central thinkers on the concept of flow), flow is

“being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you’re using your skills to the utmost…

A Web site that promotes flow is like a gourmet meal. You start off with the appetizers, move on to the salads and entrées, and build toward dessert. Unfortunately, most sites are built like a cafeteria. You pick whatever you want. That sounds good at first, but soon it doesn’t matter what you choose to do. Everything is bland and the same.

Web site designers assume that the visitor already knows what to choose. That’s not true. People enter Web sites hoping to be led somewhere, hoping for a payoff.” – Mihaly Csikszentmihalyi (‘Go With the Flow’)

Flow is about immersion in a task and a commitment to achieving a goal. We all have had this feeling on websites or when reading a good book. We easily move from stage to stage as we complete smaller tasks to achieve a goal.

Developers often feel like they’re “in the zone” when coding and it’s very easy to concentrate for a few hours without break. Then a Skype pops up or someone comes into the room and speaks and it can break the flow. It can be difficult to regain that focus again.

This is obviously a very important aspect of a site. If the site has a bad flow, users are unlikely to stick around and achieve their goals. Achieving goals is, after all, why the website is created and why the user is there.

When a user is in a state of flow, they are in an almost meditative state. They can stay in that state as long as they are free from boredom created by repetitive tasks, they don’t feel anxious about confusing tasks, and don’t get tired from long and unrewarding tasks.

Where Are Users Coming From

Users are all coming to your site from various sources. Some might be clicked a link from a newsletter, others might be landing on an article from a long-tail search on a search engine.

There are different users and they’re going to have different flows through the site. We need to build the site so that the different users can understand where they are, what the site is about, and how to move forward.

Clear goals

Clarity is key to creating good flow, and having clear goals is vital both for the user and for the designer/developer.

The user should easily understand the sort of goals that they can achieve on the site or app. Having clear descriptions and well-thought-out copy can help users quickly assess whether their goals will be met on your site or app. Having vague, open-ended goals is not going to draw the user in. In fact, it’s likely to drive them away as they search for a site that does match their goals.

There are also business goals that need to be achieved and these are important to take into account when designing the flow. How can we get the user to subscribe, purchase, or continue browsing?

Feedback

Once the user knows what goals they can achieve, they’re going to start trying to complete tasks to achieve the goal. They need instant feedback about whether tasks are being completed correctly or not.

The feedback must be consistent so that if they perform one action on one page, it’s the same on another. The actions themselves should be obvious so that the user doesn’t even think about having to wait for feedback to check whether their decision was correct or not.

This builds trust with the user and lets them feel more absorbed in the flow. If a user has to wait for feedback to occur, they’re likely to break flow as they start to think and analyze what is going on.

Feedback should also be provided about how far down the process the user is and what the next steps are to be completed. This feedback is vital to reduce anxiety in users about how long the process will be, or how far they’ve come. You can use breadcrumbs or progress bars to achieve this.

What Breaks Flow?

Thinking about what you’re doing breaks your flow and moves the activity from being an immersive, almost sub-conscious activity, to being a conscious activity. It takes concentration away from completing goals to rather analyzing tasks.

Unsure what to do

If the user doesn’t know what to do next, they are forced to make a decision to either click a few links and find out which one is the correct one, or rather bounce.

Perhaps the user is filling in a form, and the form asks for a special ID, but the user is unsure which code to put where. This can break the flow and cause frustration for the user.

Unknown errors

Errors are an important part of feedback, and good error messages can still keep users in the flow. But when the error feedback is difficult to understand, it can get very frustrating.

Have you ever had to fill in a phone number into a form and kept getting an error saying “incorrect format”? Well, the system is at fault here, not the user. The system should be able to format the number itself rather than waste the user’s time and flow to get it correct.

User gets bored

If there is not a lot to discover on the site, it can get boring for the user. Sometimes a user will return a few times, and if there is only limited information on the site it can become quite frustrating for users.

Too many obstacles in the way

Try to design the site as efficient as possible and by doing so you’ll reduce the number of unnecessary hurdles for the user. The more obstacles you place in a user’s way, the less likely they are to complete.

A degree of challenge is good as it excites users to want to overcome something to achieve their goal, but this is a fine line and we must be careful to engage and excite rather than frustrate.

User gets interrupted

Having exciting animations or interactions can seem like a good idea, but they can also just be distracting for the user. Just like when watching a film, you get immersed in the story only for the camera-person to use a weird angle and suddenly you start thinking about why that angle got used rather than being caught up in the story.

Less is More

It is important that websites and apps are kept as simple as possible. As previously stated, the user evaluates effort versus reward, and if the flow feels long or confusing, they are likely to bounce.

Keeping things simple doesn’t mean depriving users of content but rather making things manageable and understandable.

You want the user to slowly become involved with your product and to get into the flow of using your product. Too much information too early on is likely to overwhelm the user. Start off with only a few call-to-action buttons and slowly lead them through the system.

Most salespeople won’t give you all the information about the product up front. This obviously would take too long, but it also doesn’t entice the customer to take steps. You actually want the user to be taking actions on the page so that they feel engaged. This is often why pricing might be hidden on a different screen. Even though it might be information the user readily wants, it’s a better flow for the user to click around to get that information as they feel more invested in using your product.

You don’t need flashy interactions to draw the user in. Sometimes over-the-top interactions can actually hamper the user and turn them off.

Another way of keeping things simple is by using icons rather than images to convey meaning. The more detail a user needs to take in, the longer they’ll spend thinking rather than doing. Icons can also help reduce the number of words needed to convey an idea.

Also, try using solid colours rather than gradients. It keeps things neater and again reduces the complexity of what the user is viewing.

Try to keep the number of features on the site down. More features actually mean more complexity and not the other way around.

Intuitive Design

Users should be in an almost meditative state as they use your website. They shouldn’t be thinking about the individual steps they are taking but should be engaged with your content and with the feelings they get when using your site.

It’s important to create positive emotions in your user without them being entirely sure how those emotions arose. Having errors or complicated systems can break this positive mood and halt the user, forcing them to think. Asking them questions in pop-ups might seem like a helpful thing to do, but if it doesn’t answer a real question they have, it’s likely to distract them and force them to think.

The interaction should be seamless and transparent, and the user should be immersed in the experience and not counting how many pages deep they are or wondering what buttons or links do.

Mental Models

The user arrives at an interaction with certain preconceived notions of how the process could work and what to expect. Perhaps they’ve used a similar site before, or they’ve used a real-world version of what the site does.

These real-world experiences were especially important in the earlier days of the internet. We now have ‘add to cart’ to simulate users adding items to their shopping trolley as they would in a brick-and-mortar shop. This also leads to the use of skeuomorphism, whereby designers use objects that look like their real-world counterparts.

It’s helpful to understand the user’s mental model and leverage it so that users already have things to work with when they arrive. If they had to start from scratch, it would take a while to get into the flow due to the amount of cognitive processing needed.

The user’s mental models reflect their understanding of the past (things that worked or didn’t before), the present (what they’re currently doing and seeing), and the future (what they expect to happen). In all three of these areas, we need to ensure the user’s mental model and our product’s model fit together well.

Reducing Work

The more work a user has to do, the more drop-off you’ll see in users completing their goals because, at certain stages, they won’t see the reward as worth the effort. Some tasks just need to be done, like creating a profile - but it’s often better to set this further down the path so that you can draw the user in slowly.

When creating a profile, it’s useful to have things like ‘Sign up with Facebook’ so that users don’t need to fill in anything and can just stay in the flow. Later they can update the information you feel is necessary.

There are many different ways that we create work for users:

  • Cognitive. When the user is unsure, they must perform work; to think about what to do and how to do it.

  • Memory. Making users remember codes, passwords, or where they are on the site causes them to break the flow and have to work.

  • Visual. When users need to try to find out where on the page a certain element is. This is especially a problem if it’s something like the ‘next’ button. Also, if the visual layout suddenly changes, the user must try to figure out what the new layouts and visuals mean.

Updating an interface

Large-scale updates to a website or app can be very disorientating for regular users. Initially, it will create friction with users as they have to re-learn the system, where things are, and how to use them.

It’s no wonder that whenever major websites make large changes to their UI, people complain bitterly about not knowing where to go or what to do. It’s one of the reasons incremental changes are preferred, but sometimes it’s useful to make a clean break. After a few weeks, everyone would have forgotten the old interface and probably actually prefer the new one.

Activities

📖 READ

From About Face: The Essentials of Interaction Design Paperback, 2014, by Alan Cooper et.al.

  • Chapter 12: ‘Reducing Work and Eliminating Excise’ (3h)

Lesson Task

Goal

To learn more about user flows, and how they can affect a site. It’s important to be able to conceptualise how a user will flow through a website or app.

Brief

Draw a UI flow diagram for two different flows in Netflix.

  • If you are a user, log out and follow the signup process. See how they use progressive disclosure to bring you further down the process. You don’t need to complete the process, so don’t worry about having to put credit card details in.

  • Browsing movies (optional). If you are a user, take some time to see how Netflix encourages you to stay ‘in the flow’ and continue browsing around until you’ve found the right film/series.

UI flows gives a helpful shorthand for desinging UI flow. There are a number of ways of representing the flow including flowcharts.

This article gives a helpful shorthand for desinging UI flow. There are a number of ways of representing the flow including flowcharts.

Write the name of the page the user is on, then draw a line below and write what action they take. Link that to the next page they go to and what action they perform there.

Time

2 hours

Tags: