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

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

Overscroll Edge Effect

Edge Swiping

Consistent Overflow Placement and Color

Where is my Roboto Regular?

Gingerbread? KitKat is coming out soon.

Attention to Design Details, may be?

Incomplete Hint

Spacing…

More spacing…

Not-so-smart menu expansion

Better QA, may be?

Bug!

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?

Posted on October 16, 2013 by Taylor Ling 7

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

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.

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

Posted on October 4, 2013January 29, 2014 by Taylor Ling 17

How I would further improve Yahoo! Weather App

Yahoo! Weather app just got updated and I must say it is a very nice and well done app, visually. However, if you really care about your Android users, you would have iron out some fundamental design issue (menu button of shame, anyone?) before publishing it – I would not go into more details about all the design issues, Juhani’s article has already highlighted all the design issues we saw as an Android Designer, and even offers fixes for them.

So in this rather short post, I would like to share how I would further improve Yahoo! Weather app with better Android UX:

Use Fading Action Bar
Use Official Navigation Drawer
Place Refresh button on the Action Bar (Refresh is far more important action than Add Location. Pull-to-Refresh? Very bad discoverability)
Visual cue for pages (You can see that below the fading action bar – it indicates that there are 2 locations/pages)
Removed the Menu Button of Shame
Notification Bar always shown
Settings, Rating etc – All placed in Overflow Menu
Locations come first in Navigation Drawer (It’s a weather app, who want to sign in to use it?)
Highlight the current selected location
Removed all advertisement about other Yahoo! app (Is it really needed? I don’t believe I have ever see the advertisement about Google Keep app in Gmail app.)

What do you think? Better UX or simply nitpicking?

Posted on August 16, 2013 by Taylor Ling 4

Result for Android UI/UX (Re)Design Challenge

Early this month I have organized a design challenge which welcomed anyone that are interested in design/redesign an Android app to participate, and I am really thrilled by the huge responses from the community! There are in total 25 qualified entries which is really challenging for the judges to pick the best 5 entries that deserve the 10$ Google Play Store Gift Card. Speaking about judges, these awesome people formed the judgment team: Asher Simonds, Guenther Beyer, Lucas Rocha, Juhani Lehtimäki, and Walmyr Carvalho. Huge thanks to these guys for helping me out voluntarily! And yes, I am not part of the judgment team for maximum fairness in the result.

Result

And the final result are as below. Congratulations to these people! In the upcoming weeks, I will publish posts for these 5 entries to discuss about the comments from the judges, and my point of view about them.

CashBase – Shiva Narrthine
Gmail – James Jun
Guild Wars 2 – Andre Goersch
Spiegel Online – Matthias Robbers
VK – Alex Karpilovich

Prize(s)

As promised, the best 5 entries above will win away a 10$ Google Play Store Gift Card. For all other entries that are not in the chosen 5, you guys rock too! This is why I have decided to give away 10 pieces of Android UI Design Kit Logo sticker (measured at approximately 4.5cm x 5.5cm) to all other participants to show my appreciation for your entries. Isn’t that awesome?

So everyone that participated in this (Re)design Challenge, please do the following to claim your prize:

Send an email to androiduiux [at] gmail.com with the title Android UI/UX (Re)design Challenge Prize Claim
In the email content, please include your full name, your entry title, full international mailing address and full phone number (with international codes)

That’s all! I will send out the prizes as soon as I can. Again, thank you very much for your entries and I hope to see more awesome design/redesign from you in the community! Till next time!

Posted on June 30, 2013 by Taylor Ling 4

Android UI/UX (Re)Design Challenge

Taking cue from Android Design in Action Challenge happened last year, I just feel like making another similar Design Challenge for everyone, hence this Android UI/UX (Re)Design Challenge. The aim is to create more awareness towards the importance of Android Design, and a (hopefully) rewarding experience for those who try their hand at Android Design.

Really simple rules

Anyone can participate!
Design a brand new app or redesign an existing app (any app) before 16th June 2013 (I like to see high quality works thus the longer design period)
The (re)design should use Android Design Guideline as a reference. The use of new UI elements like Navigation Drawer and Fading Action Bar are encouraged only if they fit into the app design.
At least five screens are required (in order to tell an app flow/structure). It will be awesome if explanation/justification is provided for each screen. One good example on how you can document your (re)design is the m-Indicator redesign by Swapnil360.
Optional: Feel free to post your design to any G+ 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.
Post your design entry in G+ publicly, and remember to use these hashtags:

#androiduiux #androiddesign #ADiA

Design Tools

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

Winner announcement

Five best entries will be announced via my G+ account and androiduiux.com within a week after the deadline (before 23rd of June).
All entries will be judged by professional android designers in order to pick the winners.
I will make some posts in my blog for all best entries (and probably some interesting entries) after the design challenge.

Prize

Five 10$ Play Store Gift Cards for five best entries only (from my own pocket!)
I reserved the right in prize management based on the quality of the entries.

That’s all! If you are interested, start (re)designing and submit your design entry before 16th June 2013! Waiting for your awesome entry!

Posted on June 4, 2013 by Taylor Ling 19

Android UI Design Kit for Photoshop 4.2.1 [Free Download]

Since there are some new UI elements in Android after Google I/O, I have decided to spend some time to update (and optimize) the Android UI Design Kit. There are some new UI elements added into it (and I removed some most-likely-unused UI elements). Besides that, I have also added some Quick Start PSD file that contains some main UI elements like Action Bar, Tabs, and Navigation Drawer, so the user able to choose not to start the design with the PSD file with all Building Blocks. And yeah, it finally come with Landscape orientation as well!

What’s inside for 4.2.1

UI Elements
- Added new Navigation Drawer
- Added Fading Action Bar
- Added Numpad-style Time Picker
- Removed Grid Lists
- Removed Disabled/Focused/Disabled Focused Radio Button and Checkbox
- Removed Quick Control
- Removed some unnecessary Tabs elements
- Removed Gestures
PSD Files
- Gestures
- Quick Start – Portrait
- Quick Start – Landscape (Yes, finally!)
- Portrait with all building blocks
Misc
- Loading speed should be improved slightly after removed some unused UI elements
- New Login Page with Romain Guy’s awesome photo
- New Android UI Design Kit Logo
- Changed time 😉

Download

Android UI Design Kit 4.3 for Photoshop and GIMP is here!

Posted on June 3, 2013October 4, 2013 by Taylor Ling 13