Google Finance Redesigned

I have been thinking to redesign Google Finance app for a quite some time since I think all Google apps should have at least adapted to Holo Style UI, and I think there are still quite some number of users for the app (unfortunately not me because it doesn’t support share market of Malaysia), but I didn’t quite find the time for it. However, last Android Design in Action episode has put up a challenge to all Android developers/designers for some redesigned screens of any current apps, and that motivated me to continue working on this redesign despite of the really packed schedule.

The current Google Finance app is really ugly, which looks like a web-app rather than a native app. The graph is not loaded at the proper size, old Android UI elements are still there, and the ugly legacy action overflow. Therefore a redesign is definitely required.  And the objective is pretty straight forward: Make it a clean and nice app to be used by every user levels. Therefore I tried to preserve the familiarity so the existing user will not have to re-learn the new UI while still providing a refreshed UI compliant to Android Design Guideline. Here’s my take:

What do you think? Shot me in the comment box 🙂

If you want to see some comparison shots between the current version and my redesigned version, I have posted them in my G+, feel free to comment there as well!

Holo Planning Poker

Planning poker (not sure if it’s still commonly used now?) shouldn’t be a stranger for you if you work in agile software development environment. During the estimation practice today, I suddenly have the idea to make a really simple concept app that simulating the planning poker cards for use during the estimation.

The concept app is really simple – I used the card UI for the poker cards, so in order to change the card, you just need to swipe left or right. The card will just show the number in sequence and nothing else. It comes with light and dark themes.

I have a feeling that this app is really simple to develop, any taker?

After 48 hours, the concept app become a reality thanks to Mark Mooibroek! You can download it now in the Play Store.

Password Manager Redesigned

During the 25 billion app downloads celebration at Google Play Store, I noticed mSecure – Password Manager was in the 25 cents list, and after I reviewed the screenshots, I immediately buy it – not to use it (at this moment), but to redesign it. It really surprised me when I found out the app is actually selling at $9.99 with this pretty dated and ugly user interface (and possibly bad user experience).

So I started to play around with the app, and as expected, I got really frustrated using the app even though I am just trying to do some simple stuffs – a redesign is definitely required. I start sketching using my GUI Sketching Kit and transfer my sketching to the digital version, and it was pretty fun! It turns out to be pretty inspiring, and I am actually thinking to work with some great developers to make this design a real working app (Any taker? Let me know if there is such possibility!).

Anyway, below are all the mock ups for the redesign:

What do you think? Do you like this redesign? Hit me with your comments/suggestions/critiques!

The Verge Redesigned

It has been quite some time I wanted to do a redesign on The Verge app due to their not-so-great UI/UX. Just to be fair, they have just pushed a new update which is a lot better than the previous version that I am referring (and I didn’t see that coming!). The new version is smoother, and it has Nav Drawer navigation (which coincide with my new redesign, but I am not surprised because it’s a natural choice) and scrollable tabs, which are definitely welcomed UI patterns. While my redesign might be slightly similar to their new update, I still want to publish them because I think there are still many room for improvement to achieve better user experience.

Below are all the mock ups that I have done (07/10/2012 – updated with tablet version), and I have included some comments for my choice of UI patterns:

What do you think? Don’t hesitate to hit me with your comments/suggestions/critiques!

uTorrent Redesigned

Early this month, BitTorrent Inc. decided to release the native µTorrent app to the Play Store, and I must say I am pretty shocked by the app design. It’s horrible. Immediately after that, Holo There looked into it and did a quick redesign of the app and it looks quite nice.

I was thinking to do a redesign of it after their official release, and now I finally did the redesign after playing around with it for some time to understand most, if not all, of the features in the app. Below shots are my redesigned µTorrent app (5 shots):

My redesigned µTorrent app has a pure Android Design and Holo themed with the heavy use of its’ brand color. It make full use of the notification center of Jelly Bean which allows quick actions and individual torrent control (Resume, Pause, Stop) is possible in the main screen.

What do you think of my redesigned µTorrent? Feel free to let me know 🙂

Android UI/UX Tips #2

After publishing the 1st Android UI/UX Tips, it seems that I am able to find more UI/UX mistakes in various apps (perhaps I become ultra-sensitive now?), so here it is, Android UI/UX Tips #2 to inspire Android Designers/Developers in developing app with awesome UI and UX.

Don’t Make it Hard for The User

If your app have some awesome features that simplify user interaction, think thoroughly when to/not to remove it from your app.

One example that I would like to show is the Update button in Play Store app. When there are more than one apps require update, the Update button is very useful. Updating all the apps will only take one touch. But, when there is only one app having update, the Update button mysteriously disappeared. The problem is, now to update that particular one app, three touches are required (Select the app > Click Update > Click Accept & Download). I personally do not see any use case requires such interaction design – if you can do the same for multiple items, you should be able to do it for a single item.

Consistent with Android Design

In Google Drive app, most of the dialog in the app are using the basic button, which looks really ugly and inconsistent with Android Design. The buttons in default dialog in Android should be (I am not sure) already using the borderless buttons, so I am just feel like asking the Google Drive developers:

Why make the dialog looks like a Microsoft Windows dialog?

No Double Up Combo, Please

Astro File Manager has a new update with refreshed UI, and it comes with a double Up combo! As I mentioned in my Google+ post, it is definitely unnecessary and downright ugly. Just use the app icon for better identity establishment. Perhaps the app designer want to help enhancing the Up affordance?

Consistent with Icon for User Interaction

Again, it’s Google Drive. In the Detail View of a file/folder, you can see there is a Done button (Tick icon) in the Action Bar, and a Cross icon near the file name. You might think that the Cross icon is meant for the file/folder itself, perhaps for deletion or discarding changes? Nope. It behaves exactly the same as the Done button, and this is really a confusing design. In Android, the Cross icon usually meant remove, discard, or cancel. This is not Microsoft Windows. Just stick with the Done button at the Action Bar and it will be just nice.

That’s all for Android UI/UX Tips #2! Hope it is inspiring!

Action Bar Icon Pack #1 [Free Download]

In Android Design, Action Bar is one of the important UI elements for great app. Besides providing navigation feature to the user, Action buttons in the Action Bar is crucial in user interaction as well, which provides great user experience if it’s done right.

Previously I have published the Action Bar Icon Design Photoshop Template which can be used as a design template for Action Bar icons and export it for all screen densities. Creating an icon, sometimes, is a pretty enjoyable experience – thus, I have used the design template to create 20 Action Bar Icons over the weekend (preview below) which have both Holo Dark and Holo Light version, as well as for all screen densities. The icons for xhdpi screen density are ready to be used in the Android ICS/JB Photoshop GUI Design Kit 3.0.

That’s not all. In this Icon Pack, I have also included 142 stock Action Bar and Tab Icons which are fully generated at the Android Asset Studio for quick mock up/development usage. Sure, I am aware that they are already included in the official Action Bar Icon Pack, but I prefer a slightly different folder structure in organizing the icons (as well as ldpi version), therefore I have them included in this icon pack. If you already have the official one, you can ignore that folder in this icon pack. 😉

Download

I got it uploaded to Mediafire and it is free for commercial use under CC BY 3.0: Android UI/UX Action Bar Icon Pack #1.

More Action Bar Icons are in the draft stage and will be included in the subsequent icon pack. If you are looking for more professional Android icons, check out the awesome Android Developer Icons 2 at androidicons.com.

This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

Android UI/UX Tips #1

Realizing that it is almost impossible to write a post for each of the UI/UX tips that I have in mind (except those worth a discussion), I have decided to occasionally come out with Android UI/UX Tips.

So in the 1st Android UI/UX Tips, I will look into some official Android apps by Google (Google+, Google Drive, Email), as well as TED app, and talk about some UI/UX mistakes in them and their possible UI/UX improvements.

Avoid Using Confusing/Inappropriate Color

Color, especially when it is related to interface elements, is an important factor in designing great UX. When it is used correctly, it can provide immediate feedback or information to the user and create confidence in user interaction.

Google+ Send Button

I am not sure if it is a bug, but the Send button in Google+ app doesn’t change color (or the grey level) to indicate the button state. This is definitely one bad UX example. Due to the nature of touch interface (there is not mouse over or tooltip), users will have to rely on the visual clue for the state of user interface element. Change the color of the Send button to a darker grey when there is some text entry should already solve the confusion.

Action Bar Icons in TED App

The Action Bar icons in TED app are designed well for their action (although they seem to be a little bit ‘fatter’), but they have an inappropriate grey color – they looked too much like disabled buttons, or in other words, the grey color is very unfamiliar. Sure, you can argue that the color choice is due to the pure white Action Bar in the app, but the app doesn’t use the suggested Action Bar icon color for light theme. Using the color scheme meant for Holo Light (#333333, 60% Opacity), they will definitely give more confidence and familiarity to the user, as well as consistent with Android Design Guideline on Iconography.

Deleting Message in Google Drive

Even though Google Drive is a pretty unpolished app, I still would like use it as an example. In Google Drive app, when you confirm a file deletion, the Deleting… wording is in a welcoming green color. For this case, I would prefer not to ignore the language of color. Every color has their own associated meaning – Red means Stop/Attention, Green means Go, Orange indicates Warm and Blue indicates Cool. Therefore, it probably make more sense if the message is in red color to grab the user attention about the file deletion. It will be even better if those dialogs in Google Drive get a revision.

Avoid Unnecessary (And Ugly) Navigation

Navigation, one of the most important part of touch interaction, can cause serious user frustration if it’s not done right. Fortunately with the official Android Design Guideline for Navigation, it should not be a difficult task to do it right. But if you want to know how to do it wrong? Check out the stock Email app.

It’s a surprise to see the stock Email app doesn’t have that swipe navigation system found in official Gmail app. In the stock Email app, a button-based navigation is used in Detail Views. It does not only take up some precious screen estate, but it is also destroying the aesthetic of the app, especially in Landscape mode. Swipe navigation and the thin indicator in Gmail app is already a much better solution for this. Otherwise, integrating the navigation buttons into the Action Bar is also a feasible solution (Just to be fair, the Phone version of Email app does have the navigation buttons integrated in Action Bar, and I am not sure why it doesn’t do the same on Tablet version).

Hope these tips help in crafting awesome app with great UI/UX elements. More tips coming in the very near future (if I have any)!

Action Bar Icon Design Photoshop Template [Free Download]

Heavily inspired by Sebastian Tibichi’s Google Play Icon Template, this Action Bar Icon Design Photoshop Template is made for Android App Designers/Developers in designing and generating Action Bar Icon in different dpi. While there is already an awesome online Action Bar and Tab Icon Generator in Android Asset StudioAction Bar Icon Design Photoshop Template goes a little bit further – It can preview your designed Action Bar icon in properly sized Action Bar (which is customizable), and it can be used offline.

How to use?

1. Edit the Action Bar Icon Smart Object set at 512×512. Design the icon. Save the smart object. Remember to set the following properties for the icon based on the Holo theme:

  • Holo Light – Icon Color:  #333333 and 60% opacity
  • Holo Dark – Icon Color:  #FFFFFF and 80% opacity

2. Check all the icons generated for different dpi. If everything looks OK, hide the folder HIDE THIS BEFORE EXPORT before export.

3. Use the option Save for Web & Devices. For the dropdown option Slices, select All User Slices. Save to the preferred directory. 4 images at different resolution for different dpi (64×64, 48×48, 32×32, 24×24) will be generated.

Download

You can download Action Bar Icon Design Photoshop Template for free. If you can’t download it from MediaFire, I have also published it at my Deviantart account.

Feel free to use it and share this to any awesome Android app designers/developers! Don’t hesitate to leave a comment here if you have anything in mind!

Android ICS/JB Photoshop GUI Design Kit [Free Download]

Update: Android UI Design Kit PSD has been updated to 4.2!

Back in December 2011, I released the first version of Android ICS GUI Design Kit and since then, it has been downloaded for about 9000+ times. Not a huge amount, but at least I hope it already helped some app designers/developers in making quick app mockup. And since Jelly Bean is released, I have decided to update the design kit with some new Jelly Bean UI elements, and a brand new stuff in it – Application Design Templates (ADT).

Details

Similar to 1.0, the main motivation of doing this is just to provide some stock elements of Android 4.0+ (Ice Cream Sandwich/Jelly Bean) in a single .psd file so app designer can really focus on creating awesome mock up to show their developers/clients. Some of the elements (very minor though) are just single layer of image, but they should be pretty adequate for quick mock up purpose.

In 3.0, I have included two .psd file in the Design Kit – Building Blocks and ADT.

In Building Blocks, it contains most, if not all of the stock ICS/JB UI elements that can be used to build an app mockup in Photoshop. Most of them covered both Holo Light and Holo Dark themes, so you can easily drag and drop the properly grouped UI elements to your app design.

As for the ADT (not to be confused with the Android Development Tools which is a plugin for the Eclipse IDE), it serves as a starting point for the app designers/developers of the app design. You have the choice to select the design template that start with different amount of tabs and holo theme, and the design in Photoshop starts from there.

So what’s inside the new Android ICS/JB Photoshop GUI Design Kit 3.0:

Building Blocks

  • Soft button
  • App Login Screen Example
  • Homescreen (Updated with Jelly Bean Homescreen)
  • Launcher Screen
  • Option Bar (Top and Bottom)
  • Menu
  • Keyboard
  • Notification Center (ICS and Jelly Bean Notification Center)
  • Notification Bar
  • Dialogs (Toast, Popups, Alert, Jelly Bean App Uninstallation Dialog)
  • Quick Control (Lab feature in stock Browser)
  • Settings Page
  • Tab Bars (Multiple types)
  • Switches (Radio Buttons, Checkboxes, On/Off Switches)
  • Activity (Bar, Circle, Progress Bar)
  • Sliders
  • Text Fields
  • Buttons
  • Spinner
  • Grid Lists (Horizontal and Vertical Scrolling Grids)
  • Lists (Single Line, 2-line and 3-line list)

Application Design Templates

  • Scrollable Tabs (Holo Dark/Light, with 2-Line list and To-do list examples)
  • 2 Tabs (Holo Dark/Light, with 2-Line list example)
  • 3 Tabs (Holo Dark/Light, with 2-Line list example)
  • 4 Tabs (Holo Dark/Light, with 2-Line list example)
  • Collapse Tabs (Holo Dark/Light, with 2-Line list example)

This Android ICS GUI Design Kit is best used with Android Design Preview, you can read more here.

Download

Update: Android UI Design Kit PSD has been updated to 4.2!

If you don’t prefer 4.2 for some reason, you can still download version 3.0: Android ICS/JB Photoshop GUI Design Kit 3.0. If you can’t download it from Mediafire, I got it published in my Deviantart page as well.

More Android design resources can be found at Official Android Design Downloads Section. This GUI Design Kit is made using the latest Android Roboto Font, so grab the font and install them as well!

Share this to any awesome Android app designers/developers! Don’t hesitate to leave a comment here if you have anything in mind!