Bad design made my flight neighbor angry at me.

Last week I flew Denver to San Fransisco on Frontier airlines. I  seldom talk to the person next to me on flights. I was traveling on ‘Classic Plus’ section, which gives you free TV – a good way to spend time when you are flying.

After the takeoff, it took like 5 minutes for the TV programs to start. I wanted to change the channel. The remote was very intuitive with only 6 buttons (see image). I pressed channel up, but nothing happened. So I pressed it like 5 more times. My neighbor looked at me and she looked pissed. I took my headphones off and she told me that I was changing the channels on her screen. I was so embarrassed.

But why did I make this error? If you see the image carefully you can see that there is another button next to the remote which pushes the seat back. For every passenger, the remote was on their left arm rest and the seat push button on their right. I used the seat push button first and soon made a connection in my mind that all my controls are to my right (since objects close to each other tend to form a group). So in my defense, it was not entirely my mistake that I used my neighbors remote.

Is the ‘Role of Metaphors’ changing in Interaction Design ?

Interaction designers consider the use of metaphors as an important principle when creating good interfaces. This is not something new. The most notable use of metaphor was when Xerox introduced the ‘Desktop’ metaphor in early 70’s. My personal favorite is the use of ‘Trash Can’ metaphor in Macintosh. The Role of metaphors in interaction design was well explained by Dan Saffer. He writes – “Metaphors help us to conceive and understand abstract concepts, usually by making reference to more concrete objects.”

So the role of a metaphor is to explain something to a user in a easy meaningful way. A way to which the users can relate to. But is this approach still used in recent web companies? Let’s take the example of Twitter. ‘Tweet’ is one of the worst metaphor ever. When I update my friends with some information, I never think of ‘making a sound like a small bird’. But would Twitter be as successful as it is today if it had just used the metaphor ‘Status Update’ or ‘Update’ like most networks out there? Maybe, or maybe not. But the metaphor ‘tweet’ did create a unique brand for Twitter, which clearly differentiated it from other social networks, and added to its success.

With so many startups emerging, especially in social web, and everyone trying to be different from others, the trend is more towards using hybrid metaphors. The role of a metaphor is no longer just to describe an action to a user but also to create an identity for the product.

Apple iOS5 Lock Screen Interaction

From the early design days of Macintosh and Jef Raskin, Apple has always led the way in OS interaction and visual design. However, today Apple announced the new iOS5 and for the first time I had doubts about couple of screens shown at WWDC 2011 (especially the Home Lock Screen).

Old Screen                                       New Screen

Here are my thoughts on why the old Lock screen was better than the new Lock screen:

1. Speed – ‘Slide to unlock’ is an action where  a user swipes his finger from left to right. On the old screen, users do not have to worry about missing the target. But on the new screen, there is a continuation from the first ‘slide to unlock’ object to second ‘Camera Icon’ object. To avoid misclick on Camera icon, users need to be cautious that they do not slide past the first object. This makes the unlock action much slower.

2. Error Prevention – This follows the first point. Users cannot make an error on old screen.

Bottom Line: Camera Icon on the Lock screen does add value, but placing it right of the unlock slider might be a bad idea.

A TurboTax Story

This year I decided to file my taxes online. This was the first time I was doing it on my own and I was a bit skeptical about using an online service. But filing tax on TurboTax was one of the best online experience I’ve had in a very long time.

Yes, the Information Architecture, Interaction design and Visual elements were all good, but it was the concept of story telling which made the complicated process look so easy and straightforward. It felt like the flow was broken down into different chapters, with a good introductory paragraph to each chapter. The language used on each page made the process very informal, but in a good way.

 

Sliders in YouTube iPhone App

The screenshot shows the player in YouTube iPhone App. The interface is simple. It has 2 sliders, one for time(progress), and other for volume. Sliders are web standards for these 2 interactions. However, it is always a good practice to clearly distinguish these 2 separate actions. I have already interacted with the volume bar couple of times, mistaking it for the progress bar. It would’nt be a bad idea to have a speaker icon next to the volume bar.

Optimizing my UX Portfolio

I launched my new Portfolio on August 2010. I’ve tried optimizing it for various keywords for a better Search Engine visibility. It is not very hard to land up in the first page of Google Search for really specific terms related to my projects and experience. But for a generic keyword like ‘UX Portfolio’, which is used in every UX portfolio, it gets competitive to find a spot in the first page. When google first indexed my new portfolio, I was somewhere in 5th page for the keyword ‘UX portfolio’. And we know that users hardly go past the second page. After 5 months, I finally crawled my way to the 1st page (see the last result in the image below).

Instruction Mismatch

My Panasonic Lumix digital camera does not have a touch screen interface. All the interactions are with different buttons.

There is a guide at the bottom of every screen(see image on left), indicating the actions for different buttons for that particular screen. But the problem is with the visual presentation of the guide. The shape of the buttons on the interface(circles and triangles) does not match with the actual buttons on the right. A simple solution would be to change the interface (changing the physical button shape would be difficult).

‘unable’ to Login to Chase iPhone App

Chase has a very well designed iPhone App – one of the best I’ve seen. But there is one major problem – the Suggest Text feature of iPhone is not disabled in the Login screen.

So when I enter my User Name ‘umanka’, it suggests ‘unable’. And unless I explicitly click on the cross, the suggested word over writes the written word. People have all kind of User Names, so Login screen is the last place you want the Suggest Text feature enabled. It makes the Login process slower.

Bigfoot…er

No, the above image is not a screen shot of an entire web page. It is the Footer of Zappos, which looks longer than most website’s landing pages.

This gigantic footer is unnecessary and there is no value add:

1. Majority of the links found here are redundant, which are already in the main page(under primary and sub navigation). If the user was unsuccessful to capture this information from the main page, then a.There is problem with the Information Architecture of the site and b.I don’t see why and how a user will find that information in the footer.

2. Information like quick links, blog link, feedback link, company information etc, which users expect to find in a footer, are lost because of the visual load.

Catch me if you can

Weird navigation fail to surprise me anymore. Every time I think I’ve seen them all, I come across a totally new implementation.

Look at this navigation from premierleague.com, the official site of English Premier League:

When you hover over different tabs, the sub navigation is displayed on the white space below. When the cursor moves away from the tab, the corresponding sub navigation fades away in approximately 1 sec. But the problem is that the sub navigation is always left justified:

So the user has 1 sec to move the cursor from the tab to the sub navigation, before he loses it. And he has to make sure he does not hover over any other tabs or links on his way.

A better implementation: Keep the sub navigation below its parent tab.

Is it Usable Enough?

A common question Clients, Stake holders, Product Managers and even my colleagues often ask me is – “Is it Usable enough?”. What they want to know is, if enough user testing has been done and if the product is ready to go live into production. So, how do you answer this question?

First, let us see the two different ways to measure the overall usability:

1. Quantitative: So 4 out of your 5 users have successfully completed the user test. 80% seems like a really good pass percentage. But, is testing 5 users enough? And with tight releases, you don’t normally have the time to recruit and keep testing users. This is where companies like Google and YouTube have a big advantage. They live test their designs with millions of their users, and in no time they have enough test data to determine if the design is usable or not.
Analytics is another quantitative way to measure usability. Again, if you have a small user base or if you are launching a new product, it takes time to collect enough data.

2. Qualitative: So 4 out of your 5 users have successfully completed the user test. But the 5th user failed miserably in his task. This is where the design team has to make a decision. If they feel that the user who failed to complete the test was just an one-off case, and similar situation will almost never replicate, then they go ahead with the release. If not, they need to test more users. And if there is a time constraint, they need to trust their skills and make changes to the design.

So how do you decide ‘if it is usable enough?’. It is not just about reaching a predefined number of users who successfully complete the test. Neither is it just about keeping on testing users until you reach a stage where no user is flabbergasted. It is actually the combination of both. The right balance depends on your product, users, design team, development/release cycle and the organization as a whole.

F1.com Navigation

Formula 1 has finalized 20 tracks for the 2011 season. Each track is a separate tab in the website navigation. The categorization makes sense, but because of the number of tabs, they had to split the navigation into 2 lines as seen in the screen shot:

The problem is with the way these tabs are organized within the navigation.

There are couple of problems with this organization:

1. People read websites in F-shape pattern, ‘left to right’ and then ‘top to bottom’. Especially at the top of the page, people read horizontally. The numbers associated with the tracks(tabs) are the order in which the season would proceed. So users are very likely to mistake the order of the races, as they would scan the horizontal line first (1-3-5… instead of 1-2-3…)

2. It is slower. As seen in the image, each tab is captured with the eye movement in different direction. If the tabs are organized in a horizontal layout, the entire line can be captured in a single eye movement, and requiring a change in direction only when the first line of the navigation ends.

Zappos Breadcrumb

Zappos breadcrumb has a unique behavior. It does leave trails as you filter and navigate to a page , but these trails are not back links. The trail is removed when users click on it, creating a new path (search). For example, look at the image below

The current navigation in the breadcrumb is Shoes-Men-Sneakers and Athletic shoes-Shoes-Adidas. When I click on Men, it removes Men from the breadcrumb. The new navigation is  Shoes-Sneakers and Athletic shoes-Shoes-Adidas. The resulting page displays Sneakers for both Men and Women, when I intended to search for all types of shoes for Men.

This new behavior is fine. What bothers me is the interaction design. Yes, there is a ‘cross icon’, and the proximity between the text and the icon forms a group. But the text itself looks and acts like a link. A user does not expect a negative removal action on clicking a text link, unless the text is negative. So one solution would be to add the prefix ‘remove’ before each text, which creates lot of visual load. A better solution is to remove the link treatment from the text and keep only the ‘cross icon’ interactive.

Caps Lock – Does it have a place on your keyboard?

In the new Cr-48 notebook, Google replaced the Caps Lock key with a Search key. Yes, people ‘Search’ more than they ‘type in all Caps’, but does that justify the exclusion of Caps Lock altogether?

I was never fond of the Caps Lock, Num Lock and Scroll Lock (still not sure what it does). Unlike the other keys in a standard keyboard, these keys retain 1 of the 2 states (on/off) once the key is released. To help users keep track of the state, manufactures started using lights which toggles with the state of the key. Apple integrated the light with the key for better association. Even with these visual cues, users still make mistakes. They type all caps words, passwords etc. when they don’t intend to. This is because when a user is typing, his attention is never on the Caps Lock or the light. A skilled typist seldom looks at the keyboard when typing, and a beginner’s locus of attention is completely on the keys he is pressing.

Most of the laptops have already ditched Scroll Lock and Num Lock. It is a good decision by Google to exclude the Caps Lock key as well. This reduces user errors. And a search key looks like an ideal substitute for it.

But there are still scenarios where all Caps text is used. For example, you want to make a poster which catches people’s attention. You don’t want to hold the shift key when typing an entire sentence or a paragraph. This is where I want to see the Caps Lock function move from keyboards to applications. When designing an application, companies should identify possible user scenarios, where all Caps might be used, and make a decision to include it or not. For example, having a Caps function would add value to applications like Adobe CS and Microsoft Office. And for chat applications, which wants to control the Trolls using all Caps all the time, Caps function can be avoided.

My new multi function Tommy Hilfiger watch

My new Tommy Hilfiger multi function analog watch arrived on Christmas eve. It has 4 functions. It shows:
1. 12 hr time
2. 24 hr time
3. Day of the week
4. Date of the month
These functions are controlled by one crown with 2 modes. In the first mode, turning the crown clockwise moves the date forward, and turning it anti-clockwise does nothing. In the second mode, turning the crown clockwise moves the minute hand forward, and anti-clockwise moves it backwards.

At first, I was skeptical about having just one crown as the interaction to control 4 different functions. But in fact, it is a really good design. It follows one of the important practices in interaction design – Error prevention is better than undo, which is better than warning messages.

Of course, there cannot be a warning message as it is a analog watch. The 24 hr time and the day of the week are controlled by the minute hand. A single complete rotation of the minute hand moves the 24 hr time by 1 unit. And once the 24 hr hand crosses 24, the day of the week moves by 1 unit. So basically, 3 functions are controlled by a single interaction with the minute hand, which eliminates the error.

This looks like lot of rotations to change the settings. But the only time you would need to change the 24 hr time or day of the week is when the watch stops working, and you haven’t had the time to get it repaired. How often does that happen? Say, once in 3 years, when you forget to change the battery. But the date of the month is a different scenario. You need to adjust it every alternate month. And so a separate mode in the crown is dedicated to it.