UX trend predictions of 2012 A:

Whenever likeminded creative people try to innovate trends emerge. Ideas give birth to ideas. As ideas keep combining in the heads of creative people everywhere some ideas become more sticky than others. I’ll document some of the trends in user experience design I predict will become the norm in 2012.
An example trend from previous years is the scroll down to refresh design. Created by Loren Brichter for his famous Tweetie iphone app it has since become the standard for refreshing feeds and lists in apps everywhere.

Example from mobile webKit build

Related function Panels

You’ve seen them already. Open your Facebook app and look at the button in the top left corner. Tapping the button or swiping the interface from left to right opens the menu:

Facebook iPhone app

Facebook iPhone app menu

 

 

 

 

 

 

 

 

 

 

This background panel is always there. Neatly integrated in iOS navigation panel.

The iOS navigation panel? At the top of all iOS apps with many views is a bar that usually has two buttons on it. This bar is called the navigation bar in the iOS SDK and intended to be used like this:

  • the left side button steps you back in the app. Just like the back button in your browser.
  • the right side button steps you forward. Showing the next step or function in the app.
Related function panels will become a trend become complex apps need menus, and no one wants to start the app in a menu. Instead starting the app smack in the middle of activity giving the user an option of accessing the menu by “stepping back”.

Why is this different from a menu

But the reason I call the panels related function and not menu panels is that when a menu is that as soon as we have this paradigm, panels on either side that are “behind” our current view in chronological order. We can show the user all sorts of related information and functions, regardless of the apps functions.
Take for instance Path 2.0, a beautiful example of UI design. It too uses the left side menu, but to the right it shows your friends list. In the Facebook app this right side button opens sorting options and not a panel at all. This doesn’t matter. As long as the paradigm is in place, panels will start showing up with the most important related functions in apps of all sorts.

Is this good or bad

The design works great in the Facebook app, in the Gmail app and in Path 2.0. But if it will work when lots of apps join the trend? We can’t know beforehand.
The design is solid from a perception and usability perspective. It also looks great. So I’m hoping to see some innovative use of it shortly!
Gmail appGmail app

 

 

 

 

 

 

 

 

 

Path 2.0 appPath 2.0 app

7 thoughts on “UX trend predictions of 2012 A:

  1. Any tips on how to integrate this kind of navigation but still having a “Back” button for iOS on the navbar? Having the “panel” button on the right side off the nav bar? (but opening on the left is a little bit weird)

    Like

  2. Any tips on how to integrate this kind of navigation but still having a “Back” button for iOS on the navbar? Having the “panel” button on the right side off the nav bar? (but opening on the left is a little bit weird)

    Like

    1. Well the pattern is for only the first level of navigation. So you have a back button until you reach the first level screen where is changes to the menu button.
      If that doesn’t work, either look at an alternative model for navigation or figure out if you can’t make your app using fewer levels of views.
      Hope it helps!

      Like

      1. Thanks for you quick reply, yep, i’ve figured out that even if this pattern looks really cool, it doesn’t fit so well with my app problematic.
        I’m trying to build an Android & iOS app, and i want to minimise the difference between my two apps.
        In this case, with android that’s ok, i can use this pattern because it has a physic back button, but with iOS it’s not the case 😦

        Like

      2. I wouldn’t recommend trying to make them similar in navigation, both platforms have very different patterns for navigation so apps will work better being consistent with the platform than its sister-app.
        Also, remember that most many new Android models DON’T have a back button!
        I’d love to see it when it’s ‘done’. Hope it works out!

        Like

      3. Of course i want to respect the navigation pattern of each platform, but as a technical point of view, i’m building a phonegap app, and i want to minimise the difference as much as i can to reach the almost “one unique code base” . All is about compromise ;-). (of course the best for is to develop and maintain a Android Native App and a iOS Native App, but i don’t have the resources to do so 😉 )
        For the new android models, where did you get this information? For me all android phone must have back-button.
        Guidelines from Android documentation: “The Home, Menu and Back functions are essential to the Android navigation paradigm. Device implementations MUST make these functions available to the user at all times when running applications. These functions MAY be implemented via dedicated physical buttons (such as mechanical or capacitive touch buttons), or MAY be implemented using dedicated software keys, gestures, touch panel, etc. Android 4.1 supports both implementations.”

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s