The Ultimate Guide to Optimistic Web Design

Whether you’re a web designer, a developer, a marketer, or anywhere in-between, you’re probably well aware of this simple truism. The user wants it all, now. There’s no time to waste, especially in 2022.

That’s not a moral judgment of any kind, no. After years of acclimation to the digital landscape’s speeds, the user both wants and expects swiftness. That’s just an observation, which you must account for to ensure pleasant interactions and desirable outcomes.

Indeed, UI improvements have hinged on this for years now. Search Engine Optimization (SEO) practitioners have leaned on it too, at Google’s behest. The user must get immediate, positive feedback, from when a page loads to when a button is pressed.

This is where optimistic web design comes in, and that’s exactly what it intends to do.

What’s optimistic web design?

First things first, this term often means two different things. Thankfully, the two overlap somewhat in purpose and function – or at least don’t actively clash with one another.

#1 Emotionally satisfying design

This form of optimistic design is simple enough, and intends to do what the name implies; inspire optimism. This kind of design philosophy will span across such elements as:

• Choice of font and color
• Visuals
• Copy

You have probably seen this in action manifold. Consider simple examples, such as Movers Development:

A smiling man, ample white space, a green Call to Action, and encouraging language that promises a better future. That’s optimistic indeed.

For a different take and a more interactive example, consider Philippe Neveu:

Vivid, moving visuals, and an open invitation to “have fun”. Phillipe truly demonstrates what he offers.

Of course, this approach can apply to pages beyond homepages, as we’ll discuss next. In fact, to synergize with the type that follows, it typically needs to apply in-between pages as well.

#2 An optimistic approach to user actions

Now this one is much more specific, and much more about frontend versus backend.

In brief, it’s about displaying an optimism bias about user actions to the user themselves. Optimistic web design will often do so by obscuring negative feedback from users, and typically by giving the user positive feedback despite what happens in the backend.

What does that mean, exactly? Let us use the simple example of a user clicking a button. What you’d usually get would be:

1. The user clicks the button
2. The button switches from a clickable state to an unclickable one
3. The server response is sent back to the page
4. The page and/or button are updated to reflect the response

This process is pretty standard across the web, but it still has a crucial shortcoming – as we’ll discuss next. Optimistic web design does away with this process, and instead presents the user with a positive response before the server responds.

The “optimism” in this case comes from expecting a positive server response and preemptively informing the user of successful actions.

What’s the need for optimistic web design?

So you may have seen either or both in action, and likely understand their primary benefit. But what exactly made it necessary?

Denys Mishunov shared a witty joke about three UIs going to a pub. The first two behave normally and leave the pub drunk. The third UI is the optimistic one; it “exits the pub already drunk immediately after going in — it knows how the pubs work and is efficient enough not to lose time.”

Dissecting the joke, we’ll find the truism we started with; users expect and need speed and positive confirmation.

Google has warned us about this manifold. TechRadar has confirmed this; users feel negative emotions if they have to passively wait.

That’s, of course, extremely human. Remember the hourglass from Windows 95?

Over time this has evolved in web design contexts into loading spinners we’re all likely familiar with. And yes, spinners do inform users that an action is underway, so they’re rather useful. They’ve also become very colorful and vivid over time – in line with the first definition of optimistic web design.

But that doesn’t suffice. Waiting wasn’t satisfying then, and it’s certainly not satisfying now.

Users can’t passively wait; such elements interrupt their flow of thought. Instead of expecting their action’s result, they’re presented with a new element to analyze, which may discourage them. It’s the hourglass phenomenon in different skins and contexts.

Examples of optimistic web design

So how can you apply optimistic web design in different contexts? The exact ways you’ll do so will depend on your UI, your API’s stability, and of course your creativity.

But it’s already finding uses in many different contexts, which you may draw inspiration from.

#1 Atomic actions

Perhaps the most common one comes in atomic actions, such as users liking posts on social media platforms.

Such platforms as Instagram and Twitter employ optimistic web design in this way, in both senses of the word. Consider Twitter’s like button, for instance:

It offers instant feedback, in the shape of a brief and pleasant heart animation. That’s optimistic, visually, but it’s also optimistic on the backend.

Have you tried liking a Twitter post while you’re offline?

Of course, the request can’t be sent to the server in that case. Yet, the UI preemptively updates the user on a successful action because it’s optimistic about the result. Once it confirms it can’t actually process the request, it simply reverts the heart counter, with no visual fuss.

#2 Interface optimism

For another social media platform example, we may mention Tumblr. This one employs popping transitions and vivid colors to maintain user optimism, while also effectively “masking” loading times behind them:

This is practically a different take on the spinner, which also seeks to keep the user engaged and satisfied. The user perceives this as a part of the action they’ve taken, not as a loading time holding it back.

#3 Optimism by behavior

Another example of both comes with Google’s home screen feed. This is rather similar in execution, in that it also uses both principles of the term:

Every step of this process comes with immediate visual feedback:

1. A new interface takes the slider’s place as soon as it’s pressed
2. The new interface retreats with animation once the user has made their choice
3. The slider’s position is updated to reflect the user’s choice, while also taking up a matching color

Finally, the user is notified in writing about their choice, along with the option to undo their action. Doesn’t that just figuratively scream optimism, swiftness, and control?

#4 Cart UIs

How about pages, then? Let’s start with an example from eCommerce, which does face a consistent challenge with cart abandonment rates.

This is a very lengthy, multifaceted subject that would require its own article to cover. But what can one do strictly visually, from an optimistic web design perspective?

Allbirds offers an example:

See what they did? They can’t cache their cart, so instead, they opted for two visual elements to maintain the user’s optimism:

1. The cart slides in immediately after the user’s action, even before the call has reached the server
2. The animation of the cart sliding in keeps the interaction fluid and buys them time

This doesn’t save much time in pure numbers, of course. But humans only perceive so much before being driven away – roughly a 2-second delay. This kind of “stalling” seeks to fit into that attention span window. It’s just enough for users to perceive this as a part of the process, instead of as a disruptive spinner.

#5 Preemptive loading

Finally, having mentioned caching, optimistic web design does lend itself to preemptive loading. Instant.page, which you may use for this purpose, dubs this as “just-in-time preloading”.

As highlighted manifold, users always mind slower loading speeds – and optimism will only do so much in such circumstances. But users give hints toward their next actions, from where they move their mouse to which buttons they hover over.

Simon Hearne keeps track of such hints, and uses a <link rel=’prefetch’> to instruct the browser to begin loading just in time. The result?

Just like optimism bias assumes the action will go through successfully, preemptive loading minimizes wait times before the action even takes place on the user’s end. A very handy way to combine the two into a satisfying user experience package, for sure.

Approaching optimistic web design

Finally, while optimistic web design has ample uses, it does have its limitations as well. As words of caution, consider the following as you approach it:

• API stability. You simply cannot have optimism biases if your API is unstable; it should return predictable results with virtually no failure.
• API response times. Ideally, you should first minimize response times and only then consider optimizations to fit that 2-second attention span window.
• Possible outcomes. Finally, optimistic web design is best applied to binary buttons and elements. If there’s a third option outside of success or failure, you may best apply optimism elsewhere.

Conclusion

To summarize, optimistic web design seeks to inspire optimism in users and keep them engaged. As it does, it assumes a successful action and informs them of it before the action has concluded on the backend.

This design philosophy closely adheres to the introduction’s truism that users expect speed. In turn, it seeks to minimize perceived waiting times and “mask” them as parts of the ongoing process. In doing so, it keeps users happy and retains them more effectively, synergizing with SEO in the process.

Optimistic web design is by no means new, and it’s by no means perfect. But it does have demonstrable benefits that should warrant your attention, no matter where you may best apply it. Especially in such trying times, we all need a bit of optimism from our online interactions, do we not?