User interface design

How to design an effective user interface.


UI design involves a mix of skills

What is user interface design?

User interface design is concerned with how things work, how they feel to use, how you intimate what is and isn’t possible and how you let users know they’re doing it right.

You tend not to notice good user interfaces – when you’re in control, empowered and feeling smart, but you sure do notice the bad ones – they make you feel sick.

One reason why so many user interfaces are impossible to work out is that simplicity is not simple.

It sounds simple, it’s simple to say but designing simple isn’t simple. Even the simplest of task can quickly become complex when broken down.

Poor user interfaces are often focused more on the input that the system requires to move forward – known as a system-centric view – rather than the messier way humans work. In contrast, a user-centric view places the needs of the user at the centre of things and the system works towards satisfying them.

No matter how cool your interface is, less of it would be better

Alan Cooper, Cooper Design

Advocate for the user

A user interface designer advocates for the user, they accept responsibility for them.

Follow established design patterns in your interface so things seem familiar immediately, anticipate where and when users may need further tools or help and help them orient themselves by providing a consistent and obvious structure.

Consider how the interface will keep the user informed; to let them know when they’re doing it right and when they’re doing it wrong. It doesn’t take much to feel out of your depth if things don’t make sense and often it takes only a little intervention to smooth out any bumps. It does take time though.

A UI designer’s job is to build trust, reassure and stop things getting out of hand.

User research

Find out as much as you can about your users.

Demographic information is a start, but you will gain much more valuable design insight by understanding the users’ goals, values, motivations and expectations are, what is it that drives them? This psychographic information is less easy to get hold of.

For the Royal Pavilion & Museums website, the museum brought our attention to the work of John H Falk’s work on museum visitor profiles which provided essential insight into visitor’s needs.

Developing Personas and Scenarios for your users, conducting pertinent surveys and interviews, analysing your competitors’ approach will all pay huge dividends.

If you have an established user base to work with then you can understand much by working with analytics to reveal much about your users’ behaviour.

UI design checklist

Use Design patterns
We all know how to use a key; you push it in and turn. Make your UI like a key by using established design patterns rather than trying to come up with something new that will cause the user to have to think way more than they need to. Check out ui-patterns.com
User Feedback
The UI needs to be provide some kind of feedback loop so the user knows something is happening, that it’s working. Setting different states to your links and buttons is a an easy win. Active, clicked, visited and default states provide a lot of orientation information to the user.

*Target focus states too as not everyone uses a mouse.

Know thy audience
If the answer to the question ‘Who is the target market?‘ is ‘our product’s for everyone!’ then please read on …

… Try this clumsy analogy … let’s assume that we all use soap. While I may like soap that wakes me up in the morning with an acrid bouquet, you may prefer a more subtler start to the day and hey my kids want stripes in theirs. It’s all soap, but when I last looked there were 20 different types and that’s not even including shower gels.

The point is, we have different tastes and motivations and what I like you may not. Your product is going to be targeted at a set of people who share some things in common – what are they? It’s probably not that they all like soap, but it might be something that motivated them to look at your product, they want to feel something when they use your soap.

Benchmark against the competition
It’s a busy competitive market out there and users have high expectations for your product, they want it to be great, to deliver real value to them.

Finding out how competitors do things, what design patterns they use, the style and language they adopt, the features they stress all help you benchmark the market in terms of approach and user expectation. You may need to position yourself against these markers, but these elements form your toolkit, they’re part of your brand.

If you don’t have any competition, think again my friend, at the very least you’re competing for people’s attention and time. Find out more about how to conduct a competitor review.

Adopt a mobile-first approach to design
Designing for mobile means you have to cut out a whole load of features simply because you can’t show it all on a tiny device. The small screen size means you have to focus on a much smaller set of controls.

Part of the reason the iPod was so widely adopted was because it made playing music really easy, a one-fingered exercise. It was simple because it had few features, making a playlist was a nightmare for example.

Sacrifices were made, options were dropped.

Remember that at that time the dominant thinking on the web at least was that everything needed to be available in two clicks at most. These were bold moves, but they created better products.

If you need to have seven items in a right-click menu list, you’re in trouble – get in touch – quick.

Affordance
Design speak for ‘looks like what it is’. If your buttons don’t look like buttons, if your links aren’t distinguished from the things around them, how are we going to know we can click on them?

Give users a chance.

Design for frequency of use
Do you really expect users to be using this everyday?

Maybe, but it’s more likely less frequently. You need to hide a whole load of great things your interface can do. Focus on core tasks. Be brave. Do less.

However, if you are developing a product you know will be used frequently, you’re going to need to think about how users needs change over time. Work out how to reveal advanced functionality gracefully, decide on how you can support the needs of power users. Keyboard short-cuts are your friend

Appropriate language
Dude, not all audiences are cool, want cool or are under 24 years old. Use language appropriate to your research and knowledge about your audience. There’s a big difference between ‘Upload’ and ‘Beam me up Scotty’ – so choose the appropriate tone. Oh yeah.
Labour over labelling your labels
It’s all about the labels. Labelling menu items, buttons, lists and especially forms is really important to get right, yet it is both difficult and notoriously under-valued. As a UI
designer you’ll probably end up doing most of it yourself. And writing most of the home page copy. Use simple common verbs to label things. ‘Send’ is easier to process than ‘Send this message’. Reduce the amount of thinking your user needs to do.Jared Spool has interesting things to say about trigger words in links
Interaction design
Understand your users’ needs and then design the interaction flows before going into production, it’s much cheaper in the end.
Design with real content
If you don’t use real content, you are designing a dream – lorem ipsum just doesn’t cut it in UI design.
Wireframes
It’s really worth creating a wireframe of your product/website/app so you and the client/team know the boundaries of the product. A wireframe is a simple document that outlines what goes on each page and should convey the relative importance of the elements on the page. Although it is not an exercise in layout design, it’s hard to separate the two.

Not always a good idea to share with the client (‘we like the white, but it’s a bit plain’) but essential if you’re working in a team.

Thank you for making noise
Focus on showing more content and less of your UI. Think mobile first, make some tough decisions about limiting options, get your interface out of my way – please.

Where next?

Perfect interactions and explore user journeys by developing a prototype.

UI design examples

Get in touch

Drop me a line if you'd like to discuss your product or service.

Can you tell me a little more about your project. If you leave a contact number, I will get in touch.




Or follow me at