Skip navigation

Tag Archives: bloopers

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.

Advertisements

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.

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.

[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?

Nowhere.

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.

I have been dabbling with Grails of late, for a pet project. NetBeans comes with a sufficiently usable support for Grails. The other day, while installing a plugin using NetBeans, I stumbled upon this confusing UI. For anyone who has worked with the Grails command line, the list of plugins is self explanatory. However, what got me was the way to install the plugin once I select it in the list.

NB Grails Plugins Dialog

See that ‘Install’ button there? It is so close to the plugin location field. It doesn’t catch your eye since it somehow feels related only to the plugin location field. Also, the dialog poses questions to me when I look at it, questions which can only be answered by trial-and-error, which is bad:

“Am I able to select multiple plugins from the list and install them with one click?”

Turns out that I can’t. Then again, not many folks need to install many plugins in one go. But some indication might have helped. You see, GUIs are supposed to be one up over command lines, so I was assuming multi select is possible, only to try out and find it otherwise.

“Am I able to select a plugin from the list and specify another plugin’s location in the field and install both of them with one click?

Again, an extremely rare use case. This is very similar to scenarios you might have while installing NetBeans plugins themselves and the UI there makes it very clear what can be done simultaneously and what cannot be. Below is the screen shot of the NetBeans Plugins Installation UI.

NetBeans Plugins UI (Manual Install)

NetBeans Plugins UI (Update Center)

As can be seen above, the NetBeans Plugins UI has two tabs – one for plugins available from the update center, and another for installing plugins from your hard disk.

And since NetBeans is an open source project, the action item for me is to check out the sources, implement the fix and submit the patch for evaluation and inclusion into NetBeans 6.9. Stay tuned for updates.