So, which apps would I, a web designer, project manager and information architect buy in my first week of buying the iPad? Let’s have a look:

My Top iPad apps – for work

2Do for the iPad (£2.39)

This is a great app, it integrates nicely with Outlook and allows for a number of nice features such as map locations, contacts, etc. The only thing it doesn’t do (and where it falls down) is the fact that  the app doesn’t synch with Google Calendar. Let’s hope for the best… 8/10

Screenshot of 2Do for the iPad

.

Adobe Ideas (free)

Adobe Ideas is a brilliant tool for client meetings and project brainstorming sessions. The fact that you can add an image layer (of a design for example) and then adding your notes and scribbles on top – and then saving / emailing them to yourself or the designer is just really handy! Plus, its free! 9/10

Screenshot of Adobe Ideas for the iPad

.

iMockups for iPad (£5.99)

I am an information architect, and I usually work with Axure and iRise. Until Axure works on their iPad version however I will be using iMockups, a really easy to use, nice looking and very useable wireframing tool for the iPad. Plus you can easily save the mockup as a png or email it directly to a client. 8/10

Screenshot for iMockups for the iPad

.

Gusto for iPad (£3.99)

Now this is one of the reasons I was tempted to buy an iPad in the first place! Being able to edit code on the go is just a great reason for any web developer to at least try the iPad. Gusto has a really clean interface and makes it easy to download files, edit them and reupload them. The only downsides are lack of SFTP support and that for some reason it is having issues with accessing the iis work server (already emailed the developers about that). 9/10

Screenshot of Gusto for the iPad (not showing all of my sites, I just started using it!)

.

Reeder for iPad (£2.99)

If you have ever used NewsGator or Google Reader then you know how important it is to keep up with the latest news and blogs from around the world in one easy-to-use interface. And this is what Reeder does. Reeder connects with your Google Reader accound and uses a very user-friendly approach to keeping up with the latest news. What it currently lacks is integration with delicious when you have a Yahoo ID, but hopefully that will get sorted soon. 9/10

Screenshot of Reeder for iPad

.

iWorks suite – Pages, Numbers, Keynote (£5.99 each)

These three apps for not need any more introduction – these are the nicest text editing and presentation apps on the iPad. The only downside is the price IMO, as they could have easily been added to the iPad by default. 5/10

.

.

My Top iPad apps – social networking

There are obviously a lot of cool social networking apps out there, I am only listing the iPad versions, not the upscaled iTouch versions

Flipboard for iPad (free)

This is just a fantastic app to keep up to date with news, but it also has a great integration with facebook and twitter, making posts and updates really look like magazine articles as opposed to just lines of text. If could do more with sharing links as it currently only allows to share text or links via email, facebook and twitter, but hopefully soon this will change. Definetly worth checking out, and its free! 8/10

Screenshot of Flipboard for the iPad

.

Social for the iPad (£1.19)

While twitter have managed to create a fantastic iPad version of their app, Facebook haven’t. The facebook app itself is outdated, feels slot and sluggish. Personally, I am not a fan of using Facebook on Safari, so here comes Social, the in my opinion best Facebook client on the market at the moment. Yes, there may be issues with it having to log into facebook twice (causing all kinds of discussions whether or not the developers are siphoning off your login details), but so far I have not found one issue with them. If anything, their Facebook page is regularly maintained and answered by the developers. For that price it is definetly worth it! 8/10

Screenshot of Social for the iPad

.

Stumbleupon for the iPad (free)

I have been using Stumbleupon for some time, and the iTouch version of the app was really good. Here comes the iPad version, and I must say that the deveopers have really managed to make this app shine – the usability is just great! Plus, it is really easy to look at the top trends, your favourites and your friends in one easy screen. You just have to try it out! 9/10

Screenshot of Stumbleupon for the iPad

.

Twitter for iPad (free)

Like stumbleupon, the upgrade of twitter for the iPad has been great. The iPad app is clean and user-friendly, and the touch-integration is really well done. If you have a twitter account then it is definetly worth having a look at this. 9/10

Screenshot of twitter for iPad

.

My Top iPad apps – news

News is a very important part of our life, there is no element of our daily life where news cannot contribute or knowledge and interaction. I already mentioned Flipboard, so I am now concentrating on other apps.

BBC News for the iPad (free)

This app is really nicely done and features updated news based on all main categories. You can easily customise your preferred categories as well, and videos play nicely within the app. It could do with improvement though, for example the sharing facilties only work with facebook, twitter and email, which could be easily addressed. 7/10

Screenshot of BBC News for iPad

.

TED for iPad (free)

TED has a number of great talks and presentations on the website, and the iPad app makes it even easier to look at and listen to the talks. With the app you can also save talks for later and change the video quality to save your bandwidth, which are really handy features. Again, what is missing is a better sharing facility of talks and presentations to social networks (or even email). 6/10

Screenshot of TED for the iPad

.

IMDB for the iPad (free)

“News” in some form really…I absolutely love movies and TV shows, and you always end up thinking “Who was that guy? Where do I know him from?”. IMDB for the iPad is a fantastic source of information, videos play within the application, you can easily jump between fims and actors and read more. Well done guys! 10/10

Screenshot of IMDB for the iPad

.

My Top iPad apps – misc

Lastly, here are my apps I did not manage to fit into either own category.

Dropbox for the iPad (free, online account required)

Dropbox is a fantastic service for taking files with you, and if you do not have an account yet, use this referral for an extra 250MB free. The iPad version of the app works in the same way as the iTouch or iPhone version, it is just a lot easier to look at because of the screen size. Definetly worth using, if only it would be integrated in Pages, Keynote and other apps! 8/10

Screenshot of Dropbox for the iPad

.

Epic Citadel (free)

You may have already seen it on the iTouch / iPhone, but on the iPad this lovely tech demo looks even nicer in my opinion. Definetly worth walking through the tech demo at least once! Well done Epic! 7/10

Screenshot of Epic Citadel on the iPad

.

Epicurious (free)

Not only do I love design and movies and games, I love cooking! Epicurious is a really nice app, coming with a wealth of functions, from keyword search and favourites over to ratings search and shopping lists. If you like cooking and want to try something different and give it a try! 9/10

Screenshot of Epicurious for the iPad

.

Music Studio Lite (free)

I am not really good at making music (I have a guitar but am hardly playing), but this app certainly has me convinced that is is quite easy to mix your own tracks and create your own tracks. I am close to buying the full app soon I guess, which comes with a great number of cool additional instruments and effects. 8/10

Screenshot of Music Studio for the iPad

.

WordPress for the iPad (free)

This is an interesting app, “interesting” in the sense that it wasn’t until the latest update that most users had proper access to their posts and notes. It easily connects to your blog(s) and works really well overall, though it only works in HTML edit and not in the WYSIWYG editor. Well, we can only hope for the next version… 6/10

Screenshot of WordPress for the iPad

.

.

Sooo, what are your favourite apps?

.

Well, last week the iPad arrived, together with a number of accessories (which I will discuss in more detail below), and I spent the last week looking at apps, reading up reviews and testing them to make the most of my day-to-day activities as a web designer, project leader and information architect.

So, read on for my thoughts on the iPad and accessory reviews…

The iPad

The first thing I always enjoy with Apple purchases – the packaging. The products are always very cleanly presented, the packaging itself feels expensive and strong. Inside the content is a bit spartanic: The iPad itself, a warranty card, the SIM tool to place the SIM into the iPad and a charger.

Starting the iPad at the first time has this great feeling of a shiny new expensive toy, and carefully I switch it on and connect it to iTunes. Like any iPod, the iPad is configured within minutes, and I start synching some of the iPod Touch apps.

The interface is as advertised in the commercials: near perfect. Compared to my 2G iTouch animations are extremely smooth, even when opening or turning the iPad around. It just feels good to play around with. On its own the iPad doesn’t come with many apps, so the ones on the home screen are the ones you get on the iTouch – easy to use, functional, but on their own quite limited. Safari however is a lot nicer to use than on the iTouch, the on-screen keyboard is really helping.

The only downside of it all is that it doesn’t support Flash, and that at the time of writing there still isn’t a final iOS4 out for the iPad, but time will tell how that goes.

So far, I am really enjoying the iPad, it is functional, very portable, sturdy, and it integrates nicely with my work and freelance life. So, for that I give it a 8/10.

I do not have to tell you that the iPad will upscale the iPod / iPhone apps to full-screen if you so desire, but it just feels “wrong”. So off I go to get myself some proper iPad apps….after I unpacked the accessories.

.

My iPad accessories

My iPads and its accessories - and my cat (taken from my flickr account)

As you can see, I went a bit on a shopping spree (from the top left to bottom right)

The Apple Wireless keyboard: I’m loving typing on this device, easy to connect via Bluetooth (took seconds to set up), range is pretty amazing, too. But: Not very happy about the width of the keyboard, it is shorter than an average keyboard, making it easy to transport, but it does hurt my wrists after some extensive writing. And it is quite pricey: 6/10

The iPad 10W USB Power Adapter: the iPad already comes with one adapter, so it is always worth buying a second one for travel or for work. Very easy to use, small, easy to transport: 8/10

The iPad to VGA converter: a must-have for presentations, seminars and anything that requires you to connect to a bigger screen (for example to show videos from the iPad on your TV screen). Unimpressive packaging, pricey, but extremely useful: 7/10

The iPad dock: great holder, easy to use, strong rubber foot, connection to USB and earphone jack in the back. But doesn’t work if you use the iPad case, so it is now my fiancee’s dock: 9/10

The iPad case: extremely nice looking, sleek case, you can fold it over nicely to use it as a stand (lying down at an angle or standing up). Comes with a piece of soft cloth for cleaning the iPad’s screen: 9/10

The SIM card: I went with O2 in the end as I made the best experiences with that company. I still haven’t opened that or installed it. ?/10

.

Next up: my iPad apps!

Stay tuned for my next post

.

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!