While this blog post titled ‘How would I further improve TuneIn Radio app’, but I thought I would also like to take this opportunity to touch on the topic about consistency in visual design for mobile apps. No, this isn’t a fight between flat, skeuomorphism, gradient etc. – this is about embracing the consistency of visual design for better aesthetic integrity of a product regardless of the visual styling you opt for.

Visual Consistency is for better aesthetic integrity

One of the graphic design principles that I found here fit the context very well:

While creating rhythms and variations from page to page, one must also remember to maintain an overall aesthetic integrity. The purpose of graphic design is to communicate, not dazzle, and an inconsistent design will result in decreased user effectiveness. This means keeping individual visual and typographic elements simple and clear. It also means applying them uniformly, so that the connotations of a particular type style, or the results of interaction with a particular graphic element, are independent of their context. There should be an overall visual system to the text, carefully considered in the first stages of design, that brings together the elements into a coherent whole.

And of course in Android Design Guideline about branding:

If you take this approach, make sure your (brand) styling is applied to every single icon in your app.

Keep it Consistent

Let’s have a look at the things that I would improve on this app (most of them are about visual consistency):

Remove the useless splash/loading screen

Need design consistency on Android UI elements (Nav Drawer indicator has inner shadow, overflow icon doesn’t have it, and both of them are in dark colors)

Use tabs instead of Nav Drawer. Here’s why

Use larger text size in general

Make full use of space for interaction rather than using hyperlinked /underlined text

/underlined text Use appropriate (touch-friendly) size for interact-able elements

interact-able elements Need design consistency on similar items for maximum familiarity and predictability

similar items for maximum familiarity and predictability Show hint if the horizontal list is scrollable

Avoid unnecessary paddings

Need consistency on font type used in the app

Need design consistency on icons (some are flat, some have an outer bevel effect, some have inner shadow)

Avoid truncated texts if it’s possible

Use blurred background in a proper way

Slider that can’t slide? Not needed.

Be aware of the bad readability caused by font color choice and background

Gradient Now Playing bar? Looks old and just out of place.

Use animations to correlate between the full mode and minimize mode of Now Playing

Car mode doesn’t have to look THAT bad

What do you think? Do you like the redesigned version of TuneIn?