Home Blog God is in the details

God is in the details

17th August 2015

Your site might be failing because it lacks attention to detail.

Bold statement, right? Lets say you’re looking for a new car. You’ve saved up all of your hard earned cash and you’re going to shop around. You’ve spotted a car you like the look of. It ticks all the right boxes at first glance so you want to get in and check out the interior. You get in, turn the key in anticipation of the cars response. Nothing exciting happens. The car just ‘turns on’. It’s hardly going to leave a lasting impression on you is it? You would expect a little ‘je ne said quoi’ wouldn’t you? You’d perhaps want the needles to sweep the dials. You might expect some form of welcome message or sound to greet you as you get in. Small details like this make that experience that little bit more special, enjoyable and memorable.

Let’s apply that to the web. When someone visits your website, they visit it for a purpose. You want them to return, to keep their attention for as long as possible. The key might be in those little details. What can you do to add those elements of delight that leave an impression on your users? 

Icon Design

Icons are a universal visual language that bridge the gap between languages. They are instantly recognisable and don’t need interpreted. The fact that the internet is a shared global entity means that icons are perfect in a digital context. They’re a simple, effective way of drawing users attention to certain parts within the content of your site. 

Icons have the same principle as a paragraph break, splitting content in easier to digest chunks. Icons can make the content on the page seem less intimidating but also more visually interesting. Getting your point across quicker can be resolved by cutting back on repetitive content and simply using explanatory icons.

This doesn’t mean use icons for everything!  Don’t have multiple sections of your site trying to compete for attention at the same time. If this is the case, they will be nothing more than decorative elements. You’ll find that by limiting your icons you can help the user navigate to the content they require much faster.

Animation

Believe it or not, animation in web design can be user friendly. It can reinforce hierarchy, relationships and structure. Flash is dead and gone, animations are much easier to implement and are supported by every modern browser. This isn’t an excuse to make every letter of text swing, swoop and bounce. Like icons, animations exist to draw the users attention. Abrupt changes in an interface can become difficult for a user to process. Let the user know what’s happening and and possibly what’s going to happen through the use of animations. One good example is the feedback animation where you can acknowledge a users action and let them know it’s currently being processed.

On a mobile device, the most common animations you see are ‘pull to refresh’, ’drop down’ and ‘slide out’. All these animations add a little to the experience you have with a website or app so it’s worth investing some time in implementing them.

Parallax Effects

Parallax is a fairly recent addition to the online world. It can really make a website stand out, adding character and personality through a story telling approach and helping the user navigate through the site. It provokes curiosity as users will naturally stay on your site longer as they will want to scroll the entire page (as long as it isn’t scroll-jacked).

Keep it simple. Complicated parallax effects can be detrimental to performance. Large images and javascript can massively increase load time and some scroll effects aren’t compatible with mobile devices so make sure you have thought about graceful degradation.

Illustrations

Here’s a question. Would you rather see some ‘beautiful’ stock corporate imagery on a website, or would rather see some illustrations that are actually relative to the content? 

While stock imagery can leave you disinterested, illustrations can add convey your unique character and keep users engaged for longer. It’s an insight into the website itself. For example, if you are advertising an iOS game, the illustrations on their marketing website could be an insight into the app which will hopefully entice the user into downloading it.

*On a side note – just avoid stock imagery completely. Anyone who wants to represent their brand with fake handshakes and people laughing in business meetings needs to rethink their online strategy. I would happily have Freddie the MailChimp or The Michelin Man illustrated on my site than have iStockPhoto anywhere near it.

Page Transitons

Here’s an analogy. You’re watching Strictly Come Dancing. The dancers don’t shuffle, stop and then move into their next step. They transition smoothly from one step to another with seamless transitions being awarded the greater score. If Len Goodman rated your website, you would get more points for smooth transitions. Adding page slides and fades can reinforce the relationship between pages.

Time

Just a short one (no pun intended). Your website is your window to your audience and first impressions are everything. With users making their mind up in 50 milliseconds it’s important to get it right. Don’t just whip up something and think “Yea that looks ok”. To develop your attention to detail, take your time on the design, create multiple iterations and play with certain ideas. Don’t just stick to the one idea. The more ideas you have, the better you can create multiple design strategies and techniques.

These are just a few ideas of how you can apply the finer details to your site. The bottom line is not to rush it. You can’t develop a keen awareness to small details overnight. It must be practised. Personally, I have found that talking to a colleague about your work can greatly benefit your designs. A fresh set of eyes may see something that you have yet to consider. This collaborative approach means you will learn to become more focused and ultimately produce better designs with more attention to detail.

Related Articles


on 17th August 2015