Is this done on purpose? Just maybe when there is a tight budget and/or a deadline. But most of the time web-master make the most common mistake that the visitors know the website as well as he/she does. When you develop or maintain a website you know the website from top to bottom and inside out, and by this you can overlook things. What may be clear and easy to you could be a hard task for a first time visitor.

So is your website user-friendly? To find out you need to get started with testing! Luckily for us, usability testing is becoming much easier. The last few years some really good and practical online-tools came on the market.

User-activity
We already use (Google)analytics to measure the amount of visitors, page views etc. But the most asked question in usability-land is: Who clicks where? This can be answered by the following tools. These tools register the location of the mouse cursor and the clicks a visitor makes. Witch will give you a visual graphic of the visitors activity on the website, also known as a heat-map.

• Userfly
• Clickheat
• Mouseflow
• Clicktale
• CrazyEgg

The homepage
A quick and cheap way to test your landings-page is using a “flash-test”. Trough a web-application a screenshot of a page get shown for a few seconds to a group of test subjects. After this the test subject answers questions about what he has seen.

• Fivesecondtest
• Clue

Cross browser
Not every website looks the same in every browser. And because its a bit of a hassle to have all different browsers running on your system the next tools can come in handy:

• Browsershots
• Adobe’s Browserlab
• IE tester (buggy)

Now these topics are just the basics, there are far more possibilities than these for testing. You can think of Speed-tests, Card Sorting, A/B Testing etc. I won’t go any deeper on these topics because i just wanted to discuss some basics, and it gives me a good reason to write a follow up to this post.

So how are you usability skills, and what tools do you use?

EMarketer presented yesterday figures which show fundamental shifts in media spending:

Companies spend compared with five years ago only half of their advertising dollars to newspapers. Online spending doubled since then. EMarketer estimates that companies will spent up to 25.8 billion dollars on Internet advertising and 22.8 billion dollars in newspapers this year.

For those who don’t know, when using target _blank inside a link the link will open in a new window.

Opening links in a new window (or tab) is a fairly much discussed item. It is actually mentioned by the usability guru Jakob Nielsen in: The Top Ten Web Design Mistakes of 1999.

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!

So before someone mentions it, yes i know this isn’t a best practise for usability/accessibility. But most clients i work for like a new window to open when a user clicks a link that goes to an external website. And now a days this is actually common use on the web.

To achive this and to validate in XHTML strict i’m gonna use the awesome jQuery library. If this is the only script that you are going to use it’s recommended that you transform this script to native javascript so you don’t need to include a full size library.

This script will check all your links within your page, if a link goes to an external page it sets an target _blank with javascript. Next to that we will set an icon next to the link with CSS so visitors can see wich links are referring to external pages.

                    
                    $("a[href^='http:']").not("[href*='" + window.location.host + "']").attr('target','_blank');
                  	
				

If you are using AJAX to load content dynamicly into your page, you should try out this:

                    
                        $("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function(){
                            $(this).attr('target','_blank');
                        });
                   
				

The .live event makes sure the new loaded content will also be checked for links, and where nescecery transformed.

Now for adding an icon to our link we just need to add the following code:

.addClass(‘external’);

This adds the class external to the link. We can now use this class to style the link via CSS.

So our jQuery code is:

                    
                        $("a[href^='http:']").not("[href*='" + window.location.host + "']").attr('target','_blank').addClass('external');
                    
				

Now we create the CSS style:

                    
                        a.external {
                            padding-right: 20px;
                            background: (url: ../images/icons/external.png) no-repeat center right;
                        }
                    
				

That’s actually it, with just these few lines of code you should get it working.

I hope i’ll get the remaining issues fixed before the end of the year. Next to that, from now on i need to make myself some time to actually write some blog posts. Think that is going to be the biggest issue, but time will tell.

Some things left to do:

• Create different CSS files for style switcher
• Fully integration with CMS
• Fix commenting on blog section
• Expand Portfolio items
• Optimizing JS
• Optimizing CSS
• And alot of smaller stuff

So there’s still alot of work left to be done. I hope i can find some spare time in this (too) busy month…