Apr 23, 2014

Fundamentals of Building Your Next User Interface

A beautifully designed website or application is a thing to behold. But beauty without substance can only take you so far. User interface (UI) is what holds the look and feel together and makes it useful for the audience. The UI should fade into the background, allowing the user to easily achieve his/her goals. And while we want things to have an awesome design, the coolest new features should never put redundant or unnecessary information in between the user and the objective.

Here are 10 Fundamentals to consider when creating your next user interface:

Audience: I mean, c’mon, it’s in the name: USER interface. The user has a specific goal in mind, and you need to get them to that goal as quickly as possible. They should also be able to provide feedback, whether you’re testing with a small group in the early stages of UI design, or after the UI is launched and you want to make continual improvements. A/B testing is a great way to test during and after trials to see what people connect with – offer 2 or more versions of a UI and see what gets the most productive response. You may think a call to action button is obvious, but the target audience may respond more positively to a different navigational element.

Keep it simple: Simple doesn’t mean basic and boring. UI design should be easy to navigate for the user, with consistent and clear elements that make the goal obvious. Avoid unnecessary functions, images, and copy. There will always be new design trends and tools to make your UI stand out, but they need to be there for a good reason.  Horizontal scrolling may look cool, but does it make sense for the user and his or her goals? Probably not. Don’t leave the user wondering what they need to do next.

Be meaningful: Every interaction on a user interface should have some meaning behind it. Even a simple error message is an opportunity to engage the user and improve their experience with the UI. Check out Dan Saffer’s thoughts on microinteractionsfor details and examples. There are many different elements – colour, images, buttons, contrasts, animations – to create an obvious, clean path towards the goal. Don’t be afraid to try different combinations (without going overboard!).

Content counts: Don’t forget the importance of copy. You may not have paragraphs of text in your interface, but even the simplest short sentence should be written with the user in mind. Don’t use jargon or confusing terms – you want to sound like a human! It’s also important to consider copy in the earliest stages of the design process. You may not have any exact text ready, but there needs to be an idea about what the content is being used for. Think of content like an onion – no, not something to make you cry, but something with multiple layers that you can peel back and open when you’re looking for more detail.

Different devices: When considering content, it’s also essential to think about the different devices that will be used to access the user interface. Content and navigation will appear differently, and users will most likely want different functionality and design based on their device. Responsive designhas helped immensely with all types of web design projects, but it isn’t an easy solution to the increasingly different types of devices we are facing as designers. Consider the different devices EARLY in the UI design stages to avoid major headaches later on.    

Alerts & updates: When you do make changes to a UI, let the user know. Alert the audience to a new or updated feature with a subtle notification, such as a highlighted area or drop-down alert.

FAQs & help: FAQ pages are great on all types of websites, but don’t force the user to delve into the FAQ page for each and every issue. Small icons next to an element that may need an explanation can help users figure out as they go along (and keeps them from having to drop what they’re doing).

Patterns: Repeated patterns allow users to quickly understand UIs as they recognize elements and their functionality across the interface. But don’t repeat for the sake of it – there should be purpose behind the patterns.

Teamwork: It can be hard to balance the needs of the business with the needs of the user. Plus, different opinions from your own team can further complicate UI design. Your sales division may want to require a user to fill out 10 different fields in a contact form, but a complicated or nosy form could deter people from signing up. Make feedback a meaningful activity and not just empty noise by focusing on the goals and the user. Saying “I don’t like the colour orange” is not enough; make critiques and relate them to the overall objective of your UI.

Analytics: Analytics are an essential tool that allows you to continually improve your UI. By measuring the right metrics, you can understand what the visitors are really doing and make steps to improve their experience. Create funnels to see how the user travels through the UI and where the bumps in the road lie.

Here’s a bonus tip for you: You will never get a user interface right the first time. See what works, make changes, and keep getting better.

Leave a comment