Brought to you by Price&Cost

We help you deliver projects on budget

 
24
Oct
2016

A few good reasons why to use native UI elements

Kirill Borissov
by
Kirill Borissov

24th October 2016

One of the most common mistakes UI designers make is to design absolutely everything – from brand colors to UI controls. Being a designer for over a decade, I recall doing exactly that in both web and native apps even just a few years ago. I was creating monstrosities out of gradients, shadows, images, layouts, fonts and custom elements and it took time and quite a number of projects to overcome my urge to beautify and recreate the patterns and elements, and start to rely on platform conventions and components.

There are a few exceptions however, one being web apps, but rather than that as I have learned – following platform conventions and using native elements is a good practice overall which saves time, effort and makes developers happy.

Below are the few key things to keep in mind, learned the hard way – through years of designing various products for quite a number of high-profile companies.

1. Follow platform design conventions no matter what your brief says

Every platform is different in both UI patterns and graphic style
Every platform is different in both UI patterns and graphic style

When creating multiple platform applications, many tend to follow one design pattern for all the platforms. It seems cheaper, faster and even (sometimes) logical to create a one-for-all design, code it in HTML and then relax and grab a beer. It’s hardly so easy, unfortunately, because of two things:

One being very obvious – people are choosing one platform over another for a reason – they prefer the user experience and the looks of it more than the other one. And it is a waste of time to give them the user experience they did not want in the first place.

Mobile platforms default UI
iOS default tabs are usually in the bottom of the screen, Android has top header tabs and web has the luxury to make everything.

Second reason is the familiarity of used platform’s conventions. People usually expect things to work the way they are accustomed to, and are easily frustrated if the app behaves differently. In this case the right thing to do is to go with the native app looks, with OS page navigation, controls and elements of the platform it is released on.

As I have already mentioned, there is an environment where you can have a bit more freedom – the web. It is universal, heavily styled from day one and controlled in more simpler way. All that means less limitations to its own default style and patterns. However not going nuts about the looks, keeping in mind your audience and remembering to always test is a good practice.

2. Design using OS native graphic style

For the last decade UX and visual design has become more and more valued (thanks to Apple, who showed us how important it really is) and most operating systems’ default interfaces are more logical and looking much better visually than they used to. The days of horrific select boxes and checkboxes, ugly orange Android buttons and Windows 95 grey dialogues are gone and never to return. Instead each platform is offering a fair set of graphical elements which don’t require massive coding and are easy to customise (colours and font properties being the minimum set). It can sometimes be too non-intrusive (hello Apple Watch), but still won’t look bad.

some of the myriad of available UI elements
some of the myriad of available UI elements. Not so bad, aren’t they?

Using native elements is also good for consistency across applications, so this choice is pretty brand-conscious as well as time-saving.

3. Use default fonts

Default platform fonts are more scalable, more variable in font weight, have better kerning, readability, line and character spacing, are better clear-typed and usually support most of the glyphs and languages. Helvetica (iOS, Mac OS), San Francisco (Apple Watch OS) Roboto (Android) and Segoe (Windows) are very good fonts and it’s extremely hard to find a better alternative to them.

Default fonts
Default fonts are all sans-serif and usually have most of the font-weights (Segoe UI being the poorest).

Best place to use your brand font is your product name or an occasional header, but changing the font for content text can be a very big mistake.

Read my article on best fonts and font-families to use in your CSS for cross-platform compatibility.

4. Use well-known icon metaphors

In most cases, there is a well-recognised metaphor for majority of the actions in your app – something people understand straight away. Use it, don’t create something completely new as usually you don’t have the luxury of coming up with a totally new metaphor and therefore – iconography. The good thing about the icons is that you can still style them to some extent without any damage to how they will be interpreted.

Text editing icons
Text editing icons are a good example of how well we understand something that was repeatedly shown to us.

And even when the symbol is well-known, I still prefer to use labels as some users don’t read icons well. Icons without a label are fine, but the action then should be very clear.

5. Don’t reinvent the wheel

As a conclusion – native design kit is a good start to every new application. Styling elements is ok too, but only to some extent. You should keep reminding yourself – users don’t want to learn new things and are more comfortable with something they already know. Simplicity is the king.

Filed under Design

alt=

Kirill Borissov

Kirill is a designer from Helsinki making mobile, desktop and web apps, passionate about creating simple and beautiful software.

Follow Kirill on Facebook

Comments

Brought to you by Price&Cost

Project estimation and budget-tracking tool

 

We are almost there

We will let you in soon!
Sign up for early access and we'll place you in the waitlist.