Skip navigation

Category Archives: UI

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

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.