• Deference
• Clarity
• Depth
Deference (the visual hierarchy, making important elements distinct from the less important ones) and clarity of content are key elements of all design. It is the third item, depth, that is more mysterious. Apple's marketing team describes it thus:
"The use of translucency provides a sense of context and place... animation and motion make even the simplest tasks more engaging."
You only need to pick up your phone to see what they're getting at. It may not be perfect, but the layers and visual effects actively contribute to making iOS easy to grasp and fun to use. By adhering to a system-wide design language, developers can help ensure that users don't lose where they are when trying to perform a task or move between states.
Web design has its tropes, but there are no human interface guidelines governing how things should work. This is a good thing: the way people expect to interact with our sites is directly influenced by new devices but is open to contribution and inspiration from anywhere.
This is a roundabout way of saying that depth and movement are important on the web. Without them your users can achieve what they set out to, but they aren't going to get excited about doing so. We can move beyond functional and aim to delight our users at the same time as improving their understanding.
One of the easiest ways to achieve this is by using CSS transitions and animations. At their most basic, these allow us to move smoothly from one state to another. For example, if hovering over a link alters its colour, we can have that change take place over a period of time. This will soften the edges somewhat, making it easier to see that a change has taken place.
Such transitions are not just visual ornamentation: they help make it clear what an interaction will achieve and allow us to subtly guide the user from A to B (or just signpost that they are, in fact, already at B). At Purple, we recently re-built the Parasport website from the ground up. Part of that process involved designing a responsive site that carries the distinctive Paralympics Team GB look and feel over all devices. We’ve used CSS transitions and animations to convey a sense of movement and purpose throughout, which is key for a site focused on getting people involved in sport.
Every internal link of importance incorporates a simple arrow to make it clear that this is indeed an interactive object. When you hover over the link, the background image shifts position; in its active state the arrow moves slightly to the right, indicating that you're moving to a different page of the site.
For those links that take you off to an external site or display some content in a pop-up, this horizontal movement wouldn't make sense. Instead we zoom the link in slightly, communicating to the user what's going on whilst maintaining the feeling of energy that is so key to the site.
When on a mobile device, a tap of the menu or search icon smoothly slides the relevant section into view, and at the same time a small indicator slides up onto the icon. In this way the relationship between the open and closed states is made that bit more explicit.
These additions aren't going to make or break a site, but the overall impact is definitely greater than the sum of its parts. To return to iOS -- without transitions between parts of the system you'd still be able to use it, but it would definitely take longer to grasp what's going on. On your site, that could be the difference between a user making a purchase or getting confused and giving up.
It's a particularly exciting time to be working on the internet, with the lines between once distinct disciplines becoming more blurred than ever. By looking to learn from and be inspired by changing technologies we can incorporate the best ideas to create a digital experience that is coherent, understandable and aims to truly delight.
Ed Melly
Ed is the man that takes the design of a site and builds it in the best possible way to comply with W3C standards and accessibility. Ed is a front-end oracle and delivers on time, every time.