It’s true that the most important elements of a design are in the details. All the tiny parts of a website design combine to create an experience that users want to engage with … or not.
How do you better ensure that your design includes the right details to delight users? First, consider the three levels of design outlined by Don Norman in “Emotional Design:”
- First impression
- Total experience
- How you feel during and after
Keep this in mind throughout the design process. It will help you better think about the intent of each design element as you design and integrate it into a project. Here are 10 design details that are a sure way to delight users.
01. Create Consistency
Users like things to work without having to think about them. Your website patterns should be consistent within the design and common elements such as navigation or button functionality should be consistent with practical web standards.
This will make your design easy for users. If they must think about it too much, they could abandon the design.
In terms of consistency, this also applies to elements such as typography and color palettes and use of imagery. The reason most designers use style guides is to ensure that elements are consistent throughout a design, so that the visual flow is not disrupted.
02. Add a Simple Animation
A tiny and somewhat unexpected animation can bring a smile to the face of a user. The trick in that statement is “tiny.”
Animations that are so small users almost miss them can be the most delightful and engaging. The design for 3K is simple almost to a fault, but the pulsing animated squares in the middle of the screen are so mesmerizing that it’s hard to look away. The simple nature of movement is soothing and makes you want to see if there are other similar effects in the design.
03. Microcopy with Purpose
Don’t think that because there aren’t a lot of words that microcopy is easy to write. The best microcopy – the text inside buttons, footers, forms and other similar locations – can be some of the most edited text in the design.
Because it needs to be just right.
You only get a few characters to give users the exact information they need to do something. Microcopy can be direct and informational or it can be a place to really show off your style and brand personality. Mail Chimp does this so well that you might be tempted to fill out forms in error just to see the messages.
04. Show Off Your Personality
Speaking of personality … every brand needs to have one. That alone is a delightful detail. Users will engage with “personalities” they like and enjoy. They will further engage with brand personalities that reflect who they are or who they want to be.
Everything in the design, from the microcopy to the main text to imagery, type and color palettes, should build on the idea of a distinct personality. Research color, type and image choices to make sure the vibe you are giving off is what your audience is likely to associate with those visuals.
The place where many designers get this detail (or set of details) wrong is that they forget to make sure elements mesh with each other and the overall brand personality, so on one page the website feels formal and on the next it’s light and casual. This can be quite confusing for users.
05. Unexpected Imagery
Little surprises in photos, videos or illustrations can go a long way.
One trendy example of this is cinemagraphs. These “living photos” are seemingly still images with hints of animation. Sometimes the movement is obvious and other times it is subtle, but this kind of unexpected element can keep users engaged with content.
From Webdesigner Depot: “It works because users are intrigued by movement. It’s effective for many of the same reasons video is a good option to grab a user’s attention. Movement and action is engaging. It’s interesting. It feels real.”
But it doesn’t have to be an effect this dramatic. It could be an interesting color choice in an image – a pop of color in a black and white photo – or element that you don’t expect to see, such as a cat on an iceberg. It could be mixing illustrated elements with Photography. There are plenty of ways to create visuals that are so different they demand attention.
06. Interactive Tools
Bits of interactivity that show users how something works or looks can be the thing that sells the whole design (or even a product when it comes to ecommerce).
Users like to learn something. They like to “touch” and interact with elements in a way that feels realistic and useful. Take Bellroy for example. The company makes a wallet that is supposed to be slimmer than those huge options that some men carry. The homepage includes a slider to show how a traditional wallet and Bellroy’s wallet compare when filled with the same stuff. (It’s a lot of fun to play with.)
The interaction leads users to the story of how they do it. And then plenty of ways to buy the item.
07. Beautiful Typography
As a typography geek, nothing delights me more than stumbling onto a site with amazing lettering. And it doesn’t take someone with my affinity for type to have this feeling about the words.
Beautiful typography falls into two categories:
- Highly readable type that users don’t even think about
- Interesting character shapes and treatments that have an art-like feel, but are used on a limited basis for emphasis
08. The Right Sound
Do you ever complete a task, check the box in the app and wait for the happy chime that signals completion? (Ok, maybe that’s just me.)
Regardless, audio cues can add a spark to an interaction. They are particularly helpful in apps – think about the sound an iPhone makes to signal Siri is activated. The caution is not to go overboard with sound; auto-play music is still one of the most-hated features of websites for many users. If you plan to use sounds of any kind, don’t forget the toggle on/off switch.
09. Intuitive Transitions
Do your users know how to get from one part of the design to the next? Tiny cues and transitions can help guide users, whether they think about it or not.
With the return of so many long-scrolling websites and navigation patterns that don’t always move up and down, these little cues to the user help make the flow more seamless. Again, this detail goes back to the idea that users should not have to think about the design in order to use it effectively.
Need an example? The “learn more” effect by Mindvalley is seamless and makes you want to hover over the button again and again.
10. Meaningful Microinteractions
Microinteractions are the small communications between a user and an app. It can be anything from tapping on or off an alarm to liking a post on Facebook. These one-touch interactions are the key to making users continue to use a design because of its function.
But microinteractions should not be included just for fun. Good microinteractions have purpose and meaning and should perform a specific function:
- Communicate feedback after an action
- Accomplish a task
- Change a setting
- Prevent user error
Design with these ideas in mind to better ensure you are creating a microinteraction with purpose.
What types of details bring you delight when you stumble onto them? Think about this when designing your projects. The same things that make you grin when looking at a design will often do the same for others.
Don’t try to do everything mentioned above. Start small and incorporate things slowly until you have a design full of delightful details that you can be proud of.