Inspired by Maslow’s hierarchy of needs, Aarron Walter, VP of Design Education at InVision, created the hierarchy of user needs in 2011. It states that to be successful, a product must be functional (it works), usable (it’s easy), and delightful (it’s enjoyable). It must have these three things, and it must be in that order. If it’s not functional, it’ll never be usable, and if it’s not usable, no one will enjoy using it.

The relationship between functionality and usability is pretty straightforward. The ability for a product to perform an action correctly is directly tied to the user’s ability to tell it to do that thing. Making a product usable doesn’t put it’s functionality at risk. You can’t take a functional product, apply usability principles to it, and end up breaking it’s functionality. However, the same cannot be said about delight. In this case, it is possible to break or degrade a product’s usability when attempting to make it more fun to use.

Usability is predicated on aligning system behaviors with user expectations, creating a sense of familiarity even if a user has never used an interface before. Delight, on the other hand, is about pleasant surprises that should continue to be enjoyable even after the first time experiencing it. At first, these two concepts seem to be mutually exclusive concepts, familiarity and novelty, but it’s a little more nuanced than that. To find out how these things can coexist, we need to understand a bit more about the dynamic between them.

In the beginning of screens, people didn’t really understand digital interactions, so designers relied on skeuomorphism to bring the familiarity of the world we know into this new digital realm. This allowed new users to understand and anticipate how systems worked.

As digital interaction design matured, design systems emerged which have distilled knowledge and experience into specific conventions and best practices, like Google’s material design, Apple’s Human Interface Guidelines, Microsoft’s Fluent Design system. These systems and many others have ushered in a strong sense of consistency and familiarity to digital products, improving their usability without needing to rely on the strict visual metaphors from the physical world from the beginning of the industry.

While design systems have been a good thing overall, they make it difficult to design a product that has a unique personality, adding that elusive flavor of delight to the mix. Apps are increasingly looking and acting alike because of the implementation of their ecosystem’s design system or simply a greater utilization of best practices independent of a specific design system. This is great from a usability standpoint because users already feel familiar with your product, but it doesn’t exactly allow you to stand out from the crowd.

Users expect more than utility. They aren't surprised when something “just works“ because it’s 2018 and everything should just work. Users want it to be enjoyable, not simply bearable. To grab their attention, you need to enchant your users without detracting from the utility of the product.

Designers are now tasked with creating products that fit within their ecosystem by adhering to a consistent set of patterns and rules about how a products interface should look and behave. At the same time, designers are concerned with creating a unique experience that users will enjoy and remember. Design systems are pulling designers towards usability while users demands are pulling us towards delight.

It’s risky to try new things because it’s unknown if users will like or understand it. How can we design products to be both predictable and novel at the same time? How can we ensure the effort we take to take out doesn’t alienate our users?

The answer is: it depends. It depends on who your users are and what your product does. It depends on your team and the strengths they can bring to the table that others can’t. It depends on your competitors, partners, stakeholders, and a thousand other things. I can’t deconstruct the complexities of engaging product design and the countless decisions that go into it in one post, but what I can do is share some lessons that have helped me navigate this ocean of possibilities in the past, and can hopefully help you, too.

Don't Fight the System

Don’t go against the grain of the design system and context you are designing for otherwise you will just end up with a broken experience. Best practices and patterns exist for a reason: they have a proven track record of working. Instead, find the gaps between those elements and inject your own flair there.

These details don't necessarily add features or functionality, but they contribute to the personality of your product and define the experience of using it. Most importantly, they don’t contribute to confusion or frustration because they are small enough to navigate around and don’t affect the users understanding of the product.

Modal Windows

Modal Windows by Jakub Antalik

This authentication screen manages to use playful animation to both tell the user that it’s processing their request (with the bottom border of the field) and provide validation feedback in a unique way. The shaking of the lock icon with an incorrect password mimics a person shaking their head, providing an intuitive and familiar way of getting feedback in a fresh new way.

EverDo App Animation

EverDo - App Animation by Balkan Brothers

Tabs are a standard way of handling secondary navigation within a section of your product, but the basic pattern leaves a lot of room for improvement. The animation in both the active tab indicator and page content itself in this example is not only aesthetically satisfying, but by using direction, creates an unseen spatial relationship between pages while reinforcing the structure of the familiar tabs. It works within an existing pattern, using it as the foundation for a richer interaction.

Make the Details Mean Something

Design needs to be simple, so don’t add a bunch of bells and whistles that clutter up the place that don’t serve any value other than eye candy. We are granted a limited supply of our user’s attention, so don’t waste it on trivial things Everything that ends up in your product needs to have a purpose, even the delightful details.

Replace Animation

Replace by Zee Young

This example starts with a common interaction that most people are familiar with, pull down to update, and enhances it with an animation that is not only fun and surprising, but makes users forget they are waiting for data to come back from the server.

Replace Animation

Neo Kids - Onboarding Concept by Minh Pham

Here, we see what could have been a dull onboarding form transformed into a hilarious, novel way to provide the app with data it needs. An an onboarding experience, this not only avoids starting the user off by forcing them to fill out a boring form, but also has the important role of setting the mood for the entire experience to follow.

Look for Opportunities to Exceed Expectations

It can be tempting to start making small sacrifices to your products usability in order to try something fun or innovative, but it’s not worth it. These concessions will result in a poor experience and then those things will be of no benefit.

Fluid Slider

Fluid Slider by Virgil Pana

Instead of taking the easy way and just adding a basic slider, this product solves in the problem of touch sliders where the selected value is hidden by the user’s finger. They could have just included a static display of the value next to the slider, but instead created a really fun experience.

House of Plants Interaction

House of Plants Interaction by Nathan Riley

Rather than using a standard transition that would have been much easier to implement, this example shows how a custom crafted animation that uses the theme and elements of a site’s subject matter can add a new level of immersion and enjoyment to a product.

alex getty

By Alex Getty

Lab Director

Published on March 23, 2018