“User interface design is a very practical and utilitarian subset of design. If the word “design” evokes images of stylish yet comfortable office chairs that retail for thousands of dollars, UI design would be more like finding a way to build subway benches that homeless people can’t sleep on.”

Balsamiq wire frame

Wireframing helps client understand their own requirements

In ‘Step-by-step UI design’ Sacha Greif takes us through an easy to follow practical guide on building a user interface from scratch, following best practice UI design principles. Here are some of the principles he talks about and our reflections on how we work at Briarbird.

Prioritise features

To start the design process you need to prioritise and separate features into “must-haves” and “nice-to-haves”.  This strong hierarchy is critical to a successful UI. How do you decide? To prioritise the features you need to refer back to the goals of the project. If a feature doesn’t help meet a goal, then either you delete the feature or change the goals.

Keep the user in mind

Throughout the design process you have to always be in the mind of the user. The decisions you make will impact them and must suit their purposes not yours. ‘The most important thing is to always keep in mind the final purpose of your UI. Every time you’re at a crossroad, ask yourself which choice helps the user achieve this purpose best.’

Here are examples of heat maps taken in testing we did for VicRoads. They show where most users looked on screen. This sort of research informs where you place buttons to gain most attention.

Build with realistic content

While designers may use Lorem Ipsum to fill in space, this doesn’t work for anyone else.

If you’ve ever presented design concepts to management or used lo-fi mockups for user testing, you’ll know that people zero in on the content. If you get that wrong, then it skews their entire perception of the product.

To save yourself the grief and heartache, you have to get accurate functional content into your design as soon as you can. It’s painful but it’s the only way.

Use contrast and proximity

Everything on screen is not equal. Great UI design uses colour contrast and shadowing to emphasise important features. Positioning related elements next to each other helps provide a logical flow for the user.

Use of colour to reinforce function

UI design puts colour choice to work to ensure that functionality is obvious, intuitive and accessible. As Greif says’ ‘…choosing colors for UI design is a different matter. For user interfaces, you need to think about the color’s function first, and only then about its visual appeal.’

Choice of font

Ensuring the right font is crucial for the feel and end result of your project. ’A great font can single-handedly set the tone for the whole design, make boring text look appealing.’ Your font also has to work hard: it has to work on all major browsers and on a variety of screen sizes including mobile. Your font has to be readable to people with poor vision.

Icons

Icons are used mainly for functional qualities but we shouldn’t under-estimate their visual appeal and delight they give customers and clients. I’ve often seen our clients’ faces light up when they first see a new icon, in a way that never happens when they are reading a user requirements document.

Icons normally require a text label, unless they relate to obvious actions such as ‘next’ ‘before’ ‘help’.

Consistency, unity and visual load

Consistent layout and design reduces the visual load on users. We want to delight them, not overwhelm. Where possible we use design patterns (link to yahoo design patterns) – these are conventional layouts that are used across the web to simplify life for users. We also provide functionality only when it’s required, for example, providing text formatting tools only when the user clicks in a text box.

As Greif writes, ‘Remember that every time you introduce a new visual elements, the user has to process it and decide in which mental category (button, widget, text field, etc.) to file it. So just like you can save computer memory by storing the result of a calculation in a variable (instead of making the same calculation multiple times), you can save the user’s brainpower by re-using elements. As a result they’ll be more focused on the rest of the UI, and this in turn will make them more productive.’

About the author

Sacha Greif is a freelance designer and entrepreneur from Paris.You can read his blog at SachaGreif.com.


  • Recent posts