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!

Sunday, July 18, 2010

Dear Facebook, Please keep your UI semantics sensible

Dear Facebook,

I have noticed that clicking on the "Top News" link changes the top news everytime. The top news doesn't seems like top news anymore. I understand you might be looking forward to engaging more users by doing so, but it is pissing off many of us.

You being the big daddy of the social network, we expect a stable and sensible browsing experience from you.

FB User!

Saturday, July 10, 2010

Intelligent Passwords

I attempt and dare to solve the problem of password-stealing which occur primarily due to Social Engineering Hacks. Also, this adds another layer of protection over passwords and make passwords more secure and usable!

The method exploits the fact that given a word to type, different people will type the word in different fashions. The speed of typing will be different and the typing-accent will vary. We now attach this typing-accent attribute to the password and make them more secure i.e. even if you tell your password to a third-person, he wont be able to authenticate himself as you.

Also, this improves the usability of passwords. As pointed by Jakob Nielsen, un-masking the password would provide better usability. Passwords can now be unmasked as this method tries to cover for the social engineering hacks which are the clear threats to unmasking passwords.

As a proof of concept, i provide a demo here. The demo is Javascript based, where you can set your password and then attempt to enter it again. Try different accents in typing like typing the first three characters very fast and then rest very slow. If you have people around you, please experiment with them by asking to enter the same password!

Feedbacks/Comments Requested!!