True Multitasking in Android

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!

Side Navigation UI Pattern in Android, Part 2

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.

 

 

New UI Stuffs in Jelly Bean (Android 4.1)

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

New to Android Design/Development? Here’s a list of great resources and references available

Android Development Tutorial and Reference

Android Design Guideline and Design Resources

Android Design Patterns, UI, Layout

Android Apps Showcase and Collections

Android Newsletter

Feel free to drop me some link for any awesome resources for Android Designers and Android Developers!