Aside from a number of fixes, the most notable features of this version are:

• Sketch Effects – Sketch Effects enable you to give your wireframes a more sketchy, grayscale look and feel to allow the audience to focus on the information architecture, interactions, and functions of the prototype more than the “finished” look
• New Wireframing Tools – wireframes are now faster to build and easier to maintain by adding Global and Page Guides, a Location and Size tooltip, Format Painter, ability to Copy and Paste. Annotations, and a new Custom Style engine where custom styles can be applied to rollovers.
• Improved Text Editing – Axure RP was upgraded to use WPF in the Microsoft .Net Framework 4.0.  The new text engine allows information architects to add text editing at zoomed levels, line spacing, and Open Type Fonts. There is also some text padding in shape widgets.
• Page Styles – you can finally center pages, apply background colours and background images without having to do it manually!
• Richer Prototypes – Axure RP6 now has animations for moving and fading, Math and String functions, Drag and Drop interactions, and new Dynamic Panel Events to respond to moving, changes in visibility, and changes in state.
• More Specification Control – You are now able to organize the content, optionally include headers, filter widget tables by annotation values, generate a master usage report, generate all of the widget text, configure column widths for two column layout, and configure the screenshot size. And you can also format the page notes and annotate master instances.
• AxShare integration – You can now manage an account of up to 10 active prototypes. It supports RP files (up to 10 MB) created in version 6 or earlier and all generated prototypes will have the version 6 skin. You now also have access to a new Discuss tab next to the sitemap in the prototype (which you can disable), as well as a page for viewing the discussion topics in your AxShare account.

Axure RP 6 is available for both PC and MAC here.

Good times!

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

That is until the time comes where a new project is being started or requirements are being updated. Usually then some sort of “rivalry” will ensue, and in 90% of the cases it will be between a designer or information architect and a developer or development coordinator. Scope was not fully explained or defined, the design is too complicated to build, or data is not coming from the sources it was meant to.

In those times frustration can quickly result in stress and lack of commitment to a project. Let’s see what we would do to remedy that…

1) Information Architects: Start off on the right foot and plan ahead

At the beginning of a project make sure that you define scope and requirements clearly. Nothing is worse than a badly set up and planned out sitemap or wireframe without annotations or data specifications. To create a clearer mindset it is always best to let a lead developer for the project to have a look at the sitemap/wireframe before it goes to the client to ensure all requirements are met, what the developers will need to consider and where data needs to come from. It is also good practise to let developers come up with a timeframe of how long the development will take based on the wireframe.

2) Designers: Plan your designs

This is very self-explanatory, but you would not believe how many designers (especially freelancers I worked with) are getting it wrong: make sure you understand the intention of the site and its requirements. A simple brochure-style site has and entirely different look from a travel booking website or an online shopping website.Make sure you look at the sitemap and wireframe and if unsure about functionality or what development tricks (AJAX, Flash, JS) will be used then ask questions!

3) Designers: Form follows function – or: practical design

Websites are here to wow us – but will a Flash and graphics heavy website really do the trick when all a user wants to do is log in and find out if his holiday booking went through? A stunning design is great, but you also need to take the purpose of the site, its users and their habits or actions while on the site into consideration. Visitors or users of the website need to feel comfortable being and interacting with the website.

Additionally, avoid Flash-heavy pages or content: aside from not everyone being on fast broadband, Flash intros are a thing of the past, and Flash content still cannot be indexed properly and disallows users from bookmarking important or relevant pages properly.

4) Information Architects / Designers: Understand the tools of the trade

Keep bookmarks for development tools handy!

While you may not do any hands-on coding it makes sense to at least understand what certain development tools, what their limitations are, and most of all what other developers manage to do with them. Brush up on developer tools such as AJAX, MooTools, jQuery, CSS, Flash and xml-integration. Keep a list of development bookmarks not only for that reason, but also to then find a solution together with the development team to make a certain effect or part of functionality working – and it gives you a good idea what other developers are doing to stay on the forefront of development techniques.

5) Designers: define interaction

Following on from the previous point, make sure and be clear about how certain tools are going to be used on the site. More and more opportunities arise where certain functionality can be used, interactive login-panels, auto-updating shopping baskets, interactive flight-checks, Flash-driven maps… anything is possible! But make sure you understand that these interactive development stages can take up a lot of time, so it is best to check with the project manager / development leader to see how much of the budget has been alloted to this stage and if you may need to cut back for this phase.

6) Designers: define and share responsibilities

For a designer a project is not finished once the PSDs are sent to the development team – be sure to stick your nose into the development process occasionally to make sure your designs are implemented correctly and that they developers have all they need. It may be that you need to rethink / redesign certain panels or call to actions or that you will need to resupply certain pages, panels or button styles.

Following on from point #4, it might even make sense helping at the CSS / HTML cutup to not only help the developers, but to get an understanding how your design is looked at and what needs to be done. Knowing CSS / HTML cutup (even in parts) is a really valuable asset these days!

7) Information Architects: capture information, the right way!

The buzz-word for years is “data-capture” – getting visitors to a website is one thing, but making sure they come back and leave their details is another. Make sure your forms are easy to understand and not pages and pages long if you don’t want to scare them away, and only ask for data necessary to the task – why should I give you my date of birth or post code if all I want is a newsletter??

Also, do make sure you have a tick box to opt in and out of marketing materials such as direct mail or newsletters, and have a clear call to action to your privacy policy.

.

I hope the tips help keep you and the development team working successfully on all your projects!

I was asked by a couple of fellow twitter users to divulge my plugin list, and since I keep track of them myself at times I thought this post would come in handy for everyone.

.

Starting with the basics – the toolkit

With a setup of IE5, IE6, IE7, FF2, FF3, Safari, Opera 8.5, Opera 9.6, Google Chrome and Lynx (on 4 different operating systems) I prefer to keep things in order and easy to maintain and distinguish. That is why I tend to set up my FireFox browsers with Mr Tech’s Toolkit. This toolkit is pretty much a Swiss Army knife, allowing you to install a multitude of extensions (even allowing you to make some older / newer ones compatible with your version!) and editing your Firefox version including the title bar. It is also quite useful when you are installing a number of extensions at once (say when reinstalling your browser from scratch) as it can disable the waiting times and automatically download / install updated versions.

Download MR Tech’s Toolkit

.

…and the usual suspects

Here are three tools you should never work without:

.

Web Developer Toolbar

The Web Developer Toolbar - click to enlarge

The Web Developer Toolbar plugin enables you to check your website’s content with and without styles, scripts or images, it can outline all form and layout elements, you can resize your browser window to any resolution, and – and that is what I use it for mostly – it enables you to validate the website’s HTML and links as well as against Section 508, and the Web Accessibility Initiative’s guidelines.

Download the Web Developer Toolbar

.

Firebug

Firebug in action - click to enlarge

Everyone knows it, everyone loves it. In a nutshell, you can edit live pages on the fly (temporarily and only in your browser of course), be it its html, css or even javascript. A wonderful tool for every developer, and for accessibility purposes it has a lot of options for you to check if scripts cause any problems or if other items can be done in CSS rather than graphically, or if the website you are browsing loads quickly or if any elements cause slow-downs or break.

Downside of the addon is that it is quite resource-hungry, and if the page you are on is using a lot of scripts you can expect either intermittent stand-stills or complete crashes. Then again, this is most likely because of that site being developed really badly in the first place

Download Firebug

N.B. If you are looking for similar fuctionality in Internet Explorer, why not download the Internet Explorer development toolbar from here?

.

ySlow!

ySlow in action - click to enlarge

ySlow is a Firebug addon developed by Yahoo based on its best-practice web performace guidelines. It adds a new tab to Firebug and enables you to see how well the website is performing based on a grade system, followed by suggestions on how you could improve loading times and scripts.

In addition, it also calculates the total size of your web page (for both empty cache and primed cache) and is able to list all the components of that page including load time, size and HTTP response headers.

Download ySlow (requires Firebug to be installed)

.

Usability and Accessibility extensions for Firefox

These are the main tools I am using almost daily. Please note that some plugins may be doing the job of others, however I am used to the way I use certain tools, so I am happy to ignore that fact.

.

Fangs

Screenshot of Fangs - click to enlarge

I was working on a project a couple of years ago where I was helping a charity to make their website accessible for their blind users. Seeing (or rather not seeing) a website in a completely different light made me realise that we take a lot of things for granted these days, and ever since then I wanted to make a difference, pushing website accessibility in every project I am working on. And Fangs helped me a lot.

Fangs creates a textual representation of a web page similar to how the page would be read by a modern screen reader. Fang generates a text-output of your website (saves you listening to a screen reader and having to rewind or forward it), showing you – literally – how your website will be displayed / read using a screen reader. Fangs also displays all headers and links on that page, enabling you to see which links will still require rewording or if some links are clearly not easily to be found.

Download Fangs

.

Firefox Accessibility Extension

Reporting feature - click to enlarge

One of the usual suspects when talking about “web accessibility” over the last couple of years, and the guys over at the Illinois Center for Information Technology Accessibility have done really good work with this one. Be it a quick report of your site (see screenshot to the right), showing up where forms lack labelling or listing all objects and their problems – this extension does quite a bit. Add the ability to validate your site against a number of W3C specifications and you are good to go!

It even has a bit of SEO value as it can list all headings and links (including alt  tags and title tags) at the click of a button, and it allows designers to check their website design for contrast and background imagery.

Download the Firefox Accessibility Extension

.

Wave toolbar

WAVE's error reporting in action - click to enlarge

Next to Fangs I feel that the WAVE toolbar is probably one of the most useful plugins for checking for accessibility issues or omissions. What makes it unique in a way is it can display the website you are testing in a number of different ways:

• Display any errors on your site (such as missing alt-tags, missing labels, incorrect heading orders or hidden content (see screenshot on the right)
• Display structure or order of your div’s, tables and headers
• Easily switch between outline or text-only versions of the site

Especially when working with sites that require DDA ‘A’ or DDA ‘AA’ standards this plugin will come in very handy.

Download the WAVE toolbar

.

SEO extensions for FireFox

I must admit, I am fairly new to search marketing, I have only started really looking into it about 15 months ago, and I am still trying to get my head around a couple of things here and there. Here are a couple of plugins I find very valuable in my day-to-day SEO activity. Again, some of the plugins probably do the same job, so feel free to experiment.

.

SEO for FireFox

SEO for Firefox XRay feature - click to enlarge

SEO for FireFox is a very handy plugin, it was designed to enable search engine marketers to evaluate the value and competitive nature of a market much easier at the press of a few buttons. SEO for Firefox pulls out a lot of data for your site at the click of a button: Page rank, domain age, page links, .edu links, Alexa rating, DMOZ information, whois, links from sites such as del.icio.us or Technorati…all in one quick screen. Sadly, it doesn’t export that data in a handy file, but hopefully a future version will.

Enabling SEO for Firefox enables you to see additional information for each search result in Google, such as PR, Age, links, Alexa rating, DMOZ, etc, which can be quite handy when it comes down to quickly checking your competition for a search phrase.

A few versions ago the guys at SEObook added an XRay (see screenshot to the right) to the extension which displays a lot of useful information such as header links, incoming and outgoing links, meta information, keyword density and the ability to export all links into one csv file.

Download SEO for Firefox

.

Search Status

Search Status and its functions - click to enlarge

Search Status is a tiny plugin at the bottom of your status bar that allows you to see Pager ank, Alexa rank and Compete rank in a handy little progress-bar format. Obviously that is not all, you can check Alexa incoming links, Alexa related links and back links from Google, Yahoo! and MSN. A handy combination!

Additionally, you can check out the robots.txt and sitemap.xml of the site you are looking at. Again, if some of the reporting features such as the Link Report could be exported somehow then the plugin would have even more value, we’ll see what the future holds.

Download Search Status (if that link doesn’t work – like it did for me – here is the direct link to the author’s site)

.

Alexa Sparky

Sparky: traffic trend of a website in a small graph in the status bar

This is a plugin that was only recently recommended to me by my good friend Matt Lewis. Alexa has provided a FireFox plugin that enables you to view the traffic trend of a website you visit in a handy graph format, together with the actual Alexa rank.

Additionally, Alexa Sparky allows you to view related links to this site (where do most users go after visiting this page?) and enables you to search the web for your site and find all links linking to it (though this seems a bit broken on occasion).

Download Alexa Sparky

.

Raven’s SEO Toolbar

The Design Analyzer in action - click to enlarge

One of my latest additions to FireFox is the Raven SEO toolbar. The guys behind Raven SEO Tools have done a great job at integrating a functional toolbar to tie in with their SEO tools suite. The toolbar allows you to analyze a website for backlinks, top keywords based on subject, and a cool ‘Design Analyzer’ (see screenshot to the right). What this does is it checks your site for a semantic structure, for page content, depreciated HTML, inline styling, outgoing links and – my personal favourite – it checks your site in the Lynx browser.

The toolbar also enables you to add link details to the website you are on, meaning you can easily keep track of which links you requested, which ones are active, inactive or declined, and it keeps track of the contact details and original page ranks of the domains you requested or exchanging links with. Handy? Definetly, saves my keeping track of that in Excel!

The two minor downsides of the toolbar I found are that you will need to insert a new Google Analytics tracking code (you cannot take over your own analytics account it seems) and you are unable to check for analytics or scheduled reports through the toolbar itself. Nontheless, the toolbar’s analyze tools are great and work very well, and the link details tool is working exceptionally well.

Download Raven’s SEO toolbar (read more about Raven SEO Tools)

.

Are you using an accessibility, usability or SEO extension that has not been mentioned here? Please share it with us!

.

Related reading:

• On information architecture and user testing – accessibility and usability testing
• On usability and accessibility – please display PDF links properly!
• On link usability – the art of keeping call to actions consistent

It is not news to anyone that I – like so many – enjoy video games, come on, it is a multi-million pounds industry. Game publishers have sought to expand their marketing influence in a number of new ways, some of them have started using social networking sites such as Facebook, MySpace, Digg, etc to promote their games either via their own channels, or via publicity stunts (Wii Fit girl anyone?). The message is clear – generate interest, generate sales. Since the company I work for has just signed a deal with a UK-based games publisher with Japanese roots and a European charm I have been looking more into the information architecture of this (still rapidly growing) market, which in turn has opened another door or two for additional potential clients.

As with pretty much every website, your website needs to captivate, generate interest, expect interaction from its visitors, and provide enough information for a visitor to make an informed decision and commit to buy (‘buy’ = a call to action to purchase or make an enquiry). You now need to ask yourself:

What are the important browsing routes for a game publisher’s website? Where does a visitor need to go? Who are the visitors? What do the visitors hope to achieve on this site? How do you sell a product? How do you show the publisher in the best way possible – to then show the published products in the best way possible?

For this purpose, let us look at the main focus points of the site we are specifying, looking both at the benefits and considerations.

Please note: while this article is focused on a games publisher’s website, most (if not all!) of the points mentioned here will be valid for pretty much any site.

.

A visitor’s first visit – What am I doing here? What do I want?

Let’s first think about an average user’s visit to a website. I – the user – am coming to the game publisher’s website to find out more about a game, maybe see if the game is suitable for me, if the graphics are nice, what the requirements are and if there are any comments, problems and solutions for the game….and if I want to ask questions about it or if I want to go and buy it.

As with every site, the visitor’s flow is usually the same:

Above: a typical user's navigation through a website, followed by the main 3 questions / reasons for the visit

The information architect’s role is – put bluntly – to facilitate the user’s navigation from the start of the journey (the home page) through the site in the best possible way, having provided the most amount of information for the user to make an informed decision to commit to use the final call to action (the product purchase or the enquiry page).

As I said before, this pretty much applies to every site you will be working on, in this example our user base or target market is the average gamer interested in a game, or the concerned parent to see if the game is suitable for their children.

.

Informing the user – I am here for a reason, inform me

UK Playstation displays a number of clear call to actions to allow visitors to delve deeper into the site

Right from the start an information architect needs to think about what the product or the information is, how the user will make use of it, how the user can find it, how it relates to other products / information on the site, and how to convert the visitor to a customer or (in the sense of user-generated content) a participant.

For the homepage, your main focus point is to show the most important browsing routes, namely:

• Main navigation
• Main featured item (game)
• Featured items (games)
• News
• Blog (if applicable)
• Shop (if applicable)
• Promotional slots (includes banners)
• Ancillary navigation (about us, site terms, etc.) – anything that is not necessarily required to convert a visitor to a customer

This already gives you quite a bit to play with, how much focus you are putting on what item is then considered depending on the actual product the website is selling (in this case games).

Sample screen resolutions on a website prototype (click to enlarge)

As a rule of thumb, your main browsing route to the product should pretty much cover 50% or more of any content above the fold. The ‘fold’ is still considered to be about 750px from the top of your screen (looking at the UK Playstation screenshot [or the live site here] the fold is going through the Little Big Planet image and just under the first news story), and is what should appear on the screen of a 1024×768 browser window without you having to scroll.

This is your main selling space, anything on this area will be seen – and will already influence your visitor in his / her 3 main reasons for being on the site. If the content is designed well, is accessible, usable and in a language the visitor understands then you are on the best way of converting your visitor to a customer.

Remember, only about 5% of all visitors will read the home page in full, so good imagery, striking headlines and easy to spot call to actions and links are key!

.

Coming up in part 2…

In part 2 of 4 I will talk about displaying information for both the existing and prospective consumers or customers and what considerations need to be made to “inform to commit to buy or enquire”. Stay tuned!

As a designer you have probably faced a similar situation before – can I or can I not change the link colours on certain pages to keep a consistent look and feel?

Yes, you can, but you shouldn’t ever. Here is why…

.

Where are they now? – Where can they go?

The simple truth is: links are the way to navgiate around your site. Every user of your site will always ask 3 main questions: “Where am I?“, “What can I do?“, “Where can I go?“. Findability is a key to converting your visitors to customers or returning users of your website.

The importance is to make users not work their way through your site, but to give them a pleasant experience when browsing through your site and its products to then make an informed decision wether or not to make a purchase or enquiry – or to return at a later date again to see what is new.

.

“Where am I now? What can I click on?”

Say for example you change all links, all clickable product headlines and all “read more” links on your site to orange, the main section colour. Since all your links are now a different colour from the rest of the site your users will in all cases spend a lot of time trying to figure out what is clickable and what isn’t, usually ending up in trial-and-error (especially if pages following this page are in another colour again) or giving up trying to figure out how to use your site. Colour differences are often used to indicate different areas of a web page, provide feedback and highlight headings and selected areas of text. With all these uses, care needs to be taken so that colours are chosen to make it easy for any user – no matter how experienced or inexperienced with using websites – can distinguish between what is text, what is a headline and what is a link. As such, changing link-colours throughout the site will result in confusion, as call to actions change or may not even be visible as ones.

Case study

Case in point, I performed a study with 23 individuals (aged 25 – 35) asking them to have a play with a website prototype and perform a couple of simple tasks (“Find information about product x”, “make an enquiry about product y”). On the prototype itself I changed a couple of pages’s links and buttons entirely, still the same sizes, but entirely different colours.

We began the test by giving each user an introduction to the project and what we expect from them today. We gave them a brief outline about the project and what tasks we would need them to perform. The test was monitored by sitting at a distance to the user, making shorthand notes. All 23 of the audience hesitated at these different pages, 18 out of 23 (78%) stopped the test, asking if this page was un-finished or if there was something wrong with the system.  14 out of 23 (60%) began randomly clicking items “to see what they did”, while 5 (21%) clicked the “back” button, trying to find another – “more comfortable” – way to the information.

This is obviously just one quick study, but it is already giving you a clear picture what to look out for.

.

A best-practice approach

When it comes down to links and call to actions, it is always best to follow a couple of guide lines:

• Don’t make non-link text within copy the same colour as link-text
• Make links change colour or display-value (bolder, underline) when hovering and another colour when visited.
• Graphic-based links (buttons, panels, etc) should be clearly distinguishable from the area / graphics surrounding them, should have a label and have text embedded in them
• A graphic referring to and adjacent to a text-based link (such as a hotel picture above the hotel title on a search results page) should be a link too (and have an alt-tag)
• Tabs should at the very least have a “normal”, “hover”, “selected” and “pressed” state

.

Related reading:

Derek Powazek – Where am I? (A List Apart)
Jakob Nielsen – Visualizing Links and Change the Color of Visited Links (both Useit)
Nick Usborne – Helping Your Visitors: a State of Mind (A List Apart)
Roger Hudson – Navigation Accessibility: Menus and Links (Web Usability) (Web Usability)