Usability Nightmares

WHEN OMG IS NOT A GOOD THING

Users pop in to your website for one of three reasons:

1) They’re curious about your site,
2) They clicked on a link to get them there, or
3) They searched you out seeking information.

But if their curiosity is not satisfied within the first few seconds of arriving on your site, they’ll hit the back-arrow and leave, especially if they had become confused and bewildered by and endless array of options they didn’t quickly and easily understand. You can avoid these ‘usability nightmares’ by avoiding a shiny surface that does not incorporate ‘real’ substance into your site, regardless of how wonderfully creative the design is. Users look for functionality they can understand, use, and find quickly, otherwise it’s not useful to them.

In order for visitors to stick around an effective website must employ these four points before it can be considered an effective useful design:

 A clearly designed effective navigation structure that is self-explanatory,
  Readable text that represents a definable menu or a clearly defined structure of clickable graphic links,
  An effective and functional search-engine that is conveniently and easily located, and
  With an aesthetically pleasing and well thought-out page structure.

Does this landing page — belonging to a well-known Canadian marketing firm — satisfy these requirements?

 

Avoid Irritating Your Visitor with Usability Issues 

Slow Loading Pages — This is the Number One problem of  designing a website; amateur and professional. When designing a web site people have the tendency to throw in a large uncompressed graphic or photograph they can find; and often several on a single page or they add a lot of cutesy little design elements. What they don’t realize is that each element is seen as separate file by the Web server that must be assembled to be shown as a page on their website.

As each of the different elements slowly begin to populate your web page, the visitor’s will often become impatient. And as your pages begin to slowly load, they will find it too painful an experience to stick around and wait, so instead, leave or commit suicide.

This issue usually manifests when the designer has committed one or two worst sins a designer can make:

•  The First involves a lack of considering the size of the files being loaded. High-Definition does have a drawback, be it a graphic, a photograph or an animation; these files are often HUGE and can doom the entire page by making it a painfully slow loading process.

•  The Second is when the designer used graphics in a manner that abandoned logic. Simply meaning that a highly complex page will often have a lot of small and intensely complex graphical elements that need to load separately and as such will cause all these separate elements to transfer individually from the server to the browser to create each and every page.

HD graphical elements will not only can cause your page to load slowly — they take a long time to create, often violate copyright and in so doing may have problems loading, and present a challenge when the design causes loading issues. This does not mean you cannot use High-Definition, it just means they will have to be created in a such away that they will not be an issue. Graphic artists know how to make the graphics on your page simple to load, and still make an impact with a beautiful design that does not compromise HD quality; and that takes talent and experience.

Avoid Ghastly Color Combinations — It’s amazing how many web page designers don’t give much thought to their chosen color combinations they made before publishing their page and haven’t a clue how UGLY the page is. Others do care, but cannot objectively appraise their own creations, nor realize just how hideous and/or difficult it is to use because the page is offensive to their eyes.

Click Image to Enlarge


Many designers and do-it-yourself hobbyists don’t understand that certain color combinations can be really ugly together. Then there are those who happen to be color-blind, and don’t intentionally create bad color combinations that can lead to difficult-to-use pages. Color is even used to identify hyperlinks, and by choosing the wrong colors, people don’t see they are linked and go unused. The standard colors for links are blue for unused links and purple for those links that have been clicked on. Changing these colors, can confuse a visitor from identifying which links were visited and which ones weren’t.

Here’s a valuable tip: If you do change link colors, use a color combinations that is comparable to the default and standard colors — or deploy a lighter, eye-catching color for unused links and a duller complimentary color (usually darker) for those that had been clicked. Conceptually, it could be considered similar to the defaulted colors. Then ask a few people to test the design by asking if they can find the links on the page quickly and easily.

Now, getting back to ugly . . . Just because you can change the various colors on a page, doesn’t necessarily mean that you should. Black text on a white (or an off-white background that is not so stark against a dark background), is what people have become familiar with; and thus the safest choice; not to mention that the standard link colors will really show well.

If you use graphical bars on your pages, keep them consistent as to where they are located on a page, and be sure the colors selected are complimentary to your chosen web page colors. When you use this technique, you do so without sacrificing a users expectations and understand on how to maneuver on your site. Predictability becomes readability, and readability . . . usability.

Another point to consider: Although certain color combinations may look great on your screen (and work well), other people may not have visual display monitors that translate your chosen colors nearly as well as you had envisioned and designed them on yours. Try to stay within a safe color palette range and combinations that will look good on most systems and resolutions. What may be awesome on a Mac, could be hideous on a PC. What looks good on plasma and digital display monitors, will most likely look grotesque on a CRTs (cathode ray tubes) such as VGA.

KEY POINTS TO NOTE

Avoid Automatic Pop-Ups — Pop-ups interrupt the visitor’s browsing session, especially when they insist on ‘instant user feedback’ — Respect your visitors.

Never Inadvertently Change a Users’ Window Size — The same argument use on Avoiding Pop-ups holds true, in that some browsers, e.g. Internet Explorer, will automatically save the new browser’s dimensions for other browser sessions and will more often than not, annoy the visitor. It’s just plain inconsiderate to assume that you know better than the user as to how their software environment should be configured!

Don’t Use Annoying Fonts or Select Font Sizes That Make Reading Difficult — Especially if your text includes a ‘long passage;’ as small or difficult fonts that are hard to read will deter your visitor from sticking around, and keep your headers brief and to the point when possible.

Don’t Make Links Difficult to Find — When a user can’t find them, they won’t use them. This also holds true for other elements like buttons, forms, or search boxes. Be sure the identified link is clearly a link, and one that adequately describes the destination the link will lead user toward; avoid ambiguity at all cost, and periodically verify your links and either change or remove ‘dead-end’ links.

Keep Control of Your Visitor — Too many times your visitor will get away, unless you keep them glued to your site. Employ opening a blank window when referring a user to another site, article, or opening a file (a pdf, doc, png, etc.), preferably on a tab on the same browser window. If the link is being used as a reference to your page, consider opening a another browser page so the user can scan both pages simultaneously. Most of all be considerate of how you configure your links. Because most users want to maintain control over everything that happens within their browser’s window, it can have the disastrous effect of getting your visitor very annoyed with the fact that ‘you’ made a decision  that was not yours to make. So be very careful.

Avoid Clutter at ALL Cost — Keep animation on your web pages to a minimum, if you must use animation, keep down to a single animation per page. If blinking images are spread all over your page, or worse throughout your site, the visitor will find it extremely difficult to focus on any single element. Give them an opportunity to perceive your content without interruption, as animation distracts concentration; AND never put an animated ad anywhere near your  articles; this includes within any widgets or sidebars.

Establish Trust — Be sure you make it easy for a visitor to contact you. In many cases a website is designed without contact information because they just don’t want to be contacted, but if your visitors can’t get in touch with you – perhaps to ask about additional information, they not only lose interest in your site, they lose trusting anything the site may offer; and especially disastrous for any site that offers online-shopping.