Tuesday, July 20, 2010

Mobile Sites and Usability: An unlocked phenomena

Everyone knows how iPod/iPhone revolutionized the user experiences of handheld devices. Its a device more usable than anything before of its kind

Lets hold our thoughts here, think for sometime and figure out the awesomeness behind this great user-experience. The two very basic points their UI revolved around were:

1. Make the Action-Points in the UI easily reachable. Since iPod was a touchscreen device, they used big sized buttons to achieve this, and a highly calibrated keyboard made typing a smoothie. Those big buttons really made accessing those action points easily. You never feel like using a stylus with iPod/iPhone, thats ease of access.

2. Minimal Scrolling: Use multiple screens instead of one big list, go deeper levels or flip that screen but stay on a single page. iPod had reasonably categorized menus at as many places as possible and the very intuitive "back" buttons sure showed the way out to the main application.

If you look closely at one of those apps you love to use, you will find the above two ideas stuck into their genes.

But, somehow, and sadly, web din't adapted this phenomenal user experience. Still there are underlined anchors, default terrible buttons and long wap-pages on mobile-versions of web sites. I believe there is a tremendous potential in this UI which is yet to be uncovered as far as mobile websites are concerned.

I tried to check it out on a very lame Google search page, results not being so pretty but definitely way more usable (Sorry i am a little bad at CSS thingies):

Which one do you prefer? (do let me know in comments!)

We have got to unlock this phenomenal UI into our web coding guidelines. The way wap sites are designed must take a leap and jump into the awesomeness of this user experience.

I suggest sticking to the following points when developing a mobile version for your site:

1. Use block styled anchors or block styled anchored lists for your navigation and other links.

2. Major Action Points in your site must have those big huge buttons to seek attention and improve the usability and user-experience of your site.

3. Try to be very specific and manage the whole content within a page or two at max. Lets break those never ending longer than Wall of China websites. We really dont need them, come on, we are heading to 4G now. Its the experience that would matter down the line and not the number of lines in your site.

4. Make sure you have a good amount of margin between your elements otherwise it gets really messed up on a touchscreen device and users end up clicking unwanted things.

5. Keep it clean, use shorter and straight words, and more visual and iconic displays rather than texts. Users are getting smarter, lets make smart sites now.

Lets make web better, together!


  1. Point No.2..
    hmm..y do u hate buttons in linux ??

  2. good beginning. and i would really suggest consulting a UI or usability expert before deriving anymore ideas. Usability isn't a widely understood phenomenon and a very dangerous thing to practice at home.
    Based on my conversations with usability people, here are some more points:
    - Iphone has the same interface and appearance across all applications. That smoothens out the experience and lowers the learning curve of using a different application after having used one. You, as a app publisher, cant get more radical than you need to be.
    - The whole experience being on only one medium, touch. So there isnt a extra keyboard tagged onto the device which you have to keep shifting to in between tasks.
    - The home button. no matter where you are in a navigation, you tap it, and you are back,
    - The multitouch. helps reproduce many actions by various combinations of intuitive gestures rather than have buttons for them on the screen area.

    and about points to keep in mind while designing for the web? i wont say a thing as long as jakob nielsen is at it, over to jakob: http://www.useit.com/

  3. @anish the buttons in linux have bad icons, bigger than what required. Big buttons are really needed for a touchscreen device or rather a handheld device, not a desktop device.

    @krg sir, thanks for the very useful comments!! i totally agree with you on the points for iPhone usability. But my post was really about why mobile websites are not adopting this kind of user experience. People buy it or not, iPhone did bring in those big buttons to UI and they are damn useful in a handheld device. Dont u think its time that mobile websites developers change their mindset a bit and explore this kind of user ex?
    and Nielsen is God.. no doubt!