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

What is it?

Crazy Egg is an online tool that monitors individual pages from your website, giving you a breakdown of where different visitors have clicked and on which part of the screen. There is also some more basic analytics data available on which pages have been viewed most frequently, and where your visitors have come from using different visual displays.

All you have to do is insert a small bit of code into the html of the page you want it to monitor, and sit back and relax. The site does it all for you from then on providing live results as it tracks the progress and every click that visitors make on the chosen pages.
 

What are its advantages?

Simple steps to set it up. Probably the best advantage of Crazy Egg is that it’s easy to setup on any website providing you have access to the site’s code. In just three steps you can set up Crazy Egg to monitor as many pages of your site as you wish (With a free account you can monitor up to 4 pages. To monitor more you have to upgrade to a paid account but prices start at as low as $9 for 10 pages which is peanuts really).

Five different and interactive ways of viewing the results. Crazy Egg provides you with an array of different ways of viewing the results; each has their own uses and will cater to different peoples’ preferences of viewing information.

The four different visual views the Crazy Egg provides; (from left to right) heatmap,
scrollmap, confetti, overlay

 
Now all the different views certainly look eye catching and interesting, but the one that we think is the most informative and useful is the confetti visual which displays all the clicks in a colour coded fashion giving you the option to filter which clicks from which external sources you want to see displayed on the page. The other views certainly have their uses too and collectively provide back up evidence to support theories drawn from the overall information gathered. For example, the scroll map in conjunction with the heat or confetti map can give you a good gauge as to where the most focused part of the page is and whether users are clicking on your call to action buttons within those areas.

The list view is the last of the different states and displays a table of the items
clicked on within the page

 
Exportable reports of your results. Crazy Egg allows you to export a report of your results which is good for sharing and bringing them to meetings. The different views also allow for an interesting display of information (not the normal pie or bar charts). A slight limitation of this however, is the fact that it merely exports a ‘screenshot’ of your snapshot in the visual that you viewing it in when you click export report.

Crazy Egg data can aid design decisions. The information that Crazy Egg provides about your website pages can prove helpful when discovering what elements of your website need to change – to be moved or altered aesthetically to enhance their use. As I mentioned earlier, the accuracy and specificity of Crazy Egg is really where its advantage over other analytic tools such as Google Analytics lies. In allowing you to see exactly where your users are trying to click, or more importantly where they aren’t trying to click, it allows you to make informed conclusions of where potential areas of improvement are within the site. Finding out what improvements, however, requires more research than Crazy Egg can provide.
 

What are its limitations?

Despite many claims it is not a usability tool. Don’t let the reviews fool you. It can be helpful in allowing you to spot a problem such as a button that does not get used, but it doesn’t give you any other information as to why people aren’t clicking on that button. You can make assumptions from the data that Crazy Egg gives you but each assumption you make could create yet another problem. Still, once the problem is spotted, these questions can easily be resolved by investing in a proper usability test of the site.

The confetti visitor box doesn’t move off the snapshot. When viewing the confetti results there is a little black box that lists the different visitor information for you in one area. However, the box is within the captured shot or ‘screenshot’ of your page, and so at no point can you see the whole page on its own. I realise you can minimise the box but even then I found it distracting. This might just be a pernickety personal irritation but I found it quite frustrating when trying to see the spread of clicks across the page.

The information on each type of visitor is displayed in the box above which cannot leave the screen

 
You can only compare two ‘snapshots’ via the heatmap view. Crazy Egg allows you to compare two or more page results within the site; though you can only compare them within the heatmap view. This can become tiresome especially if you wanted to see the comparison of specific clicks between pages.
 

The comparison feature on Crazy Egg only allows for a comparison of the heatmap view

When we recommend using it

We would recommend using it if you want to gain an insight into what your users are doing, in a very basic form, when they come onto your site – i.e. what links are being used and which seem to be ignored. This can help in making design decisions to improve your users’ interactions with your site. However each of these decisions still includes a large element of guess work which is why user testing is always a thorough technique to be used in conjunction with site analytics to ensure that you know exactly what needs to be changed, why, and what it needs to be changed to.

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

This is a fantastic video from Penny-Arcade about the virtues of testing concepts and designs early and often with users. The video is aimed at games designers but applies to any designer and translates particularly well to web designers.

It’s not often that we share videos on our blog, but this one is too good not to shout about it. It delivers the message we tell our clients, but in a much better and more enjoyable medium. If you don’t mind sitting through the annoying advert at the beginning, you’ll find the reward is absolutely worth it. Enjoy!

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

What is it?

Loop11 is an online, remote usability testing tool. In simple terms Loop 11 allows you to create an online survey that includes tasks for users to complete on a website of your choice. You have the ability to mix questions with tasks in any order you wish, and for each task you can set a goal for the user to achieve i.e. find a size 10, blue women’s jumper for under £30. You then have to set the URL that they will start on at the beginning of the task. There is a demo of how it works on the website which takes you through what your users will see when they complete a test.
 

A step by step process of setting up your test

 
Below are two examples showing how the test looks to the user when they are completing a task (Figure 1) or answering a question (Figure 2). On each task the objective is always displayed at the top along with the progression buttons. When asking a question, Loop11 gives you various question types which allow the users to answer in an assortment of different ways, the example I have shown represents a normal text field answer/comment box.
 

 Figure 1. An example of how a task would look like to a user 

Figure 2. You can insert questions after, or before the tasks, above is an example of a text field question

What are its advantages?

This is the closest tool we have found so far to an actual usability test. Loop11 is one of the only sites we have found that really lets you create something similar to the usability tests we regularly carry out. You have control over the design of a proper test script which is the main reason we have found it to be so useful.

You don’t have to be there with the user (in the same room). Loop11 tests are un-moderated so all you have to do is design it, then set it live and spread the word by sending a link to your selected participants. Users can then complete the tasks in their own home at their own pace. Its main advantage over face to face usability tests is that it allows you to test as many users as you want.

Loop11 isn’t free, but it is cheaper than moderated usability testing. You also don’t have to spend much money on incentives as users are participating when they want, and where they want (we’ve written more about this on UXbooth). We still included a small incentive as a thank you for users spending their time completing the test, and as we made sure the test itself wasn’t long it worked out rather well for everyone.

You can test Loop11 on any device that browses the internet. We haven’t tested this but we would assume that in most cases this would be correct as Loop11 uses the browser and is fully online so it shouldn’t matter too much what device you use it on.

View ready made reports on participants completing your test. After you have set the test live and participants start completing it you can view reports which show how many people succeeded in completing tasks, how long it took them, and how many pages they went through to get there. This information comes in 3 exportable formats (Excel XML, PDF, CSV, and Excel XML with participants) so that you have access to the original data to do with as you please. The PDF option also exports the report version which includes graphically presented results for the overall test, and for each task itself, however we found that the excel document of raw data was the most useful as it allowed us to work with the data to produce a report with the information we required. We could then brand it and use it within our projects.

A sample version of the PDF report that Loop11 exports after a test is finished

What are its limitations?

Once a test is published there is no going back. You can’t edit the test after publishing it; you can only delete it altogether, so you better get it right the first time! We would recommend thinking carefully about the order of your test before adding them to the test list. Re-test, and double check as many times as possible in preview mode before putting it live.

Judging the success or failure rate can be tricky. The site tests live websites so for each task you have to set the URL you want users to start from. In order to track success and fail tracking you need to add URLs which specify the pages users reach which you consider a to count as a success. This can be problematic if your task can be completed in a variety of different ways. If you don’t anticipate them all, you could record a failure even if they succeed.

Tasks need to be carefully designed. The design of each task becomes critical when doing an un-moderated test especially with this tool as it needs to be much less fluid than a typical face to face usability test where normally we would deliberately allow users the freedom to complete the task as they would naturally. With Loop11 you are forced to be more quantitative with your approach to get a more defined fail/success criterion. Therefore we found that the tool forced us to design tasks to be much more basic and definite.  For example, in a face to face test we might ask users to define the problem they typically face and then show us how they would solve that problem using the site. With Loop 11 we would design the task to answer a very specific question we know they can find an answer to on a specific page.

Slow loading times on some websites. Sometimes the website you may want to use will perform slowly which could affect how likely people are to complete the test. We also noticed it crashed on a few sites too. We recommend checking how well a site performs in the preview mode before you commit to purchase. Loop11 do provide a piece of JavaScript that you can insert into the body text of the site to enhance the speed. Unfortunately we couldn’t do this on the site we were using which is a drawback if you are testing a site without access to the backend.

You might get more people participating than you bargained for. One quite costly drawback, especially for those of us who incentivise participants, is that despite setting a limit for the number of tests it only cuts them off after that number have completed the form. However, it cannot then stop people who have already started the test whilst the 20^th (in this example) person was completing it. Therefore you may end up paying out for slightly more people than you originally wanted (we set a limit of 20 but had to pay 24 participants).

You don’t know who really completed the test properly. Probably the most obvious limitation when it comes to un-moderated testing is. Obviously you would like to think that anyone who sat down to do the test would want to do it properly, but you will get those who just rush through the tasks and questions to gain the incentive at the end. Normally you can look at the results and usually spot the person who you think didn’t complete it properly, the people who took the shortest time to complete their tasks and didn’t write any comments. The question you then have to ask yourself is whether you discount them from the testing?
 

When we recommend using it

If you’re looking for a quick, high level view of how a website is doing then this would be a good solution for you. It also helps if you are having problems testing users who are geographically spread or too time poor to meet one to one, by using Loop11 you can overcome this by testing anywhere that has internet accessibility anytime they want. Due to Loop11’s nature it is a useful tool for benchmarking a site, finding out where users are running into an issue to then carrying out some face to face usability testing to find out exactly where the problem lies. The scenario where we are likely to use it is to monitor the usability of sites we have already worked on. However, as the tool has strict success/fail metrics it is only really suited to carefully designed tasks which have a clear answer.
 
See anything I’ve missed? Just let me 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

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