Buttons that don’t look like buttons: a rant on usability

As part of work, I recently was installing and configuring an open source
software. I was in a big hurry to get something done. This software was
a helper program; it did something awfully nice and useful and which
would make “disciplined” programmers jump with joy. But I was not
jumping with joy. I had something to get done. I needed this software,
but I was not prepared to delve deeply into it. I did not want to learn
too much about it. I just needed it to work, bare minimum, no fancy
stuff, so that I could get on with writing my code.

I suppose I was mentally prepared to fight the software. If it actually
was performing such a nice and useful function, it ought to be
complicated and self-important. “Read my README”, I imagined it
saying. “Then read the INSTALL.txt, and Getting Started, and then
Adminstrator’s Guide…”. I was hoping to wing it. I’d try to start
it, see what broke, try to configure that, see what else broke, try to
fix that, and so on until I won and the software lost the game of

My fears turned out to be grounless.
Installing it was a breeze. One just unpacked the
software and ran a start script. All dependencies were already included
so I did not have to hunt down any. It just started up, presenting a
web-based management UI. It was already configured with sensible
defaults to get a new user up to speed quickly. Wow!

My next step was to create a user account. I brought up the web
management console in firefox. I clicked on the “Users” link, and was
presented with a list of existing user accounts. I could not see how
to create a new user
. I could see how to attach users to roles, I
could see how to search for users using their name, role, email etc.
But for the life of me I could not figure out how to create a new
user account.

When I was just about to admit defeat and turn to the “User Manual”, the
answer jumped out of the page and smacked me in the forehead. There it
was, clear as day, a button labeled “Create New User”. I had been
staring at various links and trying everything on that page, expecting
that this step would be as easy as the install part was, and getting
slightly annoyed that it wasn’t. I had been clicking at everything but
this button. In fact, I had given this button a good long stare and
looked around it to find a link that I could click.

Had my brain suddenly turned into putty? What is so hard about clicking
a dar***d button?

There is nothing hard about clicking a button. Except that the button
in question did not look like a button. The button looked like a
flat, light gray box. When I hovered the mouse over the box, the cursor
did not change into something that indicated “click me”. Basically,
someone had gone out of their way to create a CSS style that made
the button obscure.


Because it looked “better”? Because it was there to be styled? Just
because? Beats me. The point is that this beautifully useful and easy
to setup software had a GUI blooper right there in the management
console on one of the most commonly used functions. In other words,
this very useful software, which was insanely great in so many other
ways, had a usability issue.

Same day. Another web page. This was a commercial web site that served
up search results arranged alphabetically. There was a nice, helpful
row of navigation links at the top, labeled “A”, “B”, and so one all the
way to “Z”, to allow the user to see results starting with that lette.
The letters were surrounded in a nice, colored box that became highlighted
when your mouse hovered over the box.

So I moused over to the box containing “P” and when it was highlighted,
I clicked.

Nothing happened.

So I double-checked and found that while the box gets highlighted when
your mouse hovered over it, only the letter itself was clickable, not
the box. The “target area” presented by the letter is significantly
smalled than the box, forcing you to be precise about where you click.
There might as well not have been any box. In fact, the box was
downright misleading. It looked good. But it lulled my busy brain into
trying to click something that was not clickable. Another usability

Usability has been on my mind recently. (Gee, can you tell?). It is
amazing that there is so much software and so many websites out there
with small, niggly usability issues that are sucking away seconds,
minutes or hours of their users life as they grumpily are trying to get
their jobs done. It is sad, really. The code is there. It works. But
the path to executing that code is strewn with brambles and thickets of
usability issues.

Programmers need to pay attention to the usability of their UIs. Most
books, tutorials and manuals focus on making the UI look good, but few
point out how to make the UI more usable. Most people don’t read the UI
design guidelines of the platform they are working on. And there are
probably no standard guidelines for designing for the web. Web
technologies are changing too fast anyway for any technology focused
guidelines to remain relevant for long. The core principles are taught
in the discipline of Interaction Design. But I don’t think many people
know what Interaction Designers do. I myself didn’t until very

There really ought to be more interaction designers out there and they
ought to have more work. Programmers and managers should be paying
attention to the usability of their software and its interface.

But for now, I am too busy slapping together functionality to pay
due attention to how it will end up getting used. Oh, I think about
this issue and try to do something about it, for sure. I try to design
the software, imagining the end user and his/her goals in mind.

But that is not enough. User interviews, mock-ups, usability testing
are some of the tools that are involved in producing usable software. I
did not budget for it; I did not set up any time for it. And I wonder
if anyone would understand me if I told them I wanted to take a flight
to meet our users (internal business folks) and do a usability testing.

Or maybe they would. One of these days, I am going to try.

Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s