KISS: Keep It Simple Stupid! – Creating simple UI By Ben Jones in Blog on Dec 17, 2014 with 0 Comments

Sorry no weirdly long tongues and black and white makeup here, just simple, beautiful design! I’m going to take you through a process enabling you to make sure you’re UI is simple and clean, improving accessibility as well as making the app generally look awesome.

There are a few pointers to keep in mind when thinking about how to simplify your UI:

1. Only show what the user really needs

So many times I’ve downloaded an app and instantly felt confused as to what to do next. This is generally because nothing clearly stands out. All of the components on the screen have a similar hierarchy, and each one shouting out as much as the other. As well as this the screen is crammed with everything the app has to offer.

What we should all be doing here is thinking about what is only necessary to the task at hand. If the app is a music player, then I want to play music straight away, give me the controls to do so and let me discover more music later.

Make the user feel they are in control by limiting what you give them. Think about the key feature of the screen and make sure you give it clear focus. A user has come to the screen to use that feature so why make it just a small section, make it stand out and easy to use and understand.

2. Guide the user

We want users to experience the whole of our app, but don’t throw everything at them as soon as they enter. Think about how excited you get when you unwrap a present, the more paper you tare off the more excited you get. If somebody just handed you the gift unwrapped you feel disappointed that you didn’t get the grand reveal. That same feeling happens a lot when using apps, without proper navigation and having everything upfront, it instantly feels like this is all the app has to offer.

Start off with your key feature, what the user downloaded the app for in the first place. People are inquisitive enough to want to explore and discover new things. Make sure that the user can take all possible journeys within a few steps, but always able to loop back to the main function within a few taps. When planning out the features of the app try to limit them to what is really needed. Giving users too much choice slows them down, stops them from being able to reach a goal quickly and ends up frustrating them. Limiting features ensures that navigation is minimal and users will enjoy how easy it is to use. Make sure that what ever journey the user takes, they always lead in a full circle back to the main feature of the app, never leave them at a dead end.

One other thing to help guide the user is colour, signposting the user to where they could go next.

3. Keep it clean, giving colour meaning

When flat design came about I felt this was a great step in simplifying UI. We’re now able to emphasise an element purely by its size or colour. When creating the colour palette for an app, think about what each colour will be used for. Generally the palette should include a few standard monotone colours and then just a couple of colours to brand the experience. Your monotone colours should be used throughout the app as backgrounds generally as well as typography. For the colours you choose for your brand use them to help guide the user. Keeping a clean interface with monotone colours enables you to grab the users attention just by using a small amount of colour for a button or highlighting an important piece of information.

Look at Spotify as an example, their interface is very monotone but they use their brand green to highlight key information, whether it be a button or showing what’s playing, downloaded or selected in navigation. If we use too much colour in our interface then the colours themselves lose meaning and become pointless. Colour should never be used just to make things look good, give them purpose.

4. Keep it consistent

When creating all components, whether it be typography, colour, iconography or the style of an element, make sure that what ever you use it for you use it every time after that when the same meaning is required. If you create a list view for songs, make sure that same style is used when referring to lists of songs in other places in the app. As a user explores the app they will learn what each element means, if they are shown something different for a similar meaning elsewhere in the app they may think it means something entirely different. Reusing components enables a user to learn how to use the app quicker as there are less things to take in.

To make sure it’s easier to keep consistency in the app, make sure that your use of different type faces, colours and components is limited. You should have to create something new for every single screen, you should be able to reuse components and if needed simply tweak them slightly to fit the purpose. A news app is a key example in typography, using the same header style across articles as well as sub headers and body copy makes it easy for a user to follow a story. Other types of apps benefit from the same treatments where a user understands where they are based on a particular piece of text using a certain typeface for heading, then keeping consistent body copy enables the flow of a screen to run smoothly with nothing grabbing the users attention when not wanted.

To sum up

Keeping everything clean and simply creates an overall enjoyable experience where the user is able to do what they want quickly, navigating the app with ease with the simple use of colour and typography. Keep key features of screens clear and concise, making it very easy for a user to understand them straight away.

Make sure you plan out your apps properly. You can always tell how well thought out an app is by the fact that you never feel lost, never hit a dead end and always feel in control, make sure your users feel the same.

Thanks for reading and if you have any other great tips for keeping it simple then please add them to the comments!