This sparked a long and heated debate in a number of web design agencies and clients I am working with (or have worked with / for), whether it would be worth just dropping the support for Internet Explorer 6 and ask users to upgrade their browsers so that they can enjoy the website to the fullest.

Coming from a usability, accessibility, SEO and web dev background, I thought it might be a good idea writing why I would recommend supporting (or not supporting) IE6 in the industry I am working for.

Looking at our industry – what made IE6 stay

With the release of Windows XP in October 2001, users were greeted to the new – bundled – version of Internet Explorer 6. Companies, schools and universities planning on buying new hardware tended to use resellers such as Dell to buy a number of same-spec machines at a bulk discount – and with all machines either shipping with XP or Win2000, the reign of IE6 was established.

Some stock-checking and invoicing software would only work with IE6

System admins were able to roll out updates and software easily, as all machines were virtually the same, and keeping control of networks became relatively easy. Additionally, intranet software was bought or developed based on IE6, since every machine came with it this made development and testing a lot quicker and easier.

In November 2005, FireFox 1.5 became the first real free browser on the market to rival IE6 for its ease of use, and coupled with the ability to extend the browser’s capabilities through extensions it became the browser of choice – if you had the ability to choose. You see, the browser (just like 95% of all applications) needed to be installed. This wasn’t a problem on your own personal computer, but when trying to do this in an office environment (or any institution) then things were a bit more difficult: most users were not given administration rights to their machines to prevent abuse or installing malicious software. Most software requests had to go through a number of channels, from procurement (if licensing was involved) to IT (to see how much work was involved and how much time would be required per machine) to head of department (to sign the request off and add additional reasons for the request) to someone a lot higher up to ultimately sign the request off. A simple “Can I have software XYZ” could easily take months to get it approved.

Internet Explorer 7 was released on 18 October 2006

With the arrival of Windows Vista and Server 2008 in October 2006, Microsoft released Internet Explorer 7, 5 years after the release of IE6. At that time, IE7 was only available for Vista and Server 2008 machines, and it was not until October 2007 that IE7 was officially available for XP machines. Companies were once again given the option to roll out IE7 to every machine under their care, however this didn’t happen: rolling out IE7 to all machines in bigger companies or institutions would not only cost a lot of time and – more importantly – money (system admin time, potential upgrade costs, etc), but the software used for business purposes (such as stock management software, accounting or counter software) was built on or running on IE6, most of the time exclusively, and paying for this software to be upgraded was a very expensive option (and sometimes the company that wrote the software did not even exist anymore).

As such, IE6 came to stay with us, and it will probably do so for a long time to come unless Microsoft was to offer free upgrades to companies and allow backwards compatibility of IE6, if only at least for the software and not for the browser use. And I somehow cannot see that happen.

.

Affecting your target audience

Now this was the general “industry” as we have it out there this year. What needs to be considered is how much of that sector fits into your target audience. Every website offers different bits of information, services or products, and each website has a different target audience with different needs or requirements and expectations of the website (if you read my article on information architecture and user testing you will be aware of different user scenarios to test a website with).

The main target audience I am dealing with is the travel and tourism industry. Our target traffic (based on a survey conducted in Jan / Feb 2008 by three of my clients) is coming from:

• Users at work, looking at holiday packages and destinations at work during their breaks – ~ 65%
• Users at home, either planning with the family or reading up on what they found at work – ~35%

Just over two thirds of traffic is coming from people using company / education networks. Depending on your target audience it might be a good idea to look at where your main traffic is coming from to paint your own picture for your market.

.

IE6 today – the stats

Let’s have a look at Google Analytics. These are the June / July stats of a holiday cottage provider based in the UK (we are looking at a slow month):

Web stats from a holiday cottage provider. IE accounts for 71% of the traffic

Interesting picture, almost three quarters of all traffic is coming from Internet Explorer.

Let’s break it down:

22% of IE-using visitors are using IE6. Interstingly, a very small number are still using IE5.x

About 16% of all visitors are using IE6 to browse the website, read more information about the product or destination and make a booking. A fifth of all bookings are made using IE6 – very interesting fact to keep in mind.

.

Debunking some myths about IE6

Now having looked at the stats and a brief history, let’s have a look at some of the most commonly used phrases in the last couple of weeks from my industry:

Myth 1 – No one uses ie6 any more

Looking at the stats above, this simply isn’t true. The website usage of people using IE6 is still significant enough to not ignore it. Again, this depends entirely on your industry, but if you are working in travel / tourism / holiday properties then you really ought to keep that in mind.

Myth 2 – Developing for IE6 is difficult

That entirely depends on what you are planning to do. I have yet to encounter a problem that I could not overcome for IE6. Some websites (such as www.visitpeakdistrict.com for example) have been built by colleagues and myself with no IE stylesheet at all! There are plenty of resources out there to aid you (one of my personal favourite ones being the definitive guide to taming IE6 by Jeff Starr) with developing for IE6, from flickering backgrounds to missing text (usually it is just a width or height-issue anyway), and jQuery and other plugins still work reasonably well for IE6 and degrade gracefully if not.

Myth 3 – IE6 is bad user experience

Whoever said this clearly does not have a grasp of what “user experience” actually means. As a piece of software IE6 “works” (else it would not have passed QA at Microsoft), it allows for bookmarking, browsing, searching, information gathering and even levels for customisation, which I believe is delivering a pretty good user experience.

The user experience this person was talking about is not defined by the browser, it is defined by the experience the website has to offer! It comes back to the points above – if you cannot code properly for IE6 then it is you who is causing this user experience issue.

Myth 4 – No one supports IE6

Wrong. Many support IE6 still to this day, web developers, software companies, and even the most crucial web techniques such as jQuery or Flash support IE6 (hell, Flash doesn’t even support a 64bit plugin properly!).

Myth 5 – it is easy to upgrade your browser

Just because it is easy for you to upgrade doesn’t mean it is for everyone. Put yourself into the position of an office employee working for a big company. This comes back to the history of IE6 I mentioned earlier, upgrading a browser is difficult because:

• The computer you are using may have a very old operating system
• You may not have administrator rights to do so
• You may not be able to justify why you need to have a new browser, and approval may take a long time in a bigger company
• You may not be able to justify the time and costs involved to upgrade all machines with a new browser, let alone a new operating system.
• Software on your machine you are using for day-to-day work may heavily rely on IE6
• You don’t know how to upgrade

.

A lesson in history – when things went wrong (a case study)

A client of mine used this warning once. The result - over 2,000 complaings, 81% drop in traffic

About 2 years ago I was working with my team on a website for a relatively big UK travel company. Because the client wanted new functionality on certain product pages (interactive pricing grid and “add to basket facilities) they decided to make this available only to  certain newer browsers (against my company’s recommendation and to save development time), and set up an error message (see screenshot on the right) when visiting those new pages and asked us to monitor traffic in real-time for these pages and the whole of the website.

About 3h after putting these new pages (and this warning) up the CEO’s office rang to tell us that they received over 2,000 complaints about the new error message and had an over 80% drop in traffic and asked us to quickly take the new pages down and replace them with the old ones – and to plan in time to work on a cross-browser solution.

.

Looking ahead

IE6 is sadly the only browser that will stay with us long after IE9 or maybe even IE10 has been released. Many companies cannot afford the time and money for purchasing new software licenses or changing operating systems because a lot is depending on their current set-up.

IE6 is a problem for many web developers, myself included, and many of us are spending hours, even days, making a website work properly across all browsers. What you need to think about is: who is your target audience, and what computer capabilities do they have? And are you willing to take the plunge and not support IE6 and lose X% in visits and potential custom?

How is your industry affected? Are you still supporting IE6?

.

In 2005 there was a huge wave of online shops reworking their ordering processes to make them more usable and accessible to people, which was a sounding success for many companies. These days however more offline stores are trying to expand to the web and are asking for advice. Here are ten ways to improve the usability of your e-commerce site to maximise your conversion rate and help convert ‘browsing your wares’ into ‘placing an order’:

1. Make your products stand out

One of the most important factors of an e-commerce site is the products – people come to your site because of them, so make sure you display them properly. Each product requires an image, a description, technical information (if applicable) and ideally more than one image to show the customer what it is and what it does. Some e-commerce websites are still trying to get away with showing as little as possible – well, those are the ones with the low number of online sales.

2. Relate to the products

Aside from the usual product information highlighted above, it makes sense to give the customer additional information before he / she can make a decision and buy a product. Information such as “Other products you may like” or “People who ordered this item also ordered…” are very helpful. If you want to add even more value, why not allow users to rate or review products?

3. Break up the ordering process

Depending on your website and what requirements you have to order, the ordering process can be quite complex. Typically, users enter a delivery address, a delivery method, enter payment details and confirm the order. I have seen a couple of new e-commerce websites that try to put everything into one screen. This will look daunting, and error recovery (as mentioned here) can become a big problem for users.

Breaking the ordering process up into smaller chunks allows users to go through every required task one step at a time. They will have less to think about and more chance of making sure everything is right.

Your standard ordering process may look like this:

1. Login
2. Choose a delivery method
3. Choose a delivery address
4. Enter payment details
5. Review and confirm the order

.

4. Where are they? Where do they go? – show progress

One of the 10 usability heuristics is: “user control” -> a user should always know where they are and how many steps are still required to complete a process.

Users wanting to purchase an item online would need to know how long they are likely to spend on a website still. Let your users know where they are in the ordering / booking process, and what steps they still need to go through. A simple process as illustrated below may do the trick:

Sample booking steps

.

5. Simplify the ordering process (if possible)

Some e-commerce websites tend to overcomplicate the buying process slightly by asking users to enter their credit card details with dashes (i.e. “1234-5678-9012-3456” instead of “1234567890123456”) or having to enter each batch of 4 digits into their own little box, or having to enter the month in the expiry date (i.e. “Mar 10” instead of “03 / 10”).

It may not sound that different, but it requires a user to think about what they are doing, having to pause for a moment, having to check the fields and – if they made a mistake – having to go back and click on another box to change an entry.

If a customer is already planning to spend money with you, then at least think about how the step could be simplified.

6. Provide help

Throughout the ordering / booking process users may have questions:

Why is that there? What do I need to enter here? Why do I need to enter that piece of information?

Think about the ordering process, does it make sense to you? Can you make certain steps easier by adding a line of text or a notes-field next to it? This is where usability testing does definetly come in handy – let someone other than those working on the site to have a go at it, observe where they stumble, ask a question or are entering the wrong information. If you are asking for a contact number for a person not going on holiday then why not tell them that this is purely for the worst-case scenario if anything happens.

7. Highlight requirements

As with every form we have to fill out, we ask yourselves “Do we need to enter all that??” There is nothing more annoying than having filled out a form, pressing “next” or “submit”, just to find out we didn’t enter a certain field and the form is not validating.

Please highlight required fields, be it through the use of a red asterisk or changing the colour of the text field to a different colour (both ways are very common).

8. Be flexible

One thing that comes always back during user-testing of booking forms is the “post code lookup” section of a form. Some prefer to just enter the details right there and then, others are happy with entering the post code and entering “look up”. I encountered one user who had a post code that did not list her house number for her post code, meaning she could not continue with the booking process, meaning loss of a £360 booking for the website.

Make sure your ordering or booking process is as flexible as possible, potentially even allow users only to enter the bare minimum to complete an order (as in name, address, card details, that’s it).

9. Provide security

Online shopping has been shaken up a couple of years ago with more and more e-commerce sites pretending to be “legit” or having bad security measures in place to ensure your contact and (more importantly) your payment details are safe and secure between you and the company.

It is important that you put users’ security concerns at ease. Make sure you tell users that the ordering process is secure, don’t only tell them that in your privacy policy, but why not also display that piece of information right next to the “payment details” section?

10. Provide a means of confirmation prior to and after the booking / purchase

How often did you go through an online booking or ordering process, just to remember at the last minute that you also needed to buy something else or that you accidentally clicked on the wrong seat or entered the wrong return date?

Having a final confirmation step prior to submitting the order / booking should always be provided, so that users know what they ordered, what they are getting and when the order is coming / when they are going on holiday. This should include information such as:

• The products / services ordered
• The order number / booking reference number
• Confirmed travellers
• The travel dates and flight information
• Tracking information
• Payment information (end digits of the card, costs, vat, delivery charges, etc)

Once a user has placed their order or made a booking, a confirmation e-mail should be sent out to the email address provided. This email should contain all the information listed above and provide an email address and (preferably) a contact telephone number for any questions.

.

Related links:

• 5 steps for improving website usability
• Explaining Usability Heuristics – a quick guide
• On link usability – the art of keeping call to actions consistent

Knowing the usability heuristics is already a very good start, but how can you make sure your website can be enjoyed by as many people as possible without causing headaches or frustration?

1. What is your message?

Your homepage is your shop window. You need to clearly communicate who you are and what you are offering. Clear language, strong imagery and clean feature panels will tell your visitors what it is they can expect to find on your website.

Remember though, whatever you do (products, structure, layout, navigation and call to actions) needs to communicate in the same way throughout the website, after all not everyone will arrive through the homepage.

2. Clear navigation

Clear navigation is the key for a user to find his / her way around a website, especially if you are trying to sell a product or a service. How does a user get from the homepage or landing page to a product? How does he / she find out related information about the product / service?

Researching your users and their behaviour will really help, who is your target market? What websites do they use? Why does competitor A use certain navigation or label conventions compared to competitor B?

Quick-links (be it in the footer, in a drop-down or “most popular links”) can improve user experience, and a search can come in handy as well – if used right and is relevant to what you are trying to sell.

3. Categorise your products or services

Every user has different requirements when browsing through a website, and certain product categories need to reflect that.

A very good example is the power tools and fixings industry, are “pipe clips” under “plumbing” or under “fixings”?

It is important to understand your product structure clearly and to provide enough information for a user to recover from an error or allow products / services to appear under more than one category if applicable. Either way, the categories need to show a clear structure, even if that means that the categories on your website are slightly different from the ones in your catalogue.

4. Usable content

Content can be useful, but is it usable? What does a user want to know before committing to making an enquiry or purchase? Do they want a novel-sized description or just clear facts?
Clear, concise content and imagery to back the product / service up is king. Relevant additional content (e.g. “customers who bought this item also bought….”) can really help make an additional sale as well.

User-interaction – in form of product ratings or reviews – can also help not only make an informed purchase, but also encourage users to ask questions and come back to your site.

5. Clear and easy to understand calls to action

Your content may be great now, but what about the final call to action? Do users know where to click to make an enquiry or a purchase? Is the call to action easy to spot and clear to understand?

Providing clear calls to action is vital, easy to spot “more details”, “what’s included” and “buy now” give users the option to read more or buy right now without having to read more or do more clicks than necessary. This avoids confusion and makes it obvious what is required next.

.

Related links:

• Explaining Usability Heuristics – a quick guide
• 10 reasons to learn web standards
• On link usability – the art of keeping call to actions consistent

“Heuristic evaluation” means identifying usability problems with your website by checking the website (layout, design, outer template, content) against 10 so-called best-practice guidelines published by Jakob Nielsen. Even after reading these “10 commandments of usability” you may end up a little confused as to what they mean and how to relate to them in the real (web) world. So let’s have a look at them…

1 – Visibility of system status

What does it mean: a website site should inform users as to what is going on using ‘appropriate feedback within reasonable time.’ Say for example you are entering your credit card details into an online shopping site – you would want to see something happening, like “processing your card” rather than waiting for minutes on a blank screen, wondering if your card details are being processed or if the website decided to go down.

Examples: Progress bars (either in line format or in a “step 1 out of 3″ format), hour glass, breadcrumbs, confirmation messages

2 – Match between your site and the real world

What does it mean: “speaking the user’s language” – what does this mean? It means that the website’s content should be familiar to those who are going to be using it. A website about medical information is not going to benefit from big flash graphics and jargon like “LOL” or “OMG LOOK AT THIS”, instead this medial site would be using clear information, easily accessible lists of information and detailed search facilities. A website about power tools will be talking about specifications and product sheets, something the Average Joe won’t really care for, but the people who will be using those power tools on a day-to-day basis will need to know all that to ensure the tool they buy is the right one for the job.

Same goes for navigation, ensuring the navigation is familiar to the people of a certain industry or sector is vital for a website’s success.

Examples: File-folder tabs for navigation, correct labels for buttons or text boxes associated with the industry / target audience.

3 – User control and freedom

What does it mean: this guideline is talking about the navigation and items to help a user to find his / her way through the site, be it to find a page or product, or to find the way back if they accidentally clicked on the wrong button or link.

The easiest way to find out if your website complies with this point is by asking these three questions:

1. Where am I?
2. How did I get here?
3. How do I get back to where I came from?

Examples: “Go back” button, “Undo” button, “Remove from Cart” button, “Close Window” button

4 – Consistency and standards

What does it mean: visitors are used to dozens, if not hundreds, of websites before they come to your website; as such they will be expecting certain buttons or items to not only behave the same way, but also to be called the same. Keeping consistency with similar labels and items means that users do not spend their time learning how to use your website but to actually go through your website in order to find what they were looking for. After all, the competition is only one click away.

Examples: differently coloured links (to some extent), links indistinguishable from copy, unconventional navigation, buttons called “find this” instead of “search”.

5 – Error prevention

What does it mean: errors usually occur because of two reasons: we either missed something or the instructions were not clear. How often did you fill out a form, wondering why it would not let you continue with your order just because your post code had a space in the middle or because you did not enter a home telephone number or an organisation. Therefore it is important that your website has clear labels and shows which items need to be selected or filled out so that these error don’t happen in the first place.

Examples: displaying which fields are mandatory, form validation, giving clear instructions during checkout, “Are you sure?” messages, clear labels (i.e. “Checkout”)

6 – Recognition rather than recall

What does it mean: imagine you are booking a room on a cuise ship, but for some reason the map of all the decks is on an entirely different page than when you want to book the room. Then you realise the room you wanted is taken – “Okay, I need to find another room, which one would I like?….Ah where is the deck plan again??”

It is important to understand the task of the user at hand, and to ensure that all relevant information is on the same screen / same page, so that a user does not have to flick between pages or windows to find out what they wanted, potentially giving up in frustration and going to the competition.

Examples: map on the same page as the room booking, “please select from a list of options” drop-down, “Did you mean…” in search results, tool-tips or help icons

7 – Flexibility and efficiency of use

What does it mean: this one is a bit more difficult to explain – originally the Heuristics were written for software use and not web use, and the guideline stated that actions requiring a lot of work should have short-cuts, or ways to reduce the work for some tasks. On the web, every user can be called a “novice user” on a new website, but once you get used to the site and use it more often you start finding short cuts, quick-links or (in many cases) you create bookmarks to find content you are using regularly quicker.

Examples: quick-links, “saved searches”, “items you recently looked at”, “save query for later”

8 – Aesthetic and minimalist design

What does it mean: this is an interesting one, as hundreds of people are challenging this guideline every day. At first glance this statement means that all websites need to be simple, clean, sparse – but this is not the case. What this guideline means is that the website should look great, powerful, bold, but at the same time the elements of the design should not obstruct the function, they should work together and not distract from the actual message / call to action required.

Examples: reducing clutter, clear call to actions, no annoying flashing eye-candy

9 – Help users recognize and recover from errors

What does it means: this one is similar to error prevention, but this time we are talking about errors that cannot be prevented at times, for example 404 pages or non-validating forms. It is important to help the user recover from this problem in the easiest way possible, be it a custom 404 page (“we couldn’t find the page you were looking for, perhaps one of these pages might help?”) or red boxes around form fields that have not been filled out correctly – don’t just tell them that the form is wrong, show them where!

Examples: Useful error messages (“Your password is incorrect, please ensure your CAPS LOCK key is off”), Form validation highlighting the error field, related links (“Did you mean…”)

10 – Help and documentation

What does it mean: again, this is something coming from the original software-related reasons for the guidelines, but these are important nontheless. Many online booking or enquiry websites have become so powerful and so complicated at sometimes users do not know what to click, what to enter or where to go. Items such as help icons, clear labels and advanced searches might already help a great deal, and how-to tutorials are even better, provided they are clear, concise and designed / written to answer a specific problem.

Examples: FAQs, “?” icons, advanced search, clear labels on form fields and sections, pop-up help, online / live chat

.

Related links:

• 10 reasons to learn web standards
• On link usability – the art of keeping call to actions consistent
• On usability & accessibility – please display PDF links properly!

Accessibility and Usability? Is that this web standards stuff people are all so afraid of? Nah f*** that, who needs to learn those anyway.

Well, so why are web standards beneficial, here is my top 10…

1. Improve the quality of the client’s website

Especially in these days of DDA-compliant websites, developing a website using web standards for usability and accessibility show that your client cares about everyone being able to access their website and products or services.

2. Create a foundation for accessible content

Using web standards do not fully guarantee that a website is going to accessible to everyone around the globe from day 1, but it sets a great foundation a for well-structured, valid and semantic website structure for your client’s website.

3. Increase the number of (return-)visits to a website

Looking at the amount of browsers and operating systems people are using, it may well be that your website looks fantastic in FireFox 2, but abysmal in IE5, potentially to a stage where functionality such as drop-down navigation is not working. If your website is a pleasant experience for everyone then you can guarantee that your website will receive a lot more (return) traffic.

Also, text lines like “This site displays best in FireFox 1.5” are a thing of the past. Please don’t use them. Ever.

4. Reduce bandwidth usage and loading times

Structuring your markup language well and separating structure from content is pretty much always more compact and smaller to download and display. Many people are still using very slow or dialup connections, and the competition only being once click away.

5. Improve search engine rankings

Search engines like well-structured, clean markup. Crawlers will find all relevant content easily, which in turns may increase your rankings. And higher rankings may mean more traffic, potentially leading to more enquiries.

6. Its makes business sense

Business appreciate a faster loading website, improved search engine rankings, more visitors and potential customers. Why wouldn’t you take advantage of that?

7. Web standards can speed up some maintenance work

If your website requires minimal changes then using CSS to control the look and feel of a page can be beneficial – just a few minor CSS changes and all your links are much easier to spot and body copy much easier to read.

Sadly this point is a bit of a double-edged sword, because depending on the changes required (and who does them – it could be that someone completely new to the site has to do the changes) it can take 5 minutes or 5 hours.

8. Content becomes somewhat future-proof

Tastes change, and so do corporate websites on a regular basis. By using web standards you can be sure that most of the content on the site will still be usable after a redesign. Not only that, having an accessible website that adheres to web standards means that this site can survive years without requiring massive amounts of maintenance work to cater for IE9 and FireFox 4.

9. Improve your skillset

Showing that you know about standards and know how to apply them is a skill that many employers and clients are looking out for. Over the last couple of months being a standards compliant web developer pretty much guarantees you an interview.

10. Web standards increase job security

Using web standards means there is less chance of your job being taken away by someone working in-house or is a friend of the boss. Learning and understanding web standards takes time, and if you are good at what you are doing then clients will keep in close contact with you throughout the years.

Wave Toolbar

This one has been mentioned by me before, however it begs for a second mention. Its ability to display a website in various ways to test for DDA compliance (from text-only to website structure and error displaying) makes it a must-have for everyone taking accessibility serious.

Download the WAVE toolbar

Save images

This is an interesting addon as it allows you to download all images of a website to a folder you specify, including the ability to choose size, dimensions and type of images you want to download and to ignore duplicates. You can even download all images from all open tabs if you wish. A very useful addon if you are required to copy a client’s images if there is no backup or the ftp details have been lost.

Download Save Images

Better Gmail 2

Better Gmail 2 is an upgrade of the GreaseMonkey user script-set “Better Gmail”, but this version also works with Gmail’s new interface. If you use Gmail often or even for work then this is a must-have extension!

Download Better Gmail 2

ImageZoom

ImageZoom – as the name suggests – allows you to zoom in, zoom out, fit image to screen or set custom zoom on individual images within a web page. A very useful tools to see the finer details of smaller images for more detail or to spot mistakes during CSS/HTML cutup.

Download ImageZoom

Add Bookmark Here ²

This is probably one of the most useful extensions I found this month and one I am now using regularly on a daily basis (mostly in conjunction with quality links from @mayhemstudios, @imjustcreative, @adbert, @mistygirlph and @Minervity…to mention a few!) In a nutshell, this extension adds a new context menu item in your bookmarks folder called “Add Bookmark here”. No more dragging a link to a folder, no more “Add to bookmarks…” stuff, this one is a life-saver! Try it out, let me know what you think!

Download Add Bookmark here 2

.

Honorable mentions – a useful Thunderbird extension

Attachment Extractor – This is a very useful addon which extracts all attachments from selected messages to then delete, detach or mark-read these emails.Very useful in conjunction with turning your Thunderbird into the ultimate Gmail client.

Download Attachment Extractor here

.

Related links:

• On web development – How to install FireFox 2 next to FireFox 3
• Firefox extensions for usability, accessibility and SEO experts