The way in which your visitors use and interact with your website plays a critical part in its success. If your webpages are clunky and unresponsive, if they take a long time to load and movement between pages and elements isn’t flowing and intuitive, it won’t be long before your users click away from your site and go somewhere else instead.
So what factors do you need to consider when designing your site for natural, easy visitor interaction? Here are a few pointers in the right direction.
‘Affordances’ represent the types of actions possible from a particular object, and lead users to naturally take the right steps to complete their goals.
A typical real-life example is a pair of scissors. Even if you are unfamiliar with the object, scissors are designed in such a way that a new user intuitively understands which part is for holding and which part is for cutting. It’s not something that needs to be thought about.
Buttons, boxes and icons on your website should offer the same easy, obvious functionality.
Consistency is vital in allowing your users to learn how to navigate and use your site. When a visitor sees blue, underlined text, for example, they’ve already learned that this is a link that will send them to another related page when clicked. There are two points to learn from this.
Firstly, you don’t need to reinvent the wheel. Okay, you might prefer to make your links pink and bold, rather than blue and underlined, and using a different colour to draw attention to them will probably suffice – your visitors will get the idea.
But beyond this, there’s not much point in changing what your audience expects; it doesn’t add anything in functionality or user experience. Secondly, people are creatures of habit. So consistently using the same visual clues repeatedly will help your users feel relaxed and at home, allow them to apply their knowledge to other areas of your website, and learn to expect this same type of interaction across your brand.
Collapsible and hideable content helps to keep websites uncluttered and allows your user to focus only on what they need at that moment in time. The iOS use of Chrome is a good example of context-based hiding, whereby the navigation controls automatically hide once the user scrolls down and then reappear when they scroll up or reach the bottom of the page. The supposition is that whilst scrolling down and reading a webpage, the user will not need the navigation tools, so they only serve to create a distraction. When they have finished reading, they will try to scroll back up, so this is when the tools reappear.
In a similar way, collapsible content allows users to focus on a smaller area and avoids visual overload. These techniques are particularly important on mobile devices, where screen space is so limited.
On a busy and complex webpage, it can be difficult for users to know where to focus. Utilising some interactive techniques can help direct a visitor’s gaze and attention to the right place on the page. Examples of this include enlarging icons or objects when they are hovered over or scrolled through, or changing their colour, perhaps transitioning from black and white images to full-colour.
Other ideas include ‘focus transition’, where focused elements are animated in some way, or use of blur, where the active item is literally brought into focus and the non-active items blur into the background.
It’s important to design with interaction in mind from the start. Interaction and usability are not add-ons, but an integral part of your website’s design. You don’t need to use a huge range of techniques (since using too many contrasting techniques could confuse and hinder ease of interaction) or use the coolest, most unusual methods. Form follows function.
In fact, many of the most successful websites are those in which interaction techniques aren’t noticed at all – instead of working for or against the user, they work with them, subtly guiding them through the site and solving problems, rather than forcing them down a particular route or drawing attention to themselves.
As with all good design, your intention is to make life easier for your user, which means that they should never feel frustrated, forced, nervous or confused by your design. By considering what they need and how they use the site, you will be able to choose appropriate techniques to allow your visitors to engage with your website in a way that feels natural, seamless and fluid.