I’ll be sharing stories, bringing along examples of mobile testing setups to look at and recommending ways to make your research simpler to accomplish and deliver better quality evidence.

I’ll explore the objectives when we test handheld devices? What are the difficulties and what equipment can be used to best capture the sessions for ourselves and others who want to observe? These are all questions that I’ve asked myself as I’ve experimented with cameras, sleds and software.

Find out more here – Cambridge Usability Group

Follow me on Twitter, I’m @silverfoxyboy, if you have any questions.

This month, ComScore released some figures showing how the amount of content consumed drops with screen size.
Their data shows people using 5 inch screens (Galaxy Note) read only 63% as many pages as people who use iPad sized tablets with 10 inch screens. The iPhone has a 3.5 inch screen.

Pages browsed falls with screen size

It’s worth bearing in mind that you’d only fit about 25% as many words on a 5 inch screen as you can on a 10 inch screen.

Extrapolating those figures, as the screen size falls from tablet to iPhone the amount of content people read could fall as low as 12% moving from desktop to phone.

That says something about how far into your content the critical stuff should come if you’re creating content for the web.

We’ll be putting some analytics in place on our site to check how things work for a responsive site. But if you’ve got more hard data, tell us in the comments.

The neuroscience of design at London IA

The first is London IA on Tuesday April 24th.

Understanding how the brain work will make you a better designer.

I’ll talk through how we perceive and think and how designers can tap into cognition and perception theory to make their stuff more effective.

Tickets sell out quick so get in there now, they are free. Get London IA tickets

The UX of HTML5 at FOWD

The second is the Future of Web Design on Tuesday May 15th.

HTML5 offers lots of new types of interaction. These new more powerful interactions mean we have a greater set of solutions available to us.

But with great power comes great responsibility.

I’ll share my experience with user research to show just because we can use sliders & spinners doesn’t mean we should.

You’ll learn how to use the new features of HTML5 so that you and your users get the absolute most from them.

There’s a 10% discount code if you’d like to come along, just enter SPK10 when booking. Book at FOWD London

Follow me on Twitter, I’m @mrjoe, if you have any questions.

This is the kind of question that brings out the zealots and sparks bloody flame wars. Apps are evil and must die! People love apps, apps are cool! So, who’s right?

When I come across an question like this—one that seems impossible to answer and where the two sides are cranking up the rhetoric—I know one thing for sure: it’s the wrong question.

Let’s start with what we know.

Mobile is fragmented and it’s not getting any better
There are more devices, in more formats than ever before and more are coming. One Android developer recently claimed that it was having to deal with 1443 variants of Android.

Sure, some operating systems are dying (farewell, Palm, it was great while it lasted) but the variety of devices and formats is multiplying. And there are a lot of devices out there running things like Linux or custom versions of Symbian that you’ll need to take into account if you’re a global company. You need a strategy to deal with diversity.

Mobile changes quickly and it’s hard to predict
Look at how things have changed in the past two years. Two years ago, there was no iPad. When Apple launched it the press reaction was ‘WTF???’. Now tablets sell in the tens of millions and people are talking about the end of the PC era. Two years ago it was all about iPhone. Now Android is massive. Last year, Gartner predicted that Windows Phone 7 would kill the iPhone. Since then its market share has fallen (though the new Nokia phone has had a promising US launch).

Mobile devices get replaced at a faster rate than PCs (two years for a smartphone, versus 43 months for a desktop computer) and they get replaced with completely new stuff (apps cost a few pounds each to replace, PC software costs tens or hundreds of pounds per application – so users aren’t locked in to one platform as they have during the PC era).

No one knows what things will look like in two years’ time. If they say they do, they are lying. Your strategy has to position you for unexpected change.

People use any platform to do anything
Last month, Google published data collected over the Christmas 2011 period on how people use their devices for shopping online. There are some interesting differences between devices.

Shopping activities by device: mobile, tablet, desktop.

Picking a line at random, you can see that people prefer to look for discounts on the PCs (73%) versus their tablets (46%). That makes sense: it’s a data intensive exercise with a lot of bouncing backwards and forwards and that’s easier on a PC.

But look again. Almost half the people they spoke to were using their mobile phones for this activity. Going down the list, no activity falls below 30%. You can’t say ‘people don’t use their phones to compare prices’ or ‘check inventory’ or anything. They use all the devices to do all the tasks.

This undermines the idea that your strategy should be ‘computers are for buying’ or ‘mobile is for reading reviews’. It puts a lie to the idea that mobile should be about cutting out features. Your strategy has to be: support all activities on all devices.

If you bet the farm on one platform or solution you will lose
You need to be able to see where your users want to go and follow them quickly and cheaply. But it costs the same to build a feature or write a body of text for a mobile website or app as it does a desktop website or app.

Given the variety of mobile devices out there, the cost of building optimised experiences could get steep very quickly. But if you choose not to play on a particular platform, you’re leaving it open for your competitors. And if that platform takes off you could find yourself without an audience.

If you have to pick just one of ‘mobile optimised site’ or ‘mobile app for iPhone’ or whatever, and if your development costs are the similar to your desktop optimised web development costs, then you’re making a risky bet.

The solution: Begin with data
You need a way of re-using content and functionality across platforms to keep the cost of development as low as possible.

You need content, data and functional components that are tagged and structured so that you can re-purpose them and publish them to any platform as you need.

This means you need to look at your content management systems, customer databases, image libraries and functional components (APIs). If you get this right, you can move as quickly as your customers. If you get it wrong, you will waste money, have offices full of frustrated staff, and you’ll be toiling behind your competitors or Google or that aggressive new startup that’s come out of nowhere.

Those are big impacts, big enough that you can build an ROI business case for your strategic plan. If you follow Roger Pressman’s formula, every pound you invest in getting your data right could pay back with £60-100 in savings. There aren’t many places you can get a deal as good as that.

When you’ve got your data under control, you can start to build things on top of it much more cheaply. So you can react to the kinds of rapid changes that characterise mobile devices.

Go where the users are
This means you no longer have to make a big bet and hope for the best. You can make smaller investments with less risk and shorter pay-back times. Let the zealots carry on shouting about apps versus mobile web (whatever that is). You can win whatever game you decide to play.

And what if you need to do something now? Fine. Just make sure it’s cheap and disposable. And don’t let your real strategic problems get worse while you’re doing it.

This is the fundamental risk underlying the mDot site approach. The argument for this parallel development suggests this is the cheaper, easier way to add mobile functionality without touching your existing website. But this leaves you with two code-bases to maintain and synchronise and that can get messy in the long run.

Amateurs talk ‘strategy’
Military wisdom has it that ‘amateurs talk strategy, professionals talk logistics’. In other words: a good general knows that keeping his troops supplied with raw material means they can be flexible and ready to fight wherever the battle needs to take place.

You face a confusing and uncertain battle. Don’t be distracted by fast changing apps and websites. Look at the supply lines of Data and APIs.

Here’re 12 tips to learn more about your mobile product and how to overcome the difficulties associated with testing mobile products:

1. Get comfortable, don’t sit around a desk. Instead use comfortable chairs around a coffee table.
2. Get rid of the wires and sleds and clips and webcam attached to the phone. Let the participant use the phone as naturally as possible. What you lose in video quality you’ll more than make up for in seeing natural behaviours.
3. Wherever possible let the participant use their own phone or tablet, they’re in control and you’ll see more natural behaviours.
4. If you’re using a testing phone or tablet, let the participant find the app you want to test themselves. It helps them acclimatise to an unfamiliar device.
5. For published apps, ask half the participants to install and use the app prior to testing. The other half get to use the app for the first time in the test. The pay off, you get to see the difference between first time users and those who’ve moved on from the discovery phase to more confident usage.
6. Dim the device screen a little, small bright screens that change brightness levels frequently are really tricky for low-end cameras to video. Film against a generally plain background, pale surfaces are particularly poor for testing against.
7. If possible only use phones with dark cases. Phones with white bodies cause more brightness flares and are harder for video cameras to balance light levels for.
8. Fit anti-glare screen covers on your test phones. Shiny phones create lots of reflections with normal indoor lighting.
9. Before each test put the phone / tablet on the coffee table, let the participant pick it up. For an extra touch angle the phone or tablet so the corner points toward the participant. This tactic allows the participant to pick up the phone/tablet in a natural way, you don’t influence their expectations for the app to be a landscape or portrait based design)
10. Good lighting is important, but it doesn’t need to be a professional setup. Some indirect lighting improves the quality of the video no end.
11. Don’t bother capturing or mirroring the phone or tablet screen, concentrate on capturing a video of the person using the device, particularly their gestures and how they hold the device. It’s the MOST important thing and you’ll learn how they explore your product, the gestures they expect to work, the gestures they fall back on when they’re in trouble, their expectations of the interface design and their journey through your product.
12. Have FUN… people love their phones and tablets. Let them show you all the nifty tricks they’ve learnt, they’ll be happy to tell you about them.

That’s it for now. Phone and tablet testing is a moving target right now, but these tips will help you learn how people use your product.

Junior Visual Designer

You’ll be joining the lovely cxpartners team in our wonderful central Bristol location, working on innovative and exciting projects for some of the world’s best brands.

As a specialist visual designer, you’ll be solving challenging design problems and producing refined solutions for user interfaces, multi-device websites, mobile apps and even offline media.

Aside from your natural eye for composition and tone, we’d love to see:

• Experience of designing beautiful, purposeful user interfaces for websites of all shapes and sizes.
• An understanding of the fundamentals of typography, especially in relation to its use on the web.
• A working knowledge of current best practices regarding web typography, accessibility and approaches to designing for mobile.
• A thorough understanding of brand, and of working to (and sometimes on) brand guidelines.
• Good knowledge of frontend development including CSS, HTML and Javascript (not necessarily to production standard).
• A willingness to talk to clients about the decisions that informed your designs.
• Illustration and photography skills would be a bonus.

This is a great opportunity for a skilled designer to work alongside the Creative Director within a friendly, world-class team on projects that will make a difference. Our work is used by millions of people every year.

This is a full-time position, based in our Bristol office overlooking the gorgeous Queens Square.

If you’re interested, write to us at jobs@cxpartners.co.uk with a brief CV and your portfolio (link or pdf). Please also tell us something about your interest in design.

No agencies, please.

Job perks

• Pension and healthcare scheme
• Bonus scheme
• Conference and training allowance
• New iMac and other kit if needed
• Comfy HermanMiller chair
• Based in Bristol!

Here’s my slides showing why I love form design.

Wake up, forms need not be boring

View the ‘Forms are boring’ presentation on Slideshare.

That’s all very well, but it’s kind of old fashioned. It’s how monolithic corporations deal with people – with a rigidly fixed expression. One emotion for all situations.

When you watch any conversation between two people, you’ll notice that it’s not just about exchanging words: there’s an emotional ebb and flow. Even if it’s in a language you don’t understand, you can tell a lot about what’s being said from the participants tone of voice and expressions.

And when people don’t respond to our emotions, we find them untrustworthy and irritating.

We need a more sophisticated view of emotion in design.

My presentation at Interaction 12, this year’s IxDA conference, in Dublin, looked at the question of how we could build some emotional intelligence into our websites and mobile apps – using the kinds of technology we have today – and what benefits this can give users and businesses.

One of the traits I pulled out was observation. Getting out into the real world to experience life from a different perspective.

In preparation for the talk I came across a lovely story which unfortunately got left on the cutting room floor, so I’d like to share it with you now:

Simon Parker understood that cycling around London was difficult, and decided to create the London Cycle Map to help us out. The story of his passion and how he went about it is something that all designers can learn from. Here’s an exerpt from an interview with him. The full version (and the map) can be found here – http://cyclelifestyle.co.uk/index.php?option=com_content&view=article&id=27&Itemid=32

“To the dismay of his parents (who wanted him ‘to get a proper career’, as Parker tells me) he began avidly researching the idea. He took a job as a taxi driver so he could earn money while exploring the streets of London, chatting to his passengers about the hidden local byways which would form the ins and outs of his plan. London’s worsening traffic congestion only emboldened him, and over the years he sketched a network that evolved in tandem with his knowledge of the capital. Then, four years ago, Parker decided to substantiate his ideas further with the advice of a professional cartographer. He borrowed thousands of pounds to do this, but their ongoing collaboration has produced a polished, stylised draft of his London Cycle Map. It fits handily in a pocket, capturing the behemoth of London in an eight-inch visual network.”

How many of us would go to these lengths to design a better product?

Footnote

If you’re interested in getting involved and help see the project through to completion – with clear way marked signage around London then you can sign the petition here: http://www.petition.co.uk/london-cycle-map-campaign/

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.