User interface design

User Interface Design Otherwise known as: How to interface with idiots.

First lets get one misconception out of the way for all you newbies from graphic design school, college, university or whatever basement-education you received; user interface design is not visual design.

Example of a polished user interface inputs, controls and buttons.

Vs.

A very basic set of user interface controls

They look staggeringly different, don’t they? And yet some people are still referring to the first one as user interface design. From a high level they are technically the same thing. They are both a collection of elements to help you, me and your grand pappy successfully complete a given task online. They are also a collection of inputs and controls that help us understand your web app or tool without having to beat our heads the keyboard or worse, leave the site altogether.

Where the distinction comes, is in how the elements people interact with are defined, tested and ultimately used versus, blindly creating something and then using colour, typography, textures, images and line to mask usability.

burger without bun by dan jones

Picture by Dan Jones

You could almost think of ui design and visual design as a really good burger. Visual design being the bun, and ui design being everything else – you can still have a good meal without the bun – but just the bun on its own is pretty bad for you, not to mention lacking in nutritional value.

So lets get tacky and just continue with our ‘burger’ metaphor. Even though ui design is meant to focus on providing users the elements needed to complete tasks or actions on your website, or app, it doesn’t mean you’re restricted to a finite set of elements. Everybody has their burger a different way; with or without cheese, veggie or portobello mushroom patty, fried egg – I think you get the idea.

The controls and inputs that have become standard over time are standard because they’ve stood the test of time, but you do have a lot of options to choose from. One particular site I use as a reference often is patterntap.com, create by the folks at Zurb University. What should be required from a responsible designer (like you) is to put in a little research and take inventory of what’s already out there.

Here are some fundamentals in user interface design you should always keep readily available as a reference.

 1. Who’s going to use your interface?

Photo by chrisjfry

Photo by chrisjfry

Knowing who your users are going to be will inform a lot during your decision making process. If you’ve developed user persona’s early in your ux process, you’ve clearly got your “A” game going on. If not, be prepared to hustle a little harder! Factors like age could influence technical aptitude, visual proficiency and accessibility. Are they always on the go? Are they always using smart phones? Are they still wearing diapers?

2. Avoid ambiguity. Provide clarity.

Photo by Régine Debatty

Photo by Régine Debatty

This idea creeps into the “Strong visual hierarchies” territory, and some might argue that this should be number one of the list. However, how can you be clear about something, when you don’t know who to provide clarity for? Clarity isn’t something your users are thinking about when they use your interface or system. They’re thinking about how to answer a question, make a purchase, book a flight, anything that comes up to break that path they’re on is setting the user up for failure. Clarity provides the user the necessary bits to move forward without having to learn. Clarity should permeate throughout your product, your brand, your website, mobile app, content and design.

3. Use patterns and stay consistent

Pizza-UI-Kit

This one is an easy one to let slip by. I can admit to getting tunnel vision when working on a project, so it’s crucial you get feedback and get it often. Simple elements on your interface like arrows should all be consistent globally. If you’re going to use a square ghost button, then make sure you use it across the board. If you’re going to need a form, then make one that is simple and logical – no need to reinvent the wheel on this one. I know as visual designers we can get all excited and feel the need to stray into ‘I want to make it different’ territory. Don’t. Stick to what will be usable, and understandable. A client is not paying you to design for you.

Some great resources:

4. Strong visual hierarchies

Principles of design

Designed by FOLO, a firm in Ahmedabad, India.

Giving some order and precedence to your layout, because your design is fundamental to having users understand you better. Take advantage of typography to create some clear contrast to big blocks of text. Use colour and contrast to guide the eyes to what you want people to see. The bottom line is you just want to design the information in a logical, accessible way to the everyday user. Not bombard them with an interface that is reminiscent of a Where’s Waldo book.

5. Give users some feedback

Dribbble submit button by Colin Garven

Dribbble submit button by Colin Garven

 

When I see a button, and nothing happens when I click, tap or hover, I get irritated for some reason. Maybe I like pushing buttons (ha ha), but seriously, let me know that the interface works. Today there are some complex systems that require a lot from users, so when they’re presented with a ‘wall’ in their interaction it creates something called cognitive dissonance. Basically you’re forcing the user to question what they just did .

I just clicked, “Add to cart” , but I’m not sure if it actually added it.

Users get conditioned to a certain expectation when they navigate across devices. When they click on ‘Add to cart” and they get a little pop-up message or some subtle indication that what they clicked was just PUT into a PLACE called the CART for me to come back to, I expect this kind of interaction with every other digital shopping experience.

6. Don’t make a user read. Make them react.

Decision Maker app

A lot of the visual cues someone needs to get moving through a task will vary from a single line of text, to a block of text, to a single icon. If you’re going to use a single word or line to describe what the user needs to do, it better be clear. If you need big blocks of text to explain what the action required is, it better be short. People do not like reading. Actually that’s not true, simply put, people just don’t read. Not out of laziness or illiteracy, they just aren’t programmed to do it at that given moment while they’re in task mode. Providing an icon is usually the best method because it can transcend language (and save space).

So, remember this reference. It has some juicy tips that will guarantee an experience that won’t suck. It’s OK to make your users work just a little, just make it fun for them! Don’t make it a burden. Also the experience needn’t be guess work. So long as you remember your ABT’s.

ALWAYS.BE.TESTING!!