Why whitespace matters

Posted in Design on February 15, 2011 by Paul Boag

Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design. Why then is it so important and how can we ensure it is maintained?

Whitespace is a fundamental building block of good design. Its one of the first thing any visual designer is taught. However, to many website owners it is simply a waste of space that could be used to better promote their messages, services or products.

In this post I aim to explain why whitespace matters and how to keep whitespace in a design without compromising business objectives. However, before I can do that we need to be clear what we mean by whitespace.

What do designers mean by whitespace?

When designers talk about whitespace, they actually mean negative space. In other words the space between screen elements. That is not always ‘white’. This space maybe a colour or texture but either way it is space within a design that does not include screen elements. Below you can see a couple of examples of ‘whitespace’ in on various websites.

Apple Homepage

wearefixel.com

With whitespace clearly defined the next questions becomes “why does it matter?”

Why whitespace matters

Whitespace is a fundamental element of design for good reason. Used well it can transform a design and provide many benefits. Some of those benefits are purely aesthetic while others have a tangible impact on the effectiveness of your site.

Below I share four benefits from the latter group:

Improved legibility

The most obvious benefit of whitespace is that it increases legibility. You only need to compare the examples shown in Mark Boulton’s superb article on whitespace to see how a good use of whitespace can make an enormous difference to legibility.

Two paragraphs with different line spacing and margins

Higher comprehension

Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.

instapaper for the iPad

Increased attention

Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.

Simple publishing

Creates the right tone (sometimes)

Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isn’t always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.

David Bushell's website

Hopefully by now the benefits of whitespace are obvious. However even with the best intentions in the world, whitespace can often be pushed out of a design. In order to prevent this we need to understand why it happens and how to combat it.

The three enemies of whitespace

I believe there are three primary reasons why whitespace is pushed out of a design. If you understand what these are and how to deal with them then your design stands a better chance of maintaining the whitespace it needs.

Lets start by looking at the fold.

The fold

Whitespace is often pushed out of a design because somebody within the organisation believes users do not scroll. The result is that they insist as much content as possible is placed high on the page sucking any whitespace from the design.

However the belief that users do not scroll was proved false as early as 1997 and more modern studies have shown that users routinely scroll to the very bottom of pages.

In addition it is important to remember that we do not know the point at which users have to start scrolling. This is dependant on operating system, browser, resolution and many other factors. In the end worrying about ‘the fold’ is a false economy.

That said, it is still good practice to ensure the primary calls to action and content are placed near the top of the page. However, this is not to suggest other content will be ignored. What is more, placing too much content high on the page will reduce the prominence of key content because it will be overwhelmed by the proximity of lesser content as discussed in ‘increased attention’ above.

Trying to say too much

Another common reason for whitespace being removed from a design is because there is a desire to communicate too much information at one time. Most website owners have a lot they want to say but unfortunately users only have limited attention. It is therefore important that you ‘spend’ this user attention wisely.

The Google and Yahoo homepages are good examples of this problem. Both Google and Yahoo offer similar services. However, they take radically different approaches to their primary homepages.

As you can see from the screenshots below Yahoo tries to get the user to look at everything at once. Google on the other hand recognises that users have limited attention and so focus on their primary offering first – search. By looking at the two homepages (let alone their relative incomes) it is immediately apparent which is more effective.

Image of the Yahoo and Google homepage side by side

In order to drive this point home I suggest allocating yourself (or those within your organisation pushing for more content on your homepage) 15 points of user attention. Each item you add to the page costs 1 point. If one screen element is more important than another you need to assign it additional points to make it stand out. With only limited points available it quickly becomes obvious you cannot say everything on the homepage and so whitespace does not need to be pushed out of the equation.

Politics

Of course even with the best will in the world sometimes a website owner can be forced into adding too much content to a page because of internal politics. When somebody higher within your organisation insists his or her pet project appears on the homepage there is little you can do about it.

This is where the book ‘Laws of Simplicity‘ offers some great advice. If you cannot remove a piece of content then try shrinking or hiding it.

Take for example the approach we used on the Wiltshire Farm Foods homepage. For various reasons it was decided the homepage should include food and health News despite the fact that this information distracted from the primary call to action (buy a meal) and was not something the vast majority of users were interested in.

Our solution was to have this content present but hide it unless the user chose to view it. A simple piece of javascript enabled the user to expand it on request. This hid the content from those not interested and enabled the design to have more whitespace.

Food and health news expanded

Food and health news colapsed

Conclusions

There is little doubt that whitespace is a valuable design tool that can make any website more effective. What is more I see no reason it needs to be such a point of friction between designers and website owners. I believe any design can maintain its whitespace while meeting a site’s business objectives.

But what do you guys think? What problems have you experienced with whitespace? Why do you believe whitespace in design is so important? Let’s have a flame war in the comments below ;-)

Thumbnail based web design?

Posted in Design, Marketing on December 8, 2010 by Paul Boag

Google have added an instant preview to its search results that shows a thumbnail of your website. Should this change the way you design?

Just before I went away to America Google launched an interesting new feature that I believe raises some questions about how we design of our websites. The feature I am referring to is instant preview found in Google search results.

In case you haven’t seen this feature yet go to Google and perform any search. In the search results next to the title of each result you will see a small magnifying glass. Clicking on this will show a preview of the webpage being listed. You can then roll over any other result to have that preview automatically update.

Google instant preview

Why should I care?

The introduction of this feature is significant because the thumbnail will influence which links users click. If the thumbnail is incomplete, unattractive or does not seem relevant the user is significantly less likely to click. In short where users used to judge a website within a few seconds of arriving, they will now be making judgements before even visiting your website.

How does this change our design?

Beyond the obvious fact that some sites will look more attractive as a thumbnail preview than others, there are also technical considerations. For example a thumbnail cannot display interactive slideshows, video or indeed any other moving element.

The technology that Google uses to capture these thumbnails also seems to have problems with elements that take longer to load on a page or with plug-in technology such as flash. In short if elements of your page take too long to load or use technology such as flash they may appear blank in your thumbnail. Websites built entirely in flash do not display at all.

Example of a blank preview of flash based website

But are people using this feature?

Of course you may argue that few people will actually use this functionality and you may well be correct. However I can see this being particularly useful for people using a slower web connection. It will allow them to assess individual search results without visiting each page. It is therefore particularly important to consider your previews if you are targeting an audience you know will have a relatively poor connection.

My take on instant preview

Personally I believe that instant preview is part of Google’s ongoing campaign against those who would seek to artificially manipulate their search engine placement. By allowing users to quickly preview pages it exposes sites that are either squatters, keyword stuffers or doorway pages.

However I do believe it has greater ramifications than this. For example, it is yet another reason to avoid flash unless absolutely necessary. It may also discourage some website owners from using third-party widgets that load slowly.

I would certainly encourage website owners to check their thumbnail and make sure it is displaying correctly.

But what do you think? Should we be worrying about Google instant preview or is it something that will be rarely used? Let me know in the comments below.

What does your site say about your organisation's personality?

Posted in Marketing on October 11, 2010 by Paul Boag

Are users seeing you in the right light? Are they seeing the real you or a phoney persona? In this post I show you how to let your users look behind the corporate facade.

For many users your website is the only glimpse they get of who exactly you are. Most do not meet you face-to-face or even chat with you over the phone. Your website is all they will ever see. If you find that prospect scary then you are not alone. Many organisations not only view their website as unrepresentative of their services but also their personality.

In this post I endeavour to provide some practical advice on how to honestly project your personality online. However to do that you need to have a clear perception of who you are.

Understanding your organisations personality

It’s amazing how few employees have a clear grasp of what their company does, let alone the personality that best represents them. One of the first questions we ask our clients is to summarise what their organisation does in one or two sentences. Many people simply cannot do that.

The second question we ask is “if your company was a person, who would that person be?” Think about it for a minute. Which famous person best represents your company? It’s a hard question to answer. Yet I believe that if your website is to accurately reflect who you are then you need to be able to answer it.

Don’t pretend to be somebody you are not

However the problem does not end with simply identifying who you are. It is also a matter of being confident enough to honestly project that personality. I often encounter organisations who dislike their corporate culture and would prefer to be somebody else. There is nothing wrong with being aspirational in the way you wish to project yourself. However it is important to recognise that if you intend to be aspirational online this also needs to be represented off-line as well. This requires nothing short of a cultural shift.

Overcoming your corporate inferiority complex

In most cases it is better to just “be yourself”. Many organisations suffer from a collective inferiority complex. Instead they need to embrace who they are and be willing to project that online with confidence. I think this lack of confidence is borne from a fear of alienating users. They believe that some of their corporate characteristics may be unpalatable to certain audiences. They might actually be right.

An employee ashamed to work at Microsoft

dragon_fang, Shutterstock

However in my opinion it is better to accept who you are than be something you’re not. You may alienate some users, but your honesty and openness will attract many others. The web is a big place and there are plenty of people out there who see the world in the same way as your organisation and will be drawn to you if only you stand up for what you believe.

That brings me nicely on to the need for transparency and openess.

Be transparent and open

As well is not hiding who your organisation really is, it is important to be open and transparent in the way you communicate with your customers both online and off. Too many organisations harbour the belief that they cannot or should not admit to their mistakes. There also appears to be a culture of secrecy that surrounds many organisations. Although this may work for companies such as Apple the majority of us do not work for Apple and so need to consider a more open attitude.

Stop worrying about the competition

I think much of this closed off mentality comes from a fear of the competition. Organisations believe that to admit their mistakes shows weakness. Although there is an element of truth in this, the benefits outweigh the weaknesses.

Take for example Flickr.com. In their early days they suffered from serious performance problems that angered many of their paying customers. They might have concluded that to admit the problem would have been a sign of weakness. However instead they chose to publicly acknowledge the problem and apologise for their failings. This turned a potential PR nightmare to their advantage and they won a lot of fans because of their honesty.

flickr blog post entitled: Sometimes we suck

Many organisation also worry that making their company too transparent will allow the competition to copy them. Although true, I would argue that it is better to give away some of your intellectual property than it is to work in obscurity. Take for example my own situation. I know for a fact that a large number of my competitors read this blog. No doubt they learn a lot about the way that I work and win business. However I also know that the Boagworld community wins approximately 90% of Headscape’s new business. At the end of the day it is perfectly possible that my competitors will copy some of my ideas. However ultimately they are just going to be playing catch up and I will always remain one step ahead of them.

Another important part of being open and transparent is to recognise your organisation is more than a corporate facade. Instead it is made up of many individuals who all have an influence over the corporate culture.

Recognise that your organisation is made up of people

Why is it that the marketing department within so many organisations actively discourage their employees from talking about their work online? In my opinion employees are one of the best assets a company has in projecting its personality online.

Take for example Microsoft. Among certain segments of the developer community Microsoft is perceived as evil personified. In particular many web developers despise Internet Explorer with a passion. For the longest time the team at Microsoft who worked on Internet Explorer were forced to remain silent and this just added to people’s dislike of the company. However eventually Microsoft began to open up and allow its employees to talk about their jobs and the decisions they made in the development of Microsoft products.

For those of us who have read these first-hand accounts by Microsoft employees on blogs like Channel 9, it has transformed our attitude towards the company. We may still dislike Internet Explorer but although it is easy to despise a corporate body like Microsoft, it is much harder to dislike the men and women who work on the products.

Channel 09 blog

Not only is it much harder to dislike people than corporations, we also feel more drawn to individuals rather than faceless companies. This relationship with people (rather than companies) is particularly important if you are a service based business. At Headscape we actively encourage our employees to blog, tweet and generally participate in the web design community. This is because we know that our clients hire us based on the skills and likeability of our staff. Most people are not impressed by corporate brands, but they are impressed by likeable, highly skilled individuals.

Of course I’m not suggesting that there is no place for corporate branding. After all I fully recognise that first impressions count.

First impressions count

When we meet a person for the first time we make certain judgements about their character and personality based on the way they look, what they wear and their body language. With little else to make judgements on, users take a similar approach online. They make judgements based on the visual appearance of your website and come to conclusions within a matter of seconds. It is therefore important that the design of your site reflects the personality of your organisation.

Because users make judgements about your character based on the way your site looks it is important that the designer has a good handle on your organisation’s personality. That is the reason we ask “if your organisation was a person who would it be?” This allows the designer to picture a particular person when designing the site.

However it is important to stress that it is not enough for just the design to reflect your personality. Your copy needs to reflect it to.

Don’t allow your copy to make you schizophrenic

Content management systems have solved many problems. However the way they have solved some problems has created other more subtle challenges. For example, the introduction of content management systems has meant that a website will probably have multiple content providers. This overcomes the problem of content bottlenecks. However each content provider has his or her own writing styles and this can make your organisation’s character seem schizophrenic.

Image of serious business man holding an image of himself in casual wear looking happy

Worldpics, Shutterstock

As with design it is important that your copy reflects your organisation’s personality. This means that your copy needs a single tone of voice. In an ideal world this would mean that your website had a single web editor ensuring that everything published have that consistent tone. However this is not always possible due to budgetary constraints.

If you do not have a web editor then your organisations website should at the very least have a content style guide. This document should not only ensure consistency in the use of grammar, product names and sector specific terminology. It should also provide guidance for writing with the correct tone of voice.

This kind of editorial control has existed in the print world for years. For example if you compare different newspapers you will find each has its own unique personality that differentiates itself from the competition. This personality is maintained across the publication despite the fact that each issue is written by a variety of different journalists.

The Sun website

The Guardian website

You might think this contradicts my comments earlier about giving different employees within the organisation a voice. I have no problem with employees writing in their own style for content that is specifically associated with them as an individual (e.g. a corporate blog where the author’s name is highlighted). However on more generic pages I believe that the personal style of the writer needs to be secondary to the personality of the organisation.

Conclusions

I find it concerning that so few websites seem to have a consistent tone of voice that extends through both design and copy. Without a strong personality and will within the organisation to express that personality online, websites end up looking bland and generic. This explains the prevalence of ‘corporate blue’ and unintelligible marketing copy across the web. Designers and writers who fall back on these cliches do so because they have no clear image of their organisation’s personality.

Could you easily explain to a third party what the personality of your organisation is? If not then maybe it is time to ask which celebrity best represents your organisation. Why not post your ideas in the comments below letting us know why you selected the person you did.

Calling BS on perfectionism

Posted in Design on August 26, 2010 by Paul Boag

I am fed up with web designers who are seeking mythical perfection in design. Its time to become a pragmatist.

I recently came across this superb post entitled “Why I hate working with perfectionists” written by Karl Mendes. Karl perfectly summed up a growing problem I am seeing among many website owners and web designers. It is a subject I feel so passionately about that I felt I had to throw my hat into the ring.

The problem

The problem began with certain high profile web designers who I will kindly call somewhat elitist. These web designers liked to describe themselves as perfectionists. They believe in an obsessive attention to detail and an unwillingness to compromise their desire for perfection.

Because of their reputation this idea has begun to seep into the culture of web design even going as far as some website owners.

On the surface this all sounds great. Surely we should strive for perfection in design? Isn’t it good to have an obsessive attention to detail?

The problem is that there is no such thing as perfection.

Man cutting the grass with scissors

Patrick Breig, Shutterstock

No such thing as perfection

Perfection is very much in the eye of the beholder. In my opinion it takes an incredible amount of arrogance to say my idea of perfection is somehow more valid than yours.

Of course it could be argued that a designers perception of design perfection is more valid than that of a website owners. The problem is that relentlessly seeking perfection in one field often undermines others.

For example, an obsession with detail is a huge drain on time and money. You may go someway towards reaching a mythical design perfection but at the same time you undermine any perfection in return on investment!

Equally design perfection may clash with a perfection in code. In short pure perfection is not possible even if it wasn’t so subjective.

Personally I am the opposite of a perfectionist. I am a pragmatist.

Choose pragmatism every time

The thing that angers me so much about perfectionists is the sense of superiority. Most perfectionists I know in web design are those who work on huge projects with massive budgets. They have the luxury of being able to spend months working on a user interface. The problem is they still look down on those who don’t achieve their level of ‘perfectionism’ even if they don’t have the budget.

These are the people that sneer at websites thrown together in a WYSIWG editor like Dreamweaver. Admittedly many website should not be built in this way. However for some sites this is perfectly valid. For example I have built my youth groups website in iWeb. It’s absolutely shocking. However, am I embarrassed by it? Not at all. It is the right solution for the project…

It had no budget.
I had no time to build something.
It’s going to be looked at by a handful of people.
The target audience don’t care what it looks like as long as it works.
It does not need to impress anyone.

Is it perfection? Absolutely not. Was it the most pragmatic solution in the situation? Absolutely.

That is the problem with perfection, it does not allow for context.

Karl summed it up for me when he quoted 37Signal’s book Rework…

They claim to be perfectionists, but that just means they are wasting time fixating on inconsequential details instead of moving on to the next task.

Amen to that.

Web Design News 26/07/10

Posted in News on July 23, 2010 by Paul Boag

This week: Why the fold doesn’t matter, big wins with quick changes and what’s the best size for a search box?

Life below 600px

If there’s one thing that clients mention that makes designers and developers see the red mist it’s the concept of ‘the fold’. A popular concept from the print era, when newspaper headlines were displayed at the top so that they could be read when the paper was folded, it migrated to the computer age and denotes where content disappears below the bottom edge of the screen. The majority of designers know that most users know how to scroll, and the increase in screen resolutions mean that the fold is a vague concept rather than a defined limit, yet we often struggle to explain this properly to our clients when challenged.

Paddy Donnelly has written a fantastic article which is a physical explanation why the fold doesn’t matter, and why designing for a fold may even damage your site goals in certain situations. It’s written in a way where you could send the link to your client and let them learn exactly why the fold doesn’t matter as much as they think it does. So the next time your client asks where the fold is, send them here!

Big wins with quick changes

Lather, rinse and repeat. If there’s one thing shampoo bottles have taught us, it’s that we shouldn’t just do something once, we should keep trying until we’re happy, or our shampoo runs out. In the web design world, iterative design is an effective method of ensuring your site is effective, and responds to user feedback.

Ryan Carson shares a recent iteration of the Think Vitamin Membership site, explaining how the original wireframes how they reworked the wireframes and the site based on this feedback and made some changes to their microcopy which resolved the issues they had in a reactive fashion in a short amount of time.

What’s the best search box size?

Search is an important component of any large website, especially online retailers, yet little thought really goes into how that search box works, and how many characters should be viewable. Luckily for us, Christian Watson has trawled the top 30 websites out of the Internet Retailers top 500 list, and determined the average number of characters that these sites use in their search boxes.

Wether this actually makes a difference or not is yet to be seen, but when that time comes when you have to decide how large to make that search box, remember this little piece of research which will help you make up your mind.

Happy customers through an improved checkout

Posted in User experience on July 12, 2010 by Paul Boag

You would think that the checkout form would be simple. However often users abandon their purchase, because the checkout form fails to deliver.

How hard can it be? All you need to do is collect their name, address and credit card information. That is all it takes to complete a purchase. Surely that is pretty straightforward.

In fact there are many ways you can make or break a checkout form, which is why I have compiled this list of common issues to consider.

I suggest you look at your own checkout and ask the following questions…

Do we provide positive feedback?

Most ecommerce sites are all too keen to tell you when you have done something wrong. However, users also sometimes need encouragement that they are doing the right thing. A visual indication that a field has been completed correctly goes a long way.

example of positive feedback

Do we provide examples of how a field should be completed?

If there is any doubt about how a field should be formatted (for example date formatting) it is worth providing an example for clarity.

Checkout form that includes an example of how a name should be formatted

Are we validating form fields as users enter information?

Instead of only validating a form when it is submitted to the server, also validate on the client side. This creates a more seamless user experience and avoids data potentially being lost when submission goes wrong.

Do we place error messages next to the problem that needs correcting?

Too many website only list their error messages above the form leaving the user to identify where the problem lies. Instead place the messages beside the form field that is causing the problem.

Example of error messages placed next to the problem

Have error messages been written with the user in mind?

Often the error messages on checkout forms are written by developers. Sometimes they are written more with debugging in mind than helping users overcome problems. What makes sense to a developer does not necessarily make sense to a user. Always ensure error messages are reviewed by somebody with UX and copywriting skills.

Finally, remember that although it is not bad to add some humour and personality to your error messages, they should also help the user overcome their problem. Examples like that below maybe amusing but are not very helpful!

Are we saving the user’s progress and handling timeouts gracefully?

There is nothing more annoying than searching for your credit card only to return to checkout and find your session has expired.

Actually I tell a lie, there is something more annoying. That is when you make a mistake checking out and not only does it returns a validation error but also wipes the form you had carefully filled in.

Data can be lost for all kinds of reasons from timeouts to connectivity problem. Save user data often, so they do not need to re-enter it if anything goes wrong.

Have we set good defaults?

Picking good defaults for fields can save users a lot of time when completing forms. For example the vast majority of users want you to remain logged into a site and so have the ‘remember me’ option selected by default.

An example of a login form that has remember me checked by default

Are we allowing people to see their password when entering it?

Another nice feature of HuffDuffer is the ‘show password’ checkbox. This overcomes a common usability problem while maintaining security.

Users often mistype passwords without realising it because the password field is blanked out for security reasons. By allowing users to reveal their passwords when in private, Huffduffer substantially reduces user error.

Are we pre-populating as many fields as possible?

The only thing users hate more than filling in forms, is doing so twice. Despite this a surprising number of websites ask users to do exactly that.

For example some websites require users to fill in both delivery and billing address even when identical, or enter their name again when the site already knows it.

Even if you cannot be certain what a field should contain, pre-populate it with your best guess. The user can always overtype your guess if required.

Are we forcing users to register upfront or waiting until the end of process?

As is pointed out in an excellent article on econsultancy.com, most users do not like to register.

When buying, users are focused on purchasing and believe that registering will slow that process down. In fact the only additional piece of information required is a password.

Although registration provides benefits for both parties, users will often abandon the checkout process if forced to register.

A better approach is to offer them the option to register by creating a password at the end of the checkout process rather than the beginning. The sale has been made and the user is now mentally ready to consider the benefits of registering (like order tracking).

The registration form at the end of the checkout process on the Speedo website

Does the checkout work with Javascript disabled?

I am appalled at just how many websites do not work with Javascript disabled. This is not some moral comment about the accessibility issues surrounding Javascript. Instead it is a financial argument.

As many as 1 in 20 users have javascript disabled for numerous reasons and no self respecting retail outlet would turn away 1 in 20 people from its store.

This is an area that causes a lot of confusion so let me be clear: I am not saying ecommerce sites cannot use Javascript. I am just saying that it needs to work when javascript is turned off.

I have already mentioned a number of techniques that require Javascript to work. However, the site should still work if these extras are not available.

I am not talking about building two versions of the site. I am talking about building the site without Javascript and then layering some additional javascript on top to create a better user experience for those that have it.

Is the validation on fields forgiving enough to understand different formats?

One of the most common problems I see on ecommerce sites is the frustration caused by forms not accepting user entry because it is formatted incorrectly. This typically includes:

Dates
Credit card numbers
Passwords

The most frustrating part is that the user has entered the correct information, just not in a format which is accepted by the system.

Take for example credit card numbers. Do you enter them with spaces, without spaces or maybe even with dashes? Why should the user have to worry about this? It is a simple matter for the website to reformat the data later. This should not be the users problem?

A checkout form that requires users to enter a credit card number without spaces or dashes.

Is the user suffering because of technical constraints?

The problem of data entry formatting is part of a wider issue where developers make users responsible for problems that they should not have to deal with.

For example, why should users have to fill in CAPTCHA fields because the website has a problem with SPAM? It’s not the users fault.

Cartoon highlighting how hard CAPTCHA is.

Image source, Geek and Poke

Ask yourself if there are places on your website where the user experience has been compromised for the sake of an easy life for the developer.

Does the browser back button work?

For many users the browser back button is an invaluable tool that they rely on for navigation. However too often in the checkout processes, hitting the back button either entirely loses the users progress or returns strange errors that cause confusion and uncertainty.

Are we being greedy in the personal data we ask for?

It is understandable that those running ecommerce sites want to collect information on users, discover how they found the website and get permission to correspond with them in the future. However, users see these as barriers to making a purchase.

Even when these fields are marked as optional, users have to mentally process them and decide whether they should be completed. At the very least they have to check that they are not being opted-in to junk mail as in the example below.

Example of a checkout form where the user is being asked for unneccessary information and is being opted in to unsolicited email.

Keep these kinds of marketing questions until after the product has been ordered. You are less likely to alienate the user and will gain a better quality of response because the user has not been tricked into completing the fields.

Are we rewarding users who go the extra mile?

When a user does go the extra mile and signup for a newsletter or tell you how they found the website, make sure you reward them for their time. Instead of using their email address to spam them why not email them a gift certificate or some other form of thank you.

During the US election, those who donated to the Obama received a free T-Shirt. This is not only a great gesture, it is also an excellent advertising strategy. Why couldn’t you do the same for your customers who are willing to signup for your newsletter?

Obama fundraising website

Are all of our buttons descriptive?

Users often do not read explanatory text, instead relying on links and buttons to decide what action to take next. However, when those buttons do not make sense out of context they can prove confusing.

Take the two examples below. If you were scanning those pages quickly and didn’t read the copy which is clearer:

Example from ebuyer.com that requires the users to read both text and button

Example of a site where the button describes the next action without the help of explanitory text

Could our instructional text be clearer and more concise?

Many websites suffer from verbal diarrhoea during their checkout process. There is a belief that by using more words the message is clearer. However, in reality they just put people off from reading the text.

Take for example the amount of copy associated with this field in a checkout form:

In reality all that is required is:

A heading entitled ‘Do you have any instructions for the delivery driver?’
A field for instructions that has a character limit to prevent a user entering too much.
A link to your terms and conditions
A submit button.

There is no need for the current amount of text.

Do we require users to remember a username as well as a password?

Why does any site (let alone an ecommerce site) ask a user for a username? Surely you are just giving the user another piece of information to remember in addition to their password. This just doubles the chances of them failing to login.

A better way is to use their email address as their unique identifier. Its easy to remember, is guaranteed to be unique and is already a required piece of information on almost all ecommerce sites.

How do we handle bank card validation?

Sooner or later even the best designed ecommerce site has to hand control to the bank for credit card processing. Unfortunately there is little chance to control the user experience once this happens. From the paypal website to VISA card validation, these sudden changes in user experience can make customers nervous.

Verified by Visa example form

It is important to clearly communicate what is happening and minimise the impact to the user. Too often users are simply dumbed onto these pages with no indication as to whether the order has been completed or why they are there.

Conclusions

The reason I have written this checklist is because in the rush to deploy it is easy to forget these nuances of design. However it is these details that make the checkout process pain free and trustworthy.

We often concentrate too much on functionality and not enough on user experience.

I am not suggesting that failing to implement any one of the points will drive a user away. However, combined they have a significant impact on how somebody perceives the reliability and ease of use of your website.

Sometimes it just needs another set of eyes to look over your checkout and pick up on these problems.

So what did I miss? What things would you add to my checkout checklist? Post your ideas in the comments below.

Are you concerned about your checkout process? I would love the opportunity to review it and help fix any problems found. Email me and I’ll take a look.

Looking for more ecommerce posts? Try my post on Calls to Actions.

Web Design News 08/07/10

Posted in News on July 9, 2010 by Paul Boag

This week: A new BBC News homepage on the way, Using CSS3 and media queries to make robust background images that fill the browser and learning to love vendor prefixes.

BBC News redesign on the way

This week the BBC announced that they’re nearly ready to launch a major redesign of its web site, stating: “We have focused on design and navigation, looking to see how we can make all the existing content we produce each day easier for you to find, use and share”

The BBC are one of the leaders in usability and accessibility and it will be interesting to see what changes come with the new design and I’m sure you’ll see a raft of posts dissecting the new site when it’s launched. This post by Sitepoint highlights some of the upcoming changes focusing on the areas where sections have been cleaned up and streamlined.

Given the BBC website’s ubiquity when clients refer to other sites to be ‘inspired by’, I’d recommend taking the time to get really familiar with the new site when it’s launched, not only learning what they have done, but why they’ve done it too.

Supersize that background, please!

Using large images that fill the viewport of a users’ browser has long been a popular technique among web designers, especially when it comes to marketing and photography sites, however the age old issue of viewport size is a constant worry when deciding on the size of image to use. Over the past few years we’ve seen an increase in screen resolutions with the most popular being 1024x768px, 1280x800px, 1280x1024px, and 1440x900px and we’re also seeing an increase in smaller resolutions as mobile devices access our sites more and more.

Supersize that Background, Please!

This article by A List Apart shows how you can use both CSS3 backgrounds and Media Queries to deliver large backgrounds tailored to the specific viewport size of the visiting user and which will work in just about any modern browser you may encounter.

Learning to love vendor prefixes

Vendor prefixes (such as -o- -moz- -webkit-) can, at times, be annoying and cause us to duplicate our code to suit the requirements of the browsers on the market today. This duplication has caused many to call for them to be dropped, or rolled into a specific prefix like -beta-, however this article by Eric Meyer takes you back in time to the browser wars of the nineties where Microsoft and Netscape implemented wildly different versions of the box model and wreaked havoc for years, causing us pain even today when catering for older browsers.

Eric points out that the vendors still implement things differently today, and that the vendor prefixes are necessary for designers today to ensure their code works around these inconsistencies without hacking the CSS parsers like we used to do ‘back in the day’ so while prefixes may be annoying at times, it’s better than nothing at all.

Web Design News 22/06/10

Posted in News on June 22, 2010 by Paul Boag

This week: The Boagworld Podcast goes off air, how to design better and faster, using stories in your design ideas and how to think from a users perspective.

Boagworld Podcast takes a break

The biggest news of the week (at least if you are listening to this… maybe) is that this will be the last Boagworld Podcast in its present format.

As I announced this week on the Boagworld blog we are taking a 6 month break from podcasting before returning with a new show and a new format.

To be honest at this stage we are not quite sure what that will be. That is why we wanted to take 6 months off to experiment with new formats and different material.

Between now and the end of the year we will still be putting out just as much content as we are now, but in a variety of different formats as we experiment with where to take Boagworld.

In fact we are starting these experimentations with a niche Webinar that we will be holding on the 21st July. If you work as part on an in-house web team then you maybe interested in joining us for a free interactive session where we talk about battling bureaucracy and ensuring the website gets the attention it deserves. To register your place email me on [email protected]. Remember to secure a place you need to be a permanent member of a web team in a large(ish) corporate or public sector organisation.

This will no doubt be just the first of more niche content that addresses the different needs of different members of the web community.

Dolphins saying 'So long and thanks for all the fish'

ShopArtGallery, Shutterstock

Design Better And Faster With Rapid Prototyping

If you have watched my presentation about Pain Free Design Signoff you will know I am a great believer in working collaboratively with our clients and showing them everything from initial sketches to final comps.

However considering the looks I get from some other web designers when I suggest such a hands on role for the client, I was beginning to wonder if I was alone in this view.

Fortunately an article entitled “Design Better And Faster With Rapid Prototyping” on Smashing Magazine has reassured me otherwise.

When talking about engaging all stakeholders in the design and prototyping process the author writes…

Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

He goes on to say…

Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.

I couldn’t agree more!

The post goes on to look at how best to use prototyping and client interaction in the design process. In particular it looks at the fidelity of your prototypes in terms of design, functionality and content.

A graph describing the different levels of fidelity in prototypes from sketches to fully interactive websites using real content

He also provides a great list of do’s and don’ts that includes my favourite line in the post…

Do work collaboratively with users, business and IT stakeholders while rapid prototyping. Apart from giving valuable feedback, they also gain a sense of ownership of the final product.

This is a great article and definitely worth reading.

Using Stories for Design Ideas

Prototyping is a great way for discussing possible solutions. However, often there is a need to communicate and discuss the underlying problem first.

Before we can agree that a new feature is required, we first need to agree what problem it is solving. To do that we need to understand what the user wants.

User testing can partly help, however it doesn’t really focus on understanding the users ‘story’ or their motivation.

An article on Johnny Holland Magazine talks about how stories can guide our design process and inform what we do on our websites.

This is a new concept for me and one I am still wrapping my head around. However, as I understand it the idea is to take the problems we believe users are experiencing and weave them into a ‘story.’ This story that not only identifies the problem but also how the user feels and behaves.

Once you have the story it becomes easier to rewrite with a ‘happy ending.’ An ending where your website solves the user’s problem.

It’s a hard concept to explain so I recommend checking out the post. It contains lots of examples of how to turn a basic problem into a story and then how to use that story to generate a solution.

In essence it is an alternative to brainstorming that is ideal for the collaborative approach I have been talking about. This is because everybody is working from the same stories and so understands the problem that needs solving and the proposed solution.

An example of user centric thinking

While on the subject of understanding the users thinking, I want to conclude with an example and how it can solve very real problems.

The problem I want to look at is checkout abandonment. More and more people are abandoning the checkout process when purchasing from an ecommerce site. Of those users a whopping 29% are giving up because they are forced to register. That is second only to hidden charges being applied at checkout.

Abadnoned shopping cart

Sam Aronov, Shutterstock

In order to solve this problem you need to understand how users think. Why do they hate registering so much?

According to econsultancy the reasons are as follows…

Completing my purchase will take much longer than if I didn’t register.
I will need to provide lots more personal information.
I will start getting spammed with offers and promotions.
The retailer will pass my personal details on to third parties, who will also start spamming me.
Why do they need me to register? All I want to do is buy this one thing.

After reading that list you can understand the users point of view. The question then arises – why not remove registration entirely? As econsultancy points out, there are a lot of benefits for both the customer and retailer in registering. It’s just that the user cannot see that.

The real genius of the econsultancy post is what it does next. After identifying the feelings of both customer and retailers the post focuses on the crux of the problem…

The ironic thing about the whole ‘encourage customers register’ challenge is that when you break it all down, all new customers should be required to simply complete is one additional field – the create password field.

By understanding the users objections on a granular level you discover quite how small a problem is how obvious the solution.

Instead of asking the user to register up front you move the password creation field to the end of the checkout accompanied by the question “Would you like to save your details for next time?”

Actually I think it could be made even more compelling by asking “Would you like to save time when you next purchase?”

By understanding that while purchasing the user is focused on the buying process rather than registration, it becomes much easier to find the right solution.

This is user centric thinking in action.

Death to design by committee

Posted in Web strategy on June 17, 2010 by Paul Boag

We all know that design by committee leads to horrendous design and yet committees happen anyway. In this post I ask why, layout the argument against them and look at ways to overcome the problem.

“Wow that looks great, let me just show it to a few colleagues before I sign it off.”

At first glance the above statement looks positive. However if you have worked on websites for any length of time you know it is the kiss of death.

Even if there is no formal committee, any web designer and most website owners will tell you that once a design is ‘shown around’ only bad things can happen.

Designer with a gun to his head

olly, Shutterstock

The problem is two fold.

First, design is subjective, what one person thinks is amazing another hates. Unfortunately website owners often feel they need to please everybody.

However, once design becomes a group decision you inevitably end up with a bland design that nobody hates but nobody likes either. It is not so much design by committee as design by compromise.

Second, stakeholders rarely have all the facts to make an informed design decision. They don’t know the projects history or understand the target audience, business objectives and success criteria. Even if they do have these insights they rarely have an understanding of why the designer took the approach she did. Nine times out of ten the person is simply shown the design and asked “what do you think?”

With design by committee so flawed and the results so substandard why does it still happen?

Why design by committee exists

Although to those of us who have experienced design by committee the drawbacks seem obviously, to a first timer it can appear necessary and even appealing.

Some of the common reasons for design by committee include…

The website owner is not the decision maker - Instead he is a project manager who has to get approval from higher in the organisation. This is a particular problem on larger websites.
The website owner feels out of his depth – Many website owners have never run a website or made decisions about design. They therefore feel the need to get the advice and opinions of others to reassure themselves about their decision.
Because design is subjective – The very reason designers argue against design by committee is also a reason for it. If design is subjective how can the website owner be expected to make a design decision alone? Surely they need to consult others to get a wider opinion than their own personal tastes?
It shares the responsibility - In many organisations there is a culture of blame and ‘arse covering’. This inevitably leads to website owners being reluctant to make decisions alone. They know that if they consult widely then it is harder for them to be blamed when things go wrong.
It is politically necessary – Many website owners know that committees are bad for the design process. However, they are left with little choice if they want a design to be approved. Without consulting internal stakeholders the design is likely to get blocked on principle, whether or not it is a good design.

A client feels out of depth giving design feedback

corepics, Shutterstock

When you look at design by committee from a certain point of view you can understand why some take this approach. However, there are things that can be done to overcome these arguments, while at the same time combatting the problems design by committee creates.

How to overcome design by committee

Once you understand the reasons behind design by committee there is actually a number of alternative approaches.

Separate the problems

Design feedback normally falls into two categories – aesthetic and structural. If a design is going to be rejected it is because somebody doesn’t ‘like the feel’ or there is an argument over who gets what featured in the navigation or on the homepage.

The danger is that an entire design will be rejected on the basis of a content dispute or because somebody doesn’t like the blue. This is throwing the baby out with the bathwater.

Avoid this by making sure the stakeholder doesn’t just see the final design. Instead present mood boards and wireframes.

The mood board focuses on aesthetics while the wireframe looks only at the structure and information to be included.

This has two advantages. First, it allows the stakeholders to separate in their minds decisions about aesthetics and content. This prevents entire designs being rejected because of minor issues.

Second, producing mood boards and wireframes is considerably quicker than final designs. This means that even if an element of the design is rejected it does not require major rework.

Divide and conquer

Another tactic for overcoming design by committee is speaking to stakeholders individually rather than in a group. Although this is best done in person, it can also be done over the phone if necessary.

Design committee arguing over colour

corepics, Shutterstock

Although individual discussions takes more effort the benefits are enormous….

It prevents design on the fly – When a group of people discuss design they try to reach a consensus. This means that they make design changes in the room and you loose control. By speaking to people individually you prevent this problem.
It neutralises the ‘alpha male’ characters – In group meetings you will always find somebody who dominates the conversation (not always a man!) They overwhelm quieter members and bounce people into agreeing with their standpoint. By consulting with people individually you avoid them having too great an influence.
It puts you in control – By speaking to stakeholders individually you are the only person who knows what has been said. This puts you in a powerful position that allows you to pick and choose the feedback you use.

Of course any feedback is bad feedback if the stakeholder doesn’t understand the context of the project.

Ensure opinions are informed

Some stakeholders argue that they do not need background information on a design in order to judge it. They say that users don’t have that background, so why should they? The answer is simple, they are not users.

A stakeholder needs to judge the design from a business perspective as much as that of a user. They need to understand the business objectives, they need to know about corporate guidelines and what the competition is doing. In short they need to understand the context in which the design was created.

However, in many cases the stakeholder is simply given the design and asked “what do you think?”

The obvious solution is to provide the background to each stakeholder before asking for feedback. However if we are avoiding group meetings then presenting to each stakeholder is time consuming and repetitive.

Also even if you do present to each stakeholder there is nothing to stop that person passing the design to others for their feedback without your knowledge or presentation.

One way to avoid this problem is by providing the design as part of a presentation either in powerpoint, PDF or an application like Get Signoff.

Unfortunately people will not always read the copy associated with a design. Therefore an even better approach is to record a video of the design with an audio track explaining your approach. This is hard to ignore and ensures the design will never be seen out of context.

The problem does not just lie in controlling the presentation, it is also important to control the feedback.

Control the feedback

If you ask stakeholders “what do you think?” you are encouraging a personal response. This is actually not the feedback you are seeking.

Bill looking horrified at stakeholder feedback

Ljupco Smokovski, Shutterstock

Instead ask questions that focus the stakeholder on the real issues…

Does it meet the agreed business objectives?
Do you feel the target audience will respond favourably to the design?

It is also worth focusing the client on factors that informed the design…

Is the design inline with your corporate branding?
Is the design what you expected based on the approved mood board?
Does the design reflect the agreed visual hierarchy agreed in the wireframes?

Notice that the above questions all require a simple yes or no answer. This prevents the feedback straying into personal opinion. However, it is also a little restrictive so we always ask “if not, why not?” after each question.

Asking “why not” achieves two things. First it forces the stakeholder to better articulate the problem and ensure there is a valid, well reasoned argument behind their statement. Second, it opens a discussion that a simple yes/no answer prevents.

Unfortunately no matter how well presented a design, there will be times when people cannot agree. In such situations testing can break the deadlock.

Turn to testing

Ultimately any amount of stakeholder feedback has a limited use. The stakeholder is not the user and it is the user that the design must appeal to. That is why whenever possible a design should be tested with real users too.

Design testing can be an effective way of breaking deadlocks between stakeholders. By asking users to comment on design you effectively render the personal opinions of stakeholders redundant. Best of all design testing can be done cheaply and easily using services like Ethnio and What Users Do.

Whatusersdo.com

Finally it is worth reminding stakeholders that no design decision is set in stone. Often the best way to evaluate design is by putting it live and seeing what happens. Things can always be changed later.

For larger sites (where the stakes are higher) A/B testing should be making many of the design decisions anyway. Ultimately testing is always going to be more effective than the opinions of stakeholders.

Conclusions

It is important to note that at no stage in this post have I tried to exclude stakeholders from the design process. I believe that design is a collaborative process and not something that springs spontaneously from the creative mind of a designer.

What I have tried to communicate is that although the contribution of stakeholders are valuable they have to be informed and shaped into something that is actually of use to the designer. Comments like “I don’t like the green” doesn’t help anyone.

Playful design

Posted in Design on June 16, 2010 by Paul Boag

While at Web Direction @Media I caught up with Aral Balkan and Christian Crumlish to discuss playful design and whether it is appropriate to add elements of playfulness and humour to any website.

Boagworld Big Breakfast

Image Source: Davo39

Paul: Actually you’ve got to clap again because we’ve got two guests coming up.

Relly: Yay!

Paul: We’ve got Aral Balkan, come on up Aral.

Marcus: Come on down!

Paul: Come on down. You have to walk along way….oh

Marcus: There are steps.

Relly: He’s got the legs

Paul: Oh wow look that, look at that leap to the stage!

Relly: Wow look at that. That’s enthusiam!

Aral: Where shall I sit?

Paul: You can sit there that’s fine. And we’ve also got Christian Crumlish, come up as well. Come and join us.

Christian: It’s bright here.

Paul: Just relax, relax.

Relly: Tonight’s winner..

Paul: You don’t need to get right on the mic.

Christian: No?

Relly: Do you feel a little like Parkinson now?

Christian: Aaaaaaah

Paul: No. Just relax, relax back and it’s all good.

Marcus: Yeah, just point it slightly towards you.

Relly: Yeah, slightly towards you and it’s good.

Marcus: Ok that’s it, there we go.

Christian: There we go.

Paul: So, we’ve got…So, Aral, later today you’re giving a talk, which is ‘The Art of Emotional Design’.

Aral: Yes.

Paul: Which is a superb talk and I enjoyed very much the last time I heard it. Is it completely re-written for today’s new audience or are you re-using your entire…..

Aral: Entirely within the last two weeks.

Paul: Yeah, yeah I believe you.

Aral: Err, no.

Paul: (laughs). And Christian you’re talking about ‘Designing for Play’.

Christian: I already have done.

Relly: Yeah, that was yesterday.

Paul: Oh was that yesterday?

Christian: Yep you missed it.

Paul: Oh no! I can’t believe that, I thought it was today. I’m gutted now.

Relly: How did it go?

Paul: Did it go well?

Christian: You have to ask…everybody else.

Paul: Did it go well? Was it good?

Relly: How did it go?

Christian: It went well for me.

Paul: Oh thumbs up.

Relly: Yay, thumbs up.

Paul: Whoo, well that’s good. Right. So what I thought we’d do in a few minutes is talk about his idea, cos both of you’re talks are meshed together, you know. They’re not the same talk but they overlap between them. And this idea of ‘Emotional Design’ and ‘Playful Design’ is something that seems to be really reoccurring a lot recently. A couple of weeks ago we had an interview with Steven Anderson on the show, we talked about emotional design. Last week it seemed to come up, there were three articles in one week about emotional design and then we come here again and it’s all about emotional design, playful design, all of that kind of stuff. So, I’m interested in why both of you have chosen that subject. Why that has become your passion. So, let’s start with you Christian. Why ‘Playful Design’?

Christian: Well the umm…I guess the idea grew out of the work I was doing my broadly in the area of social web design. I was curating the Yahoo website design pattern library and we spent some time focusing on the idea of social design patterns to try and generalise the things there were showing up over and over again at many sites, and kind of cataloging them, so that other people can kind of learn from, you know, past experience. And as I got more and more into that I realised that designing for social interaction is quite different from sort of classic UI design. Where if you think about when you say UI, that’s User Interface, it sort of implies a single person operating, kind of a device that gives them their own personal information back. You know they open up their files or they check their mail or they look at their checking…cheque book account or that sort of thing. And that social interaction inherently implies a multiplicity of people. Using the tools, not so much so talk to the computer but to each other through the technology. The technology at best kind of gets out of the way, in fact, which fosters that communication. So when you’re designing…umm……now I would never say that UI design is easy, cos there’s so many ways to do it poorly, and there’s many skills involved in doing it well and yet it’s a fairly well constrained and controlled environment, often, you can say there’s branching choices down the paths that you make but ultimately many users are going to have essentially the same experience. Whereas when you design for a social experience you have to give up much more control, you have to grant that the users…..collaboratively are going to create their own experience. And at best you’ve kind of set up the boundaries, open up a space for them, give them some guidance, you know some helpful things but at some point it’s like inviting people over for a party. You know the party lives and dies by the guests, you know, not by the h’orderves or something like that. So that thinking led to this metaphor of play and ways that we can borrow from the real world and that how you can foster that kind of social interaction. You know, like how it’s been done in the past throughout civilisation and I found the concept of play useful because it cuts across everything from sort of unstructured, child’s play, you know, playground play, what makes things fun to gain play and I think actually the idea of borrowing from game design is not fresh, I mean a lot of people have been talking about that but I wanted to be sort of systematic and say “Well what distinguishes a game from just loose play?” Games have rules, games have goals, games have some of dynamics and how can you borrow those ideas to bring it in to fostering social experiences.

Then I also wanted to take it further into the playing of music and how are instruments designed to be on one level challenging and hard to learn but on the other hand to help you play, to support what you’re doing and to make your mistakes sound good and things like that.

Paul: Hmm, yeah I can see that. And what about your Aral? I mean you started….it’s been a little while now that you’ve been talking about this idea emotional design. Where did you passion for that come from?

Aral: Well, I think mostly from being disenchanted with the experiences that I’ve had with, you know, certain…..whether it’s websites or applications or….I mean I get frustrated very easily when I’m using things. If you think about the amount of your day that you spend interacting with, basically non-human experiences. Whether it’s a vending machine or whether it’s your cellphone. It’s increasing taking up a larger amount of our days. So, if we’re having bad user experiences, it’s not……I mean user, in fact, is almost redundant, you know user experience….it’s affecting our experiences, our life experiences, so I think as someone who creates applications and creates experiences I was very aware of that. And these things frustrate me so I don’t want to create the same frustrating experiences, I want to create the kind experiences that are fun and that kind of lift up your day, that give you a little boost. You know cos seriously what we’re talking about is that stuff that we’re creating affects the welfare of people, you know, we’ve got to move on beyond user experience and thinking about his as experienced design. We’re actually designing experiences that affect how happy people are on a daily basis and I think that’s where we need to move beyond just thinking about usability, which is a base that we need to reach. We need to reach that and until we’ve reached usability, until an app is usable we can’t talk about anything else. But once we’ve reached that I think it’s now time to talk about how we can build things that are delightful, pleasurable and fun, that improve peoples’ days, that improve their lives. That’s why I’m passionate about this.

Paul: Yeah, you really are, I can tell. (laughs)

Aral: At 7am in the morning.

Marcus: If you didn’t have any bad experiences though, there would be nothing to tweet about.

Paul: No. I mean that’s 90 percent of Twitter isn’t it, is moaning about…..

Aral: And moaning is good if you’re not……But if you’re not frustrated at things, if you don’t have issues with things then you won’t change them, you won’t…..you know, and I mean I think designers are unhappy with certain things and want to improve them and change them. Or else why would you, you’d be happy with the status quo and you’ll be like things are okay. And I think some of the best designers are some of the angriest people I know. If that makes sense.

Relly: My husband would desperately come under that.

Christian: (laughs). He’s not an angry man.

Relly: He is when you present him with a bad user experience.

Christian: Exactly but you’ve got to use that and kind of go okay now how can I make this better.

Paul: You know I don’t like to boast but I would say that I think Headscape has produced the most emotional powerful design ever. Marcus do you wanna share….

Marcus: What?!

Paul: No, no, you were the one that discovered it. Do you wanna share your experience about testing for a certain pet charity website? Where you got the best emotion response ever from someone?

Marcus: Well we didn’t…….the very first test was for design testing. She didn’t make it through the test, the whole of the assessment.

Paul: She didn’t make through ten minutes.

Marcus: It wasn’t even that, no, she left in floods of tears.

Paul: So we made someone cry with our design. That’s how good we are.

Aral: What did you do?

Relly: They drew a picture of a flogged puppy I think.

Paul: So basically this was for a pet charity website and the first woman that came in for the design test session…

Christian: Do pets give a lot of money to charity?

Paul: Yes, apparently yeah. …..So we brought the design up on the screen and this woman took one look at it, burst into tears. And it was because the dog on the screen reminded her of her dead pet. So she cried. And that was it.

Marcus: She could not get past it. She tried. And I thought “Is this how it’s going to be for the rest of the day?” It was for the rest of them, it was kind of a good day but I was very concerned.

Aral: For the record that’s not what I talk about emotional design. It’s not how to make users cry.

Marcus: I want to go back to what Christian said about…..cos I’m a musician….about comparing design to musical instruments. Is that what you’re saying there……cos obviously to master a musical instrument takes a lot of time but it’s an incredible pleasurable thing once you’ve mastered it. Are you saying that good design, or potentially good design in certain circumstances is something you need to learn? And that it will be more enjoyable because of it?

Christian: No. It’s a good question and I think I need to be clear about sort of what level I’m applying the metaphor to. What I’m saying is that………also what I’m talking about is the concept of generative interfaces in which users then co-create something. So, often instead of giving people a finished, completed….what you’re giving them is tools that they then can use to express themselves, you know. And, so I’d say I sort of think of it of a spectrum, where the loose, unstructured, easy play is the simplest thing to enter into but maybe something that ultimately doesn’t allow you to fully express yourself. And then the game like structures give people more facility, more structure, more of a context in which to interact with each other and have experiences and then giving people sort of instruments. So the instrument metaphor is for the user more than for the designer. Then there’s the spectrum of are you giving them a toy piano, a ukelele, a very easy to learn, easy to start with instrument that maybe eventually is going to top out not allow them to play Bach or something like that. Or you giving them a harpsichord, or you giving them an electric-guitar with a rig or something like that. And maybe you can give them a scale of tools so that your super users can be, you know, really rocking out, inventing things you never thought of inside the context that you’re building. I’m still toying with this metaphor, wherein I’ve gotten some push back for exactly the reason that instruments……musical instruments are sort of famously ‘hard to learn’. You know there’s that idea that it’s a big hurdle to get over and it’s discouraging for a lot of people, especially if they don’t start as a child. It was partly my own experience playing the ukelele and learning that 1) some instruments are easier than others, so you can sort of give others an ‘on ramp’, a simpler thing to do, that delights them and draws them in further and further and also more generally as I was kind of making friends with my first ukelele, one thing I realised was that the instrument isn’t fighting you all the time. The instrument has been designed, over millennia sometimes, to actually fit a human hand, to tend to sound good if you just stay reasonably within certain boundaries. You know it’s tombed so that accidentals come in sometimes and help you out. And that’s actually one of my key points is to make it so that when a user makes a mistake, it might sometimes have a beneficial effect rather than giving them an error and throwing them out.

Marcus: That’s something that I’ve never thought of before. I really like that analogy. It’s why guitarist complain about playing stuff in E-flat and stuff like that cos your accidentals never work.

Christian: Exactly, and the horn players don’t want everything to be in G or E minor and things like that.

Paul: I’ve no idea what you’re talking about. This is all beyond my head.

Aral do you think that there are times where this is all in danger of becoming gimmicky? Do you know what I mean? That….you know….

Aral: With the show?

Paul: (laughs)

Relly: Oh that happened a long time ago.

Paul: That was ages ago.

Marcus: I was going to say, the whole premise is….

Relly: …..a rolling gimmick.

Paul: You know with the idea of playfulness and emotional design and all this kind of thing. You know I look at some of the great examples and the one that springs to mind is Mail chimp, right? Everyone goes on about Mail chimp being emotional design, things about it that make your smile.

Aral: And Aaron’s amazing.

Relly: That’s true, he is.

Paul: Yes, and absolutely, it’s great but you know……and they should the example of when they pull out the browser window and eventually the monkey’s arm snaps off, which is just so cool. But it’s equally…..it’s borderline gimmicky as well. Do you think there’s a danger of that?

Aral: Yeah, of course there is. I mean you know………you shouldn’t be recreating Clippy in what you’re doing, is the key thing here.

Relly: That’s a rule for life, I think.

Aral: Yeah, exactly. I mean when I build an application I’m quite aware that I’m putting my character and an aspect of myself into it. So, for example I have an app where they are little emotie blobs, these cute little things that look like marshmallows, that you know, kind of guide you along but they’re not Clippy, they’re kind of……..I’m aware that it’s an aspect of my character that’s in there and it’s been designed with that in mind. Um, Clippy….you know, why doesn’t Clippy work then? Clippy’s suppose to be in there and helping you out and something that you can relate to, right but who’s character is it? It’s Microsoft right? It’s Microsoft’s character that is in Clippy. Whenever I look at Clippy, I see Steve Balmer in paperclip form, you know, staring back and me and it’s like ‘Hey how you doing?’

Relly: I think I prefer that actually, Steve Balmer in paperclip form.

Christian: I could go for that. Yeah, I think these things, I think any of these things can become gimmicky if they become formulaic and if it’s just imitation of an idea without necessarily understanding why it was there in the first place. You see that kind of cloning of other people’s ideas all over the web, all the time.

Aral: There’s something to be said about authenticity and I think that’s the thing. You’re communicating, the things that we built communicate with people and just like humans can be authentic or not the experiences you’re creating can be authentic or not and I think it’s key to be authentic and crafting these experiences.

Christian: Also I think when you say human, I think that’s an important point. I think part of the trend, Paul, that you sort of……and picking up on that a number of different people seem to be approaching these ideas from similar directions, I think, is in the sense that interfaces in the technology are becoming more human or opening up more spaces, or the need to or they are. But you know, computer science and the history of it has been training human beings to learn codes and to do things in a very rigid way and once you become an expert of that you sort of become protective of that idea. It’s like a guild that you’re in and it gives you an advantage and why make it easier for grandma to do it or something like that But think that…..for instance Chris Fahey has been giving a good talk on how interfaces are becoming more human and having faces and having personalities and having conversational qualities and things like that. Um, which turns out to work much better because our minds have evolved from talking to human beings not from entering codes into teletype machines or something like that. So, I think there is a gimmicky aspect to it that can reduce to that but think the more broad direction that has a lot of power to it is the sense that the computers need to move much closer to the human experience and become warmer and more emotional and that’s actually not something that’s just cute or clever but actually works better.

Paul: Yeah.

Aral: And it’s difficult to do as well because if thing about how difficult it is for human beings to communicate with each other. I mean we know human right? We are humans so we should therefore know humans and yet how often do you miscommunicate? Yet how often do you misread body language? Or what am I actually trying to say? Am I being sarcastic or not? Um, and I talk about his in my presentation as well but if you then remove the human from the equation and then try to script that interaction you get something that’s far more difficult to actually talk to a human being where you’re not involved in the conversation firsthand and to try and script that is very difficult.

Paul: Hmmm. I mean right at the beginning Christian, you were talking about that you’ve come at this from kind of a social angle and that that was how you approached the subject. Do you think that this kind of emotional design or this playful design applies only to social sites or is it actually…could it apply to every site or are there some situations where it shouldn’t apply?

Christian: Um, yeah, I don’t think that it’s limited to when you’re designing for social interaction. Certainly, you can have….. I mean don’t know, for instance, how social mail chimp is except inherently that email is has a social quality but……so I think that playfulness can sort of exist certainly in a ……you know you can put jacks about yourself and things like that and so that certainly exists. You know there probably is a time and a place for it and I sort of say there is a dichotomy between play and work and you know, nobody likes work, have to do it you know, if they didn’t pay me I wouldn’t do it. That’s sort of the quality of work yet the world sort of requires people to take out the garbage and drive the trucks and things like that so we probably can’t create a utopia where everything is playful all the time, maybe you know….going to the funeral home to deal with your parent’s death is not going to be a playful experience on some level and doing your taxes may never be playful and things like that. I think that still you can nibble around the margins probably and take some of the drudgery and some of the dreariness out of it. Sort of like the idea of getting usability……get the horror out of it and then maybe you can make if fun, that’s a higher ambition but certainly context is all, you know, these things are not universal laws that you have to always be thinking about who’s going to use this and in what context? You know, so there’s going to be giant industrial systems that are probably going to remain mechanical and inhumane for quite some time.

Paul: Yeah.

Aral: And if you looked at…..If you saw Simon Willison’s talk yesterday when he was talking about crowd sourcing as well, he showed some examples of how even mundane tasks you know, can be made fun, by making them into a game basically, like identifying a scenic part of town for example made into a hauternaut style experience. They do the same with Wildlife Near You to try and pick the best animal photos that have been submitted. So even mundane tasks can be made fun if you make them into a game and add elements of play.

Christian: Yeah, I think that some if it is just not settling, not accepting that things have to be done in the most dreary way that first occurs to you, again, because maybe it’s easy for the computer to just make form and have them fill it out. You know, why not stretch a little bit and make it easier for the human and a little harder for the computer.

Aral: Yes, I think the way I approach is I basically see user experience or creating good user experiences as worrying about the right thing. The right thing is your users problem, not your problems. To the example I give is that if you’re starting your project and the first thing you think of is what’s my database structure going to be like or is it normalised? You’re working about the wrong thing, you’re worrying about your own problems. Then you’re going to trickle that solution to the user, trickle it down and that doesn’t work. Or trickle it up actually.

Chrisitan: How many times have you said ‘Well why don’t we do it this way?’ And the developer says we can’t, we already made our contextual decision, it’s not possible.

Aral: Exactly. That’s the point ……

Relly: That’s everything that’s in my talk. Hooray, I’ve got it right.

Aral: Awesome. Go see Relly’s talk, she’s talking about that. But that’s the key thing. And the thing is if you worry about the users problem you’re going to be creating more problems for yourself. But that’s okay because our problems don’t matter it’s okay if we have to work harder. For mostly you do.

Relly: Lean back from the mic, lean back from the mic.

Christian: Well we’re getting paid and the user isn’t so…

Aral: Yeah, yeah exactly.

Paul: Well. Do you know, this is a subject I could talk about all day. It’s far more interesting that what we’re going to be covering next but we’re going to stick with my programme. T here’s nothing like selling up the next show.

Thank you so much guys for coming on, I really appreciate it. Give them a round of applause.

Christian: Thanks for having us.

Paul: Feel free to go and join the audience.

Is there a business case for buying an iPad?

Posted in Mobile, Reviews on May 27, 2010 by Paul Boag

So you want an iPad, but is there really a business case to buy one? As a freelancer can you justify the cost? As a website owner will you be able to persuade the boss?

As web designers (and to a lesser extent website owners) we love the latest gadget. The iPad is no exception. However, if we look at it dispassionately from an entirely business perspective, is it worth the money?

Let’s be honest at the start. The iPad is not designed primarily as a work machine. It is designed for watching videos, reading books and surfing the web while lounging around the house. That said, I think there are three possible business reasons for getting an iPad…

For testing
For the applications
For the portability

Lets examine each.

For testing

When you are desperately trying to come up with a reason to buy yourself an iPad this is probably your first line of attack. After all the iPad is selling like hot cakes, which means it will not be long before a lot of people will be accessing your site using it.

It is also true that the iPad is a unique browsing experience especially in terms of the touchscreen. There are also differences between how an iPad and an iPhone render a web page and none of the iPad browser emulators I have found accurately display like the real thing.

ooo… what is that interesting looking website featured in the screenshot above. You should check that out ;-)

Testing is a fairly solid argument for having at least one iPad within your company. However lets not kid ourselves, we were not anywhere near as keen to spend hundreds of dollars buying screen reader software so we can test on that.

For the applications

The iPad already has some great applications for web designers and website owners. Here are a few of the most notable…

Tweetdeck for the iPad

Tweetdeck for the iPad is the ultimate way to stay on top of your social media responsibilities.

Newsrack and Instapaper

This is how RSS feeds were meant to be read. It is so much nicer being able to relax on the couch rather than sit at your desk (although admittedly you could do that with your laptop).

Newsrack

instapaper

Dropbox for the iPad

Having instant access to all of my files has already been a lifesaver since buying the iPad.

dropbox

FTPOnTheGo for the iPad

This program allows you to connect to your web server and edit files to your hearts content. I wouldn’t want to do a lot of coding on this, but its great for quick changes.

FTPOnTheGo

Audio Notes for the iPad

The best noting taking app ever! Take notes in a meeting while recording the audio. Can’t remember what your notes meant? Simply touch the note to hear the playback of the audio at that point in the meeting. If like me, you are crap at taking notes in client meetings then this will be invaluable.

Audio Notes

Moodboard for the iPad

We use moodboards a lot in our design process. They are a great way to give the client a feel for our approach without spending a lot of time on design. However creating moodboards can be fairly time consuming in their own right.

Moodboard for the iPad makes the whole process quick and painless. It is perfectly possible to throw together a moodboard with the client in a matter of minutes.

iMockups for the iPad

Although nowhere near as sophisticated as something like Flairbuilder, iMockups does allow you to create quick and dirty wireframes with the client. However personally, I prefer pen and paper.

Obviously the list of applications will grow over time. However, although these applications will only become more impressive I don’t think the iPad will ever be a production powerhouse. It is meant primarily for the consumption of information rather than production. At a push it can do both, but you will still find yourself returning to laptop for most production work.

For portability

The final ‘business’ reason for buying an iPad is portability. This really is the perfect conference device and ideal for client meetings.

Lugging a laptop around just for the sake of taking a few notes, checking email or surfing the web seems like overkill. That said there are two flaws in this argument.

First, you already own a laptop so can you justify the expense just for the sake of a few pounds in weight? Second, if you want portability then you need 3G connectivity.

Of course the 3G connectivity is expensive and also only provides 3G for the iPad. What about your laptop? It’s not like Mr Jobs has allowed us to tether our Laptops and iPads. Even if he did that is one hell of a big modem!

One option is to buy a Mifi instead and get a wifi only iPad. This allows you to connect either an iPad or a Laptop to 3G via wifi.

So is there a business case?

If I am completely honest I would say the most common answer is no. The testing argument is strong, but it is still early days and although it is nice to know your site works on the iPad it is not critical.

Unless you are a constant road warrior who does nothing but surf the web, answer email and take notes, then the iPad is not business critical. It is a nice to have but you will find yourself constantly returning to your laptop.

However… buy one anyway. There may not be a business case but you will not regret it for a minute. It’s a great media consumption device and it will prevent you from spending so many hours hunched over your laptop in a darkened room.

Sometimes you just have to treat yourself.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Stephen Anderson on emotional design

Posted in Design, Mobile on May 26, 2010 by Paul Boag

A chef in a restaurant wants his food to be more than edible, he wants it to be delicious. As designers we should want our websites to be more than usable. Stephen Anderson shares techniques for delighting our users and ensuring they love our sites.

Paul: So joining me today is Stephen Anderson. Good to have you on the show Stephen.

Stephen:Thank you. Good to be here.

Stephen Anderson

Paul: So I heard you at SXSW this year and thought I have to get this guy on the show. You gave a brilliant talk . How would you describe it? How would you say that it was about?

Stephen:Well the phrase that I’ve started using is the title of the talk, and it’s actually caught on, is “Seductive Interactions”. It’s actually caught on in conversations where people have started saying “Oh yeah. He’s the guy that’s started talking about seductive interactions.”. as if it’s a different type of a thing. It was really just the title of the talk but it’s becoming a phrase that people are using. Basically what I’m interested in is what motivates people to take certain actions online. So if you look up the definition of seduction it’s encourage people to take up a certain behaviour. There’s a second half to that definition and it’s frequently sexual in nature but I just ignore that part and cross it off. [Laughter] But the way I talk about seduction, it’s things that happen both online and offline. They happen anywhere there are humans are involved where we have a real good time; we get seduced by whatever it is. This can be a first date which is the analogy I use in my presentation. Or It could be going going to Disney World or a good concert, any number of experiences.

Paul: So how did you get attracted to this? What’s your background? How did you end up looking at this as a subject?

Stephen:So my background if you go back about 12/15 years, I started off as a web & graphics designer. Of course there’s that period of maturity where you start thinking more about what people want to do on their site, can they find their way around the site. You start to think about usability, information architecture and those things. Then you start to think about product strategy, business goals and what we are trying to achieve here from a business perspective. Eventually where this journey has lead me is to a fascination to psychology. What makes people make certain decisions or behave in certain ways. In many ways this is full circle for me because before I started off as a designer, I was a high school English teacher, teaching in gifted and talented classrooms. At that time I really got fascinated by some of the burly brain science and some of the learning theories. Particularly around what can help students remember things or retain knowledge, what can get their attention. If you’ve got a classroom of 9th graders for 90 minutes you really need to figure out how to motivate them and how to keep them engaged. So I guess I had a trial by fire early one with young kids. But now I’m applying a lot of those things to the web context.

Paul: So this seems to be becoming a growing area in popularity. I’m seeing more written about the role of psychology in web design. How do you see it fitting into the equation alongside things like usability for example? Because it isn’t a usability issues. It’s more of an engagement issue.

Stephen: Yeah, an engagement issue or a motivation issue. In fact I draw a pyramid I called the User Experience Hierarchy of Needs Model.

It’s kind of gripping on what Maslow did. I talk about how there’s basically six stages. The first is you have this great idea: something that’s functional and works. The example I used to explain this is the development of mobile phones. So you look back to the original Motorola phone, it’s this big giant brick but everyone’s jumping up and down because you don’t have to have lines; you can walk around freely. And then over time it moves up and you’ve got to work on the reliability. Let’s make the cell network more reliable. Eventually people start to think about usability It makes sense for engineers but let’s make this make sense for most people. So you start thinking about form factories, you start thinking about usability and things like that. So that’s all the bottom half of the pyramid Then the top half is the part that I’m really fascinated by. There’s often a shift from making things usable, removing the problems, removing the barriers to making it convenient. The distinction I draw there is if something;s convenient it works a lot more like I think. A clear example of this would be Google Maps. Prior to that you had Map Quest. Map Quest was a perfectly usable product but then Google Maps comes along and you can drag it, you can resize, you don’t have to click arrows. You can do all these things that are much more natural. So that’s an example of moving from a perfectly usable map system to one that’s more convenient. And then of course the highest levels are the ones that I really enjoy talking about, what makes something pleasurable. That’s where we start to engage people on an emotional level, a seductive level and make things fun. The highest level of course isn’t one that you can cause or create but it’s one that you can design the conditions for and that’s meaning. Actually designing products that add meaning to people’s lives. So if you look and go back to that mobile phone example. We had the original Motorola brick that people carried around. Then you have some efforts for making things more usable You have Sony Ericsson, a design company and an engineering company coming together to create what’s supposed to be a more usable, a more friendly phone. But there’s a point at where you have to switch from what’s the task we are trying to do to what’s the experience we are trying to create. I would roll the clock back a little bit before the iPhone and look at the original Motorola Razor and although it didn’t revolutionize the actions, it was the first mobile phone where someone said “This is the industrial design. This is the form factor I want to create. Let’s make the engineering confirm to this form factor.” So they were starting with the aesthetic experience of holding this phone, opening this phone and it was an enormous success for Motorola and then the iPhone comes redefining interactions, setting the bar for those. Of course that’s a very meaningful device for people. It’s a lot more than a phone. It’s a mobile computer device that we’re all tied too. Anyway, that’s kind of my framework and how I think about all these things. And of course when you talk about psychology and motivation, that upper half of the pyramid where you’re making things fun, meaningful, engaging, playful. All these things appeal to us on an emotional level.

Paul: So let’s talk about that idea of motivating users. Obviously most websites have a call to action, whatever that might be. What kind of techniques are you talking about here to motivate users.

Stephen: There’s definitely a lot of things that I talk about in the presentation that are more of the presentation vent. But there’s also things like how can we leverage psychology to make the message easier to understand or easier to comprehend or understand why it’s important to me. So I tried to cover all of those things. There’s easy things that people do already like testimonials. Lots of sites have testimonials and that’s an example of social proof. Where we see these big brands or familiar names or we see a lot of people endorsing something. That just puts us at easy and let’s us know I feel safer giving this entity, the site, my personal information. So that’s an easy example. I’m interested in the more playful things where you create I wouldn’t call it a game but you create a game-like experience or create something that’s very playful. The example that I use in the seductive interactions presentation is the music site iLike. There’s a little game that I’ll mention in a minute but when you are signing up on the registration process it’s pretty routine until you get to the part where they want to know what kind of music you like. If you’ve signed up for any number of music sites there’s a pretty familiar pattern or a pretty familiar point you reach in the registration where you get the familiar empty form field where it says “list you favourite bands or artist, separated by comma.” So we have to recall from memory who are our favourite bands that we like. Or we might list 5 bands and then continue on. iLike does something very different where instead of giving you the empty form field they splash up a screen of randomly selected bands and they say “Click on the ones you like.” First of all it’s a very surprising or unexpected interaction so it’s getting my attention as it wasn’t what I expected. I’m seen all these pictures of bands, most of them I recognise. Even if I don’t care for the music, I recognise the music and I don’t have to recall anything from memory. It’s just very fun. My hand doesn’t leave the mouse. Instead of going to the keyboard I can just click on things that I like. So I start doing that and there’s about 3 bands out of the 35 that I click on the first page and I get to the bottom where it asks “Do you want to see more or are you done with registering?”. Of course I haven’t clicked my favourite bands yet so of course I want to see more. End of story, I recount that I went through ten pages of clicking more they basically didn’t give me the option to continue. But it was lot of fun just doing that. Seeing what they would splash up next and would the results on page 5 be better than page 3, when they see that I’m not clicking any bands from a certain genre. So there’s not a game per say to that but it’s very playful and game like in it’s engagement. So that’s an example I use. The flip side of that, I talk about having a fun time and I think I clicked on 35 bands, the flip side of that is the business goals where these music sites really want to know what your personal tastes are. For them the gold mine is your data – what you like. So if you compare business results for a site like that versus many of these other music sites, I offered up 35 bands I like where on other sites I might only offer 4 or 5. It’s a win/win. I had a great time and they got more data out of me.

iLike Rate Artists

Paul: This issue of game like playfulness. It’s something that’s been coming up again and again recently. A lot of people are looking to the computer or video games industry for inspiration. Do you feel that there’s a difference between making a website game like and making it playful and fun?

Stephen: Absolutely. In fact I draw a distinction between game and game-like. I’m currently giving a similar talk called “Serious Play”. It’s really about how I can bring a lot of these ideas that I talk about to more traditional business applications like a college enrolment form or filling out your tax returns. These things that we traditionally consider kind of boring business apps.

Paul: Yeah because when a lot of people think about their website they think “Well there’s no way I can introduce game features into filling out a tax return”.

Stephen: Correct. Well there are actually ways you can do things like that but I what think a lot of people are doing is looking at the success of things like FourSquare and GoWalla or the site StackOverflow, which is a knowledge sharing site for programmers and developers, and they are saying “Great. How can we make our sites more game-like?” They’ll point to Four Square and say “Yeah, we want badges and we want levels. We want points. We want all these things.” I think you are seeing right now a whole wave of sites that are throwing in these very basic game mechanics: points, levels, scoreboards, achievements and so on. The comment I make is that if you are building a game, even the best game in the world, games often have an unlimited duration. So you think about that new Xbox game you get in the mail on Friday afternoon and you hibernate over weekend playing the game and you emerge Sunday night or Monday morning having completed it. There are obviously other games like FarmVille where there’s this idea of an appointment mechanic where they want you to keep coming back in short bursts over a sustained period of time. Even that, when you talk t FarmVille fans, after 3 or 4 months can get a bit tiring. That’s just one reason that I tend to shy away from making things a pure game. The other reason is that I find it kinda cheap and easy to use game mechanics. What I’m more interested in is why any of these work in the first place. Why did I care that I got a badge from FourSquare for checking in 50 times. Why is this important to me? Or more to the point the awful idea of mayorship in FourSqaure where I become the mayor of a place I check into frequently. OK It’s kind of a nice perk. I’m the mayor here because I’ve checked into a place more than anyone else but there’s a point at which someone else checks in and ousts you as the mayor and suddenly you have to drive back and go to that restaurant or go to that bar to try and reclaim your mayorship. I’m fascinated by why these work in the first place. So rather than talk about things like levels and mayorship or points, I talk about things like appropriate challenges which have universally gone back thousands of years. We love challenges. Variable rewards. The most baltant example of that being slot machines. Pattern recognition, curiosity, reputation status, social proof. These are all things that are timeless that motivate us. So if we can start with that as our basis, I think we’ll come up with creative things like mayorship rather than just copying those things. Mayorship is an example where, if you go to psychology there’s this idea of loss subversion. Once we have ownership of something we really don’t want to lose it. it’s also tied into this idea of endowment effect where we may not have valued it before we had it but now we have it we value it much more than we probably should. It may be mayorship on the surface but they are tied into these deep psychology principles.

Paul: Yeah. Are there people out there that you feel are doing this particularly well at the moment? Are there examples of sites that are particularly using these psychology principles?

Stephen: Oh yeah. I mentioned iLike and there was a second half to the iLike story where they literally created a game. A music playing game where you have to identify a song within a certain amount of time. One of the clever things there is that they introduced this idea of status by way of your best streak. When we say status a lot of the time we think of how we are standing relative to other people but status also means how you are standing relative to yourself. So if you look at the classic video games, Pac-Man, Q-Bert and things, it was “Can I beat my high score?”. For the really good people there was a leaderboard – could you be on the top 10? But for most of us it was “Can I get better than I was before?”. Which is tied back into the status. I’ve recently began using MailChimp quite a bit. I had an example or two in my presentation but I hadn’t really been a user until about a month ago. I started using their service and they have just got so many playful things built in across the site. One of these is that at the top of the page, no matter where you are at, there’s always their chimp, or their monkey, or their mascot. There are these random phrases that he says. Sometimes it’s a random phrase and he says “I kissed a chimp and I liked it”. You know, little funny things in reference to pop culture, music. Other times it’ll be links to just funny, non-secular videos like who would win in the challenge between Chuck Norris and Iron Man. It’s a link and you click to it and there’s a YouTube video where someone has the Iron Man action figure and a Chuck Norris action figure and there are fighting it out. It’s just fun stuff not really tied to the task you are doing on the site. But what MailChimp is that people using the site, doing these tasks that are not necessiarly the most enjoyable things in the world but they are smiling, in a good mood while they are using this. People have talked about “I was doing my newsletter and I looked up and saw the chimp and I just smiled. It just made me feel better.” And the interesting thing there is that there’s quite a bit of psychology around our emotions and how we are more relaxed or in a happy state of mind where we are more likely to find workarounds to troubling situations. Dan Norman talks about this in his book called Emotional Design. Talks about an ATM study where the more attractive ATM was perceived as easier to use. The interesting thing is that you can go back to studies in the forties and there’s a very famous study where they ask people to… it was a creative problem challenge where you had to figure out how get a box of matches stuck to a wall or hold up a candle to the wall. I’m getting fuzzy on the details but basically what they found from that was that people that we agitated and of a foul disposition where much less likely to find the solution compared to those that were in a more relaxed state of mind. We see this in other areas such as brain storming. Part of the reason why it’s good to get everyone relaxed and comfortable at the beginning of a brain storming session is so that our brains are able to make those connections. All these ideas are really human principles that can be applied any place a humans involved whether it’s online, offline or whatever the interaction may be.

Get Mental Notes Resources

Paul: Some of these things almost feel a little counter-intuitive when you’ve come from that school of usability. For example, you talked at once stage about making things challenging and actually from a usability perspective that’s the last thing you want to do. You want to make things easier. Then on the other hand you talked about MailChimp and about how they put a link to a video to outside of the work flow of what they are doing. They are actually distracting users from what they are doing at any particular time. There’s a bit of a balance here I’m guessing.

Stephen:Yeah there’s definitely a balance. You’ve got to evaluate everything based on what the context is. But there are some things that are, as you say, counter-intuitive For example, putting in constraints where you might put in a restraint on a review that you can write about someone. It might see counter-intuitive to do so but that introduction of scarcity, in this case character scarcity, actually encourages people to respond because they feel like “OK so 400 characters. That’s easy it won’t take more than 5 minutes of my time.” The site I’m referring to is a site called Ripple. If I wrote to my peers and said “Hey. Give me a review of how I’m doing” our instant response is “I don’t have time for this” or “It’s going to take a lot longer than I have”. But if it’s limited to 400 or 200 characters then it’s a trivial task. So there are those examples. I talk about curiosity and how actually plain hard to get, to go back to the data analogy actually encourages or increases interest, participation or engagement. The fundamental idea of curiosity is that you’re teasing people with specific details that intice them to want to know more. A great online example is LinkedIn where if you roll the clock back on LinkedIn a one point there was this big brick wall where they say “If you sign up, pay our monthly fee, here are all the great things you can get.” So traditional value pitch. Then you have all the personal stuff that you can see what’s freely available. They kind of moved that wall over a bit and they started teasing people with little details. So for example someone at Apple looked at your profile this week. Or a CEO in the gaming space looked at your profile this week. So they are giving you very specific details that are specific to you but if you want to know who in Apple looked at your profile or what CEO in what gaming company was looking at you, you’ve got to pay to get full access to that information. So that’s a great example of using curiosity Definitely some of this is counter-intuitive or seems like it would run contrary to what we know. With the gaming conversations one thing a lot of people would say about gaming is, and to a certain extent playfulness, is that these are definitely less efficient ways of doing things but by trading off efficiency you get more engagement and more involvement A simple example that I saw on a site a few weeks ago… I don’t know how to describe it. It’s in the mall or the shopping centre that you might go to and there are these funnels where you can put a penny or a quarter in and watch the coin spiral down over a period of 20 or 30 seconds. It gets faster and faster till it goes into a bucket. It’s just a playful experience but it’s fun to watch a coin spiral around. But if you peel away the playfulness of that experience part, all you are doing is pulling a coin out of your pocket and throwing it in a bucket. But if people put the bucket in the middle of the shopping centre, no-one would do it. So they are adding this playfulness, adding this inefficiency.

Paul: I think sometimes we tend to forget that we’re not mindless automatons. We’re not robots as human beings. We don’t always do things in the most efficient way and we don’t desire to do things in the most efficient way. I think that a lot of the time with the usability background that we have, and the way that we have been approaching web design for years, it’s all about taking off the rough edges. It’s all about making that process as simple as possible but perhaps we dehumanise it a little bit in the process.

Stephen: Absolutely and I think we with usability you definitely want to remove the barriers in the UI or the interaction. But I think there’s this idea that the interaction or the experience needs to be easy. What we know from all different realms, from cognitive science to psychology, is that where it’s easy, people get bored and aren’t engaged. In fact the all refining is where people really learn or really can devote to hours or days of their time is when you create an interesting challenge or interesting problem or put out a curious question. Those are the kinds of things that our brains reform and in response to those we get a little bit of a high from solving a difficult challenge. So something that we biologically crave is these challenges. Nothing too difficult though or else we’ll give up. But nothing to easy or we’ll get bored. So I think the trick is to use that appropriate challenge that increases people’s interest and engagement. There was a study with I think it was kindergartener’s I think it was elementary grade school. The teacher would present the children with an interesting question or challenge in one test case. In the other test case the teacher just presented the raw facts. In the case where it was presented as a question that the students had to figure out the answer to a good percentage of the students, the majority of them, actually worked through their recess time to solve the problem. So I think wow! If you can look at elementary kids who are giving up recess and time to go outside on the playground to solve this geography problem or whatever it was, I can’t remember. That’s powerful stuff.

Paul: Absolutely. You played this little mind game on your audience at South By. Because you teased us. Right at the end of the session you gave out these mental note cards and you gave us a little sample of them. I’ve been champing at the bit waiting for the actual ones to be released. Tell us a little bit about those. I just think it’s such a brilliant idea and I really would encourage everyone to get their hands on them when you release them. Explain what they are.

Stephen: So I’ve been mentioning all these principles from psychology and again my background is design. I’m a designer. I don’t have a degree in congitive science or psychology But as I started reading a lot of these research papers or these business texts. Some are just popular best sellers like Predictably Irrational. Things on influence like Robert Cialdini’s book on influence and persuasion As I started reading these I started taking notes on things that they were talking about with the idea of: How can I use this on my next project, my next website or my next iPhone app? How could I use whatever the finding was from this research on this project? I think there’s a very real problem where we come across all these great ideas but then we get into the project we focus on the basic usability things; we’re just getting the project done on time. We don’t leave time and we forget about all these really creative things that make our work exciting. And so out of that I started putting each idea on a separate index card and ended up with a stack of these ideas and cards. I would pull them out whether I was in the middle of a project or beginning a new project. The idea was basically how can we use or leverage this idea from psychology? This thing we know from human behaviour to accomplish a particular behavioural or business goal. So the example I use is let’s say you are trying to get my more people to sign up on the home page. That’s your goal. You need more people to click on that. It could be anything. To get people to come back again. Whatever your business goals are. I translate that to a behavioural goal if it’s not one already. What do you we want people to do on the site? Then the idea is that you pull out one of these cards and say “How can we use curiosity to get more people to register?”. Or “How could we social proof to get more people to register”. The card will offer the definition of that idea and then list some suggested application ideas to get things going. But the idea is that you would draw one of these cards and you would, as a group or by yourself, sit on it for a good 10/15 minutes brainstorming different ways you could apply that principle. A great example, I mentioned social proof earlier on and I mentioned testimonials, and that’s a very clichÈ almost over used way to leverage social proof, but you look at something like There was a campaign about six months ago to fix Outlook basically. When you have to do emails where you basically have to custom write code for Outlook. You can’t just use CSS or standard mark-up So the campaign was designed to get more people involved and promote this petition against this. They used social proof in a really clever way where when you went to the site, they had the message front and centre in a floating box but the entire background was comprised of these avatars from people who had

Paul: Oh yeah. I remember seeing this.

Stephen: yeah, yeah. The thing is that this wallpaper of avatars, you saw a thousand faces staring at your, was refreshing every 10 or 15 seconds. If you hovered over a face you could actually see or read their comment. it was a very powerful and very visual way of literally being able to see the social proof, to see that lots of people are engaged and behind them, supporting this campaign. I don’t know if they said “How can we use social proof?” or how they came about that idea but the idea of the cards is that you would be able to come up with ideas like that. By focusing on one principle, one thing we know about human behaviour and saying how can we use it to solve this very specific problem.

Paul: So when are these cards going to be out? When are we going to be able to get our hands on them?

Stephen: I’m wrapping up the work right now and I’m shipping off to the printer late next week.

Paul: Oh excellent.

Stephen: It’s coming along. Print time and the packaging and all that, they’ll be wrapped up at the end of May and they’ll be shipping the first week of June. So my year and a half long journey on these cards is nearing the end, or the beginning depending on how you want to look at it. I’m quite excited to get my hands on those. I have been able to test pilot at some workshops I’ve done. I’ve just been blown away by the response.

Paul: Absolutely. Even with that little preview set that you gave out, we’ve been using them. They’ve been immensely useful. You can find out more about those at http://www.getmentalnotes.com. At the moment you can pre-order them for $38. So if you are quick and get it in before they actually come out you’ll get it at a discounted price. You get 50 in a pack is it?

getmentalnotes.com

Stephen: 52.

Paul: 52. Of course.

Stephen: A lot of people give me a hard time of calling it a deck and not having 52 cards so, hey, I went in and few in a few extra cards.

Paul: That’s good. So for people that are impatient and can’t be bothered to wait for the cards. They want to get into this now. They feel all inspired by what you are saying. Are they any resources that you can recommend? Places that they can go to read up a little bit more on psychology I know you are intending to write a book yourself. Is that correct?

Stephen: That is correct. There’s been a lot of interest in this seductive interaction talk that I give. There’s a lot more ideas than 45 minutes allows to share. I’ve turned that presentation that you’ve seen at SXSW into an all day workshop. That of course that workshop is helping me refine and feed into a book that I’m writing that should be out in time for next year’s SXSW.

Paul: So how about in the meantime? Where can people go? is there a lot of content on the web about this or is it under represented?

Stephen: There is content but it’s just highly fragmented. Again one of the things that I found is that there is always different fields that aren’t talking to each other or aren’t even aware of each other. You don’t see a lot of connections. So a lot of my work isn’t going deep enough. I’m just looking broadly across these different fields. Cognitive science, behavioural economics, neural science, psychology, game design. So one thing I’ve started to do, and it’s still pretty basic, I’ve got a resources section on the Get Mental Notes sites.

Paul: Oh yeah. So you do. You know I didn’t notice that.

Stephen: It’s new. So I’m listing some of the general resources I’ve got through there. My plan with the cards is also to release those online in a wiki format. What I’ll do is for every card will get it’s own page. The goal when that’s released is that people will share ways they use that principle on their project or examples in the wild that people have found. I think that’s key as you only have two or three ideas that you can put on a card. Those ideas are already out of date before the cards have even go to printing. The principles are timeless but the applications are the things that I hope to see a conversation start up around. That’s been the fun part with the workshop. I’ve put out these ideas. I issue a creative design challenge and then I see what comes back. I’ve just been blown away by the ideas that people come up with. There’s some great start up ideas that have come out of some of these workshops.

Paul: That sounds absolutely superb.

Stephen: I’ll just point people to that resources section because I’ve started listing books.

Paul: Yeah I can see. I’m looking at it now.

Stephen: That would be a good single place to start.

Paul: You’ve got two books in there that I instantly that are Made To Stick and None. There are loads of good stuff. I think I’ve mentioned those two on the show but I don’t think I’ve mentioned any of the others. It’s great to check out – http://www.getmentalnotes.com/resources/. Thank you so much Stephen. That was brilliant. Really good to have you on the show. It’s an area that I’m absolutely fascinated by and I can see myself spending a fortune on all the books in your resources section [Laughter].

Stephen: I’ve spent a fortune on them myself.

Paul: I’ll make sure that I keep some back for your book when it comes out as well. Thank you very much for coming on the show. I would very much like to get you back on some point in the future as well.

Stephen: It would be fantastic. So thank you Paul.

Paul: Thank you.

Thanks goes to Lee Theobald for transcribing this interview.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Be inspired while maintaining focus

Posted in Design on May 20, 2010 by Paul Boag

Do you read tutorials and look at inspiration galleries? Do you actually implement the things you have learnt? Too many of us spend more time reading about design than actually doing it.

I received this question from Sam in Australia:

I find that I am always reading web design articles, tutorials and reading different blogs, thinking that it is all ‘inspiration’. However I end up just thinking more about my design that I actually design. Any tips?

Although we don’t realise it Sam, I suspect that most of us have this problem. I certainly have in the past.

I think the problem exists for two reasons: we read the wrong stuff, and we don’t remember and apply what we have learnt.

Let me explain what I mean.

Reading the wrong stuff

A big part of the problem is that we spend too much time reading the same kind of stuff. If you are already a fairly competent web designer how much are you going to learn from yet another web design tutorial or by looking through yet another inspiration gallery. I touched on this in “5 new skills that every web designer needs to know” and it is something I am becoming increasingly convinced of.

Slides from my presentation

I am not suggesting that reading web design blogs and tutorials are wrong. You will still learn stuff. However, you are going to learn considerably more and be more inspired by reading subjects that you know less about.

Start reading about psychology, marketing, or business instead of another post on WordPress plugins or cool stuff you can do with jQuery. It will be harder to see how what you have learnt can be applied to the web, but it will be more inspiring and will have a better ratio of new information to noise.

Remembering and applying what we have learnt

The second problem is that when you do learn stuff, you fail to implement it when a project comes around. This is because it is not enough to read stuff, you need to also assimilate it and reuse it at the appropriate time.

In order to solve this problem I turn to Getting Things Done by David Allen. He talks about the idea of context and that we need to remember things when we can act on them. He gives an example of a torch with dead batteries. The time when we need to remember we need new batteries is in the shop that sells them. Unfortunately we only remember when we next pick up the torch. Knowledge without context is useless.

Fortunately you can apply the same principles laid out in David Allen’s book to the things you learn.

Take for example an inspirational post that shows you lots of great designs. If you read the post and leave without taking action you will not remember that inspiration the next time you come to do some design. However, if you copy those designs to a program like Littlesnapper and always review Littlesnapper before starting a design, you will be exposed to the inspiration when you can do something with it.

This approach doesn’t just work with imagery. Stephen Anderson is a web designer who has taken a particular interest in user psychology. He has read extensively and learnt loads of things that inform the design process. Of course remembering and applying all he has learnt is another thing.

Stephen Anderson's Mental Notes Cards

In order to help apply these principles to his work he has produced a set of cards containing his key findings. In essence he boiled down everything he had learnt into 52 cards. Then when working on a project he pulls out a random card and uses it as inspiration for the project.

I use a similar principle of boiling down what I have learnt, but I keep the results in Evernote. I know Relly also uses an inspiration library of microcopy that she refers back to regularly.

The trick is to ensure the things you have learnt are recorded in an accessible format and that you refer to it regularly when actually working on projects.

Web Design News 17/05/10

Posted in News on May 17, 2010 by Paul Boag

This week: how design and content work together, running a design workshop, the importance of control and top tips for effective landing pages.

How design and content should work together

Relly pointed me at a superb article this week that should be required reading for all web designers and website owners. Entitled “Expanding our Definition of User Experience Design” it asks one simple question: “when did user experience design become just about visuals?”

It’s a fair question. Most web designers like to think of themselves as user experience designers and most website owners are keen to create a great user experience. However, both parties are thinking purely in terms of visual design. Content is often nothing more than an after thought.

The author of this post argues extremely convincingly that user experience design is about both visual design and content. If we wish to improve the user experience on our sites we need to consider the whole package. As Zeldman puts it…

Content informs design; design without content is decoration.

She goes on to look at practical ways those of us who truly care about the user experience can begin to convince others of the importance of content.

Ying Yang Sign

filmfoto, Shutterstock

One suggestion that resonated with me is that we should stop treating content as something separate to design. Instead of making things like content strategy an optional extra in our proposals, we should make it a required part of any consideration of user experience. This is certainly an approach I had not considered before, but it makes a lot of sense.

The more I think about this the more I feel that an agency who sells user experience design without considering content is not in fact selling UX design at all.

Running a design workshop

As I have said before on the show, Headscape runs a very inclusive design process. We believe in allowing the client to see design ideas early and in including the entire project team in design decisions.

We believe these things are important to ensure everybody is moving in the same direction and towards a common goal.

MiniToy team standing in a circle, over arrow signs aiming at a target sign at the center of the team

Antonis Papantoniou, Shutterstock

It is a viewpoint reflected in a UXMatters post entitled “Achieving Design Focus: An Approach to Design Workshops.” The post begins with the following introduction…

Stakeholders with business, design, and technology viewpoints can pull products in different design directions.

Creating a focus around design goals and asking and answering the hard design questions as a team is an effective way of coalescing a team around one design direction.

Of course the question now becomes: “How do we run this kind of inclusive process?” As the post suggests, the answer lies in running a design workshop…

A design workshop creates an environment in which stakeholders with different skills can work as one team to deliver a design solution that will help make their product successful.

The post then goes on to outline how to run an effective design workshop.

If you are a web designer this is certainly a post worth reading. We have found that design workshops are a superb way of improving engagement with the client and identifying problems early in the process.

If you are a website owner engaging a web designer, I would insist that they include a design workshop as part of their process.

The importance of control

Our next post is a great article about control on 52 Weeks of UX.

Essentially the post is talking about the importance of simplicity, a subject generally overlooked by most website owners and designers. As the article puts it…

One of the things that makes [simplicity] so difficult is the ever increasing demand to add more features, more settings, or more controls. While all these things are intended to make it easier on the user, it actually serves to create a state of discomfort and even momentary confusion and anxiety.

It goes on to discuss something called Hicks Law…

Hick’s Law is a design principle that states: “The time it takes to make a decision increases as the number of alternatives increases.”

In other words, the more choices we offer a user the more anxiety they feel about making the right decision.

studio mixer

Thomas Staiger, Shutterstock

This can be applied to web design in a couple of ways…

Navigational choices – too often websites overwhelm users with navigational choices. A large number of options is fine if the right choice for the user is obvious. Too often this is not the case with sections potentially overlapping and content not always where one would expect. As a general rule of thumb, less navigational options are better.
Personalisation – Website owners often seem obsessed with allowing users to personalise their site. Setting aside whether users really want to be able to personalise a site they might only visit once or twice a year, there is a bigger questions of whether personalisation helps or hinders. My feeling is that the additional complexity and options personalisation introduces can often cause more confusion than it solves.

Read the article for yourself and see how more options does not always equate to more control.

Top tips for effective landing pages

I want to conclude today by changing subject away from user experience to look briefly at marketing and in particular landing pages. As a recent post on econsultancy says…

If you want to do online marketing well, you need to get the basics right, and few things are more important than writing effective landing pages.

It goes on to explain that…

A landing page is the page someone sees when they click on an advert, usually next to search results but elsewhere, for example, within a marketing email.

In other words it is the first page a user encounters after responding to a call to action contained within a marketing campaign. As a result it is extremely important.

Netflix landing page

The post sums it up beautifully when it says…

If you’ve invested money in getting people to your pages then you need to make sure the page they land on makes the most of that investment.

The article then walks us through 10 tips for creating a more effective landing page. My favourites from the list are…

Have a clear goal
Make your call to action obvious
Don’t ask too much
Trust nothing, test everything

It’s a great list and ideal for somebody looking at landing pages for the first time. If you have been pushing people from your ad campaigns through to your homepage it is time to think again and this article is a good place to start.

Nudge your users in the right direction

Posted in Design, Marketing on May 13, 2010 by Paul Boag

We all want our users to do something. Unfortunately we cannot force them. However, we can give me a nudge in the right direction.

Porn! (I knew that would get your attention.)

Apparently we can all learn a lot from porn sites. The porn industry is often at the cutting edge of web design. However when it comes to persuading people to do something they are hesitant to do, there is nobody better than charities.

The secret tricks of charities

Charities – more cunning than a “fox what used to be professor of cunning at Oxford University but has moved on, and is now working for the UN as the High Commission of International Cunning Planning.” (Don’t you love Blackadder)

You know what I mean…

Sir, can I ask you a quick question? Would you like to save a dying child in Africa?

How can you say no to that?

Whether it is in the high street, via a mailshot or over the phone, charities have become experts at encouraging us to give.

However, I think they do some of their most subtle work online.

The great thing is, you can use these same techniques on your website.

Disclaimer: Use your powers for good

Of course charities use these techniques to encourage us skin flints to give generously. However, these same techniques could be used for nefarious purposes. Be careful, this will come back to bite you.

Once somebody overcomes the mental hurdle of giving away their cash they almost always feel good about it. When polled the vast majority of us want to give to charity. We just never manage to actually do it.

However, if you use these techniques to trick a person into signing up for a spam newsletter then eventually they are going to be very unhappy.

Always use these techniques to nudge a user in the ‘right direction’ that ultimately helps them do what they actually want to do.

Anyway, enough disclaimers. Lets look at some of the clever things charities do to encourage us to give.

Nudge 1: Set good defaults

We humans are lazy creatures. We don’t like to think too much and generally prefer to be told what to do (yes I know I am old and cynical). One example of this is choice. We hate choosing. In fact research shows that given too great a choice we just give up.

Imagine then how hard it is for us to decide how much to give to charity. After all the choice is only limited by the amount in our bank account.

Look at how the World Wildlife Fund overcomes this problem…

World Wildlife Fund website

As you can see they limit the number of options. However more importantly, they set a default. This default effectively makes the decision for the user.

Default settings cannot be under estimated. The vast majority of users go with the default even when it is not their preference were they to think about it.

Take for example organ donation. 90% of the UK population say they wish to donate their organs and yet only 25% are on the register. If the government simply made organ donation opt out rather than opt in they could increase the number of donors by 65%.

What about your own site? Are users required to make choices? What default options could you provide to help them make the right decision.

Remember we are not talking about the default ticking of that ‘spam me’ checkbox. We are talking about default settings that make it easier for users to do what they already want to do.

For example, what about those remember me checkboxes? Is it ticked by default? The vast majority of users would prefer you to remember them. Perhaps it is time to change the default.

Nudge 2: Make it tangible

Another thing a lot of charities do well is make the abstract more tangible. Giving money is a very abstract way to engage. What happens to the money you give? What is my money worth to the charity? How does it help?

In order to make the act of giving financially more tangible many charities go to great lengths to make those gifts feel more real.

Save the Children's website

Save the Children do an excellent job at making the abstract tangible by explaining what different levels of donation will buy. You are much more likely to make a donation of £10 instead of £3 when you see that £3 buys is a mosquito net while £10 treats 50 babies for life threatening diarrhoea.

By describing donations in tangible terms it engages us in a way numbers cannot.

Many of us fallback on using dull facts and figures when there are more exciting ways to engage our users.

Take for example, a recent campaign to fix outlook. Instead of simply quoting how many people had signed up in support, they instead showed their twitter avatars’ as a background image.

Outlook's broken campaign

Are there ways you can make your dry facts and figures more engaging? Data visualisation does not need to be boring.

Nudge 3: Delay consequences

As I mentioned earlier one of the big problems faced by charities is that people say they want to give to charity but never actually do. The primary reason for this is that people feel they cannot afford to give “right now” and put it off until later.

This is a common problem with homo-sapiens. Our rational minds know something is good for us (for example having an injection against flu) but the reptilian part of our brains shy away from the pain involved.

One way charities circumnavigate this problem is by delaying the pain. This allows our rational brian to make a clear decision without getting caught up in the short term loss.

They achieve this through “give tomorrow campaigns”. The idea is that users can create direct debits that do not begin giving immediately but instead activate at some point in the future. They can also be setup to gradually increase the amount to be given over time in order to further ease the pain.

This is also a tactic commonly used by retailers selling expensive items. For example when buying a car there are a variety of payment plans which spread the pain or delay it entirely.

Time management concept. Alarm clock on bear trap.

z576, Shutterstock

When thinking about your own website it is worth asking whether you can adopt a similar approach. It might not be in terms of payments but could be applied to time. Do you need a user to fill in their entire profile before they can start using the service? Could that painful experience be put off until later?

On the web time is the ultimate commodity and anything you can do to delay a user having to spend their valuable time will help them commit to your website.

Nudge 4: Encourage little steps to a bigger goal

When looking at charity websites, there is one thing often absent – there is very little mention of legacies (leaving money in your will). Sure it might be mentioned in passing but that is not the main focus of the site. The emphasis is placed on one off or direct debit donations.

In some ways this is surprising. After all for most charities legacies are the primary source of income. Charities realise that they need to encourage as many people as possible to leave money in their will.

Actually, it is not surprising that charity websites do not focus heavily on legacies. Charities know that most legacies are left by people with whom they have an established relationship. In other words the person has either volunteered or given to the charity for some considerable time.

That is why Charities focus on encouraging people to start giving or volunteering. They realise this is the first small step towards a bigger objective.

Redcross website - Priority 1: Get them giving. Priority 2: Keep them giving. Priority 3: Leave a legacy

There are a couple of lessons to be learnt from this as website owners. The first is the importance of nurturing a long term relationship with our users. The second is the need to guide users gradually towards the end objective.

For example many homepages go immediately for the hard sell when a better approach would be to grab the users interest and encourage them to take a small inconsequential step.

Too often we are in a hurry to convince users and pressure them to the point that they eventually leave. Remember the saying…

Slowly, slowly, catchy monkey.

Nudge 5: Use the power of social pressure

My final observation is probably the most important of all. Charities make good use of the power of social pressure. They do this in two ways…

First they use celebrities to campaign for them. They use our desire to be like our celebrity heroes, to encourage us to give. If we see somebody we admire supporting a particular charity we are more likely to do so ourselves.

Second, charities continually emphasis how ‘people like us’ are giving to them. Have you ever heard a charity telesales person tell you how many people in your neighbourhood have given? Have you ever been told what the ‘average’ donation is? All of these things play off of our desire to fit in and conform with those around us.

Social pressure is a powerful tool and one we often overlook in web design. However, there are people doing it well. Take for example the Greenpeace website…

Greenpeace website

The Greenpeace homepage is continually loading updates about people who have made a donation or signed a petition. This is a great way of using social pressure.

The Outlook campaign I mentioned earlier does a similar thing with their Twitter background.

What about your own website? Could you highlight every time somebody signs up for your newsletter or tweets about your product? Could you emphasis just how many people are subscribed to your RSS feed or attended your last event.

What about celebrity endorsements? Admittedly you might not be able to attract A list stars, but do you highlight when an industry figure says something nice about your product?

Conclusions

Of course all of the techniques I have mentioned here are used much further afield than charities. However, that is not the point of this post. The point is to encourage you to think about more than making your website usable and to start looking for ways to motivate users into action and nudge them in the direction you need them to go.

Admittedly you would not want to trick users into doing something they do not want to do, but you can spur them into taking action now rather than putting it off or forgetting entirely.

The devil is in the detail

Posted in Design on May 10, 2010 by Paul Boag

Dan Rubin joins Paul and Marcus on the 200th episode of Boagworld to discuss the importance of giving attention to details.

Paul: So next up on the show we have Dan Rubin, and Dan is going to join us for the final leg of our journey, on the 200th episode of Boagworld.Com

Dan: Hello!

Paul: Hello! Is that you Dan? Do you have video?

Dan: I pressed the button, let’s see if it comes up!

Paul: It’s working! See everything goes so smoothly!

Ryan: It looks like you’re flying an aeroplane there!

Paul: ‘Coming in for landing!’

Dan: Are you going to make fun of my headset then?!

Paul: Yes! We are! By this stage we’re so punch-drunk we’re giggling over the silly things now! You know when you get over-tired and you get hysterical?! That’s where we’re at at the moment.

Dan: It’s a constant state for me actually!

Paul: Oh right!

Dan: So I guess the way this works is that you can see me but I can’t see you?

Paul: Yeeeaaaahhhh! Unfortunately that’s the way it’s going to go I’m afraid.

Dan: There’s no unfortunately about it really!

Paul: Oh! You see that’s hurtful! Just ‘cos you’re ‘handsome Dan’! Doesn’t mean I can’t be ‘pornographic Paul’

All: (groans) Oh God!!!

Dan: I’m saying nothing! I hear there are people in the chat complaining that the sun is too bright?

Paul: Now you’re just taunting us with the nice weather!

Dan: Maybe I can do something and just close the blinds a little bit.

Paul: That would be good if you wouldn’t mind.

Dan: Hang on a bit…

Paul: Take your time Dan, we’re not in any hurry!

Ryan: That’s worse!

Dan Rubin

matthewb, Flickr

Dan: I heard that!

Paul: Dan it’s really nice of you to join us for our last hour, we need a bit of a pick-me-up and you’re the man to give it to us – that sounded wrong?!

Dan: That came out exactly the right way!

Paul: So what on earth are we talking about with Dan then?

Ryan: Whatever he wants! Go on Dan, entertain us, sing a song!

Dan: So you guys have been going 10.5 hours a this point right?

Paul: Something like that yeah, you’re going to draw us in till the end.

Dan: And you can manage to not kill each other? I’m impressed.

Paul: And we’ve largely managed to stay online which is pretty impressive!

Dan: I heard there was some roughness in the morning, but sadly I was asleep so I didn’t get to see it.

Ryan: That’s not dedication that if you weren’t watching!

Paul: There were people in Austin, up at 04.00 in the morning to watch this!

Dan: Errr….no comments!

All: (Laughter)

Paul: So what are you up to these days Dan? What are you working on?

Dan: Oh goodness! Well, a lot of conferences, a lot of training and workshops and consulting, which means not a lot of writing, which shouldn’t be a surprise to anyone who’s attempted to read my blog in the last couple of years. It’s been interesting, the last couple of years has been a big shift for me from doing a lot of client work, where there’s an end product which you can show to people and post on your portfolio pretty easily, to doing a lot of teaching and conference lecturing and workshops – public and private. That’s lead to a lot of consulting – well, I say consulting because I have no better term for it. It’s the giving of advice and aid to in-house teams or other agencies, but not in the training aspect, on a project by project basis – which is really an interesting way to work with clients because it’s not coming up with an idea from scratch and kind of leading the project, you’re there in an advisory role but you’re really the go-to advisor. I enjoy it a lot, it’s really a huge change from 15 years worth of client work – it allows you to focus on things that you otherwise wouldn’t get to focus on if you had everything to do and you were managing an entire project which is what I’m used to. So I like it, I’ve been doing it a lot over the last 2 or 3 years for Garcia Media and Garcia Interactive – they’re big companies in the newspaper design world, and Mario Garcia Snr and Jnr are wonderful guys and they work with a lot of the biggest newspaper and publication brands in the world and its really really exciting to get a chance to work with people like that. I wouldn’t necessarily be able to land some of those big papers or publications on my own as a client, but through them I get the opportunity to work on them, and to focus on exactly what I’m good at – user experience, UI design, attention to detail which if you’ve looked at a lot of newspaper sites you will know that’s not always high on their priority list! So that’s what I’ve been up to in the last year!

Paul: So how does that work on a practical level? So as a consultant are you there to go in – for example when I do it I’m there to advise on strategy, to advise them on the bigger picture – I’m sounding like a real marketing bullshit guy now aren’t I?!

Marcus: Sorry, I’m just reading jokes!

Paul: (Feigns booming executive voice) The Bigger Picture!

Dan: You sound completely normal to me Paul!

Paul: That’s because you’ve fallen into the same horrible world! But to have that outside perspective, because when you’re in a project it’s hard to see the wood for the trees, and other bad analogies? Is that what you’re kinda talking about? That kinda thing?

Dan: (Pauses) Yeah, Yeah…

Paul: I’ve left you speechless!

Dan: To be honest it varies in my experience so far between getting the opportunity because you are an outside party to the majority of the project and the nitty gritty, the project management and everything else. You can get that real 50,000ft view of the project and everything that’s going on because you’re not responsible for any of them.

Paul: It lets you think outside of the box….(sniggers)

Dan: Boy, you just don’t quite do you?!

All: (Laughter)

Paul: Make a paradigm shift?

Dan: Think outside the rhombus!

Paul: I’m sorry, I’ve thrown you again, I’ll shut up!

Dan: No, it’s alright, it’s not hard to do! One of the things that running a small agency, and small for the last few years has meant my brother and I – my brother Alex and I have run our little agency webgraph – we’ve purposely kept ourselves small – we’ve got a lot of irons in the fire, and we have a lot of things outside of the industry – whether it’s his end, his end is engineering software development, mine is the design, the front end side, the experience. But we also have a huge interest in music, which most people at some point know about my barbershop quartet, my a capella life’, the other half of me. We’ve purposely kept the agency small so we can spend time singing with the quartets, and the ensembles that we are part of . We’ve been doing that for over 20 years, and I’ve only been doing design professionally for 15 years now. Music started first so it’s always been about battling top priority with work. And we knew that if we picked up employees and grew bigger that we would have to start spending most of our time focusing on the needs of the business, and the needs of our employees and taking care of them – in addition to the needs of our own families and so forth. So we’ve kept small and that’s done the trick, but it also sometimes limits us to the size of the projects that we can take on, even though Sidebar Creative as our collective with Ordered List, Revyver and Snook and other associations that we have with a lot of other people like Blue Flavour and Happy Cog and Andy Clarke, Mark Boulton and Clearleft – the list goes on and on – it does still limit us to the size of project and so half of what I love is getting to work on these much bigger projects whether I get to oversee them or not, but when I get to work on projects for own agency and clients, because we’re so small we’re managing so much of the project and wearing so many different hats – something that has always frustrated me is that it limits the amount of time I can focus on the attention to detail and the things that I like to focus on. And it’s always frustrating because, you know how it is, you’re always battling budgets and timelines, as well as client approval and all these different things, so there’s always a point where you have to reel yourself in. And I find that when you’re really small you think that point comes sooner in the process of paying attention to a lot of the smaller details. So as an outside consultant it allows me to almost focus exclusively on a lot of those smaller details that I know for a fact normally get missed. And I feel really good about the opportunity to be able to do that because we see projects launched all the time, even by competent agencies of a larger size, that are missing details – and it’s only because you kind of get the blinders on when you are working on a project yourself, even when it’s with a big team. There’s only so many angles you can come at a certain project. When you bring someone in from outside, who isn’t encumbered by those blinders, they can catch things that you wouldn’t otherwise see. I think that’s probably the part of it that I love the most.

webgraph

Paul: Yeah, this thing of details is something that you’ve talked about loads in the past, this is something that I’ve heard you speak of before and it’s something that has become your real passion. Give us an idea of what you mean when you say ‘details’?

Dan: Oh goodness. Well, it can be anything from the typography to…well, Headscape might not have this problem, and a lot of the agencies that friends of mine work with don’t have this problem but, there’s a massive issue with a lot of sites that I see produced, with just making sure things line up!

All: Laughter!

Dan: It seems like it’s a very basic thing and that you shouldn’t have to say it but you’d be amazed – whether it’s happening in the front end CSS side or whether it’s happening in the design – usually it’s some miscommunication between the two but a lot of the time I’ll open up .PSD or Fireworks documents for clients that I’m consulting for and nothing is aligned – there’s no consistency of spacing and margins and margins – all these elements that create the glue around all the elements that give us sight lines and white space and lead us from one space to another. When these things are even 1px off they break the spacing and the lines and the patterns that we use to recognise related objects. And those things get missed a lot. And I find that most of the time with this consulting work that’s what I spend my time on, going through and fixing those basic things. Typographical consistency is another one – it’s not hard to do but somehow it just gets missed. Sometimes, even when a colour palette has been defined I’ll be sorting through screen shots that a client has produced already and I’m reviewing and I find things that should be the same colour but aren’t. And they might be minorly different, but someone just randomly used the colour picker to pick a colour that was close – and I know that there are a lot of people who don’t care about that sort of stuff, and on a certain level those are the details that are never seen, but I’m passionate about the details that are never seen. If they are slightly out of whack, slightly out of alignment or slightly out of colour, users notice it. They might not be able to put their finger on what it is, but that’s because they don’t have the language, they don’t know what they’re looking at, but they know it’s not right. And we all know that even offline with products that haven’t been manufactured properly – there’s a seam that doesn’t quite line up – we know it, we might not know which part of the process caused that problem, but we know that it doesn’t quite feel right in our hands, or it shifts just a little bit or that button that we press doesn’t go straight in, it brushes up against it’s bezel a little bit. We all pick up on these things and it effects the experience in slight ways, but add up to be more than slight details.

Paul: Yeah, it’s like death by a thousand cuts.

Dan: Exactly! You’re good with the quotes, let me just write that down!

All: Laughter!

Paul: Ahhh, I’ve turned into such a salesman! It is quite a hard thing to argue though isn’t it, because it’s not as if people consciously notice these things and it could come across that you’re just an obsessive compulsive designer that is obsessing over details that nobody else cares about!

Dan: Well you’re right, and I worry about that to be honest because I’m not an OCD person – all you’d have to do would be to look at my apartment or my desk to understand that I’m not – but there are aspects of what I do professionally that I get OCD about. Things bug me and I can’t let go of certain details. It’s not that the details themselves are what matters per say, it’s the approach that the details don’t matter vs. the details matter – it’s a higher level of thinking issue, rather than a ‘we need to fix these pixels issue’ The logic is that, if you’re OK with these little details slipping by, then you’re OK with experience issues slipping by. And you’re probably OK with copywriting details slipping by, and information architecture details and so on and so forth. And that’s the bigger picture to me, it’s just that my area of focus is the UI and the experience, even though I dabble in the other areas. And so when I go in-house, I won’t fix the copy, but I’ll pay attention to it in ways that perhaps the in-house team won’t, and so I can say ‘this just isn’t right’ or the IA or any other aspect of the content such as the way the URL’s are formed or the way the CMS is functioning. It’s kind of handy to have someone whose sole purpose on a project is catching those details – yet we don’t necessarily have that. Maybe larger agencies might have someone in a producer role who should be catching that stuff, but I see too often that even in larger competent agencies, the work they produce can miss that kind of thing. And I’m wondering if that’s a role that might be missing from teams in general? Someone that doesn’t have anything to do with production – some who is like a proofreader, only they are proofing the entire design and who is separate otherwise from the inner workings of the project – so they don’t get bogged down by things that will distract them.

Paul: I mean, essentially it’s a quality control role isn’t it? It’s the kind of thing that’s been around in manufacturing for years, but that we don’t take across to the web? It’s kind of justifiable as a role for the web because we as the web standards community, we who are passionate about usability and user experience and all these kind of things – we concentrate so much on usability – ‘Can someone complete a task’ but what we often forget is that a website is often more than just ‘Can it be used’ it’s also about ‘How does it feel? How does it resonate with you?’, and that’s where details matter. And I hate to use the Apple example, but that’s where Apple excel. They have this attention to detail where what they produce feels good! I mean, the one thing that’s being said about the iPad is that when you hold it in your hand, that’s when you fall in love with it. And what sets apart excellence in web design from merely good web design is that something, that something that makes you feel – and I think that detail in design is that something, or a part of it.

Dan: I think you’re exactly right, I think the product design parallel is very important. It’s something I began speaking about a lot last year. I’ve always been a fan of product design, of applying these things to three dimensions instead of just two and I’m spending a lot more of my time, especially in the last year plus focusing on product design and how team approach product design, and how we can take lessons from that and bring it into the web. Because web apps, and in a large way websites are products as well, they’re virtual products but they’re still products. And we get a lot of our terminology that we use on the web from the world of product design and the world of environmental graphic design – information architecture terminology really comes from wayfinder graphics and the world of environmental graphic design. So all of these things we’re doing, we’re not actually inventing anything – there are tiny types of interaction that we’re inventing but the concepts have been around for decades or more than thirty years in a lot of respects and yet we’re treating them like we were the ones who came up with it and isn’t this new challenge exciting!? And it’s not really! There’s precedent for solving this sort of problem, we’re just not looking outside of the web, outside of the screen. And something that you find in the product design world a lot is that attention is paid to a handful of things that we can’t necessarily do online such as weight, the physical weight of an item – well that’s something that we can’t do – also shape, the ability for someone to actually touch something – we can’t do that either. But then you get things like texture and colour and shape in the aesthetic sense and you start to find out that in the physical product design world, these things are really important as to how humans decide to interact with objects. Before we even touch something we look at it and we make a lot of decisions that are ingrained at a very basic genetic level but a lot of them are just learned behavior, as we grow up we see people interact with things and play with things. As we grow up we realise that this texture looks like this – we don’t need to reach out and touch it to know what it feels like. We make a lot of assumptions based on the shape, size and texture of something, and I’d love to see stuff like that brought online. It is in small ways – Apple again! We all say we don’t like to keep using Apple as an example, but when someone is so continually doing things right both online and off we should champion them as an example! They’re also championed in the branding world for their insanely consistent application of their brand elements. That’s a not a bad thing, that’s a good example. And I also think that most of us, including the Mac pundits out there that don’t just design for the web – when Apple makes a misstep we’re quick to point it out, so we shouldn’t feel bad about championing them! They do an awful lot of very good, very subtle things online – and not just online, on screen in their interfaces. And if we start to look at their hardware, we start to see that a lot of the lessons they’ve learned from designing physical hardware have been brought into what we see now on the screen. The subtle refinements that we see in the navigation bar in OS 10 and the windows, they parallel what we are seeing in the evolution of the hardware also. Anyway, I can ramble! Ryan or anyone else who’s had a conversation with me can attest to that!

Ryan: That’s why we put you on for an hour!

Paul: At the end!

All: Laughter!

Dan: Aren’t you lovely Ryan!

Ryan: I knew you’d save us at the end of a long day Dan, that’s the reason!

Paul: There is a good question that’s been raised in the chat room that I’m quite interested in your opinion on which is that you’re sounding like you’re trying to do pixel perfect design on the web, and we’re being told that we should be trying to move away from doing pixel perfect design on the web. How do you sort of, respond to that argument?

Dan: I respond to that by saying that our medium is based on pixels. If you’re designing using fluid layouts, using em’s and percentages, you’re still using pixels. And anyone who forgets that is missing one of the key points about the presentational element of what we do. I know that in the web standards world we talk a lot about the separation of content and presentation but we don’t talk about the exclusion of presentation. Ultimately if we’re designing something that is meant to assist the end user in accessing or comprehending whatever the content is we have to pay attention to details like alignment. Pixel alignment happens if we’re dealing with em’s or percentages. It’s just the way that those pixels are calculated is different. So just because you’re saying we’re not going to worry about designing pixel perfect layouts – I wish the term had never been used! I groaned the first time I heard people talk about pixel perfect layouts! It’s a very ‘Photoshop’ way of thinking and designing in Photoshop and designing in the browser has been a big topic of conversation lately. Those are two different things, and the browser, no matter what way you’re doing it is what the user is using to view your design. So if your text columns are not lining up, that’s a problem! I don’t care whether you’re measuring in pixels or percentages, you’re shit should line up!

All: Lots of Laughter!

Paul: There’s a quote for the day! ‘Your shit should line up!’ I like that!

Dan: And the discussion about browsers not rendering things consistently comes into play there is that – just make sure it lines up in each browser – it doesn’t need to look consistent from browser to browser. Those are really two different things. I for a long time haven;t cared whether my designs look identical in Firefox, and Safari and Opera and Internet Explorer 6, 7 and 8 – I’ve never really worried about that, even back, 5 or 6 years ago because I could see that they wouldn’t render the same way between the typographic differences and other slight differences. But I still wanted to make sure that whatever the user was seeing, looked like it was intentional rather than some arbitrary decision. And again, not that they’re going to notice that particular misalignment, as a mis-alignment…..one of the examples that I use for this lack of attention to detail and arbitrary decision making when it comes to alignment and spacing was the old Fox News site – the new one is marginally better, but it’s still Fox!

All: Laughter!

Dan: And the previous version was left-aligned and had 8 or 10 different measurements from the left browser point for all of the elements to be aligned. There’s no need for that! It looked sloppy, it looked like it was all unintentional. That kind of lack of attention to detail was pervasive throughout the design – it looked sloppy, it didn’t look professional. All they had to do was align everything and make sure they were consistent with their measurements and they would have been fine – it had nothing to do with pixels or em’s or anything else.

Paul: OK. Let’s ask the tough question in this. It’s all well and good to talk about this attention to detail, but the majority of people can’t afford to get someone in to design the website, and then get you in as well to quality check everything that’s been done. It’s a difficult thing – and it’s not just a money thing, it can be a time thing as well. Picking over these details takes time, polishing these things takes time. How do you overcome that mentality – we can’t afford this, we don’t have time for this?

Dan: (Laughs) Well, the answer doesn’t do me any favours but the situations where in my experience I need to be brought in is where things have gone wrong already. And I’m doing clean-up. That’s really what I’m doing. I’m very. very careful when clients contact me for that kind of work – I ask to see what they have done so far, and I’ll tell them if they need my help or not. If it’s going to be a waste of their money to bring me in because they’re doing a good job I tell them – and what I find is that a lot of the time, the problems that I end up having to fix could have been avoided entirely at the beginning of the project if everyone involved could have established these rules, whether they be systems of measurement – or there’s been a lot of talk these last few years about using grids in design. Why grids are good is that you use them from the beginning and it removes a lot of the arbitrary decision making in measurements. If you did the same before laying any type down whether it’s in the browser or in Photoshop it doesn’t really matter – you just wrote down or established in your head, this is the kind of structure we want to have, we’re going to shoot for this measurement as our base text size, and from that here are the percentages larger that our headings are going to be, we’re deciding ahead of time what size our lists are going to be, what size our sidebar is going to be and what our other content modules are going to be relative to that core system of text. You can establish all that before you actually start designing and if you find you need an adjustment, then you make an adjustment to that core set of rules that you put down to begin with and it’s easy to apply everywhere after that and you know that if you’re laying out a new page type and you know that you need this style of text in place, then you go to what is basically a working ‘style guide’ – and if you do that for margins and padding and for text elements and navigation and sub navigation, you give yourself an outline. You say this is the structure that we have in mind – we’ll adjust it as we go if needed, but whatever the current version of this working style guide is, is what we design everything to – nothing goes wrong throughout the project because there is no such thing as an arbitrary decision anymore. Everything refers back to that guide, and you don’t need an expensive outside designer to help you do that, you just need some common sense and to pause for a little bit before you start the project – it doesn’t take long to do.

Paul: So in effect you’re creating a style guide in advance, of the rules and structures of the website?

Dan: Yes, with a lot of emphasis on the word ‘guide’

Paul: So it’s something that is very flexible and fluid and can be changed – there can be exceptions to it etc?

Dan: Yeah, and the correlation is that once you start working that way you still need to be flexible for the things that you didn’t plan for! That should be a given. But when those things come along you know that you haven’t planned for them because you know there isn’t a rule that you have already established – so you sit down and you take a couple of minutes to decide how best you should design that new element so it fits in with everything else and then you include that into your guide and that’s the updated spec. We do this a lot for code – we talked about it a lot in the last few years, especially about content strategy – and what is content strategy? You’re making a plan before you write anything. It’s the same thing. It’s the same approach we use in information architecture too. We map out all of the content that we know we have to account for, and we don’t design first. We do all of the thinking and the mapping first so that when we start designing, IA isn’t arbitrary, we’re not just naming things and sticking them up in the main nav. But as an industry we haven’t cottoned on to the fact that we need to do that for design as well. And it solves a lot of problems before they become problems as well.

Paul: But isn’t it a chicken and egg problem? I’m trying to get my head around this! For me to sit down and create a style guide which outlines the size of headings, the size of sub-headings, the size of margins and padding and all this sort of thing, surely I need to know what the design is going to look like first, in order to write that? I’m a little bit confused as to what order things happen here?

Dan: I don’t think so, not to create an idea, an initial guide. For instance – once IA is done, and there’s some content planning that’s been done, as a designer, and with the amount of experience I have – the more experience you have the more able you are to picture something in your head – but I know some new designers who do a really good job of getting the big picture so I don’t think it’s a given. When I start to sketch something, and I’m talking really rough, one inch square thumbnails to give form to something in my head – I’m already getting a picture of the sort of elements I’m going to need – which I’m really taking from the IA and the content strategy anyway, and I’ve got an idea about how they are going to play against each other relatively and so I’ll know what sizes of text work well in the browser – chances are my main text content for most text heavy sites is going to be rendering out to somewhere between 12 pixels and 14 pixels, maybe up to 16 sometimes – it depends for me on the volume of content – but I have an idea in my head based on the IA and based on the content of what I can work with. If there’s not a lot of content and it’s not going to be a very text heavy site then there’s going to be emphasis given to short sentences of type then that tells me that type is going to be large – and I always have a picture in my head so it makes it easy to write that all down. And it’s not fixed which means that when I start going into Photoshop to start laying things out then I can go ‘Well I figured that was going to be 14pixel type, well I think I can go to 16 because I can start playing around with it.’ And then, as long as that works, I update the spec. It’s not really that hard – it’s just having the framework in place before you start designing, I think, forces you to think a little bit more. Then even if you change what you anticipated at the beginning, you’re now changing it for a reason. It’s not arbitrary, you’ve thought about these things. And it’s the thought process that I see missed more often than not by designers and by creatives of any sort. Generally the people that think all of the time, are really good writers. Content people are always thinking, if they’re good at it. No word is wasted. They are even more ruthless than we are as visual designers, at editing their own work. So I think we can take some lessons from that. Designers could benefit from writing an outline of their design intentions as it were.

Paul: I think the big thing there is can you picture the design before you at least have an outline – I guess, if you’re doing as you say sketched wireframes then that kind of helps in the process, But it is somewhat dependant on your approach to design. For example Mike Kus at Carsonified
– I know that when he sits down he has got no idea of what the design will look like – he starts playing around with images and moving things around, so I’m not so sure this process would necessarily work for him? I mean Ryan, how do you work, Oh, you’re just picking up a dessert there! I was going to ask when you design, how clear a picture do you have at the start, what the final result is going to look like?

Ryan: I’m shit!

All: (Laughter)

Paul: OK thanks, let’s move on! Yaili?

Ryan: I can actually wireframe a design, get it all working fine, get it in Photoshop and then go back and change all the wireframes!

Paul: Right, so it’s very fluid?

Ryan: I typically design everything twice. Once which is the original idea in my head, and twice when I go back and build something better.

Paul: Right.

superfluous banter

Ryan: I get in the zone with the first design, and then I’m kind of going on full power for the second.

Paul: (To Yaili) And what about you? Sorry, Marcus has just leaned in front of you! What about you? DO you have a process?

Yaili: No, I like to spend some time looking at different stuff that may inspire me before, but I also like to get some nicely done wireframes to work around them. I don’t like to receive wireframes that already have a lot of design.

Paul: Yeah, I know what you mean – overworked wireframes.

Yaili: Yeah! It’s like, now you have to colour in the numbers or something like that!

Paul: It’s almost like skinning a WordPress blog, it’s not really design is it?

Dan: Now lest I come across as being too heavy-handed here with that guide and pre-planning idea, I agree with everything I’ve just heard in the last couple of minutes here – whether you’re doing wireframes first of whether you’re just looking around for inspiration – all of that stuff happens before you start to get a picture in your head. I don’t think that anyone should just magically ‘POOF’ here’s my design and here’s my outline! And in some cases to be completely honest, for my own work and my own projects, I don’t write any of that stuff down, but it’s all up here (gestures to head), I’ve still got a clear picture in my head. That said I may still play for days with just moving things around and not knowing how it’s going to look, but I have a picture in my head. The fluidity of that picture is what’s key. I have some sort of idea in mind, and then I start working towards it. And that’s what I’m saying. A lot of the time I see this on larger teams – with a single designer it’s much easier because your plan can be more fluid because you only have to tell yourself that you’re changing these goals – but if you’re on a team, once you start designing as a team, you need to be on the same page. That’s where what I’m saying comes into play. Not so much with individual designers who are responsible for their own work. A lot of the time, the individual designers I know, once the IA is done, once the concept it done, once it’s just down to design and they are the only ones involved, they do really good work because they tend to be really obsessive about their own stuff. If you’ve got two designers, I don’t care how well you work with each other, and how obsessive compulsive you are, you need to communicate. You need to communicate your goals and the standards that you are going to be working towards. Once you go beyond two and three and four designers – the larger the team becomes, the more important it is to set down some sort of guide when you start. And when you start, I mean when you’re past the inspiration stage – the same way that when you set out for inspiration you set out your goals for the project, who your audience is. You know you’re all heading in the same direction. It’s the same thing, it’s just putting a marker in the sand that says, now we’ve done all this, here’s where we’re going to start looking for the next direction, here’s where we’re going. Just so everyone is starting at the same point and heading generally in the same direction. And as that starts to adjust, as needed, you start to communicate as a team and say, ‘That wasn’t working, we’re now heading over here’ – because if you started that process too early then you’d have really boring designs.

Paul: Yeah, I think that was my misunderstanding about what you were saying. I think the idea of doing the initial inspiration, messing around with a concept then doing the design – I’ve got this idea of where I’m going with this, I’ve got all these pages that need designing, now’s the point I need to put together a spec. And to be honest, the more I think it through, especially if you’re working on a website that has a lot of different page types, a lot of different content, having that document would be really useful because you don’t want to be reinventing the wheel with each page. You want to know that this page is going to be really easy to put together because I know that the type is going to be this size and I know that my padding and margins are going to be this size. And also when you’re dealing with a large number of templates like that, it’s easy for errors to creep in and differences because – especially on the type of projects that we work on where they creep on for flipping months! – because they are so big you forget what you did at the beginning by the time you are 3/4′s of the way through!

Dan: Exactly, and that’s the exact reason why we agree on a colour palette at the beginning of a large project. So that when you need to pull a colour you don’t need to invent it you just go to that light blue – you don’t need to remember the hex value, you just go to the colour palette, pull it and that’s it. So it frees us as designers and creatives to focus our efforts on the important problem solving, not all of these little details which should be consistent once we’ve established them.

Paul: Have you noticed guys how it’s taken me longer and longer as the day has gone on to actually get what people are saying?!

All: (Laughter)

Paul: At the beginning it was like (excited voice) ‘Yeah, I agree!’ and now it’s more like (tired, slow voice) ‘ I don’t get it, I’m confused, what’s going on?’

Dan: By my clock we’ve got 13 minutes left…

Paul: For me to be convinced?!

Dan: Well either that or to go in a completely different direction and go on a great rant tangent!

Paul: Oooh, go on then! What do you want to rant about? Let it rip!

Dan: OK, well I have to because when Ryan and I were bouncing around ideas about what I might want to talk about today, what we just talked about for 45 minutes wasn’t one of them!

All: Oh no! (much laughter)

Dan: But it’s totally cool! Because I love that and I’m passionate about that. So lets round this out, because I’m going to rail against certain aspects of the agency model for a little bit.

Paul: Hang on a minute, I run an agency here, just want to be clear about that!

Dan: I just want to be clear you’re paying attention!

Paul: OK!

Dan: Not the idea of agencies per say, as a whole. There are plenty of people I know who have a big problem with the idea of the agency ‘model’ And I don’t think that any particular business model that’s successful as far as the internal running of that business is concerned – if you don’t like that business model, then don’t run your business like that. And it’s unfortunate that people call companies ‘agencies’ – I call webgraph an agency but it doesn’t mean we run out business like other agencies, right? But in this case I’m referring to agencies as per the original ad agency is concerned. And there’s a problem I’ve had for a while, and by a while I mean the entire time I’ve been designing for clients!

Paul: So a long while!?

Dan: A long while! And it seems to be a problem that I’ve noticed everyone in essence, has. Even the designers and agencies and studios that have great phenomenal relationships with their clients, you can still go to the pub at the end of the work day and still bitch about some aspect of the project. Whether it’s something not getting approved that you wanted, or some push back from the client – there’s this consistent run of a communication issue between client and creative. Anyone who does creative work for hire. And the issue is one of either authority and respect in my opinion – I’ve been trying to form this into something that makes sense for a while. Advertising as a concept started in the 1940′s. For a couple of decades there weren’t enough agencies and there weren’t enough clients needing agencies for their to be enough competition between them. There was plenty of work for everyone. Every agency could have as many big name clients as they wanted – no-one had to go out and fight for work. And at some point between the 50s and the 60′s, so around about the point when the advertising industry and agency was about 20 years old, right when it became legal! Agencies started pitching for work. It’s possibly where that idea of spec work that has people on two sides of the fence came from. Once agencies started competing with each other aggressively to steal work from each other, the dynamic between client and creative changed drastically. And it continues to this day and it has spread far beyond the world of advertising agencies. And the reason I have a problem with it is – and I don’t work in advertising – but for the last half century of more, the primary point of interaction between the business world and creatives has been the advertising industry. And so the way business people, large or small, assume that this interaction is going to go, that’s based on what they know, what they think, what they’ve experienced from working in the advertising industry. Even if it’s just what they’ve heard or what they’ve seen on ‘Mad Men’. And this trickles down to all of us. In the fact that – how many people have you spoken to today, or just yourselves in that room, or anyone that’s listening, have this expectation or have run into the client expectation of having to design and preset three ideas? Very, very common right? And that comes from the advertising industry? Is it right? I don’t think so. Do a lot of people do it? I don’t, not since the second year of doing graphic design when I realised ‘Why am I doing this? I’m doing this because I think this is how it should be done, it’s how it’s always been done and I know for a fact that the worst reason to do something is because ‘that’s the way we’ve always done it’

Sidebar Creative

Paul: Yeah, absolutely.

Dan: What you end up with, when you do things like that, this concept of pitching that agencies still do. We’re going to have to give up work, whether it’s for a free or sometimes when pitches are paid for. The concept is that ‘were going to convince you that we’re the right people to work for’ rather than you come to us because you’ve done the research as a responsible client to decide who you want working for you. And when the relationship starts like that it’s basically us begging to get work. I don’t care whether we’re getting paid to beg, we’re still begging. And you’re giving up the high ground as it were, of the respect the client should have for a creative. And I know that people disagree with me on this because you still need to respect the client, you need to have the utmost respect for the client because of what they do and their opinion, and yes they are paying. But what they are paying for is our experience and knowledge and expertise as creatives. So when you establish the relationship based on the opposite balance of power; when you give that balance of power and authority and control of what gets designed and written and created to the client – who is not the expert in whatever field we’re talking about – you end up lowering the quality of the work. And lowering the quality of what all of us in the industry produce. Now this isn’t saying anything about whether spec is good or bad, this is about the relationship you develop with a client as a creative. And I really firmly believe that the ad agencies back in the 60′s are responsible for this. Once they gave up that position of authority of ‘you come to us when you know you need us, and we’ll tell you how to fix your problem’ to ‘we’re going to come to you and beg for work and show you why you should work with us and isn’t this stuff fantastic, hire us’ it completely changed the way that we work with our clients. And I’d be interested in your thoughts on this now I’ve spoken for ten minutes

Paul: Ha! Well, I’ve got to say that I can see where you’re coming from, and I can see the point you’re making, my problem with is it that I think…..the pitch work, we do pitches, we don’t do spec work. We’ll go in, we’ll meet the client, we’ll produce a proposal for them, we will lay it all out. Now you could see that as us begging for work, right? We don’t see it that way, and we wouldn’t want our clients to see it that. Whether they do or not I don’t know, but in most cases I don’t think they do. What I see that process being about, of the proposal writing and of the going in and speaking to the client, is about establishing a relationship. Because it’s as much about us judging them – we’ve gone to pitches before and then walked away from projects. Because we gone to pitches, sat down with them and they’ve got to decide do they like us, do they like our attitude, do they like the way we approach things – you have to decide is this going to be a pain in the arse client, do they get it, do they understand it and these kinds of things. So I think there is more to that process than a sales thing, I think there’s a relationship building thing too.

Dan: Yes, and you’ve pointed out a missing link in my argument which was the definition of pitch. What you’ve just described I totally agree with, because that is the process of establishing a relationship and trying to decide whether the personal relationship not just the portfolio relationship or the financial relationship is gonna work – that’s very important. But when you’d go in a do a pitch like that, a proposal, does that include work?

Marcus: Work spent on the proposal, and time spent on the pitch yes.

Dan: There’s got to be some creative thinking that goes into that process, and yeah, you’re probably not getting paid for that, but we all do that at the proposal stage, and so maybe this is to a certain extent influenced by my dislike of spec.

Marcus: We agree entirely.

Dan: But I’ve been asked to pitches before where creative work was required, visual comps, but it was paid for – this is where the line of spec or not spec comes into play. That’s a little bit better because you’re almost being paid as a consultant.

Paul: Well I think we have done paid spec work before, but to be honest I don’t really like that very much, and the reason I don’t like that very much is that – the primary reason we say we don’t do spec work is – the client doesn’t give a monkey’s arse about our integrity or that we consider ourselves ‘too good’ to do spec work, they don’t care about that. The main reason we say we don’t do spec work is that we don’t understand the business yet we don’t understand the background, we don’t know what we’re doing at that stage! We haven’t consulted with internal stakeholders, we haven’t done usability testing, we don’t even understand the brand, so all we’re doing is producing pretty work. Which is exactly the same as if it’s paid for or not.

Marcus: Absolutely. The major point based on that is that the audience for those designs at the pitch, is not the audience those designs are finally meant for. That’s the bottom line. And that’d the case whether you’re being paid for it or not. The designs are being made to impress the people in the room.

Paul: Yeah.

Dan: And that’s a problem. That has felt wrong to me for a very long time. I think what I’m hearing is that you agree with that?

Paul: Absolutely!

Dan: And that essentially runs us out of time. But at least you got my point in less than 15 minutes!

Paul: That one’s a point that I entirely get! We’ve been thinking this through for a long time. We’ve really moved away from certain spec work.

Marcus: I would like to make one more point on that. We’ve found that clients who ask for spec work up front, and we say we don’t do this and this is why, we’ve ended up winning work because of that argument. You suddenly put yourself up a step from the competitors.

Dan: I think that what you do, and this’ll be the last I say on it, is that by doing that you’re not giving up your self-respect, and you show the client that you not only have respect for yourself, but also for the work that they are hiring you to do.

Paul: Absolutely, absolutely! I entirely agree. So that was brilliant Dan, thanks very much, please hang on till the bitter end if you want to, the next half an hour but that’s entirely up to you – if you need to go, go by all means.

Dan: I’ll hang on!

Paul: Great, well we’re on the final stretch! The last half hour of Boagworld!

iPhone design, freelancing, the universe and everything

Posted in Mobile on April 26, 2010 by Paul Boag

Sarah Parmenter joined us on our 12 hour marathon podcast to celebrate the shows 200th episode. She talks freelancing and iPhone development.

Ryan: Sarah, what were we going to talk about?

Sarah: I don’t really know – are we talking about a hybrid of kind of freelancing and iphone user interface design?

Ryan: We actually had a question that came in from a lad called Luke which was about getting started

All: You have to ask the beginning question though!

Ryan: Yeah – What’s your biggest cock up?

Sarah: What’s my biggest? Oh, actually nothing to do with Web Design at all. I used to work backstage the same as Rachel. I was doing some work experience backstage at a show called Les Mis in London and I was just doing work experience and basically to cut a long story short they put me on the sound desk at the back. And although I’d always loved the show, I hadn’t seen it before. So they sat me at the sound desk at the back and about a quarter of the way through Act 2 they just started firing guns everywhere, and so I just jumped out of my skin and pushed some of the audio sliders forward at which point the show kind of went into a bit of a mish mash of guns that shouldn’t have gone off, and stuff started happening and I wasn’t invited back after that. *everyone laughs*

Ryan: I won’t be two seconds and I’ll get the question that we were going to answer

Sarah: That’s fine

Ryan: Right. So, Luke Franklin posted this question this morning ‘What is the best path to take to have the best head start into a design career?’Does a University degree help much and once I do the degree what’s the next step. In basic terms, what are the key things I have to do to make myself successful when I start in Web Design?

youknowwhodesign.com

Sarah: Okay, I’ve probably said it a few times, various different things… But I think specialising is the probably the biggest choice you can make is to specialise in something, whatever your ‘re going to specialise in, run with it. Don’t try and learn everything right at the start because when I’m looking for a freelancer for something I look for someone specific. I’m looking for a Ruby on Rails developer, I’m looking for a PHP developer I’m not looking for someone who’s a little bit good in a few things, I’m looking for someone who’s the best in what they do – not jack of all trades as the old saying goes. But as far as like Degrees and stuff go, I’ve had really mixed views on people who’ve done degrees and i don’t know whether it’s because the of way the courses are run down here but south end and leeds??? is quite an arty kind of place and the colleges here kind of let them do whatever they want to do. Whenever I get portfolios sent to me they’re always quite … Gothic, I think is the kind way of putting it (laugh). They tend to have a lot of band art work in them and stuff that me as an employer I guess, I can’t look at that and see how that could relate to whether they could do the job that I need them to do. So I have mixed views over the whole design course thing. I personally didn’t go to Design College or anything like that. I mean, i did my GCSE in Art but personally, down here they’re not that great. I think they’re great for a basic foundation in a lot of things. I mean, if you’re going to go into Typography then it’s a must but generally I’ve just got mixed views about the whole college thing.

Ryan: I think specialisation, a lot of people ask me about specialisation at the minute, and there’s a lot of people also talking about generalising and doing lots of different things, specially if you’re a freelance Web Designer, you’re kind of expected to do lots of different things and be multi-skilled instead of just specialising because the client doesn’t necessarily know what they’re asking for. You say that you do websites and they expect you to be able to do everything. How do you work? Do you do a bit of everything or do you specialise in a particular area?

Sarah: I do, I do a bit of everything but I think the important thing is that clients come to me for a specialist thing to start with and then just kind of assume that your skills are so, that you’ve got such a broad set of skills that you can achieve these other tasks that they want you to do. I tend to do more of the design side of things whether I like it or not. I actually started out coding when I was younger. I didn’t really do the design side of things at all but as I’ve sort of, got older, whether I like it or not, that’s the path that the people who are coming to me have decided that I’ll take so…

Ryan: So they’ve kind of decided your specialisation

Sarah: They have really.; they’ve kind of decided what I specialise in, and you know, the iPhone stuff is quite a recent thing as well. But I find that they come to me for that initially, and then, because, if you can design for the iPhone, you can design a website. So therefore your skill set will go to that as well although it always started in.. I think not necessarily people will come to you for a specialised skill and then stick with you because they’re comfortable with you and then assume that you can do everything anyway. And usually they’ll still keep you as a project manager, even if you say “Oh, actually, I can’t do this but I know someone who can.. Um.. they always keep you as their sort of ‘go to’ person anyway.

Ryan: The iPhone UI stuff that you’ve been doing, you’re talking a lot about that at the various conferences this year as well, aren’t you?

Sarah: Yeah

Ryan: you can kind of decided that you fancied doing that and you’ve become quite known for now, you’re getting to do working, to do iPhone UI stuff – how did you start going down that path?

Sarah: Um, it was actually a client of mine. I designed his website, and um, a really nice guy, he just decided to take a chance that I’d be able to do the user interface design of his iPhone app. And so, it was kind of, it was all his doing really. he just took that leap of faith that he saw my work, he liked my work. He gave me a chance to do the iPhone user interface design of that app and that came out really well and he got some really nice comments from Apple actually on the app, and it kind of went from there really.

Ryan: And people has just been contacting you because they’ve seen your work you’ve done through that?

Sarah: Yeah, I think it’s also because I’ve got a bit of a different approach to it, but one that people probably wouldn’t;t know from the outset looking at the website, which is a bit strange. But I go through, I just don’t design, I go through how the apps actually work with them as well. Whether they can cut down on the amount of screens that they;re using. Um, whether the actual user interface is working as it should do or how people are expecting the app to work. Um, there’s kind of all that process as well before you even hit Photoshop. So, um, I think it’s been handy to have that kind of background, um, documents to be able to send to other clients, to say, you know, this is the kind of way I work. And I think that actually what sold me, sold the clients on a couple of jobs, to use me to be honest.

Ryan: Did you find moving on to the UI work with the iPhone a natural progression from what you were previously doing or is it a new thing?

Sarah: Um, it’s a bit of both really. I mean, if you’re confident in using Photoshop, um, then you’d find it a lot easier than someone who’s been designing in the browser for along time, or anything like that. But there are some real specifics of working with the iPhone that you just wouldn’t come across in your general Web Design knowledge of what you do day to day in designing websites. You just wouldn’t;t come across it. So from that sense it’s been a bit of a learning curve but it’s also been great because it’s designing for a completely different platform. You’re not just thinking about how things look on a screen. You’re having to think about the fingertip size of the things that you’re designing and whether they;re large enough for people to actually press. And it’s a completely different mind set of designing for the web.

Ryan: And what are you talking about at the conferences this year then? Are you just sharing your experience of what you’ve learned?

Sarah: Well, actually I have to write them down because I get them both muddled up. Um, DIBI conference I’m talking about the principles of iPhone user interface design and at Future of Web Design (London) I’m talking about the ten tips for iPhone user interface design *laugh* so there are two completely different subjects apparently. I’ve got to do two completely different talks but obviously the principles of iPhone UI design always remain the same, so yeah…

Ryan: I guess you’re able to, it’s not iPhone specific things, it’s, you have the experience if someone turned round to you and gave you a completely different device and said, ‘alright, we need to design an interface’ you’ve got all that experience behind you that can say ‘right, this is the best way to design an interface for this device’. Um, so can you see yourself moving into anything else if given the opportunity?

Sarah: To be honest, do you mean other mobile devices?

Ryan: Maybe, maybe other new things that come along like iPad, or any touch sensitive stuff.

Sarah: Yeah, I mean, um, to be honest the iPhone just interested because I’ve got one. I’d interacted with it since the first generation one and I was comfortable with how I used it and things like that. I probably wouldn’t;t be comfortable if it was any other mobile device, purely because it’s, I don;t have knowledge of it therefore there’s going to be someone else out there who’s better at designing for that device than I am. I’d love to go into the iPad when it eventually comes out but I need to get my hands on one first really. To see how that’s all going to work. Um, but as far as specialisation, I’d rather specialise in the Iphone. I don’t think it’s going anywhere anytime soon. I think it’s, you know, probably the most well known touch phone that you can get so, um. I can’t see myself straying away from it anytime soon, No.

Ryan: Okay *laugh*

Sarah: Did that answer? Sorry…

Ryan: It’s good. So What’s attracting to you to designing for the iPad? Is it just something new or just the challenge of designing for a new platform?

Sarah: The challenge of designing for a new platform but also the kind of users who are going to be using the iPad. I think the kind of people, this is going to sound really awful, the kind of people that are going to be using the iPad are not, as we’ve discussed in various blog topics over the past couple of weeks on the Internet. Um, it’s not necessarily made for us with our superior knowledge of how various things on the Mac work and things like that. It’s meant for our Mums really. Mums and Dads who ring you up with lots of questions, how this works, how you get email working. I think it’s going to be a fantastic device for the basic internet user. So I think, on that level, it’s going to be really interesting to see if we can develop websites, you know, I can just imagine sort of developing great buttons *laugh*, and things that tell them exactly where they need to go. But I just think from that point of view I think it’ll be an interesting discussion to be had amongst the Web Design community as to the actual user that’s using it rather than the device itself.

Ryan: Yeah. How do you think that um, how do you think that’ll affect your approach to designing for it? That’s a tough question isn’t it? *laugh*

Sarah: I don’t think it will affect my approach in the way I work at the moment, the whole wireframing and trying to get the user interface working the way people expect it to work. So I don’t think it would change much from that sense. But I think, when you bear in, when you’ve got such good information, perhaps, about who your target demographic is, who you’re going to be designing for, I mean, maybe the iPad will take off with other people but personally I’d just have one because I want to design for it not because I’d necessarily use it. Um, I think the really interesting thing is going to be the ebooks, or ibooks sorry, that are going to be available for it. I think that will be really interesting if they do open them up to the UK market. that will be interesting to design for as well.

Ryan: Let’s talk a little bit more about running your own business and being freelance

Sarah: Ok

Ryan: Dealing with clients in particular. *laugh* Um, how do you find and retain the good clients, well retaining the good clients is straightforward – you do good work and they come back to you. How do you seek out your clients or do they find you?

Sarah: I’m lucky enough now that they find me and I’m kind of quite acute to the warning signs of some clients of whether they’re going to be good ones or not right from the offset of the way they approach you. The first email that you received, whether it’s copied in to a hundred other designers as well *laugh* you haven’t been blind carbon copied . Little things like that kind of bring up warning signals and if I get too many of them I just stay clear nowadays. But at the start, it was a completely different matter. I was taking on whatever clients I could get my hands on and because you have to to start a business. Um, so yeah it’s a difficult one but now I’m in a lucky position of they find me so..

Ryan: We were talking with Elliot earlier and how you increase your rates and that slowly filters out the good clients from the bad ones. Have you found that as well?

Sarah: Yeah, i have actually. It was Andy Clarke, when he called me one day and said, ‘Oh we have this thing called ‘double fridays’ or something *all laugh* He said every friday we just double our rates just to the person who comes, you know the enquiry comes through the door, just to see whether they’d pay it. And that’s how he’s established his rate is from ‘double fridays’ *all laugh*

Paul: I don’t believe a word of it. He makes it up, He doesn’t really do that!

Sarah: He told me! You can ask him, he’s up next, but that’s what he told me is that he just kept doubling until someone said ‘no’. *all laugh*

Ryan: One of the best quotes I ever heard was if the client doesn’t go ‘phooooah’ when you tell them the price then you’ve not charged them enough *all laugh* When they go ‘phoooah’ and ‘okay’ it’s just about right. *all laugh*

Sarah: But rates is really hard on to get right. I was talking to Jon Hicks at the conference in Bristol last year and when I told him what my rate was he went ‘Oh, I thought you’d be more expensive than that’. I don;t know if that’s a good thing or not but, um, I think it’s a funny thing, rates, and it’s really hard to get right and I’ve probably still not mastered it to be honest. But, um, I’m getting there. *laugh*

Ryan: It’s one of the things that you don’t, it’s not written down
anywhere what you should be charging, is it. you kind of learn from other freelancers, other agencies, you kind of feel your way through and hope you get it right eventually.

Sarah: yeah and it’s one of those things that other freelancers are kind of, um, you know a bit cloak and dagger about to be honest. It’s, a lot of people tend to think well it they’re charging that much and I’ve been doing this for x amount of years and I should be on the same. Um, t’s a really hard thing to try and gauge, what your rates should be and how you’re leveling with your peers really as well. Um, but I think it’s more difficult when you’re just starting out as well, but the thing I think is the most important is that you shouldn’t charge, you shouldn’t be really cheap when you start out. Because that caused me no end of problems when I first started out. There was only one client who came to me and said ‘If you do this job for me cheaply, I’ll use you forever more’ out of all the clients that I obtained at the beginning of starting the business, he was the only one to this day that still uses me. The rest of them I didn’t hear from again so that’s like the old chestnut, if anyone says that to you I definitely wouldn’t do it cheaply for them laugh*

Ryan: Yeah I had that recently as well, they said ‘Oh there’ll be plenty more work coming up. I said, ‘Well, I’m not going to drop my rates just for the same reason you wouldn’t sell me a product for cheaper on the proviso that I’m going to buy the next one from you”. They went, “Oh, yeah.”

Sarah: Exactly. I’ve got the best, um, thing to say to people like that now when they say that. I say “Well, okay on the next job I’ll give you a discount then or we’ll bring the price down in level with maybe further work that’s going to happen, but for this one – uh uh, sorry”

Ryan: Yeah that’s good.

Sarah: And generally, that’s the last you hear from then *everyone laughs*

Ryan: They usually turn out to be the bad ones. THey’re the ones you don’t want to be working anyway, aren’t they!

Sarah: Thing is, I think like pricing in the Web industry is really difficult as well. Because we’re on the Internet, there’s no barriers as to who you can use really anymore. I mean, beside from the fact that if you use someone outside your time zone, it’s slightly annoying but it doesn’t stop you from working with someone in America, or in Australia. SO the rates of pay in, between here, America, Australia, India are all very different, in as much as what you can get for your money. So, I think it’s such a difficult one to try and pitch what you should be charging and things like that. It’s really hard.

Ryan: Sorry, I got distracted by the feed going up with people shouting at me for being too quiet and not speaking into the mic properly. I’m sorry, I’m sorry to be mumbling so much I’m sorry! *everyone laughs” So we’ve got another question. Obviously this is the 200th show so what do you think it’s going to be like on show 400? What do you think the Web Design landscape’s going to look like at the 400th show?

Paul: That’s going to be another, 2 years, 4 years? 4 years.

Sarah: 4 years? Wow.

Ryan: That’s going to be 2 years, 400 – we’re on 200 now

Paul: Oh yeah – 2 years. *everyone laughs* No, 4 years, 4 years!

Ryan: 50 shows a year, oh yeah, 4 years.

Paul: Look, you can’t speak up loud enough and you can’t do basic maths. We’re going to have to throw you off

Ryan: Fine *everyone laughs* … sorry, Sarah. Carry on

Sarah: That’s all right. I’m just, I think the Web as we know it could change quite dramatically, um. I think we’ll be using a lot more handheld devices so I think that will be what we see the Internet as rather than how we, the traditional method of how we bring up a browser and viewing a website. I think we’ll have various devices for different things that will pull in information from the web as we know it. Um, but I think it will be a little bit different. *everyone laughs*

Paul: Is your answer to this question “It’s going to be a little bit different”?

Sarah: No!

Paul: I’m sorry, I’m teasing *laughs*

Sarah: It is going to be different, but I think it’s going to be different how we view the Internet, I don’t think we’ll be sitting, apart from us because we’re Web Designers and we have to sit in front of a screen all day. I think for other traditional internet users it wouldn’t be sitting in front of a computer and opening up a Web Browser. I think we’ll be doing a lot more on handheld devices and so change the way that we build websites for those devices. You watch, I bet it’ll happen now and you’ll have to eat your words. *everyone laugh*

Paul: I’m not arguing with you, it’s just that little bit lacking in, ummmm, in detail saying it’s going to be different.

Sarah: Sorry, did I just clarify that for you?

Paul: You did, thank you very much. Much better now. I’ll go away *laugh* I’m in trouble now, I can tell.

Ryan: Just you wait, Paul, in 4 years time the internet will be a little bit different and you’ll be eating your words. *everyone laughs*

Paul: As they’re saying in the chat room, it’s a very hard and unfair question

Sarah: My goodness! They’re sticking up for me?

Sarah: Some of them have been awful today in the things they’ve been saying *everyone laugh*

Ryan: You feel that already, because when you come to the barn, within about a mile radius you lose phone signal here and it’s like your heart stops. It’s like “I’ve lost signal, I’ve lost signal. It’s like your life support machine’s been turned off *everyone laughs*

Paul: hang on! This is my working environment you’re slagging off! I like it here!

Sarah: But you’re not there that much are you! *everyone laughs*

Paul: Okay, you’ve got your own back

Ryan: Okay Sarah, well thank you very much for taking the time to talk to us

Sarah: No problem thanks for having me Ask Andy about double Fridays

Paul: We will, he’s on next I think he makes stuff up

Sarah: He makes stuff up? no!

Paul: Thanks a lot, bye

Thanks goes to Wendy Phillips for transcribing this interview.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Web Design News 20/04/10

Posted in News on April 20, 2010 by Paul Boag

This week: The dying art of design, the disappearance of flash, tasks not goals, twitters developer tools and google rank by speed.

The dying art of design

There is a great but challenging article on smashing magazine this week for all you designers.

Entitled “The Dying Art of Design” it challenges us as designers to stop focusing on tool and techniques but instead focus on creativity and originality.

The author writes…

The diet of a typical designer is low in in-depth content and high in inspirational lists, tutorials and freebies. A review of blogs and our poll of design professionals shows a clear trend in the informational diet of creatives. They consume a lot but bypass a deeper understanding of design. In-depth articles and case studies are the least-read articles. Over 75% of the articles that designers read are either design tutorials or inspirational lists.

This has certainly been my experience on Boagworld too. My most popular posts have been those light on content and heavy on inspiration.

He concludes my writing:

While modern design tools and resources certainly make our many tasks easier, they don’t always improve our work. Tools and shortcuts are temporary. Great design is timeless. The best tool available is sitting in our heads; we just need to upgrade it once in a while.

Chris Bence, Shutterstock

Twitter introduces tools for developers

At this weeks official Twitter conference (Chirp), Twitter announced a new raft of development tools that can be found at dev.twitter.com.

These tools make it easier than ever to integrate twitter into your application or website. In fact it opens up the ability to integrate in ways never before possible.

For the majority of us the most exciting part in @Anywhere that allows you to integrate Twitter seamlessly into your site with just a few lines of Javascript.

New features include…

If you make heavy use of Twitter to support your website then this definitely worth checking out.

The gradual disappearance of flash

I have developed a reputation for being anti-flash. However, when you read the beginning of “The Gradual Disappearance of Flash” you will consider me a friend of flash developers everywhere!

The author begins:

Given the widespread adoption and advancements of modern browsers and JavaScript libraries, using Flash makes little sense.

He then goes on to deconstruct just flash is no-longer necessary including…

The improvements in standards
The iPhone and iPad lack of support
The proprietary nature of flash
Progressive enhancement
Support for video in HTML
And more

Fortunately before he is burned alive by the Flash community he does begin to tone things down focusing on the strengths of flash. However, you can tell his heart is not in it.

Despite the bias of the article I do feel he has a point. There are fewer and fewer reasons to use flash and no excuse for building entire flash websites.

He could be right, perhaps we are seeing the beginning of the end for Flash.

Old school marketing techniques don’t work online

Talking of uncontrolled rants Gerry McGovern is on good form this week. In his post “Web customers care about tasks, not goals” he shares his experiences of trying to hire a cleaner online…

I was at a house cleaner website and this lady was smiling out at me with her hands behind her head. Hello. I need a cleaner. She’s not going to do much cleaning for me if she has her hands behind her head. And she’s saying to me: “Book a cleaner and get time for you.”

That was a big breakthrough for me. For years we’ve had a cleaner and I never really understood why. But this website educated me. It’s all about time. And then this hands-behind-her-head-big-grinning-lady asks me: “Are you looking for a cleaner?” Well, duh. Actually, no. I’m looking for a set of golf clubs, but for some wholly unfathomable reason I typed the following text into Google: “house cleaner”.

bikeriderlondon, Shutterstock

His point here is that marketeers are applying principles of offline marketing to the web. For example conventional wisdom says that you need to sell the benefits (e.g. book a cleaner and get time for you) to the consumer. However, that doesn’t take into account that web users have already recognised and acted on their need by searching. What we need to do is facilitate the fulfilment of that need, rather than create the need in the first place.

Gerry sums this up at the end when he writes…

The cleaning websites I went to told me truly useless things I already knew but didn’t tell me the things I really wanted to know: hourly rates, whether they worked in my area, whether they cleaned on weekends.

I think a lot of us still need to learn these lessons.

Google ranking now affected by site speed

We have known it was coming for a while but finally it has happened: Google now partially ranks your website on speed.

However, no need to panic yet. According to Sitepoint…

[Google says] “while site speed is a new signal, it doesn’t carry as much weight as the relevance of a page” and at the moment, “fewer than 1% of search queries are affected by the site speed signal”.

Of course as they go on to point out 1% of all Google searches would still be a huge number of sites.

kropic1, Shutterstock

Sitepoint goes on to share a number of ways you can improve the speed of your site many of which I mention in my own post ‘5 ways to give your site a speed boost in less than 30 minutes‘.

Looks like performance is going to be the next big thing.

Design and copy pirates: Should you care?

Posted in Working in web design on April 1, 2010 by Paul Boag

Websites like Copyscape make it easier than ever to find other sites who have stolen your copy. However, should you care and how can you stop thieves.

Dylon Garton recently contacted me with the following issue:

I have been affected by the issue of plagiarism. I really struggle to write good web copy so when I manage to get some good copy into one of my web pages I am quite pleased. I am less pleased when I discover several other websites have lifted the copy word for word.

I am wondering how you guys deal with content theft. I have discovered a great site called Copyscape and this is how I have managed to find all of the sites that have ripped me off. I will be interested to hear how you guys deal with it.

There is no doubt that plagiarism is widespread within web design and across the web as a whole. Sites like Copyscape make it easy to find copy thieves. However, the problem is just as prevalent in design.

Copyscape

Our work has been ripped off a number of times and I know many other designers have experienced the same thing. Elliot Jay Stocks has been particularly vocal on the subject after suffering himself.

Let me be clear…

Ripping off somebody else’s work is wrong. Its lazy and it’s damaging. Not just damaging to the reputation of the individual who you ripped off, but damaging to the thief too. And I am not just talking about when you get caught. It is damaging because it leads to unimaginative thinking. Your own creative skills atrophy over time to the point where you can no longer create original work.

That is not to say you cannot be inspired by other people’s work. However, there is a line, and although we may pretend otherwise, we all know when we have crossed it.

The unfortunate reality

Although plagiarism in all its forms is wrong, it is not going to go away. It has existed before the web and will exist after it. The only difference is that because the web is such an open platform it is incredibly easy to copy work. However, in my opinion that is a price worth paying for an open web.

Once you accept that plagiarism cannot be defeated, it fundamentally changes you attitude towards it. There is little point in getting indignant or angry. You learn not to waste too much time or energy on people who are essentially just rude.

Does that mean that I ignore plagiarism? Not at all.

How I deal with it

99% of the plagiarism I have been confronted with has been resolved with a simple email. I write to the individual involved drawing attention to the problem and asking them to rectify the situation. I don’t make any legal threats and keep things as civil as possible. I make the presumption that the person I am writing to is unaware of the problem.

The reason I take this approach is because it doesn’t put people on the defence. They can easily write back blaming somebody else, apologise profusely and remove the offending content. However, if you start making legal threats they are forced to defend their position.

On the rare occasion when people do dig their heels in I shrug my shoulders and move on. If they want to continually follow in my wake that is fine. I will just move on to the next thing and produce something new. I am not going to waste my time on them.

Web Design News 30/03/10

Posted in News on March 30, 2010 by Paul Boag

This week: Does the fold matter after all, 5 quick ways to improve your sites usability, how to blog when you’re not a writer and ensure your projects run smoothly.

Does the fold matter after all?

It is with much fear and trepidation that I include this story. Many website owners are obsessed with this mythical element called the fold (the point at which users start to scroll). As a result they often insist that content is crammed as near to the top of a page as possible.

Of course in reality there is no such thing as the fold. The point where scrolling begins varies massively depending on browser, screen resolution and plugins installed. Also, if you insist that too much content is above the fold, it will do more harm than good.

That is why generally speaking I have encouraged clients to ignore the fold. However, although users do scroll and so in a sense the fold is redundant, we do know they give more attention to content higher on the page.

Jakob Nielsen reinforced this fact in a recent post entitled Scrolling and Attention. He writes…

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

Eye Tracking image from Nielen's post

So in truth we should be looking to allocate important information as high on the page as possible. However, that does not mean cramming all information above the fold. Instead we should follow Nielsen’s advice…

The material that’s the most important for the users’ goals or your business goals should be above the fold.

This doesn’t mean the rest of your content will be ignored. As Nielsen goes on to say…

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Essentially the content above the fold has to draw the user in and encourage them to scroll.

5 quick and easy ways to improve your sites usability

So recently we had Steve Krug on the show talking about how we should all be user testing our websites more.

This is something that we all know but often fail to do. Part of the problem is that we are simply not in the habit of thinking about usability enough.

Well this week I stumbled across a post that shares 5 quick and easy ways of improving your website’s usability, while getting in the habit of thinking about usability.

All 5 suggestions are excellent. However, the one I particularly wanted to mention was a service called the 5 Second Test. As the post explains…

It allows you to create two different user tests by uploading a screenshot of your webpage. The first test is a memory test: users get 5 seconds to have a look at your screenshot and need to describe afterwards what they remembered. In the second test, the user can click on the screenshot for a period of 5 seconds and can give a descriptive text on each point.

The results are shown in a handy heatmap-like overview which can be downloaded for further analyses. It is free and you can share these tests with your twitter friends.

What is so great about this service is that it provides an excellent way to establish if your design has the right visual hierarchy. Do users spot key elements and do they understand what those elements do?

Blogging when you’re not a writer

I have written a fair amount about the challenges of blogging (1)(2). However a recent article on pro blogger has identified another reason why so few corporate blogs succeeded… people are afraid of writing.

notepad

Image Source

Running a corporate blog can be an excellent way of increasing search engine visibility, attracting new customers and engaging existing users. However, many are put off because they feel they cannot write.

This post provides some excellent advice about on to start writing, and even how to blog without writing at all!

The author talks about how to structure posts, how to proof them and also looks at the use of imagery and video. It really is an encouraging place to start if you feel intimidated by blogging but want to try.

There is also some great additional advice in the comments too, so make sure you check them out as well.

Ensure your projects run smoothly

Simon Collison has written a superb series of posts on ensuring projects run smoothly.

There are nine posts in total covering…

Goal directed design
Collaboration
Audience
Methodologies
Roadmaps
Creativity
Conventions
Prototyping
Narrative

I have to confess I have yet to read all nine, but what I have read is absolutely spot on. I cannot recommend them highly enough.

My favourite so far has been the post on collaboration with your client. This is essentially what I was talking about this year at SXSW. He obviously takes a very similar approach. He writes…

I wholly believe that our processes should be inclusive, and that all members of a team can influence all aspects of the design and build of a product.

One of my most stringent rules as a creative director is that anyone, anywhere in the team can feel free to add value. They all have brains and common sense. Anyone, at any stage can contribute an idea, pose a question, throw a spanner in the works.

Amen to that. Best of all, he goes on to say he considers the client apart of that team…

I believe that the client team has an incredible amount to contribute. It’s easy to dismiss those new to the web who may be commissioning the project as “clueless technophobes”…

The danger is to dismiss the insight they can give you with regard to the organisation itself. The client can educate us about their sector, area, community or their place within it. Our job is to listen, discuss, and interpret this knowledge for a web audience.

client, designer and developer working together

I really could just quote from these posts all day, they are that good.

I know nine posts feels like a lot of information to read. However, I cannot recommend this series strongly enough. He should be packaging these as an ebook and selling it for an outrageous price.