ronny.haryan.to

Many people mistakenly think that “web design” means making a website looks nice. Well, that’s only half of the equation. It’s so much more than just layout. One of the major elements in web design is usability, which roughly means making a website feels nice. The other half of the equation that many people tend to forget. A successful web design normally requires balancing of these two major elements.

Bad usability, especially obvious ones, is one of my biggest pet peeves in web development. So when a website that I — and probably many others — frequently visit has a terrible usability, I have a mixed feeling of anger and frustration that I can only hold for so long. In the spirit of positive thinking, I’d like to channel out that anger and frustration through this (hopefully) constructive criticism.

A Closer Look at the Problem

Let’s take a look at IndosatM2‘s member site as an example.

First, I’d like to ask a question. What’s the main reason people go to their own ISP’s website? I bet checking their usage is one of them. It’s probably and arguably the number one reason, if not the only reason. It is for me at least, since my ISP doesn’t provide a Dashboard widget and no one has yet to write such widget to work with IndosatM2.

The most commonly used function should be as easy to reach and as quickly displayed as possible. It wouldn’t make sense to force the user to jump through many hoops just to get to the most frequently wanted information. So let’s count how many steps are required to check the usage for an IM2 subscriber.

Step 1: Logging In

The login form is not on the main indosatm2.com website, requiring users to click a link that goes to a separate login page. (Of course, one can bookmark the page for quicker future access.)

Things to note:

• CAPTCHA. On a login form? What’s the point?
• The size and the location of the login form compared to the text on the side.
• The order of the points in the text. The “Usage History” point is last.

How to improve:

• Remove the CAPTCHA. To prevent or deter brute force login attacks, use delayed response on failed login attempts within a short period of time. Block the IP address (either temporarily or permanently) after 50 repeated failed logins within 5 minutes, or whatever is reasonable.
• Make the login form bigger and place it in the center of the page. It is a login page after all, so the login form should be the center of attention. Move the text below the login form. Show the Usage History as the first item.

Step 2: Closing Useless Popup

Things to note:

• Needs to click on OK to make it go away.
• It serves no useful purpose.

How to improve:

• Remove it altogether. We would know if the login is successful or not. Only tell us when something is not working, not when something is working. It’s like a little child yelling proudly everytime they managed to accomplish the smallest things: it’s cute at first but it gets annoying after 3 times. Yes, Mr(s). Programmer, I know you have mad Javascript skills, but who are you trying to impress? Let me guess, you got the inspiration from Windows’ popup balloons?

Step 3: The Home Page

Things to note:

• The size of the image.
• How the image serves no useful purpose.
• Needs to scroll down to see the actual contents.
• How “Last Invoice” and “All Invoice” (sic) functions are highlighted in the home page.

How to improve:

• There’s already a menu on the right side. Make it hierarchical so that the user can get straight to the function they want rather than requiring them to see an extra page that only contain the submenus.
• The “Last Invoice” and “All Invoice” (sic) buttons can go away. They are no longer necessary. Instead, put the contents of step 4 and 5 directly into this page. Read more below.
• Remove the obnoxious image. At least, don’t make it so big, or move it somewhere else, don’t make it the first thing I see when I log in.
• This step can be eliminated.

Step 4: The Usage Page

Things to note:

• It already knows what month and year it is now (they are shown as the default).
• Needs to click “OK” to get the information for that month.
• Hmm. What does “Cancel” do?
• The obnoxious image that serves no useful purpose.
• Needs to scroll down to see the actual contents.

How to improve:

• Show the month selection box straight in the home page, instead of in a separate page.
• Make last month as the default value. See “How to improve” in step 5 for the reasoning.
• This step can be eliminated.

Step 5: Finally

Things to note:

• Again, the obnoxious image and the scrolling down.
• The inconsistent use of English and Indonesian.
• There’s no easy way to see data for other months, must go back to step 4.

How to improve:

• Show the results for the current month straight away in the home page. This is what most people want to see. And since you already know what month it is now, why don’t you just show me right away?
• The system can detect what day of the month it is now. If it’s still early in the month the system can also show the total usage for last month in this page.
• The month selection box in step 4 is always shown at the top (and optionally at the bottom) of the page with the default value set to last month.

Conclusion

The steps can be reduced down from 5 to only 2 without sacrificing any functionalities. The most useful and frequently used features are highlighted and shown as reasonable and sensible defaults. Logging in should be easy (username and password, that’s it). Then the home page, containing the current month’s usage (probably the most commonly requested information), is shown right away, without any annoying popup. If the user needs to see data for other months, then the month selection box should already be accessible from the same page, showing the next commonly wanted information (last month’s usage).

Other Examples?

There is another public website that I use quite often and I find that it has plenty of rooms for improvement in terms of usability: KlikBCA. But one can write a whole book on that website alone discussing what’s wrong and how to improve it.

Have you seen other public websites that can be improved in its usability?