Thursday, August 30, 2012

Post#7 Drop Down Menu

I've been thinking about what to take on next. Of the various options available I took on creating a Drop Down Menu. It took me a while. One of the things I'm really bad at is UI design. Not for the tags etc. but the colors. I truly appreciate the challenge of a great UI. Mint.com has a great. UI. It takes a lot of creativity to design a great Drop Down Menu. It might look deceptively simple, but it's not. And it's not the JavaScript. It's the interface.

I did not want a Hover drop down menu which a lot of sites sport. In fact many a sites have completely done away with it. They show simple Tabbed menu. You click and get to where you wish to go. But lately, in the last 3 years I've seen a lot of sites create monster menu. In fact I love it in some sites. Hence I decided to go with it.

It's tough to use that much real estate effectively. I soon realised. I tried to create a help on the features but it too small for effective help and too big for showing just a couple of links.

Also the color scheme is tough to nail. I spent 2 days just playing with the palate. Finally I came up with some hideous colors.

Another challenge is usability. The main hover menu may be on the right but the sub menu options are on the left. When I moved the cursor across the menu itself changed as soon as the mouse moved over the adjoining tab.

One of the options I tried is to leave some blank space at the top do that when you move the mouse you do not go over the neighbouring tab. It made the menu look so empty, it sucked.

I finally created a small timer function to circumvent the issue. Now the menu would change only if your mouse stays over the link for more than 500ms.

I liked the idea that implemented something that does not ruin the experience. No empty spaces needed.

I'm done with Drop Down stuff. So from tomorrow it's back to the transaction processing. I'll start with Label Creation and then move to user registration

No comments: