A guide to user interface design

Your user interface – the bit your website or software that users see and interact with – is crucial to creating a positive customer experience. You want it to look beautiful, of course, but it must also work beautifully too so that people can communicate what they want or get information easily and quickly. Good user interface design can increase sales, improve customer satisfaction and reduce costs by making websites work better, structuring content and information so people can find it.

When we design user interfaces we start with lots of questions. How are people going to interact? Where have they come from? Where are they going? Will they understand how to use this?

Our user experience team answers these questions using prototypes, wireframes, sketching, task models and information architecture. We don’t just assume a website will work, we show you that it will before we build it.

This approach gives you freedom to get creative and experiment with ideas. Frequent user testing along the way means you’ll know which ideas work before you launch. Every aspect of your site will meet the needs and expectations of your customer.

Our Interaction Design Toolbox

Here’s an introduction to the tools and techniques we use during an interface design project.

Wireframes

A wireframe is a blueprint of how your users experience a website, app or software. We use wireframes to look at how pages are laid out, how navigation works and how content is structured. It’s like drawing the outline of the thing we’re building before filling in the detail.

Wireframes are quick to produce (much quicker than building the thing itself) so we can use them to work through and test loads of ideas before committing to the end design. It also allows us to experiment with how the same service or content might appear on different platforms, like mobile, tablet or desktop.

Prototypes

A prototype is a simulation of a finished thing that allows us to test whether underlying structures and assumptions actually work. In user interface designs, prototypes are usually interactive mock-ups of the final design that can be discussed or tested on users.

Prototyping is a powerful process that highlights flaws and issues to be resolved before any coding starts. It can also deliver discoveries we hadn’t expected and lead to innovations beyond the initial brief.

During prototyping, we can carry out regular usability testing to verify that people can use what we’ve designed, modifying it accordingly as we go.

Sketching

When information is presented visually, it comes to life. Connections fizz, ideas mutate and stories emerge. Our sketching process gets back to basics with good old pens and paper to help everyone get more creative, nail ideas and understand fundamentals from the start.

You don’t need to be an artist or designer – it’s the process that’s important, not the pictures! By sitting together and sketching out ideas we can quickly identify common themes, decide what actions and areas are most important and leave the room with a shared understanding of what to do next.

That saves a lot of time, misunderstandings and a lengthy sign off process. It also means you get to be creative and make your ideas clear.

Task Models / Mental Models

People get frustrated when the way they think something should work doesn’t match how it actually works. Task models and mental models are a way of eliminating this frustration.

Task models are maps of the steps users take when carrying out a task, and mental models are maps of a user’s expectations of how that process should work. Comparing the two can uncover inconsistencies, snags and issues so that we can fix them at the design stage before we start building.

 

Whether you’re building a new user interface from scratch, or you want to make improvements to an existing interface to increase conversions or reduce customer queries, we can talk you through the design process, from working out what to build to delivering the final product.

If you enjoyed this article and would like to talk more about how Natural Interaction can help you achieve your goals, please get in touch.

Contact Us

adam@naturalinteraction.com'
Adam Babajee-Pycroft

Adam Babajee-Pycroft is Managing Director (UX) at Natural Interaction. You may bump into him speaking at a conference or near the front at a metal gig.