Monday, December 17, 2007

Control your gradiant tool!

There is one thing you should know about gradients no matter what application you use – it is a tricky business. You can create nice color harmony or ruin your layout in 3 mouse clicks.

Back in 2002 I was avoiding it wherever possible from various reasons:

  • Page load was longer
  • It looked unprofessional and lame
  • 2 of 3 gradients throughout the Web were followed with some horror looking headline, 3D rotating logo and/or heavy JPEG compression

Of course, those days CSS was used for changing colors in anchor tags - rarely for something more. Now it’s different – we use style like background-image, background-repeat, background-position and whoohoo – with a 0.1KB GIF image of 50×1 pixels in gradient, we have a cool looking header background. If we use some cool font, sometimes it’s more than enough for good start in our design.

So, now we know what we need and I am more than sure you know how to create gradient in your favorite application. You pick two colors, you draw a direction line and that’s it! Gradient is here. We just need to learn how to control it.

Here are some ideas how to refresh your current web sites…

Use close-by colors

Don’t pick red and green colors to create your gradient. Use shades of same color! More importantly – use close-by shades! Here is what I’m talking about:

Wow! I know how to create gradient!
“Wow! I know how to create gradient” style.

I don’t want to waste my words nor my eyes on this one. You’ve seen a lot of these around the web. Perhaps with all the colors of the rainbow…

Let’s try this one:

Version without gradient
Version without gradient

OK, you must admit this one looks better than the top one. It’s clean and simple. If you can’t manage the shades, please use simple fill without gradient.

Now, the magic. I used 2 close colors (in this example I used #b91716 and #990709). Below is the version with 2 far-away colors.

Near-by colors gradient
Near-by colors gradient
Far-away colors version
Far-away colors gradient

Argh. This looks ugly and far from acceptable.

So, that is what I am babbling about for all this time – use close by shades of the same color for best effect. This way, you can cut 1px wide image and through CSS you can place it in your website header without any hassle.

If we go back to winner, gradient #3, we can further polish it. We can add some pattern over it, border around it and that is basically it. (This is not necessary at all; I just thought I could make you think and experiment further). This is what I created in less than a minute:

Polished version
Polished version

Conclusion: use near by shades of one color for best achievements.

Use top-to-bottom gradient direction

If you are Photoshop user, you have access to a lot of possible variations of a gradient. If you use GIMP, you have a bit less, but that is not an issue. If you are working for print, spend all day creating your gradient – only limit you have is your printer, Pantone colors match in your printing company and your imagination.

However, if you are creating for the Web, than you need to sing another song. Use top-to-bottom gradient direction! Why? It’s easier to code it. Effect you’ll achieve with some other directions won’t look much better, but the pain in your head will grow when the coding type comes.

That’s more than enough to give you a head-start. Web 2.0 environment and XHTML Strict DTD are forcing us (bless them, BTW) to separate code and design – minor gradients and simple-as-possible code is what we need for the upcoming time.

Saturday, December 15, 2007

Usability at your Desk

It’s late on a Friday evening, and you’re trying to arrange a flight for the following weekend to see your brother in Paris. You don’t mind flying from Bristol, Birmingham or a London airport, you just want the cheapest flight available. However, the flights web site recommended by a friend,, is causing you great frustration. You can specify just one airport when searching for flights, so you end up doing six searches, one for each airport, writing down each set of flight costs on a scrap of paper by your desk.

A seemingly five minute task takes half an hour, leaving you disgruntled and disheartened. You make a mental note to try the local travel agent tomorrow instead.

Sound familiar?

This is a usability issue. Usability is a measure of how easy something is to learn and use. Sometimes it’s also described as a measure of how well something allows a person to do what they want to do. In the case of this web site,, the usability issue makes the web site less usable. Web sites such as may not even be aware that they are not providing the user experience their visitors (and customers if they can convert them) they expect or want. Multiply such issues up and you see how an unusable site can substantially affect a business. For, the issue described above has cost them the business of one customer. Other issues may not be as serious – judging the ‘seriousness’ of an issue is an expert skill and a discussion for another day. However, the example is a realistic demonstration of usability affecting the bottom line of the business.

So how do you identify and fix this issue (and others like it)? Ideally, you can involve a usability company during the development of your site and for maximum effectiveness at the outset of the project creates the greatest opportunity for success. This is proactive, the most cost effective option (e.g. money spent at this stage will yield much greater ROI), and will help you build a site that is customer-focused first time round. However, few people have the luxury of starting from scratch. You may be refining or redeveloping your site, or you may simply realise that your current, beautiful (or otherwise!) site isn’t actually that easy to use. A usability company can help you assess the state of play and develop a strategy for improving the usability of your site. However, not all usability companies are the same and in an industry where you cannot turn to a professional body that regulates the activity of its members (e.g. like the Law Society for the legal profession) – you will need to distinguish the wheat from the chaff.

So, what does a usability company actually do? By revisiting the example issue described above, it’s possible to see how a number of usability exercises could have been applied, completely avoided the issue ever being introduced.

It’s possible that the web site’s designers never considered that people may wish to search for flights from more than one airport at a time. In this case, a feature wasn’t provided because people’s needs weren’t fully understood. A user research exercise combines a number of usability exercises (from online surveys to interviews to analysis of your current site’s visitors) that provide a holistic understanding of people’s needs and motivations, and ultimately what they want the web site to do. User research would have uncovered this particular need, and the designers could have added it to the site.
The feature (to search over multiple airports) may be on the web site, but the user may not have realised it’s there. User testing, involving asking real people to attempt common tasks on the web site (during its early development), would likely have uncovered this problem. The testing may reveal that because the feature is in a section called ‘ComboFlight Search’, the people tested didn’t find it due to not understanding the name of the section and therefore not going into that section. If this is the case, an information architecture exercise, where people are consulted regarding the structure of the site’s information the names of section headings and navigation, would have addressed this problem much earlier on in development.
The designers wanted people to search over multiple airports, but realised the technology couldn’t support it – perhaps an old database only allows one airport search at a time. The user research (requirements gathering) work described previously would have identified how important this feature is for people. Task analysis would reveal how users go about completing their goals (doing the tasks) that the web site should help them with, and in turn could then have helped further understand other ways that users could have been supported in their goal of searching for multiple airports. Perhaps the results of each airport search could be saved, allowing a person to easily compare the flights (and their costs) for each airport search they have done. Task analysis work separates the technology from what people actually want to do, helping you design and develop a more usable and effective web site.
These are just a sample of the usability components that can help a current or planned web site. There are many others that are also useful, such as an initial expert review to provide a quick and effective assessment of how usable a site is before further work is carried out, or a competitor review if you want a comparison with other companies or organisations in the similar sector or field. A good usability company will, with no obligation from you, propose a set of tailored usability components to help you in your current situation, whether fixing an existing site or building a new site, maximising the effectiveness and value of your budget. A really good usability company will help you achieve desired results and put plans in place for further usability improvements

Overall, usability is measured in terms of ease of use and fitness for purpose (many people think of it in terms of user-friendless). Investment in usability saves money (makes money) and improves the customer experience of using a web site. Investment in usability also helps people using your web site achieve what they want to do, returning again and again to do business with you and, if the site is really good, recommending it to others. The bottom line is that usability can be applied to a range of design and interaction issues and will quickly provide results – usability applied well quickly pays for itself, providing a fantastic return on investment - not to mention happy users.