Don’t click here

A really simple thing, but a really common mistake:

Make hyperlinks contextual.

A like like this makes me think:

Click here to register

When I look at this my eye is drawn to the bit that is blue and underlined (your links are all blue and underlined … right?) But that part doesn’t give me the context of the link.

If a user is quickly scanning a page trying to find something useful to click on, which is how people typically read web pages, then using this sort of design will slow them down considerably.

Even the most novice web users quickly learns that links are clickable, you don’t need to tell them where to click – unless, of course, you’re obfuscating your links by not underlining them and/or making them a colour that isn’t blue.

So, put the context in the link.

This is much better:

Register now

Once you know this rule you will find hundreds of pages which could be so much better if it was used.

Broadband usage still under 50%

Whenever I present to a group of technical people I always ask for a show of hands and ask these questions:

  • Who is using Internet Explorer
  • Who is using a monitor with a resolution of 800×600?
  • Who uses a dial-up connection at home?

There are usually a handful of IE users, but never any 800×600 users or dial-up users.

I do this to point out how poorly most technical people relate to “normal” users.

Meanwhile out in the real world …

According to the latest Trade Me server stats about 83% of people use one of the variants of Internet Explorer (including 1.2% on IE5.x – who are these people and don’t they know somebody, ANYBODY, who can help them to upgrade)

On the screen resolution front, there are still about 14% of people out there using an 800×600 monitor. I assume many of these people have hardware which is capable of more, but they just don’t know how to make the change, or don’t care to?

And, according to statistics reported last week over 50% of people in NZ are still on dial-up.

It depressing! But, let’s not pretend that the audience is something that it’s not.

Zopto, and a comparison of mapping URLs

Ben Nolan’s presentation from last years Where 2.0 conference is now online at IT conversations.

http://www.itconversations.com/shows/detail1719.html

He talks about “zopto”, which is the name given to the URL addressing scheme created by ProjectX and used on zoomin.co.nz and smaps.co.nz.

Implementing URLs which can be easily spidered by search engines is a great idea.

Perhaps more importantly, having short human-readable (sort of!) URLs which can easily be pasted into an email makes the site much more usable and much more likely to spread via word of mouth.

Here are some links to the Trade Me office on some alternative mapping sites.

smaps.co.nz
http://smaps.co.nz/nz/wellington/wellington+wharf/cable+street/11/

maps.google.com
http://maps.google.com/maps?f=q&hl=en&q=11+cable+street,+wellington,
+new+zealand&sll=37.0625,-95.677068&sspn=46.630055,82.265625&
layer=&ie=UTF8&z=16&om=1&iwloc=addr

local.live.com
http://local.live.com/?v=2&sp=Point.83jh45zjyf51_11%2520Cable%2520
St%252c%2520Wellington%25206001%252c%2520New%2520Zealand___

maps.yahoo.com
It found Wellington, but couldn’t find the specific street address.

Perhaps X needs to spend some more time with Y and teach them a little bit about our country. :-)

wises.co.nz
http://www.wises.co.nz/?point=-41.289148_174.778663|1

Finding this URL was not easy. Here’s what I had to do:

  1. Locate the ‘mail’ icon which is hidden away at the bottom of the map;
  2. Send it to myself (they provide a form and don’t actually let you see the URL at this point);
  3. Click on the link in the resulting email;
  4. Manually fix it in the browser, because the “|” character causes problems in Firefox which appears to use this to break URLs across separate tabs.

Painful!

Wises is currently the most popular mapping site in NZ. They had 290,000 unique visitors in January compared to just over 100,000 for Smaps. This time last year they had 226,000 unique visitors and smaps didn’t exist. It will be interesting to see what happens in the next 12 months.

aamaps.co.nz
I gave up!

If anybody can work out how to get the URL for one of their maps please let me know how you did it and I’ll update this post. I won’t hold my breath.

Don’t break the back button

One of the golden rules of web development is “Don’t break the back button”.

The back button is one of the first concepts that somebody who is new to the web learns. It gives people the confidence to click on links safe in the knowledge that they can always return to where they were.

Breaking the back button is not a new problem. Jakob Neilsen has been banging on about it for longer than I’ve been using the web.

But, we keep finding new ways to break it.

I wrote recently that this is one of the unsolved problems with applications that use a lot of AJAX. Well, Julien Lecomte from the Yahoo! User Interface team has come up with a possible solution that he’s calling Browser History Manager.

This uses a combination of JavaScript hacks to fool the browser into thinking the page has changed, and so effects what happens when the user clicks the back button. Provided it’s coded smartly it also allows users to bookmark an AJAX page in a specific state, which is nice.

It’s good to see that people are working on this sort of thing, but to me it feels like a very hacky solution.

At what point does the fact we need to fix these sorts of problems cause us to re-consider the whole approach?

Something is happening

Today we added some Ajax-y goodness to the My Favourites page on Trade Me. This makes it much quicker and easier to save your favourite categories, searches and sellers. And on the page itself you can change the email frequency or delete existing favourites without a post back.

All good, and probably well overdue.

One of the lessons we’ve learnt with asynchronous buttons is the importance of an intermediate ‘Saving…’ state.

So, for example, as of today our ‘Save as a favourite search’ button starts out looking like this:

Save as favourite category

When you hover over it glows like this:

Save as favourite category

When you click, it immediately changes to look like this:

Saving

This makes it clear that the click was recorded and that “something is happeningTM“. Then we go ahead and make the asynchronous call to record this change in the database.

Finally, when the asynchronous call returns, we update the button to look like this:

Saved as favourite category

This is a simple thing, and very easy to implement. But, especially for people on slower connections, this can make the difference between understanding what is happening and confusion.

What other tricks are you using in your Ajax-based designs?

I think we’re starting to see some de-facto standards emerge, which is good news for users as all sites will tend to start working in a way that they are familiar with.

But there are still lots of problems which don’t have nice solutions.

For example, pages implemented using Ajax often break the back button. This is a problem as the back button is a concept that even the most novice web user quickly learns and relies on when they follow an incorrect link.

Also, using Ajax can cause the URL displayed in the address bar to get out of synch with the content displayed on the page. This makes it difficult to bookmark or link to the page. If you are relying on word-of-mouth to market your site then making it difficult for people to tell their friends (e.g. by sending them a link in an email) could be fatal.

A community site which documents these sort of simple common Ajax design patterns would be really useful. Is anything like this already out there?