UI Animation in Photoshop – Tutorial #1

ResultI have been using Photoshop to make UI animations for my work and it works surprisingly well (at least for me). Of course, Adobe After Effect is still the best tool to create complex and awesome animations, but with Photoshop, you can still create some simple and high quality UI animations to preview the animation idea to others. With some combination of animation properties, you can definitely create some rich animations that is sufficient for discussion. There are certain limitations in Photoshop compared to After Effects (of course!), but for someone who wanted to just use one tool for UI Design + simple UI Animations, Photoshop is one of the best tool that you can get (even if it’s not really designed for UI design).

This tutorial #1 will cover some basic procedures to create simple animations using the Timeline feature in Photoshop CS6+ (no GIMP or older Photoshop), so if you are totally new to this, I hope you will find this tutorial helpful for your first step in making UI animation using Photoshop. Let’s begin!

Continue reading

Advertisements

Crafting the Unclouded experience

Unclouded

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.

Continue reading

Unoptimized tablet experience is a missed opportunity

Tablet

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:

Navigation Drawer
Navigation Drawer
Details Screen of an Account
Details Screen of an Account

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

  • Misuse of available screen estateNavigation 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 in Tablet
Gmail in Tablet

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
Google+ in Tablet (Optimized Content Density)
Facebook in Tablet
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

Newsstand in Tablet
Newsstand in Tablet

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!

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 Tips #5

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.

Swiping between Tabs, Please

Tab Swiping

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.

Properly Handle Multiple Notifications

Multiple Notification

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.

Proper Dialog Actions

Dialog Actions

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.

Smart Use of Color for State Indication

Color 1
Color 4
Color 3

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.

Android UI/UX Tips #4

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.

Tabs should be placed on top

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.

Use Simple but Precise Words

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.

Ensure proper UI presentation

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.

 

Ensure Action Hints are working properly

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.

Android UI/UX Tips #3

In Android UI/UX tips #3, I have looked into some apps with the following UI/UX problems:

  • Hidden Status Bar (UX)
  • Outdated Action Bar and low-res icons (UI/UX)
  • Bad offline handling (UX)
  • Obstructive UI elements (UI/UX)

Hiding Status Bar? Do it Properly!

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:

  • In Landscape mode, Status Bar disappeared and there is no way to bring it back.

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

  • In Portrait mode, the black bar of the Status Bar permanently stays on the screen in Viewing Mode (only in Jelly Bean).

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!

Use the new Action Bar and High Resolution Icons

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!

Properly Handle Offline Situation

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.

Obstructive UI elements is a no-no

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!