Anticipatory Design

Reading Time: 6 mins approx.

Working as a UX Designer, I keep myself updated about the latest UX trends that would enhance my knowledge in this field. Three years ago, I was going through UX articles to gain wisdom and I came across an article that claimed itself to be the next breakthrough in the field of design.

Not to keep in suspense, the articles that I read was about ‘Anticipatory Design’.

Based on this, I researched on Anticipatory design and I thought this would be a great topic to share with my team so that they would be aware of it as well. So I decided to give it a shot and made it our monthly training topic and right after the session everyone enthusiastically had many things to talk about situations in which Anticipatory Design was involved.

Anticipatory comes from the Latin word Anticipare, which means “taking care, ahead of time” or in other words – in preparation of something happening.

To understand more about this let’s take a couple of movie scenes from two famous Hollywood movies that are my all time favourites – “The Devil Wears Prada” and “Batman” franchise.

The Devil Wears Prada (adapted from the novel of the same name) tells the story of how a college graduate named Andrea “Andy” Sachs, works as a co-assistant for a powerful fashion magazine editor – Miranda Priestly, a powerful and intimidating woman by character. At the beginning of the movie,  Andy is given instructions about how to make sure that the things Ms Priestly needs are being taken care of before she comes into the office. Like, she needs to be served coffee (based on Miranda’s requirements) 5 minutes before Ms Priestly arrives at her office desk so that the coffee is neither too hot nor too cold. If anyone has watched this movie, you could see how Andy needs to anticipate Miranda’s needs before she asks something for anything.

Or else this would happen (yikes!!)

Again from the Batman franchise movies, we see many scenes in the movie where Bruce Wayne and his noble butler – Alfred Pennyworth, try to solve things happening around them and we see Alfred anticipating Bruce’s every need, without Bruce telling him to do.

Coming back to the design – to make the definition simpler

Anticipatory design = anticipation + experience design

which means “Design that anticipates, based on your behaviour and design that is one step ahead of you”.

How does Anticipatory Design Work?

Since making a decision requires much planning and definitely time, it’s possible to save time by removing the need to make a decision in the first place.

Anticipatory design eliminates many steps that require user’s input and replaces them with action which happens automatically. When I say actions – it means those that are based on prior user’s behaviours and business logic.

Let us take booking a vacation trip as an example by using a website that you use often. In traditional UI, for a user, you would be given a few options, and this takes time to select the one that is best for you. It sounds like a simple task, but in reality, you need to go through many important decisions such as selecting a flight based on the time you wish to board, choosing a hotel along with its necessary facilities, transportation to anywhere nearby, map directions to find the nearest police, hospital or embassies and so on

These major decisions could take up a lot of time followed by making smaller decisions. Such as, while selecting a flight you need to figure out whether you like a morning or evening flight, what seat would you prefer such as aisle or window seat or if you want to take a first class/economy ticket.

Rather than giving a lot of options, an anticipatory method will follow a radically different approach — the website itself selects a flight and hotel automatically, based on preferences such as favourite airlines, flight time and place for a hotel which will be based on prior travel behaviour. The only thing users need to do is to confirm that this decision is good for them to go ahead.

Anticipatory design streamlines a process as much as possible for users to minimize their options and, make decisions on behalf of the users. The goal of the anticipatory design is to create a system where decisions happen automatically, and users might not even know that the system is doing it and yet are provided with wonderful options or suggestions.

In this article, I am going to cite examples of four major mobile or web applications, that I use often in my routine – which have the concept of Anticipatory Design within it.

a. Gboard

Gboard or Google keyboard is a keyboard application which once installed and made as default – can be used in any other application such as Whatsapp, Skype, Facebook and so on. This I would say is one of the most life-changing keyboards that I have used on my phone. Main features behind this application are glide and voice typing, language switching, GIF’s (based on common and special events like Halloween Christmas, election day based on different regions) and emoji searches.

But the most important feature in this app, which I like the most and which I feel makes use of Anticipatory design is its next word predictive text feature.

Say for example in Whatsapp, if you have typed ‘Happy’, the next thing that appears on the keyboard would be ‘birthday’, ‘father’s’ etc as seen on the image below. Similarly, after typing ‘Good’, the next thing that appears would be ‘luck’, ‘morning’, ‘afternoon’ and so on. Based on these, our decision of selecting words is being made easier.            

b. Amazon

Amazon is definitely a major example of anticipatory design. If you read any article related to Anticipatory design, this application certainly comes up.

One such feature is the recommendations section which is data-driven, as this service uses the information it has about its users. This way it provides suggested items based on past purchase history and also based on what other customers have to say about it.

Amazon being a huge e-commerce store, it can get difficult for users to decide what product they wish to purchase. That’s where  Anticipatory design helps by narrow down their choices and directing their attention towards specific products that they feel is right for them.

c. Netflix or YouTube

Using Anticipatory design in Netflix or YouTube, following advantages take place:

1. It reduces the cost of choice

2. It simplifies user interfaces and

3. It improves the quality of decision-making

Let us see in detail each of these applications.

In the case of Netflix, based on the genre of movies or TV series that user is interested in, the app gives a list of similar movies or TV series. Netflix also gives us notification of upcoming movies or TV series based on our liking. One of the most useful features is the ‘Continue watching’ section, in which we can resume watching anything from where we have stopped.

In the case of YouTube, based on the videos that the end users look into, recommended videos are displayed. Youtube also provides us with a section called ‘Watch Again’ where we can see the videos again we have checked earlier.

This makes the search criteria way easier, as videos of our interest would be displayed in the Home page, based on the preference of the videos we usually watch.

To conclude, today’s user expects a straightforward method rather than a complicated one which takes a lot of steps to complete a task or which requires tons of decision making while using a product. They want to be able to complete their goal as quickly as possible. If you can minimize the number of steps required to achieve the goal without compromising the quality of experience, then you can create an experience that will be good for your users – with the help of Anticipatory Design.

Let us know if you have come across any other examples of products, web or mobile application that implement Anticipatory Design.

Published by

Jeejo Jose

Jeejo brings with her a vast wealth of UX knowledge and tons of positive energy. She is fun to spend time with and rest assured she always has the best advice on how to get things right, both in life and in user experience.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s