Monday, July 02, 2012

10 trends for Mobile User Experience


Recently at work there was a call to put together our thoughts on what we see as the top 10 trends for mobile user experience. These could be specific to our area of expertise (UI, visual design, UX, communication, instructional design etc.), and should address user needs, behaviors, device features/technology that supports it, mobile patterns as well as visual treatment and design approaches gaining traction or coming up on the horizon. This is what I came up with.

1. Go Up is back

The pagination concept is going away from web. Lazy loading of content as you scroll down makes the page too long that the user will have to scroll back a lot to go up. On iOS quick scroll is restricted unlike Android. However on iOS the user can tap on the status bar to go up but its not obvious. As clicking on logo will take the user to the home there has to be some way which will take the user to the top quickly. On Google+ when the user clicks on anywhere on the header the page scrolls up with a quick animation. Its a treat to watch but its again not intuitive. Variations of this is now becoming a pattern. The Verge scrolls down but shows a small logo floating on the top right side clicking on which the user is taken to top. On Twitter clicking on home link will not reload the page when the user is on the home page. It takes the user to top and load the new tweets. I have seen a lot of people tweeting asking for similar features on FB.

PS: on FB if you want to quickly get to top press the Home button on the keyboard.

2. Floating Header

For the same reasons told above (long pages) floating header with nav buttons and probably a get to top feature is becoming a pattern on mobile web. Floating UI elements were not straight forward to implement till iOS5. It needed a javascript framework called iScroll. But from iOS5 safari started supporting positiong:fixes style which made it easy to implement this. However if not implemented well this may take some prime screen real estate. Hidden navigation is one way to do it. Another pattern hides part of the header but floats a small part of it. eg Gmail mobile web header. The main navigation is not hidden on header but it scrolls out keeping a thin part floating. Google is also doing it on web.

3. Frequent Actions in the Bottom of the screen

As mobile screen sizes grow it will become difficult for the user to reach the top of the screen with his thumb for frequent actions. iOS has got a bottom menu bar/toolbar but they have the back and other frequent actions on top. Android has back on the bottom but removed the options button and put it on top. Not helping. I'm foreseeing that there will be more and more designers realizing this and bringing frequent actions below while keeping navigation on top. The Path Add button and burst out menu is just a start.

4. Hidden left side bar menu

Facebook introduced it as a strategy to make their interface responsive. Their interface has columns hiding or appearing based on screen size. Its now becoming a UI design pattern as its a good way to hide a lot of menu items from the main screen real estate. The others who joined the bandwagon are Path for iPhone, Sparrow Mail, Google+ on Android, Google Search and many more.

5. Desktop and Mobile web design merge

More and more desktop websites will become tablet friendly not only for the ease of maintenance but also to make it more user friendly; Clean and uncluttered interface, effective navigation, contextual actions, high resolution pictures, touch friendly buttons and links etc. eg look at Airbnb.

Its Post PC (aka mobile) era and going forward PCs will be looked at as today's legacy phones. Yes people will be able to able to use tablets for regular use and of course while travelling. Look at the new Microsoft Surface Tablet, there was similar concept from Motorola too on their Android tablet.

6. Design a web thats adaptive to Devices with all kinds of sizes

There is going to be devices of all kinds of screen sizes in the coming days and content producers wouldnt want any device to get left out. Point 5 above will in turn make the page structures lighter which will make it responsive design friendly. Location based services will not only limit to phones. Responsive or No, this means more and more people will make just one site that will work on all devices. This will make it easier for content companies to maintain content but also make ALL of them accessible everywhere for users in all its goodness. A good article on this Why we shouldnt make separate mobile websites/. Also read the comments; there are also people who dont agree to this.

7. Web and Native will coexist.

HTML5 and Native will coexist for specific use cases. More on that later.

8. iOS UI elements will take over web

Its already widely used on mobile web apps. Based on the assumptions 5 and 6, more and more iOS UI elements (like it or not they are more defined and widely used) will be used in sites on other devices too. Look at saavn's upcoming new UI http://new.saavn.com/s/#!/new and see the UI elements/style. Also resize the browser to see how it becomes tablet friendly.

9. Retina Display Everywhere

High resolution pictures (read heavy) to get on all devices to support retina displays. The way image assets are made for internet is going to change for ever. Internet is going to have heavy websites. Web design is going to have No to Very less images/icons and absolute usage of CSS3. See how the iOS back button can be done using pure CSS.

More and big pictures will remain as they show up brilliant on retina displays.

10. Something new

There is something new happening everyday in this space. Patterns created and followed. We dont have to be people who always follow patterns. Its a good time to invent new. Go ahead and break the rules.
Post a Comment