The ‘Responsive’ approach (as advocated by the wonderful Ethan Marcotte) is one where a single CSS/HTML site adapts to the device on which it is being viewed, as opposed to a collection of separate sites that are designed with particular devices in mind.

The advantage of Responsive sites is that one codebase covers all devices, meaning that changes can be rolled out to an infinite number of devices by amending one set of code, and one set of assets (images, videos etc).

Device-specific sites, however, are often completely separate to their desktop equivalents, which can mean greatly increased ongoing costs to maintain your suite of sites.

Responsive sites run from a single codebase

Here at cx we regularly undertake detailed user testing on all sorts of tablets, smartphones and desktops, which provides us with insights that we can draw upon when making decisions during Responsive projects, however it is still a relatively new approach – one that presents unique challenges along the way.

Testing iPad usage with users

As the approach matures and starts to be recognised as a valid mainstream approach to maximising ROI, we thought we’d share some of our observations from being at the coalface.

Wireframes are no longer enough.

Responsive sites tend to be built around a number of ‘breakpoints’. The sites detect the browser width and deliver the most appropriate layout and content (via media queries – for more info see this article). This commonly results in at least 3 distinct layouts for desktop, tablet and mobile.

Traditional wireframes are very useful for establishing the initial, broad approach, but they fall down when it comes to filling in the gaps between breakpoints.

Developing HTML prototypes from the initial wireframes enables the team to cement their approach to the adapting layouts in the browser. HTML prototypes (with fully functional media queries) enable realtime responsive testing on the devices they are designed for, allowing rapid feedback and iteration based on informed decisions.

The addition of HTML prototypes may be an addition to your usual wireframing process, but they will help your team maximise the value of the wireframing/UX process.

Design your layout according to device type.

Our user testing on a variety of devices uncovered a surprisingly uniform pattern of behaviour. On smartphones, all the users we’ve tested viewed websites in portrait mode (upright). On tablets, however, all automatically held the device in landscape orientation.

This insight can be used to inform the wireframing and prototyping process and ensure that the site’s flow is optimised to the most common use case.

The 960 grid may not be the most efficient any more.

The 960px grid system has been used for years to design websites that work perfectly on fixed size desktop screens.

The Responsive approach, however, is all about designing for a multitude of screen sizes, and uses percentages to determine layout, which can prove to be a rather inefficient process when using a 960px grid (resulting in some crazy numbers).

More appropriate, and potentially much more efficient, are grids that adopt a more rounded, percentage-friendly approach, such Elliot Jay Stocks’ 1000px grid, and the 1140 CSS Grid.

A pragmatic approach to fluid layout.

Pragmatically fluid approaches can minimise development overhead

Fully ‘fluid’ Responsive sites reconfigure their layout and visual hierarchy in realtime as the user resizes their browser window.

Whilst this approach may be seen as technically impressive, it is usually at best an edge-case requirement for users, who are more likely to find unnecessary rejigging of content a confusing distraction.

That is not to say fluidity is completely inappropriate – indeed when designing the breakpoints for tablets and mobile devices it is a good idea to allow for a certain level of flexibility in layout to accommodate for the many differing screen sizes.

Retaining the use of Photoshop maximises the efficiency of the visual design workflow.

There have been a number of calls from members of the design community for designers to start working exclusively in the browser, designing on the fly with CSS/HTML and Javascript.

Whilst this is a nice idea, we have found that from a practical level it is much more efficient to begin the visual design process in Photoshop (and/or Illustrator), and move in-browser once a visual direction has been determined and the more intricate assets created.

In most cases we’ve found working in the browser from the outset to be considerably more time-consuming, and more restrictive, than working with Adobe’s suite of tools.

Thomson Sport - designing look & feel in Photoshop maximised efficiency

Time to get agile.

The Responsive approach to designing for multiple devices demands a certain level of experimentation, of trying out concepts in realtime, of iterating regularly – more so than the traditional fixed-width development process.

This iterative approach naturally lends itself more easily to an Agile process than a Waterfall one, which means some changes in the project management process are often necessary to allow for more collaborative ‘sprints’.

The need for buy-in.

“Embracing the Responsive design approach is like shifting from tables to CSS.”
— JAMES DRINKWATER, TUI

Media queries, the building blocks of Responsive design, demand a complete rethink of how CSS/HTML is put together, therefore a complete change of approach is needed.

If your development team is going to become a lean Responsive team, they will need to be completely sold on the benefits of it, which may mean an evangelical approach from the project leaders – providing insights where needed, encouraging ongoing experimentation and ensuring everybody is fully versed on the reasons why you are adopting the approach.

A new approach, with fresh challenges..

Whilst we have worked on a number of successful Responsive design projects now, we are aware that it is not appropriate for every situation. There are instances where dedicated mobile-specific sites or apps are the right option, especially where device functionality (cameras etc) are utilised, or where large amounts of content need to be navigated on the go (e.g. Twitter, Flickr etc).

And of course, whilst it is no doubt a cheaper alternative to a device-specific approach, the changes to your UX and development process do need to be factored in.

However our pragmatic approach to Responsive design has excited us about the possibilities of multi-device design, and we’ve a number of sites in development at the moment that we can’t wait to launch upon our clients’ customers.

It would be great to hear of your experiences, so please share in the comments section below.

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.