If you live in the UK, you’ll be hard pressed to avoid The Olympics at the moment. One of the main talking points, certainly for Londoners is the traffic nightmare expected to jam the roads, underground, buses and trains. In anticipation, the powers that be have set up a website which is advertised to help people avoid traffic chaos: www.getaheadofthegames.com.

Unfortunately, we feel the website doesn’t live up to the hype and we’re surprised the user experience was so poor. Instead of moaning about it, we thought we’d use it as an example to help you avoid similar user experience issues cropping up on your website.

1. Your homepage should focus on building credibility and leading users to the main reason for their visit

Your homepage should deliver a clear, coherent message about who you are and what you offer. Any confusion or mixed messages lead to high bounce rates as users click the back button to return to the search results.

The first impressions of the getaheadofthegames.com website are that it looks like some kind of affiliate website. The use of clipart and the cheap looking logo don’t foster immediate credibility. In addition, the huge map of the UK and live twitter feed capture attention but offer very little value to the first time user who is most likely looking to plan a journey in a specific area. Although the dropdown is placed high up on the homepage to allow users to filter by their location, this could be missed by users as the pink headings, blue buttons and large green and pink map dominate attention.

The ‘plan your journey’ which we anticipate to be the biggest user requirement for the site is given much less priority in the design by being placed in the bottom right corner. Even less prioritised are the official logos behind the site, which are placed at the bottom of the page.

Its so important to establish credibility quickly. If we were working with getaheadofthegames.com we would recommend that they reorganise the layout of their homepage to de-prioritise the map and twitter feed, and instead boost the journey planner and spectator user journeys.

2. Check that any advertising and call to action buttons deliver what users expect

When setting expectations in advertising or even in the labelling on a call to action button, be sure to deliver on that expectation. If you offer a ‘book now’ button make sure users can actually start booking straight away after clicking that button.

We would expect most people coming to the getaheadofthegames.com website to be focused on solving a travel related problem. They are likely to be either looking for the best way to travel to the Olympics as a spectator, or as far away as possible so they can travel freely to their destination. Although the site offers links to ‘plan a journey’ and ‘are you a spectator’ clicking on those links takes users to a page full of text and links to other websites.

If you set an expectation in an advert or other marketing material which promises to solve a problem for your customer, make sure you can easily deliver the solution. The getaheadofthegames.com website offers help but then passes the buck and links off to several different sources. This is likely to frustrate and overwhelm users looking for a simple answer to their travel problem. We would recommend that the getaheadofthegames.com website worked more closely with other content providers to embed journey planning tools into the site rather than linking off to a variety of different locations.

3. Don’t blow your budget on ‘cool functionality’ which doesn’t offer a great deal to users

Although you and your team may be excited by some funky new gadget, widget or tool, be very clear with yourselves on the reasons why you are including it in your site. If the honest answer is that you think its cool and you want to learn more about it, you probably shouldn’t do it. Focus on whether it will really solve a problem that users need solving. When we conduct user experience research, we often speak to clients confused why their site isn’t delivering on their business objectives. When we delve a little deeper, we find that users don’t use the features they spent most of their budget and attention on developing because they don’t see the value.

Sadly, getaheadofthegames.com have clearly spent a lot of resources in developing a nicely designed, very visual, interactive travel disruption tool. Sure, it looks good and works seamlessly, but do users really need it? If you’re trying to get from Waterloo station to Russell Square, do you really need this tool to tell you that stations on the District Line from Wimbledon to Earls Court are likely to be much busier than normal? Showing the whole underground map with a date slider at the top looks interesting, but the amount of information displayed is overkill for the average user.  Is this a case of designing a cool tool, but not thinking about how much it actually solves the problem users face?

Perhaps we’re being a little harsh but we believe that simply focusing on core user needs will lead to innovative features and functionality which are exciting and really useful. If we had been involved in the getaheadofthegames.com project we would have made sure we fully understood user requirements at the outset to ensure all features and functionality were clearly mapped to priority user needs.

How to take action on your website

1) Take a look at your website right now. Ask yourself, does your homepage demonstrate how credible you are? This is particularly important for the lesser known brands. Do you make a case for why users should stay on your site? Now take a critical look at whether you’re offering a simple next step for users to start their journey. If there are more than 3 things shouting for their attention you probably want to remove the less important ones.

2) The next thing on your to do list is to take a look at whether your promises in adverts are actually realistic. Take a look at your print adverts, your banner ads, paid search ads, email marketing, and any other marketing material. Are you setting realistic expectations for users? Does your site really deliver? Now take a look at the journey from the ad through to your website. Is the journey simple? Does each step make sense? Do call to action buttons deliver on expectations? Can you remove unnecessary distractions?

3) The final thing you can do is less immediate. Next time you’re in a strategy meeting discussing planned changes for your site. Look out for any suggestions of cool content or functionality and ask if users really need it. If in doubt, ask for some budget to do some user research to clarify whether users really need it.

Running a website that really helps users is tough, and websites like getaheadofthegames.com are a good example of what to avoid.

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

As a keen photographer I love looking at images. I have a variety of sources to feed my need for regular photography inspiration: Flickr, 500px, twitter, blogs and so on. One of my favourite sources of inspiration is seeing the amazing photojournalism shots that show what’s been happening around the world.

As with all experiences on the web, some websites make life easy for users and some make reaching their goal a little more difficult. Often we find that this will depend on how much they have prioritised their business goals in comparison to their user goals.

Last year we looked in depth at The Telegraphs Picture of the Week and felt disappointed with the experience. Although they had some great quality photography, enjoying it was frustrating. They focused more on satisfying their own business needs and not going far enough to satisfy their user’s needs.

Advertising took attention away from the main image

It’s easy to understand why they had the advertising, I don’t like it, but I live with it. But as a user I don’t want it to distract me from why I’m on the page. The moving images in the ads meant I struggled to pay attention to the image and the description that goes with it. If you display ads on your site, use static ads over animated ones.

Navigating to the next image was not easy

The next button was small and poorly positioned (see top right of the screenshot above), meaning the main image and the ads draw attention away from it. Even though I’d used the site many times, I still struggled to notice that there was more than one photo available, and it took me a while to see where I could see the rest. The next button should have been obvious and intuitive.

In addition, clicking the next button meant the whole page refreshed. This was great for the product manager to track their stats and see how they were performing. It was also great for the sales team who were selling the ad space. But it was not so great for the users who didn’t want to have to wait for each page to load and new ads to refresh to distract them even more.

Seeing the images in all their glory was not possible

Finally, there was no way to see the images in full screen to make the most of the beauty on display.

For me as a user, the Telegraph came up short in terms of user experience and in the current climate newspapers must deliver a strong business proposition alongside an excellent user experience. They can’t afford to get this wrong

In our review last year, we contrasted the Telegraph experience with two sites that seemed to have got the experience right:  Time.com and MSNBC.

On Time.com there’s a nice clear option to view the image full screen and the page is designed to ensure the main focus is on the image with little to distract users from it. In addition, on rollover there’s an obvious next button to move to the next image. (It should be pointed out that there were rollover next buttons on the Telegraph site but these were small and easily missed). It’s easy to appreciate the photography on Time and moving from one image to another is simple and seamless.

The MSNBC site has a lovely large main image again with little visual clutter to detract from it. The next buttons would be better placed below the image, but nevertheless they are still relatively easy to notice and their function is clear

Clicking Next on both Time and MSNBC refreshes the image quickly and doesn’t load a new page. It should also be noted that whilst MSNBC does have an advert on the page it is below the image, it is not animated and doesn’t distract from the experience.

The Redesigned Telegraph experience

We were interested to see that a lot of our recommendations that we made last year were taken on board and the results are pleasing. The site is now focused more on satisfying user’s needs rather than just their own business goals.

Advertising has been deprioritised to the bottom of the page

Although it’s still on the website, the large advertising space has been moved to the bottom of the page and is less distracting. Yes, it still uses moving images but moving it below the page break means that it no longer competes for users’ attention when viewing images.

Navigating to the next image is now much easier

The next button has increased prominence on the page and its placement to the right of the image is more intuitive. To further help users navigate, thumbnails are visible on rollover for previous photos allowing users to hover their mouse over the thumbnails to find interesting images without having to click and view each image.

We were also happy to see that when clicking the next button, only the image changes and not the whole page. This provides a seamless transition for the user without having to wait for the pages to reload. Also, the marketing teams can still track visitor stats and the adverts still change when viewing each image which increasing the amount of adverts that can be shown on the page.

In Summary

Hopefully, The Telegraph has learnt a useful lesson:  By focusing too heavily on their business goals, they created a negative impact on their user experience. The obvious irony here is that by focusing too much on their business goals meant ultimately they were not being realised hence the need for a redesign. Neglecting user goals in favour of business goals will never work and leaves it open for competitors to steal away your users until you are forced to redesign your website to redress the balance.

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

It’s a well known fact that us Brits hate to complain. Instead, we like to keep quiet, seethe internally, and then vote with our feet and never use the service again. But there are occasions where you know you need to complain to get something done about the poor experience you’ve had. You might need to get a refund, get an answer to a problem, or get someone to do something about your situation.

So you’re feeling angry, frustrated, and probably stressed that you now have another item to deal with on your growing to do list. Faced with the daunting task of having to contact a company to complain, the last thing you need is a tough time finding a way to complain. Enter the anti-complaint process. Where companies make it very hard for you to complain.

So how does a company employing the ‘anti-complaint process’ operate? It’s pretty simple really. The company offers several pathways which appear to lead you to somewhere to get help, but in reality they lead you to FAQs, a generic helpdesk email, or a generic phone number offering no option to speak with customer services or customer complaints.

The Comet complaints process

Consider the example I had recently where Comet had come to install a washing machine I purchased from them. During the installation a water pipe was damaged which caused a leak. We ended up with no running water (and no working washing machine). Naturally I wasn’t pleased so sought out a way to contact customer service or complaints on their website.

After finding a generic contact number to call I was routed through to the Installations team. Unfortunately they could not help me and said instead I would need to submit a complaint. I asked for the complaints team number but was told there wasn’t one and instead all complaints were done in a complaints section on the website.

Eventually I found an a way to enter a complaint but this was difficult to find as there was no ‘complaints’ section. It also gave very little confidence that the enquiry would be dealt with in a timely manner, or any information on what team the enquiry was even going to.

The Google Adwords complaints process

Another example I noticed recently was on the Google Adwords site. Our site was hacked and resulted in Google suspending our Adwords account until we cleared the problem and asked them to review. The process had taken 9 days with no feedback from Google so I wanted to escalate my issue to customer services or complaints to get a response. I called Google and was told that there was no customer services or customer complaints department to speak to, and again I had to complete the complaints form on the website.

Although I found the form eventually, had I not been told that there was a complaint form I would never have been able to find it.

In both examples the companies had made it difficult to make a complaint. It could be argued that they had simply prioritised other more common user journeys instead, however one of the common reasons to make contact with a company is to speak with customer services regarding a problem with an order or your account. In both examples these journeys were made difficult. Whether they were made deliberately difficult is up for debate. The sceptic in me believes they are: the harder it is to complain, the less complaints they receive, the less staff they need to deal with complaints, so the more money they save. But if they are by accident, it shows they place little value on the after sales customer experience.

Customers who have paid for a service should be happy with their experience. In our research we find that users place equal importance on the after sales experience as the pre-sales experience. When things go wrong, if customers are forced to work hard to even talk to someone they will feel cheated and unimportant. If a company is unable to allow users to speak to someone directly using a complaints number, then the least they should do is allow users to access complaints contact forms easily on their website.

The John Lewis complaints process

As you might imagine with their great reputation for customer service, John Lewis offer a very good example of how to do this properly.

About Damian Rees

Damian has worked as a usability and user experience consultant for over 13 years. He has worked in senior roles within companies like the BBC and National Air Traffic Services where he has researched and designed for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

One of our clients is in the process of re-designing the registration process on their ecommerce website. She got in touch and asked our thoughts on whether she really needed to mask users’ input in the password field and display a repeat password field. This is a fairly common approach you’re probably already familiar with. Here’s an example of Skype’s registration using this approach:

Skype masks all passwords and asks users to re-enter the password to avoid user error

Her doubt arose after reading Jakob Nielsens’s Alertbox from June 2009 titled ‘Stop Password Masking’ which argues that usability suffers when users can only see a row of bullets in the password field and since there is “usually” nobody looking over their shoulder, security is not a good trade-off for poor usability .

Now, although we agree with Mr Nielsen that masking passwords can create usability issues (especially when entering long and complicated passwords), we feel that security is an important issue and with the massive growth of accessing websites on mobile devices in public places, it wasn’t something we could just dismiss.

So what’s the solution to password masking?

Users will always need an option to enter a password securely when there are other people nearby so we did some digging around and found Microsoft Windows 7 has a great solution to this problem. They found a good balance between security and usability.

The password input field is presented unmasked by default meaning users receive the visual feedback they require yet they have the control to enter the password more securely by selecting the checkbox to hide the characters.

Windows 7 provides an unmasked field with the option to mask characters

This solution not only gives users the choice to decide on the level of security they require but also removes the need for a confirm password field so the risk of user errors is reduced. Our client is now redesigning the registration process with a single password field with a checkbox to toggle visibility of the characters.

About Oliver Gitsham

Oli is a Senior User Experience Designer with 6 years experience of researching and designing digital user interfaces. Oli has just become a dad for the first time so we're expecting some rants about buggy usability anytime now. Follow Oli on twitter @olivergitsham

There is something about hand drawn paper wireframes that I have always liked. The sketchy lines and hand drawn icons always help me to see the wireframe as one possible idea rather than a final solution.

Don’t get me wrong, I like presenting the slick high fidelity html prototypes to clients in the final stages of the UX project but early on when ideas are forming and the possibilities are endless, sketchy paper wireframes always add an element of excitement.

However, as much as I like hand drawn wireframes, for me sketching on a pad of paper is extremely difficult and time consuming. As much as I try, I struggle to create realistic looking wireframes and am constantly starting again and again until I give up in frustration.

Most wireframes look ‘final’ when they are still just concepts

On a recent project for a well-known charity, I needed to present a series of rough concept ideas to participants in focus groups to see which ideas they engage with. I wanted to get honest thoughts and feelings and I was worried that anything looking too ‘polished’ would make the work look finished, so I felt the only option was to present them with sketchy looking wireframes so they can see the work was still in progress.

How to create sketched style in Axure

Finding the sketch effects functionality in Axure 6.0 was a nice surprise and seemed to give me the possibility of the best of both worlds – sketchy hand drawn wireframes but with the ease and speed of using specialist software.

This functionality sits neatly at the bottom of the interface alongside ‘page notes’ and ‘page interactions’ and allows you to quickly alter clean straight-lined wireframes into the sketchy hand drawn look and feel that I was after.

The sketch options available in Axure

Although the functionality is still quite limited here (only 4 main controls), they still offer enough to make them work.

Sketchiness – Playing with this functionality shows you just how sketchy the wireframe can be. This ranges from the standard straight lines seen on usual wireframes to wavy lines that looked like they have been drawn by a child. I found that a sketchiness of 33 out of 100 seems to provide the most realistic to hand drawn wireframes.

The sketchiness slider at work

Colour – Selecting whether the wireframes should be colour or black and white is fairly straight forward. One nice feature here is that all images in the wireframe are converted to grey scale saving you having to edit the images first.

Font – The best font to use was probably the hardest challenge. Most standard fonts seem to clash with the sketchy lines and made the wireframe look too polished. After comparing many different styles I settled on a free font called ‘Writing Stuff’ (www.dafont.com/writing-stuff.font). I felt that it was the closest to natural handwriting, however, a point to remember is most computers do not have this font installed as standard so if presenting a prototype on another computer, you need to make sure that they have the fonts installed too. [Update - Axure got in touch to let us know that it is possible to convert text into images allowing anyone to see the font by following this path in the menus: Generate > Prototype > Advanced >Render Txt as Img]

Without a handwritten font the sketch effect doesn’t work

Line Width -  The line width allows you to change how wide all the lines are throughout the prototype. I didn’t really see the need for this functionality so kept it at +0.

To make the wireframes feel even more realistic and to get the concepts across better, I wanted to use hand drawn icons on each concept. There are many free sketchy style icons available but not all offered what I was looking for. To ensure all the icons were consistent in style on all concepts, I decided to pay for a full set icons from www.webiconset.com. For $25, you get 120 common web icons in the sketchy font at the usual sizes. This small investment was worthwhile as communicated the ideas better and greatly added to the rough look and feel of the wireframes that I was after.

The hand drawn icons we used

Sketched wireframes get more honest user feedback

Axure sketchy wireframes are a much quicker and easier solution which still creates the illusion that wireframes are still in their infancy but allows you to create them quickly and easily, and the flexibility make changes and amends without starting each page again. These wireframes will never fully replace the creative hand drawn wireframes but during the focus groups, I felt participants were more inclined to critique the rough concepts more objectively than if I had just presented a standard straight-lined wireframe. This gave me a lot more positive and negative feedback I was after.  The only downside was that when I was using the sketchy font, I had problems when showing the wireframes to other people over the internet.

An example of the end result

About Oliver Gitsham

Oli is a Senior User Experience Designer with 6 years experience of researching and designing digital user interfaces. Oli has just become a dad for the first time so we're expecting some rants about buggy usability anytime now. Follow Oli on twitter @olivergitsham