Adding Delightful Details without Sacrificing UX: Top Tips from Dropbox’s Product Designer

A little delight in design can go a long way when it comes to creating websites and apps, but how much is too much? That’s the question Matt Armstrong tackles regularly. As a product designer at Dropbox, he spends a lot of time adding small details to delight users, while making sure those details don’t interfere with the user experience. We asked him for some of his top tips for designing right, and adding some ‘delight’ along the way.

What’s your best advice for striking a balance between ‘delightful’ design details, and a good UX?

Whenever you add a detail to a design, it should enhance that specific element rather than overpower it, and ideally aid in making the overall experience more usable or comprehensible.

I’ve generally worked on products and tools that people spend a lot of time using day after day to get their jobs done; often repeating the same tasks throughout the course of an average workday. I think that context presents an interesting challenge in that any extra detail or flourish runs the risk of becoming annoying really quickly. This makes users feel like their time is not respected, which is pretty much the opposite of what these sorts of details are intended to do. In these cases, simple things like consistent and accessible navigation or good UX writing can be what makes the experience a little brighter.

Accessibility can be a great and often overlooked example of this. Let’s take one basic component like a button as an example. Designing a button that works well with a wide range of input devices (including things like screen readers), makes the experience of interacting with that element better for many users, and by extension elevates every flow or view that contains it.

I think the balance is a little different for anything you might be designing. It also varies depending on whom you’re designing for, as does the bar for what is considered delightful or charming. Probably the best way to figure this out is through talking with your users and understanding your audience.

What happens when you ‘over-design’ something?

When something is over-designed, it ends up feeling like a chore whenever you have to interact with that specific thing—maybe it even starts to get annoying or frustrating over a long enough time. It’s important to keep in mind that the perceived delight a user gets from any details you add will normalize over time. The best case scenario is that, with continued use, these sorts of things start to blend into the background, rather than continuing to require attention with each and every use.

The first time someone runs into a big flashy animation or transition, it’s surprising and probably pretty fun and cool, but that novelty wears off after you’ve seen it a couple of times. If these sorts of things block action, and essentially hold your time and attention hostage, that becomes a pretty negative user experience that can overpower the other, positive aspects of a product or feature.

That’s not to say there isn’t a time and a place for flashier moments that grab attention: onboarding and user education flows can be a great spot to introduce these larger, more surprising details. Generally users won’t see them terribly often so you can maintain that element of surprise. While we still try to keep things simple, onboarding is one of the key areas inside of the Dropbox product where we bring in some details like illustration in order to set a lighter and more fun tone.

http://blogs.adobe.com/creativecloud/files/2017/06/Dropbox-IMG-1-Onboarding.png

What’s the best way to build and add details that ‘delight’ the user?

I think progressively enhancing the individual bits and pieces that make up the experience is generally a pretty good path (and also something a design system can help with). Little things like adding consistent state treatments on hover or touch or simple animations and transitions can pretty quickly start to make things feel richer, without overpowering the good experience you’ve already designed.

I also think an often overlooked path to this is good UX writing. Good copy gives you a huge opportunity to introduce a specific tone and voice to whatever you are designing and humanize your product (one example of this is the placeholder copy we include in Dropbox Paper when you create a new document).

https://blog.adobe.com/media_65de0369f7e11e53203f89375f825be7e7586f2b.gif

What’s to gain in getting things just right and striking a balance between ease-of-use and delightful design?

Good user experience can be, in and of itself, delightful, so I tend to think adding these sorts of details should help make a positive first impression, but over time recede into the background and take up less of your attention so that the core experience can take the main stage.

Check out more of Matt’s work on his website or you can follow him on Twitter.