Tag Archives: how to…

How to stimulate passionate design

31 Aug

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.

One person with passion is better than forty people merely interested

Read more

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

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

How to create sketched wireframes in Axure

14 Mar

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.

Sketched wireframes in Axure

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.

Sketch options in Axure

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.

Sketchy examples

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]

Sketchy wireframes using arial font

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.

Sketchy icons for wireframe

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.

Axure Sketched Wireframe

An example of the end result

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Oliver Gitsham

About Oliver Gitsham

Oli is a Senior User Experience Designer with 8 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

Crazy Egg – Our Review

21 Feb

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.

 

List view

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.

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Samantha Harvey

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

TheClickTest.com – Our review

11 Nov

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.
 

Example of theclicktest.com

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;
 

Snapshot of the result maps

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!

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Samantha Harvey

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

Inspiring Others to Embrace User Experience

9 Sep

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.

Inspiring others 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?

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

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

Where to advertise ‘Free Delivery’ on your eCommerce website

6 Jul

free delivery banner example

A recent report from the Royal Mail reports that 82% of online shoppers said that free delivery would encourage their use of a website.

This makes sense, but before you rush out and start advertising ‘Free Delivery’ all over your website, it is important to look at how best to promote this.

When usability testing eCommerce websites we often observe users completely ignoring large ‘Free Delivery’ banner adverts, and still getting confused when they are looking for delivery information. This is due to banner blindness, where users discount anything that looks like an advert in the corner of their eye. So how do eRetailers combat this?

First, look at the user journeys to understand where in the process they will need information about free delivery. There are often multiple points in a process where your customer will ask themselves about delivery charges. This may differ on a variety of websites but typically this will include:

  • Pricing – include ‘Free Delivery’ where ever you quote a price. This will remove the need for users to ask how much delivery will be
  • Product detail page – explain that delivery is free when users are reading about a product and considering their purchase
  • Delivery page – for users who are specifically looking for delivery information, ensure there is a dedicated page to reiterate that delivery is free

play.com free delivery
www.play.com provides ‘Free Delivery’ message with all pricing

The above tips will provide a starting point to encouraging your users to buy from you. However, observing your users interacting with your website continues to be the best way to establish where in the user journey the Free Delivery should be mentioned, and to establish what other barriers are a cause of cart abandonment for your users.

How well are you promoting Free Delivery, and do your users see it?

 

Related services: e-commerce usability & usability testing

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Ali Carmichael

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

How to do quick and effective user profiling

8 Jun

quick and dirty user profiles

Your website can attract a wide variety of visitors. Trying to appeal to them all can be troublesome and the results can leave you with more unhappy customers than happy ones.

When user profiling, there are two very distinct ways to go; methodical and thorough with a reasoned and structured analysis, which is our typical user profiling project, or ‘quick and dirty’.

In the agile, nimble world of the modern Web, we appreciate you don’t always have the time to do things perfectly so here are three steps to help you with the quick and dirty approach.

 

Step 1. Decide on who your customers are

Break down your users into five groups, based on what they need from your site. One way to do this is with an ad hoc meeting with your team. In the meeting explain what you want, without explaining why until the end, this way you get original thinking and not prepared, canned answers.

We challenged our client Bob Barbour at the MS Society to do this. He set up a ‘flash’ meeting – putting it out as a desperate appeal for help at very short notice. He got great results as the attendees had no time to ‘over think’ the exercise and so didn’t try to serve their own objective by pushing one user group over another.

Don’t underestimate the challenge of only coming up with five user groups, it will be hard, but it is important to set a limit to help you focus. If you come up with too many groups, look at how you can merge some together.

 

Step 2. Come up with questions for each group

Now come up with questions for each group that they are likely to ask when looking at your website. Make sure the questions are actionable, i.e. “Is this company reputable?” Then, focus on what are the most important questions for that user group.

Choose the top three priority questions for each user group, and focus on these. For example, if we did this for our website, it might look something like this:

Group 1 – Asked to investigate usability suppliers by their boss
1.    Do they appear trustworthy and competent?
2.    What is different about their approach?
3.    How much will it cost?

Group 2 – Understand more about usability testing
1.     What is usability testing?
2.    What else should I consider?
3.    Can I do it myself?

 

Step 3. Focus on the high priority users

From your five groups, select the two most important, as a primary and secondary group. These should be your number one business priority to serve, i.e. the users that will lead to you reaching your business goals for the site.

 

Next Steps

After completing your quick and dirty approach to user profiling, you will have a better idea of who your essential customers are, what they need and where to focus your efforts on your website to help your users.

We will discuss how to use the profiles that you have created in a future article, but for the time being you can use your new user profiles to focus your website planning on addressing user needs instead of internal guesses.

What methods have you used to get a better picture of your users?

Related service:  User Journey Design

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

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

Are you suffering from website anxiety? Take our soothing advice

24 May

Most website owners are never happy with their sites. It could be doubts from a design or content perspective, or merely not seeing the metric results that were anticipated. Whatever the issue, site stress is becoming a common ailment among the Web fraternity.

Our research has shown that many site owners are actually some six months behind where they want it to be. Some react by throwing time and effort at the site without considering the underlying causes, leading to wasted effort and yet more stress.

Others look for new ideas and features to add, which can just over-complicate the site and further exacerbate the problem. If any of this sounds familiar, there are some easy ways to fix your site. They are not instant solutions, but can make for a quick turn around and a lot less stress.

1. Opinions are like tummy buttons, everybody has one, but they’re full of fluff!
Many sites draw influence from a range of sources. This may be from rival sites, well known ones, input from designers, design agencies, even colleagues and peers. Designing a site based on opinion is a recipe for disaster, the design for your site should be pure, simple and achieve the tasks behind your business plan. If you have a live site that came to life through opinions without speaking to users, it is critical to validate them with research rather than assuming everything is fine. More on how to deal with opinions about your website

2. His vital stats are dropping, get the crash cart!
Following the metrics religiously in the early stages of a site’s life is a sure way to get a headache. Consider the first few months as the creation of a baseline which you will compare against in the future. As your site finds its feet, you might get a spike of interest that will tail off, or you might see cyclical peaks and troughs (beyond the usual weekly rhythm). Use this data to gradually better your site and not induce a panic attack.

3. You don’t need a crash test dummy, but a crash test smarty
Using website testing is the best way to find out what is wrong with a site that is not performing as expected. Usability testing can methodically go through the site and point out where real users will have trouble, find a problem or get frustrated. Fixing those problems found in testing is the only way to ensure that your users get the best experience and keep them coming back.

4. Innovation can save the day
If you start to worry that your site is stagnating then throwing bells and whistles at the problem will not solve it. Instead get creative with what you offer your customers or clients. Make your content more valuable, insightful or add unique elements. Reward loyalty from repeat customers and create offers that add value for customers rather than just slashing prices which will only serve to reduce your own income.

5. Check what’s going on around you
Watching competitors is always a good plan. The trick is not to just blindly follow what they do (we’re staggered at the number of designers who are asked to build a clone of a successful site from people who think that’s all that is needed). Do what they do better, or with your own unique twist, or just do something that makes you look different to build up your own customer base. If you’re always following your competitors lead, you’ll always be one step behind.

Keeping it together
When your site is struggling, the first thing is step outside the problem(s) and look at your site as a whole. Often, getting an independent voice is the best solution and this is where usability testing can play the most beneficial role.

Have you had website anxiety? how have you dealt with it?

Related services: Usability testing

 

 

Liked this article?

Get more specialist retail and finance UX insights straight to your inbox

  • We promise no spam, just straight up great insights from our UX experts!

 

 

Damian Rees

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