We have a fairly simple theory here at Experience Solutions; if a design doesn’t work, it’s usually because the designer’s motivation and passion was lacking. We use the term ‘designer’ fairly loosely here. It may be an individual designer working on a website, a small team of architects working on a building, or a whole project team working on a completely new product or service for a company.

Whatever the definition the role of designer is critical to the success of the project. The difference between a passionate, highly motivated design team can be enormous compared to a jaded, restless, and unmotivated team. To help identify what type of designers you’re working with we’ve identified 3 types of designer motivation;

Motivation 1 – Maintaining security – If a designer is motivated because of job security alone you are likely to have problems. He or she will work competently for fear of losing their job, that next promotion or their next big pay cheque. This is a common motivation for design work, and more often than not, designers will create solutions because they are told to and paid to, and not because they want to.

Motivation 2 – Social acceptance & recognition – Some designers are motivated more by social acceptance. If they design something which is funky, cool or cutting edge, they’ll gain the respect of their peers. They may win awards or get a nice feature in an industry magazine. Sadly, the way design school works tends to encourage this behaviour. The constant sought after approval from tutors and peers through peer reviews and critiques means that student designers become accustomed to designing for designers. It’s the way the industry works too, it’s full of self-appreciative back slapping with awards, magazines and websites where other people gush about the latest and greatest.

Motivation 3 – Passion to stimulate change – Then there are those who design because of their passion for change. They see something wrong with the world and they believe it should be better. They dream of a better website, product or service, one that really works for the people using it, one that really solves the problem. These people really believe in what they do and their solutions come from the heart.

Passion is the key to successful design

It’s clear who you would want to design your project. So, how can you find someone who’s a passionate designer?

Spotting someone among the designer crowd should be fairly easy. When you’re looking through designer’s portfolios and discussing the job with them it’s a good idea to look at how they present previous jobs. Do they outline the problem they were solving, or do they just focus on the design they came up with? Do they talk about why they worked on the project, or do they prefer to quickly move on to the next job in their portfolio? Ask them about their biggest challenges and achievements and if you get the feeling that it’s all about awards, or a lack of real passion for what they were doing, you’ll know. Passion is hard to fake and you’ll know when you see it. It’s in the eyes, the tone of voice, and in the little details offered to you that you didn’t ask for.

But, what if you’re not in a position to select a new designer? Or you’ve found a designer who was passionate on different kinds of projects to this one. Well, the honest truth is that you might not be able to get them passionate about something that doesn’t flick their switch. Some people just won’t get excited by the project and they won’t be able to get fully behind it. Let’s face it, designing some services are much more exciting than others. They may well still be professional, but you might not get the added boost of passion that will make the difference behind an OK project and a great one. However, there are some things you can do to stimulate the passion in your designers:

1) Clearly define the problem

It sounds obvious, but you may not have set out clearly the purpose for the project. If you have to, write out a clear mission statement and clearly explain the reason why the problem exists. It can be really useful to get people to engage using a powerful story. For a really good read on how to use stories to influence this book ‘The Story Factor’ is excellent

2) Show them the bigger picture

Broaden the scope and show them how this project is connected to the wider picture. What else is reliant on this project working? What is reliant on that? Where do their efforts fit into it all? Although the project may not inspire them, the bigger picture might connect with them more.

3) Show them why it matters

Use real people wherever you can to show them why the problem exists. Get the end users of the system to demonstrate the issues or to talk to them in person about what they need and why it doesn’t work for them now. Help them see the people who will benefit and the real end result of their efforts.

4) Inspire them

Show them great examples of other solutions already in existence. Talk about why these work, give them details of how the solution works and what impact it has had. If you can’t find any directly relevant that’s ok, you can choose some from a different industry. The key here is to show your passion for good design to stimulate theirs too.

5) Talk about the future

Talk to them about what will happen when the project is a success. Vividly describe what a successful project looks like and talk to them about where they might get involved later down the line. If this project doesn’t excite them, but working on the bigger issue does, then they should be able to connect and see past the short term.

Don’t wait for them to ‘get passionate’, help them find it

Designers who really believe in the problem they are trying to solve are motivated to make a positive difference. It’s clear that your project needs as many of these people as you can get. Designers who are focused on security or peer recognition are driven to produce work which will not fully deliver for the people who need to use the solution. There are some clear ways to spot designers who are truly passionate, but there are also ways to stimulate the passion in those that don’t yet have it. Primarily, they need to fully understand the problem before they’ll properly engage in the solution. So don’t rely on others to find their own passion, help them understand the bigger picture to stimulate their passion.

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

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

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

Writers write, designers design and developers develop. We all have our comfort zones and our chosen happy niches, but modern website design requires us all to be cross skilled to some extent and to at least have a passing interest in other disciplines. Sometimes this can be difficult and we’ve recently been asked how to engage developers more in user experience. But rather than focus just on developers we thought we’d look at how to encourage anyone you work with to embrace user experience.

Great design + good user experience = portfolio work

We all have specialisms that we prefer and will happily read and learn more about. Similarly we all have topics that are a big turn off, where we’d rather do anything but read more about. So how do you make a topic like user experience (UX) more interesting to someone who would prefer not to care? The obvious method to wedge your mollusc-like colleague off their favourite rock is to frame the argument so that it benefits them. Great design + good user experience = portfolio work. We all want to point to well designed, popular websites and say “I worked on that!”. It’s great for the CV and good for attracting new clients with deeper pockets.

Observing real users will challenge their beliefs about UX

Often though, the big picture long-term view isn’t enough to stimulate genuine interest. If I told you that you really need to learn more about trend x to be a happy, healthier person, would that really make you want to learn more and start to integrate it into your daily habits? Unlikely. To get people interested in something they are not passionate about is near impossible unless you break down their negative beliefs about it. The most common negative belief we come across concerns the actual usefulness of user experience. If someone feels that user experience is just another buzz word, lacking any real substance the best way to challenge that belief is to get them to observe users interacting with a site that they have previously worked on.

We encourage as many of our clients as possible to come along to observe usability tests. Even if someone can only visit for 20 minutes, that is all it can take for the penny to drop. Seeing real people struggle with features that many in the industry take for granted is a humbling experience. This is the best method to help challenge their beliefs and make them realise that they were wrong when they thought real users would use the site in the same way they do. It takes a hard person to sit through that and still think that user experience is a waste of time.

Making life easier for users with good design is a no-brainer

When presented in the right way, the value of user experience is hard to argue with. Making life easier for users through good design is a no-brainer. Getting someone to accept this is the first key step on the journey. Once people get past that, it’s up to them how far they take it. Some will become passionate advocates and some will accept its value and be more supportive of UX but will never really engage more than that. This may be good enough in some instances and will depend on the context of why you want them to engage with UX in the first place. Focusing on the benefits to them and breaking down their negative beliefs will take you a lot closer than you’ll ever get by telling them they should…, ought to… and must…

How have you inspired team mates, employees or clients to embrace UX?

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