“The details are not details.They make the design.” (Charles Eames)
And we couldn't agree more! Especially in the context of the web today, where users need to sort the often discouraging “offer” of websites competing for their attention.
In a digital landscape where highly influencing trends like “ultra minimalism” and “drastic” simplicity rule, no web designer or website owner, would risk to “overload” their websites with stunning visuals and content.
So, it's not without surprise that forced to reduce the load of “resources” of eye-catching visuals and engaging copy they have switched their attention to... details! To those little elements apparently insignificant in the context of the “big pictures”, but which have now got the “leading parts”.
And yet, using the right “dosage” of attention-grabbing visuals that these details could “encapsulate” and of engaging copy (now turned into “microcopy”) is a true art!
In this respect, let us point out to you a few tips that will help you “master” the art of “joggling with” design details for delighting and for keeping your visitors engaged to your site/app:
1. Challenge Them to Interact with Your Site
“Bid” on interaction tools and don't let your website visitors get “lazy” during their visit on your website!
Get creative (here's a website that might inspire you: Bellroy) and choose your tool (not your “toolbox”, for you don't want to turn your website into way too demanding and distracting “amusement park” either), the on that will stir your users' curiosity and urge them to click, to interact in order to actively discover how your product's made or which is the feature that sets it apart and so on.
Challenge your visitors with little “puzzles” they need to “solve” (meaning: “interact with”) for discovering your products'/services' story.
Challenge them to turn from visitors to participants! Create the right context for them to interact with a key element on your website.
2. Intrigue and Delight Them with Beautiful Typography
Impressing and keeping your users engaged to your website could also mean switching the spotlight to such an “common” detail as typography. “Common” and “obvious” and yet, loaded with such power that too many web designers tend to overlook!
But you're not one of those designers or Drupal website owners, right?
In this respect, here are two ways in which you could trigger amazing typography's power on your website:
- you could go for artsy looking, visually-arresting character shapes
- you could play with proportions and surprise your users with some oversized letters
Whatever suits you! Or better said: whatever suits your own website's audience!
Beautiful lettering is probably the best example of an apparently “insignificant” detail that you can “empower” to impress and to engage all by itself!
3. Consistency: One of the Key Web Design Details
Keep it consistent! It's a rule that you just can't risk breaking!
Keep your design consistent throughout your website, and here we're referring to:
- colors that represent your brand's identity and your site's specificity
- the particular use of imagery on your website
- specific typography that you've chosen to go with on your site and that you should stick to on all its pages
Familiarity is what your users expect to find on your website, therefore, remaining consistent to your website patterns is a common sense principle you should not undermine! You definitely don't want to make your visitors feel like they're challenged to think about your site's design and you definitely don't want to risk breaking the “familiarity” rule by surprising them with new design elements on each page.
It's more time-consuming for them and, therefore, way too risky for you!
4. Trigger Users' Reaction Using Microinteractions
Or, better put “microinteractions serving specific purposes”!
It's you who'll decide what roles they should play on your website, how precisely they should enhance your visitors' journey (just think of Facebook's globally popular “like” button):
- to give feedback once your users have completed certain actions on your site
- to change a setting
- to signal them when they're not handling a task correctly
- to enable them to tap on/off an alarm
These one-touch bits of interaction make another great example of web design details which can get invested with key functions adding value to users' overall experience on your website!
5. Surprise Them With a Tiny, Yet Sufficiently Intriguing Animation
Surprise them: make your animation so tiny and almost perfectly blending into the rest of the design! Another one of those web design details that you could turn into a "superpower".
This way, the little “unexpected discovery” that your users will make will not just delight them, but keep them engaged with your website, as well!
Keep it simple (no need to create something too time-consuming and pointlessly complex) and strive to turn it into a perfect “surprise factor”!
6. Add Cues and Transitions To Discreetly Guide Them Through
Don't get greedy when it comes to your website's visitors own time! To the time they're willing to invest in exploring your site.
Instead, insert highly intuitive transitions on your website that will help them efficiently invest their time in exploring it! Instead of wandering about and trying to figure out by themselves how to get from point A to point B, why not insert these directional clues for them?
Your website's navigation shouldn't be a puzzle to solve! Therefore, cues make one of those web design details that you can't afford underestimating!
7. Add Purposeful Microcopy
What do you do when you're constrained to both visually impress and to engage users using just the limited resources offered by a minimal web design? Well, you get creative and you efficiently “exploit” those resources.
Such as the tiny text inside buttons, in the footer or in your fill in forms.You go ahead and get those bits of copy written, edited and reedited till they “encapsulate” precisely the call to action messages “capable” to impact your users.
You'll have just a few characters at your disposal: use them efficiently!
8. Intrigue Them and Trigger Interaction with Cinemagraphs
These intriguing “living images” make a great tool for surprising your visitors and for making them engage with the content on your website. Movement will always catch the eye!
And you don't even need to go for something too visually absorbing:
- an unexpected touch of color on an otherwise black-and-white image
- a little “collage” of photography and illustration elements
- a tiny element the visitors wouldn't expect to see given the web design context of a specific page etc.
The list of effective, not to be underestimated web design details could go on, but it looks like our today's post is getting a bit too lengthy: we'll try grouping the rest in one of our next posts.
How about your own list? What other seemingly insignificant, in fact highly powerful little details (“powerful” in the hands of skillful web designers) does it include?
