September 1, 2013

On user interface design

On-flat-UI-title

Article published in issue 213 of WebDesigner Magazine.

User interface design is a hot topic these days. High-profile redesigns, notably across all of Google’s web and mobile interfaces, and in Apple’s recent iOS facelift, have led to everyone wanting to get in on the conversation.

Graphic user interfaces have come a long way since the days of being keyboard- controlled, green text on black backgrounds.

In recent years, mobile technology in particular has changed the way we see user interfaces. There’s more pressure than ever on designers to make smartphones and tablets accessible and easy to use, even for the most inexperienced user, At this stage, it probably won’t come as a surprise to hear that this responsibility all boils down to the user interface (UI).

This feature aims to give you a guide to user interfaces; what they are, where you can find them and why they’re important. There’s a quick rundown of how to create a beautiful flat UI kit of your own for use on the web or mobile and some handy dos and don’ts for designing your interface.

There are also some important tips worth remembering to make sure you always put the user first and make their experience as comfortable as possible. You’ll learn how to create icons, glyphs and other UI elements in Adobe Illustrator CS6 and take advantage of the flat design style that’s currently in fashion, so you too can start creating a stunning and easy-to-use interface.

There’s also a quick glance at the skeumorphism versus flat design argument – they aren’t as mutually exclusive as you might think . You’ll be shown how they can be combined to create a UI that is both clean and simple but also allows the user to quickly get to grips with its functions and mechanics. So, let’s get started.

WHAT IS A USER INTERFACE?

User interfaces are everywhere, not just on our phones or computers but in almost every aspect of our lives. Your car dashboard, the controls on your coffee machine, a TV remote – even a door handle is a user interface.

They’ve existed since long before we’ve had computers and software and have posed a challenge to all sorts of designers for centuries. The UI is the part of a computer, machine or software application that the user interacts with and should often be invisible, allowing the user to complete a task or process without distraction.

“The number one rule in user interface design is understanding the user’s needs… then you can design to meet their requirements”

Although they exist in many different forms and in countless environments, the same principles always apply to UI design. The goal is to achieve as efficient and simple an interaction as possible for the user. They should be able to carry out the desired process with as little friction as possible and it’s the designer’s job to make this happen.

For the purposes of this article we’ll be talking about designing a user interface for web or mobile applications. For software such as this a combination of hierarchy, simple menus, good iconography and colour are used to create a streamlined experience that users will find easy to understand and get to grips with.

The number one rule in user interface design is understanding the user’s
needs. Once you know what it is they want to get from your system, what prior knowledge and experience they have and how they might use your software then you can design to meet their requirements.

It’s important to remember that when embarking on a full UI design project, proper research and testing should always be carried out to find out exactly what your users require from your interface, so you can make sure you tick all the boxes.

WHY IS THE UI SO IMPORTANT?

User interface design is important because it defines how users will interact with your application and how they feel when using it. How the UI feels is called user experience (UX) and the quality of your UX will affect how comfortable and intuitive it is, which in turn will affect how often people use your app and in what ways they use it.

All this will ultimately affect how successful your app or system is, whatever the platform, as users will always gravitate towards those apps that provide them with a more seamless and enjoyable experience.

Once you understand who your user is, you’ll want to make your web or mobile app as easy to use for them as possible. What is the function of your application? What is the user trying to achieve? These are the questions you need to ask before you start creating your interface.

There shouldn’t be complicated, hard to master gestures, menus should be well thought out and easy to navigate, and the user should never feel lost. Warning and error messages should be helpful — not just a declaration that the user has done something wrong. If your audience doesn’t like the experience of actually using your app they simply won’t use it at all.

Achieving a good user experience depends on a number of factors. Function is important, it’s not only how the UI works that matters but how it looks as well. Even if your app works perfectly, most people will not enjoy looking at ugly interfaces.

THE RISE OF FLAT UI

Anyone working in the design industry couldn’t have missed this year’s biggest trend — flat UI. ‘Flat’ refers to the use of solid colours, little or no transparency, a lack of gradients and gloss and the often 2D feel of this style. Flat UI has become increasingly popular because it feels uncluttered and clean, often allowing for a more streamlined user experience.

The fact that a flat design style has been adopted across web and mobile interfaces at Apple, Google and Windows in the last 12 months, shows just how big this trend is. Most people have lauded the introduction of flat UI and welcomed an end to the supposedly cumbersome, photorealistic mobile interfaces that have been used over the past few years.

At this year’s iOS 7 announcement, Apple even mocked themselves for the overuse of green baize and wood textures in earlier iterations of their OS. Quite a U-turn, considering that they were one of the original instigators of realistic, skeuomorphic UI.

When the iPhone was first released, people were in awe of its rich, texture-filled UI, because there had never been anything like it. Since then, most people feel that

the style has become dated but the skeuomorphic elements of Apple’s original interface were integral in helping users get to grips with iOS straight away. Those real-life elements were an instant reference and gave the user something they could relate to, at a time when this kind of mobile interface was brand new.

Just a few years later, though, designers are already finding that these skeuomorphic reference points are becoming less necessary as users become more familiar with how these types of interfaces work; and some of the real-life elements themselves actually become obsolete.

A great example of this is the floppy disk icon that most software still uses to denote ‘Save’. Computer and smartphone users of today may not have even seen a floppy disk, nevermind used one to save data. Because of this, most people won’t make that same instant connection with this icon anymore.

As digital interfaces become a larger part of our day-to-day activities, the need to incorporate analogue throwbacks into icons and menus is often becoming unnecessary. However, even in flat design there is sometimes a need for skeuomorphism and the two are certainly not mutually exclusive.

SKEUOMORPHIC DOESN’T MEAN REALISTIC

In the debate about UI design that’s happening across the industry, one of the biggest sources of confusion is the flat vs skeuomorphic argument. In truth, it’s not really an argument at all. Although there has been a shift towards flat UI, this doesn’t mean that there are no skeuomorphs in interface design.

The two can coexist and can be paired with great results. Beautiful looking flat design can still use skeuomorphic elements to give users a reference. Flat calendar icons and apps, often still look like real life calendars, and switches and buttons can be flat but still have the look and feel that a real version of the mechanism might have.

It creates a level of comfort and understanding. The user knows that the switch will move to the right or flip down because it’s reminiscent of something they’ve used before.

The real question is around skeuomorphism and realism. Realism is what leads to large, slow loading textures and horrible green baize backgrounds. Many apps are skeuomorphic without being photorealistic and this is often where people get confused. Remember, skeuomorphic does not mean realistic.

FINALLY, DON’T FORGET THE USER

By now you should be well on your way to creating your own flat UI kit, and you should be armed with the knowledge of how to successfully execute it in your next user interface build. Remember to always keep the

user in mind and consider their needs before adding unnecessary or pointless elements. Just because it looks good doesn’t mean it adds anything.

Use apps and discover what works best. Become the user and you’ll soon find out how difficult it can be to navigate an app that’s been built without your needs in mind. Communication is paramount so make sure error messages and direction are simple and informative.

Make sure to test, test and test your interface again. There’s always a small amount of trial and error involved and you will keep developing as you go along and find bugs in your systems – but this is a good thing. After that you can then start to develop methods by which advanced users can speed up their processes through customising the actions they use most frequently.

And don’t forget, your UI should always be invisible.

Comments are now closed.