Navigation Drawer Done Right

navdrawer

With Google+ on Android just updated with new navigation menu and ditched navigation drawer, this article might not be applicable anymore in the near future for Android Design, though I don’t think navigation drawer will be phased out very soon.

Finally, Gmail on Android has been recently updated with the proper Navigation Drawer interaction pattern (the lower-level edge-swipe drawer access, as well as the Settings/Help/Feedback placement), and I am pretty happy about it because we can finally talk about consistency for this design pattern (I am aware that Google+ and YouTube on Android have yet to change).

I am sure you have (if you always look around for UI/UX articles) come across this article about how navigation drawer reduces half of the user engagements or why or how to avoid hamburger menu – if you are not, I would suggest you to read them – these are some interest reads. Although for the Zeebox case, I couldn’t fully understand the decision to go for navigation drawer – it was pretty obvious that navigation drawer is not needed, and I would probably go for the QuickReturnTabs (in the current Twitter app) to regain some of the screen estate – though it’s appreciable that their A/B testing indicates that obvious helps.

These articles (and I think there are more in the wild) suggest that side menu is a bad design pattern and avoid it at all cost, but I say – in Android Design, you can absolutely use it, but only if it’s really necessary and it’s an informed design decision.

Understand Navigation Drawer in Android

In iOS, particularly iOS7, the side menu does clashed with the navigation element (back button) at the top left, as well as the edge-swipe that will act as back (which is not consistently implemented in all Apple apps if I am not mistaken, correct me if I am wrong), however, this is not the case with Android. The navigation drawer for Android is much more sophisticated where the edge-swipe is reserved for accessing the navigation drawer at any lower-level screens (discoverability could a problem here I know), making the top level navigations slightly easier and more accessible even though you are at the deeper level in the app structure. This potentially eliminates the Platform Navigation Pattern Clash mentioned in Luis Abreu’s post (of course he meant in the iOS7).

Information Architecture (IA) optimization

I do agree with Luis Abreu about Information Architecture optimization when you are tempted to use Navigation Drawer for your app – Navigation Drawer isn’t simply an answer for every navigation need. It is always good to rethink from a high level perspective about the app structure to find out whether the navigation can be made a little bit shallower by removing any unnecessary level/information that doesn’t help exposing the important content to the user – in Android Design Guideline, there is a pretty nicely written recommendations for app structure.

Do it right

Example

However, if it’s really necessary to use the navigation drawer as the top-level navigation pattern after careful consideration, just do it, and do it right. It’s not that I do not encourage variations (which is great for a platform), but for UI elements that involved heavily with interactions, it will be always good to stick with the one that is recommended in the design guideline for consistency, familiarity and predictability. We always want the user to ‘learn once, applied everywhere’, especially from an Operating System point of view – I hate to say this but it’s part of the responsibility of the Android developers and designers to help pushing this established* consistency so the user will have less interaction friction when they are shown with a specific UI element. The faster the user able to operate the app and achieve what they want to do = happy user.

*I know some of the Google apps are still yet to be consistent with the latest changes in navigation drawer, but I am sure they are working on it. Mind you that navigation drawer has come a long way and it takes time to get things right (I wrote about this back in 2012)!

“What’s out of sight, is out of mind.”

In Anthony Rose’s article about Navigation Drawer and a tweet by Luke Wroblewski below shows that when the navigation pattern is less obvious, the user engagements reduced (although I am not sure what’s the parameters in Luke’s chart).

Sure, for some, these statistics seem worrying – but I don’t think we have yet to see the whole picture in these examples. What does the reduced user engagement means? Does it mean they don’t explore the app anymore or it simply means the first screen (home screen) is already sufficient? Does it mean that the user accomplished what they want to do with the app much faster (with lesser distractions) and thus less engagements? I would probably see this as an achievement if my app is meant to help in productivity because it might means that my app helps the user achieve thing faster.

While I fully agree that we should keep “what’s out of sight, is out of mind” as one of the design principle, but it doesn’t mean that we have to show everything as long as we can, because every UI elements play different role during the user interactions and each of them have it’s own unique importance.

So next time when you come across the use of navigation drawer, make sure it is really necessary to do that – and the new Google+ app just show that Navigation Drawer is not really needed sometimes.

Advertisements

Result for Android UI/UX (Re)Design Challenge 2.0

android-design-challenge - result

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!

The 10 Winning Entries

Below are the 10 winning entries, together with the selected comment from the judges (not in any order):

Chris Basha – Dribbble

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 🙂

Elad Izak – My Battery Saver

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.

Andre Goersch – RunPee

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.

Cole Chamberlin – Eve Music Player

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.

Alexander Karpilovich – Kinopoisk.ru

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.

Evgeny Belyaev – Evernote

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.

Swapnil Chitnis – Project Throne

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.

Paul Forgione – Kho

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.

Sean Smith – HBO Go

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!

James Jun – TweetLane

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.

Two points:
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!

General Impression on the Entries

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:

  • General quality of the entries are satisfying (though it can be better!)
  • The Android Design Community show signs of maturation
  • Scalability (read: responsiveness) of the design, most of the time, is not considered
  • Lack of tablet-centric design
  • Entry need to be a complete story/flow to capture the overall UX rather than just a few screens

These feedback are great for me to prepare for the next one (if there is one).

Prizes for the Winners

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! 

How I would Further Improve Mailbox App

Mailbox

The famous Mailbox app in iOS has finally arrived for Android users, and again it’s a very disappointing move from a company under Dropbox. It’s fine (actually not) to have the Android platform as the second thought of your app/services, but why some of these companies doesn’t just show some Android love by making things familiar and easy for Android users?

I am sure I will hear ‘Taylor, it’s about consistency. Our PdM requested to make it looks all the same across platform, so people gets familiar instantly! And it also provide consistency in the branding and marketing!’. My ass.

My Redesign Suggestions

  • Go consistent with Android UI patterns and building blocks. You can keep some of the unique elements while not breaking the Android Design Guideline.
    • The user of navigation drawer indicator (change color depending on the page)
    • Use the tab style in Android
    • DON’T block the notification bar by your syncing/refresh/whatever you call bar. Just use crouton to display the progress in-app.
    • May be use path-tracing for the loading indicator?

Inbox

  • The color of the elements can be consistent to the different screens, so it keep that uniqueness in mailbox.

Later

  • Check Confirming and Acknowledgement page in Android Design Guideline. Positive (Delete in this case) action should be always on the right side.
  • Why control the user behavior? So now I can’t write a draft when I have some free time? Why the force of deletion?

Delete Cancel

  • Being a mailbox app that encourages users to organize their mails in different categories (read, dismiss, list, later), I find it really strange to place those actions on the top. Once you finish reading the mail (most of the time), you focus will be at the bottom part of the screen, and it’s way easier and natural for the user to reach the buttons at the bottom for organizing the mail.

In Mail

Since they have hacked around to make certain things work differently from what Android has to offer (like the notification bar on top of your notification bar), why not spend a little bit more time to polish it up for Android users?

What do you think?

Android UI/UX (Re)Design Challenge 2.0

Android Design Challenge 2.0

After a successful Android UI/UX (Re)Design Challenge last year in June, I have been occasionally received inquiries on the second one, as well as some industrial feedback on such design challenge. This is one of the feedback I got:

I ended up hiring one of the finalists in last years competition.  I hired him to do a bit of freelance work on an app I’m building – so it would be good to give similar encouragement to upcoming designers.

Frankly, I didn’t expect that. The aim to make such design challenge is always meant to create awareness towards the importance of Android Design, and it seems to go beyond that – it’s totally awesome! This is why I decided to make the second one, namely Android UI/UX (Re)Design Challenge 2.0.

But first, I have to apologize to all the participants last year for the undelivered Android UI Design Kit Logo stickers – there has been some issues with the sticker quality and hence I decided not to ship any of them. I will look into options this year to make good quality sticker (any suggestions?) and I will send them out again.

Really simple rules

  1. Anyone can participate!
  2. Design a brand new app or redesign any existing app by 18th April 2014
  3. The (re)design should use Android Design Guideline as a reference. Only use appropriate UI patterns and building blocks for your design.
  4. At least 5 screens are required (in order to tell the app flow/structure). Please provide comparison/explanation/justification for each screen. A good example of the design entryDon’t let us guess! I repeat, don’t let us guess! 
  5. App icon can be redesigned to match with the new UI (re)design.
  6. Optional: You can design for the Android Wear version if it meet these design principles. If it’s not, don’t do it!
  7. Optional: Making animated UI design (in animated gif or video) is encouraged, but it will not have huge advantage in the judging system.
  8. Optional: Feel free to post your design to any Google+ Android Design Community (including Android Designers) to get feedback and further improve your app (re)design before your final entry. It’s always encouraging to see such design iterations which involved communities.
  9. Post your design entry in Google+ publicly, and remember to use these hashtags:

#androiduiux #androiddesign #ADiA

Submission

  1. Submission of the final entry must be sent to the email address androiduiux [at] gmail [dot] com (so I know which is the final entry if you have multiple revisions)
  2. The title of the email should be Entry for Android UI/UX (Re)Design Challenge 2.0
  3. Send me the link to the final entry in a public Google+ post (or any link that can be viewed publicly)
  4. I will then send you the confirmation email to acknowledge your design entry

Design Tools

  1. Feel free to use any design tools that you are comfortable with, as long as the final result are high-fidelity mock up screens.
  2. If you are looking for some design resources to start, check out the Free Design Resources page

Winner announcement

  1. Five best entries will be announced via my Google+ account and androiduiux.com after the deadline. They will be also informed via email.
  2. All entries will be judged by awesome android designers in order to pick the winners.

Prize

The 5 best entries will walk away with:

  1. Domo Arigato Mr. Roboto T-shirt. This is a new T-shirt campaign that I just launched for Android fans. If the Teespring campaign is not successful, I will print these T-shirt myself and ship them accordingly.
  2. 10 USD Google Play Store Gift Cards. You can request to make it a Paypal transfer if the Google Play Store Gift Card in USD is not usable due to the difference in region/currency.
  3. I reserved the right in prize management based on the quality of the entries.

Credit

I would like to thank these people for their awesome support:

That’s all! If you are interested, start (re)designing and submit your awesome design entry by 18th April 2014!

How I Would Further Improve Camera Awesome for Android

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:

  • Complete (old) iOS design in Edit screen and Settings screen
  • Used elastic feedback for overscroll together with overscroll edge effect (I don’t think they understand what’s that for)
  • Switching between screens have no hierarchical transition effect (feels like I am using some mock ups)
  • Used the (old) iOS style Share button (I am not really sure when this can be stopped)
  • Strange Share intent

My Redesign

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.

DefaultOptionsEdit

Settings

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.

Sure, Camera Awesome team, I know it wasn’t easy, but I don’t think it’s that hard either.

How I would further improve Feedly App

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?

Android Design, may be?

Navigation Drawer Indicator

Nav Drawer Indicator

Overscroll Edge Effect

Overscroll

Edge Swiping

Edge Swiping

Consistent Overflow Placement and Color

Overflow

Where is my Roboto Regular?

Font Type

Gingerbread? KitKat is coming out soon.

Settings

Attention to Design Details, may be?

Incomplete Hint

Hint

Spacing…

Menu

More spacing…

Padding

Not-so-smart menu expansion

Scroll

Better QA, may be?

Bug!

Time Machine

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?

Android UI Design Kit for Photoshop and GIMP 4.3 [Free Download]

Android UI Design Kit 4.3

Today I am happy to announce that Android UI Design Kit has been updated to 4.3, and this is my most complete design kit for Android Designers/Developers to date. And awesome thing always comes in pairs:

  • Supports Adobe Photoshop and GIMP
  • Nexus 4 and Nexus 7 (Basic) Design Kits
  • Both Nexus 4 and Nexus 7 have Portrait and Landscape Templates

Other than that, there are also two new files in the Design Kit: An Android Holo Color Collection swatch (complete with all different levels), and a document containing link to some libraries for development. One of the reason to include such document is to introduce the Android UI Design Kit users about some nifty libraries that the developers can use to achieve the design in the mock up — which hopefully can easily synchronize the design idea between the designer and the developer.

What’s new in 4.3?

  • Building Blocks (Nexus 4 version only)
    • Settings Page
    • Font Size Reference to Developer
    • Empty State Examples
    • Showcase View (Works only on Photoshop version)
    • Random Text List Styling
    • New Date, Time, Color Pickers
    • About Page
    • Cards Library
    • New Stacked Tabs (Similar to Google Play)
    • Glass Action Bar (Photoshop only)
    • Contextual Action Bar
    • Search Action Bar
    • Wizard Pager
  • Files
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Building Blocks
    • Photoshop PSD (or XCF for GIMP) of Nexus 7 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Gestures
    • PDF of Link to Libraries
    • Holo Color Swatch (Photoshop only)

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Since both Nexus 4 and Nexus 7 template are now in xhdpi, some of the UI elements can be easily reuse with minor adjustment
  • You can only create awesome mock up from this Android UI Design Kit

Price

Initially I was very tempted to charge for this new update since it does taken up part of my free time, however, I changed my mind eventually — I wanted this to be used by everyone that is designing Android app using Adobe Photoshop (and now GIMP), either professionally or as a hobby – so charging a price might be able to grab me a cup of coffee or two, but I am more obsessed with the download number (can you believe that?) and the social connections I made from providing this download. So it will be remain as a Free Download.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the energy to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, I have made this new Design Kit available at my MediaFire account. File size is larger this time around, but I can’t seems to compress all the awesomeness to a smaller archive size.

Android UI Design Kit for Photoshop 4.3 (~30MB)

Android UI Design Kit for GIMP 4.3 (~20MB)

There is also an updated Android UI Design Kit for Photoshop 4.4 at Nexus 5 resolution (1080×1920), so if you prefer to design in a larger size with latest UI elements, grab that as well!

Android UI Design Kit for Photoshop 4.4