Web design do’s and don’ts

Principles and practice in union web design

Chris Lawson

CUPE National

Workshop Introductions

Workshop outline

Expectations and limitations

General goals for design

Designing to be found

Begin at the beginning - being found. There are 11.5 billion web pages out there. How do you expect your audience to find yours? If your URL is relatively straight forward, and your users are fairly internet savvy, they may guess your URL and just type it into the address bar. They may see it on a piece of paper, a TV ad or a radio spot. But most likely they will use a search engine. And that search engine will most likely be Google.

Design can play a role in how high up the list of search results your website appears.

Designing to be used

Imagine if road signs were treated like website navigation.

Usability is a preoccupation of a lot of people who make websites. Your page can be as pretty as you want, but if people can’t find what they’re looking for on your website, what does it matter?

This is a brand new subject for people who are used to producing print publications where the instructions are pretty much universal and taught from childhood: grab right edge, pull to left, repeat.

And websites do more than just give people a new way to read words. You can interact with people, buy things, reserve plane tickets, get your work done, file your taxes, etc etc.

There are age-old standards for road sign placement that ensure people know where to look to see if they have to stop or not, all this web stuff - even at 12 years old - is very new. And constantly changing.

Design isn’t the only consideration in creating a usable website, but it’s the one that overshadows all the others.

Designing to be persuasive

All graphic design aims to portray identity and create empathy in the viewer before fading discretely into the viewer’s subconscious to let content take centre stage. The visual message the design sends is supposed to amplify or corroborate the message of the site’s content.

And that’s as true for a web design company, where the message is "we do exciting design" as it is for a trade union, where the message might be "We work for justice and equality in the workplace and everywhere."

Designing to be original

The urge to create is strong in many people who sit down to create a website. And in seeking to create we seek to do something that has never been done before, to make a name for ourselves, to leave a legacy. Yadda yadda yadda. Whatever dude. Get over it. Okay. We come back down to earth and accept that it’s all been done before. Fine. But we still don’t want to be like everyone else. Each local of a union has some distinctiveness, and no matter how dearly we hold the notion that the whole working class has common interests and needs, we all want to be different.

Conflicting goals

Some of these goals have some commonality. However others are at cross purposes. Designing to be original, for example, almost always collides with designing to be usable. Imagine the world’s most original cell phone, designed to leave an indelible mark in your memory of things unique and awe-inspiring. Buttons, menus and even a keypad that no one has ever seen before, emblazoned with symbols hitherto unknown to humanity. Think it would be a big seller? On the other hand, imagine a site that strictly followed all of Jacob Nielsen’s rules. People like looking at pretty things.

What design isn’t

What design isn’t

  • content and in fact, as Jeffrey Zeldman says, Design without content is decoration.
  • information architecture jargon for what goes where and how do you label it.
  • applications what your website can actually do.
  • marketing/web communications strategy

What design is

Colour

  • don’t fight nature: keep your blues dark, your yellows light;
  • red is dramatic but there’s a reason it’s used for stop signs
  • red and blue together are hard on the eyes, as are most complementary colours.
  • analog, complementary, split complementary, triad
  • monotone chromatic/achromatic
  • ...or you can visit one of about a dozen websites that just do the math for you and suggest colour schemes.

The usability people say one or two colours maximum, where one colour predominates and the other is ’accent’; use system default colours to indicate link text.

The design people say use however many colours your muse tells you to and default link colours make it look like something is broken.

Colour conveys impressions, evokes feelings, etc.

the web is an additive colour system

"Browser safe" is obsolete.

Typography

Page structure/layout

Navigation

Images

Sound and motion

The purpose of design is to fade into the background and let the content come to the fore. If the ever-rotating image works as prescribed, it does exactly the opposite. If it’s subtle and tasteful, no one will notice it. So why do it?

Sound is worse because you might be ratting someone out at work for surfing to the union website.

General design principles

Web design that succeeds generally posesses some or most of these characteristics:

Unity

  • Use a consistent look and feel for all pages in your site. It should be obvious from any of your site’s pages what site the visitor is on.
  • Use recurring visual elements such as logos, colours and typefaces, and place them consistently from page to page.
  • Use a consistent font scheme. Use two different fonts to differentiate between headings or higher level sections, but no more than two.
  • Text and page elements should follow a consistent alignment scheme within a page and from page to page.
  • Margins, line spacing and indents should follow a pattern.

Simplicity

  • use fewer elements, rather than more. If you’re not certain of the need for an element (a box, a column rule, an image) leave it out. If there’s even an inkling of doubt, try the design without.
  • for every change you make: typeface, text alignment, ask yourself, what is its purpose? Does a subhead need to be bigger, bold, centred and in red?
  • how many elements need to be on that page?
  • give images room to breathe
  • Reduce noise: no sound unless it’s a music site; no movement or sound until the user says so.

Dynamism

  • Understand how visitors drag their eyes across your site and work with that.
  • Back when we used to talk about designing paper pages, we used to talk about readers’ gaze moving in a reverse 'S' pattern, from top left to bottom right. This allowed us to define primary optical areas, and less-viewed fallow areas.
  • Studies of reader use of web pages suggests that gaze patterns look more like an 'F'.
  • Good design respects this dynamic and places important or noticeable visual elements to follow, rather than fight this dynamic.

Contrast

  • Visual separation or distinction of page elements helps both clarify their function and create order on the page generally.
  • As a corollary, things that are related should be close to each other.

Issues in union web design

The button rash

A widespread phenom that results from the dynamic of scarcity of real estate on the front page.

There lots of ways to get on the front page, most of which involve creating compelling, useful and timely content.

Failing that, those who clamour for their button on the front page, should know the following:

  • Only between 20 and 30 per cent of a site’s viewers actually land there. It’s a popular destination on the website, but...
  • The majority land on other pages because they’re searching for something and their search engine refers them to your site.
  • People are banner blind. Anything that looks like an ad is ignored. Even if it’s an ad for the very thing they seek.
The 'button on the front page' is, unfortunately, a path of least resistance. The button’s sponsor can claim they’ve done their bit and they can stop bugging you. And so long as no one actually checks how it’s going, it’s all good. Apart from the overall design of your front page, no harm, no foul. But the minute you analyze your website traffic, the minute you set up some sort of conversion tracking or even follow up with people who visit the page, you see that the emporer has no clothes.

Actual solutions for getting more profile for program/campaign/service

  • Examine actual traffic to the site to see what brings them there
  • Evaluate how well that page performs in searches for its main keywords
  • Change content, revise page to perform better in searches
  • Create compelling content, link bait
  • Promote page via Facebook, Twitter, StumbleUpon, etc. etc.

The link farm

The decision to put a menu item in a menu, and in turn put that menu item somewhere prominent is more a topic for the information architecture workshop.

The design people will be wanting to limit the number of menu items and indeed the number of menus.

The proliferation of menu items and menus is usually a sign that information could be better organized.

Actual solutions for the link farm

If they must have a bazillion menu items on the front page:

  • Make them less prominent
  • Favour top and bottom nav over side nav
  • Use fewer listings but with 'information scent' see UK government for an example of how to do this well
  • Bite the bullet and tackle information architecture. Get some index cards, a book on the topic, and a bottle of something.

The human mosaic

An organization that’s all about representation is going to have some concerns about whether 'who' it represents is reflected in the website’s design.

We’ve all been told: "put the members in the picture", "tell real stories," etc etc.

But going there necessitates a quick trip to the doctrine of inclusion, and a multi-layer grid which includes boxes for gender, culture, ability, geography, occupation and physical ability.

And so we work into our flag an array of models dressed up to look like members, or actual members. Maybe they rotate. Maybe they’re just a lot of really small faces.

So what is the actual problem with the human rainbow?

It usually involves placing a huge image or - worse - an animated gif that

  • is driven by an old school approach to marketing
  • irretrievably imbalances the page layout
  • slows download time
  • limits your design choices
  • probably won’t satisfy anyone anyway
  • since the depth of the union’s committment is so easily verified

Actual solution for the human mosaic

  • Include representative images attached to content and relevant to content
  • Plan to have artwork of other kinds.
  • Do all your photos with an anti-oppression lense on

The logo

Warning: your logo on the web may suck. It’s true. Most logos hearken from an era before the web. Generally speaking anything that’s got a map of Canada, or a picture of a truck, plane, or some other bit of hardware or work product is going to suck.

Why? Because if you have to reduce those sorts of logos to average web digestable size, the detail is going to be lost and there won’t be much to distinguish your logo from a close up of a piece of pizza.

So what to do? If you don’t actually have the authority and budget to do a complete rebranding of your union, you may have to do some sort of visual treatment of your logo that hearkens back to the actual logo but presents the organization’s name in (stylish no doubt) text.

Where splash pages go when they die

Union websites apparently.

I admit, some of my cute design jokes are made at the expense of sites that are ages old and so hopelessly out of date that even their creators would not defend them in a court of law. So the presence of so many splash pages must be explained by the fact that unions are still stingy when it comes to web design right?

No. I give you caw.ca. Relaunched in the last few months, and still with a splash page. A splash page. What year is it?

Why splash pages suck

  • Means you’ve already used up one click when you only have three to get peopel whereever they need to go
  • They’re trying to visit your site. You already have their attention. With a splash page you’re just wasting their time
  • Your content is going to be harder to find on search engines
  • Mercifully, most people come to your site via a search engine and most of them will be given some other page and they’ll miss your search engine

Alternatives to splash pages

Most people who have splash pages have them because they run english and french websites and they want to allow the user to switch to the language of their choice before going on their journey.

So why not register your union’s french domain name and point that at the french language website? It’s a whole $15 per year. Figger the union can spring for it?

If you think you’re impressing people, stick to armwrestling in bars or driving a spiffy car. Trust me on this one.

Delivering your pages

In print land, they have to worry about paper stock, postage and all that. We don’t, but we have our own crosses to bear, don’t we?

Download times

  • 10 seconds is the longest people can wait before losing their train of thought.
  • to actually use a website at maximum comfort/productivity, page load times need to be around 1 second.
  • download times vary, of course, by the capacity of the user’s internet connection, of course. http://www.websiteoptimization.com/services/analyze/
  • In 2005 Statistics Canada estimated that about half of Canadian households had broadband internet access (68 % of all Canadians 18 and over use the internet)
  • The meaning of "response time" is changing with the advent javascript-driven web applications;

Access for people with impaired vision, mobility

  • alt tags on images
  • keyboard equivalents on menu items
  • tab order
  • no Flash

Browser/computer capability

  • standards-based design
  • semantic markup
  • most people have flash, can play video
  • Acrobat Reader

Screen resolution

  • your page should look and work the best at the most common size, which is currently 1024 by 768 pixels. By work best, we mean:
    • Initial visibility: Is all key information visible without scrolling?

    • Readability: How easy is it to read the text in columns?

    • Aesthetics: How good does your page look? Is it awash in a sea of whitespace? Is it jammed? Tucked into the corner?

  • liquid layouts vs fixed layouts
    • Type and image alignment become problems with liquid layouts. Line length goes wildly out of control. Probably too much so for most designers.
    • Fixed layouts need to look like they belong on bigger screens and to not commit any design faux-pas on smaller screens

Banners/buttons/ads

  • viewers are blind to them.
  • the good news is that despite the clutter they bring to the page they do not completely ruin a good design’s simplicity.

Further reading and resources