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.

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

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?

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!

At University we always designed for the ‘target audience’, broadly meaning; the people who would use the product/website etc. Sounds simple and straightforward enough, and yet I always struggled with it, but never understood why.

So, what does a ‘target audience’ include?

The first thing we were told was to simply think about; who do you think will use the product? What job do they have? Where do they live? What activities will they do? How much money will they earn? Down to what clothes would they wear?

At university the ‘target audience’ was always something I personally struggled with. Trying to cater to an invisible audience that I had to define before the product idea had been fully developed stumped me every time. I just couldn’t get a grip on generalising (as I saw it) to that scale, trying to come up with minute details for these peoples’ lives so that I could design specifically for all of them. Now that left me feeling a bit stupid, but I was never told exactly what I was looking for in a target audience, how to work that out and how it should influence my concept and design. Needless to say I was never taught user profiling.

It wasn’t until I started my role here at ES that it finally clicked, and I understood why I had had so much trouble with the ‘target audience’ aspect at university. What I learned from the guys here is that there are two types of profiling that happen within the sphere of a target audience; a marketing profile, and a user profile. They appear to be the same thing, and it took some patience on their part in order to communicate to me what the specific differences were between the profiles we make, compared to the profiles that are generally thought to represent that of the customer.

Marketing Profiles – a look at where they work, what car they drive…

Marketing profiles, generally speaking, are what companies use to determine how they can sell products and services to their prospective customers; what paper do they read, where do they live, what car do they drive, what their household income is, etc. They need to know this sort of personal information so they can target, design for, respond to, and basically pander to the customer’s interests and habits.

This information helps them to speak in the right language, at the right level. It helps them to advertise in specific publications. It knows what TV programs they are most likely to watch, and therefore where to place their ads. This of course is all relevant when trying to publicise the company. For example, your marketing profile might look like this:

“Mary, a 35 year old mother of two, household income of £60k, drives a VW Golf, reads the    Daily Mail, uses the internet mainly for emails and shopping, lives in the South East”

But how does this help to prioritise the content and functionality on a website?

User Profiles – focusing on the individuals goal

On the other hand, a user profile focuses on the goals of people who will use the service. When creating a user profile there are a different set of questions which must be thought about, for example; what is the user’s goal? Why do they need to achieve this? How quickly do they need to achieve this? And what steps do they need to go through to reach their goal?

If we take an online balloon retailer who needs their site redesigned, a user profile for that site would look something like this:

“Mary, her daughter’s birthday party is in two weeks, she needs 20 balloons that will ideally have    her daughter’s name (Louise) on and be pink in colour”

Of course these questions will be affected by such things as who the individual is and what kind of job they may do, however it is not dependant on all, or sometimes any of those factors at one time. It doesn’t matter if I am a mum, sister, or friend planning a birthday party for someone, I will still need to buy 20 balloons. That is my end goal which I want to be as simple, easy, and stress free as possible.

So what did I learn?

Although I still feel mildly ignorant for not having figured this out by myself, I now see where I went wrong at Uni. A user profile, and decent understanding of the goals your end-user will want to achieve, should be the main force driving the design of a products core structure. A marketing profile can then be used to help decide on the visuals and aesthetic appeal to appeal to the use once the site is built in a user-friendly way.

What do your profiles look like, and how do you use them?

Recently I read the excellent Don’t Make Me Think by Steve Krug. One of the key points Krug makes is that a good website should be invisible. A user has a goal to reach and that is their focus. The website is a pathway to their goal alone. This reminded me of an article I read whilst undertaking my Visual Communication degree – The Crystal Goblet also known as Printing Should Be Invisible by Beatrice Warde.

Warde uses the analogy that a true connoisseur of wine would chose a clear, crystal, wine glass from which to drink their wine because this vessel has been specifically designed to hold the wine in such a way that it displays, and enhances all the wines qualities; the colour, the smell, and the taste. Its own beauty does not hide that of the wine which is the thing that we wish to consume. In the same way a website should be designed specifically to display and show the information that the user requires from it. It should not hide the information with needless flashy graphics and images.

Krug states that a good, clear website design is one that does not make the user think, it guides them clearly and quickly to the information they seek without hindering them in any way. The designer, who keeps their users’ needs at the forefront of their mind, is the designer who will produce a website that will function so perfectly that the user will not notice they have taken a journey at all.

Too cool to be called for

‘Without this essential humility of mind, I have seen ardent designers go more hopelessly wrong, make more ludicrous mistakes out of an excessive enthusiasm, than I could have thought possible… It is not a waste of time to go to the simple fundamentals and reason from them’.

Warde, B

Sometimes, in the quest for innovative design, the true purpose of our project can become obscured and forgotten; this purpose being the need of the end users. We often spend more of our time worrying about the ‘wow’ factor and how to make a website really stand out, than focusing on how we can achieve what the consumer needs in the most efficient, and effective way. Many users will not appreciate the skill of a great designer, as the design works so well it is invisible, but that doesn’t mean it should be taken for granted. The majority of the time we only seem to notice when things are wrong.

Look for the invisible

If we spent our time looking for the things that make a website good, and appreciate them more regularly, we would be able to learn from them and use similar principles in future designs. The next time you use a website for the first time, and get straight to the information you need, try and actively remember; note down what made it easy for you to use and how this was achieved, and consider it the next time you work on a design.

For Beatrice Warde’s full talk on the importance of good typography and invisible print click here;

http://www.designhistory.org/CrystalGoblet.html