I draw boxesA blog on user experience & design

March 9, 2011

iPad UX tips

iPad

The iPad offers user experience designers a whole new way for users to interact with content

I’ve recently been working on a pet project for the iPad. It’s my first user experience design project for the iPad so I thought I’d share a few of my findings and thoughts here.

My first port of call was uxmag’s useful article on iPad UX guidelines. They summarise a number of key principles, taken from Apple’s Human Interface guidelines which is also a useful reference. The most important quote I think is this one, from Apple:

the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.

For me this returns to the old mantra of ‘content is king’ which has been true since the web was invented. Make sure the main ‘stuff’ you have to present is the main feature of the app and is easy to get to. The rest of the quote is about the nature of the device – it has a large, beautiful screen driven by a revolutionary touch interface. Here, Apple are encouraging user experience designers to make use of this to the full and really bring out the ‘magic’ of the iPad. I think this quote is excellent as it summarises a fundamental set of ideas for designers to keep in mind while working.

Next, as I have only used an iPad briefly I thought it would be important to familiarise myself with the basic interaction styles, or gestures, that the existing apps make use of. In interface design I always think it’s important to make use of what the user already knows – patterns, interactions and conventions that they have used before and are therefore more intuitive.

iPad Photos app pinch gesture

The iPad Photos app allows you to 'pinch' open a stack of photographs

I used the Apple guided tour videos (Part 1 on YouTube, Part 2 on YouTube) to get a feeling for the gestures that Apple feel will make best use of the iPad interface for users. Particular interaction patterns that stand out are:

  • The ‘pinch’ gesture to open a ‘stack’ of photographs (shown here)
  • The ‘swipe’ to move between photographs
  • The ‘scroll’ gesture to move through web or textual content
  • The page turn interface to mimic reading a book

I particularly like the ‘swipe’ gesture to move between photographs as it a) allows the photograph to be viewed full screen, with no interface elements at all, and b) because it is somehow very intuitive, probably because it mimics somewhat moving through a stack of physical photographs.

So in summary, review all the main existing interaction patterns and see if you can apply them in your design. For example, I also borrowed features from the Google Earth app, because the app I was designing needed a map interface.

Finally, a point on wireframe presentation. In order to get across exactly how your gestures should work, I would recommend taking the following steps to communicate as clearly as possible.

  1. Include links to Apple or YouTube videos showing how the interaction should work, if possible;
  2. Include a detailed textual description of the gesture in your wireframe notes; and
  3. Also use gesture icons on the page wireframes themselves with a small textual description. For example, this OmniGraffle template from LukeW.

Together these steps should help bring your exciting ideas for iPad interactions off the boring wireframe page. Also, a great OmniGraffle stencil is available from GraffleTopia.

The iPad offers a great chance to create a new style of relaxed, engaging digital experiences. By ‘keeping it simple’ and allowing the content to stand out we can really make the most of this new device.

June 18, 2010

The user experience of the World Cup

England v Algeria, Cape Town

England v Algeria gets underway in Cape Town.

As I write this I’m coming to the end of a great week in South Africa where I’ve been watching the World Cup in Cape Town. It’s occurred to me that the World Cup is so successful because it gets the basics right and is so well organised. Here I’ve decided to share a few of the aspects I think are particularly important.

The beautiful game

I’m going to start by stating the obvious: the World Cup is successful because of the success of association football – or soccer. And I believe soccer is so successful because of its simplicity – fundamentally the game has one rule (don’t use your hands) and one aim (get the ball in to the goal). This incredibly simple format makes it accessible to everyone. You don’t need a degree to understand the rules or a vast array of expensive equipment to begin. The “jumpers for goalposts” game of soccer takes place across the world – I saw no less than 5 games of soccer being played as we drove past a township outside Cape Town. It is truly the game of the people.

In my experience FIFA try to keep to this level of simplicity as much as possible – no video replays for referees, no ‘hawk-eye’ 3D replays, no different scoring system depending on how far out you shoot from (an idea I heard once originating from the States). They try and keep the games that take place in stadiums as close as possible to the games that take place in parks, and I fully agree with this.

World Cup location boarding

The world cup venues are clearly shown during each match to give the viewers at home a sense of 'visiting' the host country.

Competition format

The competition format is absolutely key to the success of the tournament. The group stage ensures any team that qualifies will get a reasonable number of games (3) before going home, so any visit by travelling fans is worthwhile. The fact that 64 games are played over four weeks is unique in world football, and the clever format of the competition means that only one drawing of teams is necessary to define the matches for the entire tournament (thus making the ‘world cup wallchart’ possible). Wherever possible games are played at individual times (when no other games are taking place) to allow for maximum viewers.

Also, FIFA does not hide the fact that the World Cup does not necessarily feature the best 32 teams in the world. It prioritises the fact that it is a worldwide competition and arranges the qualification groups by continent and global region rather than by the best teams, making it truly a global tournament. This helps ensure a worldwide participation and audience even if the teams are not always the best. However, the qualification system still means that in theory any team could reach the World Cup if they play well enough. This holds true with another fundamental tenet of association football: if you’re good enough you can succeed at the highest level regardless of the size of your club or nation.

Stadium camera

A new overhead camera for the 2010 World Cup allows for great shots for the viewers at home (shown below).

Broadcast experience

The World Cup is expected to achieve a cumulative worldwide audience of 26 billion people. This level of success is largely due to the enjoyment of the game itself, the scheduling, and the broadcast product. A new camera (highlighed in the photograph on the right) was introduced for this tournament, suspended from near-invisible wires above the pitch to achieve fantastic shots from above the players (also shown right). The camera is manouverable to virtually any point within the bowl of the stadium. Home 3D technology is also being pioneered by Sony.

Overhead camera view

View from the new overhead camera - Brazil v Ivory Coast.

The fact that the games take place across the host nation means that they can be scheduled one after another – enabling the armchair fan to take in 3 games per day during the group stages. It also means travelling fans get to see a number of venues within the host country if they want to follow their team. Significantly, the venue for each match is displayed on the advertising boards next to the centre line so the fans watching on television can clearly see where the game is being played. Without this the games could easily blend in to one experience for the television viewer. This valuable advertising space is given up by FIFA to enhance the overall user experience of the competition – the feeling of visiting a country for the viewers at home.

Related to this, I was disappointed to see the the BBC World Cup home page does not allow the user to browse matches by location – its main navigation is ‘groups & teams’ and ‘fixtures & results’. Neither of these offer the ability to browse by stadium that I can see. I appreciate that the BBC is largely targeting UK-based fans but as a fan travelling to Cape Town I was disappointed to see that I couldn’t find out which matches were being played there.

World Cup 2010 ticket

The ticket design caused problems for visiting fans because the match title was not prominently displayed.

Travelling fans

The travelling fans are the other large audience group for the World Cup, and ticketing is a major operation. Unfortunately there have been empty seats in South African stadiums and I think FIFA need to look at some kind of waiting list system to reallocate these in future. I had a number of friends who stayed at home because they could not get tickets.

The initial ticket sales take place in an online lottery. While this worked well, any online system comes with the inherent restrictions to people without internet access, credit cards or bank accounts. This was particularly a problem for African residents, and eventually FIFA opened up the ticketing to cash purchases. This is a good thing and I think they should try to expand this in future. Glastonbury festival has the same problem with ticketing, while the online lottery is fair up to a point it inherently excludes certain users and Glasto nowadays is far less diverse than it has been in the past.

Another small point relates to the design of the tickets themselves. We were told about problems where fans have presented the wrong tickets by accident and thereby invalidated their tickets for future games. This is a symptom of the fact that the name of the game is printed quite small and tickets look very similar. In the frenzied stadium checkpoint scenario it is easy for an official to invalidate (tear off) the wrong ticket. Simply making the match details printed on the ticket much larger would help fix this.

Conclusion

My first experience at a World Cup was in Germany in 2006. Since then I got the bug – and seeing how excited the entire country of South Africa has been this time makes me feel really happy about what it’s done for the country. Sepp Blatter made it his mission to bring the tournament to South Africa and I think few would criticise him.

Yes, the cynics say it can attract crime, is commercialised, benefits big buisinss and generates a lot of money for a relatively small number of people. But credit where it’s due – FIFA run the world game of soccer with a strong element of control (unified rules) and manage this event virtually flawlessly every four years. And it doesn’t happen by accident.

November 22, 2009

Working with Bunnyfoot

Today I’m working with Bunnyfoot, a user experience and usability testing agency at their head office in Didcot, Oxfordshire.

It’s interesting for me to visit the company’s labs, as I’ve had quite a bit of contact with them over the years. Firstly when I was at VisitLondon.com, they did the user personas and usability testing for the site. (Personas are characters that represent the users of a web site, their goals, needs, motivations and desires). Personas also look at the entire user journey or experience outside the site and detail the role the site plays for that user. Typically 4-8 personas are created for a project and they are based on audience research including surveys, telephone interviews and face to face chats.

The personas were printed up into A2 posters and displayed around the Visit London office to remind the development team of the target audiences for the site. The personas had names such as “young backpacker” or “luxury vacationer from america” and showed information such as the interests, user needs and online goals for that audience. I really liked the work and ended up using the posters as inspiration for some persona work I did last year for Marie Curie Cancer Care. They provide a great tangible deliverable for the client and look really nice, as well as containing an important, concise summary of your user research.

January 19, 2009

My first usability testing

Ever since reading Steve Krug’s Don’t make me think a few years ago, I’ve wanted to run my own usability testing sessions. Usability testing is where you sit with people who have never used a site before, (preferably not web professionals) and discuss the site with them as they try and use it. Often their comments and mouse movements are recorded so you can go back and review what they said and did.

The idea is that when you are working on a site you can become so immersed in the project it is easy to forget what normal people actually want out of the website. Business objectives (e.g. “we must sell products and gather email addresses”) and technical constraints (e.g. “we can’t build that function and we have to display the data in this way”) often get a lot of priority on a project, and it’s the job of an IA to focus on the end user.

Usability testing is where you sit with people who have never used a site before, and discuss the site with them as they try and use it

Usability testing is a key tool in doing this – and importantly it provides evidence with which to inform your judgements and back up decisions. A video of representative users saying “I don’t want to give over my email address” or “I don’t understand the data when it is presented in that way” can be a powerful persuasive tool for making changes.

Another important point is that you can test sites when they’re in the prototyping stage – i.e. they don’t have to be fully built. You can create a clickable web mockup of full colour designs, or even wireframes and still get invaluable feedback from the process.

The bottom line for me is that it just seems such a simple and easy way to vastly improve your web sites. At my previous job I wrote a proposal offering to run low budget, ‘lost-our-lease’ usability testing sessions as advocated by Krug. The idea was to do cheap, frequent testing rather than expensive agency testing (which happened about once a year).

In the end they never went for it, and continued to outsource the work. But my new employer seems to be a bit keener to do usability testing, and let me loose to test the configurator for a large car brand we’re working on. A couple of weeks ago I ran my first ever usability testing sessions, with 6 volunteers from my work spending around an hour with each of them on the site.

The bottom line for me is that it just seems such a simple and easy way to vastly improve your web sites

The product

The website I tested was a car explorer and configurator system designed to give users a visual tour of various car models (the ‘Explore’ section), before allowing them to choose and configure their own car (the ‘Configure’ section). The ‘Explore’ section was already fully functioning and live on the web, while ‘Configure’ was in prototype form. I created a clickable version of the visual designs for users to interact with in the test.

In the Explore section you can view one of four models of luxury car in 3D, navigate around it, look inside at the dashboard and interior and change the colour and wheels with real-time updates. In ‘Configure’ you can pick your options from a list and see the price and car photo update in real time.

The outcome

The aim of the exercise was to get 4-6 key recommendations for improving the product, which could then be implemented to improve the user experience. We achieved this and made recommendations to the client, including video clips and justification for the points we made. Overall it was really good to see the users interacting with the system and I’m convinced we made genunie improvements to the system. I hope we can do it again on another project.

Powered by WordPress