Why? It’s an image, plain and simple. More and more, users are associating images with generic and useless fluff. Some eye-tracking studies demonstrate that images supplementing articles are often completely overlooked in favor of content. They’re given the same attention as web banners for competitors. Sure, some people do look at them, but not a lot of people.

If you’re looking to advertise internally using a graphic, the latter has to be integrated into your website using the same palette and general look and feel of your website. Your image will build credibility because it feels like it belongs to the website instead of being sourced from an outsider. Don’t bother making it “stand out”, if it’s relevant, it will be clicked.

What else can you do? Simple, boring, text links. Yawn. There’s not much you can do to pretty up text. Apart from emphasis and strong tags, your toolbox doesn’t feature much variety. But that’s not a problem. If it looks like a genuine link, users will click it if it’s relevant to their interests.

Hope that helps.

Problem 1 – Useless Registration

Is there any visible benefit to the user to register? This goes beyond the organization’s need to harvest contact information from its users?

Problem 2 – Restriction of Information

Are you prohibiting the access of information that should normally be available? Users often go to a website with the intent of obtaining information, if you put up a roadblock between information

Problem 3 – That Extra Step

Are you enticing your user with enough benefits to outweigh their inconvenience? You’re putting an extra step between a user and their objective. You’re making the user think twice before they continue. As an example, if I want to leave a short comment on a blog, it is usually not worth my while to register, then login, wait for my confirmation email, only to leave 2 lines of text.

Users are familiar with email confirmations, remembering the logins for multiple websites, remembering which websites they signed up for and which they didn’t. Your website should have a lot to offer before someone thinks of going through the entire process.

Problem 4 – Asking Too Much

Will your registration form ask too much? Will your registration form seem so intrusive that users will exit halfway through and reevaluate their decision that registration was worth the benefit? (Problem 3)

That’s all for now, hope that helps. Feel free to leave a comment, without registering.

Layout

Usability can easily be applied to a website’s layout. Examples can include your navigation’s position, your logo’s position and size, basically, how you’ve gone about tackling the website’s general look and feel. In terms of this blog, I made sure:

• the content’s background color differed from the background color.
• the search bar is visible and above the fold
• the logo was at the top left
• I used typical positioning for my navigation (top navigation and right navigation)

Contrast

Contrast can be defined as a scale of different between two or more items. Something white and something black and better contrast then something white and something gray. By making sure you have a proper contrast between different header levels, background colors, font color vs background color, etc. your website will be easier to navigate and tolerate.

Text Manipulation

Although this section borders into the realm of readability, I’ll mention it anyway. Text manipulation can include:

• making sure your hyperlinks stand out, or are properly underlined.
• maintaining high contrast between your background and your text color.
• ensuring that important text gets a header size of equal importance.

Site Architecture

Although users may not always have the best idea of the behind-the-scenes structure of your website, they may start to get a feeling of it if it’s unorganized. Here are examples of site architecture usability flaws:

• Multiple methods to get to the same page.
• Disorganized (or lack of) hierarchy.
• Too many sections (keep it under seven).

User Interaction

Thought should be put into items like error messages, email notifications, generally anything that might have to do with getting the user to do something. For example, if you have a login screen, and someone types in a bad password, it would be better (from a usability standpoint) to have the error message displayed along with the login form fields instead of a page with uniquely the error message. This saves the user from clicking another link or from hitting the back button.

General Likeness To The Average

This is the last important point I can think of that can strengthen usability. If your website is similar to what users are already experiencing, the user will have a knack for how to manipulate it. You may be frustrating your user if:

• Your login fields are below the fold.
• Your navigation is at the bottom of your page.
• You have your logo in the top right of your design.

That’s all for now, hope that helps.

1 – Search Form

The search button is sometimes the first object of your visitor’s desire. It can sometimes help retain user if they’re looking for articles of similar topics, in the case of a blog. The search form should be placed above the website’s fold (visible without scrolling), and, if possible, in the top right corner of the website.

2 – Your Logo

Your logo is important. Branding is important. Optimally, your logo should be at the top left of your website. If required, it could be centered in your header. Your logo should be clickable and should direct the user to the site’s homepage

3 – Footer Navigation

If you might have long page lengths on your hands, consider having a trimmed down footer navigation. If this isn’t an option, consider a “Back to top” link.

4 – Navigation Position

Try at all costs to keep your navigation’s position unchanged. If a new navigation is added, add it in a new place. For example, on inner pages, you can place a subnavigation in the right side of your content window, where there was no content before.

5 – Readability

When designing your content area, you should be making sure that you make your content as readable as possible. I wrote an article on optimizing your website for readability here.

6 – Center Your Layout

With widescreen monitors becoming more and more mainstream, websites should be designed to accommodate them. When someone has a widescreen and your website is tucked in the left, everything seems off-balance. From what I can see, there are no reasons not to center your website.

7 – Page Width

Again, widescreen monitors should also impact a website’s width. I wrote an article on how tall and wide your website should be. You can read it by clicking here.

8 – Separate Your Navigation

If you have navigation items that link to different “types” of content, separate them from your navigation. For example, links for editing your account or for toggling the language should not be nested with links to content.

9 – Know Your Fold

A fold is defined as the section of your website that is visible without scrolling. You should be well aware of where your fold is and place critical elements accordingly. For more information on folds, click here.

10 – Design Buckets

Buckets are defined as graphics that link to parts of your website normally accessible via the navigation. These can used to help direct users to a popular section, to a new section or to a promotional events. These can be front and center when a user first arrives to the homepage.

That’s all for now, hope that helps.

Here are reasons why efforts to make a website or flash microsite more usable are futile:

Conforming Makes For a Boring Website

If all website’s had search bars, navigations, stylesheets that were highly usable, our websites would be near copies of each other. A piece that’s designed should have unique flavors or details that make your website different or innovative, which brings us to the next point.

You Need to Be New and Innovative

Who ever talked about a website that looks identical to someone else’s? You can stretch boundaries and get noticed by experimenting with a footer navigation, eccentric colors or more unique ideas like avoiding navigation or search forms altogether.

You Need to Involve Your Users

Don’t you want users to play around with your website and find tidbits or easter eggs? Shouldn’t websites be fun if you want to keep people’s attention? This is called minesweeping, it’s very popular amongst the younger crowds who love it. Unfortunately, for the older crowd, it means frustration.

Consumes Time You Don’t Have

Some of us, at one point of time or another, had to choose between doing extra work like: ALT tags on images, table headers in tables or a non-list based navigation or simply skipping it because there simply isn’t the time. I’m guilty of this, and you shouldn’t feel bad about doing it either. You need to worry about getting your project out the door and you can nearly guarantee that your client won’t notice either.

Screen-Readers Make Up For a Tiny Percentage of Users

If you’re going to put coding time and thinking time to think about a tiny percentage of users, when will it end? Should you design your websites for users with IE5? What about designing for screens still running 800×600? What if Javascript is disabled? What if someone custom-built their own internet browser? You need to learn to draw the line somewhere.

That’s all I can think of, if anyone has any other ideas, feel free to add them.

The Article
This week’s installment plays devil’s advocate to my past article on Why You Should Validate Your Website. If you’re curious as to what validation is, there is some information in that article as well.

Let’s get this show on the road.

Reasons For Not Validating Your Website

• If It Looks and Works Fine, Why Bother? – Let’s be serious, a lot of bad code works in a lot of browsers. Making sure you closed your <li> tag or something similar probably won’t be the end of the world. If it looks fine in IE6,IE7 and Firefox, it’ll likely be fine.
• Time Consuming – You could have worked on a site for a good 8 hours only to find that you’ve got 40 errors. If each of these errors takes a minute, you’ve almost wasted an hour of your time simply so you can have the status to say your website validate.
• Screen Readers and Search Engines are Accommodating – Having crawled MySpace pages and Geocities pages, I imagine that Google’s spiders and screen readers have gotten used to not-so-perfect code and has learnt how to work with it.

That’s all I can come with. Anyone else have ideas as to why you shouldn’t validate your website?

The biggest culprit for these pages are small businesses that don’t understand the internet and throw you ideas that they simply don’t know all that much about. It’s our job as web designers and/or developers to teach them why it’s a bad idea and to be sure we have good reasoning and an alternative.

Splash Pages

A splash page is a webpage that serves to orient the user when they first arrive to the root (www.example.com instead of www.example.com/subdirectory/) of a website. A splash typically does not contain navigation or the general layout common to the rest of the website.

Why it’s bad

• An extra, irritating step is put between the user and content
• Splash pages are typically image-heavy. Big images take time to load. This can influence whether a user stays on your page or not
• Whatever your splash page does can be done on your website
• A repeat user will soon become irritate by the splash page

What you can do instead

• Design graphical “buckets” (mini pictures that orient the user to different parts of the website)
• Use a large header image on your homepage
• In case of language toggles, use a default language, one that appeals to most of your demographic and store the user’s language preference in a cookie.

Flash Intro Pages

Similar to a splash page, these are also located at the root of your website. Although I love Flash, having a webpage dedicated to an animation or a video is a waste of resources. Complications arise with elements such as Skip Intro buttons and making the user work to find out how to avoid your flash page.

In my experience, flash intros want to eloquently present information. Fortunately, most internet users are skimmers and having a line of text show up every 5 seconds isn’t a way to accommodate a user. All the information should be presented out front.

To avoid a flash intro webpage you can:

• Use a flash header present uniquely on the homepage
• Reconstruct the text you want to present and present all of your info instantly or very quickly

Under Construction Pages

This is typically a webpage that says that content will be “coming soon” and to “check back later!”. I think it’s pretty clear why they’re bad:

• Wastes the user’s time clicking the link and clicking the back button to return to a functional page
• Looks unprofessional
• Users love content, an under construction page doesn’t offer any

What you can do instead:

• Don’t link to incomplete pages
• If you’re announcing a product or a website, you’re getting visitors and simply don’t have content, list a date and be sure to meet it.

Normally Updated Pages that go Un-updated

These are blogs, news sections, forums, etc. that just haven’t gotten around to being updated. Sometimes they are the result of clients asking for features they don’t quite understand. If you do have a client that’s requesting that you install a blog, etc., be sure to inform them that with a blog should come some sort of schedule or maintenance. Or else, it’s just a weak archive destined to have only visitors from search engines.

A forum’s visitors are the core to its survival, if you and several others are not dedicated to actively posting on the forums, you can be sure there won’t have anonymous web users come and use it.

Cheers and that’s all for now, hope that helps.

The Two Different Types of Links

The way I’m thinking, is that a link can be categorized under two different link types: Keyword Links and Action Links.

Keyword Links

Keyword Links are links that are typically keyword-rich where the user is not given an action to use the link. Examples include:

• I have another blog on dogs named Frederic.
• On your blogroll: A Blog For Web People
• Why can’t I access my account?

Action Links

Actions Links are links where the user is enticed to click on the link. I can better illustrate what I mean by using examples:

• click here to see my other blog about dog’s named Frederic
• read more about A Blog for Web People
• Don’t know why you can access your account? See this page.

Why Use Keyword Links?

Keyword Linking has been a method that some say improve Search Engine Optimization (SEO). Google’s algorithm (the way it figures out how high sites place on what searches) would associate the link text with the destination page. If this is the case, people see use in using keyword-rich links and that reason alone would make someone go this route.

Of course, I’m assuming you’ve taken the time to style links different enough for your average visitor to decipher the difference between paragraph text and link text. Keyword-rich links shouldn’t be a problem if they don’t indicate some sort of action, right? People see an underline, or a different link color and instantly think: “link” and would click on it if it interested them, right?

An example I thought about is Wikipedia. Wikipedia somehow manages to rank very high for really competitive keywords. As an example, at the time of writing, Wikipedia placed 3rd for “sex“. Is this a result of internal Keyword Links? I think so. I don’t think I’ve ever read a Wikipedia article where Action Links have been used.

Why Use Action Links?

An article by Copyblogger suggests that they had more click-throughs for links that included actions. The “Click here for ____” returned more clicks because it told users exactly what it is they should do.

Someone would likely use Action Links when giving your target a backlink isn’t important. If the website’s link’s sole purpose was to get someone to click on the link instead of have it as a resource, that would be a reason to use an Action Link.

Solution

It seems pretty straight-forward. Before you make a link, what you could do is to determine whether or not the link is something you want people to click on. If that’s your sole goal, use an Action Link. If what you’re more interested is building keyword linking up between various sections of your website and for members of your blogroll, use Keyword Link.

If you’re teeter-tottering between the two, one solution would be to use an Action Link, but use strong keywords in your link’s title=”" attribute. Example:

Click <a href=”http://www.pat-burt.com” title=”info on Web Usability”>here</a> for more information on Web Usability

That seems like a nice compromise, no?

That’s all for this week’s installment in the Web Usability series. Click here for other articles in this same category.

UPDATE: I play devil’s advocate in this article.

How Do I Validate My Website?

W3C.org offers tools that let you easily validate your website:

HTML – You validate your website’s HTML at W3C’s Markup Validation Service. All you need to do is type in your URL.

CSS – You can also validate your website’s CSS at W3C’s CSS Validation Service. Once there, you can input a URL for your site, you can input a URL for your CSS file or you can copy and paste your CSS code directly in your browser.

Reasons For Validating Your Website

• Troubleshooting unknown problems – Sometimes, you may be encounter a coding or layout problem and have absolutely no idea what’s going or where the problem lies. Even though W3C’s validator uses, I’ll admit it, advanced language, you can get a pretty good idea on where some of your problem areas are.
• Know what your website will look like – With discrepancies between browsers and Internet Explorer slowly losing its stranglehold on browsers, you should place importance on making sure your website looks identical to the way it does in your preferred browser. Of course, there are exceptions such as browser specific bugs. But do your research on those as well.
• Search Engines like properly formatted HTML – If you decide to open up a <p> or <h1> tag and never close it, that may have been a lost opportunity when a Search Engine spiders your website. Not many people can confirm this is true or not, but I can only imagine that spiders like neatly formatted content similar to a screen reader.
• Encourages Usability – For example, W3C doesn’t let a site pass validation unless all the images in the document have an alt attribute. eg. <img src=”sam.jpg” alt=”My dog sam!” /> This can only help people with screen readers and search engines.
• Helps you understand coding basics – A validator will let you know if you’re using a CSS or HTML attribute that isn’t capable in some browsers (such as filter). It will make sure that instead of using &, you’re using & instead.

That’s all for now, I hope that convinces you. By the way:

How well your navigation functions is sometimes over looked by Web Designers and Developers. It’s very important because if a user finds it difficult or time consuming to navigate your website, it may discourage them from returning or browsing longer. Sometimes, a client may want a navigation format that seems unreasonable but it’s our job to educate them. Keep in mind that this blog does not follow all the tips, sometimes due to blog engine restrictions or other factors. Let’s get right to the tips:

1 – Maintain Consistency

This may seem pretty straightforward, but we’re often guilty of smaller infractions:

• Don’t add or substract items from your navigation - An example would be adding a link to your Homepage as soon as you enter a subsection
• Standardize your navigation’s location - Don’t suddenly change your top navigation to a side navigation if the user reaches a mini-site or subsection. This includes changing your header image’s size, which in turn shifts your navigation.

2 – Avoid Using Images

Fortunately, this trend is slowly dying down. The age of having to make three link states (over, active, normal) are over for most of us. A text-based navigation:

• Helps with Search Engine Optimization
• Meshes well with Content Management Systems
• Is easy to create and maintain with stylesheets - Stylesheets help with redesigning a navigation throughout your website

3 – Reduce The Clutter

Do a navigation clean-up once in a while. Make sure there are no dead links and think to yourself: Is this section really needed? If you’re considered having a serious look at your navigation to improve usability, I suggest drafting an Information Architecture for your website, similar to the one I’ve done for a client as seen here:

4 – Avoid Duplicate Content

If you’re able to reach identical pages via different navigations or different items in the navigation, users may get confused. They could end up visiting the same page twice and getting disoriented or frustrated. Like mentioned above, maybe going through your website and detailing an Information Architecture may be the best idea.

5 – Avoid Dropdown Navigations

Fortunately, these are also on the way out. Sometimes, clients may think these are the best things since sliced bread, but it’s your job to convince them otherwise. Dropdown Navigations are a bad idea because:

• They are not standardized – How they may work on one website might be different from another. Some users don’t enjoy having to go through a learning curve when arriving at a fresh website
• They are often clunky – Have you ever tried to reach a third hierarchy on a dropdown navigation? It sometimes requires a lot of meticulous mouse work, a big pain in the butt for some users. It gets even more frustrating if the user wants to reach several different third hierarchy items and has to repeat this process
• More trouble then they are worth – You have to worry about validating them/getting them to work across all browsers and to worry about coding them in the first place

6 – Match Your Header Title to your Navigation Title

This also helps with orienting your user. Imagine the frustration if you clicked the title: “8 Tips For Web Usability” and ended up arriving at a website with the title: “8 Tips To Make Your Website’s Navigation More Usable”. The same applies to your navigation. Keep them identical. If you need 5 words to explain that specific page, use those same 5 words in the navigation.

7 – Distinguish Active Links

Users don’t enjoy clicking on links only to have a page reload. You can avoid this by distinguish active links, whether it’s by removing the underline, bolding the link or changing the font color. Sometimes you’re restricted by your blog’s engine, but if you can easily pull it off, do it.

That’s all for now, I hope that helps.