Skip navigation

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.
Advertisements

For the past one week (or more), Phulki.com 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 Phulki.com? 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 Phulki.com, here are some good examples of how to do a maintenance page:

http://www.smashingmagazine.com/2009/06/12/effective-maintenance-pages-examples-and-best-practices/

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?

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.

  1. Buy a $130 pair of Ray Ban sunglasses
  2. Use them, rave about them for 2 months
  3. Show your stupidity by holding them with your lips while clicking your wife’s photo, and open your mouth to shout posing instructions so that the sun glasses fall to the ground and get a scratch which would put a tiger’s paws to shame.
  4. Hunt for the receipt. Fret over not finding it. Blame the world, curse your fate. Roll with agony.
  5. Let your wife find it for you (and make your hear this fact for eternity).
  6. Get your scratched sun glasses exchanged for free from Ray Ban 🙂
  7. Goto step 2. 🙂

I wanted to embed a font in my JavaFX application. Sure enough, the first Google result led to the answer (http://forums.sun.com/thread.jspa?threadID=5353505). But the result is not something that I liked. It worked programmatically, but visually I was disappointed:

Here is the same text using the same font in Photoshop.

I like the second one. The JavaFX rendering does not stay true to the intended look of the font, and for my eyes, has a smudgy look to it (then again, I am no fonts expert). If you are using such a font in many places in your application, this difference between the photoshop mockup and the actual application starts getting to your eyes.

Maybe I am missing some trick or maybe the font rendering is indeed like this on JavaFX. But if this is the way JavaFX renders fonts, I am a tad disappointed for now. Maybe things will improve in upcoming versions.

This one is straight out of the “don’t do this” examples. Buxfer is a website that helps you manage your finances. It was pretty good till Mint blew me away. So today, I decided to delete my account data on Buxfer, which is when I got this nugget (below):

Now what is the problem? Neither of the options is selected by default. One could argue that the choice is left to the user since this is an irreversible action. But then why is the submit button enabled? I promptly clicked it and got this:

Woah! Now there is no way to go back to the previous screen! I have to go to the accounts page and again press delete, and must not forget to select a Yes or No option. Not good.