Skip navigation

Category Archives: Usability

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

Advertisements

Since my childhood, I have been extremely lousy when it comes to drinking sufficient amount of water to keep myself hydrated. Something that started out as bravado in those cricket training sessions during summer (“I can run X laps without drinking water”), cultivated during my 4 years stay in a hostel (no water in the hostel at times), it needed corrective action, and after getting hammered umpteen times by Her Highness about me going though days on a single glass of water and inviting problems for myself (never ever doubt a woman’s intuition), I finally decided to do something about it.

Enter Waterlogged. Waterlogged is an iPhone app that lets you log the amount of water you drink in a day. You can set a goal (I set mine at 2.5 L per day) and track how much water you drink, which pushes you to meet that goal. What’s more, Waterlogged lets you set reminders to remind you at specific points during the day to drink water.

There are some things that I like and then there are some things that I sorely dislike in this app. In this post, I aim to analyze the usability aspects of Waterlogged and suggest ways in which the app could be improved.

Please bear in mind that my suggestions are based on analysis of my usage patterns alone, and that’s a very bad sampling size to base suggestions on, in general. I would be happy to hear about the experiences of other users of this app.

The basic premise of this app is that every time you drink water, you record how much water you drank. This knowledge is used to display how well you are progressing in attaining your goal. Having used this app for a week, I could come up with the following scenarios where I used the app:

  1. Recording the amount of water I drank recently. I do this religiously every single time I drink water, and so, I do this about 10-15 times in a day.
  2. Track progress against a set goal. Usually I do this in isolation about 3-4 times a day, but mostly I would like to see this just after I have recorded my latest water intake.
  3. Look at how successful I have been at attaining my goal over a period of time. Usually I do this once a day or even lesser than that.

I am going to use these use cases and their frequency of occurrence to explain my issues with the user interface of this app. Here goes.

I spend roughly 10-12 hours in my office, mostly in front of my laptop/desktop. Since are hands are already occupied by the computer, it would be so convenient if Waterlogged had a web interface through a website OR some desktop gadget/side bar based app where I could quickly log my water intake instead of taking out my mobile phone, sliding the bar to unlock it, clicking on the app icon to launch/resume it, and then logging my intake. I would presume that since this app is primarily an app to gather data, the developer would keep all points of data entry open, the other points being entry via a website/desktop client. This is a sore limitation I face every single day I use my app. The point is… rather than fitting into my flow of the day, I have to keep breaking my flow again and again to use this app. Also, there are some things for which the mobile UI is just not cut out. The case in point is the graphs feature of the application. You cannot slice and dice information in the charts as effectively on a mobile UI as you can on a desktop/web UI.

The charts of the application leave a lot to be desired. Especially in the area of zooming. A touch sensitive smart phone provides several opportunities to replace traditional ‘click’ based UI with intuitive hand gestures. The common gesture we have come to associate with zooming on an iphone is the ‘pinch in/out’ gesture. The charts in Waterlogged could have used that easily to zoom in/out, instead they rely on clicks to specify the time range of the charts.

Talking of time range, one of the things I am always interested in looking for is whether I drink water uniformly throughout the day or if I have dry spells. Unfortunately, as shown above, the app does not give me any way to track when I drank water in the day broken down by the time of the day. Too bad.

I would be OK with these limitations to some extent, but I really get irritated by the number of times I have to click to record a drink. This use case starts on the application main page.

Though the glass that shows the progress is a nice idea, I think that the record drink button is a bit too small for an action that is done so frequently. It could have been a little larger. It’s small and I have managed to miss this button a couple of times when tapping it, which really pisses me off. Also, the color of the button seems to be incorrect. The button doesn’t stand out much against the gray background. A green button (to indicate a positive call to action) would have been so much better.

On clicking the button, I am taken to a screen to record my drink. The app does provide some common ‘glasses’ and quantities as shown in the screen below and it lets you take a photo of your glass and associate a volume with it to ease recording of a drink. In the screen below, you can see that I have created a glass type for the one that I get at my work.

You can also enter the volume of water you drank instead of recording by glass size.

Though helpful, this doesn’t have to involve these many clicks (min 3 clicks, 4 on avg). E.g., I drink about 4-6 glasses of water at work. The same type of glass, the same amount of water. It would be so much better if the app UI was a bit more co-operative and looking at the frequency of recording by glass type, would give a shortcut to record a drink based on most frequently recorded glass type/volume. If this shortcut option was presented after I press the ‘Record’ button in the first screen, the number of clicks would be down to 2 on an average.

And then there are some features of the app that I just cannot understand. I am still trying to figure out why I would want to know the place on earth where I drank a glass of water. I don’t get it why the app tracks your location and dutifully logs the location for every glass of water. For someone like me, this data is useless since I mostly drink water at work or at home, and my drink map has a huge bunch of pins at two locations. Period.

All and all, a decent app, that has definitely helped me meet my goal of drinking sufficient amount of water everyday, but it’s user experience has scope for improvement.

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), 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.

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