Understanding Usability

Who isn't excited about new toys? So I just thought I would kick off the new year with a little blog on one of the new toys that arrived in the Objective Digital labs in 2011 - the Tobii mobile device eyetracker. This shiny new gadget can do what I've wanted to try for ages - track the eyes of a person using a mobile device (mobile phones and tablets).

(download)

Click here to download:

eyetracking-mobile-devices-qixmtBedDxoHhuFsyytu.zip (45 KB)

For a lot of our past mobile projects, we have had to use an overhead camera to record the screen of the device as a participant used it but we couldn't tell where they were looking. So a lot of the findings depended on the behaviour and responses of the participants. With the use of the eyetracker, we are able to get much deeper insights on the use of mobile devices and applications.

Setting up the eyetracker is pretty straightforward. There are a few small pieces to put together but following the instructions in the user manual makes it a simple process. You just have to make sure you use the correct attachments depending on whether you want to test a mobile phone or a tablet. The device holder can be rotated so that the device can be used in portrait or landscape mode. After the setup is done, you hook up the device to one of our eyetracking PCs with Tobii Studio and configure a few settings to optimise the image coming from the device camera.

Calibrating the eye-tracker is a bit different to the normal automatic calibration we do with the standard monitor eyetracker setup in which the participant looks at the monitor during calibration and follows a moving red dot with their eyes. However, with the mobile version, the participant needs to look at a numbered calibration pad. 

First, you let Tobii Studio know where the screen of the phone is on the incoming video image. You do this by moving around an augmented rectangle area on the image to fit exactly around the calibration pad.

And because the eyetracker is upside down, you flip the rectangle (drag the top-left to the bottom-right, bottom-left to the top-right and so on). To calibrate the eyes of the participant with the system, the user has to to look at the numbered points on the calibration pad starting from 1 and all the way to 5. 

For example, the moderator would look at the following calibration point on their monitor and ask the participant to look at number 1 on the calibration pad:

And then number 2:

and so on.

Now we get onto the fun bits - the actual eyetracking stuff. The only little annoyance I find is that the phone cannot  be moved after calibration. It is stuck to the phone holder. But the participant can grab the phone in any way they choose. I tried it out by playing with a few apps on my phone. Although it was not the usual way to use the phone, I got used to it pretty quickly.

I asked my colleague, Liz, volunteer to be my first participant and look for her dream house on an iPhone app. We got some pretty cool eyetracking data:

(download)

Click here to download:

untitled-FpkIcqFzgjukAAdqcEEx.zip (156 KB)

(download)

Click here to download:

DomainXvid.avi (9.99 MB)

We have already completed a few iPhone and iPad eyetracking projects with fascinating results and we will sharing some of those stories in our future blogs. So stay tuned!

As this is probably the last post of the year, we thought it was worth reviewing the UX industry as we have experienced it in 2011.

Hallway testing seems to be more accepted in 2011. Clients are willing to put resources into testing early and often along the design development journey. Participants are sometimes staff, but often users are recruited. Tests are short and feedback immediate.

These tests are usually with clickable prototypes or wireframes, developed in Axure. It’s especially useful for testing web processes, and uncovering problems with the workflow. 

So its not surprising that many of our UCD projects this year have mostly been designing large web applications. These are the projects where the interface design just cannot be tested enough, so this is where we do loads of testing, of every sort.

An obvious one for 2011 is tablets and mobile. We have the Tobii eye tracking technology to test tablets and mobile apps, and clients are now starting to ask for it. What’s interesting about tablet technology is that standards are still developing, and users expectations are sometimes beyond the current reality. 

Another area requested this year is user-centred design training for teams in medium-sized and large companies. Doing this in-house is great fun and can be specifically targeted to the project. We also have provided training in social networking for marketing. 

So its been an interesting and fun year for us.

Have a great Christmas break and see you in the new year! 

Tobii are doing some cool stuff! Check it out. Particularly Leo's laugh - she's from support ;)

It was sad news that Steve Jobs lost his fight with Pancreatic Cancer last week. We wanted to take this opportunity to reflect on some of the things that Jobs (and Apple) brought to usability and customer experience.

It is widely agreed that Steve Jobs designed “insanely great products”, many of which have revolutionised the way in which we interact with technology and create and consume digital content today. Many of these products could be described as ‘disruptive technologies’ i.e. technologies that were game changers disrupting existing markets. For example, the popularisation of the ipod and iTunes changing how we consume music, the Apple LaserWriter printer combined with true type fonts and PageMaker software (made by Aldus, now Adobe) started desktop publishing, making the mobile web accessible and sticky through it’s applications for the masses through the iphone etc. Apple products may not have always been the first of their kind but they were usually the first of their kind that were both easy to use and widely purchased. Whilst there were many engineers involved in the creation and design of Apple products, there can be no debate that Steve Jobs was an influential force in Apple's successes.

In 1984 Jobs unveiled the Macintosh computer to a very excited audience which fast became the first commercially successful small computer with a graphical user interface and a mouse.

Steve Jobs introduces the Mac 1984

The Macintosh computer through its use of a graphical user interface and a mouse provided people with a mental model to understand how to use it through it’s metaphor of a desktop, folders and icons etc. It should be acknowledged that this new interface within the early Apple products revolutionised the usability of computers exponentially. Whilst many other engineers were solely focused on the technology, Jobs understood the value of considering the people you are designing technology for.This sentiment can be seen by the promotional material for The Lisa, the predecessor of the Macintosh, as “the personal computer that works the way you do”. From the iPad, to the iPhone, to the iPod, Jobs and Apple continuously delivered products that were easy to use and easy to love.

Jobs also understood the value of creating exceptional customer experiences. He infused Apple with a culture that valued design and cared about the details. According to Jobs: Design is not just what it looks like and feels like. Design is how it works.

This consideration of how things worked went beyond the design of products. Not only did Apple focus on the design of exceptional products, they also considered every part of the purchasing process, both before and after you open the beautifully designed box. Apple's retail service has been meticulously considered and designed across the entire customer life-cycle. Got a problem with your Apple device? Make an appointment with the Genius bar where an Apple Genius will assist you. Need some help with how to use your new Macs’ inbuilt movie making software? Book in for some training. (NB The inclusion of software with computers too was an early Apple innovation). If you ring technical support and give them your serial number they will know your name and when your warranty expires. The personal service you get when you go to an Apple store and talk to a customer representative about your needs gives you confidence that you are investing in the right solution for you. It’s this understanding on the entire customer experience, the focus on ‘details’ and ‘how things work’ that make customers feel valued and create customer advocacy. Apple makes buying their easy to use products easy.

This holistic approach can also be seen by Apples’ investment and evolution of iTunes and it’s associated services and sister products. Through iTunes, Apple was able to develop a content and product eco-system (a Product-Service-System) combining their products with services, creating a lucrative business model which others are trying to emulate. Through a tightly coupled integration between multiple hardware devices, media storage, indexing, acquisition and consumption, Apple has all bases covered. With iTunes and it’s associated devices one can discover, purchase, download and then consume content in minutes, on one device without leaving your armchair. The fact that you can even purchase and consume media through iTunes on your PC is testimony to the fact that they think beyond just their products.

This meticulous attention to detail, a focus on how thing work, the requirement for well designed products, and the intentional design of customer interactions across multiple touch-points all contribute to superior customer experiences and unprecedented customer advocacy for Apple. Further, we can all thank Steve Jobs for popularising the idea amongst his business contemporaries that better design makes both sense and cents (well more like dollars)!

Steve Jobs was a true innovator, a brilliant designer who really understood what people need and a remarkable entrepreneur. Thank you Steve, you will be missed.

Jax Wechsler, October, 2011.

While looking at the latest version of Amazon.com due for release shortly, it has left me wondering; given the fast growing prevalence of tablets, plus the huge take-up of Smartphones in Australia, is this changing the way customers search websites and expect information to be presented online?  In particular, are there demographic influences at hand too?

Putting this into a perspective for Online Financial Services I would consider investigating the following:

·         Is the PC/Laptop accessed website the default method of access for most of your clients? 

·         If not, what other formats are growing in popularity? 

·         What rate of growth are these channels experiencing in your business?  Should this in turn affect the Online development path for your business?

·         Is there a clear age range associated with each of these access methods?

·         Why are clients accessing these alternative methods? 

·         Where are they accessing these versions?  Does this present security concerns in terms of customer account data?

·         How are clients accessing/searching the information presented on your site; mouse, scrolling, screen touch/tap or using a navigation structure? Is this dependent upon the age of your customers?

·         Given the reduced space within a Smartphone or Tablet format, what is the best way to present their condensed account information?  For example it may be more space effective to present home page level combined account data as a pie chart, where customers could click segments to see each sector/account view.  Would this kind of presentation of data be received well by a younger client audience?  However how would this sit with an older demographic?    

By looking at these questions (in particular your clients’ website access methods and demographic mix) this will help your business recognise the changing longer term development requirements relating to unique demographic needs; mainly access methods and client data presentation. 

 We have a couple of eye tracking clients speaking at this exciting conference!

By Julienne Broad, 17 August 2011.

Invariably as a website redesign project happens, often businesses will need to consider the suitability of their existing Content Management System (CMS) to support and deliver the requirements and vision of the new website.

In a previous work-life I was an Online Marketing Manager and experienced this first-hand.  The best result is using a CMS that meets your company administration and functionality requirements – ensuring an easily updated and growing website.  The worst result is releasing the new website, with a new workflow of content owners and schedules, only to be faced with the challenges of a complex and inflexible CMS, deterring staff use and ultimately affecting the success of your website.

So before you start planning and building you need to ask yourselves:

Do we need to keep, upgrade or replace our CMS as part of this web redesign project?

Ask yourselves the following:

History and system support

To help you ascertain the history of the service and what support it provides your business

1.     How long has the CMS been used in the business?

2.     Who originally chose and recommended the CMS - the people who use the CMS or another area of your business?

3.     Do you automatically receive version updates of the CMS or are these an additional cost?  How easy are these to implement?

4.     What kind of customer support and technical assistance does your CMS provide?

Using the system

 To evaluate its ease of use for your content owners

        5.  How easy is it for someone new to learn the CMS?

6.     Is it easy for the content owners to update and manage content through the system? Can they just enter plain text or do they have to code/enter html, etc?

7.     If it is not easy to enter and manage content, is this impacting your business adoption of content updating throughout the business areas?

8.     How easy it is via the CMS to: add new pages, remove pages, do a "change all" text across the site, and add new sections of the site?  Can these changes be managed by Marketing/Online or do you need Technologies assistance?

9.     How easy is it to tag the pages within the CMS for Search Engine Optimisation?

Functionality of CMS

 To evaluate the suitability of the CMS for your business and website objectives

10.     Can the CMS handle emerging technologies and media requirements?  i.e. embedded multi-media windows

11.     Can the CMS release updated content at a future time and date - or does it just publish live?

12.     Can the CMS manage archiving previous versions of content on the site?  Can this be also managed by a different system?

13.     Does the CMS support specialist requirements for different delivery formats; PC, mobile, tablet?

14.  Does the CMS handle transactional functionality well? If not, what are the key issues?

15.  How will the CMS work with a new site redesign? Does it have the ability to manage all the functional and design requirements you have?

The answers to these questions will provide you with an initial critique of your current CMS and its suitability to the new website redesign and technical requirements.

With these questions make sure you are asking the areas of the business who use the CMS – the content owners, Online Marketing Managers and Marketing Coordinators who use the service everyday.

Next Steps

If there are real issues identified look at how these can be addressed. Can a CMS version upgrade assist? Do the issues relate to a loss of knowledge through staff turnover (something that training can address), or do we have the funding and resourcing available to add a new CMS implementation to the website redesign project.

The best time to consider implementation of the new CMS is during a website redesign. Discuss this with the project team and Senior Stakeholders to highlight this consideration early on in your project planning.

If you see real issues with your current CMS don’t be afraid to question and look at replacing your service. It will serve your business much better in the long run! A better CMS experience will result in a stronger online customer experience.

Having recently spent quite a bit of time reviewing websites of many independent private schools I was struck by the commonality of the messages they were espousing. There is much talk about catering to the individual, encouraging them to be the best (or at least reach their potential) and to have a life outside of the classroom. Yes, all very nice, but the language used is so formal that it lends itself to being simply adopted as a slogan that is repeated again and again. In effect it becomes more salespeak and less of a philosophy. So it was a very pleasant and more engaging experience when I stumbled across a prestigious English private school site that broke the mould. I've included below a screen shot of their admissions page which includes a small description of the school and their philosophy. I could actually imagine these words coming out of someone's mouth, a key factor in lending itself greater credibility and authenticity. It reminds me that when you're writing for the web don't be afraid to write things from the heart, it can make all the difference.

By Esse Spadavecchia on 3 August 2011

Recently at Objective Digital we have had a plethora of financial clients asking for usability testing with our eye-tracking facilities as well as larger focus-groups to ascertain people’s views on finances and their attitudes towards banking online.

This is a good thing. Actually it’s a great thing. For one, as a banking customer of a couple of our client’ banks, I’m overjoyed that they’re interested in hearing what their end-users have to say... and what’s more they’re really listening. Secondly, it’s good for business. And we do love that really. But how did this all come about?

How did we instil the need for usability testing?

There was a long period of time when the words Usability Testing and User Centred Design were just hot jargon being played with in the industry… I don’t think our clients really knew how they would make improvements following usability testing sessions or include the outcomes in the process.

So what changed?

Well for one, the User Experience (UX) industry started evolving to a point where their deliverables weren’t just a 98-page Word document with detailed findings that no one would ever read…

Yep, we started wizening up to the fact that nobody likes to read lengthy documents, whether they are online or printed and bound. Even if you did put your super snazzy company logo in the top left corner with scented spray.

Now there was GOLD in those documents. Literally thousands of magic pointers that, if followed to the nose, would make your site grow a cape and take off faster than Superman... but who has time to read? Let alone work out a strategy for what gets done first and who should be responsible for it all.

And then what?

Deliverables became PowerPoint presentations and findings became bullet points of highlights. Graphs and tables with summaries became the norm. Edited short video clips of usability testing and eye-tracking accompanied every document.

Suddenly our clients were taking notice. One of our clients went on to say that our report was the ‘Best report I’ve ever read, tells the story in a way that makes absolute sense. We can’t wait to do this for all our products’.

 This was the hot tamale they’ been looking for. This was actionable. This they could deal with and still get home in time to watch Master Chef. Winner.

As an example we delivered a 28-page preso to one of our clients recently, most of which consisted of links to snippets of users talking about what they liked and what they didn’t like. The chief programme guy got it immediately. He stood up, shook our hand and said “Guys, I know what we need to do. It’s so obvious”. I know we keep saying it, but yes, the users’ voice speaks a million words… Even more so that an image, even if it’s of Paris Hilton.

So we started fashioning all our final presentations as such.

• Short overviews, executive summaries.
• Stats on what people liked, where they failed, what they wanted.
•  All accompanied by video and eye-tacking data, as well as heatmaps and gazeplots.
• Then end it off with an actionable list of what needs to be done, and prioritise it by user-need vs. business-need vs. technical complexity and you have a winner.
• With a cherry on top.

So now our clients keep coming back to us. Not only because we’re lovely and generally very good-looking, but also because we actually deliver something they can act on. The guy at the top gets it because he can fashion a business case from it. The manager of the programme gets it because he can work it into his project timeline and of course the designer and propeller-heads get it because it’s actionable and they can action it. Simple.

So now our clients know usability testing is good. Not only because they are hearing the voice of their customers, but also because now they know what to do about it. Brilliant.

At the end of the day it’s the deliverables that are evolving… we forget in the UX industry that our clients have other stuff to read too (no! really?). And we are very, very clever, but it means nothing if people can’t do something with it.

It’s like getting a stunning villa in France vacuum packed and bubble wrapped with limited instructions (in French) as to how to get it up and install the plumbing… it’s bound to be abandoned.

And you probably won’t buy a villa from the same people again.

So go forth grasshopper, and create shorter presentations and deliverables with real impact!

As we are booming along at Objective Digital, we need more and more tools for our design projects. One wireframing tool doesn’t cut it – we need them all. Nirish recently wrote about Balsamiq, a great tool for discussing concepts and getting ideas and designs out fast. There is no distraction from shading, pixels and fonts.

The latest project for my colleague Jon Duhig and I couldn’t be more different. A complex online business application, it’s taken many months, with several serious iterations of design where we have taken our work out to users. Our tool of choice for this project was Omnigraffle, for several reasons.

Firstly, the users: it’s always difficult for users to make the leap from the legacy system to the new one, especially when you just have paper.  With Omnigraffle, the designs look more realistic than Balsamiq, making it easier for users to understand the concepts. 

Secondly, the build: We did have a style guide, but with 150 pages of wireframes, the guide doesn’t cover nearly as much as it could. And even with some graphic design input, it won’t cover enough. Specifying and illustrating as much of the design as possible in Omnigraffle allows the software engineer to do what they are good at, building stuff.

Thirdly, the awesome ability of Omnigraffle to re-use objects. Managing large wireframe files of 150 pages can be difficult, especially when you have several iterations of design. It's a bit like writing code, there are different ways of doing it but you need to be neat to be efficient. Shared layers in Omnigraffle are one way of being efficient. You can edit a shared layer and it edits all instances of the layer. However that layer must be in exactly the same location on every page.

The problem begins when you are representing rich interactions, and need to move the object move up or down in the wire. You can't use the shared layer as it would change all instances of it. 

My discovery of Linkback in Omnigraffle was somewhat accidentaI, but now I wouldn’t be without it. I was working with data tables with expanding rows, and other interaction, so I created the table as an object, and put the interactions on top. To create an object for re-use, you select the content you want as an object, and Copy as PDF from the Edit menu. Then paste the object into your document normally, as many times as you wish.

When you come to edit it, you double click the object and it opens another instance of Omnigraffle. You make your edits and click save (not Save as). This is important – there is no need to create a separate Linkback file.

To reiterate the procedure to re-use objects in Omnigraffle:

1. Select the object and from the File menu, select Copy as PDF.
2. Paste the object into the document normally and delete the original.
3. To edit the object, double click on it. The object opens in a new instance of Omnigraffle. 
4. Make your edits and select File > Save and close the window.

Easy, and so efficient that I hardly ever use shared layers anymore. We were able to handle a number of significant iterations thanks to the re-use of objects in Omnigraffle.

Oh, and we also used Axure to build a prototype by simply exporting the wireframes as .png files and linking them up in Axure. So that makes a trifecta of tools we use for wireframing in Objective Digital. There will probably be a blog about Axure here soon.