82,000 of you have read our blog generating 220,000 page views. Thank you for your time.

So, without further ado.

Here’s the top 10 of 2011

1. Form design guidelines crib sheet (free download) 15,000 views by Joe. A free guide & template to design bullet-proof web forms. Later republished by our friends at Smashing Magazine.
2. 3D Wireframes, the future of wireframing today 6,500 views. Our April Fool by Steve.
3. UK rail tickets are losing travellers money and need redesigning 6,000 by Steve. He strikes forth on his frustration with ticket design.
4. iPad usability testing – our equipment 3,000 by Walt. We show our iPad testing facilities & offers some testing tips.
5. An alternative approach to product page design 1,800 by Chris, discussing product page design from an article in .net Magazine.
6. Three ways to make your wireframes more useful (video) 1,700 by Steve. From his talk at UX Bristol.
7. iPad app UX testing : Observations from the field 1,500 by James. Highlighting how to user test iPad apps.
8. A big list of UX KPIs and Metrics 1,400 by Joe. A collection of KPIs from the many projects I’ve worked on over the years.
9. An introduction to quiet visual design 1,200 by Chris. Talking about our approach to visual design.
10. The edge in eCommerce: emotion 1,000 by Joe. Discussing how to sell online using more than price alone.

The big themes you seem interested in are forms, wireframes, iPad and eCommerce.

The biggies

Which naturally leads us to our biggest blog posts of all time.

1. The myth of the page fold: evidence from user testing: 23,000 this year (now at 190,000 all time) by Joe & Fiz.
2. Web forms design guidelines: an eyetracking study 16,000 this year (now at 50,000 all time) by Chui Chui

Is there anything you’d like us to blog about in 2012? Let us know in the comments or via @cxpartners on Twitter

So what prototyping methods have we got at our disposal and what are the pros and cons for each? What differences are there from testing desktop prototypes (apart from the obvious difference in screen size)?

Paper prototyping

Just as with desktop websites, you can use lo-fi prototyping during wireframe development and testing. This helps to work out the best positioning for design elements and to gauge people’s expectations and reactions to your product.

Here are some projects where we’ve used paper prototypes to design and test mobile products:

Ecobugs mobile game testing

Ecobugs phone swatches paper prototype

Ecobugs is an educational iPhone game aimed at 7 -11 year olds. It involves collecting and classifying new species of insect using GPS tracking and augmented reality. Here paper prototypes were used to test initial concepts and the flow of the game. iPhone templates were used to wireframe a storyboard for the game, these were then cut to size, laminated and collated into a swatch book. Children could hold the prototype in their hands and walk around with it as if it was a real device. This was a great way of finding out if they understood the story, rules and actions behind the game in context before the visual design and development process began.

Wireframe development for tablet

Richard and Steve experimented with paper prototyping in their book Communicating the User Experience. They used it as a way of prioritising elements for tablet devices. By cutting out the separate elements they were able to move them around in situ and check the sizing and proximity of different controls as they held and interacted with the device. This allowed them to rapidly optimise the layout before creating higher fidelity solutions.

Mobile websites – BBC prototype

A while back we did some testing for the BBC mobile site. Like lots of information rich sites, many of the pages were long and scrollable. This can be a problem to replicate when testing both paper and digital prototypes for mobile. Here the solution was to mount cutouts of the wireframes onto foam board so that they could be pulled up and down below a phone screen ‘frame’.

Mobile paper prototyping pros and cons

pdf screen viewers

Using a mobile PDF screen viewer is a cost and time effective way of displaying mobile prototypes on a physical device. Like paper prototypes,  PDF screen viewers rely on the test moderator having to scroll or swipe to the correct page or state which can be a little clunky on a mobile. However, during some guerrilla testing we used this as a back up and found it invaluable when we lost wifi connection to the interactive prototype we were testing.

PDF screen viewer pros and cons

Prototyping software

Recently I tried out a prototyping app called Realizer for a travel website prototype we wanted to guerrilla test.

On paper, Realizer app looked like a great product – a free, quick solution for presenting your prototypes on a device which a user can then play with and control themselves. However further investigations have thrown up some issues. A web based app, Realizer allows you to upload your prototype stills and then add hotspot links between the pages so you can mimic user journeys through your prototype – sounds simple right?

When prototyping for a travel site the first issue I came up against was that every still you upload has to be exactly 320px by 480px – say goodbye to long scrolling pages. The way i got round this was by chopping long pages into portions and adding touch links to the bottom of each screen. This was clunky to say the least but did allow people to control the way they browse through the site.

I found it pretty quick setting up the prototype – the main issue was making sure each still image was exactly the right size. Once the prototype had been set up you are then able to access it it via an app on your iPhone. It presents a lo-fi version of your design in a form that looks scrollable and clickable. However this comes with it’s own set of problems.

This level of affordance leads people to believe you can tap and swipe through it just like a normal website, however the response time for each tap is about 3 seconds. This led to lots of over clicking which disrupted the path of the test and was frustrating for participants.

I also found that Realizer app ceased to work when there was no wifi connection, as we were guerrilla testing in an airport this was an issue.

Mobile protoyping software pros and cons

Interacting with devices tends to be an incredibly personal experience people like to hold, tilt, touch and be in control. Mobile prototypes should try and allow for this element of control. When moderating testing with desktop sites it is easy to set up multiple tabs and shortcuts in a browser, which can be clicked into without much disruption to the flow of the test. When using paper or pdf readers for mobile this becomes harder.

Using apps such as realizer allows the user a more real experience and ability to explore during a test but can only be used on one platform and relies heavily on wifi connection which can be an issue when testing in the field.

What is your experience of creating rapid prototypes for mobiles? Have you tried any other methods? I’d love to hear about them…

When you create something you put a piece of yourself into it. You transform your ideas into another object and it becomes a little extension of you. I thought his act of destruction was cold and callous.

Now that I manage designers and oversee projects, my view has changed.

I now know how easy it is to fall in love with your old work, or be afraid of changing something that seems to work. But if ideas are challenged, if you’re forced to think again, if you try solving the problem differently, then you consider the problem more deeply and your work improves.

To my tutor, destroying his work was an act of liberation, not destruction. By not being able to refer to any of his old work he became free to use the design skills that he’d built up over years in different and better ways.

So my challenge to myself, the team at cxpartners, and to you, is to trust that our next idea will be better than our last. Be fearless. Set aside what you’ve done on a project so far and look at the problem again.

How to include players in the game design process, 10th of November, 16:00 – 17:30.

We are running a group discussion on game usability, looking at what’s been tried, what works and what the future holds.

This isn’t about us selling our services and processes to you, its about sharing knowledge. We’d love to hear about your process as well as share stories of our own experience.

There are also World Usability Day celebration drinks in the Watershed afterward if you would like to join us.

So if you are a game designer or developer, interested in an informal afternoon of drinking tea, eating cakes and sharing ideas with like minded people, then come along.

Sign up here >

On Saturday, as usual, I went to the super market around the corner to do my weekly shopping. I strolled along the aisles, crossing things off my shopping list and filling up my shopping cart. I finally headed for the checkout, which by the way was quite a challenge. Why do so many people always carelessly leave their shopping charts in the aisles blocking other people’s way? “Calm down, don’t get stressed on Saturday”, I said to myself and continued on my way. But something seemed out of the ordinary. I took a look around. What is happening here? The closer I got to the checkout the more abandoned shopping carts I saw. They were all full to the brim but looked lonely and forlorn. Their owners had obviously bailed out.

Have you ever experienced a situation like this? To be honest: me neither, at least not in the off-line world. However, in the world of online shopping, this is a sad reality, regardless if it’s while buying shoes or booking a holiday. Why are users spending hours filling up their virtual shopping carts to eventually abandon them in the end?

There are various reasons, of course, often grounded in “bad usability” (whatever that is, in each particular case). But what if your online shop or booking website is actually working quite well in the UK or in the US but fails in the German market?

There’s one simple answer we hear over and over again when doing Usability Tests for our international clients: In most cases, users are ready to fork out money for your products, they just can’t – because you haven’t given enough consideration to your payment gateway and the payment options you offer.

The world speaks VISA – Germany doesn’t

Preferred payment types are culturally and socially conditioned and vary greatly from country to country. Moreover, not every payment method has found the same acceptance amongst users.

Credit cards, for example, are not as widely used in Germany as they are in the US/UK. One of the reasons is the accessibility of the EC card, provided free or charge with a standard checking/current account. It enables people to draw cash in many European countries, as well as pay in various shops all over Europe, without paying extra fees – rather like debit cards in the UK.

An example of post checkout bank transfer

Payment by bank transfer is also very popular in Germany. This is either done during the checkout process or via an invoice after purchase.

Bank transfer during checkout from ab-in-den-urlaub.de

Although the credit card is getting more popular, it is still not as frequently used in Germany compared to other countries. By offering credit card payment only, you force some users to book their trip to the Caribbean on your competitor’s website. You might even have scared a potential customer away forever. Would you be happy if you spent hours searching for a good deal on a website only to find out, at the very end, that you have to start all over again somewhere else?

Better safe than sorry

Security awareness is another typical characteristic of German online shoppers.

A survey published by FIDUCIA for 2011, one of Germanys leading IT service provider in the banking and finance industry, reveals that 0.4% of consumers, a sizably number, do not undertake online transactions for fear of fraud. There is also a perception that there is a risk involved with prepayment methods as consumers may receive a defective product.

These concerns about online payment security and misuse of data help keep traditional methods such as payment by invoice, bank transfers and cash-on-delivery at the top of payment methods for online purchases in Germany.

There are alternatives to traditional methods and Germany is a growing market for payment service providers; Clickandbuy, Paypal and Giropay.

The idea behind these services is to centralise and regulate online money transfers providing high security standards and professional risk management. In doing so, they try to address users’ fear about disclosing credit card and bank information online However, the current diversity of service providers clearly shows that there is still no standard that has is widely accepted in Germany.

Check-out or pack up

The integration of payment methods can be costly. Technical processes have to be implemented; individual negotiations with each payment provider, and some payment methods that are an advantage to the user but carry high risks for the retailer.

The right choice of payment methods is absolutely crucial to the success of your e-business.

Listen to your users, and try to take the following simple but basic rules to heart:

1. Offer more than one payment option tailored to the local market
2. Offer payment options that are appropriate to your target audience

We’re writing a book that can be used every day – by people with and without UX in their job title. Not everyone has access to a wealth of UX resources, so our hope is that this book becomes your UX expert that is always to hand, regardless of your own level of experience and expertise.

It will be a handbook to turn to whenever you have a problem to solve, need reassurance on your approach or want to learn a new UX tool or technique.

As keen followers of Smashing Magazine ourselves, we are honoured to have been asked to write a book for them on UX. We aim to follow their lead in providing useful and innovative design advice for practitioners, by practitioners.

This will be the third cxpartners book to be published in the last two years following Giles’ Simple and Usable and Richard and Steve’s new book Communicating the User Experience.

Smashing UX: Foundations for Designing Online User Experiences will be published by Wiley in 2012.

We went up against some superb finalists (Ocado, British Telecom and Dune) to take the top prize for UK eCommerce sites.

Thank you to everyone at Charles Tyrwhitt for your time, knowledge and collaboration. You helped us make a complex product range feel simple and to give the site the emotional depth you wanted. We loved working with you.

The Charles Tyrwhitt Promotions Page

Thank you to the team here as well. To Jesmond, Steve, Chris, Stu, Fiz, Amy and everyone who helped make the project a success.

Charles Tyrwhitt Tie and Cufflink Matcher

An award for a redesign is nice, but what matters is the impact the design has on the business. So I’m proud to say that sales are up and customers love using the site. That’s the prize that counts.

In a nutshell
We’re looking for a talented, motivated and creative user experience professional to join the cxpartners team. You’ll be able to research and design experiences that give tangible improvements to our clients and their customers.

Key objectives

• Understand the needs of users
• Design interfaces that significantly improve their experience of web and mobile technology
• Bring new ideas to your clients that advance their businesses
• Care about the industry and want to contribute to its development

You’ll be an insightful researcher…

• Plan and facilitate user-research activities that suit the project (such as depth interviews, card sorting, eye-tracking, user testing and remote testing)
• Analyse and structure research findings into user test reports and customer experience models
• Write presentations that clearly communicate research findings to the project team

…design outstanding user experiences

• Develop user journeys that match the users’ behaviour
• Create well-structured and easy to use navigation models
• Prioritise content
• Produce sketches and wireframes that give the appropriate weighting to page elements
• Work with our creative team to turn your ideas into beautiful digital products

…care for our clients

• Listen to and understand our client needs
• Clearly communicate your thinking (grounded in research) and articulate why it’s the right approach
• Work with our User Experience Directors to help identify and shape future projects

…and put something back into the UX community

• Engage through industry blogs, groups and conferences
• Share your ideas on the cxBlog

Anything else?
You’ll be a great communicator – in speech, words and pictures. We want someone who can organise ideas and help make sense of the many threads our clients have to follow. And you’ll need to be good at working with teams – because you’ll need to work closely with other members of staff and clients. We offer a competitive salary, benefits and a great working environment where we’ll help you grow.

What next?
Send a CV and a covering email to info@cxpartners.co.uk – we look forward to hearing from you. No agencies.

The free crib sheet is available as a .PDF .graffle or .PSD

Forms, forms, forms, often overlooked when it comes to design.

We spend a lot of time user testing forms here at cxpartners which led us to putting together a crib sheet for form designers.

We’re pleased to share that knowledge today in the form of a free template.

We’ve got the Omnigraffle original, PSD (Photoshop) and PDF examples for you to download and use how you wish. Print it out, stick it on your wall, send it to your clients, generally help make everybody’s forms better.

We’re offering it under a creative commons license.

Download:

• Form guidelines (Omnigraffle)
• Form guidelines (PSD – Photoshop)
• Form guidelines (PDF vector)

We’ve used cxpartners’ wireframe templates which you’ll be able to get hold of very soon alongside the new book from cxpartners’ own Richard & Steve Communicating the User Experience.

The talk was recorded, so I thought I’d post it up and share it with the world. I’ve also uploaded the presentation to SlideShare.

The ideas in this presentation are from a chapter in the book Communicating the User Experience By Richard Caddick and Steve Cable. Available from Amazon.co.uk and Amazon.com