Users are fickle beings. They get easily distracted, their attention span is similar to that of a goldfish and all of your competition is constantly competing for their attention.

To help users engage with your products I’ve listed out a few rules, with examples, that are often overlooked — but when done right make the difference between people preferring your design versus your competitor’s

1) Be upfront about what’s on offer … and what isn’t

Users want to know what you have to offer. That’s obvious, right? Well, often they also want to know what isn’t offered. A lot of digital products aren’t transparent about what isn’t provided.

The widely popular online bank N26 use a comparison table to showcase what is included in each package, but also what isn’t included. This makes it easy for a user to identify which option suits them best:

Showing what isn’t included allows the user to make a decision without darting all over the screen, or worse if they’re on their phone: Scroll back and forth

2) Make your designs work for new users, but don’t forget the veterans

New users of a product will have to go through a learning curve, whether it’s steep or not. In fact, we often tailor products to these new users often times forgetting about our existing users.

One of the most efficient ways to tackle this is to use shortcuts. You should make sure your product is usable by both the least experienced and the veterans of the online world.

“Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow your users to tailor frequent actions.”

- Nielsen’s Flexibility and efficiency of use

Let’s see how the team behind Google Chrome excelled at this:

Searching from the navigation bar hasn’t always been standard behavior

New users might be inclined to go to Google.com and perform their search, but veteran users will simply use the address bar. Furthermore the suggested search is a fantastic accelerator that drastically speeds up the interaction for both new and veteran users

3) Emphasize what’s happening, where it’s happening

Users are busy and easily distracted. At any given moment I might be drinking my coffee, getting distracted by the song that’s playing, or one of the millions of notifications popping up on my screen. Inevitably, I sometimes miss things that you might have wanted me to see.

Used correctly animations can be a good way to discreetly point users towards what’s happening on their screen while also keeping them engaged.

Here’s an example of a single “send” button telling the user what’s going on through animation & messages:

The user is getting feedback at every step and it’s happening in the exact location they interacted with

4) Hide unavailable features

Some elements are only actionable under certain conditions. Hiding them reduces clutter and helps guide the user to the desired actions with fewer distractions. When these elements become available they “pop” because of the UI change.

AirBnB uses this in their filters. Once filters are applied a clear button appears. Simple, elegant, yet effective:

Hiding options when they aren’t available is a great way to reduce clutter in your design

5) Use navigation to help digest information

Sometimes we have to deal with a lot of information at once, it’s inevitable. While relevant grouping and good information architecture ease the digestion of large chunks of information, it’s also important to take navigation into account.

On their ‘event’ page, AirBnB has a lot of information to display. There are pictures, descriptions, itinerary, a section about your host, and much more.

The page features a sticky menu with anchors to ease navigation on the page. Users seeking specific information won’t have to scroll endlessly, they can jump directly to the relevant section. Moreover, users know where they are on the page at all times with help from the large dynamic titles to the left of the content

The dynamic titles to the left of the content are a great touch

6) Show users what actions they can take

Sometimes users may be a bit confused with just what action they should be taking, or perhaps there is a feature that you want to showcase to your users.

I think we’ve all seen the user-guides, and like the EULA we have all clicked through it without actually absorbing what was being said.

N26 has made a name for themselves partially due to their user centered approach, so I’ll use them for another example.

Transferring money from one ‘space’ (their version of accounts) to another can be done by simply dragging from box to the other. This is a great example of showcasing a non-universal action in a non-intrusive way:

A beautiful & non-intrusive educational experience provided by N26

7) Avoid dead ends

Providing explicit error messages and helping users recovering from said errors are 2 closely related but, sadly & far too often, separate issues. Error messages are a fairly extensive area and could do with its own article, so for now I want to tackle the topic of recovery from errors. This implies implementing a fix for users, a way out of their cul-de-sac.

TripAdvisor employ a fairly simple, yet rarely encountered, solution. When a user searches for reviews but comes up short a link offers to clear the search and take the user back to where they were: