Tag Archives: imagery

When developers design

Posted in Design on by Paul Boag

Although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.

First things first, I am not going to be able to teach you good design practice in a single post. That comes with time, training and to some degree, talent :)

However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

General comments

Before I plunge head first into specific tips I would like to share some more general comments based on my observations of when developers do design. Hopefully these will help you think of design as more than arranging pixels.

Empathy

In many ways developers work in a world of absolutes. A piece of code either works or it doesn’t. Your world tends to be very literal, very straightforward. Computers are in many ways easy to understand. People on the other hand are a very different matter. We are messing beings full of contradictions and inconsistencies. This is the world of the designer.

Designers are trying to engage with people and to do that they empathize. They try and put themselves in the shoes of the user, to really understand how they think, how they approach a problem.

One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.

If I could give only one piece of advice it would be to encourage you to empathize. Really think through what the user is like. Are they in a hurry? Do they have a specific aim? What is their outlook on life? Will they have kids clamoring for their attention while they surf your site?

Really try to get inside their heads. It will definitely help.

Avoid graphical applications

The temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.

Its hard enough to apply the principles of good design without adding learning a new application on top of it.

You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…

Don’t try and be great; be invisible

Don’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate.

Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it.

If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!

Specific advice

Okay, so enough with the airy fairy advice, lets get specific. How do you make your design good enough to be invisible, non-offensive? Well, let me suggest 5 areas that you should pay particular attention to. Obviously I could write reams on each but lets keep this very simply and easy to implement.

Typography

The key to good typography is constraint and consistency.

Avoid using too many typefaces, normally 1 or 2 is enough. Also avoid having too many variations in sizes and weighting. Only use size and weighting to emphasis the hierarchy of the content. The larger and bolder the type, the more important the content.

Also try to be consistent in your application of typography. If something is a certain size and weight on one page ensure it is done the same on another. Although CSS makes this relatively easy, watch out if you are working with ems as you may have inheritance problems.

Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they are hard to read. Also add some whitespace between lines of text as it will make the page feel more spacious, which brings us nicely onto…

Whitespace

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

The grid system

You often hear people complain that a website looks boxy but in actual fact boxes are good. A good website should have a strong underlying structure of columns and rows. It helps the user identify hierarchy and communicates a sense of order in the site. Although a good designer will break out from the grid he will always have a grid structure still there underneath.

Think about how many columns the site is going to have. Ensure these are applied consistently across the whole site, but don’t be afraid to occasionally span across multiple columns. Also ensure elements are placed consistently in this grid from page to page. Do not move elements around, especially navigational elements like the menu bar and search.

A grid may seem restrictive and not very “creative” but it essential to all design.

Colour

Working with colour is particularly tricky and so I would suggest where possible you avoid making too many colour choices. Your best bet is to turn to an automated colour creator like Kuler. You can either choose from one of the existing palettes or enter a base colour (usually a corporate colour) and it will produce a palette based on that.

Notice that Kuler only includes 5 colours in its palette. This is good practice, resist the temptation to use too many colours. Apart from this site (where I was just being silly), I tend to use a very limited colour palette. One nice little trick however is to use a strong contrasting colour to highlight important content. Because it is a contrasting colour it will make content stand out from the rest of the site.

Imagery

The design work I have seen done by developers tends to shy away from the use of imagery and in someways that is not a bad thing. It is easy to get imagery wrong but I would encourage you to be a little more adventurous. Imagery is a great way to draw the users eye and so can be used to highlight key content.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…

  • Avoid animation.
  • Choice images with a strong foreground element.
  • Compress your imagery but not too much!
  • Use faces, people are naturally drawn to them.
  • Avoid clipart illustrations

I am sure there is more I could suggest but those are the ones that immediately spring to mind.

Taking it further

So there you go. Hopefully that has helped a little. Obviously, there is so much more that could be said, but that should have at least started you off. If you do want to take the next step and improve your design skill then check out Jason Beaird’s book “The Principles of Beautiful Web Design”.

Advice for CMS users

Posted in Accessibility, Site content on by Paul Boag

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

Introduction

Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

Writing for the web

Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

Below we investigate these two challenges in more depth and suggest some possible solutions.

Writing style

Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

Engaging with the user

Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

Using a personal tone

By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

Writing how you speak

If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

Avoid being patronizing

The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

Making your copy clear

The W3C accessibility guidelines clearly state:

Use the clearest and simplest language appropriate for a site’s content.

In other words ensure that your reader can understand what you have written.

Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

Jargon

A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

Reading level

There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

Below is some advice on how you might go about improving comprehension of your copy:

  • Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
  • Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
  • Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
  • Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
  • Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

Making web pages easy to scan

It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

Front loading

Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

Keep it short

Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

Keep paragraphs short

As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

 

Keep sentences short

 

At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

Break your copy up

As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

  • Can I associate a heading or sub heading with this block of text?
  • Could this paragraph be reduced to an easy to scan bullet point list?
  • Is there a key message in this paragraph that users need to instantly see?

If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

Many good content management systems (including Headscape’s own CMS) provide this functionality.

Accessibility

We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

The importance of markup

So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

So, if for example you want to tell the browser that something is a heading you would mark it up like this:

<h1>This is a heading</h1>

or a paragraph would be marked up like this:

<p>This is a paragraph of text</p>

Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

Marking up content in this way brings a whole host of advantages including (but not limited to):

  • The ability to redesign how an individual style looks universally across the entire site without editing each page.
  • The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
  • The ability for screen readers and other assistive technologies to understand the site.

In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

Text alternatives

Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

The most common example of this is with the inclusion of images into your pages.

There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

Meaningful links

Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

Acronyms and abbreviations

Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

Using tables correctly

Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

Working with imagery

Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

Animation

Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

If animation is to be used we recommend:

  • That the user is given the ability to disable the animation
  • That the animation is not too rapid so that it proves less distracting
Colour

Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

These two issues are addressed in the W3C guidelines on accessibility:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Further information

Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].

Show 69: All alone

Posted in Classic shows on by Paul Boag

Abandoned by Marcus, Paul struggles on alone through this week’s show. Bravely he manages to cover; the cure to hiccups, how to hunt down those pesky CSS bugs and what’s new in Photoshop CS3.

Play

Podcast: Download (19.4MB)

Download this show.

To subscribe directly within itunes click here

News and events

SWF image replacement

This week sees the launch of SWF image replacement (swfIR), not to be confused with sIFR which replaces text. swfIR combines javascript with flash to apply cool effects to imagery on the fly. swfIR can add rounded corners, drop shadows, borders and even make images scale. What is more it degrades nicely on unsupported browsers. Of course nothing is perfect and there are some known issues. However, it is certainly a good option if you have clients uploading lots of images which need styling.

Yahoo! Pipes

Yahoo! has launched something called Pipes which apparently allows you to “rewire the web” (and here was I thinking the web was made up of tubes). Basically Pipes allow you to combine and repurpose multiple RSS feeds and APIs. At its most basic level it is similar to a service like Feed Digest however it is capable of doing a whole lot more. Not the most user friendly interface in the world but definitely worth having a play with.

Ajax inspiration

I came across miniajax.com which is a nice little site that showcases the latest gadgets and gizmos in the world of AJAX and Javascript. For those of you who already code Javascript this is a great place for inspiration, for the rest of you it is “copy and paste heaven”.

Accessibility and the UK law

Struan Robertson has produced two great articles that clearly lay out your legal obligations on accessibility if you run a website in the UK. Ignore at your peril:

Client Corner: Choosing a design

With Marcus away it fell to me to tackle the client’s corner segment this week. Sticking to what I know best, I decided to discuss how to choose the right design for your site when confronted with multiple options. We look at:

  • How deeply a client should be involved in the design process
  • The dangers of design by committee
  • The subjective nature of design
  • The need to include your target audience in the decision process
  • The importance of brand identity
  • The problems with choosing a colour palette
  • The influence of imagery
  • Layout, resolution and the fold.

Ask an expert: Gary Marshall on instructional copy

Out of all of the guests to appear on the .net podcast Gary Marshall is one of my favourites. He is not a web designer but a technology journalist which means he brings a completely new perspective to the table. On this week’s show I get him in to discuss his impressions on instructional text; you know, the copy the client doesn’t write. From error messages to tooltip help, it is often down to the web designer to write instructional text and what do we know about writing!

Agony Uncle: Bug Hunting

Diagnosing and fixing problems in CSS can be a bitch. Often we resort to randomly trying different things until something works. However, there is a better way. This week we look at bug testing techniques including:

  • Know your bugs; sites like Position is Everything will help with that
  • Validate your code
  • Apply borders
  • Create a stripped down test case
  • Systematically remove chunks of code

Review: Photoshop CS3

This week I finally got around to installing Photoshop CS3 Beta and I have to say I really like it. I put it off for ages because normally these upgrades aren’t worth the effort but this one has made some substantial improvements. Probably the most exciting for me personal are the improvements to the interface, which now has docked palettes rather than those annoying floating ones. However, there are a lot of cool features beyond that, including:

  • Quick Select
  • Refine Edges
  • An improved bridge
  • Smart filters
  • Improved cloning

For a more comprehensive review check out the National Association of Photoshop Professionals (no I am not making that organisation up!)

Show 63: More than iPhone

Posted in Classic shows on by Paul Boag

This week on Boagworld, Paul looks at whether it is possible to build HTML emails with CSS, Marcus discusses how to write a good brief and Christian Heilmannwades into the current Javascript library debate.

Play

Podcast: Download (21.2MB)

Download this show.

To subscribe directly within itunes click here

News and events

Seems like there is loads going on in the world of web design this week and we struggled to narrow it down to four items. However, this is our pick of the best:

Getting a job as a developer

Christian Heilmann has written a post on his experiences of hiring developers at Yahoo! He gives some really sound advice to any developers in search of employment. Definitely worth a read if you are considering a change of job.

Talking of changing jobs, if you are a developer considering a career move then you might want to take a look at the developer position currently available within Headscape.

Global free stock imagery

Luke Sanderson (an old friend of mine) has taken the Google Coop and configured it to search all of the free image stock libraries from one place. Saves a bit of trawling around looking for that perfect (free) image.

The future of flash

Now, I don’t know much about flash but I know a man who does and he has just posted his impressions of the Flashforward keynote at MacWorld. He talks about Flash CS3, flash on alternative devices and reveals some fascinating stats on the take-up of Flash 9.

iPhone

Apples announcement of the iPhone seems to have caused a lot of excitement in all quarters not least the web design community. Brian Fling believes it could “revolutionaries the web”. Personally I find myself agreeing more with Cameron Moll who takes a more cautious view.

Agony Uncle: HTML emails built using CSS

This week has seen the discovery that Outlook 2007 uses Word to render its HTML emails rather than IE7. This severely limits what is possible when it comes to HTML emails and standards. It was therefore very topical that this week’s Agony Uncle Question is about using standards with HTML email. We look at what is possible and what is not referencing articles both on the A List Apart website and Campaign Monitor.

Ask the Expert: Javascript Libraries

The debate about the value of Javascript libraries has been raging for a while now but seems to be back with vengeance at the moment. That is why on this week’s show we have Christian Heilmann sharing his thoughts on the question, “Javascript libraries: Friend or Foe?”

Review: Pro CSS Techniques

Pro CSS Techniques is a new book by Ian Lloyd, Jeff Croft and Dan Rubin aimed at experienced CSS developers looking to take their skills on to the next level. Jonathan Snook provides an excellent review on this book that we reference in this week’s show.

Clients corner: Writing a web design brief

Writing an effective brief for web design agencies will not only make the selection process easier but helps to avoid potential miscommunications over requirements further down the line. In this week’s show Marcus looks at the issue of invitations to tender and how to go about writing an effective brief that will help your project run smoothly

Oh yes… don’t forget the boagworld meetup

Podcast 53: Ecommerce Usability

Posted in Classic shows on by Paul Boag

Product information can make or break an ecommerce site. In this week’s show we look at the usability of ecommerce sites and in particular how you display your products.

Download this show.

To subscribe directly within itunes click here

Recently I have been reading Jakob Nielsen’s book “Prioritizing Web Usability”. Although I don’t always agree with everything Jakob says this is an invaluable resource and I strongly recommend that you consider buying it.

I have just finished the chapter on product information for ecommerce sites. What he had to say on the subject was so good that I thought I would share some of it with you.

We cover:

  • Pricing – What to display and how to display it
  • Common Questions – Ensuring you address FAQs on subjects like delivery, returns and security
  • Product descriptions
  • Layering product information so as not to overwhelm users
  • Product imagery
  • After sales support
  • Supporting articles on your products and the benefits these provide you as a website owner

Later in the show we also discuss some of the comments about ecommerce usability made, in the boagworld.com forum.  Unfortunately we couldn’t cover all of the issues discussed so if you would like more detail visit the ecommerce thread on our message board.

In the news

There are some very interesting stories in the news this week. Probably the biggest story is the possibility that Google intend to by YouTube. For more information on this acquisition check out TechCrunch’s report. However, more interest to me are two stories found on the BBC website. The first is a report stating that people are more concerned about net crime than being burgled. This remarkable report emphasises the need to reassure users continually about the privacy and security of their personal information. The second article exposes the fact that despite people being more tech-savvy than ever before, they are still left confused by the mass of technical jargon online.

Review

Finally, we review an easy to implement ecommerce system called Shopify. Although not quite as straightforward as RightCart it does have considerably more features and is definitely worth checking out if you are considering a small scale ecommerce website. For a more complete rundown of the different ecommerce packages available read the ecommerce software thread on our forum.

Podcast 42: Choosing the right design

Posted in Classic shows on by Paul Boag

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Play

Podcast: Download (30.7MB)

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

  • Small busy images that are hard to see
  • A lack of consistency across the site with different styles of imagery, all mixed up together
  • Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.

Design for your CMS

Posted in Design on by Paul Boag

With next weeks podcast being on content management systems I have been thinking a lot about how they work. In particular, I have been mulling over the unique challenges they create when it comes to the front-end design.

One of the biggest areas of business for us at Headscape is the creation of design templates for content management systems. A lot of organisations have in house developers who purchase or build their own CMS but don’t have the skills to do the design work involved in the front end of the site. As a result, they come to us looking for help.

Over the years, I must have worked with dozens of different content management systems, all with their own unique constraints. I really have seen every quirk imaginable, from systems that only allow colours chosen from the web safe palette, to a CMS that insisted on a strict three-column layout for all sites.

However, probably the most universal problem with any CMS is that it gives the website administrator limitless control. "Isn’t that half the point of a CMS?" I hear you cry. Well yes, it is, but that doesn’t mean it can’t prove annoying if you’re trying to design the interface. Let me explain what I mean:

Limitless sections

Many content management systems give website owners complete control over the structure of their site including the top-level sections. This means they can continue to add sections until inevitably they break the design. This is especially true of horizontal navigation because you obviously want to avoid horizontal scrolling. To be honest your options are limited:

  1. You instruct the users not to add top level sections or disable that feature.
  2. You avoid horizontal menu’s entirely and design your site in such a way to allow for expanding of vertical navigation.
  3. You create a horizontal navigation that wraps nicely when there are too many sections.

None of these options are particularly elegant, nevertheless this is something you need to consider carefully in the design stage.

Deep navigational structure

Of course, the problems don’t stop there. If a user has control over the structure of the site, it is also possible for them to create sections, within sections. With this kind of limitless flexibility, you cannot presume in your design that you only need to display one or two levels of navigation. In theory, your navigation has to be limitless.

This problem can be solved in a couple of different ways. One option is to show only the siblings, parent and children of any particular page. This works very well particularly when used in conjunction with breadcrumbs, however it does have some drawbacks.

Another approach is to use a breadcrumbs style of navigation. This is something I have covered before in my entry entitled "Dealing with complex navigation" so I won’t go into anymore details here.

Varying column heights

Of course as well as expandable navigation, there is also potentially endless content! With few clients following Steve Krug’s rule of taking your content and halving it, pages can get incredibly long. However, on other occasions it is common to find the navigation being longer than the body copy. With content and navigation being so flexible it is important that your design can comfortable expand or contract to fit what is there. The golden rule here is to test endlessly with different content and different navigation to see if your design breaks.

Ever-expanding names

With users having control over naming pages, another problem arises. As web designers, we have learnt that short snappy names for sections are much easier to read and digest. As a result, we tend to design on the assumption page names will be relatively short. However, you cannot guarantee this if the client has control over the site structure. Make sure you check that page names wrap nicely whether they appear at the top of the page or in your main navigation. Always design for the worst-case scenario and remember if your site is multi-lingual that some languages can have words considerably longer than their English equivalents.

Interchangeable boxes

Not only can the user control the site structure and page content but in many content management systems, they also have some control over the layout. This is often particularly true on the homepage where they can often reorder content "modules". This means any design that you propose has to be flexible enough to allow these "modules" to be moved around. The trick is to do this without the design becoming too blocky. I have found that using curved corners, overlaid imagery and removing borders can help to blur the lines between these "modules", creating a less boxy feel.

The evils of the WYSIWYG

Probably the biggest area of concern is the dreaded WYSIWYG editor. With this, a client can ignore all your lovely design rules and do whatever the hell they like with your page. This is probably the biggest danger area in content management design.

My recommendation is to try and persuade the client to swap out their CMS default editor with something like Xstandard. With this WYSIWYG the client enters content semantically rather than worrying about the design. In other words they tell the WYSIWYG that something is a heading and the CSS file defines its look, rather than the user defining the font, styling and colour themselves. Failing that it is important that the designer provide a very clear style guide covering exactly what is acceptable and what is not.

What’s your experience?

These are just a few of the challenges that I have discovered over the years but I would be interested to hear what your experiences have been? Which content management systems have you used and what problems have you encountered. What advise would you give to somebody designing for a content management system for the first time? Post your comments here.

New National Trust site: Accessibility failure?

Posted in Accessibility on by Paul Boag

Yesterday I wrote about the imminent arrival of the new National Trust website and my involvement in the last version. Well today, the new site has gone live and I am left feeling somewhat disappointed by the result.

Perhaps I am suffering from a case of sour grapes because I did not design the new version. Perhaps after 18 months of waiting and countless delays in the launch date I had set my expectations too high. Perhaps I was just being naive believing the publicity that promised improved usability and accessibility.

In my last post, I outlined four hopes I had for the new site. These were:

  • A desire to see the navigational shortcomings of the old site dealt with
  • A site that conveyed the awesome architecture and countryside the Trust manage.
  • A site built with the latest in web technology (web standards)
  • Improved accessibility

So let us look at each of these in turn.

Navigation

The problems of the old sites navigation were apparent to anybody. There were reasons why it was done in that way but at the end of the day, they are no excuse. My hope was that the new site would provide a clear navigational approach that would aid users to find their way around what is an enormous site.

Although the navigation is now definitely more flexible I am not actually convinced, it is any clear or easier to use.

It took me some considerable time to work out how the navigation worked at all. From the homepage, it would appear that the top-level sections are listed across the very top of the page. However, after navigating around the site for some time I discovered this was not the case. The top-level navigation is actually represented by the three boxes in the centre of the screen (which btw, appears below the fold at 800×600). The links at the top of the page are shortcuts to content buried deeper in the sites information architecture. Perhaps it is just me but I was totally thrown by the idea of only three top-level sections that appear as images below the fold of most users’ screens.

Once you move beyond the homepage things do not become much clearer. One click beyond the homepage and you arrive at landing pages for each of the main sections. These display the sub navigation at the bottom of the page. Click on one of these options and the sub navigation now leaps to the left hand side of the page. In its defence, this side navigation works very well. It is clear, consistent and highlights the section you are currently in.

Although in many ways, the navigation is a vast improvement on what came before it seems to have lost consistency along the way.

Site look and feel

In my last post, I said how I hoped they would make good use of the huge photographic library the Trust has to portray the amazing architecture and countryside the Trust manage. Now, look and feel is a personal thing, but I do not feel they have captured any sense of the Trusts holdings. The site seems to be more about navigation and interface than message. The homepage does the best job at portraying more and perhaps that is enough.

Web standards

Another less surprising disappointment was the fact content has not been separated from design. Why does this matter I hear you ask? Well without repeating everything that I have written on the subject in the past, probably the biggest drawback is with printing. The demographic the Trust is trying to reach generally find reading on screen a painful process. They tend to like to print content and read it offline. However, because this site uses table based design the printed version often looks messy and in a few occasions cuts off content on the right hand side of the screen.

I guess it is not the end of the world that the site is not built using web standards but they have missed many benefits by letting this opportunity pass them by.

Accessibility

This area is the one that really horrified me! The new site promised improved accessibility, but if anything, it has taken a step back. At the very least, I was hoping the site would pass an accessibility test by an automated check like Bobby, but it fails even that. The previous site produced back in 2000 allowed the user to resize text in the browser, and change the contrast and font size using a style sheet swapper. Five years on and not only does the new site fail even the most basic accessibility test but it also drops the only accessibility feature that existed on the previous version! I am in shock that the site could so badly fail its users many of whom have visual and physical disabilities associated with old age. Yes, it is possible to resize some of the text but much of the navigation now uses imagery that cannot be resized.

Bitter and twisted

Perhaps I am being melodramatic. Perhaps you are better off ignoring my sad rant that betrays my feels of rejection at not being involved in this rebuild. I would be interested to know what other people have to say about the site. Am I completely loosing the plot?

Sample site review

Posted in Web strategy on by Paul Boag

A part of my job at Headscape is to provide site reviews for clients. These range from short overview reports to detailed studies on particular aspects of a site. I recently completed a review for a small ecommerce site called TrapAWasp and felt that it neatly tidied together a number of different issues I had been discussing in this blog. The client has been kind enough to allow me to publish it here so hopefully it will be of some use to others. Please bear in mind that this is only a condensed site overview and doesn’t tackle issues in much depth.

Summary

As with all ecommerce sites there are two key factors that dictate its success or failure. These are the number of visitors that are driven to the site and the number of those visitors who are then converted into customers. It is these two factors that Headscape uses to assess the effectiveness of an ecommerce site.

Without looking at the web logs of a site it is hard to tell just how successful the site is at converting users. However, the initial indications for TrapAWasp are good. The site is generally well designed, has few significant usability problems, and addresses most of the major questions raised by users considering purchasing online.

A more important problem exists with regard to driving traffic to the site in the first place. Although good use is being made of Google Adwords the organic listing on search engines (in particular Google) is very poor. We believe there is significant opportunity here as a cursory analysis of the competition makes us believe it would not take much to push TrapAWasp to the top of Google’s ranking.

Visitor conversion

In many ways TrapAWasp is an example of good design. It is clean, simple and focused on enabling users to complete a purchase in the minimum number of steps. However, as with all sites there is always room for improvement and so below we outline several issues which should be addressed.

Design

The site has a strong visual identity. It is well branded: the site name, use of imagery and introduction leaves the user in no doubt as to what the site is about. However, two issues are of concern and should be addressed.

Screen resolution

28% of users are still viewing their computers at 800×600. Unfortunately TrapAWasp has not been optimised for this resolution and therefore requires limited horizontal scrolling in order to be able to read the product descriptions. This also creates problems with the number of products the user initially sees on page load. At 800×600 it appears TrapAWasp only offers 2 products while at 1024×768 the site offers only 4 products. Although users will scroll they tend to make judgements on whether a site has what they want without scrolling down a page. Jakob Neilsen a leading usability expert suggests that key content and products should be visible without the need for the user to scroll. One possibility would be to move the "view details" link to below the description so compressing the amount of space required for each product. Although this wouldn’t make all of the products visible it would help the situation as well as correcting the visual imbalance of white space next to the last two products.

Click here for more on scrolling and screen resolution

Browser compatibility

Although well over 80% of users’ access the World Wide Web using Internet explorer it is a mistake to ignore other browsers. Due to numerous security scares more and more users are turning to alternative browsers such as Firefox. Firefox has now captured well over 8% of the marketplace and is continuing to grow rapidly. Although not serious, http://www.trapawasp.co.uk/ does have some problems displaying in non-IE browsers. Some examples of the problems encountered include text being rendered with the wrong font and images being incorrectly positioned. Although it could be argued these problems do not affect the usability of the site it can knock consumer confidence leading to the belief that the site is in some way unprofessional.

Usability

Usability is an extremely important area of ecommerce design. If a user finds a site hard to use they will often choose to turn to the competition rather than struggle to overcome the obstacles they are facing. Generally the usability on this site is excellent. However, three issues should be addressed.

Delivery address

One minor but very frustrating issue with the checkout form is the need to enter address information twice. Even if you do not check the box marked "Check if you require goods dispatched to an alternative address" you are still required to enter the delivery address. Small problems like this can prove incredibly frustrating and should be avoided if possible.

Deteracat

Another potential cause of confusion is the sudden appearance of a link back to Deteracat on both the checkout and credit card pages. We have no problem in principle to the advert for Deteracat on the right hand side of these pages as cross selling is a good idea and one that should be encouraged. Our concern rather, revolves around the "continue shopping at Deteracat" button in the main body of the page. This immediately generates doubt in the minds of users at a critical stage in the buying process. The user is left wondering if they have selected the right products or whether they have been transferred to another site. We understand the motivation for this approach and the ability it gives the user to purchase products from both sites at the same time however we believe that the confusion this causes outweighs the benefits.

Addressing user concerns

One final issue with regard to usability is the "how to buy" section. It is good practice to have a section that addresses many of the frequently asked questions users have regarding online purchases, but we feel that there is still room for improvement. More information needs to be provided within this section with regard to security. Users are hesitant to give credit card and personal details unless they know it is secure. Although you do provide this information on the credit card page this is late on in the process and after the user has already given you significant amounts of information. On a similar vein it would also be wise to provide some form of privacy statement here. Again we are aware that this information is available from the footer but we do not believe this gives the information the prominence it deserves. Finally we believe that the how to buy section should include information on delivery times as this is another common question and a significant number of users will be unable to view the flash animation on the homepage. In short there needs to be greater emphasis placed on answering users queries and that this section may need a name change to accommodate this kind of information.

Accessibility

It is easy to dismiss accessibility as being an issue solely about the disabled however the truth is that it is a much broader issue than that. Accessibility refers to ensuring a web site is accessible to the widest possible audience including disabled users, those with poor vision or motor skills such as the elderly, and those working within various technological constraints.

Disabled users

Disabled users in the UK have a spending power of £50 billion annually according to the Disability Rights Commission. What is more this figure does not include the elderly who have poor vision or motor skills. Catering to this audience provides a unique way to separate you from your competition. That is not to say that you ignore your abled-bodied users. Rather, we recommend that you make some modifications to your site to make it more disabled-user friendly. There is not time in this report to catalogue every problem disabled users might encounter with this site, but we can say that the site fails to meet even the most basic level of international standards on
accessibility (WAI Level A or Priority 1).

Click here for more on accessibility and business

Technological barriers

As well as creating barriers to the disabled a site can also create technological barriers which force users to turn to the competition. One example of this is in the use of JavaScript. JavaScript has been used in order to carry out the validation of the checkout form. These scripts check that each field has been correctly completed and informs the user of any potential errors. The problem is that 5% of users do not have JavaScript available so these users simply cannot purchase from the site. This is the equivalent of turning away one in twenty customers who try to enter a shop.

Another technological barrier is download time. Although broadband has exploded over the last year still over 50% of users still access using dial up. http://www.trapawasp.co.uk/ takes approximately 17 seconds to download on a 56k modem compared with say http://www.waspbane.com/ which takes only 7 seconds to download over the same connection. With a 10-second difference per page and a 6-page purchase process that is a minute of unnecessary waiting. It may not sound like a lot but website users are incredibly fickle.

Driving traffic

You can have the best website in the world but if nobody is aware of its existence then it means nothing. Unfortunately TrapAWasp does not have the online profile it should have and this will be having a direct impact on the number of sales being made. The problem is the most pronounced on Google where TrapAWasp does not feature within the top 100 results on valuable keywords such as "wasp traps" (results on google.co.uk were slightly more positive but not by much).

Not that things are entirely doom and gloom. TrapAWasp does appear to be supported by a very effective Google Adwords campaign that goes a long way to redressing the balance of poor organic listings. It also has better ratings on sites such as MSN search (listed 7 th) and Yahoo (listed 8 th). However with Google owning 69% of the British search market it is vital that TrapAWasp receives a good listing there. Pay per click campaigns can prove very effective but they also dramatically reduce profit margins and so should only be seen as a stopgap or compliment to organic listings.

After comparing TrapAWasp against other sites listed under rated keywords it became obvious that the problem laid in the sites link popularity.

Google uses a complex algorithm to calculate your position in the ranking. However, two factors dominate that placement. One is keyword density and the other is link popularity.

Keyword density refers to the number of times a particular keyword/key phrase appears in the content of the site. For example the phrase wasp traps appears 17 times in your homepage giving it a keyword density of about 11%. After comparing this to other web sites we discovered that TrapAWasp is on a par with the competition. It is therefore fair to say that this is not the factor that is limiting your rating. That leaves the factor of link popularity.

Link popularity refers to the number of sites who link to TrapAWasp and the perceived popularity of those sites. The more sites that link to you and that you in turn link back to, the higher your ranking. However, it is not just about numbers. It is also about the perceived quality of the site that links to you as well. For example a link from the BBC website would be worth a lot more than a link from an unknown name. Another important factor is the words used in the link to you. The words "wasp trap specialist" will rank you better on the words "wasp trap" than a link using the words "The Jones family business". Currently not a single site listed on Google link to you and this explains your poor ranking.

There is, however, good news. Even the sites ranked in the top positions on Google have very little in the way of sites linking to them. It would not take many good quality links to move TrapAWasp to the top of Google’s organic listing.

Click here for more on link popularity

Below I outline a few techniques that would significantly help your placement on Google:

Look for link partners

Firstly look for as many sites that will link to you as possible and get them to add your site. One way of doing this is to search on Google for the words "add url" and a related keyword phrase such as "wasp traps". Doing so led me to this site: http://www.backyardgardener.com/ph/gardenproblem/gardenproblem.htm which actually has listed a wasp trap that is no long available! There is an add url link at the bottom of the left hand navigation that will allow you to add your site.

Copy the competition

Go to Google and search on a key phrase that is related to your site. Copy the url of the site listed number one in the list and then search again using the following search phrase "links: <url of competition>". This will show you all of the sites that link to that url. Contact each of those sites in turn and ask them if they will also link to you. Once you have done this return to Google and repeat the process all over again but this time with the next site down on the list.

Message Board seeding

Another very effective approach is to take part in message boards on related subjects such as gardening. When posting on these boards you can add a link back to your site and so improve your link popularity. However, a word of warning on this approach. If you just post adverts on peoples forums they will remove them and probably ban you for good. A more successful approach is to contribute to the forum providing useful advice and insights. Almost all forums allow you to add a signature to your post and it is in this signature that you include a link to your site.

Increasing keywords

Although this approach is not related to link popularity it is a vital component of increasing the traffic levels to your site.

One of the problems with securing high ranking is that short keyword phrases such as "wasp traps" are highly competitive. However, users often use much long search terms and it is sometimes easier to target these. The best way of targeting them is to include a lot of copy on your site that is related to the subject matter. This is normally achieved by adding an articles section on your site. This can prove very effective
. Take for example the Headscape site. Web design is a highly competitive sector and competition for the keyword "web design" is immense. However because we have an extensive archive of articles we gain a lot of traffic through longer phrases. Search on "how do I become number one on search engines" and you will see what we mean.

We would recommend that an article section relating to wasps is added to the site. This could build on the existing content which talks about how to find a wasps nest and general information about wasps.

Conclusions

This review has outlined a number of areas in which TrapAWasp could be improved. However, our recommendation is that increasing the levels of traffic should be the number one priority. Poor ranking on Google is significantly damaging the levels of traffic and with a minimum amount of work we are confident that the site’s ranking could be dramatically improved.

Stuck for inspiration

Posted in Design on by Paul Boag

I received a brief today that required some mock-up designs to be produced, however the brief made no mention whatsoever of design. There was no logo, no colour palette, no style guide, no likes or dislikes… nothing! There is nothing worse than a completely blank canvas. My trick for dealing with it is to start with colour.

Colour can be a powerful influence over a design. Colour can dictate mood, style and even choice of imagery. That is why I find it a useful starting point.

All I had to go on was what the organisation did and the area they worked in. They were a government body that helped to rejuvenate towns in the south west of England. That was fundamentally all I knew.

Now fortunately, I live in the South West of England (Dorset). I have many relatives spread out through Cromwell, Devon and Somerset and could refer to family photos for inspiration. A quick walk around my hometown also helped, as well as getting some fresh air into my lungs!

This trip around the area either virtually (using my photos) or physically (by walking around town) helped me to pick up certain characteristics. These included; the coastline, the rolling countryside and the soil (especially in parts of Somerset where it stains everything red even the bricks of the buildings). Suddenly I had something to work with which eventually led to this basic palette

So what is the morale of this story? Do not sit staring at a blank screen. Get up, look for inspiration offline and approach the problem laterally.

Rich Media Advertising and Flash

Posted in Marketing on by Paul Boag

98.4% of Web users can experience Macromedia Flash content without having to download and install a player. Over 4 million homes now access the web via broadband with 40,000 new ones connecting each week. Rich Media Ads receive 5 times higher click through rates than traditional online ads. With figures like these perhaps it is time I started taking Flash seriously.

The problem with Flash

My problem is that I don’t like Flash. Or more to the point, I don’t like the way people use Flash. Also despite Macromedia’s assurances I still have serious concerns about its accessibility. However if I am truthful I think my biggest problem is ignorance. I used Flash in the early days and soon concluded that it was great for novelty animation but not much else. Well the product has since evolved and I have only recently returned to it in order to revaluate its potential.

Flash and advertising

Flash has seen its largest success in the world of online advertising and has, in conjunction with PPC advertising, revived the flagging market. Users that had become banner blind were recaptured with the TV like qualities of Flash. Flash could engage the viewer through exciting moving images and the use of high levels of interaction.

Flash has the potential to provide considerably more information on a product than a traditional banner ad without asking the user to leave the current web page they are viewing. Take for example the recent Kill Bill advert that has been short listed for the 4th Annual EyeBlaster Creative Awards. This advert not only promoted the film but allowed the user to view a gallery of images, all from within the ad itself. Another short listed advert allowed the user to play a scratch card style game while other ads even contain streaming video.

Lessons to be learnt

Of course we don’t all have large online marketing budgets to splash around on buying ad space. However that doesn’t mean we cannot learn some valuable lessons from the use of flash in online advertising.

We know that flash is a powerful ‘attention grabber’ and that the vast majority of users can view the plugin. We know the an increasing number of users have broadband access that allows the use of bandwidth intensive features such as streaming video.

With all of these things in mind perhaps it is time to look at Flash as a way of pushing traffic to key parts of our sites whether it is promoting certain products or focusing a user on a specific call to action.

Flash also allows us to demonstrate and explain complex concepts in an easier to understand and more engaging fashion. If a flash advert can allow a user to engage in an interactive scratch card game why cannot it also be used to allow users to interact with your products virtually or take part in an e-learning application. From streaming video presentations to interactive product demonstrations Flash opens up endless possibilities for your site that transcend simple text and imagery.

If you are interested in discussing how Flash could benefit your site or you are interested in running a rich media campaign then click here to email me now.

Art direction on the web

Posted in Design on by Paul Boag

Your site might be the easiest to use, most accessible site in the world but without a good concept it may well fail to sell.

What is art direction?

The first thing to say is that art direction is not a new concept. In fact, it is one that is found in almost every other creative medium. You find art directors in film making as well as in print design and the world of advertising. Their job descriptions differ slightly from sector to sector but fundamentally they work alongside graphic designers and copywriters to come up with concepts that sell products or communicate ideas. They often communicate with us on an emotional level through the use of metaphor and symbolism. Art direction finds the switch that makes us buy into the product or concept they are trying to sell.

We are constantly exposed to the end product of art directors. Just try looking at billboards as you walk down the street or watching TV commercials and you will immediately see art direction at work.

How does this relate to the internet?

The sad truth is that although art direction has proved itself in every other advertising and marketing medium it has been largely ignored on the web. When it comes to web site design, developers focus almost exclusively on the interface, its usability, accessibility and functionality. Some attention is given to copy but only in an attempt to keep it easy to scan and digest. All too often little thought is given to the concept behind a site.

Let me give you an example of what I mean. Suppose a company who produced stair-lifts for the elderly were looking to launch a new website. Most web design agencies would focus on making sure it was easy for the elderly to use. They would ensure that the buttons were easy to click, that text was large and had sufficient contrast to improve readability. The graphic designer would probably include lots of stock photography of people using stair-lifts and warm reassuring colours. He will focus on whether to have a two or three column layout and how to incorporate the logo.

Although all of these things are important they fail to address the overall concept that will sell the product to the user. The approach lacks art direction. An art director focuses on a concept that will promote the benefits of the product. Stair-lifts provide freedom to an elderly person and open up areas of their house which have not been available to them for sometime. The art director may then focus on concepts of unlocking closed doors, breaking free of chains and flying free like a bird. This would be reflected in the choice of imagery and the copy used. This subliminal messaging reinforces the more traditional approach to web design and helps to move the user further along the sales process. It connects with the user on a deeper emotional level than traditional web design.

The way forward

So how do you begin to apply these techniques to your site?

Establish your concept

Have it clear in your mind what it is that you wish to communicate – be that the unique selling points of your product or the key message of your site. Also ensure that this message ties in with your objectives for your site. Always ask yourself, is this going to help me achieve my goals?

Brainstorm

Do whatever it takes to come up with as many ideas as possible. The more ideas you generate the higher probability one of them will be a gem. Don’t censor yourself. Write down everything that comes into your mind however bizarre it may seem. Also don’t worry about the details. That can come later. Focus on keeping up the flow of ideas and getting them down on paper. And remember, focus on symbolism and metaphor. The idea is to communicate your concept on an emotional level not necessarily a literal one.

Narrow the field

Now that your ideas are down on paper start to work through them and remove the weaker ones. Once you have narrowed the field to a few of the best start to flesh them out and add detail. Compare them to your objectives again to make sure they clearly communicate the right message. This process should make it clear which is the best concept to proceed with.

Managing the team

Now is the time to work with your designer, programmer, copywriter or external design agency to apply this concept to your site. Remain flexible, since a good idea can always be better, but don’t allow your concept to get lost in the practicalities. It is your job to bring all of these people together to turn your concept into a reality.

Conclusions

So is that all there is to art direction? Of course not. To a large extent art direction is a creative process that is hard to quantify. If you are not confident thinking in this way then maybe you are better finding a web design agency that offers these services. However, don’t be afraid to experiment. A good concept can have a dramatic effect on the response levels your site generates and shouldn’t be lightly ignored. Also with so few websites making use of art direction techniques there is a real opportunity to put yourself ahead of your competition.