A few good reasons why to use native UI elements
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
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.
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.
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.
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.
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