Skip navigation

Monthly Archives: July 2011

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

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.

Buttons are one of the major action triggers in UI design for the web. So, it’s imperative to get them right. There are tonnes of tutorials out there on the web on how to style buttons, and though the beauty of web designing is the chance offered to the designer to be creative (as opposed to desktop design where the UI guidelines mandate a more or less similar look and feel), a clear trend has emerged in button design for Web 2.0 sites.

While fiddling around a site – Handcraft, somehow, my eyes were finding the buttons a bit jarring, so I decided to investigate what was going on.

Here’s a button that is displayed on the site.

Maybe, it’s my eyes, but I really find that shadow too pronounced, reminds me of the shadows in Powerpoint 97. The CSS of the site says:

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);

I changed it to reduce the opacity to 0.5, softened the rounded corners a bit, and added a bit more weight to the heading and it looked much better. Since the background of the whole section was light blue, I just couldn’t resist putting in 2.0 style insets.

I am not suggesting that the original CSS of the site is wrong in any way. I just think the minor tweaks, especially to the button shadows, made it better for my eyes.