Unoptimized tablet experience is a missed opportunity

It is first started as a simple Google+ post after I saw the refreshed UI of Bank of America app which probably looks OK on the phone, but terribly on the tablet device, and I thought this topic actually worth a ~~short~~ blog post. Well, let’s first have a look on some screenshots of the refreshed UI of the mentioned app:

There are obviously many UI/UX improvements that I can suggest, for example:

Misuse of available screen estate – Navigation drawer is not done right and taking away too much of the core experience of the app – navigation drawer is meant to be transient. Also everything looks stretched-out and blown-up which make readability and glanceability become really bad.
Lack of Pure Android Experience – It’s 100% iOS experience – Tabs at the bottom, right caret, iOS top bar etc. There are certain UI and interactions elements really unique to Android to provide the user the best and pure Android experience, and this shouldn’t be taken lightly if you care about the user.
Lack of attention to details – Even for an untrained eye, it’s pretty obvious that the icon and text wasn’t aligned in a proper way – Mind the gap.
Terrible tablet experience – Rather than a blown-up version, a multi-pane layout should be already considered if tablet is meant to be supported.

Unoptimized tablet experience is a missed opportunity

We are currently living in a multi-screen world that we are no longer performing daily activities only on the computer, but also on the smartphone, tablet and TV. Of course, this does not apply to every single activity, but most of your digital activities can be done on any devices, and thus, there is always a chance that your user will try to accomplish a task using your app/service with any screen at any time. Unoptimized tablet experience would mean a missed opportunity – for the brand, for the customer experience, and for the customer loyalty.

And with the huge market share by Android tablet, it is probably no-brainer to pour in a little bit more efforts to optimize the tablet experience (unless your app/service does not make sense on the tablet at all) because tablet has penetrated in many users’ live faster than you could imagined.

What’s make a good tablet experience?

Make full use of available screen estate

Gmail app is a great example showing that multi-pane layout works really well for tablet, especially for apps that have a list/grid view and a detail view. This will enable the content navigation for the user while still provide the full experience on the content details.

Optimize the content density

*Google+ in Tablet (Optimized Content Density)*

*Facebook in Tablet (not-optimized content density)*

With the available screen estate, especially the horizontal screen estate in Landscape mode, it is crucial to optimize the content density to show the user more information on screen at one time. Of course, this doesn’t mean that you have to show the information as dense as possible – finding that balanced density is very important (and tricky) – and this optimization must be able to enhance the content consumption experience (the user consume more information with the same amount of effort compared to small screen devices), and if it’s not, it is probably mean that the content density optimization doesn’t work. It is important to design the app with great tablet experience for the user to appreciate the screen estate available on the tablet, not just treating it as an enlarged phone. Compared to the Facebook app, Google+ able to show more information at the same time, fully utilize the available screen estate.

Cares about content consumption quality

If you look at the screenshots of the Bank of America app, you will find that you will have some difficult time to connect the information on the left and the one on the right, because the readability is not optimized due to the stretched layout, causing the severe disconnection between the information on both sides. In the above screenshot, it is a good example showing why you should not fit the content (especially texts) as much as possible because you would also want to make sure that the readability is great (here, of course, we talk about the optimal line length), so the user can have great experience during the reading (or content consumption).

Tablet experience should not be an afterthought

If you app will be used by tablet users, always design the app with tablet experience in mind (as shown above) and make full use of responsive design. Besides that, Android team has written a nice checklist for tablet app quality, so you definitely need to go through it to ensure that you are providing the best quality and experience for both phone and tablet devices.

I hope this post is able to inspire and motivate Android developers and designers to optimize the tablet experience and it should not be an afterthought in app development. If you have any comment or question, feel free to leave it at the Comments section, and I should be able to respond accordingly.

More high quality tablet app!

Navigation Drawer Done Right

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

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).

Obvious always wins. pic.twitter.com/3mggyCypmS

— Luke Wroblewski (@lukew) April 11, 2014

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.

Posted on May 20, 2014May 21, 2014 by Taylor Ling 8

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

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!

Posted on April 30, 2014May 1, 2014 by Taylor Ling 2

How I would Further Improve Mailbox App

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?

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

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?

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.

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?

Posted on April 10, 2014 by Taylor Ling 5

Android Wear UI Design Kit for Photoshop 0.1 [Free Download]

As you might have aware, Google has announced Android Wear specifically designed for wearables, and I am really excited about it – new form factor and new UI/UX to explore (and the sexy Moto 360).

I was playing around with mock up on a small app called Haze Watch (to monitor Haze condition in Malaysia), and it’s really fun – with that very limited screen estate, it’s really important to only show crucial information that is meant for a glance, not read – and this design principle is well explained in the official Design Guideline. I am really looking forward to see how Android Wear change the very new wearables market, I guess exciting time ahead?

Android Wear UI Design Kit for Photoshop 0.1

Then I was thinking, why not a simple design kit for those who want to play around with this new form factor which has a very small screen estate? So I decided to make one very simple Android Wear UI Design Kit for Photoshop. What you can expect from it:

2 Adobe Photoshop files – Square (280×280) and Round (320×320)
A few different layout like Incoming Notification, Notification Stack, Contextual Card etc.

That’s it! It’s not meant for accurate mock up as of now since I don’t have the design specs, but it’s good enough to play around and get prepared for the next wave.

Download

You can download it from my Mediafire account Android Wear UI Design Kit for Photoshop 0.1. For the round one, it goes really well with Spiderfly Studio Moto 360 Mock Up tool for Photoshop (though you might have to do a little bit of resizing)!

Posted on March 19, 2014March 19, 2014 by Taylor Ling 5

Android UI Design Kit for Photoshop 4.4 [Free Download]

Happy New Year folks! In the past few weeks, I have worked slowly on the new Android UI Design Kit for Photoshop 4.4, which is a Nexus 5 version, and today I am happy to announce that it is ready! This time it only comes with Photoshop version though, I am still working on the GIMP version, mainly on replacing the text layers (which I just found out recently the text layers from Photoshop won’t work in GIMP!). If there is any GIMP gurus would like to help out replacing the text layers, do let me know in the Comments section.

This update the Design Kit to Nexus 5 resolution (Portrait Mode – 1080×1920), with several new building blocks added in it.

What’s new in 4.4?

Action Bar – PullToRefresh
Action Bar – NotBoring
HoloGraphLibrary
Scroll Bar
Search Action Bar
Contextual Action Bar

Other than that, every building blocks from the previous version are included, making it the most complete Design Kit to date.

Tips

You must first install both Roboto and Roboto Slab fonts before using the Design Kit. It’s a must. If you doesn’t want to install them, you won’t be able to use the Design Kit at full potential.
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
Nexus 4 and Nexus 7 Design Kit is available in the previous version

Price

Free. As I mentioned previously, getting every designers to use this and create awesome high fidelity mock ups will already be a very good motivating factor.

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 chakra to produce awesome stuffs for the community.

Download

As usual, the Design Kit is made available in my MediaFire account. Go get it and be awesome!

Android UI Design Kit for Photoshop 4.4 [Nexus 5] ~14MB

If you are using GIMP and wanted to use the WIP version, feel free!

Android UI Design Kit for GIMP 4.4 [Nexus 5][WIP] ~9MB

Posted on January 10, 2014 by Taylor Ling 28

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.

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.

Posted on November 13, 2013 by Taylor Ling 10