Bad UX: Fixing What Isn’t Broken or Over-Designing

One of the key things UX designers and product managers focus on is how to reduce friction for their users while using their products. If there is any UX pattern in our product which causes confusion in the minds of the user, they have to double guess how to use it, or they have to put more thought than necessary into using it, we have failed.

One such product that bothers me a lot is the tap or faucet. (Don Norman wrote about it in his book The Design of Everyday Things)

You use a tap in a very simple way – you turn a knob that sits on top of the device anticlockwise to start the water flow, clockwise to stop it, the water flows out of a spout in the vicinity of the knob, and the flow of water is governed by how much you have turned the knob.
Like this one:ย shallow-focus-photography-of-gold-faucets-1021872

This is simple, universal, does the job every time as expected, and there really isn’t any reason to make any changes in the fundamental structure of this device. And if I encountered a tap like this everywhere I went throughout my life, I am not going to complain.

Yet, we see the following variations of the tap at various places, where the variations are not just in scale, shape, texture, material, but in how the tap is used:

We are left confused as to which component to turn to use the tap, or which way to turn it, or whether we are turning it in the right axis even, or whether we have to push on the “knob” instead of turning it! Why have tap designers gone to these lengths to confuse us while using such a simple device? Mind you, I am not even talking about faucets where both hot and cold water comes and there are complex knobs to ensure you get the right temperature by mixing both, or sensor-driven taps, where you don’t need to touch the tap to activate it (they come with their own challenges – where exactly do I place my hand so it works? The tap next to mine seems to be working – why isn’t mine working?).

In Software Design

What are some of such scenarios in software & app design where the interface has been over-engineered to the detriment of user experience?

  1. Synthetic scroll: This was a pattern in vogue on blogs and magazine sites a couple of years back. If you used your mouse wheel or trackpad to scroll the page, the scroll speed would be higher than usual. Why? Either because the designer had found a nifty Javascript trick to make it happen, or … I cannot think of any other reason, least of all a user-centric one.
    Scrolling is something the device & browser handle and they handle it very well, and unless your experience involves things like scrollspy and page section navigation, there is no real reason to tamper with this behaviour.
  2. The sticky mastheads on sites, which would disappear when scrolling down, but would pop up again when you scrolled up a bit. Why do we need this interaction at all? Is the screen space so limited that the content isn’t visible when the masthead is perpetually visible? It is a little bit annoying to scroll up to re-read something you had just seen, only to have it hidden behind the masthead, so that you need to scroll just a little bit more.
  3. Form validations that go ‘above & beyond’:
    1. Some form fields take only specific types of inputs, e.g. numbers. But some designers go beyond just filtering unacceptable characters – there are forms where if you press anything other than the 11 keys (10 numbers and the period), the data you have already entered in the field is simply deleted, and you have to re-enter your data!
    2. There are forms where when the page load completes, a script goes through all the input fields to reset them. How is this a problem? Say the page takes some time to load, and the user has already started to input some data, once the page load ‘completes’ (in today’s times of progressive web apps, this could be an arbitrary point in time), the script just removes your inputs.
    3. Fancy input fields which are broken into multiple input fields one character wide. The most common example is the OTP field in many e-commerce apps. Why is this done? To visually denote how long an input is expected. As you input the OTP, the focus keeps moving to the next field, and thus the experience is completed, except when the backspace isn’t coded for. When you press backspace, the previous field should be emptied and put in focus, but at times the developer forgets to code that and it becomes an issue. Going one step forward, when the user manually goes to the respective field to delete the input, the code checks the existing data length, decides that the input is complete, and thus pushes the focus to the next field, without letting the user delete the wrong data.
      1. The special case of this issue that has bothered me for years can be seen on the IPv4 configuration screen on Windows. An IP address consists of 4 one-to-three digit numbers separated by periods. While other systems let you enter it all in one textbox, and you have to type the periods as well (leaving us in total control), Windows’ designers decided to make it fancier – there are four textboxes and the periods are ornamental pieces between them. It’s nifty, except that if you are typing any number less than 100, you fill only two places in a 3-digit field, and you cannot move to the next field except by clicking it using your mouse or trackpad. The tab key takes you to the next group of fields. Pressing a backspace on an empty field doesn’t take you to the previous field either. I’ve seen this behaviour and been annoyed with it for years now, but nothing seems to have changed here over multiple versions.
        windowsip

As you can see in the examples above, designers at times go overboard in over-designing interactions where it’s not needed, breaking away from the expected pattern, thus leaving the user confused or worse still, frustrated. These mistakes are almost always avoidable, simply by falling back on the most used and easily available pattern. This goes for taps as well ๐Ÿ™‚

What are some of the examples of over-designing, in software or other products, that you have come across?

My 6 Basic WordPress Plugins

wpplugins
I make a living working on WordPress. And this blog is on WordPress. And at the risk of sounding repetitive, I’ve been on WordPress for 4-5 years now. One of the most important things in the install workflow is selecting and installing the plugins you’d need. While the exact set of plugins varies from project to project, and depends on the intended functionality of the site, there are a few basic ones that I make sure to install on every site I deploy. The exhaustive list is too big, but here’s my top six, which you may find useful.

  1. Akismet: Automattic’s own plugin which saves me a lot of time & energy in filtering out the comment spam, done by SEO bots mainly.
  2. Google Analytics: Any GA plugin will do. But most loved by us is the one by Joost de Valk. Why do you need this? You do want to know the details of the traffic you get, don’t you? And then you can export that data, import it into your spreadsheet software, and soar into the dreamy world of pivot-tables.
  3. YARPP: Remember how you forgot to leave Amazon the last time you went there, because you kept clicking on the “the people who bought this also saw this” products? Well, why not use the same tactic for your blog? Increase the stickiness. Increase the meaningful interlinks. Increase SEO juice. There are plenty of related posts plugin, but I favour Yet Another Related Posts Plugin. Why? Is the name not enough?
  4. BWP Google XML Sitemaps: Sitemaps are important. Sitemaps let crawlers know where all your content is. It’s like the related posts for robots. Must for improved search rankings, and findability. Preferred plugin: BWP’s.
  5. Regenerate Thumbnails: How many times during development have you realised you need a new size of an image, and found that WordPress is either giving you too small or too big an image? And then after registering a new thumbnail size, how many times have you wondered if you need to delete and reupload the images already in the library, so that the thumbnails in the new size are created for these images? If you have come across such questions, you need to install this plugin, which regenerates thumbnails for all the images already in the library.
  6. Smushit: Have lots of images making your blog heavy to load? Install this plugin, so that every image you upload is passed through Yahoo!’s smush.it service and losslessly compressed.

Which plugins do you recommend as the bare necessities when installing a fresh WordPress setup? And do you have alternatives to the ones mentioned above?

Share them in the comments.

Smart Web – How Smart?

While reading this Rediff.com story about Maruti Madhavrao Phad, a Maharashtra government employee who got injured during the recent terrorist attack on Bombay, I noticed something.

It is not related to the story as such. If you scroll down to the end of the story you’ll see the credits for is particular story. It reads “Image: Maruti [Get Quote] Madhavrao Phad at his home. Text: A Ganesh [Images] Nadar. Photograph: Uttam Ghosh


See the screenshot of the line. Notice the yellow areas? These are smart tags which apparently the engine parsing the code of the pages inserts to “enrich” the user’s browsing experience, by providing additional information related to the content the user is browsing through at the moment.

Note the word “related”? Now see what the yellow highlights in the image show. “Get Quote” for Maruti. Here Maruti is the first name of the hero of the story, not the name of a car-making company. Yet, the Rediff engine treats it as the company’s name, and is offering you stock quotes for it. And for Ganesh, the link is a Rediff search link with the string “Ganesh” – marked “Images”. Which means that it would return images of the Lord Ganesha, and other celebrities called “Ganesh”. Not images of the author of the article in this case, A Ganesh Nadar.

And both these tags are intrusive, they not only break the text they are placed in, they break proper names of people. Intrusive and irreverent. Considering the tone of the article, even more so.

Were they really necessary?

Why canโ€™t I pay my bill?

I use Tata Indicom’s broadband as my home connection (plugged into a wifi router, to allow me complete freedom of movement in the apartment, but that’s a different story), and I love it. Last I checked at www.calcuttatelephones.com (their speed checking tool has been mentioned on BBC’s Click), the connection (marketed as a 512 mbps connection) competes well with T1 lines. Impressive! There have been a few outages – 2 to 3 maximum since I have subscribed, but the helpline is helpful and they get the connection up in less than half a day everytime.

What really bothers me is their online presence.

Simple task: I have been getting calls from their collection people asking me to pay the due bill. So I want to make an online payment.

The usual routine with most vendors for this is: sign in to the website, click on Pay Bill, log in, follow instructions, enter card/account information, get confirmation from account provider, and you are done.

But with Tata Indicom, it does not work that way. What I need to do is, click on Pay Your Bill Online Here, log in, they should show me my outstanding, I select payment mode, confirm, read terms, confirm, log in again, on which I am directed to the usual post-login screen (the welcome user screen), then I click Pay Bill again, on which I am asked to log in again, and then I go through either of the two routes again (see my outstanding or the welcome screen). So far I have “logged in” some twenty five times since morning, but I have not once reached the screen where I am supposed to enter my account/card information for the payment processing people.

And I’m sure I’ll keep getting those payment collection calls. When I’d tell them that the site is not working, they’d say “Yes sir, we know it can cause problems sometimes, should I send someone over to collect a cheque?”

India’s biggest business house. Internet service provider. They are in the business of technology – the internet. Their core service is fantastic. How much effort or money does it take to smoothen this part of the user experience – the one where the customer is willing to pay their bill, but is unable to do so with ease? It’s not that they can’t do it. So why the negligence, why the apathy?

MetLotus – are they getting it right?

I came across this Facebook ad today, and clicked on it. It was an Indian site, which is… I don’t know what. On reaching the site (www.metlotus.com), I see the following:

metlotus.com screenshot, click to enlarge

What’s wrong with this? A good design, nice layout, soothing colours, slick animations. But where is the information about the site or the company that it represents? There are the generic social networking promises flashing in neat animation clips, but apart from that? What is its USP, positioning, the hook that would make me want to click any of the links on this page?

When I clicked on ‘Take a Tour’ (which I did purely for the reason for writing this blog), I am presented with another slick flash site in a pop-up window, which has description on how to use this site. Apparently it is a social networking venture. But didn’t the Facebook ad mention something about widgets? I clicked on that link thinking this might be a site specializing in making widgets that we can use on other social networking sites.

Now if it is trying to be a popular social networking site, why is the interface so unusable (for lack of a better word), and not intuitive? How many of us had to go through a tutorial when we first started using Orkut, Facebook or MySpace? Why does a new site, which no one knows about, insist that users log in on the front page without showing any tangible benefit to signing up?

And because I’m a designer of sorts, I also have a problem with the way the consistency with the sans-serifs in the entire design system is not maintained – they’ve used Arial in Flash animations, where they don’t have to worry about embedding fonts! That’s sacrilege in graphic designer-speak ๐Ÿ™‚

Leaving this last bit about font puritanism apart, how many times did my mind go “negative” while going through that site – can you count?

Please provide a what???

A Calcuttan missing his hometown opens up the website belonging to the most read newspaper in that town. Pleased with what he saw, he clicked on one of the sections of the e-paper. The site tells him that he needs to be registered in order to go deeper into the contents. No problem. He is ready to register. So he clicks on register and fills up a form. Presses Submit. And see what he gets:

Email ID? The form does not mention email ID anywhere, let alone ask for it. Oh, the error page tells him that the “Username” field should have been populated with his email ID.

Who would have thought? ๐Ÿ™‚

If you were that person, would you fill up that form again and continue to use the website? I didn’t. Who knows what other ‘mistake’ I would be chided for next? Is the phone number field actually supposed to contain my height?

Is it so difficult for web designers and companies that hire them to make websites that are free of inconsistencies and are helpful instead of carrying the old ’80-90s attitude of “I made this thing and it works at my end. You need to learn how to make it work for you if you want to use it.”?

It is all adding up to the user experience and thus the brand in the end.

Work – Foostor

I have been doing some work for this e-commerce site called Foostor. They build custom e-stores for IT companies for their employees to shop from.

So far I’ve worked on three banners (animated and static), and I’m on a major project with them (details to be disclosed later).

Do leave behind your comments about these:

ย  ย