Wireframe Screen Flow Template [Free Download]

Update: I’ve updated the template to 1.0.1 to fix an issue that all screens will be using the same content. Have to blame myself for the lazy duplication. At the same time, Wireframe Screen Flow Template using Nexus 4 is also available now.

Inspired by a question from the group member within a private G+ community – Android Designers, I decided to spend some time to create a Wireframe Screen Flow Template for Adobe Photoshop that can help Android Developers/Designers to create a complete screen flow for wireframes or mockups. Below is the preview of the template that I have made:

What’s inside

12 mock up screens (They are smart objects so it’s very easy to drag-and-drop your mock ups)
Gestures
Screen flow arrows (One level down/up and two levels down/up)

How to use

Create all your mock ups or wireframes in 1280×720 or 1280×768 (Photoshop GUI Design Kit recommended) including the Nav Bar and Status Bar. Save them as png.
In the template, select one of the mock up screen folder. Look for Mock Up Screen (EDIT CONTENT). Right click on it then select Edit Contents.
In the new screen, drag-and-drop your mock up. It should fit nicely. Ctrl+S to save, then close it. You should see the mock up appears in the screen flow template.
Select your preferred gestures and screen flow arrows within those folders for a complete screen flow mock up.

Download

I have placed it to Mediafire and it is free to download:

If you have any issue downloading it, let me know and I will send you a copy.

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

Posted on January 1, 2013January 1, 2013 by Taylor Ling 12

LinkedIn Redesigned

LinkedIn app is one of the app that I wanted to redesign so badly that I hate it when I am using it (only for accepting request and replying message). It might looks good 2-3 years back, but not anymore today.

There are a few reasons that I think this app deserve a complete redesign:

Resemble iOS version almost completely
Lack of navigation in the app
Unnecessary skeuomorphism
Legacy menu button
Badly designed UI (for example, the dashboard give really limited information)

Below I included some screenshots from the current app:

Using the Holo UI approaches, I have redesigned a few screens that fit nicely in today’s Android devices. I have replaced the dashboard UI with the Sliding Menu due to the huge number of sections available in the app. Check them out below:

Update 28/12/2012: After taking some feedback from my G+ post, I have decided to give it another revision for better LinkedIn branding, and below are some updated shots. What’s changed:

Action Bar is in dark grey color to give a distinct UI layers
Added frame for photos
Used Card UI for details
Added some iconography
Increase the size of the sliding menu and smaller icons
Added Share button besides Invite to Connect button

What do you think about my redesign? Do you like them? Shot me your comments or suggestions!

Posted on December 26, 2012December 28, 2012 by Taylor Ling 9

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

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

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

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

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.

Posted on December 18, 2012December 18, 2012 by Taylor Ling 7

Movie Ticketing App Redesigned

Last month Roman Nurik posted a wizards pattern for complex user inputs, and I have now used it for my redesign of a local (Malaysia) movie ticketing app, which is definitely a perfect match (I think). Hopefully this redesign can inspire any developers or designers that are looking to create/redesign movie ticketing app.

Why I am redesigning this app? I have placed a few shots below to briefly show the user interface of the app to explain that. Completely implemented with iOS look and feel, legacy menu button, badly-resized images, in-app advertisement (about themselves), bad user interaction design – everything is so wrong. Give it a try if you want to understand my frustrations.

I think many will agree with me – app that just work without proper UI/UX design is no longer enough to stand out and compete with thousands of other apps in the market.

Completely redesigned with Holo UI approach, the movie ticketing app is aimed to provide great and easy ticketing service with sufficient information about cinemas and movies. Here’s my take (It’s a long page!):

What do you think about my redesign? Shot me in the comments if you have any suggestions/feedback/critique!

Posted on December 10, 2012 by Taylor Ling 20

Outlook.com App Redesign – Tablet Version

Last week I have published a redesign of outlook.com app after the disappointing official release, and since then I have also started to look into the tablet version. The redesigned phone version has been a shared around Android Google+ community during that day, and it was also mentioned in latest episode of Android Design in Action – big thanks to everyone who re-shared and commented on the redesign.

Below are my take on the tablet version, probably not much surprise for some (Before anyone say it, yes, it looks like Gmail/Email app, since it’s an Email client):

What do you think?

Posted on December 6, 2012 by Taylor Ling 4

Outlook.com App Redesigned

Over 25 million active Outlook.com users and they said they are ready for Gmail user to switch – with this low quality app.

I really disappointed with this surprising move since they did a really great job in SkyDrive app in Android. Seriously, it’s not rocket science to craft a beautiful and usable email app with Microsoft identity. They invested heavily in UI/UX for their new product lines, but yet they failed to understand the importance of Aesthetic-Usability Effect.

What I really hope to see when I run the outlook.com app:

But what I see today with the current app (usually I don’t post these):

What do you think? Just feed me with any idea or suggestion you have!

Posted on November 29, 2012 by Taylor Ling 15

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.

Posted on November 22, 2012 by Taylor Ling 10

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!

Posted on November 10, 2012November 11, 2012 by Taylor Ling 7

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.

Posted on October 24, 2012November 3, 2012 by Taylor Ling 13

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: