Material Design is the new design language from Google. This is a very exciting moment for Android—the new Lollipop release has put the platform in a mature position. Material Design is not just another update. There are no more excuses for bad user experience: developers and designers now have all the tools available in order to create beautiful experiences.
For the last months we’ve been working on The Sun Mobile for Android and we couldn’t be happier about the results. If you are one of the readers of The Sun, your days just got better: we’ve just published a new update to Google Play with a lot of love for the Material Design principles. We thought it’d be useful to share what we’ve done and the reasons behind the decisions we made.
What did we focus on?
Updating your current application from Holo to Material is not a trivial job. There are many things to take into account, but there is one which is by far the most important, that is your users.
The main reason why you should update your app is not for being cool, the main reason why you should update is for your users. The second most important reason, you ask? Yes, I’m sure you got that right too, that’s your users again. Material Design offers a lot of different patterns that will make your users’ life easier, help them finding content faster and reward them with a great experience.
It’s not about adding all the new features at once. The vast majority of our users are running KitKat (and our
minSdk is Jelly Bean), that makes things easier for us in terms of updating the app. The previous version was fully compliant with the Holo design language, so our users were already familiar with the patterns introduced.
In our case, the main aspect we wanted to improve was the access to the content. The navigation was done via the “Navigation Drawer”, and that made things a bit complicated for the users when there were a lot of categories to navigate. Makes sense then to focus on that first, and find ways of improving it.
The Navigation Drawer
Much clearer, don’t you think?
Following the Material Design guidelines, sizes, paddings and fonts have now been updated. We’ve basically removed one level of information from the Navigation Drawer, and only left what amounts to the top level navigation between Sun+ contents. All those categories still need to go somewhere … but where?
There’s not that many places we could move the categories index to, and since
Spinners are not cool anymore (if they ever were), the most obvious thing here is using a
So what’s happened here? One can notice that the Spinner has disappeared, leaving a clean and branded
Toolbar. Having all the categories makes it much easier to navigate through the content and accessing all the news.
Small changes can make a big impact
It’s all about the details—that’s what really makes a difference and this is where we tried to make the biggest impact.
This is the icing on the cake. The status bar is transparent with 20% black colour, that makes it to appear darker in comparison to the
Toolbar. By animating the change from one colour to another, we also travel with the user from one category to another. It’s not just about moving from one section to another, it’s also about the journey.
Instead of the old Pull to Refresh we’ve now moved to the new
SwipeRefreshLayout. Yes, you’ve seen that right, the colour also changes whilst navigation from one category to the next one.
The sort of quick return pattern is also a pleasant surprise, allowing more space to the content. Inspired in Google Books, we try to hide and show the
Toolbar just when it’s important to the user.
Keep it simple and prioritise
There is so much room for improvement here: animations, shared elements, etc. Thanks to the new set of APIs and new libraries like the amazing
Palette, we can’t wait to start improving and get the most of it. For now, this is not an all or nothing, only the most important and valuable features will be added. The guidelines are there as a reference. It’s not a design checklist, just implement what really matters to your application and to your users.