I draw boxesA blog on user experience & design

May 20, 2011

What ‘The Social Network’ can teach UXers

The Social Network

Mark Zuckerberg creates facebook, as portrayed in The Social Network

I’ve always loved the democracy of the web – the fact that anyone can create their own site relatively easily and cheaply alongside that of a global corporation is what first attracted me to it as a medium. Web 2.0 technologies such as blogs and youtube have only served to increase this effect by lowering the barrier to entry to the general public. Everyone with Internet access can have their own place on the web.

Since my move in to digital user experience design, I do somewhat miss building websites, and watching The Social Network recently made me think of a fundamental tuth: you always need someone to build a website for it to exist.

Being able to code and build gives you amazing power over an end product, and an ability to actually create what others can only sketch or wax lyrial about.

I would always advocate bringing your developers in to your UX work, and at a higher lever having developers on the board of a company or at Creative Director level. Developers are incredibly creative and up-to-date with their thinking and awareness of technology. Many understandably resent the term ‘creatives’ to refer to UXers and designers. Granted, some developers are not the best in other areas (and who is strong in every area?) but a brilliant developer inputting in a timely manner can be invaluable.

“my colleagues and I are doing things that no one in this room, including and especially your clients, are intellectually or creatively capable of doing”
Jesse Eisenberg as Mark Zuckerberg in The Social Network

From what I can see from the film, Mark Zuckerberg puts great faith in his own skill – pure web development, hacking. The developer contests at facebook are legendary, and feature in the film too. It seems to me (and I would love to know if this is the case) that he puts a lot of emphasis on developers at facebook rather than other disciplines, for example user experience design or visual design. I bet developers run the show.

A key storyline in the film follows the Winklevoss twins who claim to have ‘invented facebook’ because they described a similar idea to Zuckerberg at some point. This should be a scenario familar to anyone who has worked at a small development agency – potential client comes to you with a ‘great’ idea. This idea will change the world. It’s amazing the world has survived so far without it. They will probably swear you to secrecy and brandish NDAs. In fact, you’re lucky they’ve chosen you to be a part of it.

“When everyone is looking for gold, it’s a good time to be in the pick and shovel business.”
Mark Twain

And so it was (and still is) with websites, especially in the dotcom boom.

And here is the key point: Zuckerberg is brilliant because he actually created facebook. This was only possible because of the democracy of the web. In theory, anyone could buy a domain name for £10 and create the ‘next big thing’. He coupled this with an acute awareness of what users liked about the product: exclusivity, 100% uptime, the ability to ‘stalk’ your friends and people you meet. These are the fundamental tenets of the facebook user experience – and he didn’t need a UXer to tell him.

“You know, you really don’t need a forensics team to get to the bottom of this. If you guys were the inventors of Facebook, you’d have invented Facebook.”
Jesse Eisenberg as Mark Zuckerberg in The Social Network

As user experience designers and visual designers it is easy to get carried away with big ideas and things you’d love to see on screen. But we cannot make anything on our own. I fundamentally believe in the viability of our unique role and the special skills we bring to a team (empathy for users, user research, detailed planning, communication skills etc.) but it’s important to be able to do as much as we can to create websites. Get your hands dirty. Maintain your own site. Better, learn to code. At the very least, have great respect for web developers.

Let’s not become the Winklevii.

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.

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.

June 19, 2008

First impressions of Axure software

I’ve spent the afternoon installing and reading about Axure web prototyping software. It takes Visio functionality to the next level, by adding the ability to define and output complex interactivity and AJAX-style controls.

Axure takes Visio functionality to the next level by adding the ability to define and output complex interactivity and AJAX-style controls

You work in an interface that is similar to Visio’s – but you can definitely tell that the software is specifically designed for web prototyping. Whereas Visio is a planning and diagramming software that allows you to do architectural layouts etc., Axure is built from the ground up to enable you to plan web sites in an engaging and accurate way.

This offers an intriguing possibility for me – that of creating interactive mockups of web sites as a part of my IA. I’ve always worked by producing flat, 2D documents that describe the interactivity that should occur with descriptions and a variety of page layouts. I have become extremely fast with Visio over the last couple of years and am quite used to communicating ideas for interactive systems in 2D media.

But Axure really looks like it could be the good IA software I’ve been waiting for. More updates to follow.

June 16, 2008

The stupidity of rel=nofollow

I am truly baffled by the existence of the rel=nofollow attribute on wordpress comments. Even more so by that fact that it is enabled by default, and can only be disabled by installing a plugin.

It seems to me that inter-linking between blogs is exactly what the web is about. Democracy of content, freedom of speech and sharing opinions. Why shouldn’t a commenter on a blog get some search engine ‘credit’ from the page they have chosen to enrich by commenting on?

A human user can see the comment links between one blog and another, so why shouldn’t google?

The idea of using rel=nofollow to reduce the amount of comment spam seems totally outdated and not useful in any way. Akismet is a genuinely useful comment spam filter, and most people manually vet their blog comments before they appear on the site anyway.

As for search engines, I thought the whole point of google’s pagerank was to provide an accurate and ‘honest’ reflection of the web and what is important within it. This to me means providing the search engine spider with an experience as close to that of a human user as possible.

A human user can see the comment links between one blog and another, so why shouldn’t google?

Cards on the table, this annoys me directly because I am trying to raise awareness of this blog by reading around the IA community blogs and commenting on them where I have something useful to add. Readers will see my comments and link back to my blog, but search engines won’t?!

PS rel=nofollow is disabled on this blog thorough the quality DoFollow plug-in

For more check out 11 reasons against nofollow or the WordPress article

Powered by WordPress