After Jakob Nielsen wrote about the usability issues with Hulu’s Mega Menu, Hulu finally redesigned their Navigation. They removed mega menus and kept the number of choices in each tab to less than seven. I hope they did Card Sorting before they finalized the new design.
Old Mega Menu Navigation:
New Navigation:
In this illustration I’ve shown how shapes can be used to help people with color blindness, to identify traffic signals. As people can easily relate to these shapes, they will not get confused, especially with – a.Horizontal traffic lights and b.The odd ones which change the sequence of the lights.
Below are the screen shots from the Google Account ‘Edit Profile’ screen:
Edit Profile: About me
Edit Profile:Contact info
The Field Labels are normal in Form1 and Bold in Form2. I can understand that it is it hard to maintain consistent form design among different applications, especially when you have as many applications as Google. But inconsistency in a single screen with 3 tabs is just sloppy.
Note: When Labels are placed above the input fields, research (by Luke W) has shown that people take 60% more time to fill forms with Bold Labels.
I’ve been using Axure for over 2 years now. It is the primary tool I use to prototype both at work and for my personal projects. I’ve always used Axure on Windows platform. I finally installed it on my Mac. The UI interaction design in the new Mac version is different and much better than the Windows version.
Two UI improvements which makes prototyping much easier are:
1. The Toolbar: Looks very much like the new Adobe CS toolbar. All the frequently used widget operations (align, group, distribute) are in the toolbar. For me, the most important change is the default docking of the ‘Location and Size’ in the toolbar. This is one of the frequently used property, as most the prototypes I create are pixel perfect. In the Windows version, ‘Location and Size’ dialog is floating by default. This is irritating, especially when you are working with more than one monitor. And when you do dock it, it takes up valuable real estate in the already busy work area.
Improved Auxre Mac Toolbar:
Floating ‘Location & Size’ in Axure Windows:
2. Case Editor Dialog: The Mac version uses a vertical layout which allows better organization. All the 4 steps is in one single dialog, unlike the Windows version, where the 4th step opens another dialog.
Vertical Column Layout in Axure Mac:
Axure Windows Horizontal Layout opens a new dialog for Step 4:
In one of my previous posts Google Images vs Bing Images, I wrote how the Interaction Design on Google Images page was better than Bing Images (which had dead zones). Bing finally changed the interaction on their image search page.
I know it looks very similar to Google’s design. In fact, it is better. The light gray line between images (which does not exist in Google Images) clearly defines the area of the image, making it easier for the users to acquire the target.
Pablo Picasso once said, “Good artists copy, great artists steal”. Good job Bing. Instead of just blindly copying from Google, you actually stole it and made it better.
YouTube changed its Reputation System from a 5 star to Thumbs-up/Thumbs-down ratings. There is no doubt that the new design is better, but what bothers me is the way the rating information is visualized to the users.
In the most recent design, the video being played shows the number of likes and dislikes, which is much better than the previous iterations which showed couple of grayed bars, and later couple of colored bars.
Though the visualization has improved from bars to numbers, there is one main problem – there is no absolute rating for the video. The Suggestion Videos column on the right displays only thumbnails and the number of views. So a user has no way to know the authenticity of the video without actually clicking on it. Since the user’s decision is based solely on the thumbnail display and number of views, there is a good chance that a bad video becomes viral.
– With appropriate weight-age for ‘likes/dislikes’ and with proper standardization, absolute rating can be calculated and displayed with the video thumbnail.
– Or, the number of ‘likes/dislikes’ can be displayed with the thumbnail. But the problem with this is it adds lot of visual disturbance and it takes users time to process the information.
When you get a bill in restaurants/bars, you start thinking how much you need to tip the waiter. You don’t want to spend too much time thinking about it and you tip a whole number. You don’t want to do math (say 18% of 54.56) when you are with your friends or when you are drunk. And later you wonder if the tip was enough. Yesterday I was at a bar, where the bill solved this problem.
At the bottom of the bill, there was a guide which told me how much 18% and 20% of the bill was. So I could tip $3 and be sure that I had tipped enough. If I was feeling generous, I would have tipped $4.
My sister lives in London. I wanted to buy her something for the holidays. So I started looking at some well known eCommerce sites like Amazon-uk and ebay-uk. What caught my attention was that they use the term ‘Shopping Basket’ or simply ‘Basket’, instead of ‘Shopping Cart’ or ‘Cart’. After looking at the top eCommerce sites of UK, I found that the use of the term ‘Basket’ was kind of a standard.
It was interesting to see how the language influenced the website design. So I started looking at the top Indian eCommerce websites. Indian English evolved from, and is heavily influenced by British English. But surprisingly Indian eCommerce sites unanimously used ‘Cart’ instead of ‘Basket’, which shows that the web design in India is mostly influenced by US web design.
A modal dialog box requires the user to respond to a request before the application continues. All the interactions on the application, which opened the dialog box, are deactivated.
Modal dialog box for a command is used when you need additional information for the command to proceed. As it interrupt the user’s flow, it should be used only if vital information is needed. For example – for login details or for saving individual files when closing the parent application.
mylife.com opens a modal dialog box when you close the browser tab without signing up.
1. This is the weirdest use of modal dialog box I have seen. And the most irritating as well. My browsing experience is stopped, as I cannot interact with any other tabs until I interact with this box.
2. I dont really see the value add. The user has just been to their website. If they were not able to convince the users to sign up through their website, how could they possibly achieve that using a single line in a dialog box?
myife is a people search platform. When you enter the website, there is a form where you can enter your information and proceed to the result, which has the list of people who are searching for you online. But before you can see the list, it prompts you with a sign up form as seen below
If you look in the background, there is a list, but blurred out. It was interesting to see so many people searching for my name. But it was just a dummy image. It was not the actual list, which I found out only after signing up. I guess I was just curious by the blurry thumbnail of the hot girl in the misleading dummy image in the background.
The new be.ez laptop cover for my mac book pro arrived today. I got the Black/Wasabi color and it is super stylish. The material is light and durable. But only after I got the product I realized that there is a major flaw in the design. The be.ez logo on the bottom right is exactly at the same position on both sides. So it is not possible to tell which is the front facing side of the laptop inside (which is important when travelling). The online product pictures showed only one side at a time. So I was under the impression that only one side had the logo.
Anyways I am happy with the product. My second choice was CaseLogic (which clearly distinguishes both sides)
‘Search’ is one of the ways of finding information in a website. And for eCommerce sites like Amazon, eBay, TigerDirect etc, which has too much information to browse, Search plays a very important role. Good Search experience gives users easy access to products, which in turn means more checkouts.
Most of the eCommerce sites have tried to improve their Search system by providing the users with product recommendation as they are typing the search term. This is a very useful feature and saves users lot of time. But this can be really frustrating when not implemented properly, as seen in TigerDirect.
See the two screen shots below:
When you are typing a Search keyword, if the mouse cursor(focus) is in the area of the recommended terms, it gets added to the search term. For example, I wanted to search for ‘panasonic lumix’, but I ended up typing ‘pci express video cardsanasonic lumix’. This is because once I typed ‘p’, it added the recommended term (where my cursor is) ‘pci express video cards’ to the search keyword.
This problem is observed only in Firefox browser, but important features like Search should be tested in all browsers (especially in browser like Firefox, which is used widely).
I like Web Analytics. At work we use Web Trends. It tells you if a particular web page getting traffic or not. Since the Analytics data is quantitative and tangible, it always helps you to make a business case for the redesign of  a web page.
For my portfolio, I use Google Analytics and for my blog, I track using the inbuilt WordPress Analytics. The Visitors, Traffic Sources and Keywords helps me to optimize my website. Analytics can get very addictive. I keep track of it everyday (every couple of hours for WordPress, as it updates instantly unlike Google Analytics).
Most of the traffic to my website comes from US or India. Today, I was a bit surprised to look at the stats. I got visits from few unexpected countries:
And these were not just bounces. They spent time on different pages of the website.
Then I looked at the search keywords used by visitors. Most of them were regular keywords(a combination with keywords like ‘user experience’ or ‘interaction design’). But there was one particular keyword which surprised me the most:
My site shows up at the top as I have all the individual keywords as and in my content. But who would type such a long keyword? It looks like it was generated by a script. I am not sure why one would write a script for that either.
Today, Smashing magazine announced that they will be launching the Smashing Book 2 soon. And they will print the names of the readers who comment on the article, in the shape of the Smashing Magazine logo. Super Cool! Without any hesitation, I commented on the article.
But then I started thinking – What’s in it for them? Why are they being so generous? Of course they love their readers. But this would also sell them more copies. They are giving you a guarantee that your name will be printed in the book. I am definitely going to own a copy of this design book just because my name will be printed in it. Wouldn’t you?
*Note: I know the title is misleading. It is not a trap. It just sounds cool. I appreciate what Smashing Magazine is doing.
Sites like Google and YouTube often take advantage of their huge user base. They roll in design changes and rely on the live test data from millions of users.
Recently, YouTube has been making lot of changes to its interface. It maintains 2 base UIs with regular updates to each. The 2 UIs keeps switching randomly. This is really irritating when a interaction is significantly different between the 2 UIs, like the volume bar. For one video you are moving the bar horizontally and for the next video you are moving it vertically.
Vertical Volume Bar:
Horizontal Volume Bar:
Aggravating the situation is the interaction in both these volume bars. The volume bar is visible only when you hover over the speaker icon. This is intuitive. But the problem arises when the user interacts with the volume bar. The target area is volume bar area plus speaker icon area. As soon as the cursor exits the target area, the volume bar is lost instantly. I have encountered this problem a lot. It is hard to restrict the cursor within the target area, especially when you are trying to reach the max volume, which is a very common scenario. This slows down the users and makes them repeat the action.
One of the ways to solve this problem is to have a small delay before the volume bar disappears. So even if the user misses the target, we would give them enough time to correct their action.
Umanka Karkada - UX Blog 