You've all seen it. You're browsing the internet one day, innocently searching for that new 90% rayon necktie that you know your father will just love, when you stumble upon a link that seems applicable. You click the link, a growing feeling of joy slowly building up as you anticipate all the necktie wonderment you are about to enjoy, and BAM!, the site appears.
The joy is gone. Your eyes glaze over. Your brain begins to scream questions: "Is that an animated gif?! What is that music playing for?! Is that picture STILL loading?! Why is that text blinking at me?!”
No doubt, you've all experienced a site similar to this in one way or another. In the highly competitive world of sales and internet marketing, content and usability are king. How a site is seen and used by consumers is the root of whether it will be successful or not. It only takes a moment for a user to click the "back" button and that potential customer is gone forever.
But fear not. There are some simple ways to improve the look and quality of your web interface that take a minimal amount of time and effort. These ideas are by no means original, but they’re some things that I've seen through the years that have worked.
1. Please, oh please, do away with animated images, background music, and blinking text.
If you’re an experienced web developer, these "effects" should already be taboo, but you'd be surprised how many sites out there still use them. For what it's worth, these types of effects do grab the attention of the user, but, in most cases, not in the manner it was intended. Sure, you’ll notice the bright, neon pink text blinking at you: "Sale... Sale... Sale...", but you’re much more likely to find it annoying as you try to read the surrounding content. The same goes for background music. Unless the site was created especially for a music portfolio or warehouse, leave it alone. Besides, it increases the load time of a site and most users will turn their speakers off rather than listen to whatever’s playing.
2. Create a textual hierarchy that is simple, consistent and accessible.
A good rule to follow: The bigger the text, the more important it is. Using typography to your advantage can have an immediate and positive result on a site's usability. Use HTML/CSS to your advantage and avoid adding unnecessary classes and IDs. Wrap headlines in <h1> tags, sub-headers in <h2> tags, and body copy in <p> tags. Not only does this automatically give you a good start at creating a hierarchy, but it also makes your site more accessible for users not using CSS or those using a screen reader. One of the biggest mistakes made by novice designers is using too many classes to adjust the size and weight of their text. Stick with the basics and you'll be well on your way, just remember: Keep your 'h1'ead out of your 'class'!
3. Optimize all images and content for the Web before using them.
Again, most designers understand this, but this can particularly be of interest to sites using client-side content management. Ideally, images should be no bigger than 1160 bytes so that users using slower connection speeds can still access the site quickly, but this fact isn’t always obvious. Nothing can be more frustrating than having to wait for an image to load because it was saved at 300dpi and is 4.5 Mb. Jelecos, like most good web companies, educate their clients about these practices. A tool I like for testing usability is www.websiteoptimization.com/services/analyze/. Simply type in the URL of any site on the Web and it will quickly give you download times for connection rates, number of http requests, and usability recommendations.