my thoughts

Got 3 minutes? Two short articles on the fold for you:

Whilst www.thereisnopagefold.com has the shock tactics, there is more to consider. I’m working with my client's obsession with the page fold. Here is a short article in which Jeff Atwood explains how the fold is used effectively for for his site (stackoverflow.com/ an IT Q&A site).

Revisiting the fold:
www.codinghorror.com/blog/archives/001307.html

It references CX partners’ recent usability study on page scrolling which makes a compelling argument to present to your stakeholder when in the situation where everything must be above the page!

Design tips to encourage scrolling

1. Less is more – don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.


2. Stark, horizontal lines discourage scrolling - this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.


3. Avoid the use of in-page scroll bars - the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.

Get the full details – summary of the UX study:
www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm

My client's style guidelines lend themselves to strong horizontal lines that may discourage users from exploring content below the fold. So this is a hot topic for me.

Don Norman has a knack for observing the world around him, pointing out the crazy things that silently frustrate us daily. His books are absolutely fascinating — I had always wondered why the knobs on a cooker are never arranged in the same spatial pattern as the burners they control. But why are things so complex?

Don's recent essay points out how we can invest in design and technology to create more intelligent systems that remove the burden from accomplishing a task, to create a simple system with few controls.The problem is that on a shop floor, when a potential customer is evaluating a product, the fact is that features sell — why pay more for a device with fewer buttons even if the device actually does more and is easier to use?
» www.jnd.org/dn.mss/simplicity_is_highly.html

The domains of web accessibility and web usability often overlap, given the need to communicate effectively with the widest appropriate audience. In march 2006 the Disability Rights Commission produced a document called PAS-78, which provides accessibility guidance for people who commission websites.

The document provides information in a fairly non-technical manner and covers how disabled people use the web, defining an accessibility policy, technology (CSS, scripting, plugins), accessibility testing and maintenance, and contracting web design and accessibility testing services. It also covers the W3C guidelines, and provides advice on involving disabled people in the development phase.

I recommend obtaining a copy of the report, and gaining a working knowledge of the recommendations if you are actively involved in web accessibility and usability. The document is now free to download from the DRC.

Download the PAS-78:
» www.drc.org.uk/library/website_accessibility_guidance/pas_78.aspx

An overview of the report:
» www.accessibility101.org.uk/pas78.htm
» www.bsi-global.com/ICT/PAS78/index.xalter

Jeff Atwood maintains a coder's blog which covers .net development and human factors (two things I spend a lot of time with). I recently picked up on his summary of 13 attributes of considerate software. These are simple factors that set a software application apart from the crowd by putting the user's needs before its own.

These principles are easily applied. For example, I prefer to be flexible with date input fields. Rather than forcing the user to enter a specific date format (dd/mm/yyyy) and throw back some validation if 'bad' data is supplied, I work with the user, allowing flexible date entry in any format and gracefully parsing the supplied information into a valid format.
» www.codinghorror.com/blog/archives/000550.html

Why is having a text-only version of your website something of a cop-out, and a dodgy way to meet basic accessibility needs? Here is some helpful advice on designing an accessible website. See my follow-up posting on accessibility testing.


Who is this for?
As web designers and developers we need to accommodate various accessibility needs: well sighted; partially sighted; blind, and issues such as dyslexia. Perhaps not immediately obviously, an accessible site is one which also provides increased search engine visibility. Accessible design is more easily 'understood' by user-agents such as GoogleBot. (Try viewing your site in Lynx, as this is a good approximation of how a search user-agent will see your site.)

The following article on web design for low vision users puts forward the key points as to why doing it properly is better. It is more of the stuff I keep talking about (semantic markup, content order, true separation of style and structure, the application of the CSS box model etc.) but it is the right way to do things.

This quote from the Research section is particularly pertinent:
These users, however, do not want a "different" site: They don't want a "screen-magnifier version" or a "text version" if that means a site that has to be separately maintained from the main version. They believe the sites would not be equivalent. They believe the "special" site would not be kept up-to-date. The issue is how to provide "experience equity" and universal usable access to all low-vision users.
» www.alistapart.com/articles/lowvision/
» www.stopdesign.com/log/2005/06/24/zoom-layout.html


Application of the techniques
A good solution should deliver a visually engaging, well laid out site for the majority of users; provide an alternate High-Contrast stylesheet for partially sighted users (switchable as user preference) and possibly add hidden visual elements which are rendered with a specific audio stylesheet to aid screen reader navigability.
Developing a High Contrast stylesheet is actually quite fun, as you get to tear your design back to the real basics, using huge fonts and bold colours!

Particular attention should be paid to any forms present on the page as the interaction they provide can be a stumbling point for screen readers and zoom layouts. Websemantics have a summary page on making accessible forms, covering everything from the absolute requirements through to nice-to-have's.
» www.websemantics.co.uk/tutorials/accessible_forms/


Dyslexia and font choice
Dyslexic users are often overlooked when considering accessibility features. Careful font choice and writing style can siginificantly increase the audience for your site (there are over 2 million dyslexic people in Britain). Few of us realise that it is not difficult to design to include this audience. The Read Regular site gives an excellent visual introduction to dyslexia, though the main purpose of the site is to introduce the ReadRegular font (which is a beautiful example of typographical design).
» www.readregular.com/english/dyslexia.html
» www.readregular.com/english/background.html.
» www.readregular.com/english/intro.html

The British Dyslexia Association have a useful page of web design tips.
» www.bdadyslexia.org.uk/extra352.html


General typographical advice - design in plain English.
Design is not just careful colour choice and a keen eye for the particular dimensions and position of things on the page. A great design is one which shows good understanding of some basic rules: Type shape and size; Line length and spacing; Text Alignment (columns); Graphic elements; Professional touches. Get these right and you provide a great foundation for the rest of your layout. The page also has ten tips which neatly summarise the above points and a glossary (so now you know where to look when you don't know when to use a hyphen, an en-dash or an em-dash).
» www.plainenglish.co.uk/guides.htm (Scroll to 'Design and Layout', PDF)


Write in plain English
The Plain English Campaign have produced a free, short guide to effective writing. It is well worth a read. It will help you write more clearly!
» www.plainenglish.co.uk/guides.htm (Scroll to How to write in plain English, PDF)

I hope this is all useful. I've been working with, learning and applying the techniques throughout my career as a "technical person who understands design" and have found they make for better websites, happier users and well pleased clients!

Practical examples of good accessible design
The newly redesigned Einfach für Alle (simple for everybody) website is a great example of what is possible. Thanks to Accessify (a useful website for conscientious web developers) for the info.

Scott Granneman of SecurityFocus presents a simple article explaining the problem with popups, alerts, messageboxes etc. We already know there are too many, and that most people ignore them, but what is being done to improve the user experience? Some operating systems and applications are now restricting alerts according to your preference: control freaks see everything, whereas the users who are just trying to get stuff done are only asked to make critical decisions.
» www.theregister.co.uk/2005/12/13/secfocus_popups/

A summary article on why we love rounded corners. The article states that the reason is beyond the simple aesthetic properties, but has deeper meaning from an interaction design & usability perspective.
» www.basement.org/archives/2005/11/why_do_we_love_rounded_corners.htm

welie.com has compiled a useful resource which describes common situations in user experience design for the web, gui and mobile application. The examples are helpfully categorized and visually accessible. Worth a look.
» www.welie.com/patterns/

It is vaguely reminiscent of this handy reference site: user interface design patterns: (Now updated to match the O'Reilly book)
» designinginterfaces.com

Findability is another goal of Information Architecture, along with usability, accessibility, credibility and desirability. Usability and accessibility are two topics that have been particularly popular lately, but is good to see others promoting findability:
» www.findability.org

Plain English is "a message, written with the reader in mind and with the right tone of voice, that is clear and concise."
www.plainenglish.co.uk/plainenglishguide.html

Here's some more top stuff from Jakob Neilsen, this time illustrated!
www.useit.com/alertbox/20021223.html