All posts in usability

9 Posts

Out of the box UX

Here’s a little known fact about me: I never studied design or multimedia or service design way back when I was a student at university in the noughties. I knew what I wanted to do and be part of (even back then!) and I wanted to learn about design, information architecture (I didn’t call it that back then, I was just fascinated in information delivery and consumption), product design, digital (or multimedia as we called it back before the interweb 1.0 proper) and the users interface with ‘stuff’ because I was always a righter-brainer & rubbish at the good stuff. I was working part-time at a CBT (computer based training) company helping put together training CDRoms (remember them?) for Helicopter Pilots and I was really unimpressed with how bad they were to use (the CBT materials, not the helicopters!) and how bad the graphics were – In todays world we’d call that ‘poor experience’, and so I got myself on the ‘Packaging Design’ course at Bournemouth University. PACKAGING? ARE YOU MENTAL?! A lot of my mates (and colleagues at the CBT company!) thought I was insane doing a degree in Packaging, they thought I’d decided I wanted to design milk-cartons and not carry on doing what I was doing… but here’s the thing, I was doing what I always wanted to do… think about the component parts of all packaging;

  1. Form
  2. Function
  3. Instruction / Product Information
  4. Design / Brand
  5. Fast moving, evolving consumer goods

Sound familiar? Not so skeptical now are you!

It was literally the only course I could find that would teach me everything I wanted to know about design. About the esthetic form of something, the information architecture of something, the design of something that needs to stand out in a crowded aisle, the typographic quality of something (print anybody?), the brand of something, the perishability, materials, mass appeal, recognition, touch… you name it and in those 3 years I learnt the lot. I just did it using the paradigm of cardboard, tetra-pack and plastic. We even covered sales & marketing as part of the course. It was great.

It’s also something I continuously refer too today because it’s even more relevant in towards world. All our UX is just packaged design.

Packaging on a supermarket shelf has less than three seconds to grab the attention of a consumer.

Those three seconds are exceedingly important when you consider that more than 70% of purchasing decisions are made at the shelf. Add to this the fact that supermarkets can contain on average 40,000 packs to choose from, then that pack has got to work hard. It’s the same with websites, apps, digital outdoors etc.

Packaging’s role is threefold:

  1. To sell the product
  2. To protect the content
  3. To facilitate the use of the contents

Ditto, the role of digital is the same. The component parts are the same too;

Graphics

Packaging graphics have more to do than simply look pretty. They must work to cut through the white noise that is the crowded supermarket shelf, and attract a potential buyer.

Shape

Packaging comes in all shapes and sizes. The structure of a pack can serve to create shelf standout and sell the product, to prolong the life of the product and to facilitate the use of the product. There’s also a lot we can learn from packaging that ‘just is’. It’s practical & boring in some cases, but absolutely necessary to transport the precious cargo to the end user.

Sustainability

The packaging industry has been vilified over the years, not least on the subject of plastic bags. Yet, brands have always been looking for ways to reduce materials and maximise packaging for both environmental and financial reasons. Web optimisation in UX is the same.

Materials

Traditionally certain materials have been associated with certain markets. But as markets change and consumer attitudes adjust it is unsurprising that material choice has also changed in the packaging sector accordingly. Same in digital, only our material is now ‘content’ and ‘conversations’ and bits of media.

Regulations

The packaging industry spans many markets and so is regulated by many different forms of legislation and voluntary codes. More parallels – I work a lot in Financial Services so I know this all too well.

Golden Rules

There are 8 golden rules of packaging design that we were taught at uni too that I stilI also apply in UX:

  1. Conduct a thorough audit of all competitors in your market before you start, and make sure you understand their respective positionings and attributes. Then create your own.
  2. Look at what is happening in other markets, e.g. if you are just considering the UK or Europe, what is happening in the US or Far East that might give you a point of difference?
  3. Put measures in place at the start so you can track and learn as you go, e.g. measure awareness of and attitude to your packaging now and in the future. A good research agency will tell you how to do this.
  4. Be different and ensure your pack has its own visual equity and has a strong personality and attitude.
  5. Make sure your pack works at all stages of its life cycle, from leaving the factory to ending up in the user’s hands.
  6. Mock up how your pack would look alongside your competition. Test it in store and make sure it really does leap out at point of purchase.
  7. Design with tomorrow in mind. Create a pack that is in keeping with current market trends and future trends.
  8. Consider doing some pre-market testing to make sure your pack will find a willing audience. But be careful how you test it as consumers never quite know what they are looking for until someone shows them something new. Henry Ford once said: ‘If I’d listened to what people wanted I’d have built a faster horse!’

Out of the box UX

Everybody in the field of UX should be digesting and using content and background materials from the field of Packaging Design. It’s a rich seam of knowledge that can be directly applied to what we do. Take a website for example, it’s just in many cases a fast-moving-consumer-good and it comes with all of the same elements. Now that interfaces are merging with the real world it’s more relevant than ever.

2013 is the year where I go right back to my roots and start to bring packaging to the forefront of the area of UX that I work with. I’m going to start taking packaging examples to client meetings & as part of all my Discover, Define, Design phases. It’s actually one of the single biggest areas of parallel comparative research available to us so when you start a new brief this year, make an effort to go down to the supermarket & decide what kind of package your making for your digital content.

Resources

How excited am I?!

I’m not late to this party. I saw this when it first landed last month. What I have been doing is studying it… and quite intently… because from what I’m seeing ‘IF’ this is the experience they’re going to go live with and it’s not just a really polished up demo video (we’ve all done it to sell something, it’s what Computer Games have been doing with their advertising for decades; “Not actual game footage”) then this could be potentially game changing. Not just for social networks, but for the way we design our websites.

So what about it then? It’s an important piece of design because it’s gone balls out to be awesome. Which means no compromises. It means giving people the time and the bandwidth to do something amazing. Working within those variables inevitably means great (no, AMAZING) work emerges. All too often as UX practitioners we’re given the brief, but we’re not given the time or budgets to do the brief justice. A deadline dictates the output. The budget dictates the deadline. The competition / competitors dictate the deadline. What we end up with is work that quite often we are not happy with and that shows in the output. I believe that.

So just do what I’ve done for a while now and go over this video again and again and again and absorb the quality of the interaction design. The dedication to the experience design. The attitude of the team (which this oozes by the way – ATTITUDE – the attitude to want to produce the greatest interaction experience on the internet… it smells of hunger and want, doesn’t it?!) to win.

In four words: “I already love it“.

Experience CVs – An approach

You know the score. You’ve been working in IA / UX for a while. You’ve got a pretty hefty CV and it’s boring. I’ve been having a play trying to find different ways of showing my experience. A lot of projects I’m working on at the moment involve Dashboard Design and information design. So I looked there for some inspiration. It’s just a rough, so don’t judge it on appearance, but see what you think about the approach:

10 really neat experience principals

Found these little beauties nestled in a Seminar Summary from 2002 no less… Probably baffled the hell out people 10 years ago (say that out loud – I said 10 years ago, they’re a decade old – Scary!) but I would say they actually hold a lot of truth and value in todays digital era:

They’re from the book The Ten Demandments for turning the most demanding consumers into the most delighted customers. Rules to Live By in the Age of the Demanding Customer by Kelly Mooney.

  1. Let me do things
    • As I move through the experience, let me do things that change the resulting display in a way that feels as though it has been designed for me personally, in my context. Move beyond mere viewing.
  2. Let me win
    • Reward me every time I accomplish something. Make the experience transparent so that the structure, operation and purpose of the experience is comprehensible and valued.
  3. Push me
    • Help me reveal my potential; don’t let me “get by.” Help me visualize what I want to accomplish, so I can plan what I want to do next.
  4. Help me learn
    • Combine doing with understanding. Let us learn from each other…and from the web of connection.
  5. Sense and respond
    • Let me customize while you dynamically personalize for me. Make me feel like the artifact is alive and aware of my needs. Think of responsiveness by time, format, form and structure and quality of response.
  6. Orienteer
    • Give me a journey that I can take and tasks that I can do. Don’t steer, just give me a map to keep me located. Show me what and who’s interested so I can direct my participation effectively.
  7. Outfit me
    • Deliver new capabilities and make it easy for this to become a part of my life while skilling me.
  8. Connect me
    • Help me make connections with the subject matter, or across destinations, or with other people.
  9. Immerse me
    • Plunge me into the experience in a way that makes me even less (or even un-) aware of the place or setting that I’ve come from.
  10. Make waves
    • Engage me in co-discovery and co-creation and transform my life, my work, my business.

Original source: http://www.humancentereddesign.org/webconference/jf_se_outline.php

Gonzo UX

Work that researches well is predicted on what has gone before. Anything different, or out of the ordinary, will test badly, for the very reason that it is different – Bill Bembach

The majority of my work is as it should be… Neat, proper, rule-abiding and by the New Rider book. Packed full of user-centred design and interaction principals. The user at the heart of the story just happens to be me. Occasionally I need to indulge myself and that’s when my work gets all a bit ‘Gonzo’.

Maybe I’m wrong, but is it time for us to embrace ‘Gonzo UX’ as a reality of our industry and recognise it for right or wrong as a reality, because as a tool for the current generation of UXers’ who go to work everyday & follow the ‘rules’ but don’t always necessarily believe those rules it’s part of our lives and so many of us with a slight right-brain skew do it. I’m Gonzo and proud.

We pay lip-service to the methods of UX for the sake of our clients and then just do our own thing alot of the time. Exaggerating things to make them cooler & more progressive. We do our UX with claims of objectivity, but really how objective is it once we’ve put our own spin on the results, ignored the average bits of the insight and just pushed things forward rather than to the side – which to be honest is what the passionate few amongst us really want. If you’re not being Gonzo for some briefs then you’re not innovating, you’re optimising.

I almost always end up including a little piece of myself in the story, concocting a solution with me as the protagonist thinking “I’ll call the persona Gerald, they’ll never notice that crafty 30 something advertising exec from London is really me”… Come on, admit it, how many have you have done it?! More than you’d think. So much of what we do is a subjective, artistic endeavour based on our own objectively collected insights as real life consumers. We’re just scared to admit it because we think it somehow cheapens the solutions and the work is less robust because there’s a large wedge of ourselves in it rather than a real-life bloke called Gerald who probably still owns a monotone Nokia from 2003 anyway… And I’m certainly not user-centring a solution around THAT bloke, he sucks! When that proposal goes live deep-down its somewhere comfortably between subjective and objective and as long as it’s still good, where’s the harm in being a bit Gonzo with the approach. It’s still packed full of insight driven work, the insight just happens to be your own. It’s good. It has a place and you shouldn’t be ashamed (as long as you’re racking up success and you can attribute it back to some fuzzy bit of research or insight someone pompous researcher gave you at work).

Lets look at bit more at the detail. Gonzo UX tends to favor style over fact to achieve accuracy — if accuracy is in fact meant to be achieved at all — because we often use our own personal experiences and emotions to provide context for the topic or solution being covered. It disregards the “polished”, edited solution favoured by the esoteric usability cronies and strives for a more gritty, personable approach. Sometimes you see the personality of a solution is just as important as the problem the solution is trying to fix.

If you have a tendency when you’re selling solutions in to use quotations, sarcasm, humor, exaggeration, and profanity then you may in fact be practising Gonzo UX and you don’t even know it.

So as of today I’m actually adding ‘Gonzo UX’ to our companies list of approaches. As a term, for our clients, and I’m going to make sure our team are proud to do it when the time is appropriate.

“What? The client won’t pay for research and insight?” It’s a Gonzo solution.

“Oh my god, that insight work sucks but I’ve only got 2 days to craft a response!” It’s a Gonzo solution.

“This project is just going to be DULL and UNINSPIRING if I follow this research and tailor it to this dudettes life” I’ll go a little bit Gonzo for the sake of making it good rather than average.

Death to the Persona. Long live the Information Persona

Am I the only person in UX that hates (HATES) Ben (32 – Reads the Guardian and loves riding his mountain bike) and his wife Becky (29 – Likes walking, Grazia and playing with her Poodle called Peaches) …I do… I hate them… they don’t represent anything. There is no ‘Joe Average’ and there never has been, so how are we meant to craft experiences around the average user? We can’t. So in the spirit of fixing the problem I hate here’s a debatable alternative… The Information Persona. Or Behavioral Persona. It’s not a new concept, in fact Jakob and his band of merry bearded user-philes were parroting the theory around about a decade ago, it’s just never been beyond the conversation and we still rely on Ben and his wife Becky (those average idiots and their stupid poodle).

Have a look at this set of alternative grouping from some user interviews conducted & a study of internet behavior. The belief is users can be categorized against six common primary behaviours for information seeking (I’m sure there are more, especially in todays world and this is excluding mobile obviously):

  • Starting: Identifying relevant sources of interest
  • Chaining: Following and connecting new leads found in an initial source
  • Browsing: Scanning contents of identified sources for subject affinity
  • Differentiating: Filtering and assessing sources for usefulness
  • Monitoring: Keeping abreast of developments in a given subject area
  • Extracting: Systematically working through a given source for material of interest.

So what exactly does this mean & how does it actually affect the way in which future proposals should be formed? Quite simply, by identifying & modelling the above personas we can create sets of tools that keep everybody happy! Well that’s the theory anyway…

Behaviour: Starting

This refers to identifying relevant sources on an average, content driven website. There are four principle ways in which users should arrive at given content on the site:

  • Typing in a URL directly
  • Referring to a bookmarked URL
  • Following a link from another section of a website (or another website)
  • Using the search engine (internal and external)

Example features to support Starting:

  • Thoughtfully-designed URLs for sections that are easy to remember
  • Unique URLs for different sections of the Website
  • Page construction that allows for easy and accurate book-marking
  • Carefully worded page titles that provide a useful context

Appropriate use of page tags to describe the content. This should not only facilitate indexing by the search engine on the website, but also yield meaningful descriptions in search results lists. Tags init.

In considering Starting as a behaviour, it is important to remember that users probably first come in contact with a given section of the website from a referring source, e.g. another section or elsewhere, such as a work colleague forwarding a link or other referring sources. The decision to go to visit one section over another is often based on micro-content found in the page title and meta-tags.

Behaviour: Linking

Linking is the act of following and connecting new leads found on initial pages. Chances are that when users arrive at a given section, they are not on the page they need to be. They must be able to orient themselves quickly, often within seconds, and determine which links they should follow.

Example features to support Linking:

  • Accurate, descriptive and mutually exclusive link names that make sense to visitors in terms that they can relate to and understand
  • Consistent navigation through design elements such as placement, style and general look and feel
  • Sense of orientation created with page titles, global elements, consistent use of colour and graphics
  • A way out or back – Generally this means not disabling the back button or using unnecessary extra windows or new browsers
  • Icons with clear meanings
  • A limited number of well-organised navigation options – 7 options are generally accepted as standard, although research shows that fewer than 5 are even better.
  • Navigation that provides the appropriate, relevant associations related to page content to anticipate users’ probable next moves.

Behaviour: Browsing

Browsing means scanning site contents and informally grouping items by subject affinity. This is a behaviour that is hard to image NOT occurring in every section. Browsing is a chief web activity. Supporting this behaviour in the new design, structure & architecture is essential.

Example features to support Browsing:

  • Meaningful categories that themselves convey a message and the purpose of the site
  • Prioritised navigation – separating navigation into meaningful types to facilitate browsing of options.
  • Clearly presented and readable text
  • Content overview – the Website offers the possibility to “chunk” content. That is, it is not necessary to present all content at once, rather in digestible pieces that provide a clear overview.
  • Bulleted lists, tables and other constructions that facilitate scanning

Behaviour: Searching

This refers to direct and targeted searches using a the internal search engine or similar functionality. Important considerations here are twofold: the design of the search interface and functionality, and display of search results.

Example features to support Searching:

  • Allows users to limit in meaningful ways – standard operators (AND, OR and NOT) should be available, in addition to others
  • Query syntax is standard or easily learned
  • Search results provide a context for understanding hits, such as page title, date, description –even show part of the sentence in which the search string was found
  • Opportunity to revise search and to search again
  • If no hits, suggestions to similar, possible sources are presented
  • Spell check with corresponding suggestions for “correct” spellings

Behaviour: Differentiating

Differentiating is the act of evaluating information for relevance to the information need or problem. In some ways this is the combined goal of the above-mentioned behaviours and features. Additional features, however, can directly help visitors uncover the value the Website has to offer. Designers should strive to strike a balance between control and freedom.

Example features to support Differentiating:

  • Logical and meaningful headings that explain content to some degree
  • Appropriate text lengths that are suitable for reading online
  • Chunking content into layers and allowing random access into different sections of information
  • Summary texts and abstracts that indicate the quality, usefulness and scope of content
  • Providing deeper content for those who need it
  • Contact information and help to assist people who need more information or who couldn’t locate exactly what they need
  • User comments and reviews of websites, Web content or products sold over the Web
  • Indications of and links to semantically related material

Behaviour: Monitoring

Monitoring is the behaviour of studying content from a distance. That a Monitoring User watches what happens on a site on a regular basis, but prefers not to actually visit the site because of time or location constraints. Users who monitor often don’t spend vast amounts of time on the internet and want delve straight to regularly visited sources on the occasions that they do.

Example features to support Monitoring:

  • Easily bookmarked pages for quick and easy access at a later date
  • Newsletter subscription
  • Email alerts that notify users of changes in content, current status, updates, etc.
  • SMS message to communicate up-to-the minute changes and breaking news
  • Online agents that collect, control and communicate information and changes
  • Customised pages that allow users to configure site elements to their liking
  • Personalised page that react dynamically to user activity

Behaviour: Extracting

As the name implies, extracting refers to taking and using the appropriate, identified information or pieces of information online. It is the final use of information.

Example features to support Differentiating:

  • The ability to print; print friendly formats, if needed. Dark coloured page backgrounds and frames complicate printing greatly and are a huge strain on ink resources
  • Cut and paste as an option – this means providing key bodies of information in HTML format. Other formats, such as images or flash, do not allow for cut and paste.
  • Download possibilities – Portable document files (PDF) have become standard and readers for this format are ubiquitous and free. Other formats for download can also be considered depending on use and target groups
  • Applications as filters of large bodies of information
  • Sorting functions

Conclusion

So I’m not dumb enough to think Ben & his irritating vanilla life are ever going to go away and we’re going to be liberated of such useful hyperbole. But I am interested in moving our clients away from what they think they know and into new ways of thinking about user-centered design. To me user centered design is about basing things around the behavior of users and not necessarily their personalities, it’s irrelevant if they read the guardian and ride a bike when they visit a banks website.

Some more sources for these behavior types:

http://dl.acm.org/citation.cfm?id=1962324&dl=ACM&coll=DL&CFID=61696963&CFTOKEN=32720603

http://firstmonday.org/htbin/cgiwrap/bin/ojs/index.php/fm/article/view/729/638

http://crl.acrl.org/content/71/5/435.abstract

http://www.ischool.utexas.edu/~donturn/papers/asis98/asis98.html

http://ec2-50-19-240-191.compute-1.amazonaws.com/1292/1/435.full.pdf

Keynote Kung-Fu: How to wireframe like a ninja

Travis Isaacs is a visual/interaction designer and front-end developer. He created the Keynote Wireframe Toolkit which you can download at http://keynotekungfu.com

I love this presentation… it’s so true:

Charlie and the Apple Factory

Here’s a lovely animation about Apple that portrays Apple’s Steve Jobs as the Willy Wonka.

The spoof actually offers some interesting insight about desirability in apples products. Everyone wants to know what makes Apple’s products so special. Charlie is led to a room that holds the secret of why people love Apple products. The room is completely empty. The Steve Jobs character divulges that it there isn’t anything special about their products except that they convinced people to believe they come from a “magical place.”

Why will people stand in line for hours for the newer version of the iPad, tomorrow when the original only came out around this time last year? Is it because it has cameras now? Is it because it is a little faster? No, and no. It’s easy to compare tablets on specifications like speed and resolution. It’s very difficult to compare on something intangible, like desirability.

Taken from the blog post “UX is 90% desirability” by Francisco Inchauste.

Competitor Benchmarking

We’re not supposed to give secrets away are we? Oh well… let’s break the rules & throw caution to the wind… I’m going to give you a leg-up on competitor benchmarking because it’s one of the most important tasks we perform in UX.

The term “benchmarking” is relatively new but the concept is as old as competition itself. Whether in industry, sport or in other aspects of our daily lives, we continually need to reference our own performance against others.

All of us benchmark most of the time without realizing it. At one time the concept was known as ‘interfirm comparisons’ because in an industrial sense, that is what it is.

As a task it’s important to make it very clear that this is ‘subjective analysis’ not ‘objective research’. You can of course go through stats if you have them and look at two or three websites against each other, but the chances of your having that kind of data are almost non-existent, so assume this is you as a UX person or intern looking at lots of different sites, following some rules & guidelines & grading them based on observation. Subjective observation. Doesn’t make it wrong, it does however make it someones opinion for a lot of things.

The criteria

So here’s a start for ten… if I was going to look at four sites and compare them against each other I’d take the the following areas & give each site a score out of 3. 1 being dreadful and 3 being top of the class. Scoring is of course entirely a decision you can make for yourself. I just like to keep it simple.

1 Findability

  1. Site was easy to find using Google
    • Search for brand found main site quickly
    • Search for “SOMETHING TO DO WITH THE INDUSTRY” directed me to this brand
  2. Search results were helpful

2 First Impressions

  1. Website was well branded
  2. Clarity of next steps was obvious (you found what you were looking for)
  3. The site is very product led
  4. The site is very campaign led
  5. The site has offers and incentives up front
  6. The site has clear data-capture opportunities up front

3 CTA effectiveness

  1. Visibility
  2. Clarity
  3. Simplicity
  4. Page position
  5. Competition from other messages

4 Ease of use

  1. Navigation
    • Simplicity
    • Contextual signposting
  2. Major headings on pages are clear & descriptive
  3. Styles & colors are consistent
  4. Emphasis (bold, etc.) is used sparingly
  5. Main copy is concise & explanatory
  6. URLs are meaningful & user‐friendly
  7. HTML page titles are explanatory

5 Content

  1. Emotional connection
  2. Commerce
  3. Tools

6 Accessibility

  1. Site load‐time is reasonable
  2. Adequate text‐to‐background contrast
  3. Font size/spacing is easy to read
  4. Flash & add‐ons are used sparingly

7 Personalisation

  1. Website can be personalised
  2. User can choose what content they are shown
  3. The experience can be customised to interest

As I mentioned… this isn’t an exhaustive list of criteria, it’s just the list I use and from time to time I change it on an ad-hoc basis dependent on the client I’m doing the benchmarking for. You’ve got to keep it flexible & play to the audience.

It’s actually what you do with the data that can be useful.

Analyzing and using the benchmark

Using something like Excel to do the benchmark I’d recommend giving each point on the list a score and then a final ‘average’ for each section (you’ll see what I mean on the sample spreadsheet I’ve attached). It’s the average score that you can then use to generate the chart(s) you’ll want to share with the client. I recommend using a ‘Radar’ chart for the visualisation. Simply because it overlays everything on top of each other in a way that lets you see exactly what the lay of the land is. They look fun too.

What I look for in a visualisation like this is not just where your client is performing well against it’s competitors, there’s a chance because of marketing etc that it always has and always will compete heavily in some areas more than others (like SEO / findability) what this shows us very quickly is where opportunities to disrupt the marketplace are. Take the example on the right, there’s clearly nobody in the area of personalisation. Move into that space before someone else & you can grab the point of don-displacement first.

Summary

A benchmark is a quick, simple way of hitting a client with some insight that will conceivably justify decisions you want to make as an agency. It also gives you an opportunity to go back to a client after you’ve done some work and say “You’re score in the area of XXXX was XX, it is now XX therefore we’ve improved usability”.

I’ve included a sample spreadsheet so you can have a fiddle. Punch in numbers where the 1′s are on the first sheet and you’ll see the rest generated automatically. Please note I don’t do technical support… so if you break it that’s not my problem… it’s literally to give you a foot-up and show you the idea.

Download sample benchmark

Found this useful? Please make a small donation:

open