All posts in IA

8 Posts
January 12, 2013 · behaviour, design, digital, Experience Design, IA, usability

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

December 5, 2012 · IA, UCD, UX

I.A is just a communications tool

There’s a lot of discussion around the office and the industry about I.A and it’s role… how it should be done… who should do it (clients and account staff have started handing me ‘wireframes’ and saying “I want that” which is just plain dumb & subjective!) and what level we should be producing it. I have a very straight-forward take on Information Architecture and that is “It’s JUST a communication tool” which could infuriate some people who think they’re more than that.

So let me quantify that train of thought. In 15 years of working in ‘The Big D’ I have had to continuously adapt and refine my style of I.A to the audience who are going to be working with it. I’ve also had the great privilege of working in so many different types of agency now that I’ve constantly had to swap and change the way I produce I.A work. I’ve worked in tactical advertising where we were churning out lots of rich, interactive micro-sites with short shelf-lives and even smaller budgets where I had to scrimp on the objectivity and use a bit of best luck & judgement + knock out rusty wireframes crudely in no time at all so the designer & the developer sitting next to me had a rough steer… All the way through to massive technology companies like Sapient Nitro where the rigor has had to be there because we’re building giant platforms that get developed off-shore. I’ve done a start-up where we had the luxury of being able to take a more Lean approach and most of the I.A was just drawn on the walls. Then there’s the agencies where we were doing more ‘Optimisation’ type work and we’d build detailed Axure Prototypes to do rigorous user-testing. But one thing unifies all those different approaches – whatever I was doing it was always about communicating back to the internal or client audience. It’s always been about showing people the way.

Advertising is a great analogy. You have a message that you need to tell the audience of consumers. You choose the media types best suited to that identified audience. I.A is the same. We have a message and we have to work out the best way to communicate that message and solution to the audience pre-public consumption.

If I meet another I.A who ‘only uses Axure’ or ‘only does Balsamiq’ because it’s their favorite tool then I’m going to explode. It doesn’t do you any favors being that one-dimensional. You have to choose the right tool for the particular job but more importantly you have to be an effective communicator. If you can show me how something needs to function on a wall with a pen then do that… if you can get across the detail using paper and pens then do that too. How it’s presented is secondary to the strategy, insight, research and thinking that’s gone into it.

I’ve tossed away CVs / Portfolios of IAs before because it’s jam-packed full of glossy wireframes… all in the same style, all Omnigraffled with such precision that they’re almost works of art on their own. Why? Because they might be brilliant, but they don’t show me that you’re adaptable and fluid. They show me you’re a great crafts-person with great thinking but they don’t show me that I can throw you into a multitude of scenarios and that you’ll be able to adapt your communication to the audience. Your I.A work is an interpretation of a brief, make people paying attention to it the reward.

A technique or look is no substitution for substance

So in summary – Just be mindful that I.A is a way of communicating the idea, solution, product, vision and function to an audience. That is all. Mastering the art of communication is more important than mastering the art of the wireframe. If it’s objective then it’s UX. If it’s subjective then it’s Design. But whatever it is you have to twist & mould.

November 7, 2012 · design, digital, IA, mobile

Responsive vs. Adaptive

What’s the difference between adaptive and responsive web design?

In the world of web design, the only thing harder than keeping up with the ever-evolving standards in HTML, CSS, and other technologies, is keeping up with the vocabulary! Among the latest hot new terms in web design: Responsive Design and Adaptive Design.

What do Responsive and Adaptive web design have in common? Both responsive and adaptive web design are essentially about creating web designs that are optimized for the size of the screen or the type of device that is used to view them.

The basic concept is that instead of creating one web page designed for one target screen size, you create a web designed for multiple screen sizes, most commonly to work well on at least three different screen sizes — a small mobile screen, a tablet-sized screen, and a larger desktop computer monitor. Of course the new mini-tablets might also cause us some headaches now… but for now, lets assume it’s just the Fixed, Tablet and Mobile designs – which is how I’m directing my teams and my clients.

In recent years, most web designers have created page designs that are 960 pixels wide so that they fit comfortably on a computer monitor that is 1024 by 768. But today, you need to design for everything from a 320-pixel iPhone to giant HD TV screens, which are increasingly being used to surf the web thanks to Google and Apple TV devices.

Responsive designs respond to changes in the size of a browser window by fluidly ajusting the width to fit the space available. Thus, as you drag the side of a browser to make it larger or smaller, you’ll see the design change in realtime. Changes to a responsive design includes adjusting the size and positioning of elements to better fit the space available as you see in this example.

Adaptive designs are generally based on a defined set rules based on device capabilities, as well as screen size. As a result, the change to the design may be more dramatic, and there may be many variations. Using device targeting, you can adapt a web page to include multiple versions of images or to remove video from the smallest screens. In many case, you may not even be able to tell that a website is designed using an adaptive approach if you only view it in a desktop web browser. The most advanced adaptive web designs, such as the one American Airlines created at aa.com, use a sophisticated auto-detection script to identify each device that visits the site and then deliver the best version of the site, adapted to display based on the size and capabilities of each device.

If you have developed a fully adaptive mobile web design strategy, you may deliver a page that includes multimedia (video, audio, aniation) to your desktop users, and then adapt that entire page design to more limited mobile devices by not only changing the design, but also removinge the video and large images before you ever serve the page to low-end cell phones. Similarly, you might make the phone number and directions more prominent in the version designed for mobile phones, while featuring a video introduction, more prominently for desktop users.

Adaptive web sites may look dramatically different from one device to another, adapting not only to the screen size, but to the capabilities of the device.

A little history and credit for Adaptive and Responsive Design

The term Responsive Design is generally credited to Ethan Marcote.

The term Adaptive Design has been around a lot longer, but some give credit for this term to Aaron Gustafson who wrote a book called Adaptive Design.

Another terms get tossed around when we talk about mobile design “Mobile First.”

Luke Wroblewski deserves credit for the term Mobile First, which means designing the mobile version of a site before you design the larger, desktop version (historically most sites were designed the other way around).

Article source: Digital Family

September 20, 2012 · behaviour, Experience Design, IA, UX

UX Prestige

Every great magic trick consists of three parts or acts. The first part is called “The Pledge”. The magician shows you something ordinary: a deck of cards, a bird or a man. He shows you this object. Perhaps he asks you to inspect it to see if it is indeed real, unaltered, normal. But of course… it probably isn’t. The second act is called “The Turn”. The magician takes the ordinary something and makes it do something extraordinary. Now you’re looking for the secret… but you won’t find it, because of course you’re not really looking. You don’t really want to know. You want to be fooled. But you wouldn’t clap yet. Because making something disappear isn’t enough; you have to bring it back. That’s why every magic trick has a third act, the hardest part, the part we call “The Prestige”.

I’ve started to think about this a lot recently – Process – that fallen tree on the path to the Emerald City. I think we’ve over-compicated it. Let’s pull delivery down to an essence, call it Lean or whatever you want, it’s just 3 simple phases to fix a problem:

Discover Define Design
Magic The Pledge The Turn The Prestige
Advertising The Insight The Concept The Solution
Client Business Objectives Customer / User Need Technical Requirements
Agency Quantitative
Qualitative
Desk Research
Ethnographic Observation		 Mental Model
Experience Design / Map
Strategic Response
Skeleton / Structure		 Sketch / Wireframe / Patterns
Tech / Prototype / POC
Final Screen Designs
Content / Taxonomy

Remember that UX is just the focus… a thread that runs through all of our disciplines, and which no single discipline owns (Nick Fink).

Now… before you all go batty and start bashing me. Know this. I ‘get’ that the above table isn’t exhaustive and there’s a ton of other big and little things that we could be doing, but if we strip all the noise & delivery back to simplicity then why not just offer 3 phases and 9-12 deliverables (we’d never do all the Discover stuff, right?!). I’m sure it’d be easier for clients to digest.

July 9, 2012 · Books, Experience Design, IA, UCD, UX

My UX Book List – Essential Reading

I’m not a massive reader of books to do with work, if I’m honest. I prefer to sit down and read a tome that takes my mind off of work and I’m one of those UX’y people who generally prefers to learn by my past mistakes and other peoples actual work. Plus if it ain’t on Kindle then chances are I won’t read it these days. That said, I do have a set of books on my shelf that I’ve bought, been given, borrowed and forgot to return that cover lots of different angles of UX, Design, Marketing, Social and all those other bits I tinker with.

Obviously this list is mine and might not float your boat because of our different experience with scientific research methods, psychology, interaction design, user interface design, product or visual design and our levels of communication skill, but if you’re a voyeur you might like to have a look at my bookshelf.

So here is a list of books I would pick as the must read UX books.

Generalist books that I urge you to check out

The UX Book List

The Infographic Book List

Its by no means exhaustive and I’ll endeavor to add some more to it. But it’s the stuff on my shelf and I use them as references in much of what I do. Enjoy.

March 4, 2012 · behaviour, design, digital, Experience Design, IA, UCD, usability, UX

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.

January 11, 2012 · behaviour, Experience Design, IA, UCD, usability, UX

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

May 20, 2011 · IA, usability, UX

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:

open