What makes a great Android app UI? The devil is in the details!

by: Adam SinickiDecember 7, 2015
530

Google Material DesignAs with people, we form our first impressions of mobile apps very quickly. From the moment a new app springs to life on our device, we begin judging its quality and appeal based on the way it looks. And that first impression is crucial because even if the app is useful, we’re much less likely to use it if it isn’t pleasing on the eye. Likewise, there are some apps you probably spend more time with because they’re so good to look at.

The bottom line is that if an app is an eye-sore, if it looks unprofessional, or if it’s obtuse and unintuitive, it’s going to get deleted or forgotten. This all comes down to the design and user interface (UI), so the question is: what makes an app UI great? And if you’re a developer, how can you make sure that your app has the look and feel it needs to thrive?

Introducing “Material Design”

There is a distinction to be made here between a great app UI and a great Android app UI. When you load up an app on an Android device, you expect it to look and behave a certain way. This is something that Google actively encourages as well, in a bid to create a consistent experience across the platform. While it’s good for apps to have a distinct look and identity (more on this in a bit), it’s also important that they still have that Android-flavor, so that it isn’t jarring going from one action to the next.

Look at Google’s own apps and you’ll notice this right away. The Calendar App, Google+, Gmail, YouTube and Chrome all have some clear similarities in their look and feel. They use bright colors, simple geometric shapes and lots of animations. Whether or not you like the look is beside the point – what’s important is that it brings together the ‘Google experience’ so that the lines between individual apps become blurred.

 

If you’re a developer and you’re creating a new app, then Google wants you to follow suit and take some of that same design language on board. And they call that design language ‘Material Design’.

Other hallmarks of Material Design include:

  • Bold graphics
  • High contrast
  • Large typography
  • Pastel shades
  • Intentional white space

It’s called ‘Material Design’  because it revolves around that metaphor; the elements of the app work like real, tactile ‘materials’ and the cues this presents should facilitate intuitive interaction. It’s a little like skeuomorphism (design based on real-world objects like phones and calendars) but with an added layer of abstraction.

There are plenty of resources that go into more depth on Material Design but suffice to say that a good UI on Android should conform to these standards, so as to create that uniformity for the end user. If your app is all static pages, small text and dark colors then users will feel taken out of the Android experience when it loads up.

You can choose to go an entirely different route if you like, but in doing so you will find that it’s harder to get Google to promote your app in the store and you’ll risk looking out-dated.

flashlight

This cool flashlight UI from CleverRoadInc is a great example of skeuomorphic interface-meets Material Design. You flick the switch to turn it on!

Branding and identity

That said, you also shouldn’t try to copy Google’s own apps exactly either. Do so and your offering won’t stand out and won’t make as much of an impression. What’s key then is that you have a strong branding that is felt throughout your design and that you can use as a ‘hook’ to remind people who you are.

matrand

Matrand is an app that has a look very in-keeping with Material Design while still being unique enough to stand out. Well done Matrand…

That means you should have a great logo and app icon, plus elements from these should be echoed in some of your other design choices. For instance, it doesn’t hurt to use the colors from your logo in other on-screen elements throughout your app. Most company websites will be colored to match their branding and it’s just a smart move for building brand awareness.

This is also why it’s so important to think carefully when creating your logo to begin with. Certain colors have particular effects on us psychologically and some will work better in an app UI or others.

For instance, a blue logo will provide a pleasant basis for your color palette that’s easy on the eyes. Blue is a naturally calming and restful color and we tend to enjoy working around it for long periods of time.

I had the good fortune to get to work with Coldfusion, who designed this beautiful app.

I had the good fortune to get to work with Coldfusion, who designed this beautiful app.

On the other hand, the colors red and orange are very bold and are useful for contrasting and grabbing attention. They’re not so great however for keeping people on one page as they actually raise the heart rate and cause a subtle stress response. Fast food chains allegedly choose these colors for their décor to encourage their clientele to eat faster and leave sooner – allowing them to increase turnover!

If you’re choosing a bright red and orange logo, think about how this might impact on your app design. There should be synergy between the look of your brand and the look of your app. Think as well whether the logo itself fits with the principles of Material Design. All this will just make things easier for you.

Then again, YouTube, Gmail and G+ are all predominantly red… rules are there to be broken!

When considering the actual shape of your logo, choose something relevant, simple, versatile and unique. Avoid obvious clichés like ticks, globes and lightbulbs – they’ve been done to death!

Color theory

Speaking of choosing colors, this is a whole science in and of itself. What’s key here is that you choose complementary colors for your app to avoid ugly clashes and to encourage ‘harmony’.

best new android apps adobe color ccWhen using an app you bought from the store, you might not immediately notice the color palette and you’ll probably give it no thought. This means it has been done well. Don’t take it for granted though – a good developer will have spent a long time deliberating over this to find complementary colors that make their interface more pleasant to use and that don’t detract from the experience. You need to do the same!

If you take the main color (the exact color code) from your logo as a starting point, you can then use a color wheel in order to select a color palette for your app. While you have a few different options, some common choices include:

Complimentary Color Palette

This is a color scheme based on two opposite colors from the color wheel. For instance, you might choose purple and yellow or red and green.

Triad Color Palette

This type of color palette uses the same basic principle as the complimentary color palette but takes it one step further by introducing a third color. All three should be spaced apart equally on the color wheel.

Analogous Color Palette

An analogous color palette takes the exact opposite approach by picking two or three neighboring colors.

Monochromatic Color Palette

The monochromatic color palette uses just one color but in lots of different shades. This was Claude Monet’s favorite, though he didn’t make that many apps…

claude-monet-monochromatic-blue-16x9

 

Natural Color Palette

A lot of color palettes are actually based on nature. Without getting too deep into evolutionary psychology here, it’s likely that a lot of our appreciation for color is based on what we would encounter in nature. Thus, you can take a photo of a landscape you find particularly moving and use then a color picker to select a primary and secondary color for your app. In most cases this should create a nice palette that’s very easy on the eye.

Try out a tool like Paletton.com, which can help you to generate attractive color palettes automatically.

Keep in mind as well that you want to direct the eye using contrast, so your color palette should allow for at least one color that will stand out from the rest and really grab attention.

Typography

When it comes to great app design, the devil is very much in the details. It’s all the things that the user doesn’t notice that give your design a professional and polished feel. Get it wrong and your app will feel ‘off’ even if they can’t put their finger on what’s wrong with it.Google Fonts for Android

The aforementioned Color palette is one example of this. Another is the typeface. While you might think it’s fine to pick any font as long as it’s legible, in reality the world of typography is incredibly deep, fascinating and complex, and this choice deserves some real attention. (To learn about the fascinating history of typography I highly recommend the brilliant Type:Rider, an exceptional example of edutainment done right.)

For apps, as with websites, you should choose a primary typeface and most likely a secondary typeface for headers and other items of interest. You can use three fonts in rare cases but never go beyond that. The fonts you use should be similar in terms of mood and era while still offering a good amount of contrast.

The most important thing to emphasize here though is readability. Make sure that the main font you choose is easy to read on a mobile display and that it looks clean and modern. Don’t make your users squint at the screen or you’ll give them a headache!

This usually means a sans-serif font; sans-serif meaning that it doesn’t have any of the feet or ‘flicky bits’ (as they’re technically known). If you choose a nice Humanistic Sans font for the bulk of your text, then you can combine this with a modern serif for your headings and that will look sweet. Check out this awesome infographic for more recommendations (source):

android design font-infographic

Google actually provides a ton of open-source fonts for you to use, so it’s easy for you to pick something with the company’s stamp of approval.

Animation and ‘easing’

One particularly nice element of Material Design is the emphasis on animations that revolve around the user. The idea is that instead of being taken from one page to the next as you interact with an app, you instead feel as though the app is moving around you to present the information you’re looking for.

mail-widget-animationNot only does this create a more seamless experience (transitions from one page to the next can be jarring) but it’s also empowering to the user who gets to witness the immediate impact of their interactions. Remember: mobile UI is touch first and the more tactile the interface is, the more satisfying it will be to use. For every action, there should be a reaction (though it doesn’t necessarily have to be equal or opposite…).

Animations also make an app appear a little more slick and again, more polished. Once agin, attention to detail is key to getting this right.

That’s because it isn’t enough to use ‘any old’ animation. If you want an element to swoop in from the left for instance, it can’t just be a case of If (positionx < targetx) { positionx = positionx + 1 }. In other words, it can’t just move left at a steady speed and come to an abrupt halt.

Pay closer attention to the apps you use on a daily basis and you’ll notice that the animations really do treat each element like a real-world object. They have momentum for instance and acceleration which creates the illusion of mass and weight. Menus and moving images have to build up speed and then come to a gradual halt – just as objects in the real world do. Likewise, you’ll notice that some elements ‘overshoot’ their target and then ‘snap’ back into place giving them an almost Loony Toons feel.

All this lends your app more character and makes it feel more natural. As Google puts it, ‘nothing in nature moves linearly from one point to another’. You can learn more about ‘easing’ here.

This is how an easing animation should work over time (from Google).

This is how an easing animation should work over time (from Google).

The good news is that you should find that these flourishes are built into whatever library you use for your animations. This is a great example of why you should rely on pre-existing libraries and not attempt to reinvent the wheel.

Navigation and leading the eye

A lot of what we’ve discussed here relates to design, more than user interfaces but it’s important to recognize that these two aspects of your app are intimately connected.

The most important requirements for an app’s navigation are that it is a) intuitive and user-friendly and b) optimized for touch. People should know immediately where they need to click and how to access the information they’re looking for.

To do this, you essentially use the layout of your app itself to educate the user implicitly on how to interact with it. Google talks about using Material Design to provide ‘visual cues’.

So how does this work in practice? When you design any interface, one useful tip is to remember that readers will consume media from the left to right and top to bottom. As such, it is often a smart move to put important aspects of your navigation in the top left corner. The top left is a good place for a logo, while navigation buttons will often go along the left or along the top.

Another place to put important items is in the center of the page – as we often look here when getting the ‘bigger picture’ of an app’s layout. Using this as a place for your important elements though leaves you with less space for everything else and makes it harder to create a natural flow of information.

If you have a series of images that gradually get smaller, then users will know to look at the largest first. This is also why the first letter in a magazine article is often bold, colored and large.

If you want to buck this trend and guide the user’s eye in a particular direction, then there are many more ‘cues’ you can use to lead them around. For example, we are naturally inclined to look at things that are bolder or larger first. If you have a series of images that gradually get smaller, then users will know to look at the largest first. This is also why the first letter in a magazine article is often bold, colored and large.

Try to avoid incongruence which confuses the user with contrary cues. That means you should avoid putting the largest object in a sequence on the right, which would send mixed signals.

Don’t be afraid to use arrows where necessary, or to use a little skeuomorphism. Seeing that a page has a bit of a dog ear in the bottom right corner suggests that it might act like a page in a book and can therefore swiped to progress. Without that subtle indicator though, your users might never have made it past page one!

This is another reason to use lots of white space. White space is a designer’s best friend because it makes it that much easier to make something stand out and thereby lead the eye. Follow the old designer’s maxim: communicate, don’t elaborate. If an element on the page doesn’t communicate something regarding your navigation or the content itself, you’ll probably do better to just lose it.

Check out this excellent video on leading the user’s eye for more tips and ideas.

Remember though that navigation mustn’t detract from the experience itself. Your content should still take center stage and as screen real-estate may be at a premium, try to minimize the amount of ‘chrome’ (navigation) as far as possible.

Technical and practical considerations for Android UI

All that information should serve as a good basic introduction to graphic design and creating attractive user interfaces.

However there are also some technical and practical considerations to keep in mind too and that might limit what you can achieve. For instance, if you’re developing for Android then you need to ensure your layout is responsive and that it will work with multiple screen sizes (another reason to use a minimalistic approach).

Want 5.3 inches of phablet or 13 inches of multitasking power? Not a problem with Android

Just a few sizes to keep in mind then…

Think too about the standard elements of an Android app. You’ll probably need to include an app bar and a menu button for instance. Google offers some documentation regarding best practices in a number of areas, which can be of some assistance.

Remember that your design ideas will need to work within the context of the tools you’re using to build your app. Think in terms of LinearLayout or RelativeLayout and make choices that will lighten your work load and make your program easier to update in future.

Then there’s the matter of resolution and how it relates to file sizes. You want your images to be beautifully crisp but not if it means your app takes a year to install. Make sure that you always use vectors rather than raster files when designing your various elements. This will allow you to more easily alter the resolution and to make changes in future.

Another tip? Know your limitations! No man (or woman) is an island – so if you’re not a master of design then hire someone who is. This will save you a ton of time and the result will be a more professional-looking end product.

Research, experiment and iterate

Okay so that sounds like a lot to take on board, but in reality a lot of it is fairly intuitive. The main take-home message is just to spend some real time thinking about those smaller choices in your app design and to do your research prior to creating your masterpiece. It takes a little work but once everything comes together you’ll have a striking app with bold, contrasting colors and intuitive interface that dynamically changes shape around the user… making that little extra effort will be worth it.

If you take a look at some of the apps on the Play Store that you like, read up on Material Design and just immerse yourself in great UI for a bit, then you should find that a lot of this information sinks in via osmosis. Pinterest is always a great resource for design inspiration, while MaterialUp.com showcases examples of Material design from around the web.

Experiment, have fun and create something that’s as beautiful to look at, as it is joyous to use!

  • Gaurav Pandey

    Thanks for the article :)

  • Also a tip, learn proper English or get someone to proofread all your text. I see too many apps with broken English and it’s a huge issue. Makes the app seem untrustworthy

  • Osa

    Anyone know the name of that dialer app?

    • Armaan Modi

      no.even I wanna know about it.

    • Looks slick as hell, what is that app??

  • Thanks for this insight into Material Design!

    Personally, the best exercises of Material Design were
    – Pocket Casts (the colour pallette is in line with the app’s identity colours, the animations are clear, controls intuitive, and clean typography without clutter.)
    – Phonograph Music Player (It’s basically what I WANT Google Play Music to be.)
    – Evernote.

    Maybe, this should be a thing. What is YOUR favourite exercise of Material Design?

    • Took a look at Phonograph… It is great, I am forever in your debt!
      Was looking for a new music app with good looks and a bit of customizability, thx mate!

  • Omar Lopez

    A very well written article. I’ve wondered for awhile the basics of Material Design. This helped me understand quite a bit. Thank you!

  • Kunal Narang

    Great piece of journalism. Thanks for this!

  • Armaan Modi

    I think this is the longest AA article I have ever read.And I must say,good job!Nicely written and presented.

  • TMO Group

    Really Interesting post. Here’s an article about what is UI design
    and how UI design would affect online business: bit.ly/1XR5Y6P. Please let us
    know what you think. Thanks!