I was talking to someone the other day about the new BBC homepage which employs a way to navigate through content from left to right. I thought it was well implemented, and knowing the BBC they would have user tested it thoroughly before making the call.

Anyway, the conversation swiftly moved on to horizontal scrolling and how as a ‘usability dude’ I must hate anything with a horizontal scroll bar. I tried to  explain that most of us ‘usability’ people are not against unconventional design, but we just like to see it implemented for the right reasons (because it fits with the user goal) and not for the wrong reasons (because the designer likes it and wants back slaps from peers).

Vertical scrolling, Yes. Horizontal scrolling, No.

In a talk, Jakob Nielsen once demonstrated his thoughts on horizontal scrolling by nodding his head up and down saying, "vertical scrolling, yes", then, shaking his head left and right saying, "horizontal scrolling, no".  A clever way to make a point, but digital design is never as simple as just following a rule or guideline from a so called ‘guru’. There are of course situations where a design works perfectly well going against conventions (which are typically outdated anyway). So we ask: When should you use horizontal scrolling?

Of course there’s no easy answer to that question. But when understanding the context of use and the goals users have when using the site it can become easier to decide whether to use horizontal scrolling or not.

When using horizontal scrolling can be beneficial to users

Although it’s not something we would always recommend, these examples may suit horizontal scrolling if you are keen on using it:

• Displaying a variety of visual images i.e. a photography site or design portfolio
• Displaying information in a large visual area that is not easy to see at a glance – i.e. think of a map or Google’s street map which employs horizontal scrolling to good effect
• Displaying discreet sections or slides of information – Tablets and smartphone apps employ the notion of swiping and when this is used to move from one screen from left to right it can work really well and feel completely natural. Similarly applications such as Slideshare work well in the horizontal plane (although it is arguable that this constitutes scrolling)
• Displaying a large catalogue of products or items where scrolling horizontally could display different product categories

Why you should be careful in using it

• Most mice have a vertical scrolling wheel, few have an easy way to scroll horizontally. This means most users have to manually operate the scroll mechanism. This is slowly changing with smart mice like the Apple Magic Mouse but may still take some time before they’re mainstream. In fact if you consider physical ergonomics, it’s much easier to move a finger up and down, than it is left to right. Thumbs and hands on the other hand are much more adept at a horizontal scrolling motion, so this type of navigation is likely to depend on innovations in gesture interfaces
• The experience of scrolling horizontally on some sites makes the screen judder and can have that headache inducing feel to the experience
• Controlling the speed of the scroll can be problematic, with some content whizzing past and others taking forever. Giving users the right amount of control can be difficult to get right
• We’re so used to reading left to right within the confines of a page where we make our way slowly downwards, introducing a horizontal scroll could break a fairly rigid western convention so should be used with care when reading is a core part of the user journey

Examples around the web

Interestingly Abercrombie, Hollister, and Superdry have made the decision to move away from horizontal scrolling to vertical. Shopstyle on the other hand have employed horizontal scrolling well on their site.

Like all new functionality, it should be thought through carefully and of course tested with users before taking the plunge.

Here’s some examples from around the web that we’ve found using horizontal scrolling in some way:

• http://www.bbc.co.uk/
• http://www.kiapicanto.co.za/
• http://www.cooper.com
• http://www.marianaonate.com/
• http://www.mareenfischinger.com/
• http://www.dennys.com/
• http://www.shopstyle.co.uk/

What do you think? Do you have any good examples to share?

About Damian Rees

Damian is an applied psychologist but don't let that scare you, he's actually quite nice. With 12 years' experience in researching and designing for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

Santa’s job gets more difficult every year. Less and less kids write to him making the elve’s lives more difficult to keep up with the latest toy trends, the population grows more each year making Santa work harder, and more and more houses are opting for wood burners or no chimneys at all.

This year Mrs Claus contacted us to make Santa’s life a little easier when he’s on deliveries. Of course we were more than happy to help in the hope we would make the Nice list this year.

Mrs Claus was worried about Santa

Mrs Claus was our client, but Santa was our user so we first had to establish the aims for the project and the client’s requirements. In our meetings with Mrs Claus it became clear why she wanted our help:

• Every year she’s up all night worrying about Santa and whether he’s safe – she wanted a way to keep track of his whereabouts without calling him all the time
• She’s worried about Santa’s growing waistline so she wanted a way to remind Santa not to eat so many mince pies on his rounds
• She was also worried that Santa should be careful not to take too many sips of sherry on his visits
• Her primary concern was that the route the elves draw up for Santa was getting more and more complex each year and she was worried Santa would get lost and miss deliveries

Santa’s requirements

Before coming up with a solution we wanted to talk with the user of anything we designed, so we had a chat with Santa to understand more about the context of use. It quickly became clear that he had a different list of requirements:

•  He wanted to keep his sightings to a minimum. With the growth of Facebook and Twitter in recent years, he was worried that he was becoming increasingly vulnerable to people being able to track him
• Rather than a route planner or sat nav, Santa would prefer a pre-defined chimney stops so he could go from chimney to chimney with the route already planned out
• Santa has been struggling to remember the sleeping places for the scary dogs, which houses had difficult roofs to land on, which chimneys were too narrow and so on. He wanted a simple way to receive all that information as he left one chimney on the way to the next
• Santa sometimes gets bored with listening to the Reindeer bickering so wanted a way to set up and manage his playlists
• Santa need a way to track his time and see how he was progressing with his delivery plan to make sure he remained on track
• Santa needed some clearly marked stops where he and the Reindeer could have a ‘comfort break’

In coming up with our solution we had to take into account the context of use:

• It would be cold so anything he used would have to be easily operated outdoors with gloves on – i.e. large buttons
• Santa would need a sleigh mounted device as well as a mobile device to update and consult whilst down a chimney

Wireframes for Santa’s interfaces

We took away all these requirements and wireframed a solution using a tablet device mounted to the sleigh console as well as a smart phone device which synched to it when Santa was on the ground. In phase 2 we will look at a separate monitoring interface for Mrs Claus and the elves to track Santa.

Santa’s Sleigh Mounted Tablet Interface

• Sightings alert  which monitors Facebook, Twitter and SMS chatter
• Next chimney stop with suggested landing places and up-to-date house intelligence
• Playlist controls
• Local time and delivery progress monitor

Sleigh mounted interface - click for fullscreen

Santa’s Smartphone Interface

• Checklist to tick off deliveries as he goes
• Ability to post updates to house intelligence including chimney dimensions, dog sleeping places…
• Mince pie and sherry sips update reminder – with an external breathalyser (we felt this was less priority so have planned this for phase 2)

Santa's smartphone interface - click for fullscreen view

Next steps – Prototype testing with Santa

We’re having to move fast on this project as you can imagine. We’ve only got a couple of weeks left! So now we’ve created the wireframes we need to test them in a prototype with Santa on a few test runs out in the sleigh with his gloves on. We’re looking at stitching finger and thumb pads into the tips of his gloves first. After some user tests we’ll refine our prototype and then start work on the visual design. We’ll keep you posted on how we get on. Wish us luck!

About Damian Rees

Damian is an applied psychologist but don't let that scare you, he's actually quite nice. With 12 years' experience in researching and designing for users in a variety of different contexts including web applications, voice recognition, and air traffic control interfaces. Follow Damian on twitter @damianrees

Tesco recently released details of a new feature to their online offering. This feature allows users to view a product in 3D, using augmented reality, as if they are holding it in their hands. Sounds great huh?

The objective here is to help online shoppers make a buying decision. The example Tesco gives is of a busy mum who is looking to buy a new TV, and needs to ensure it will fit well in the living room, and will have enough ports for her kids’ gaming machines.

However, there are a number of flaws with the process that result in a poor user experience:

• Firstly, there is a process:
• Accept Active X
• Download and install a plug-in
• Accept the licence
• Have a ‘marker’ to hand – or print one out
• Ensure I have a webcam, and it is on
• Hold up the marker to the webcam
• Finally, I can look at something. However, the 3d image is poor quality
• Holding it in the palm of your hand does not really allow you to envisage how it will look in your living room

So let’s look at some of these:

You have to download a plug in to your machine

Users are now familiar with shopping online, using websites without the need to download external software to run. By including a requirement to download something Tesco has added a step in the process that users are not expecting, and many are likely to be uncomfortable with.

You need to have a specific physical item in your hand

Now the user has downloaded the plug-in they now have to have a physical item in their hand. This can be something you already own, but if not you can print this out. This is another stage in the process that users are unfamiliar with. The perceived hassle for an unknown gain plays a big part in usability. Forms are normally the biggest culprit, but we imagine that this step will prove too much for most users.

The 3d image is poor quality

So now the user has gotten through the process they are now ready to view the product in the palm of their hand. Disappointingly, the quality of the product graphics is poor and doesn’t really do the product justice. The user can’t really imagine a TV sitting in the corner of the living room when it is sat in the palm of their hand. Ok, the user can look at the ports on the back of the TV, but they may be left wanting a quality image of the TV to validate the pixelated version they’re looking at.

So, what do users need?

When we’ve tested retail websites the product information pages are often key to the user making a buying decision. Imagery is often poor, leaving users guessing or unsure. At this point many users will leave the site and try elsewhere until they are satisfied enough to buy it (from a different website).

This new augmented reality feature from Tesco is clearly looking to solve this problem. But the user research we’ve done has shown that by simply providing images of the product from different angles, with an option to enlarge the image, works perfectly for users. 3D images with rotations and video are sometimes available too and with better image quality than the augmented reality solution.

I’m very interested to see how successful this is, but it looks to me that gimmick and technology has been prioritised ahead of usability and the user experience.  Is this trying to solve a problem that already has a perfectly acceptable solution?

About Ali Carmichael

Ali (or Alasdair) is an experienced project manager who loves his Gantt charts and milestones! He has over 12 years' experience managing successful online experiences for world class brands. Ali is responsible for ensuring our clients love what we do for them. Follow Ali on twitter @AliJCarmichael

What is it?

The Click Test is a simple and quick test that allows you to upload an image (that image can contain one or two versions of a design for viewers to choose from) and ask the viewer a question which can be answered by them clicking on a certain part of the design. It’s part of a suite of tools offered by the UsabilityHub (we’ll review the other tools later).

A good example for how theclicktest.com would work is if you were to upload a screenshot of a homepage you are designing and asking the viewer to click on where they think they would find the contact details. You don’t have to just use it for web designs though, in the example below it is being used to determine which picture the majority thinks best represents the description.
 

A screenshot of the tool in action where users are invited to click the option they feel works best

What are the advantages of using theclicktest.com?

The clicktest.com is simple and can be very useful when trying to answer basic questions about interface design. If you need a quick response to confirm a suspicion then the click test only takes a minute to load and is free if you collect ‘Karma points’ by completing a few of the other tests that members have uploaded i.e. you complete 2 random Click Tests on the site you earn 2 Karma points, which in turn allows you to have 2 people take your test. For those of us in a hurry, or who need a large amount of people to fill out the tests, there is also the option to purchase karma points or to simply email a URL to existing contacts.

The results start being collected instantly and due to the popular nature of the site and the random order tests are given to viewers, you are bound to start collecting results within the hour. Every time we have used the Click Test we have only had to wait a day to collect the desired amount of results we wanted.

The results come in three different forms; a plasma map, heat map, and a click map;
 

A snapshot of the results for choosing a colour scheme (plasma, heat, & click test from left to right)

 
We found the click map the most useful as it shows clearly how many people clicked on what graph (in the above example), nonetheless the other maps are visually pleasing and with a higher volume of participants and a different sort of test could prove just as useful!

What are the limitations of using theclicktest.com?

Questions that are more complex might not be as reliable, as the tests are meant to be quick, and determining how much time someone spent reading the question and thinking about the answer is near impossible. This brings me to the main problem that the click test has, and in fact all small, short tests online. You cannot tell whether the answers you are being given are true as people may be participating in the test to earn Karma points and so not really taking notice of the test questions and just clicking anywhere to complete it.

Another issue that comes with allowing anyone to partake in your test is that other than people you can recruit yourself, you do not know whose opinion you are taking note of which may be detrimental to your design.

In addition, the tool only records one click, the last click a viewer makes on the page before finishing. This means the questions are limited as you need to only have one answer in order for the test to work. We found this out the hard way by uploading a test that required the viewer to click on the ‘two best colour schemes’. However when we checked to see how the results were doing we discovered that only one click had been recorded for each individual who had participated.

When should I use it?

So far we’ve found it to be a useful tool to get opinions on basic design elements such as colour scheme choice and chart style. But we haven’t relied upon this data alone. We’ve used it to guide decisions, and have then followed up with face to face user feedback before making a final call. By all means use it to test web designs and guide any other design decisions that will fit into a one click answer question, but don’t let it be the only result that you use to make a final decision.

If you can think of anything else you would like us to cover in future reviews please get in touch!

About Samantha Harvey

Sam recently graduated from Visual Communication. She joined our team in April 2011 and has been conducting user research and has been making sure our user interfaces follow good design principles. She's keen to point out our poor selection of fonts... er I mean typography (sorry Sam). Follow Samantha on twitter @samharvey_ux

Twitter desktop applications – they can be such handy little things. And up until last week everyone at Experience Solutions was quite happily using TweetDeck. However, the little frustrations that we had with the app became magnified due to some unrelated technical issues we were having with our internet. So the hunt for a new Twitter app began.

We chose to use TweetDeck because of some very useful features; multiple account feeds, searches, lists, and the ability to schedule updates. Personally, being able to schedule tweets in advance means that I can get on with my work safe in the knowledge that a part of our web presence is being taken care of.

After searching for other highly rated apps with similar capabilities and a perceived good UI we chose to use Seesmic desktop. But on the first day I encountered the same frustrations I had with TweetDeck.

The Problem

When using a twitter app that allows for multiple accounts there will be an option, typically a button (picture/icon/name) representing each account, to toggle between the user’s Twitter accounts. Thus, allowing the user to Tweet from one account or another.
 

TweetDeck uses small icons to represent each linked account

 
It took me a while to get used to using TweetDeck and I had to be careful to make sure I was not tweeting from the wrong account. However, I found that occasionally I did Tweet from the wrong account. This normally occurred when I wanted to send a Tweet from an account that wasn’t my default, and then forgot to select the correct account before hitting the ‘Send’ button.

Having chosen to switch Twitter applications, on the first day I used Seesmic I accidentally replied to a tweet from the wrong account, repeating the mistake Damian had made earlier in the week.

Which brings me to my point; do you notice which icon is highlighted every time you send a tweet?
 

Seesmic has the account names underneath the update field

The Solution

After sharing our frustrations, like true UX pros we started to look at how the design can change to reduce the chances of human error. We agreed that the Twitter app needs to reaffirm to the user that they are tweeting from a specific account.

Perhaps a message of some sort that questions the user just before they send it (we noticed that Seesmic have introduced this for retweeting)? But no, that could easily become very annoying. We still want it to be simple after all.
 

Seesmic has introduced an extra step in the process

 
A very close solution is CoTweet’s solution of having an overlay appear when you want to write an update that makes you choose which account you want to send it from (including multiple accounts). But this is also an extra when all I want to do is quickly write my Tweet and get on with my day.
 

CoTweet asks the user to choose an account

 
The simplest solution that we could come up with was for the send button to be different. We all have to click ‘Send’ for our 140 characters to reach the digital abyss, meaning that we engage with the send button when we click it. So what if the choice of which account to send it from was also the send button?

Here’s an example of something that I think would certainly help us at Experience Solutions when dealing with our tweets.
 

Wireframed version shows where the buttons could go

 
Each button represents a twitter account that has been added to the app. Once you have written your tweet you press the account button of choice to send it. When the tweet is sent from the first account the tweet will remain for a short period of time allowing the user to select other accounts or delete it and tweet something else.

So, now you have ‘heard’ our idea, if you have encountered this problem and have some ideas yourself, or know of an app you think comes close to solving our problem, let us know!

About Samantha Harvey

Sam recently graduated from Visual Communication. She joined our team in April 2011 and has been conducting user research and has been making sure our user interfaces follow good design principles. She's keen to point out our poor selection of fonts... er I mean typography (sorry Sam). Follow Samantha on twitter @samharvey_ux