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 Studio, Action 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.
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!
A few weeks back, I came across the StandOut Android library from my Google+ stream that helps developers in implementing the floating app (something like the Pop up play in Samsung Galaxy S3). It looks interesting at first, but not so much after playing around with it from the user perspective.
Multitasking with floating app?
Floating apps are fun, and the implementation does open up some new possibilities in app design and it does show that true multitasking (not to confuse with the recent app switching function) is possible in Android.
However, it doesn’t make much sense to have such feature on smaller screen devices (eg. Phone). Take the Pop-up Play feature on the Samsung Galaxy S3 as an example, I don’t really see how it can help in multitasking, in fact, it has the potential to create annoyance to the user when it is used – the user have to move it around just to see/perform any action below the pop-up window. Check the video I attached below and you can get what I meant:
Another thing that is really worrying is the inconsistency of UX introduced by these floating apps, even if they are running on the bigger screen devices. It can become even worse when you can resize and move them around in an environment that is designed to run a single app at a time. Not to mention the ugliness it can introduce if there isn’t any proper design guideline. I don’t need another Windows.
Does it really make you a better multitask-er when you have four or five window floating around on a mobile device? When you need a second parallel running app alongside the current one, most probably you would want to do a cross reference on documents, or chatting with friends while watching football match, or attach a file into an email, which most of them involved only two activities at once.
Therefore in my opinion, to do a proper multitasking (on a tablet only, of course), it has to be a system level feature, and it should at most, involved only two activities at a time.
Multitasking in Android
Samsung Mini apps
Samsung tablets already have several in-house apps allowing the user to multitask, which they called them Mini Apps. Similar to the pop-up play, I don’t particularly like them – They usually have limited functionality (that’s why they are called Mini Apps) and they are more like a hack rather than a properly designed multitasking feature.
Cornerstone
Onskreen have some very interesting development here. In their video demonstration, their 3-way Split View seems to be working pretty well. It’s a great indication that Split View Multitasking is definitely possible, although I am less favor in their way of screen splitting. App launcher within split view is a good idea, though I would prefer to make the entire multitasking feature less complex.
Multiscreen feature in Samsung Galaxy Note 10.1
This is a relatively new feature in Samsung Galaxy Note 10.1. It inherited a lot from their own Mini Apps, but now they decided to make them run in half of the screen, splitting the screen to run two apps in that bigger screen size. However, most likely this feature will only be available in their in-house apps, so not all Android apps are supported natively.
My Concept of Split View Multitasking
Above is my concept for the Split View Multitasking, heavily inspired by both the Snap Multitasking in Windows 8 and Onskreen Cornerstone. It is definitely not a complete idea, so suggestion/critique is always welcomed.
The user can initiate the Split View Multitasking by drag-and-drop the app from the app switcher list to the running app (I called it Task Grouping) or just use Add to Split View button, and there will be an indicator to know which app is in the active mode (so the system features like keyboard or Back button will correspond to the correct app). App in the Left View (which is a smaller part) will reset the UI to Phone UI even though it is running on the tablet. App in the Right View (a bigger part) will still be using Tablet UI in Portrait mode.
Consistent UX
It is designed to have a consistent User Experience. The user knows what to expect from it and it won’t have any content blocking issue like in the floating apps. No resizing option available, therefore all well-designed app should be able to run with intended design during the Split View Multitasking.
Multitasking limitation (in a good way)
My concept limits the multitasking to only two activities. Well, no doubt this limitation might be frustrating for some, but considering the processing power that a tablet device have, this might be a better option. Plus, are you really able to multitask when there are more than 2 activities in front of you?
Make full use of universal and responsive app design
One of the great advantages of Android 4.0+ is the unified platform support, which runs on both phone and tablet with specific UI, and this should be the case for all Android apps. A well-designed universal app should be able to resize based on different situation and run with proper UI (this is also important now with the release of Nexus 7 with TVdpi density), therefore supporting for Split View Multitasking should not be a huge issue.
Possible Limitations of My Concept
Universal app design
Not all apps are designed to be a universal app which can run on both phone and tablet with responsive UI.
Aspect ratio
The concept is based on the famous 10.1 tablet resolution of 1280×800 which is 16:10. There are already quite a few number of Android tablet designed with 4:3 resolution, which will not quite fit with the concept above.
Discoverability
Discoverability, as always, can be a big challenge for the designer/developer when there is a new UI Pattern/User Interaction, especially in System Level.
Conclusion
With the processing power available on mobile devices, a simple multitasking feature is definitely something we should look into – but no, floating apps is definitely not an option. With the Multiscreen feature available on the Samsung Galaxy Note 10.1 and some third-party developments on true multitasking, I hope that these are already sufficient to push for some official multitasking feature in the upcoming version of Android.
If you have anything to share regarding this topic, feel free to share and comment!
Well, this topic might be a little bit old since the last bunch of discussions, but I still have a little bit more to talk about this UI pattern that I have missed in my last writing and also some new idea popping-up since last month.
I personally still think the Side Navigation (a.k.a Fly-in menu, Sliding Menu, Nav Drawer etc.) in Android is pretty interesting even though it is not a relatively new UI pattern – it allows a fresh (and better?) navigation style on small screen mobile devices, and it helps in efficient use of screen estate for content. A number of apps are already using it (each app has slightly different kind of behavior and interaction though) even though it is not (yet) an official Android UI Pattern, which is always great for Android development scene because innovation doesn’t stop at stock design/pattern. However, I really think it’s time to have some consistency and guideline for this UI pattern for better user experience because I can foresee more apps will be using this, only with different kind of behavior. Some of the official Google apps like Google+ and YouTube are using it mainly for navigation purpose, but unfortunately they are not good example since the Side Navigation implemented has different interactive behavior.
More tips and suggestions
Some extra suggestions from me since the last one if you are looking into Side Navigation for your app:
Don’t confuse the user
This is like the #1 UX rule if you really care about the user. The latest update of Google+ app during the launch of Jelly Bean is pretty awesome, and I think most of the Android user will agree with me. The Card Style pattern (which is another interesting UI pattern) offers some fresh experience into social networking app, and the redesigned Side Navigation menu since the last one is great – but not the visual indicator for it. The Up affordance are still used for it, and it will further confuse the user with the Up affordance when there is already user confusion in Up and Back affordance in Android 4.0+. My suggestion: If you really have no better idea on the visual indicator, use an icon for it (eg. Facebook and Prixing), or just the app icon (eg. Evernote), but please do not use the Up affordance to confuse the user.
Bezel Swipe, please
As mentioned previously, I still think Bezel Swipe is a great match with Side Navigation. It is very easy to understand, and bezel swipe isn’t something hard to perform on a mobile device, though I would have to agree that discoverability might be an issue for it. Another reason that I think Bezel Swipe should be there – most of the apps that have Side Navigation, for example Google+ and YouTube, allow the user to touch and hold the main activity and swipe-closing the Side Navigation (try to hold the main activity and swipe to left side), and this user-perceived closing animation can introduce the user expectation of swipe-right-to-reveal gesture for Side Navigation. Try Dolphin Browser HD and Prixing, I think it is completely make sense.
Improve Discoverability (and create curiosity)
Well, this isn’t something new. Every now and then, there are new UI patterns and new user interaction invented in mobile apps. To make the user aware of your new UI patterns and/or user interactions, what you can really do is improve the discoverability of those new patterns. As I said, Bezel Swipe/Side Navigation might have issue in discoverability, so just don’t stop there after the implementation.
Introduce it in the first run tutorial and let the user play around with it.
Make the Side Navigation a little bit more obvious when the user first running the app – a great example for this is the Prixing app which make the Side Navigation panel ‘jump’ when the user first entering the app, creating user curiosity.
Use a good indicator to represent the Side Navigation.
They are not perfect solution for the discoverability issue, but those are some possible improvements.
New indicator?
After some suggestions in the previous post, I am still actively thinking for new indicator that can be used for the Side Navigation. Below are some of my new idea, what do you think?
Conclusion
I really like Side Navigation pattern and I think it is especially useful in mobile devices with small screen, but it’s pretty important that the user experience that comes with it has to be carefully crafted so it doesn’t cause user frustration and confusion. If you are looking for some reference while implementing, I strongly suggest you to look into Prixing.
For developers, if you are looking for library for this UI pattern, you must check out the SlidingMenu library by Jeremy Feinstein. It uses Bezel Swipe which I prefers a lot and generally it has quite some good reviews.
This is just a minor entry for the blog about something that has been bothered me for quite some times (call me a nitpicker). Ever since the release of Galaxy Nexus with the Navigation Bar (the black bar with Back, Home and Recent apps buttons), there are more and more apps in the Google Play Store actually have it included in the screenshots. I fully understand that it’s not the developers fault – Google Developer Console actually asking for the screenshot with some standard resolution, which means that the Navigation Bar has to be included in the app screenshot without a choice.
Navigation Bar in Screenshots is Redundant
App screenshots are the most direct and quickest preview to the users for your app, therefore ideally they have to be shown on the user device which looks like it is in action. However, most of the screenshots nowadays include the Navigation Bar, which is completely redundant in my opinion. Why? Let’s have a look for some examples when I view those screenshots from Galaxy Nexus and Nexus S:
Not sure if you have the same opinion, but I don’t see the value of including that Navigation Bar in the screenshots. If the screenshot is meant for Galaxy Nexus, the Navigation Bar obviously is redundant since the device already has the Navigation Bar, and the screenshots have to resize due to the larger size. Plus it just feels awkward to view the screenshots that include Navigation Bar on devices that already have them in hardware form (e.g. Nexus S).
Workaround?
I don’t really have a solution for this since the Google Developer Console requires the screenshots to be uploaded at certain allowed sizes (320 x 480, 480 x 800, 480 x 854, 1280 x 720, 1280 x 800), which I really hope they will consider including resolution without the Navigation Bar/Combined Bar.
The only workaround that I would suggest for now is: Upload the screenshots at 480 x 800 (without the navigation bar, of course), which view perfectly on hdpi devices like Nexus S, and still looks quite OK on xhdpi devices like Galaxy Nexus.
UPDATE 13/11/2012: To celebrate the release of the new Nexus 4 and Nexus 10, Android GUI Sketching Kit is now updated to version 3.0! It has been added with Nexus 4 and Nexus 10 sketching templates, as well as added the guide for Split Action Bar for Galaxy Nexus and Nexus 4.
UPDATE 27/09/2012: The Android GUI Sketching Kit is mentioned in the 3rd episode of Android Design in Action! To thanks Roman Nurik and Nick Butcher for the shout-out, I have spent some time updating the sketching template to version 2.0, which also includes the Xoom template! I have removed the title and description fields in the templates, and introduce the guide for Status Bar, Action Bar, Navigation Bar, and Combined Bar (for Xoom). Hope you will find it useful!
Besides making the Android ICS GUI Design Kit that can be used in Adobe Photoshop, I also think (and love!) that sketching is a big part of UI/UX designing, while it can be messy, but it definitely help in quick idea visualization and aid in brainstorming.
So here I come up with a few sketch templates for Android App, using the Samsung Nexus S, Samsung Galaxy Nexus and Asus Nexus 7 as the sample devices, and put them on an A4-sized PDF with almost real-life size so designers can sketch the app with the size as close as the real device (don’t blame me if there is one or two pixels off! /jk/).
Android app designer, go create some awesome apps with the GUI Design Kit and GUI Sketching Kit!
Just got my Galaxy Nexus flashed with the new Android 4.1 (Jelly Bean) Build JRN84D, and I am pretty impressed so far. Most, if not all, of the features showcase during the Google I/O 2012 Day 1 Keynote work just fine, and the Project Butter isn’t just a project name – Jelly Bean is really butter smooth. As I try to explore this new Android, I’ve found some new and interesting changes in terms of UI (definitely not everything, but those are what I managed to find), so I decided to put them all in one post to share my findings.
Roboto Light font in Setup Wizard
Correct me if I am wrong, but I don’t recall that the Setup Wizard for ICS using the Roboto Light font, so for me it’s a surprise.
New On/Off Toggle Button
Open up the Settings, and you can immediately see the new On/Off Toggle Button. I am not too sure what’s wrong with the one in ICS, but I like the old one more.
New Search Bar Design
In the Homescreen, the new design of Search Bar (which has been leaked from Google I/O app screenshots) catch your eyes. Compared to the one in ICS, I personally think that it improves the perceived affordance, making the user more likely to press it.
New Notification Center
An improved Notification Centre in Jelly Bean. Date and Time and now slightly more emphasized. Title texts in the notification used Roboto light font, and font size has been pushing up a little bit. There is also a new Dismiss All button at the Right Upper corner. For the notification that you can interact, you can immediately do the interaction within the Notification Centre. Also, at the notification centre, you can long press an item and access the App info immediately, very useful to turn off the notification.
New Wave Animation in Lock Screen
Turn on the screen after it’s locked, and you can see the new wave pattern and animation from the unlock button. The pattern follows your finger when you slide the unlock button around, very fun to play with. The pattern feels like a microphone.
Jelly Bean!
Jelly Bean spotted!
Expandable Notification
Some of the notifications are expandable, for example Gmail notification. Discoverability might be an issue since no hint is given for such functionality, but those who have been following the Keynote should already aware of this feature.
New Menu Style for Share Intent and App Chooser
If you use the Share Intent, or open up a link that allows you to choose which app to complete the action, you will find that the menu style is changed. Coincidentally in Apple iOS 6, the sharing option have the same menu style tweak. Looks good, but if the user have a long list of app in the chooser list, perhaps a little bit more scrolling is required? There is also options to complete the action with certain app only once or always, different from checkbox option in ICS.
New Quick Control in Browser app
I am always the fan of the Quick Control in the Browser app in ICS, and in Jelly Bean, the Quick Control has been upgraded. It now has a beautiful animation, and each of the option will have sub-option. I think it will be very useful for any app that is focus more on the content, for example Book Reading app.
Neat Widget Catalog
Widgets are now arranged in a neat and clean arrangement, each of everyone have the same size in the catalog.
Down Button
Instead of Back button, now when the keyboard pop up, it changed to Down button to indicate that you can use it to hide the keyboard. This change is really welcomed.
Today button with Current Day
Very minor detail but I am very pleased with it. The Today button in the Calendar app show the current day.
Blink Now feature in Lockscreen
If you use Face Unlock for your lockscreen and activated Liveness check (basically you have to blink while unlocking), once the phone detected your face, it will ask you to blink.
Access Google Now from Soft Keys
If you swipe from soft keys to the main screen, you can have a quick access to Google Now. Very similar to the pattern in lockscreen.
Soft Keys Pressed State Color Changed
Press the soft keys and you will find out that the pressed state changed to grey color. I like the old blue color though.
New Voice Actions UI
Voice Actions become so important in Jelly Bean, therefore they have some new UI.
New Uninstallation Dialog
In Jelly Bean, when you uninstall the app, a pop up dialog will be shown rather than a full screen uninstallation dialog. If you used ICS and uninstall apps extensively, you will notice this change. Not too sure how does it enhance the user experience, but my guess is this change is meant for Nexus 7.
Tab Swiping in Apps
They finally fixed this in Jelly Bean. In ICS, there are similar tabs in Apps, but swiping will not work for changing the tab. Glad to see they are making everything more consistent in the system level.
Found anything else? Do let me know so I can show it here. 🙂
Few days back, I read an article on Android UI Patterns by Juhani discussing about the emerging Side Navigation UI Pattern on Android, and it is a pretty interesting topic. This new unofficial (yet?) building block for Android starting to make its way into more apps in the market, including Google+ official Android app. This Side Navigation (I will just stick with this term used by Juhani since there isn’t any official term for it yet) UI Pattern is an interesting design, especially on the phone that has smaller screen estate compared to tablet, but it can end up confuses, or even frustrates the user if it doesn’t get implemented in an elegant way, resulting in bad user experience for the entire app.
Inspired by iOS?
The official Facebook Android app has been using the Side Navigation pattern for quite some time, and that was my first experience with this new UI pattern. Well, I never been a fan of this app because it brought over too much iOS designs and patterns into it (it’s a direct porting), and this Side Navigation pattern is actually part of the bad porting. I always think that it’ll be great for all Android users if Facebook can re-design the app with Android ICS UI/UX, so I went ahead and made a very simple mockup of new design without the Side Navigation and personally I think it’s looking good with better Android experience. Continue reading →
The 
#androiduiux 