IBM®
Skip to main content
    Country/region select      Terms of use
 
 
   
     Home      Products      Services & solutions      Support & downloads      My account     

developerWorks  >  Lotus  >  Forums & community  >  Inside Mobile Design and User Experience

Inside Mobile Design and User Experience

Thoughts on mobile and social business applications, design, and user experience, by Chris Reckling.

Why, yes, we HAVE been busy since Lotusphere! One of the things we talked about was a new, improved app for IBM Connections. As you know, the Connections apps are available today for Android phones, Blackberry, and iOS phones and iPad. This post discusses that navigation pattern and how it will evolve in the near future.

For the iPad release, we introduced a new navigation pattern, which lets you quickly get to the content you want, by drilling down. For example, the figure below shows going from the list of apps to the Files app, then to the list of files in that view. The left navigation is replaced with each subsequent level and the content detail appears on the right (currently in a webview). Moving back and forth is straightforward and understandable and all of the Connections services behave the same way.
Image:Mobile Navigation

On the phone form factor, in Connections 3.0.x apps, the Home screen was represented as an icon grid. Tapping on an icon brought you directly to that service and navigation from there was internal on that page via a drop down menu.
Image:Mobile Navigation
Early on in our design process, we were going to stick with the tile navigation, but decided to go with something more modern and suitable to how the app will be used. The problem with this style navigation in Connections is that different customers deploy different services; therefore, the number of tiles ranges from 2-9. In addition, we found that on Android, due to different size screens, that the layout was not consistent from device to device. (In fact, in the Lotusphere demo, there were 2 rows of 4 and one row of 1 instead of the desired 3x3 grid.) This presentation on Slideshare even talks about the death of the icon grid. :) Finally, we have a requirement for customers to customize and add their own links to the home page, so that sealed the deal for removing the icons.

If you've been paying attention so far, you can guess where this is going, right? Combine the best that is in the iPad design with the best that is on the phone! On both form factors, we want to use the list as the home navigation of the apps in Connections, but skip the view navigation (as seen above on the iPad) and go straight to the content (as seen above on the phone). To navigate to other views in the app, pull down on the 'windowshade'. Thus, it looks like this (sorry, screenshots got a bit messed up in translation - look better on the device):

Image:Mobile Navigation
You go straight to your content on the device, but still have the option to switch views from within that context. We feel this gives you the best ability to have direct access to your content, understand how to navigate around the app consistently, and get to all of the features available in Connections.

A lot of apps, including some of our own, use tabs to switch views. We started to do that but many of the Connections services have a lot of views, so that did not scale well. Typically, if your app has 4-5 views, it is better to use tabs to switch views. See below, in the Sametime example.
Image:Mobile Navigation

That's it for now - tell us about your mobile app strategies or put links in the comments.

Chris Reckling
twitter

Chris Reckling | 2 April 2012 04:00:00 PM ET | | Comments (0)

Search this blog 

Blog powered by 

Disclaimer 

    About IBM Privacy Contact