User Experience design (UX) often grabs the headlines, but what about User Interface design (UI)? Blueleaf's UX Director Chris Jones takes a look at this important element of web design.

Over to Chris...

We do love a good acronym. Web design is full of them. I’ve always been an advocate of the word “design” – it’s at the heart of everything we do after all – but there is a useful distinction to be made between User Experience (UX) and User Interface (UI) design.

UX concerns itself with the overall flow of a website, app or other system, ensuring that the product is logical and easy for a specified group of people to use; in short, that it makes sense.

UI is how the product presents itself to the world, the interface with which your users will interact. When working on UI, a designer will consider layout, putting the most important controls in a prominent place, working on what those controls should look like (slider, tick box, dial?) and will also create a consistent style that makes it easy for users to intuitively find their way around or use the controls. A good UI designer knows how to signpost users around a site, without them having to think about it.

How does it feel?

UI design and the interactions therein helps the product feel right. How does a button let you know that you’ve placed your mouse over it? What response do you get to reinforce the fact that you’ve clicked on it? How does a menu, page or panel open up? And close?

Take a look at this site from Bose and this one from the Crop Trust. Have a click around, play with them and see how they feel to you.

Bose are all about beautiful, quality product design so it’s important that their website reflects this and is as enjoyable to use as their products. They achieve this by putting fantastic imagery front and centre, combined with intuitive, smooth interactions that let the user know what’s happening and where they’re going at all times. Every button on the site features slick hover/click states, with panels that open up making you feel like you’re diving deeper into the site and getting closer to being ready to purchase. This is a site that you’ll be happy to spend time on and enjoy using as much as a pair of their headphones.

The Crop Trust site takes annual reports to a new level. Often rather tedious, the UI designers of this site have presented the information clearly, cohesively and in a way that makes it a pleasure to explore. Each interaction works how you’d expect it to. If you just want a quick overview of the year, the Highlights tab that’s glued to the bottom of the browser window pops up and gives the user an easy way of browsing quickly through the headlines. It overlays the main content though, so the user knows that they can quickly return to the detail if they want by closing the tab. Delve deeper into the site and you get a great page build, again overlaying the homepage. The UI is letting you know that to go back, all you have to do is click the Close icon, top right – no tedious clicking back up through layers of content.

In summary

Websites should feel intuitive and slick, tactile even. We expect things to be easy and fast to use – this should be permission to play stuff – but sadly online, we often have to put up with this not being the case.

Take a look through your website – is your UI as good as it could be? Does it help users get around the site, give them instant feedback on their mouse hovers and clicks? Is your site tactile and a pleasure to use? Improving your site’s UI makes it easier for your customers to use and that will make them more likely to come back.