Zoom Zoom, layouts for visual impairment
Nomensa • 17th Nov 2005
Zoom Zoom, layouts for visual impairment
Nomensa • 17th Nov 2005
Testing sites with low-vision users shows issues that may not be apparent even in a technically accessible pages. Research from Mary Frances Theofanos and Janice Redish showed that columns can be very challenging for people using screen magnifiers. (Paper available through Ingeta or the Google cache.) Some of the issues found are covered by the Web Content Accessibility Guidelines, however some were not (i.e. multiple columns).
Joe Clark issued a challenge at the 2005 @ Media conference. Clark outlined an approach to developing web sites with a presentational style suited to low vision users. By extension he suggested that the user should be in control of the style selection.
This research undertook a usability test of a site with the zoom layout implemented. To make this realistic, we redesigned a copy of our own site to test.
Zoom layouts are intended to provide an easier experience for those using screen magnifiers because columns to one side will not be missed.
Implementing a Zoom layout for a site that uses CSS (Cascading Style Sheets) is straightforward, and can often be accomplished by editing one file.
We wanted to know:
The full questions were:
Using standards compliant code and scripting, it is (relatively) easy to place the choice of presentational style in the hands of each individual user.
Is it worthwhile to do so?
Result at zoom.nomensa.com.
The Zoom Starter Kit by Alessandro Fulciniti specifies a basic set of styles to be used for zoom pages. We chose (under advisement) to include light and dark background options as some people may have a strong preference for one of these options.
The placement of the navigation was a tricky issue. Historically we have placed navigation at the bottom of the code in the page, and on the left of the page visually. This works well for people with normal vision, and for people using screen readers. It is tricky because under a standard Zoom layout the navigation would be at the bottom of the page.
Previous work on Zoom layouts has suggested that main navigation should go at the top, and be sparse. However this would require a complete overhaul of the site, as the navigation has more options than would fit across a page horizontally, especially at large font sizes.
It was decided to maintain the position of the navigation, not because that was easiest, but because this style of navigation tests very well under most circumstances. Also, many sites have navigation that wouldn't fit across a zoom layout page.
It will be important for any site owner adding buttons or links to change the site style that they not disrupt the design. They should also not be on the right side of the page or the target audience may never find the links at all.
However, in a zoom layout situation, there is no left hand column. Although it is not desirable for the links to move, they were placed in the top-right of the page for the zoom layouts.
The low-vision users were members of the public recruited by the RNIB Bristol office. The only criteria being that they use the internet and have a visual impairment of sufficient magnitude to warrant using a screen magnifier, but not blind.
The participants with normal (or corrected to normal) vision were recruited by Nomensa. The only criteria being that they have used the Internet.
Each participant attempted half the tasks in the standard layout, and half in the zoom layout of their preference.
For the 50% of participants who started in the regular layout, the facilitator draws attention to the layout icons at the half way stage and directs them to try the different layouts. The participant is then asked to pick their favourite of the light/dark options and continue.
For the participants who start in a zoom layout, they were directed to try the layouts initially.
The tasks were picked to not overlap between the two halves; however, some participants did explore the site during some tasks. The full list will be available in the article to appear on nomensa.com soon.
Several of the participants using a screen magnifier took quite some time to complete the scenarios, so two were dropped during the first session, leaving 3 scenarios for each layout.
The final "desirability" question was to establish whether the person would choose the links out of choice. They were told that they would complete another scenario on a new site, and shown a new site. This "site" was actually a mock-up page that included the same buttons as the test site.
Participants were quicker on the standard layout:
| Low vision | Standard | |
|---|---|---|
| 3 Column | 02:55 | 01:07 |
| Zoom Layout | 03:23 | 01:32 |
Our hypothesis was not supported.
The three column layout seemed to provide participants with navigation markers while the screen was magnified, such as the navigation menu on the left. Although harder to read, it was quicker.
The increased size of the fonts and line height meant that there was much more scrolling.
Terminology caused the greatest problems for the participants, although this was consistent across layouts, it took longer to recover on the zoom layout.
Having a zoom layout meant the participants generally zoomed-out with their screen magnifier. However, this decreased the usability of the browser functions like using the scroll bar.
When asked about their preference, half the low-vision participants indicated a preference for the zoom layout. However, of those that prefered the three column format, several stated that if they were reading then the zoom layout would be preferable.
Clearly showing a dividing line between columns really helped people to know when they were at the end of content areas.
Interestingly, not one participant who started with the regular layout tried the layout links unaided. Only 3 of the 12 participants with low vision tried the skip link. Only one of the low-vision participants tried the logo as a link to the home page.
The navigation style used on the site works well under most circumstances, this continually tests well in general usability and screen reader testing.
Although the navigation being at the bottom was a significant contributing factor to the time difference, exacerbated by the sheer amount of scrolling caused by larger fonts and line heights.
The previous recommendations for zoom layouts include having the navigation at the top, however, this would be a difficult proposition for ours and many sites. It would require a different type of navigation, perhaps separating the main from the secondary navigation which would decrease the usability for most groups of people.
Many site owners would see this as a greater effort than should be required. It also doesn't live up to the promise of CSS in terms of re-styling the same page for different views.
The zoom layout suits sites which are oriented to reading articles and have a small number of main links, e.g. blogs, newspapers etc. However, sites with larger sections and numbers of links (e.g. councils, corporates & portals) would suffer.
In previous research, and our own observations, it's the right hand column that really causes issues, not necessarily 2 columns.
Although untested, we propose that the next step would be an intermediate version, Hybrid example.
Allows for greater expansion of fonts for the window size, with good contrast. Also keeps the 'decoration'.
Who should be responsible for multiple layouts?
Opera has had user style sheets for years, and there are now downloadable Firefox scripts (example from Mark Pilgrim) for this, and products such as Zoomtext can adjust contrast. However, they cannot cope with all types of site due to the overwhelming number of combinations of styling methods used.
Users tend not to know about browser options without training, especially for people with visual impairments as they are not always apparent. Anything users need to do to improve their experience would have to be strongly highlighted, to the extend of annoying others.
Site developers may not have to supply multiple sites as a matter of course. If the site has a simple layout and large (expandable) fonts with good contrast, there is little point. However, the more complex the design or layout the more call there is for a simplified version that can expand reasonably. A useful minimum would be to use standards based HTML/CSS methods which allow the user the greatest choice.
The answer is that each has a part to play. The problem is that there is no standard method, yet, hopefully we are a step closer now.
This presentation is available now:
Thank you