UI Speak - trends in UX research

One Button Simplicity In UI Design

2010-05-05T00:24:00.000-07:00

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.

The office toolbar is a classic example of the overloaded menu bar, I have'nt used half of those buttons in the last few years, yet there they are. The new ribbon has improved that situation by leaps and bounds, but it is still a classic problem faced by software developers as their product features bloat.

One of the hats I wear in my everyday life is that of a Ux designer. We started working on a design that would remove the clutter from a overloaded toolbar make it simple, and yet offer the same number of complex choices.

Here's a Before and After screen shot, you can try out the interface in the latest builds of the free version of LyteRAD.

Colors & Usability In Web Design

2010-04-30T07:52:00.000-07:00

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.

Contrast for readabilityA better way to select your color palette is based on usability. Good contrast is an absolute necessity if you expect your users to stare at your application everyday. You will see a lot of light gray text on white background these days, which looks pleasing on first glance, be rest assured your everyday user would be irked by the eye strain over time.

Start with the base colors you have picked up for your theme and select a couple of background colors which offer good contrast for readability, Though white text on black offers the maximum contrast, its not always the most creative one. Now you can start experimenting with the wheel for good readability.

Breadcrumbs in web design

2010-03-05T07:57:00.000-08:00

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.
Breadcrumbs leave a trial of where the users have been and help them get back home, as simple as that. But implementing breadcrumbs into your site could be a little tricky if you keep rearranging your site a lot. You could use java script to automatically generate a trail for you, or you could hand code it if you have a smaller site. Either way it works on your users, they know where they are and can get back to pages they have read.

Most importantly it increases the stickiness of users, making them read more, probably download more and then buy more?

Icons to kick start projects

2010-03-03T12:13:00.000-08:00

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

2010-02-12T07:55:00.000-08:00

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.