It is still pretty surprising that with the Material Design guidelines available for quite some time (close to 2 years!), there are still many Android apps ignoring the basics of Material Design. Sure, the guideline isn’t meant as a complete design checklist, but many basic design details (keylines, elevation, UI elements etc.) and common interaction patterns (Nav Drawer, Bottom Sheet etc.) shouldn’t be ignored if the app is using Material Design as the design language.
Today the victim is the new (?) IMDb app, which I will show what’s wrong with the app in terms of design (they need to work on performance as well, by the way) and which part of the design guideline is meant to address the mentioned issue. Continue reading
After 264 emails with tons of exchanges, 200+ mock screens, 30+ interaction prototypes, 9 months+, 17156 times of revisions (OK, I made this up) – we finally have The Fabulous app with Material Design pushed to the public on the early September, and we are happy that we reaches our first milestone for the redesign – an honourable feature in Google Play Store under New + Updated Apps category.
You probably have not heard about The Fabulous – It’s a Health and Fitness app uses scientific-based approaches to help people in reaching their health goal through a carefully crafted step-by-step program. We purposefully crafted the journey based on the user goal by slowly showing them relevant information and motivates them during the process, and hopefully get them to form some healthy habits at the end of the journey.
Floating Action Button, or, in short, FAB, is one of the unique UI element in Material Design for primary/promoted action for a particular screen. Since it is a frequently accessed UI element in a given screen, I think it’s important to make the FAB right in every details. However, there are a number of apps doesn’t have the right FAB as specced in the Material Design Guideline, which also included some of the Google apps (I know!).
Todoist recently have their major redesign using Material Design and I thought it was actually quite nicely done! Though I found one minor design issue that might worth a mention – did you manage to figure it out at the screenshot below?
Disclaimer: This post is mainly about the author rant about bad mobile app design from the largest bank in Malaysia, but it is also a great example of don’ts in mobile app design.
It’s September 2014. Material Design was introduced few months ago during Google I/O 2014. The predecessor – Holo Design was introduced late 2011 together with the launch of Ice Cream Sandwich (Android 4.0), which is about 2-3 years ago, and it’s getting matured as time goes. It’s
probably not wrong to expect any Android apps published in the year 2014 embraced with all the lessons that we have learnt in Holo Design and craft the best Android experiences for the user.
Except it’s not for Maybank, the largest bank in Malaysia, and one of the world’s top 100 banks.
Last week, they have officially launched their revamped mobile banking app, claiming that it has the best mobile banking experience compared to the previous version. It does seems to have a refreshed design – except it’s probably one of the worst and most unacceptable mobile design that I ever seen. And it’s 2014.
Unclouded by Christian Göllner, an app that helps to analyse and clean your cloud storage (Dropbox and Google Drive, for now) has just recently out of beta, and I have the honor to work together with Christian on the design for this app. I was really impressed by the app quality when I first received the early build of the app – without hesitation, I told him that I wanted to work together to bring this app to the level of awesomeness. It is super amazing that the app has been featured by Android Police, TechCrunch, CNET, Lifehacker, and xda-developers, and these boosted our confidence about the design and development direction of the app.
In this post, I would love to talk about some design details that we have worked hard to fine tune in order to craft the ‘Unclouded’ experience that we have visioned.
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
- Use appropriate (touch-friendly) size for interact-able elements
- Need design consistency on 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?