Skip navigation

Tag Archives: gui

Came across this rather hilarious blooper today. I’m being honest, I just started laughing out aloud when I noticed this while working. This blooper is about a completely incorrect use of tabs. Read along.

We all have seen dialogs such as the one below, when editing web pages either in a CMS or in a wiki. Pretty standard stuff – you specify the number of rows and columns and hit Insert to insert a table in your page. If you need to customize your generated table, just go to Advanced tab and put in the additional options. On the face of it, looks like a really well designed UI. Most of the users will only want simple tables, so the advanced tab hides all the complexity of additional options for most of the users, while offering it by request for the selective power users who might need them.

Until you notice that the Advanced tab is in no way connected to the Simple tab. The Advanced tab generates a completely different type of table. In other words – either create a simple table OR an advanced table.

This is so bad. The tabs don’t convey the EITHER-OR relationship in any way and depending on which tab you have active when you press the Insert button, you might get a simple table or an advanced table (an advanced table has different styling too by default).


Apart from having a pathetic attitude towards online payment (by charging a $5 convenience fee for online payments), NRM has made a website which is a pure delight for some one looking for GUI bloopers. This is just one nugget from the site.

I am pretty sure that only a person with a nice pair of shades can see whats written on the “button”. What a fantastic color combination.

Yes, I am still alive, although extremely busy.

My recent trip to India involved a fair bit of air travel, and while performing a “web check-in” on the Indigo airlines website, I came across this little nugget.

The UI designer seems to have a liking for radio buttons. Looking a the page, there seems to be a connection between all three radio buttons on the screen, while the connection is there between only the first two. Whats more, the user has no way to not accept the terms and conditions if he has already selected the radio button earlier.

Two remedies come to mind.

Checkbox instead of a radio button

An explicit option to not accept the terms and conditions

In the example above, what does the Cancel button do? The answer is: it does nothing. Clicking on it opens the application anyway. So, why call it cancel? OK could have been much better.

After my recent post on a maintenance page of a site leaving much to be desired, here is an example of a site doing it right.

The page feels so right. The following elements make the page effective:

  1. An apology for the inconvenience.
  2. An assurance that the issue is being looked into
  3. A possible remedy
  4. A couple of backup link suggestions for the user to spend his time while the issue is being resolved.

For the past one week (or more), has been a picture of sadness.

Isn’t it annoying that a site goes down for maintenance for about a week or so, and doesn’t tell you a single thing about when it’s going to be back? “Please check back shortly” is an insult to a user who expects “shortly” to be a day or so (generously), and keeps coming back to the site for about a week, to find the same message, and then gives up and finds some other streaming music website. Nice way to lose loyalty.

How short or long is “short”, dear Surely 7 days is not a short time. I am trying not to be too harsh to the Phulki folks, but this is an example of poor (rather zero) feedback. Problems happen. Maybe something is so seriously broken that it does need 7 days (and maybe more) of maintenance. But then, would it not be better to keep the user informed of this? The message should have mentioned when the site is expected to be back up. Also, it’s generally good to own up to the issue. Saying sorry and assuring the user that the folks are doing everything to resolve the problem quickly helps preserve the loyalty of the user. Also, if the maintenance is a planned one, then it’s always a good practice to give advance notice to your users about the maintenance coming up (Phulki did not do this as well).

For the folks at, here are some good examples of how to do a maintenance page:

This is a screen shot of the Phulki Media Player. I love Phulki. Be it parties at home or listening to some good music at work, I use it quite a lot. However, in the player above, one small UI issue caught my eye. Look closely at the play list control buttons at the top: . The first button is for repeating the songs, and the second one is for shuffling the songs. Quite standard for media players. However, look closely at the buttons, you will find that the first button is slightly ‘grayed out’ compared to the other. Usually greying out is associated with disabled or turned off capabilities. However, in this case, I have enabled song repetition! If I disable it, here is how it appears: . Now you can see that the button is back to it’s original color. This is confusing, at least to me. The grayed out version of the button conveys to the user that the feature is OFF when it is actually ON. Compare this to the daddy of all media players – iTunes: . The glowing icons in iTunes suggest to the user that the feature is ON.

Let us look at this (you can click on the image to view in it’s original size):

This screen is shown as part of joining a new meeting in WebEx. What is the wrong here? Not much actually, but here goes.

The intent of this UI screen is to ask the user if he wants to change the preferences for the meeting he/she is about to join. It shows the current values, and there is even a nice little check box to remember the values for future meetings. But look where the ‘Yes’ and ‘No’ buttons are. You could drive a truck through that empty space between the buttons and the text! The buttons and the text are related, yet spaced so far apart. Ideally, they should have been on the same side of the text.

The zoomed out image above gives you a good idea of the problem. Which part of the image catches your attention when you see it? I bet it’s the left part (if you say both right and left, I think you are  one who is afraid of Kryptonite). It’s only after you read the text that you realize that you have to take an action – i.e. choose to accept the current settings or override them, and immediately, your eyeballs start the search for a button (or a hyperlink) or some control to initiate the action (and for the first 1/10th of a second, you would not find it). Not to mention the workout involved in dragging my mouse all the way from the left of the screen to the right for one click.

A twitter like post this time.

I came across a very nice blog post on Progress Trackers in Web Design. You can read it here. The examples there really made me understand how easy it is to confuse Progress Trackers with Bread Crumbs. Definitely worth a read.

[Update: Chance Roth, from Cloud Canvas, indicated in a response to this post that there are changes underway for upcoming releases. His response made me re-evaluate this post, and I apologize to the Cloud Canvas team for using over the top abrasive language. I realize that a lot of hard work goes into launching a startup and getting this far. I have updated this post to tone down my dismissive language. I look forward to trying out Cloud Canvas’ upcoming releases.]

I must say, I am pissed off right now. And why is that? Here goes. TechCrunch, a site I visit regularly to keep myself abreast of what is happening in the tech world, had an article about the Founder Institute, graduating some startups. One startup caught my eye – Cloud Canvas. These days, the word ‘Cloud’ is the buzz word. Plus, I am looking around for a cheap Photoshop replacement, and thought that I could give this Cloud Canvas thing a try. Just two minutes on the site were enough to drive me mad. Here’s how the site looks.

Cloud Canvas Home Page

I wanted to see the features offered by this site. I wasn’t going to create an account just to try some site and then discard it if it was not up to the mark. Sure enough, the list of features was there.

Cloud Canvas Features

This list would have made an MBA proud. To a person like me though, this is just trash talk. Show me what it is doing. Any demo? Any visuals? Nope. As usual, when I can’t find what I want, I assume that I am an ass. However, in this case, I am sure I am not, since there is no such thing as a demo. This is an issue since Cloud Canvas is a startup, eager to get new users. And it doesn’t show them why they should use the site. And by the way, if you click on that ‘More Tools and Features’ link in the screen shot above, where does it take you?


At this point, I was sure to include this site in my rants about GUI bloopers, so I soldiered on. The UI to create a user account was quite a treat to someone trying to find bloopers. Here’s the UI:

New Account Creation UI

Hmm, I can’t make out if all information is mandatory. To add to it, usually sites impose some restriction on the length of the user name, password and the characters it can contain. I can’t make out if such restrictions apply here. Since I am not told of any, I think there are no restrictions. Sure enough, something beautiful happened:

Amazing! The error popped up after I hit TAB to go to the next field. Now, why can’t this site tell me what it expected before I started typing? Also, the error message would have made another MBA proud. It gives the user no clue on how to recover. What do you mean by wrong length? What is the right length?

And the crowning glory lies in that little field called ‘Beta Invite Code’. Since is is not marked as mandatory, I kept it blank (since I don’t have a code) and clicked on ‘Register’.

Which missing field?

Which missing field should I enter? All? But I had entered all except one. But the site lost all my information. But, the bigger point is that if the site requires an invite, for God’s sake, make that obvious.