Keep The Noise Down

Sketching User Interfaces

So often criticised for its crimes against usability, Visio has been a loyal servant to me during the industrial years of the wireframe factory.  Yet this tool of choice for the past decade is now at risk of being retired as the shift from Web to Surface paradigm sees my toolkit evolve. With the rich interactions of natural user interfaces the good ole fashioned pencil and paper is back in vogue.  Sketching is the visualization tool do jour in this interaction paradigm.   

Yet pencil & paper has its challenges for the artistically challenged.  Years of keyboard abuse has seen my handwriting suffer and I never progressed beyond disproportioned stick men.  My hand drawn sketches are no Picasso so I need to discard those napkin sketches and find myself a tool that enables me to quickly scamp up the designs whilst keeping that rawness of a work-in-progress.

I am not advocating that we jump in to a design package and produce hi-fidelity designs but that we use simple tools to quickly and efficiently mock up hand-drawn line sketches such as this (below)

  

One of our User Experience Architects used Omnigraffle to create these digital sketches (above) for our Microsoft Surface Enterprise Search Application, using a stencil of shapes built from illustrations created by our design team.  I have built my own sketching toolkit from collections of stencils such as Konigi and Graffeltopia – great sources of free stencils for creating user interface specifications.

But are these complex diagramming applications the most efficient tools for sketching designs?  In my pursuit of the killer tool for visualizing the behaviour of an application I posted a tweet for designers to come forth with their digital sketch tool of choice. I received responses from the usual suspects in the #Surface community -  @joshblake, @stevedawson and @lhamilton.  My question was timely as these chaps were individually considering developing a UI prototyping tool for NUI’s.

Joshua (@joshblake) posed a question back to me - what features would I want from a UI prototyping tool?

I thought I’d open Joshua’s question up to a wider audience... what would you want from a digital sketch tool for the early stages of UI design? so please step forward and suggest a feature wishlist so we can see what existing UI prototyping tools (e.g. Denim, Balsamiq etc) meet our sketching needs and if they fall short then we can possibly see what these clever chaps can do about it.

Surface Card Sorting

Before the festive holiday kicked in I intended to design a Microsoft Surface Card Sorting application but time ran out without me getting much further than a brief conversation over a cuppa with some user experience colleagues and a few very rough and barely legible sketches of the application interface. To make sure I don’t forget any initial thinking here’s some wee thoughts on the surface card sorting software.   Please add your comments or thoughts to these rambles to help shape the software. 

Card sorting is an effective exercise for grouping information on a web site. Topics are written on index cards and the participants then organise the index cards in to logical groupings. It offers a valuable insight of the user’s mental models, revealing how they organize information and think the site should be structured. There are two types of card sort - open and closed sort.  In an open card sort a users arranges the content in to logical groupings and then gives the stack a category label.  In a closed cart sort the user sorts the content in to pre-defined categories.  It is common to follow an open card sort with a closed cart sort.  Once the categories have been defined a closed card sort allows us to see how users sort content in to these groups.  If you want to know more about Card Sorting then for a detailed description read Card sorting: a definitive guide

Card sorting sessions work well enough for me without the need for a computer-based card sorting program.  When the target audience is geographically wide spread then card sorting software can be used to conduct remote card sorts.  So why am I suggesting more software when there are already a number of card sorting programs and there hasn’t been great adoption of these existing ones?

Card sorting exercises are extremely effective but are costly because they are time consuming to set up, administer and analyse the data. Card sorting software reduces costs but so far the actual user experience is considerably less than that of a hands-on physical card sort.  This is where a Surface application comes in.  It offers the cost saving without compromising the end user experience.

Before running a card sorting exercise you recruit participants and create a content inventory.  These activities happen irrespective of whether it’s a real or virtual card sort. Next, you prepare the cards for the session.  There would be minimal cost savings in the preparation although the software does make writing the cards easier. With card sorting software the virtual index cards are generated from the content inventory doc. This also ensures that all the cards are neat and legible.   Alternatively this could be done using perforated index cards and mail merge, but not having to print out the cards is a time saver, not to mention more environmentally sound.

The real cost saving Card Sorting software has over hands-on real card sorting exercises is in the data analysis.  A computer program records the data so it can be analyzed to provide meaningful results.  It is this data analysis where card sorting programs come in to their own and save considerable time and money.  A physical card sorting exercise can be carried out and then the data entered in to statistical software for analysis, but this data inputting is time consuming.

My concern with existing software is that it's not easy to use and this distracts the users focus away from the core task of organising the content.  A Microsoft Surface Card Sorting application offers an engaging and immersive way for participants to interact and manipulate digital content through touch and natural gestures.  The actual physical exercise of sorting index cards in to logical groupings work well for me and Microsoft Surface offers a similar digital experience to physical card sorting.

For an overview of how the Surface application might work, consider the following scenario...

Louise, a User Experience Consultant, places her admin card on the surface tabletop to unlock the card sorting program.  The admin card holds basic information such as her name and email address. Several options to run the program in admin or user mode are displayed around the admin card. Louise taps to select the user mode.

The first participant, Simon, arrives and Louise passes him his identification badge.  This identifies his name, email address and the project he’ll be doing the card sorting exercise for.  Louise has set up multiple projects for card sorting exercises but has assigned one project to Simon.  Louise places her card back on the table and selects the Open Card Sort option. A set of virtual index cards are scattered on the desktop.  Each card includes a topic.  As the facilitator, Louise gives Simon a brief introduction to card sorting and demonstrates how to group the content in to stacks by sifting through the index cards and moving them in to high level groups.  Louise places her admin card back on the table and taps the reset option to re-scatter the index cards so Simon can start the exercise. Louise also enables record audio, then lifts her card up and leaves Simon to organize the cards.  The participant is encouraged to think aloud.  The sound recorder captures their thinking and gives us an insight in their rationale behind the groupings. 

Simon sits down at the high-resolution tabletop display and begins to group the content.  The interactions are natural and intuitive.  Simon drags the card around the table tops.  He can rotate them, flip them and arrange them in to stacks.  He is unsure about one of the topic labels so flips the card over by tapping the reverse arrow in the cards top right corner.  Simon writes a note using a tablet-style pen and then flips the card back over. An icon appears on the virtual card to confirm that a note is attached to this card.

On the table is a virtual stack of blank category cards. Simon drags one of these over to a stack he has created and gives the card a category label. Once the stack has a label Simon can zoom in so that this stack takes over the tabletop display and removes any surface clutter.  Simon moves some of the card around in this stack and then pans back out to a view of all the stacks.  Simon gets a little confused as to whether it matters how many stacks he creates.  Simon taps the Help card and this tells him all he needs to know.  He closes this card and continues with the exercise.  Simon creates the stacks and then clicks done which sends a message over to Louise who is working in the room outside the usability lab.  Louise gets the message and walks over to the table to wrap things up. 

The next participant is ready to go straight away as a new session starts without any need to tidy up the index cards. After the day’s sessions are complete Louise goes to the admin interface to analyse the data.  She decides not to include some of the sessions in the data analysis.  Louise chooses not to include two test sessions, and also excludes Frank who on further analysis was not a good match for their personas. Louise first eyeballs the raw data, then views the matrix of how often content was paired together. Finally, Louise views the dendogram.  This is when the magic happens and the clustering algorithms set to work.  This is the bit that is going to involve all the head scratching – developing the program to create the dendogram.  We’re currently looking at different visual ways to present the data in a meaningful way, so any ideas please add your comments.

That’s where my rambles end for the time being, although I’ll follow up this post with some sketches and more detailed information on the interface and interactions as we starting working this up from rambles in to hopefully a usable cost-saving card sort application.

The face must fit

From user research and other customer insight I create the primary persona, Siobhan, a fictional portrait of a customer for a high street retailer I am currently working with.  As she slowly comes to life I create a vivid image of this fictional character .

It isn't easy sourcing the right photo to reflect the age, gender, and other personal traits that describe this fictional character. Persona's must be believable to be accepted and photos that don't fit can be the greatest barrier to a persona's adoption.  All the good work put in to creating a persona can be undone if the photo is not an accurate image of this fictional character. Even the expression must be believable.

I have several golden rules when it comes to finding a suitable photo.  Never use a photo of a family, friend or anyone you know as this will create a barrier to adopting the persona. Never reuse a photo for another persona for the same reason.

So where do I get my photos from?

Flickr, Google Image Search, professional image libraries and dating sites.  I might step slightly outside copyright laws by using photos from these sources without permission from the creator but this minor infringement is for the good of user centric design (ahem...)

I would like to think that someone has used my portrait as the face of their persona and that my photo has helped contribute towards the development of an optimised user interface.

Some image libraries offer faceted browsing.  This is also common with dating sites which help lonely soles to find their perfect partner.  But whilst this helps refine my search they still fall somewhat short of helping me to find that perfect photo match. Getty Images allows me to refine by gender, ethnicity, age etc But I am unable to refine by personal or physical traits. The limitation is not with the technologies but the amount of metadata associated with each photo.

Photo composite software is possibly the way forward.  Instead of searching image libraries to find a match against specific traits, photo composite software allows me to select facial features and then enhance the photo by changing hair colouring, adding facial markings, age progression and skin colouring etc Facial composite software have an enormous database of facial features.  But the software I have used only creates near-photo quality images.  The fact that they are not photo quality hinders adoption. I can't help but feel that every image I create looks like a candidate for Crime Watch. The good news is that photo composite software avoids any privacy issues so if anyone can recommend photo realistic photo composite software then please do.

I always use photo realistic images and where possible use full-length and not headshots, as they convey so much more additional information. The clothes, posture and expression tell a lot about someone such as their career, attitude or socioeconomic status.

The drawback of trawling non-professional photos is that quality can be a major issue.  I used to create persona's in PowerPoint or Illustrator and deliver a single-page A4 printout. Lots of words with a small passport-sized photo.

I don't create persona's simply because the client has paid for this.  I create persona's because they sit at the heart of every design decision. So I need to do everything possible to get these persona's accepted. Poor image quality limits how I can use the photo to ensure adoption.  There is nothing more frustrating than to source the perfect image only to be limited by a 50 x 50 pixel image which isn't suitable for print.

Once a persona is created there are many ways to improve adoption and bring the persona's to life. I’ll cover different ways to deliver persona's (persona mood boards, masks, cardboard cut-outs, role playing etc) in a future post. But if the photograph doesn't fit then persona adoption will be much harder.

If you have any recommendations of image libraries, sites or software for finding/ creating a matching photo please let me know.  

 

 

P.S. Conchango are recruiting! If any of my ramblings interest you and you are passionate about User Experience then we'd like to hear from you.  Why not contact me and let's have a chat?

 

 

Listening to: Harps Old Master by Phelan Sheppard

Getting to know your audience

Kelly, 28, is a Senior Account Manager for a PR Consultancy based in Central London. She has a two-bedroom apartment in St Johns Wood, moments from Lord's Cricket Ground. She is “too busy enjoying life” to settle down but when it comes to a good time she .... 

 
OK, before the tech chaps get a bit hot under the collar I must point out that Kelly is not a “real” person. Kelly is a fictional portrait of a typical user of web site X, created from a solid understanding of users attitudes, behaviours and motivations.  Kelly is an example of a believable 'persona', a powerful tool for creating user-centric designs.

 
I am often quizzed how I gather the customer insight to produce accurate personas.  The answer is “from whatever means I can”.  Personas are based on sound user research – talking to actual users might be the most effective method, but there's a host of other research methods which will surface valuable data on user attitudes and behaviours. As I am currently in the middle of gathering user information for a project here are some of the ways I intend to analyse their current and potential users:-
 

• Interview real users, one-to-one or using focus groups. Nothing beats talking to actual users
• Interview people within the organisation. This includes both office staff and store staff (online and bricks & mortar store).
• Talk to all other stakeholders and gather their opinions
• Review all available marketing research data
• Talk to friends and family to see if they are current or potential users. Sometimes actual users are closer than you think.
• Trends analysis. Use resources such as Forrester to understand specific consumer trends.
• Investigate site analytics. Provides data about site visitors and their online behaviour
• Analyse search data
• Gather data from customer satisfaction survey & site feedback forms
• Study external audience reports (if available).  For example, Quantcast
• Call-centre listening and/ or call transcripts
• Emails and letters from customers
• Read relevant groups and discussion boards on social networking sites such as Facebook and MySpace
• Directly observe users in the field
• Read blogs to see what others are saying about the clients brand

 

 

A fellow User Experience Consultant told me a few years back about the time she had to research the target audience for a well-known high street sex shop.  Before walking in to the shop to kick off some observational study she sat in a cafe opposite to get her morning caffeine fix.  A chance rendezvous with a double espresso was rewarding and gave her an unexpected and valuable insight to the stores customers.  Firstly, a large numbers of customers were visiting this cafe after purchasing from the sex shop.  By sitting there she was able to observe these customers and listen-in on their conversations.  Secondly, she noticed that a large number of potential customers were stalling from entering the sex shop.  A pattern emerged and she conducted field interviews with these customers who did not have the courage to enter.  These interviews proved very revealing.

 

The lesson here is use whatever sources you have access to, to get inside the head of the user.  Whatever the budget or time constraints there are ways and means to get to know your audience.  If you have any suggestions of other ways to gather user data then please share by adding your comments.

 

P.S. Conchango are recruiting! If any of my ramblings interest you and you are passionate about User Experience the  we'd like to hear from you.  Why not contact me and let's have a chat?

 

 

Listening to: In the Aeroplane over the Sea by Neutral Milk Hotel

C’mon guys – it’s time to look elsewhere

According to a recent report men tend to fixate on areas of private anatomy. And I’m afraid it doesn’t end there.  We male crotch watchers even stare at the crotches of animals!

 

Eye Tracking measures eye movements and reveals patterns by determining where users are looking.  The Poynter Institute sum it nice and simply by describing eye tracking as getting inside of a person's head and watching what they see.

 

This technique has long been used to study visual attention and is used in web usability design to identify what regions of a web page a user focuses on.  Eye Tracking reveals where users start browsing, where users expect to find certain things, how different treatments impacts their attention, what atracts the eye as well as what repels the eye etc

 
In a recent interview Coyne presents some interesting findings from her research with Jakob Nielsen on the Usability of News sites:-

‘Although both men and women look at the image of George Brett when directed to find out information about his sport and position, men tend to focus on private anatomy as well as the face. For the women, the face is the only place they viewed.

Coyne adds that this difference doesn’t just occur with images of people. Men tend to fixate more on areas of private anatomy on animals as well, as evidenced when users were directed to browse the American Kennel Club site.’

 

Gaze Mapping is one technique for presenting the results from eye tracking by superimposing the results from the eye tracking session over the video or image.  This technique has immediate impact as it highlights the region(s) of focus.  The results clearly implicate men as crotch watchers.

 

A criticism of Eye Tracking is that users gaze can be unpredictable and therefore the results are hard to analyse.  Individuals can claim they have a lazy eye or their eye was just resting at what conveniently happened to be a crotch but surely it’s more than coincidence that such a high percentage of men rest their eyes in the same place! 

 

I recommend reading the full article – Eyetracking points the way to effective news article design

 

In the meantime I’ll make a conscious effort to focus above the waistline at all times.