Seven Web Design Lores

Inclusive Design is Important

User Experience isn't only about how a web page looks, or the "user flow". The web is not only a visual presentation medium either. A great User Experience can only be an inclusive one.

Usability and Accessibility are good for your content. Over 80% of your customers may use different strategies to access your content than you think they do. Don't lose customers by occluding 'users'.

If you break one or more of the lores of web design, you are likely to exclude a potential customer.

The Seven Lores

There are more Lores to live by, but these will get you to think about what you, or your budget web design team are up to with your content. There's no point putting in all that hard work on your web site and then finding no one can, or no one likes to use it.

  1. Use a semantic (logical) order to your HTML structure signposted with semantic heading markup (h1 to h4, for example), etc. Call a spade a spade!
  2. Write HTML for content, CSS for style, and JavaScript for functions.
  3. Use contrast and colour inclusively. For example:
    • Do not place text over a gradient
    • Do not place text over a translucent background or image if contrast between the text and background may be compromised
    • Do not use colour alone to convey meaning
  4. Create forms for accessibility and usability:
    • Use semantic form elements such as fieldsets, legends, and HTML buttons for executable commands
    • If you use an non-form element as a form element, use WCAG ARIA attributes and syntax
    • Use labels for all inputs, and apply a "for" attribute to the labels to match the ID of the labelled input
    • Manage errors: don't only handle the,. Choose the right input for the right input
    • Manage tab orders and focus
  5. Write meaningful links that convey meaning in isolation, i.e., "Click Here" has no meaning in isolation. (See my blog post, "Click Here" for Useful Link Writing.
  6. When using images, video, audio, animations, etc., offer an alternative method for your user to comprehend the content. For images this may be a meaningful alternative text, or long description, for other media this may be a link to a page where the content is presented accessibly.
  7. Develop your website using a fluid-responsive design philosophy and apply mobile-first methodologies during development. Do not exclude users due to the choice of device they use.

Sadly, A Poor Example

The bunclody.net website is a VISUALLY extreme example of a potentially fantastic website being delivered in an inaccessible and near unusable way. But be assured, if there is a design flaw in your website that makes it less accessible or less usable than your customers want, then it may have the same effect on them as this may on you.

It's not that it looks "old". Recall, the Web is not only a visual medium. But visitors must work very hard to navigate through its otherwise excellent content. The site is of fixed width, so is very difficult to use on a smaller screen (80% of web traffic is via "mobile" device: 2016), animated gifs dance without cessation, and users of Assistive Technologies will only struggle to navigate the table layouts - never mind the complex navigation architectures and lack of pagination or bread crumbing.

bunclody.net desktop view
bunclody.net smartphone view requiring zooming

This is a great shame. The site has the potential to be one of the most accomplished local and visitor reference sites in Ireland and yet all that hard work by its creator may be lost on at least 20% of our web users: that could be 20% or more people who won't read all the great content and may then not visit Bunclody at all. Who knows?

But don't go thinking this is by any stretch the worst of the websites I see "creatives" putting up. Bunclody.net has a lot of positive thought to it - despite a poor and out-of-date presentation. I am dismayed at the number of "cool" or "fashionable" websites out there that cannot claim to be any the more accomplished: and content wise, many that cannot measure up.

Summary

Don't let your website look great, without being great - for EVERYONE! Be inclusive. Occlude just one web user and you have lost a customer.

The Web is not only a visual medium. Great digital design is not about visual attraction but inclusively encouraging curiosity, fostering trust, and enabling our users to experience learning too.

Bunclody.net is only a small amount of work away from being spectacular. What about your own site? Is it accessible, usable, useful, and learnable, or are you just going through the motions of 'having' a website?

Go to smallbusiness.learningtoo.eu to learn about my Website Review services.

Comments

Popular posts from this blog

Click or Tap? Misunderstanding of Affordance

Why use a Quick Reference code on your crafts and products?

"Click Here" for Useful Link Writing