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.
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.
After taking some times, we finally have the 10 winners from all 42 entries! Congratulations!
No, it wasn’t an easy task to pick the winners – it won’t happen without the judges involved that basically spent hours to look through all the entries and place their scores and comments on them – Thank you! And to those who doesn’t make it to the winner list this time, don’t be disappointed – it doesn’t mean that your entry is bad – go on, apply some tweaks and make it happen!
Below are the 10 winning entries, together with the selected comment from the judges (not in any order):
Awesome stuff. Great work wielding Android design language with some unique taste that feels completely at home. Using an Instagram-esque presentation of content makes sense (I’d do some recon on whether this is true) and the suggestions stream is epic – all about the content. The app has a good balance that caters to Prospects and Players alike – perfecting this experience is crucial.
Only things I can call out are the crowding of content on the Item view. The image is the most important piece of the screen and shouldn’t be covered by anything. At the very least the AB should disappear as soon as the view is loaded.
Besides that and some tight text on the Designers view, this is a great v1 and should be started immediately 🙂
Sweet. While this is taking quite some inspiration from Timely, it’s a joy to just look at those colors. The app’s purpose seems simple enough, to use the visual layer for clean beauty. Make it a reality.
The app design is clear and clean. Developers will be happy to see this design. I have concerns about scalability of this design though. Going to larger screens will take a lot of rethinking with some screens but would probably be possible.
Brand and Android UX blend together nicely as well.
First off, great presentation of thought through the deck. This is really important because it helps relay meaning but also forces you to really consider the reasons for your choices.
Overall, this is a fresh presentation that balances native patterns with unique layouts and interactions. I think gestures are a great idea. They can be a double-edged sword however – the next step for this would be some user testing to make sure things are clear and fit the app’s desired use scenario (sitting on the couch vs running, etc.)
Polished to a near-shine – I’d fiddle with the action bar a bit more. GREAT WORK.
Great Androidy update to the original UI while keeping the brand. The design also looks very scalable to larger screens.
I’d reconsider transparent navigation bar and status bar use though. In this app there’s no added value of using them.
Great redesign. Evernote feels a lot clumsy on the current version, I would use it again if it looks like this work. I would considerate to not use Roboto Slab everywhere, but it’s a better look and feel, definitely a improvement over the current app.
I like this a lot. Finally someone who adds some unique branding to the mix, without sticking too hard to the guidelines. It’s clean, it’s clear, it’s fun and it’s Android.
Any experience that helps manage my medical needs without bringing the “serious medical issue” aura to light is a winner in my book. This presentation is simple and follows the guidelines while staying unique. It feels more “human” than analytical which is especially important for a daily use app.
Only a tad more polish on things like the graph labels and scrolling blocks/buttons at the bottom and you’ll have something realllllly great.
Then we have (finally) a great use of KitKat immersive features here, you can see the ActionBar but the opacity trick make it beautiful, specially the home screen with pictures and stuff. Love the animations to show UX interactions, great presentation!
Great work simplifying the app. Some apps try to be everything and that doesn’t always work out. The focus on content and getting everything else out of the way is a good goal.
The little flourishes like the bird moving with refresh is great – these bits of polish differentiate and delight.
The tweet button is nice, although it gets a little lost and covers content. Consider making it the prominent blue and hide on scrolling down. The compose view could have a tad more queue that it is the input box and not just an expanded button.
I’m a little concerned the menu view will be difficult to find, so some user testing and feedback will be needed to confirm its placement.
Nice, simple, and clean!
I received a lot of great feedback from the judges and sponsors for the design challenge this time – below is the general impression of the entries:
These feedback are great for me to prepare for the next one (if there is one).
As promised, each winner will walk away with a Domo Arigato Mr. Roboto T-Shirt at the selected size, and a 10 USD Play Store Gift Card (or 10 USD Paypal cash). The T-shirt has been ordered and it will be shipped once it is printed, and I will email the winners for the Play Store Gift Card.
Thank you and I hope everyone able to grab something from the design challenge, and if it’s all possible, I will definitely make the third one next year!
Minna, Domo Arigato!
Camera Awesome, a famous camera app in iOS has finally arrived at Play Store for Android users after 20 months of hard work — and it has made a lot of disappointed people, especially those who cares about Android Design (1, 2). I appreciate the hard work that the development team poured into the app, but with 20 months of development time (which they have blamed the fragmentation in Android), I would really expect something meant for Android users. The app itself is almost completely made with skeuomorphic design (I do not against skeuomorphism, but I personally think that flat (or almost flat) design are better one in digital world), which is a completely port from the iOS version in terms of UI and functionalities.
It wasn’t just us Android Designers reject about this, but look at the comments/reviews from the users — they are just going to further strengthen something we are always talked about — users are rejecting Android app with iOS porting, especially when the UI/UX is almost a blatant copy of the iOS version. Further more with this UI, it doesn’t looks too fitting on the iOS 7 which has been refreshed with flat UI design too — probably the designers in the team doesn’t work hard enough.
I understand that this is a 1.0 release, but with 20 months of development, I really expect an almost-polished app. Besides the skeuomorphic design, there are a few things that I really hate:
Below are some redesigned screens showing that the functionalities and the layout doesn’t need to be changed, as long as it is designed for Android (ideally with flatter design) and using the right UI patterns. Sure, I must admit it does looks a little bit similar to iOS 7 stock camera, but even with this design, I will already be a happy man using this ‘awesome’ camera app.
What do you think? Do you like the iOS UI porting or you would prefer a design meant for Android users? I hope you would say the latter.
Feedly is such an app that I love and hate at the same time. I love the way they deliver my news feed when I need them every morning, and the ‘Swipe to mark as read’ and ‘Pull to close’ gestures almost built into my thumb. But I hated them as well. They always look into new idea and fresh design in their app — which isn’t a bad thing at all — but it’s really disappointing to see that they are still ignoring to adhere (or may be should I say, refer) to the Android Design Guideline, that can potentially enhance the user experience even more for Android users.
Sure, there was an seemingly awesome update from their Android team, but this is the one that get on my nerves and I feel the need to rant about it. So how I would further improve Feedly?
Sure, you can call these nitpicking over small details, but every details are design, and every details count. This is what can make your app great or break. And to me, as a user, I have a feeling that Feedly app is always in the beta stage that never complete, pretty much like Siri in iOS.
Perhaps it’s time to look for a better news feed reader that uses Feedly API. Suggestion?
Another month, another UI/UX Tips article! This time I looked into the swiping action between tabs, proper handling of multiple notifications, proper dialog actions, and some smart use of colors to indicate different states.
I think this has been mentioned many times by Android Developers Team, as well as some Android Designers. If you are using tabs in your app, please please please, make sure they support the swipe gesture. It is a system-level interaction pattern, and it is clearly mentioned in the Android Design Guideline. Your users won’t be happy to realize that they can’t swipe to change tabs, which is extremely useful when the device is used with one hand.
In a previous version of Google Drive, when you try to upload multiple files in a session, you will get the notification spams (shown in above image), fortunately, it has been fixed in the latest update. If your app can create multiple notifications with some user actions, please make sure that they are handled properly – group them and show the relevant information.
Sometimes developers/designers tend to overlook the actions available to the user in a dialog. In this shown example, when I was shown with this dialog, I have no way to confirm my selection of font unless I press the Cancel button. This is very confusing for the user, and definitely not designed according to the Android Design Guideline. Ensure that whenever there is such selection dialog, dismissive and affirmative action buttons are there for the user.
Above shows some great examples from recent updates for Google Current and Google+. These are very subtle, yet informative approaches to notify the user about the state, so do consider for such approaches whenever your app requires to give the user some information/feedback regarding the state of something in the app. I really like these!
That’s it for this Android UI/UX Tips! Feel free to share around if you find these information useful, and as always, hit me with comments if you have any.
It has been a while since the last Android UI/UX Tips, but I still continue looking for things that can be improved whenever I have some time to find them or actually experiencing them myself.
I am not sure if I can say I am happy with the release of Android 4.2 in terms of UX, especially with the decision to include the Quick Settings panel that isn’t much useful, and a strange bug on the date picker for Contacts app which should be fairly simple to detect if the testing is done thoroughly.
In any case, let’s look at some UI/UX tips that I would like to share.
In Android Design Guidelines, it has clearly suggested that tabs should not be placed at the bottom, since it is a very iOS UI element and doesn’t fit in too nicely in Android interaction behavior.
However, looking at the recently released Beta build of Echofon – there you can find the ignorance from the development team.
One of the main justification for placing the tabs at the top is that the user will have hard time to see which tabs he/she is currently in while swiping across the tabs (try it on a phone device). Juhani also written a great article few months back to justify the placement of the tabs should be at the top.
So my advice, try not to ignore the guideline and do not invent new UI element that doesn’t help in enhancing the UX.
Sometimes it is unavoidable for developers/designers to add some words to explain certain things in the app, like instructional guides or options in Settings page. However, it is not hard to find some bad examples in the apps world, either they used long but unclear explanations, or some simple words that simply can’t explain clearly for certain options/features in the app.
One example that I would like to show here is the new Gmail app that comes together with Android 4.2. If you are an early adopter of Gmail app version 4.2, most probably you are aware that it finally has a pinch-to-zoom feature for the email content. However, it is not turned on by default. And what’s really surprising here is that even the option to activate that feature is in the Settings page, many (including myself) have overlooked the existence of this option. Some might blame themselves for the overlook, but really this is actually an UX related issue.
The words that they used to explain the option isn’t something really straight to the point – especially the word ‘auto-fit’, I am not really sure if there is anyone familiar with it. The further explanation might clear the confusion a little bit, but definitely it can be improved. I am sure if it change to Pinch-to-Zoom Content with the explanation Automatically fit the message to the screen and allow zooming, 90% of the people who overlooked this will be able to turn on this feature without having a doubt, and it is also clearer to any new users, I supposed.
Therefore, simple but precise wordings/messages to the user is the key to avoid miscommunication or feature overlooks.
It’s a pity that the stock Email app doesn’t get any updates ever since ICS (at least I am not aware any of them). In Android UI/UX Tips #1, I have questioned on the navigation buttons in the app, and now I have found more things that can be improved during my daily usage.
If you need a borderless button in the middle of UI (in this case the Email app), please make sure that the user should be able to press it anywhere along the entire button area, otherwise if you would like to make it work only on a specific area, remember to use a vertical separator. Gmail app is doing this absolutely right.
While it doesn’t seems to be a crucial feature, but I would really make sure that the Action Hints are always working correctly, showing the helpful hint to the user about the iconized buttons.
In Email app, when you long press on the navigation button, it actually show the Action Hint toast box without any text in it. This should be avoided – it doesn’t provide any helpful hint to the user and it doesn’t give any good impression on the app quality either.
That’s all for this Android UI/UX Tips! As usual, hit me with comments if you have any.
In Android UI/UX tips #3, I have looked into some apps with the following UI/UX problems:
Some of the app designers/developers didn’t realize that the Status Bar is actually part of the System Bars, therefore if you decided to play around with it to get the maximum screen estate for your app, you have to do it right.
Let’s take RepliGo Reader as the first example. The app is actually pretty good in terms of features and UI, but I didn’t quite like the way it handles the Status Bar. It only allows the user to choose between Always Hide or Always Show option during Reading Mode, which is kind of limited. If they can also include a Show/Hide Together with Other Controls option, then it will be a pretty great user experience, and this should be the default behavior. Look at Google Play Books app, it handles the Status Bar nicely.
Another app that worth mentioning for this issue (which actually bothers me since Jelly Bean) is the stock Gallery app in Jelly Bean. This app has two issues with the Status Bar:
This is one bad UX example in stock app. Given the importance of the Status Bar in Android device, my suggestion is don’t hide it in any screen mode unless the user is well aware of some method to call it (tap anywhere to show it, for example).
I am not too sure if there is anyone noticing this but this is pretty frustrating for me. I have been using Gallery app to view my app mock up in full screen (which I just need to trim off the bottom Navigation Bar), and it doesn’t work anymore because the black bar of the Status Bar is now taking up the Viewing Mode space as well. Thus, if you are going to hide the Status Bar in your app, hide it completely!
With the release of the awesome ActionBarSherlock library that allows the developer to implement the ICS/JB Action Bar with full compatibility from Android 2.x, personally I am not too sure why there are tons of great apps still decided to stick with the older (and less aesthetic) Action Bar design and/or low resolution icons. Besides making your app feel aged, it doesn’t give any good impression to your user if your app using lower resolution icons – remember, Action Bar is one important UI element in Android Design which is always visible to the user. Some examples below (I am sure you can find more):
So, forget about the old Action Bar and start designing/redesigning/developing Android app using new Android Design!
It’s true that most of the apps nowadays require internet for their full capability, either to get new information or for syncing purpose, however, we cannot expect our user are always connected to the internet, therefore you have to properly handle the situation when the device goes to offline.
I had this issue with The Verge app which actually crashes when I try to play around with the app offline. Definitely not a user experience that you would like to introduce into your app. Handle it with a simple toast or a warning message regarding the offline status would have solve the issue.
It is so awesome that Android developers have numerous of great libraries for certain UI elements implementation, but once you have used those libraries; you are basically responsible for everything that you decided to show to the user.
One bad example of this is, again, The Verge app, which shows the Pull-to-Refresh indicator and overlapped with certain UI elements in the app (one of the examples shown above). I am not too sure the complexity in technical terms, but I assume it won’t take months to remove it? Publishing your app in such condition will only give bad impression for your app overall quality.
Hope these UI/UX tips help! As usual, don’t hesitate to leave your comment!
Feel free to drop me some link for any awesome resources for Android Designers and Android Developers!