Design Considerations

Overview

The last decade has seen the Internet become a major resource for charity fund raisers. And Rentaballoonrace is now beginning to grow revenues for many charities in the UK and globally.

However, your race website has pitfalls just like any other media, so these notes attempt to highlight where poor design and careless thought will create a bad experience for the charity supporter. The major aspects of web design are:

  • Basic generic needs
  • About colours
  • Basic mistakes regarding consumer usability
  • Charity specific points and summary

Though there are a myriad of ways to fundraise using the Internet, for most charities their website will be the most obvious and number one consideration. Sadly, however, this is a marketing tool that largely under performs for them, and for no really good reason.

The most common stock answer given by charities when told that their site is pretty dire (as most are) is that there is a lack of funds. Lack of funds, however, should not equal lack of imagination. Given a reasonable age span of supporters, there will be many capable sub-thirty year olds within the supporter base who can produce, with the aid of one of the many design packages around on the market, something quite acceptable. And what are the four primary characteristics that make so many charity sites poor?

  1. No clarity of communication or message: What does the charity really do and how is the money spent
  2. Poor design: the site is a ‘hotch-potch’ of thoughts and aspirations usually cobbled up by the ‘committee’
  3. Too much Information crammed onto the home page: Often the many disparate departments within a charity fight and squabble over homepage pixels
  4. Illogical navigation and user inter-operability

1.1 Basic Generic Needs

If you want your charity to have a successful virtual balloon race, your race website should serve the needs of your supporters easily, utilizing messages and communications that are readily understood. And because the Internet is an ever evolving platform, you will need to constantly and consistently work at developing your offer too. The following aspects of website design are the basic generic building blocks of success, and they’re all important.

1.1.1. Fast Loading

This is blatantly obvious, but a concept that most charities fail to think about! The average patience threshold of today’s Web surfer is now below 10 seconds and falling (http://news.bbc.co.uk/1/hi/technology/7417496.stm) so if your home page does not load quickly, your supporters will surely click off and go elsewhere. Things that slow loading speeds down include:

a. Pictures can be huge files, often 3mb, so more pictures equals slower speeds. To ameliorate the effects of pictures, there are a number of tactics available:-

  • Compress all pictures into .jpg, .png or .gif files
  • Specify image dimensions (a x b pixels)
  • Slice your images but avoid too many slices
  • Don’t resize images within HTML
  • Use the ALT tags correctly
  • You can control graphic size by reducing the total number of colors used or “crunch” them using any of the popular GIF or JPEG crunching programs available (free programs include GIMP or Google’s PICASA)

b. Flash can be a big problem, if only for the fact that many users do not have it installed. Tactics to reduce flash problems include compressing or eliminating all unnecessary flash elements or using Javascript to implement a picture rotation system. Furthermore, although search engines are slowly increasing their flash readability, as with PDF’s, they won’t follow the links and therefore never get past the homepage! Flash is generally accepted as being very negative for SEO purposes (search engine optimisation)

c. Cluttered Code. To reduce the problems associated with cluttered code, the following tactics are helpful

  • Use CCS instead of images
  • Convert from Table to CSS based layout
  • Use external style sheets
  • Remove unnecessary white space in HTML
  • Use shorthand CSS
  • Use relative links
  • Specify the Doc type

d. Server congestion is an issue

  • Reduce http requests from other sites
  • Don’t use https:// unless necessary
  • Upgrade your web server
  • use a tier one provider
  • Use Gzip compression to reduce HTML size
  • Upgrade server memory

e. Database Design

  • To maximize speed of download, separate content and database servers

f. Miscellaneous help points

  • Use a loading progress indicator to reduce impatience in users
  • Use AJAX instead of page refreshes
  • Reduce size and number of cookies

1.1.2. Good Eye-Catching Design

Many of Andy Warhol’s pictures are justifiably revered for their relatively simple, but eye-catching designs. A website design is no different – make it cluttered and messy and no one will want to look at it for long.

Similarly, be careful when choosing colours to use – for example, red is used sparingly on the Net as it is difficult for colour blind people to recognize it. Remember also, that too many different colours make your text hard to read and look unprofessional – you’re not creating a crayoning book advert. Finally, there are number of protocols about colour on the Internet. For example, the use of coloured text to indicate links – blue is traditional, and to emphasize important concepts or points. For more about use of colours, please see the section following.

1.1.3. Simple and Logical to Navigate

Your website should be easy to navigate, so don’t make your supporters click through tens and tens of irrelevant pages before you give them the information they need. If you make it easy for your visitors to move through your site, they’ll stay around much longer, and will be more likely to visit you again! Some basic points include:

  1. Logical site structure – categories, sections, and links in relevant positions
  2. Show a list of locations you can use to browse the site
  3. Show your current location
  4. Always have a sitemap [covers as a back-up]

Similarly, good sites generally have navigation menus that remain in the same position throughout the site, though whilst every individual page need not necessarily contain a navigation menu or bar, it must contain a ‘home’ function or a small but readable crumb bar system. Users should not have to use the back button. Similarly excessive use of drop down menus is not helpful; other techniques using Javascript are preferable.

Do not encourage any horizontal scrolling, or excessive pagination, and remember that a good designer should always link the site/company logo to the home page wherever that logo appears.

1.1.4. Establish Credibility

Make sure your charity’s message is obvious because if visitors can’t readily understand what you’re about, they’ll go somewhere else. Does your charity name signal what you do? Is it an acronym such as the RNLI (Royal National Lifeboat Institute). Every aspect of your site should somehow contribute to your goal — be it to garner contributions, inform, or simply entertain!

Your site needs to transparently promote your registered charity status. If visitors to your site suspect something untoward, they won’t trust you and therefore will not become benefactors! Believable testimonials and images help create trust. Generally the more information you give your visitors, the more secure they’re going to feel about giving to you.

1.1.5. Focus on Relevant, Fresh Content

Your website content [often called copy] must be up-to-date and relevant to your audience. If your site is primarily information based, then you need to be sure that you are adding new content on a regular basis. Why would your visitors come back if there is nothing new for them? Plus, you lose credibility when your information is old and out of date. Make regular changes to your site. They do not need to be drastic changes — for example, quote recent web statistics instead of those from 5 years ago, change your testimonials regularly and update your copy.

To ensure consistency of your written English, including syntax and grammar, it is best to have one copy writer. If you have several, like a newspaper, you will need a copy editor to review the disparate offerings. For example if one writer uses very formal language and another writer is heavy into slang, then the copy can become dysfunctional. An editor will ensure consistency of text.

1.1.6. Robust Design and Brand Consistency

Remember, that though a charity, you are still a brand in people’s eyes. Cadbury’s chocolate bars are titled with a particular font which has remained the same over several decades, as has the dark blue contents wrapper! So be sure that the look and design of your site is consistent.

Inserting Picture…

Choose a back ground colour and stick with it. Choose link and text colours, and use them consistently throughout the site.

Always put your navigation buttons in the same place, be it along the side, or across the bottom of the page. Consistency of design will ensure that the experience at your site is a pleasant one. It will also let visitors know that they are still at your site, and haven’t linked off somewhere else!

All links should be relevant to the site and encourage people to click on them. They can either detract from your site, or contribute to it. Think creatively when developing your links!

1.1.7. Consider Database Marketing

Design the Rentaballoonrace race website so that you can capture your visitors email address and more on a permission given basis. Provide your visitors with at least one viable reason why they should opt-in to receive future communications such as a free newsletter, free competitions, chance to take part in future events for example.

1.1.8. File Names

Use descriptive and meaningful file names. Your files names not only show up in the search engines, but also at the top of your visitor’s browser and in their bookmarks! Would you remember why you bookmarked a page that looked like this:

http://www.neatsite.com/cgi-bin/900wty/f862uz?5331a7qw334

Or would you be more likely to return to

http://www.neatsite.com/cgi-bin/Newsletter

1.1.9. Easy Contact

Make certain it is easy for visitors to contact you – ensure that they don’t have to click through myriads of pages for your contact details. Part of building credibility involves ensuring potential future supporters know exactly who you are, where you are and how they can contact you. Obvious transparency definitely pays dividends!

1.1.10. Structure for Search Engine Optimisation (SEO)

Design your website so that all pages within the site, not just the homepage, can be optimised.

1.2 About Colours

Colours are crucial. The colours you choose will say much about your organisation – get it wrong and you can look cheap, nasty and amateurish. Good choice requires experimentation but time can be saved by using newly available web tools that help decipher what goes with what. Similarly helpful are the time-honoured ‘rules of thumb’ devised to make choosing complementary colours easier. And don’t rule out inspiration, not everything in life is formulaic. Easyjet’s consistent use of orange was a complete leap of faith in many designers’ eyes!

Why is Colour so Key?

Colour is a key aspect of web design for five primary reasons. Firstly, colour can be a hugely emotional thing and psychologists have studied the effects of colour on the brain for many years. Red is perceived as aggressive and macho, hence all Ferraris are predominantly red!

There is a generally accepted notion of convention too – yellow is reputedly for cowards and all eco sites appear in some shade of green. Corporate sites are mostly blue and green pastel shades – absolutely nothing garish!

Thirdly, just as colour choice can be emotional, so may culture affect colour choice. Dark blue and green coloured materials predominantly make up the clothing garments of tourist trade workers in Scotland and Ireland respectively. This reflects the colours contained in their national flags.

Fourthly, as websites are rarely mono-tonal, so there will be a palette of colours, all of which should complement each other. If colours clash, the website visitor will be put off.

Fifthly, the concept of consumer usability is now becoming a major issue as the Internet using fraternity expands to embrace all sorts of people with either learning or visual impairments. Usability experts have consistently flagged up the dangers of making inappropriate colour choices, for largely practical – as opposed to strictly aesthetic or psychological – reasons. Certain colour combinations are seriously unacceptable – purple and red massively conflict for example. Poor colour choices can bring on headaches, migraine and eye strain forcing users to leave your site. Ill conceived, disjointed page layouts can exacerbate the situation even more!

And finally, don’t forget about having good contrast – because contrast is a key component of accessibility. For example, as mentioned earlier, good contrast is required to ensure legibility of text.

So having realised that emotion, convention, culture, the use of complementary colours and consumer usability are the primary drivers of colour choice, which of these parameters take precedence?

Well, the answer to that question can only be decided after analysis of the target audience. For example, a corporate Scottish financial products website aimed at local savers will use low key pastel shades which is very corporate, plus some dark blue to highlight the Scots factor. An Irish online kipper shop will use a lot of green and big pictures of product. A games website aimed at teenagers will use lots of brash colour that is aggressive and fits the notion of teenage culture – lots of black and dark purple, great artwork and little text!

Some Helpful Tips regarding colour choices

A.Think about the Client

Charities, for example, are considered corporate entities, if only because most are hugely conservative and bureaucratic in their approach to everyday operations and processes. So your colour scheme should reflect that.
Similarly, where in the UK does your charity operate from? If it’s Scotland or Ireland, consider some use of national colours, emblems or artefacts. Does your charity target certain age groups, for example Age Concern? If so, consider muted pastels, not harsh primary colours like red. Consider also the visually impaired. People who are colour-blind have problems recognising certain parts of the spectrum. Older people cannot recognise small text.

B.Limit your colour numbers

For the best eye catching designs, use a minimum range of colours. Appropriate colour can be massively persuasive, for example, the ubiquitous red painted Ferrari, but it would not look right if the car was multicoloured like Herbie, the VW Beetle in the Disney film.

Most designers combine a blend of neutral colours and a range of shades for their main colour choices – remember harsh primary colours are not easy on the eye. Shades of grey and pastel blues are very commonplace in corporate work, for example Microsoft, IBM and Dell to name but a few.

Dell also highlight a significant white space – by spacing out content units and blocks of colour you’ll help guide the eye to key areas.

C.No Clashes, Remember Conventions

Inserting Picture…The use of clashing colours is generally frowned upon – only games sites can get away with such tactics. Nobody wants to read red text on a luminous green background, so avoid bad colour combinations. Conventions are important too because being radical can create problems. Anything environmentally orientated is usually some shade of green, whereas bright pink would probably be considered a bit strange.

Some beliefs about what colours say…….

Source: http://www.sessions.edu

D.Creating readable text

Text should always be superimposed on a single tone or wash and have plenty of contrast – for example, white letters on black are perfect. Using a patterned background behind the text is hugely confusing, as the samples below highlight.
Inserting Picture…

Below is a typical example of background clash on MySpace

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=416983683

Inserting Picture…

Trying to overprint text on top of a picture can similarly prove difficult, especially if you have a lot of text and the picture contains large areas of contrasting light and dark. A way round this problem is to use an opaque band to contain the text.

E. Links

Conventional wisdom is that all obvious hyperlinks should be coloured blue, mainly because the web’s most popular websites typically use blue, for example BBC, Times Online, Google. However, the mos6t recent trend is towards links which appear underlined or change blue only when scrolled over.

F.Brand Colour Consistency

Simple really, if you’re designing with a view to extending an existing brand or product, then there has to be colour or text/font consistency. Cadbury’s would be foolish to bring out any new chocolate product without a continuation of their famous and distinctive typeface!

G.Gradients and shadows

Gradients and shadows can help create a 3D effect

H.Creating Prominence

Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background. However, avoid fluorescent craziness.

Helpful Webtools for Selecting Complementary Colours

Adobe’s Kuler Colour System – Really useful site for colour freaks that needs flash player 10 to allow you to download for free.

Jermima Pereiras Colour Wheel – Useful wheel showing safe and unsafe web colours, however, lacks a complementary choice system.

Sessions Colour Wheel – Great webtool that need flash player to work it!

ColorJack – Very sophisticated system that needs thinking about.

1.3 Basic Mistakes regarding Consumer Usability

The Internet is maturing quickly so that the consumer usability function of websites is significantly better than it was several years ago. However, there are still far too many sites today making basic errors that impact negatively on usability and visitor loyalty.

1.3.1. Poor Navigation

Well designed navigation is crucial to usability and should satisfy four main considerations: Logical site structure – categories, sections, and links in relevant positions; Show a list of locations you can use to browse the site; Show your current location; always have a sitemap as a back up.

Similarly, good sites generally have navigation menus that remain in the same position throughout the site – it’s a useful anchor! Changing the navigation will only create confusion, so keep it simple and consistent. However, whilst every individual page need not necessarily contain a navigation menu or bar, it must contain a ‘home’ function or a small but readable crumb bar system. Users should not have to use the back button. Similarly excessive use of drop down menus is not helpful; other techniques using Javascript are preferable.

Other navigation taboos include having to use horizontal scroll and excessive pagination. In most circumstances, there is absolutely no need for horizontal scroll – all it does is show up a poor design! Whilst users are happy to vertically scroll to an extent (2.5 homepages maximum), they hate scrolling horizontally, so don’t make them do it! Too much pagination is really annoying – remember reading an interesting article, then getting to the bottom of the page to find a set of pagination links? It’s frustrating because you now have to load several other pages to finish reading the article. This may drive page views up so you can charge more for advertising, but it is really worth it? Not only is it annoying for your visitors, it’s also bad for search engine optimization (SEO) because you’re separating valuable content into other pages. This makes it more difficult for search engine crawlers to understand what each page is about.

Finally, a designer should always link the site/company logo to the home page wherever that logo appears.

1.3.2. Inconsistency

Using too many fonts, graphic styles and colours for example, creates an air of inconsistency, and even if the user doesn’t know why, it will probably cause confusion and put them off visiting the site too deeply. Even very small things like using upload/delete for some interactive pages and delete/cancel for others will cause annoyance.

Other examples include using non-standard GUIs or non standard icons. If you’re really committed to some arty style icons, then at least give them a caption or a tooltip.

1.3.3. Unwanted Pop-Ups of any kind

When you’ve just struggled for 30 minutes to buy your new laptop online, do you really want a pop-up survey or a plethora of adverts? Patently relevant pop-ups do have their uses, but unwanted and unexpected pop ups are irritating and counter-productive. Only the biggest sites with a perennial offer can get away with this tactic.

1.3.4. Inappropriate Links Methodology

Internal and external links are a key element on a website, so be sure to make them identifiable. The previous convention was to make your links always blue and usually underlined. Nowadays, the current convention is that the link or hyperlink should change colour as you hover over the word or phrase – this alerts the user to the link without being overly garish as previous! Most high profile news and newspapers like BBC, The Times and Daily Telegraph use this protocol.

Small link targets are most unhelpful too. Fitts’ Law suggests that there is a speed-accuracy tradeoff (http://en.wikipedia.org/wiki/Fitts_law) associated with pointing, so that targets or links that are smaller and/or further away require more time to acquire. For example, the menu on the left hand side of news.bbc.co.uk, have all of the light grey boxes containing individual words linked, rather than just the text.

On one of our own Purepages designed sites, www.stokeaudi.co.uk, the whole of the area shown below is sensitized, so that you’re not trying to accurately click the email address!

Some designers still use links saying ‘click here’. Some browsers (especially screen-readers) provide a list of links on a page elsewhere (for example in another window), so having a link saying ‘click here’ is no longer sensible.

1.3.5. Registration required to View Content

Ever found yourself happenchancing on a great website with potentially loads of information on exactly what you want to know, only to confront a registration request? Hiding away valuable content for registered users only is a serious and frustrating barrier for your visitors and is a great method of driving away traffic.

In a similar vein, if the registration form is too long, then that can present a serious obstacle — you’re forcing your visitors to do more work than they care for. People hate filling in forms, so remove anything that’s not absolutely necessary and anything optional off the form. Even if the form looks long, people will be put off. Remember that your users can fill out optional stuff later.

1.3.6. Opening pages in new windows

This stems from the now frowned upon practice of trying to stop the user from leaving the site by opening the external link in a new window. With modern browsers it is no longer sensible or relevant.

1.3.7. The Ability to Rectify Mistakes

When filling out forms, sending a contact email, for example, most users make mistakes at some stage. It is important therefore to provide an obvious way of rectifying that mistake, either an undo button or an edit facility.

1.3.8. Fonts, Colour and Text

As discussed in many other sections, small fonts that can’t be resized are not helpful – generally, 10pt is usually the smallest you want to go. Similarly, consider the 1 in 10 UK males who are colour blind.

Poor copywriting can create text that is often too long and un-scannable by eye. This means your visitors aren’t going to read your whole page of text because usually they’re looking for something specific or something of interest to them. They do this by scanning the whole page very quickly and looking for things to focus on — so give them those focus points. Use bold text, large headlines and images to provide a scannable structure to your content.

1.3.9. No contact information or contact form

Last but not least, if you visitors have a problem with your service (or perhaps want to give you their positive feedback) there should be a way to get in touch. You don’t necessarily need to go all the way and post your email and telephone number on the site, but there should be at least an easy to find contact form. There are sites out there that don’t even have that.

1.4 The Tick Boxes

In summary, a charity website should tick all the following boxes:

  • The site should be vibrant and happy
  • All messages should indicate optimism, a purveyor of hope
  • Make it easy to understand what the charity actually does
  • Have empathy with the clients and supporters
  • Use colours relevant to the charity’s vision, mission statement, and client/supporter base
  • Indicate where the supporters money goes
  • Consider all usability issues
  • Use a style compatible with the client market, culture and demographics