Why it’s so bad

First it disables your middle mouse button; second it disables your right mouse button, if that’s not bad usability I don’t know what is. Now you can no longer open links in new windows via middle click or right click. You can’t access your right click menu, which also means you can’t use the built in spell check some browsers have when filling out the websites contact form to complain about this terrible script they are running. The only thing you can do is left click your away around the site and if you cease this behavior you will get a punch in the face message that basically tells you not to steal their content. Thanks for assuming the worst and insulting me at the same time.

Who are you fooling?

So you have thoroughly annoyed any power user by now, but not only have you annoyed some of your visitors you aren’t protecting anything. Anyone who is even remotely computer savvy can take a screen capture of any page on your site or even save the page. A slightly more savvy user will just use the only remaining left button and drag the image to the address bar and bang, the image is loaded all by it’s lonesome ready for the taking. An even more technically minded person can just view your source via the view source menu and take your code, content or images and do as they please with them.

This is just the tip of the iceberg. Chances are your site has been indexed by hundreds of crawlers many of which are the ones most likely to steal your content in the first place. Your copyrighted images are probably showing up in paces like Google images too, so do us all a favour and get rid of the ridiculously annoying script. If you happen to be the victim of one these sites take two minutes and find the contact form and fire off an email informing them of their ill ways, or better yet, send them this article.

1. Breaking back button functionality

I wrote about this awhile back in “Stop breaking my back button!“. Yes sometimes there are cases where you might legitimately want to stop users from hitting the back button in the middle, like in the middle of a complex form, but I see it being broken in many situations where it just shouldn’t be broken. Complex sites should be no excuse either; look at Gmail, the back button always seems to work just fine here. Even a pop-up message warning you that you may lose your data is better than just breaking the button all together.

2. Underlining links that are not links

Changing the way people are used to seeing and using the web is almost always a bad idea. Example; most of the research I have read says an underlined link will probably be clicked more than a link with no underline. A great piece of insight proving that we perceive an underline on the web as a call to action. Underlined text that is not actually a link is jarring and annoying. Users will click on this and be confused when nothing happens. Anything underline on your web page  should be a link.

3. Disabling middle or right click

This is usually done in some futile attempt to protect copyrighted material. Usually a power user like myself middle clicks or right clicks links all the time in order to open them in new tabs, and instead of getting expected behaviour we are insulted with a messaged telling us not to steal the images or that they are copyrighted. Yes, thank you for assuming the worst, and if I want your images I can get them by viewing your source or just dragging them to a new window. Don’t annoy your visitors by breaking things they expect to work in a certain way.

4. Supporting only 1 browser

If you owned a store, this would be akin to punching every 4th customer in the face as they walked through the front door and then telling them they cannot enter your store because of the colour of their jacket, don’t do it. There is absolutely no reason to support only one browser in this day and age. There are several fantastic browsers out there and some users are very passionate about their browser choice and will not change for it for the pleasure of entering your site. Also be careful with browser detection, on several occasions I’ve seen sites denying  access to browsers that are fully capable of displaying the site.

5. No date on articles

Sometimes I will be reading an article that is time sensitive but it will have no date on it. Even if it is not time sensitive, it should still have a date. Is this article up to date? How long has this been an issue? Should I comment? I briefly wrote about this awhile back in “Usability — the date is very important“.

6. Click here and full URLs – use contextual links instead

I’ve talked about “Click Here” in the past. It’s bad usability, and it’s bad for SEO;  it’s also a personal peeve of mine. First, if you have an underlined link or something that looks like a button there is no reason to explain to the user that they need to click in that spot for something to happen, we aren’t idiots. Secondly, that space would be far better spent telling me what I am clicking, especially with text links. If a visitor is scanning a page or article, they may not be reading every word. Underlined links pop out and when I stumble across “Click Here” it means absolutely nothing. Every link should have context, like “View our privacy policy”, or “download the tutorial in PDF format”. The funny thing is making a link contextual is usually as easy as just removing the click here part and linking the text around it. “Click here to download the 2008 financial report” can now be “Download the 2008 financial report”. Similar to “Click here”, full URLs usually provide no context and are hard to read anyway, put it into context or just name the article or site you are linking. These contextual links will also help with SEO. Google has just as much trouble with “Click Here” as we humans do.

7. 100% flash site

Okay, this one may be a touchy subject, and I recently covered my reasons for this in “Why Flash sites usually suck“. Flash has it’s place and it works well as a modular addon to standard XHTML, but when a site is all Flash it easily breaks a lot of expected functionality. With great JavaScript frameworks like jQuery, MooTools and Prototype it’s easy to add a lot of the effects Flash does without sacrificing web standards, usability and SEO.

8. Enter pages

This one is almost dead, but it still crops up it’s ugly head sometimes. I will even admit back in the day I had an enter page, but back then everyone had one, and it was cool, or a least we all thought it was. Today the web is about speed and snagging a visitors short attention span for longer than 10 seconds. I’m sure the average mind set of an Internet user is “Give me what I want now and fast”. Ever been searching the web and clicked on a link, only to instantly click the back button to Google and find the next best match. There’s a million people serving the same thing you are, your job is to do it better and without annoying your users. Don’t waste your visitors time telling them they are about to enter your site.

9. Opening a new browser windows for every link

This is one that a lot of sites do, even the good ones. It’s one of those things that we web designers are usually forced to do. Visitors can and will open links in new windows if they want, or they will use back buttons to return to your site. Don’t try to hold them to your site, but I doubt any amount of ranting I do will change this particular behaviour.

10. Link depth and pointless clicking

Try to make your information accessible to visitors in as few clicks as possible. With information overload most visitors will quickly tire of clicking around your site if they cannot find what they are looking for. Make it easy, make it fast, and do it with expected behaviour. I’m looking at you Government of Canada.

11. Contact information

Usually you want a way for users to contact you. There are cases like this blog where I want it to be hard for you to contact me (although I probably should have a contact form), because I want to avoid spam and I have a comment system in place for you to communicate with me. Most business websites should however have a very obvious call to action for contact information. I can’t believe how many times I’ve seen sites selling things where the contact call to action is not obvious, better yet, put your contact info in the header,  sidebar, or footer so it’s always visible.

12. Today’s date is (drum roll)

The other extreme of not dating your articles, is to let everyone coming to your site know what the date is today. This is completely pointless, but I’ve actually had this debate with someone who still has today’s date on their site. I’m pretty sure everyone coming to your site already has a clock and date on their computer which may even be displaying today’s date. The date will only serve to confuse people and make them wonder if the content is from today. Don’t waste your valuable web real estate telling visitors something as silly as what the current day or time is.

Why Flash sucks — most of the time

Flash usually sucks because it is used in places where it’s not needed, breaks usability basics, or tries to deliver a rich media experience to people who don’t care. Lets face it, most of us are not coming to a site to see Flash animations, flashy enter pages and load dialogues; sure this was impressive 5 to 8 years ago, but most of us are over it now. I remember animating menus, playing with collision and elastic algorithms I found on the web and drooling at the newest Flash in the Can awards which are still pretty impressive. It was really cool and fun, and there are a lot of places where this will still fly if done right, your website may not be one of them.

Flash sites have to be better than awesome

The only flash sites that will ever hold my attention are ones that are unbelievably clever or awesome on a huge scale, and even if you qualify in both these areas you have to get your users to stay at your site long enough for it to load and initialize. The point I’m trying to make is if you are going to use flash, you better have a good reason for it, you need to be a fantastic flash guru, and it better be freaken phenomenal.

Information, content is still king on the web

People like cool screen savers, even little visual touchy feely apps are getting very popular on handhelds like the iPhone, but when people are searching the web they usually are looking for information. That information is best found in plain text. Google and most of the other search engines index plain text on your site, if it’s content people want they will most likely find your site via Google or some other search engine. Yes Adobe is working hard with search engine providers to make Flash more search engine friendly, but we are not there yet, and even when we are a lot of my reasons for not using flash will still be valid.

I remember several years ago people were talking about high speed bandwidth and how we would be able to use as many graphics and as much Flash and rich multimedia as we craved. Yet here we are and the web is more text heavy than ever. RSS feeds are gaining popularity daily, and in some cases you are seeing less graphics, not more. Why? Because content is king, and so is searchability. There is a whole package to developing a fantastic website and Geeks In Training has a great article called Developing websites — structure, content, and design that delves into this deeper, but we are going to limit ourselves to Flash here.

Flash has changed the web

There is no doubt, Flash has changed the web, and mostly for the better, but it has done it in ways no one could have imagined several years ago. It hasn’t changed how we navigate the web, it hasn’t changed the fundamental structure, or usability, although I would say it has hurt usability when used poorly.

Flash has obviously changed how most of us view video online. It’s also added rich content in what I like to call Flash modules. I define a Flash module as a tiny piece of a website that is Flash based. This could be an advertisement, a video, interactive graphs, a game or application. This is where flash really shines.

Where Flash fails

Full on Flash websites are where things get ugly. I remember visiting a then famous Flash site called Gabocorp in 1997. It blew us all away, us being any web designer / student I knew at the time. I have found an archived version of the original Gabocorp website. I remember this thing took forever to load on my Pentium 133 and chugged and stuttered away as I watched the animation in awe at 3 frames per second. It even held this bold statement:

You are about to enter a new era in website design. This is the new standard for all things to come.

Welcome to the new Gabocorp.

Go

What we have here is a splash / enter page and a Go button, both considered bad by today’s standards. I don’t want to bash this site though, at the time it was jaw dropping and completely innovative, but the web was mostly geeks back then and there was nothing on this site that came anywhere close to what we see today, it was just cool because it was a new technology used in a way we had never seen before and for no other reason. The time when things are cool just because they are Flash is long gone. Yes people are still doing amazing things with it, but for mainstream sites Flash is usually an add-on component.

This brings me back to Flash portfolios, when we look for new web developers and designers we want to see great usability, standards compliant code and an engaging site that we don’t have to sit there and figure out. As soon as you have to explain what a button does (click the cool little animated thingy and drag it to the box) you fail. You have lost me and you have definitely lost Google and the majority of search engines indexing your site. You’ve probably lost all of your less tech savvy users too.

So let get back to basics, the web is not TV, although we may watch TV on it, we expect the containing site to be usable in all the ways that we are used to. I think the topic of usability can scare off some designers, but usability in some ways is easier than design. Design is an art and it’s subjective. Having your site practice good SEO and accessibility for everyone is not subjective, it either works or does not, and you can measure this through your website analytics software.

Usability, usability, usability

Right now Flash sites do not work on iPhones and other handheld devices, if a fraction of your visitors could be coming from these devices than you effectively have zero usability on these platforms. When these devices do support flash there will still be major limitations like file size, download speeds, tiny screens and limited processor power to deal with. Good usability is also even more important on a small screen, so use Flash wisely; impress without sending all your search engine traffic away and give people the great content, applications and experience they came for. Make that experience last past the load screen.

Lately E Ink has been getting a lot of press. Earlier this month Esquire showed off the worlds first ever E Ink magazine cover. This brought visions of the science fiction film Minority Report to many people and an environmental disaster in the making for others. There are also many e-readers being released with iRex to introduce a 10.2-inch E Ink reader next week. Although I love the technology, I think the current vision of E Ink by the press and blog sphere is somewhat flawed.

Minority report animated paper

Every where I read about E Ink I hear things like “Will this replace paper” and “This will allow for a more print / newspaper friendly layout”. These are all flawed concepts to me. It reminds me of other great technological advances like “Will the TV replace radio” or “Will the Internet replace TV”. Yes some of these technologies merged and can be used over the Internet, but no technology replaced the other. We still listen to the radio, whether it is satalite radio in our car, FM, or streaming radio, and we all certainly still watch television. We also use the web in the way it was envisioned also.

The grid

My art teacher would shoot me for saying this as she felt that the failure to adhere to a print like grid was a major failing of the web. I on the other hand believe it is a major advancement, I really hope that we don’t resort back to old fashioned print style layouts. This was done on paper because there was a finite amount of space and paper costs money so you have to use it all up. Writing content to fit little boxes isn’t fun. Anyone who has had to create print style web layouts knows this, it usually doesn’t work. The wonderful thing about a digital display is that you have a liquid medium and unlimited paper. The text can be as long as you want and flow around images and boxes according to font size or display type. With CSS you even have the power to display the content in different formats, independent from the layout. This allows web designers to support many different platforms, and make sites usable for the visually impaired.

If e-readers do take off, and I think they will, I really hope that print changes to be more like the web, and not the other way around, it’s a far more flexable approch. It’s also only a matter of time before touch sensitive E Ink displays will be the norm, why lock it down to old fashioned design principals. Will I even have to click/touch my way to page 5 to continue the story? Maybe we can even add E Mess to the reader itself so that when you hold your reader for a long time your fingers become all soiled just like with a real newspaper.

A land fill nightmare, why?

While everyone was praising Esquire for bringing magazines into the 21st century did anyone stop to think of the environmental implications? This is a little more serious than my first grip; why do we have this disposable attitude towards everything? Here we have this fantastic reusable technology, but we want to turn it into a throw away medium? Don’t we have enough garbage clogging the landfills already. I know we can recycle newspapers, but I’m not so sure about E Ink, and recycling costs a lot of money. Why bother when we can just re-use the technology. Once everyone has an e-reader they can just wirelessly download their favourite newspaper.

If papers had to stay old fashioned with their multi-columned mess, companies could even deliver content in multiple formats. Lets hope that every time we read a newpaper or magazine in the future we are not dropping batteries by the boatload into our garbage cans as we step off the subway for work. It should be about reusability, not a throw away technology.

Cost

The cost is the last major hurdle. Right now really popular readers cost anywhere from 300 to 1000 dollars. This is just too much for the average Joe. The new 10.2 inch iRex reader to be released next week clocks in at $850 for the high end model with Wi-fi, Bluetooth and 3G. Couple that with the fact that a lot of people don’t even get through a book a month and the cost of buying physical books is still a lot cheaper.

E-readers will have to get a lot more competitive or offer features that we can’t live without. Right now the average smartphone / laptop can do everything an e-reader can do, and in colour. The only real advantages an e-reader has is a screen that can be seen in bright daylight and long battery life, not enough for a lot of people, but if you read lots of books it can be worth it. I think back to breaking my back with college and university books; an e-reader would have come in handy back then.

The future is electronic paper

That said I do think the future is in electronic paper. Like any technology it is still in its infancy. Some day in the near future refresh rates which are pretty slow right now will be faster and the technology will be available in colour as E Ink has already demonstrated. I could even see monitors switching to this technology someday.

The first thing you will notice about Cuil is its unorthodox appearance. The main page is black and the search is centred in the middle.

The next thing you will notice is the results page which is broken into columns. Under the FAQs section of the site one of the questions is “Why do you display search results in columns?” and the answer is.

It’s easier to read text when it’s in columns. That’s why publishers of densely written text like newspapers and family bibles use them. You can switch between using two and three columns by clicking on the link at the bottom of the results page.

I have to disagree with this. The web is not print. The reason publishers cram densely written text into newspapers and books is because they are dealing with limited space and paper costs money. Most papers are also huge and would be impossible to read in one long sentence. Neither of these are a factor in the online world. There is no need to cram everything onto one page and I just find it confusing, but maybe I am alone in this. I believe horizontal panes are much easier to read and much more scalable. Columns do have a place on the web, but I don’t think it’s working here. Lets not forget about hand held devices that have very small and narrow interfaces. I know most sites have mobile versions, but as mobile browsers get better people will start using the regular web interfaces and not the stripped down mobile versions.

So far everything I’ve talked about is cosmetic, what about the actual search; because really that’s what it comes down too isn’t it? Google is huge because it’s interface is easy to use, but more so because the engine finds what we want.

My first test on Cuil was my own name, maybe I’m narcissistic but no more so than all you Facebookers out there. The shot above is the search of my name; unlike Google it didn’t find much. Again I find the interface very confusing, the columns are not helping ease of use at all in my opinion. I did see one snippet of text from my blog, but when clicking the image and link I was taken to some link farm. Another user on Slashdot commented that they had searched their name and found their blog with an image saying “My success with Scientology”. He further went on to say he was not a scientologist.

Earlier in the day some searches were bringing up a message saying the server was too busy, yet more simplistic searches like “cat” would work just fine. A search like cat does yield more interesting results.

Now this is where it gets a little more interesting. At the top you get tabs with things like “Cats and Dogs”, “Cats & Dogs” (what’s the difference?) and Siamese Cats. There is a more tab and then down the side their are categories. Some of this is really reminding me of a web directory, only done web 2.0 style. I also typed in Javascript and the breakdown was really nice. For broad topics like this the engine displays a nice list of sites and categories, the problem is most of my searches are nothing like this. I don’t search for Javascript. I search for something like “jquery postal code form validator” which yields a whopping zero results in Cuil while yielding 27,200 in Google.

Okay, lets try something a little less niche. Maybe my cat is not eating so I run to Cuil to do a search on “cat not eating”. What do I get? I get the list below.

• Re: Hatchlings Still Not Eating – Please Help!
• Why is My Betta fish Not Eating and Stays at the top …
• Re: Sulcata Not Eating Help!
• Python Not Eating
• Re: Python Not Eating
• Baby Sinaloen Milk Snake Not Eating!!
• Re: Box Turtle Not Eating
• Rat Snake Not Eating
• Re: Python Not Eating

What’s with the reptiles? I was searching cats? None of the pictures are snakes either. What gives? See a full size shot.

Now lets see what Google made of “cat not eating”.

• Cat Not Eating
• Yahoo! Canada Answers – Cat not eating – is it the heat?
• cat not eating – Pet forum for dogs cats and humans – Pets.ca
• My Cat Is Not Eating And I Need Help
• Ask Cat Not Eating Questions Questions
• Cat not eating – Pet Health Forums

Yep, no snakes on that list. Cuil did manage to get an extra three search results onto my page though, but none were on cats unfortunately. Final verdict from me is a major failing grade. Cuil has got a long ways to go before it can be dubbed a “Google Killer”, it may be the biggest or have the most features, but if I find snakes when I’m looking for cats there is a problem. Lets hope these are just a few bugs that need to be ironed out, but really, first impressions can be everything.

A 404 error message means that the server was successfully contacted but could not retrieve the file requested by the client (browser). This can happen because of an outdated or expired link, a linking error on the site itself, or a user typo.

Dealing with a 404 the wrong way

I can’t believe how many sites throw up cryptic nonsense that the vast majority of people will have no clue as to what it means and even for the people who do, why do we need all the gritty details? One of the worst things you can do is post a 404 Error and call it a day. What the heck does that mean? For the majority of us, (even the ones who know what a 404 is) that is when we close the tab or return to Google to find what we need.

Here is an example of a horrible 404 I saw recently on a large well known corporate site.

This error message is wrong on so many levels that I don’t know where to begin. It’s so comical that it was the inspiration for this article. Why does this 404 suck?

1. It breaks out of the site losing all navigation.
2. Not one single link back to the actual site.
3. Main title is Error 404–Not Found (useless).
4. Spews out some silly nonsense about status codes and we all know that 410 SHOULD be used if blah blah blah.
5. Absolutely way too much detail that no one other than the developer needs to know and they should be able to get this from their logs.
6. It’s super ugly and scary.
7. I’m sure there’s more bad things to say about this message.

Other mistakes to avoid

Another bad thing to do is pop up a 404 message telling the user that the page was not found and then asking them to email the web master telling them about the error. Don’t you think your visitors and clients have better things to do with their time then testing your site and reporting back to you when it blows up in their face? You have log files, look for your own 404 errors and if you see a lot cropping up either find the error or redirect that traffic somewhere useful.

Good 404 practices

Don’t break the user out of your site. Load the 404 error message into the body of the page leaving all of your site navigation as it would be on any other page. This gives the user the option of quickly returning to other parts of your site instead of leaving it for good. Don’t make your visitors work harder than they have too. Offer up an alternative link or even a search box.

Have a good message and if you really want to have 404 in your message make it the smallest text on the screen, not the largest as so many 404′s do and don’t make it the first thing that greets your visitor. The wording should vary depending on your demographic and target audience. Some sites use a funny 404 messages, I use the one below on this blog.

Oh No! Something has gone horribly wrong!

This page has probably been the victim of foul play at some point — the Internet can be a rough place sometimes. We will miss this page, but it is time to move on. Try visiting the leader of these pages, it may know what to do next.

I love funny 404 messages, they grab your attention and make you forget the fact that you can’t find what you came for and just maybe you will continue browsing the site. Have fun with your error messages and always give the user a way of getting back into the site, even if it’s just a link to the main page.

If you would like to see my real 404 message type some junk after www.ianhoar.com/. I have not linked a broken page directly because I don’t want 404 errors showing up in my logs and stats unless they are real.

Feel free to post any good or bad 404 messages you have found in the comments section.

So many advertisements fail to engage a user, you finally get someone to click your ad only to lose them five seconds later. The method MeeMix has used is to give you a taste of the application and then ask you to sign up after you have invested time and effort into the site. A list apart has a great article on this technique called Sign Up Forms Must Die.

The great thing about MeeMix is how the site finds music you like. This is supposedly what separates it from other online music sites, but to be honest I haven’t really tried many other services.

I still haven’t fully figured out all the ins and outs of MeeMix, but since I’ve started using it I now have some Mee Stations on the left hand side. These play different genres of music. Below that I have some little icons that allow me to get information on the song, share what I’m listening to with friends and embed the tunes on a web site. Then there is the Mood Control. This is one of the coolest features I think. There are three sliders, Surprize me, Pulse, and Atmosphere.

• The Surprize me slider will give you different music then you may be expecting from your current settings or favourites. As you slide it further, the music will become more and more different from what you are currently listening too.
• Pulse is how fast or heavy the music is, when slide to the left it’s more relaxing, while the right is more party time as they put it.
• Atmosphere sets how light or dark the music is. Dark = sweet and melancholy, while light = cheerful weather.

MeeMix has a main window the album cover of what you are currently listening too with other options. You can skip back over the list of songs you have listened to also. You can also watch video here which is taken from YouTube. Game mode takes random songs and gives you 30 seconds to guess what it is.

You will find more controls at the bottom of the main window. The most important one is do you like this tune? If you slide the slider all the way to the Not section it will automatically skip that song. Slide it all the way to the Hot section and it will remember that you like this song. Supposedly as you do this MeeMix will learn the kind of music you like and don’t like.

Based on sophisticated statistical analyses, we have built an algorithm that mimics the way neurons work in the human brain, when it comes to preference and taste.

The only real flaw I can see with MeeMix that can be annoying and confusing is its use of pop-ups. First you must allow the popup to be initiated, at least in Firefox and then it will open in another tab. This behaviour will vary depending on the browser. You will then find yourself clicking on things in the player that might target the other window. At first I thought some links and buttons just weren’t working, but they were actually targeting my other window. I hope they will refine the interface with time and leave the pop-ups behind. For the most part you only really need the player window open anyway.

MeeMix also has links to some of the major social media sites out there, so you can share and post to your friends. So far I like the site, and in a web with a new social site every week that’s saying a lot. Will it catch on or even hold my attention? Will it hold yours? Only time will tell.

This is an extremely basic good usability practice. The best part about this one is you don’t even have to do anything to have this functionality. In fact you actually have to go out of your way to annoy your users. There are some instances where a form may need to break back functionality, but I see it in places where it isn’t necessary at all.

For years Flash has been the biggest offender along with the extremely annoying and silly javascript alert that tells you “this html is copyrighted”. Who are you fooling, if I want your source I can get it, but all I really want is my middle click.

I’m a power user, at any given moment I could have between 10 and 20 browser tabs open. Now I’m starting to see sites that go the extra mile, they aren’t using Flash or alerts and they still break middle click functionality. Stock photography sites are huge offenders, the one time when I am very likely to want this functionality.

Stop breaking my middle click!

I want to stress to web designers and developers, stop breaking expected browser behaviour, you are annoying your users. I should also mention that when I click ads I also always middle click, it’s in my nature to middle click, I think I’m middle click obsessed. When I click your ad and nothing happens, guess what? Nothing, no visit for you.

Javascript pop-ups are big offenders too, but these can also be done without killing the middle click. Try clicking and then middle clicking the example link.

Example Link

<a onclick="window.open(this.href,'name','height=200,width=300');return false;" href="http://www.ianhoar.com" target="_blank">Example Link</a>

Visit A List Apart for a more in depth article on Accessible Pop-up Links.

Also remember, when I have 20 tabs open, I am far more likely to stumble back on your site later in the day for a second visit.

How do you know when a site has done things right? Well the obvious ones are that it looks professional and is nicely designed, but these are both subjective, especially when it comes to design. What I think looks great, you might think looks like garbage. I can tell you how many times I’ve sent mock-ups for friends to critique only to find out that half of them love it and half don’t. This is why the look of the site should take a back seat to usability, but you also have to remember that good design can lead to good usability.

How many times have you been on a website, it looks great, its got what you want, but you are still left there scratching your head and clicking away trying to figure out where something is. This may be as simple as how do I comment on this post, or how do I add this to my shopping cart, or it could be more serious, like why is this form not excepting my postal code! A site should never annoy it’s users, I cringe when I see a form that says enter your postal code and then explains what format it should be in. People know what format their postal code should be in, don’t explain it to them.

Take for example my postal code, M8V 3X6. I should be able to type this as M8V-3X6, M8V 3X6, M8V3X6 or m8v3x6. The regular expression validation is simple for this, and there is really no excuse to allow only one of the mentioned formats, yet I see this all the time. Same goes for telephone numbers. If you have a format you prefer you should convert the data into your preferred format. Strip out the spaces and hyphens or add them, but don’t make the user do it.

Get a different perspective

I would love to be a fly on the wall (I was going to try and be witty and say a fly on the web until I realized the obvious implications) watching a users frustration in some of these scenarios and recording how many lost sales or even return visits this might cause. I’m sure it’s quite high. The problem is, sometimes it’s hard to notice bad usability on a website until you run across it. It’s even harder to notice it on your own site.

As designers and developers, while we build our sites we become so engrossed in the process that it becomes hard to notice the user experience at all. We are so intimately involved that we develop a blindness to it. You probably type in the exact page you want while working, or rapidly click through to your destination. Your user isn’t intimately involved in your site, and you have to try to pull yourself back, put yourself in the shoes of a new user, get a different perspective.

Obviously the best thing to do is to get other people to try out your site. For the same reasons it’s probably good to have testers who were not involved in the development of the site, it’s probably equally important to have regular users play around with the site for usability. Testing is usually taken pretty serious in larger companies, but I doubt usability ranks as high. What about small companies or private individuals that don’t have these resources at all? This is where paying attention to your own surfing habits can help.

Recognizing a good user experience

Obviously we can learn what not to do by a bad user experience, but I think it’s equally important to recognize a great user experience. Try to take note the next time you order something online or use a complicated website not only what annoys you, but also what is good about the experience. It’s so easy to throw your arms up in the air and say “This site sucks”, but when you are on a fantastic site it’s very easy to overlook that fact. Why is the site fantastic? Why do you like it? Why is it so easy to use? Take mental notes, and keep these idea’s for your own work.

Learn from excellence and apply it to your own sites

When you see a site doing something that you feel is working, ask yourself if your site is doing the same? The answer may be no. You might have that eureka moment when you realize that you have a really convoluted sign up form, or your navigation is hard to use. This may only be triggered by seeing it done better elsewhere, but the key is to recognize this.

A place where I have found a consistently bad user experience is restaurant websites and online ordering systems. When someone comes to a restaurant site, there is only a handful of things they probably want. A menu, a phone number, or an ordering system. Most of this should be simple, but an online food ordering system can be a pretty complex experience. You need to be able to navigate the site easily, add and remove items, and even customize order toppings and side dishes. I have seen one restaurant ordering system that literally looked like an excel spreadsheet of form fields, now that’s appetizing.

Now we know we don’t like the site at all, but could we do better? Maybe we visit a site that is similar with a much better user experience but fail to notice it. What’s bad is if we fail to notice that our own site has a bad user experience. Because you are so intimately involved with it, it seems easy to you. This is where a great site will help you enormously.

I rarely order from online ordering sites because of the hoops I have to jump through, but one exception is a popular rotisserie chicken restaurant we have in Ontario called Swiss Chalet. This site is incredibly satisfying to use. Now if I were designing my own restaurant ordering system I would have something to compare it too. I can see why things are not working on other sites, because this site has done it right. We are more likely to notice and remember a bad user experience, but the sites you do like are the ones you keep going back too.

Putting it all together

You have to be careful not to get carried away. You don’t want to end up ripping off someones site, and just because you like a site doesn’t mean you can’t do better. Take a lot of idea’s from as many sites as possible, this will diversify your site. You can see this happening all over the web. There is a natural progression of people innovating and adding new idea’s which soon become standard practice on whatever particular demographic you are looking at.

There are also countless online resources on usability, things that are no-brainers and standard practices. Things like underlined text should always be a link, or a link should be readable out of context to the surrounding text (see my article called “Click Here!”). Accessibility and SEO also all benefit from good usability. Always pay attention to what annoys you and what works, because while you browse the web, you are a perfect usability tester and can gain a wealth of knowledge.

Related:

• Usability — the date is very important
• Click Here!