One Button Simplicity In UI Design

When apple introduced a one button mouse to navigate their new breakthrough user interface in 1983 there was no confusion about which button to click, no matter what task you are upto, and it was a instant hit. There have been countless debates about the decision of shipping a one button mouse, but it worked for apple for nearly 20 years.

Todays sophisticated mouse designs have a minimum of 2 buttons and a wheel which rolls and tilts, and sometimes a few buttons on the sides. And if you think you have have got the hang of its usage, wait till you open another application and many of these buttons could act differently. The simplicity of a single button is so effective that years ago apple chose the now famous one button mouse for their product.

That started our coffee table fights of how useful and intutive is the toolbar menu in our own product LyteRAD. It had started out very simple and usable, but over time all those extra features in the product have taken a toll on the toolbar. the menus and toolbar are often overlooked but they are the ones that face your customer everyday.

Colors & Usability In Web Design

How difficult is it to choose a nice color theme for your application or web site? This seemingly trivial task could take days of your time and you could still be far from being effective.

Though it seems easy to pick a bunch of nice colors and be done with it. It is far more complicated to choose colors that are effective and yet pleasing on the eyes. It is less of a science and more of an art, but fortunately there are best practices and thumb rules making it easier.

When I started meddling with the colors of our product, one things that struck me was that there is no universally accepted definition of what colors are nice and pleasing.

Color themes
The Color Wheel offers a good guide to choosing the right contrast and matching saturation, but if you do choose colors that are not recommended by the wheel, you are cautioned against its usage but there is no obvious rule to stop you.

A more common approach is to look at nature or a picture atleast, to get a hang on what works well. There are creatures that want to present itself and some that want to hide. The monarch butterfly is a beautiful thing to watch, note the bright contrast of black on orange. Start with a couple of colors as your base colors and then use a color wheel to figure out what shades would work better.

ColorSchemer is a free and extremely useful online tool to suggest variations.

Breadcrumbs in web design

As a web designer my company website is always incomplete, I keep redoing elements of the website to make it more usable. One thing that struck me recently is after a user has gone deep into a site, does he go back to the home page or simply exit? Yeah I know analytics should tell me that, but there is something better.

Breadcrumbs
This simple navigation guide could be the missing ingredient for that usability recipe you have just prepared. For websites that have more than a dozen pages, navigation should be given serious thought if you want your users to stick around. Can you imagine going around disneyland without those "You are here" signboards. Your website needs it too.

Theoretically the browsers back button is supposed to be enough to go back to where you came from. But imagine your user who reads your home page, then to your products page and then to your download page, and then to your forums page, now what?, should he go back every page to check your other products? Nah, he would rather goto youtube for that funny video.

Icons to kick start projects

When you are starting off a new project, as a developer the last things you want to be worried about is icons, and moreover if your graphics design skills stop at the bucket fill tool, we both know its best left to professionals.

Most of the design professionals are expensive guys, especially when you are just starting off a project and have to wait for months for a cheque. But luckily there are a few folks dishing out freebies and of High Quality, that you can wait till your project is in good shape to get your own custom icons. Here is a grand list of freely usable icons. Many of them can be used for commercial projects, do remember to check their license terms.

• Many of the icon sets on smashing magazine are free for commercial use, check them out.
• The guys at UserInterfaceIcons are giving away some fantastic icons for free, grab them while they are around
• Another beautiful set over at DryIcons
• Another comprehensive collection from Smashing Magazine, this time with more icons for bloggers and web designers
• Very artsy sets over at noupe, If you are looking for social media icons you will find lots of them over here.
• If you are all set to shell out cash, I wouldn't hesitate to recommend the IconKit bundle, an excellent value for money package.

I think that's the best collection I could find on the web, and enough to get you started and last quite a while.

Fonts - To Serif or Sans

A burning question when you are not aware of why to chose one over the other. I speak purely from a software applications usability perspective. Graphics design and impact of serif and sans serif fonts is a completely different discussion.

If you look at a serif font in a large point size like 24, you get to see pointy edges everywhere which make it Serif. Now the grandness of this font morphs into ugliness on a monitor at point size 11 and below.

A typical monitor or LCD's DPI is limited to 75dpi or 90dpi at the most, its so measily low that you would'nt bother to use a magnifying glass to check a fonts edges, they dont exist, they dissappear at that font size, in other words sharp edges and curves are simply rendered as a blur making these font ugly. But Sans fonts shine through in small sizes, for the simple reason they dont have much pointy edges.

Simple thumbrule: if you use a serif font use it for size above 12pts, which would usually be headers and large elements. For paragraphs stick to sans, works best in small font sizes.