A site devoted to discussing techniques that promote quality and ethical practices in software development.

Tuesday, May 10, 2011

No use to defend an indefensibly bad user-interface

I was shown a web application designed to manage project and progress report, a la MS Project minus the Gantt Chart and time lines. I am not a user of any project management software and hence this post is not about its capability, though my shallow knowledge of this topics tells me that it is rather incomplete.

As a software developer with low tolerance of terrible user-interface that only the creator loves, this package has an example that really enrages me into highlighting it here. Consider the following screen capture showing the 'Select All' check box circled in red:


A shaped-eye reader will instinctively spotted something amiss in this diagram; the 'Select All' check box is checked but the other check boxes in that column aren't. Well according to the developer, this is a feature. Let me describe how this 'Select All' check boxes works in this application.

Normally it was not checked and the user can check the relevant row by using the check box which operates in the standard manner.

The minute you click on the 'Select All' check box, it selects all the check boxes in that column. Nothing strange about that and it is the same behavior as in Google's GMail or Hotmail, just to name a few.

However, the user-interface becomes non-intuitive and distorted when you try to de-select all the check boxes by clicking on the 'Select All' check box, which by now has a check mark on it, an operation that comes naturally for all users. In this crazy illogical scheme, the developer literally creates a different class of check box but with the same look and few as the standard ones. A true bastardization of the check box.

When one clicks on the 'Select All' check box the second time, instead of extinguishing the check mark and de-selecting all the check boxes in that column as everyone (bar the developer) expects, this check box maintains the check mark - a kind of one shot check box but not exactly. If you click it in vain attempt to de-select all, it in fact selects all check boxes for you. There is no way to de-select all and the 'Select All' check box is not disabled or grayed out. Because there is no way to uncheck all the check boxes in one operation, experimentation with this 'Select All' check box brings frustration and curses.

The standard check box has a binary state - click it to check and click it to uncheck - and that is the behavior any user expects when one sees a check box and not a distorted one as highlighted.

The developer maintains that it is not a bug but a feature just like so many when cornered into this indefensible situation. I think the developer is wise to read this book and constantly reminding himself that "Your user is not you". In clear vain attempt to defend the indefensibly wrong user-interface, the developer offers this way to extinguish the 'Select All' check mark, which is an other brilliant example of his failure to understand "Your user is not you":
  • Uncheck each check box in the column manually
  • Then press the update
  • The round trip back from the server will clear the 'Select All' check box.
I am surprise that he did not suggest to log out of the application and relog in as that would have done the same job more quickly saving you manually unchecking each check box. Interesting no other users think that this is a brilliant design! My advice: listen to your users as you software is as useful as seen through your users' eyes. Your user is not you or there are more users than developers.

The correction of this distorted user-interface is technically very simple but psychologically difficult as the developer has to admit that it is a bug first; they already have JavaScript code to check each check boxes in the column and it is just a simple process to run the code through to uncheck them. In fact, they expand more efforts in creating this only-creator-loves distorted user interface.

 This software also has another time wastage feature, which clearly has not gone through any user design mock up such as "Paper Prototyping" by Carolyn Snyder.

There is a page where the user has to indicate the progress of each milestone and at which date. The date must be entered by using 3 combo boxes - one for day, month and year as shown here:


This means to enter a date, one needs a minimum of 6 mouse clicks. If the date can be entered via a edit box with an calendar icon to invoke it if necessary, the user could enter the date much more quickly.

But this will require more developer's input validation effort. Since it is already using client side JavaScript, it is not such a big deal with the most difficult task for determining the client's locale.

When you have a dozen or so dates to enter, every saving is a real bonus and the developer should consider redesigning. The current design is really for the benefit of the developer - saving code. In fact, they still need to validate the input. What if someone select 31/04 or 30/02?

No comments:

Blog Archive