Nov 19, 2011

I was skeptical. ‘Design’ is not a word I’m entirely comfortable around. Almost entirely because I’m not naturally very good at it. And yet I found myself signed up – by my doing, too – to spend a summery Cape Town Saturday at a workshop. The workshop in question is part of Ogilvy’s Digital Marketing Academy series and Rian van der Merwe, the Head of User Experience (or something like that?) at Kalahari.net, headed up the training for the day. And was I in for a surprise…

‘Design’ is a word that conjures up an impression of artistry and creativity in the more traditional sense. Alternative and eccentric individuals with shaggy here and a ‘vision’ of what they’re working on. Not me, in other words. My day is determined by a self-assembled to-do list and even though I can consider myself ‘creative’ in an ability to come up with new ideas and the like, I have never been the sketching type. Not that it isn’t something that interests me, by any degree. I know a great design when I see it, and experiencing a great design gives me a great deal of satisfaction.

Perhaps this was the most encouraging take-out from the UX Workshop. That it is far more methodological a process than I realized. Far more accessible. UX design is almost entirely driven by a set of rules and methodologies which can be evenly applied to emphatically improve the way a user experiences a site. They are neither difficult to understand nor particularly difficult to implement, and once you’re aware of them, it makes for a much-improved approach to the way you think about and design products. And makes it obvious just how little thought some other (and reputable) brands and individuals have invested in the same.

But why bother worry about ‘user experience’ at all? While it come across as an onerous process at first thought, it actually provides the opportunity to vastly reduce the time and effort that is put into a product. Requirements are clearer, and following a set of principles guides design and allows the development of a product to happen at a much more rapid rate. Once launched, an improved experience provides more product value to each user, and guarantees an extended product life. Essentially, it’s a no-brainer.

So how do you get started?

User experience is comprised of a) content strategy, b) interaction design and c) visual design, all ruled by a process of user research. After all, how do you improve an experience for a user you have no idea about? Rian pointed to the ‘coffee shop method’ of continually iterating on your product by asking strangers to use them. It’s a process that guides all other designs and produces pure and relevant information that can be practically implemented. It’s about developing that ‘qualitative’ research in addition to the quantiative we insist on including with an Analytics Javascript include on our sites and is equally, if not more, important.

Content Strategy

The way we approach content for the web is all wrong! We design a site, insert some lorem ipsum for the time being and later insert some words to fill the space, or chop it down to fit if it doesn’t. If there was one message to extract from Rian’s discussion of content strategy it was that you cannot design without content. While content strategy is obviously a course on it’s own, the outcome of it is a clear determination of how it is that you will be communicating with your users. So often web products lack a strategy entirely and users are left floundering in site schizophrenia. Avoiding this a matter of developing the following components:

  1. A product voice statement – what the product is, and how it’s done
  2. Personality traits – how your site would be described as a person
  3. Method – how we do this It’s all about figuring out what your users are trying to do, and then making it as simple and easy as humanly possible for them to understand how to do this.

Interaction Design

Interaction design has nothing to do with how a site looks and everything to do with how it acts. There are 10 Usability Heuristics which provide a really useful summary.

  1. Visibility of system status. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. An interesting anecdote goes back to Google in the early days of the web. Users landing on a very simple and clean search page often spent minutes waiting for the page to finish loading, unaware that it already had. So Google added a footer.
  2. Match between system and the real world. The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Tablets make a great deal of sense in this area - touching data directly just makes sense from a usability point of view. A lot of buttons you seen on the web don’t look anything like real-world buttons.
  3. User control and freedom. Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Breadcrumbs are a good example of showing a user where they are, and allowing them to navigate through their journey up to that point.
  4. Consistency and standards. Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. There are a great deal of conventions in areas of web design such as forms and alignment, and departing from these conventions makes for a reduced usability of the site itself. As Rian said; “there’s a time to be sexy, and there’s a time not to. Conventions are one of those times.”
  5. Error prevention. Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. A simple example of this would be to disable a button until a user has completed the requirement first.
  6. Recognition rather than recall. Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  7. Flexibility and efficiency of use. Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. An example of this is Amazon’s ’1 click checkout’ which allows users who have been through the checkout process before and are confident that their information is correct to bypass the process entirely and simply purchase the item in their cart.
  8. Aesthetic and minimalist design. Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Microsoft Word these days is less about writing than it is about formatting!
  9. Help users recognize, diagnose, and recover from errors. Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. “Error checks are the bastard children of web design”. Using inline error checking means users don’t feel it’s too late to correct their message, and custom 404 error pages may be engaging enough to ensure that users remain on the site and try again.
  10. Help and documentation. Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. First prize in this is always contextual help, in that it doesn’t interrupt the user’s flow through the site.

Visual Design

In many ways, this is the last bit in the process – you simply cannot start physically designing anything without putting a lot of thought into the stuff that comes before it. That said, this is the part of UX that is usually written off as the domain of the aforementioned shaggy hippy artists. In reality, it is so much more than art.

  1. Balance. This goes to page elements, font and pretty much everything else on the site. Lack of balance is the reason ransom notes freak us out so much.
  2. Proximity. Grouping elements teaches us that they are related. If you click somewhere, the following action should take place close to this.
  3. Consistency. Maintain the experience across a site. Having wildly different sections of the site, for example, makes a user unsure and uncomfortable in their experience.
  4. Alignment. This makes it easier for a user’s eye to navigate through a site. It is this principle that made the grid-based design method so popular. The converse of this rule is that once you have established alignment rules, you can break them to focus a user’s attention on an important element.
  5. White space. We are so scared of making use of negative space in our designs, and yet it is highly effective. In addition to creating a more elegant experience, it can bring attention and focus to the elements that are on a page. It takes a lot of work to make a dark site look sparse and easy to deal with.
  6. Contrast. Size and colour are two important focuses of this principle. We see things by perceiving contrast, and yet we create very little of it in our sites. Without the contrast between letters, in terms of both size (eg sentence case versus all-caps) as well as colour, text is a lot more difficult to read. Most things on a site are rectangular so making something circular can grab attention.

Has one day made me a UX designer? Not at all. But it certainly has made me think about it a lot more. And approach building products in a new way.

Previous articles

Nov 19, 2011

I was skeptical. ‘Design’ is not a word I’m entirely comfortable around. Almost entirely because I’m not naturally very good at it. And yet I found myself signed up – by my doing, too – to spend a summery Cape Town Saturday at a workshop. The workshop in question is part of Ogilvy’s Digital Marketing Academy series and Rian van der Merwe, the Head of User Experience (or something like that?) at Kalahari.net, headed up the training for the day. And was I in for a surprise…

‘Design’ is a word that conjures up an impression of artistry and creativity in the more traditional sense. Alternative and eccentric individuals with shaggy here and a ‘vision’ of what they’re working on. Not me, in other words. My day is determined by a self-assembled to-do list and even though I can consider myself ‘creative’ in an ability to come up with new ideas and the like, I have never been the sketching type. Not that it isn’t something that interests me, by any degree. I know a great design when I see it, and experiencing a great design gives me a great deal of satisfaction.

Perhaps this was the most encouraging take-out from the UX Workshop. That it is far more methodological a process than I realized. Far more accessible. UX design is almost entirely driven by a set of rules and methodologies which can be evenly applied to emphatically improve the way a user experiences a site. They are neither difficult to understand nor particularly difficult to implement, and once you’re aware of them, it makes for a much-improved approach to the way you think about and design products. And makes it obvious just how little thought some other (and reputable) brands and individuals have invested in the same.

But why bother worry about ‘user experience’ at all? While it come across as an onerous process at first thought, it actually provides the opportunity to vastly reduce the time and effort that is put into a product. Requirements are clearer, and following a set of principles guides design and allows the development of a product to happen at a much more rapid rate. Once launched, an improved experience provides more product value to each user, and guarantees an extended product life. Essentially, it’s a no-brainer.

So how do you get started?

User experience is comprised of a) content strategy, b) interaction design and c) visual design, all ruled by a process of user research. After all, how do you improve an experience for a user you have no idea about? Rian pointed to the ‘coffee shop method’ of continually iterating on your product by asking strangers to use them. It’s a process that guides all other designs and produces pure and relevant information that can be practically implemented. It’s about developing that ‘qualitative’ research in addition to the quantiative we insist on including with an Analytics Javascript include on our sites and is equally, if not more, important.

Content Strategy

The way we approach content for the web is all wrong! We design a site, insert some lorem ipsum for the time being and later insert some words to fill the space, or chop it down to fit if it doesn’t. If there was one message to extract from Rian’s discussion of content strategy it was that you cannot design without content. While content strategy is obviously a course on it’s own, the outcome of it is a clear determination of how it is that you will be communicating with your users. So often web products lack a strategy entirely and users are left floundering in site schizophrenia. Avoiding this a matter of developing the following components:

  1. A product voice statement – what the product is, and how it’s done
  2. Personality traits – how your site would be described as a person
  3. Method – how we do this It’s all about figuring out what your users are trying to do, and then making it as simple and easy as humanly possible for them to understand how to do this.

Interaction Design

Interaction design has nothing to do with how a site looks and everything to do with how it acts. There are 10 Usability Heuristics which provide a really useful summary.

  1. Visibility of system status. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. An interesting anecdote goes back to Google in the early days of the web. Users landing on a very simple and clean search page often spent minutes waiting for the page to finish loading, unaware that it already had. So Google added a footer.
  2. Match between system and the real world. The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. Tablets make a great deal of sense in this area - touching data directly just makes sense from a usability point of view. A lot of buttons you seen on the web don’t look anything like real-world buttons.
  3. User control and freedom. Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Breadcrumbs are a good example of showing a user where they are, and allowing them to navigate through their journey up to that point.
  4. Consistency and standards. Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. There are a great deal of conventions in areas of web design such as forms and alignment, and departing from these conventions makes for a reduced usability of the site itself. As Rian said; “there’s a time to be sexy, and there’s a time not to. Conventions are one of those times.”
  5. Error prevention. Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. A simple example of this would be to disable a button until a user has completed the requirement first.
  6. Recognition rather than recall. Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
  7. Flexibility and efficiency of use. Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. An example of this is Amazon’s ’1 click checkout’ which allows users who have been through the checkout process before and are confident that their information is correct to bypass the process entirely and simply purchase the item in their cart.
  8. Aesthetic and minimalist design. Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Microsoft Word these days is less about writing than it is about formatting!
  9. Help users recognize, diagnose, and recover from errors. Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. “Error checks are the bastard children of web design”. Using inline error checking means users don’t feel it’s too late to correct their message, and custom 404 error pages may be engaging enough to ensure that users remain on the site and try again.
  10. Help and documentation. Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. First prize in this is always contextual help, in that it doesn’t interrupt the user’s flow through the site.

Visual Design

In many ways, this is the last bit in the process – you simply cannot start physically designing anything without putting a lot of thought into the stuff that comes before it. That said, this is the part of UX that is usually written off as the domain of the aforementioned shaggy hippy artists. In reality, it is so much more than art.

  1. Balance. This goes to page elements, font and pretty much everything else on the site. Lack of balance is the reason ransom notes freak us out so much.
  2. Proximity. Grouping elements teaches us that they are related. If you click somewhere, the following action should take place close to this.
  3. Consistency. Maintain the experience across a site. Having wildly different sections of the site, for example, makes a user unsure and uncomfortable in their experience.
  4. Alignment. This makes it easier for a user’s eye to navigate through a site. It is this principle that made the grid-based design method so popular. The converse of this rule is that once you have established alignment rules, you can break them to focus a user’s attention on an important element.
  5. White space. We are so scared of making use of negative space in our designs, and yet it is highly effective. In addition to creating a more elegant experience, it can bring attention and focus to the elements that are on a page. It takes a lot of work to make a dark site look sparse and easy to deal with.
  6. Contrast. Size and colour are two important focuses of this principle. We see things by perceiving contrast, and yet we create very little of it in our sites. Without the contrast between letters, in terms of both size (eg sentence case versus all-caps) as well as colour, text is a lot more difficult to read. Most things on a site are rectangular so making something circular can grab attention.

Has one day made me a UX designer? Not at all. But it certainly has made me think about it a lot more. And approach building products in a new way.

More articles