The first accessibility symposium of Aalto University for faculty, staff and students where community members discuss thoughts and exchange ideas to improve and co-design our collaboration, communication and interaction in education and research. The symposium is organised by OOPA, VIPU and Media Factory.

Enrol at  doodle.com if you seek to include all members of Aalto community in our daily activities.

Adobe Connect Pro: the webcast of the Wednesday programme at 12:30-17:00 available at URL
https://connectpro.aalto.fi/mediagoesaccessible/
Please login as a guest with your full name.

ACP participants: All feedback and detailed comments by using this blog, please!

Venue for session 1B:
Media Factory, Aalto ARTS, Hämeentie 135 A (Wednesday afternoon)

• http://mediafactory.aalto.fi/?page_id=693

Programme for the first day on 18.1.2012

11.30-12.30 Lunch (on your own at Katri Antell, Meccala, Kipsari or Dylan)

1B Afternoon session at Media Factory, Aalto ARTS >> Registration (on Net)

12.00 Registration on site: http://mediafactory.aalto.fi/?page_id=693

• Bring your company name tag (badge) with you, please, or make your own beforehand. This helps to memorise new people. Name tags will not be provided by the MgA!

12.30
Welcome to Media Factory. Manager Juhani Tenhunen
FabLab in Action. Anu Määttä

13.00
Visualization: Simulation and Experience in New Media. Prof. Lily Díaz-Kommonen, Aalto ARTS

14.00 Coffee (on the house)

14.30
Challenge: Colours as noise. Harald Arnkil, Aalto ARTS
A solution: Designing of Understanding. Prof emeritus Tapio Vapaasalo

15.30 Workshop theme: The use of visualization outside the Design world (e.g. in Contract planning, or in Service blueprinting).
Moderator: Postdoctoral researcher Olivier Irrmann. SimLab, Aalto SCI

• http://www.simlab.tkk.fi/

17.00 Closing remarks

Adobe Connect Pro: the webcast of the Wednesday programme at 12:30-17:00 available at URL
https://connectpro.aalto.fi/mediagoesaccessible/
Please login as a guest with your full name.

All the comments by using this blog, please!

PRESENTATIONS of the first day

Colours as Noise by Harald Arnkil

Colour, as a general category and experience, seldom arouses negative associations. We all love colours. I certainly do, and as an educator I am accustomed to talking in a very positive terms about the potential of colours. Today I’m going to be more critical. There are occasions when colours are not needed, they become redundant or turn into an irritating distraction.

It is said that we face today a flood of information from the media; that we live in an information society. Much of this information is visual in nature and involves colours and colour contrasts. But why does colour in this context seem so often to be wrong, misplaced, redundant, over-the-top?

There is such a thing as signal-to-noise-ratio, a term first used, as far as I know, in the field of radio-communication. It would indeed be perhaps more appropriate to refer to our media age and media society as an audiovisual signal society – so weak is sometimes the ratio of useful information in relation to the noise we are barraged with daily. When used in excess or inappropriately colour ceases to convey or contain information or meaning, being reduced to sheer meaningless noise like the crackle and hiss in a poor radio-signal.

I’ve looked at some web pages and asked myself: would these same colours be annoying, contain so much noise, in another context, or if they were arranged differently or applied to other forms and designs? Urban environments can be just as loud as a web page in terms of colour and they certainly contain much noise – also concrete auditive noise, which is a major cause of stress. But they can be exhilarating, too. There is a distinct difference in the colours’ mode of appearance and therefore in their effect on our psyche. It seems that the threshold for irritation and annoyance for colours in the media is lower than in physical the environment – and this phenomenon is hugely overexploited in today’s communication.

Colours in 2D and 3D space

I will argue that colours in a real 3D spatial context are less likely to cause noise than in a 2D or virtual 3D context. Colours in space are perceived more readily in their appropriate context as carriers of information about quality, familiarity, spatial position, movement, lighting etc. When colours are taken out of this natural context, they become a challenge for the artist and designer.

Here are some examples of web pages with a bad noise/information ratio. The noise is largely due to the imprudent use of colour.

Commercial pages:

• http://www.pinesol.com/#/explorer/
• http://www.chestertourist.com/morehotels.htm
• http://www.amazingthings.org/
• http://www.sphere.bc.ca/test/sruniverse.html
• http://www.lowpriceskates.com/
• http://www.blackhillsyouthfootball.com/
• www.jkrowling.com/accessible/en/

Note: The Pinesol-page is quite endearing in its slap-dash attitude to colour and composition, and if you click the Pinesol-lady, you will get a laugh. Otherwise: this kind of use of colour is to be strictly avoided in serious-minded web pages. The problem with J.K. Rowling’s web page is not so much to do with colour as with the whole concept. It’s quite incredible that such a successful has such an awful web page. Looks like a CD-ROM game from the 1980s! And what’s with the barking dog? Talk about noise…

Universities and art & design schools, etc:

• http://art.yale.edu/
• http://www.risd.edu/Home.aspx
• http://www.hunter.cuny.edu/studentservices/
• http://www.ensad.fr/spip.php?article489
• http://www.indiana.edu/~ensiweb/
• www.torchia.com/

– The above site is a prime example of design for designers. Despite the ‘cool’ lack of saturated colours, the noise-ratio enormous – mainly due to the excruciating flash animations and horrible soundscape (fortunately it can be switched off!).

• http://design.org/

– This design-site doesn’t care too much about accessibility. Plenty of clutter and poor text/background contrasts.

• http://nfb.org/nfb/default.asp

– The front page of the US national Federation for the Blind is a bit of a disaster: the text/background colours in some headings are almost illegible (apart from being ugly). The page is actually more accessible to protanopes and deutaronopes (the two most common forms of colour blindness), but was this really intended? And if so, why?

Some Finnish examples:

• http://www.iltalehti.fi/etusivu/

– like most evening papers, it’s all about noise and little information.

• http://www.jokerit.com/

– the red text over an equiluminant blue background is almost illegible. A bombardment of signal colours, but we’ve seen worse.
www.helsinki200.fi/en
– light cyan text over white is a struggle to read for anybody over 50.
wdchelsinki2012.fi/en
– that cyan again! And why litter the page with meaningless scraps and doodles? I better not say anything about ‘world design’ here, but it definitely doesn’t improve accessibility.

• http://www.siba.fi/en/

– The Sibelius Academy have decided to enliven their otherwise reasonably accessible site with gaily coloured margins, like cheap curtains. Doesn’t contribute anything information-wise, nor does it enhance the Academy’s image. You would think they would be very sensitive to noise in the country’s top music academy!

Note: One would have expected design schools and offices to be able to recruit the best web designers on the market. In many cases this doesn’t seem to be the case. Hunter/Cuny/student services (where accessibility should be prioritized over other issues) is a case of poor accessibility due to too much design: the text/background contrast is far too low. The Yale Art School homepage is apparently an joint wiki-effort, so they’ve abandoned design altogether! This may be cool and trendy for the students (for a while), but a disaster as far as accessibility to information is concerned.

Colour coding can be a hindrance in another way, too. About 5–10 percent of the population has anomalies or deficiencies of colour vision that may impair access to information presented in electronic and printed media. There are guidelines available for colour choices that avoid these problems on the Internet and in textbooks, and yet there are plenty of web pages out there where no heed has been paid to them. Then there are the even more common age-related features of visual deterioration, for example lessening contrast discrimination.

What is vision for?

There is an agreement among perceptual scientists and neurobiologists today that colour vision has evolved to help to find and identify efficiently edible and nutritious fruit and from among the visual chaos of a rainforest-like environment. Trichromatic vision evolved primarily to help identify reddish and yellowish objects in a dominantly green environment and to separate the contrasts of object/background from the contrasts of light and shadow. (Bowmaker et al 1997). Equipped with basically the same visual mechanism as millions of years ago, we (in the western world) today live in a visual jungle filled to the brim with “fruit”. This over-abundance of signals has largely lost its information value. In the case of access to information that is a real challenge for designers of electronic and printed media interfaces and contents.

Another fact to remember about vision is that it has not evolved to produce perceptions from abstract two-dimensional images, even less from flat self-luminant displays. Yet this is where most of our symbolic information resides nowadays. We have evolved to make sense of a dynamic, spatial world with moving objects, backgrounds, environments, light and shadow. This does not mean that we should try to reproduce this on displays and interfaces, but we should take this fact into consideration when abstracting knowledge and information for visual access.

Good Design Principles

There are many recommendations for good design, such as the famous ten theses of Dieter Rams, chief of design for Braun during 1961–1995:
Good design

1. is innovative,
2. makes a product useful,
3. is aesthetic,
4. Makes a product understandable,
5. is unobtrusive,
6. is honest,
7. is long-lasting,
8. is thorough down to the last detail,
9. is environmentally friendly,
10. is as little design as possible.

(For the full text of the principles see e.g.: http://en.wikipedia.org/wiki/Dieter_Rams)

Rams makes no reference to colour in the explanations to these principles. Indeed, it is difficult to make detailed guidelines about the use of colour for design in general. Colour is involved in all forms of art and design and the recommendations for one form do not necessarily work for others. This is particularly true when comparing spatial colours to other forms of colour application.

The Internet and electronic media are a case apart, but not so different from other forms of 2D design. General recommendations for good web-design can be found on the portal of the Word Wide Web Consortium:

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/full-checklist

The Finnish translation is available on the portal of Tampere University of Technology:

http://www.w3c.tut.fi/transations/wai/wcag10-checklist/

This a useful site checking whether your creation can be seen or read by colour-blind people:

http://www.vischeck.com .

You can upload your image on the site’s server and the engine there will convert it to how it will be seen by deutaronopes, protanopes and tritanopes. There is also other useful information about seeing and visual impairment on the site. The programs were developed top visual scientists.

Some books on inforgraphics do treat colour, but mostly briefly. Theoretical knowledge is essential for grasping the principles, but no amount of reading will make anybody a good designer. Art and design is a matter of tactical skill and sensitivity, “thinking in situations”, as Josef Albers put it. Therefore even the best instructions and principles can, without diligent practice, lead to poor results. These statistical maps are found on the net are rather informative, but they could be improved. In other words, they are not, in Dieter Rams’s meaning “thorough down to the last detail.”

Here are a few examples of web pages with a good noise/information ratio:

• http://www.newschool.edu/parsons/academics/

– make note of the restrained colour and unobtrusive use of animations

• http://www.swiss.com/web/EN/Pages/index.aspx?Country=US

– Perhaps this is boring, but it’s accessible (and elegant). The sparsely used red really carries a meaning as a signal.

• http://www.hel.fi/hki/Kulke/en/Etusivu

– sparse, yet distinctive and accessible.

• http://www.hus.fi/
• http://www.hsy.fi/en/Pages/Default.aspx
• http://www.celia.fi/english

The page is about equal access to literature and information for print disabled persons. The graphic design is 100% in line with the mission. Note the subtle use of gradients.

• http://www.designkuopio.fi/english/index.html
• http://www.suomenloytotavara.fi/index.php?id=47

The lost property office. It’s all about finding things – and so is the web page. A rare case of print over a photo being totally legible!

• http://ilmatieteenlaitos.fi/

This site of the department of meteorology at the Helsinki University serves a very wide public, so accessibility is No. 1. Graphics for weather forecasts in other media, too, have improved enormously over the past five or six years.

Let’s get back to 2D and 2D. I hypothesize that colours produce less noise in a real spatial context. I will also argue for restraint in the use of colour in the

Internet. In other words:

1. Do not use chromatic colour unless you mean to convey information by it.
2. If you do use chromatic colour, pay attention to its spatial effect, contrasts and levels of saturation.
3. Try to minimize signal colours. Don’t cry wolf all over the place! It will quickly lose its effect and turn into noise.
4. Think of colour always as defining space: avoid sharp spatial jumps caused by strong brightness contrasts; avoid creating ‘holes’.
5. Try to keep info that belongs together on the same visual plane.

Here are a couple of examples where the above ideas have been carried out in practice:

IRD – Information Rich Display

Questions of accessibility and clarity of information are critical safety issues in industrial processes such as oil refineries and nuclear power plants. Alf Ove Braseth, Robin Welch and Øysten Veland have developed a design concept for the interface of control rooms of off-shore oil drilling processes. It is called IRD – Information Rich Display (Braseth et al 2003). The idea is that all the necessary information is displayed on a single screen or set of screens, but in a way that avoids cluttering or chaotic multiple signals. The idea is quite simple: All colours and contrasts are kept to a minimum. There is a strict hierarchy of visual signals. Only significant deviations are coded visually stronger, but even then with great restraint. Colours are largely avoided ¬– they are reserved for the most critical alarm signals. All superfluous lines, contrasts and colours are left out. Hence the overall appearance of the display is a monotonous grey, although it contains far more information than a traditional display. To the untrained user the display makes little sense, but to the trained user it conveys the most critical information without delay.

This design concept might not be applicable everywhere, but the way it has been developed in Finland for other uses is interesting. It has been tested in live action beside traditional control room interfaces. Thus the users have participated in the design by giving feed back from real-life situations instead of the usual safe simulations or dry runs. What is significant and worth considering in the visual concept, though, is the idea of restraining from colours and contrasts unless they can really carry information, until they become “information rich”.

Layering – exploiting the 3D nature of vision in 2D design

Another example that emphasizes the significance of the hierarchy of colours and contrasts is found in D.L. van Laar’s “Psychological and cartographic principles for the production of visual layering effects in computer displays”. (van Laar 2001). Here again the task is to display multiple simultaneous information of an industrial process. Van Laar has turned his attention to modern cartography. He has found that the centuries-old tradition of map-making has addressed very similar problems to the ones encountered in graphic interfaces and designs of monitoring displays.

Maps contain a lot of information that is displayed simultaneously: topography, vegetation, towns and settlements, roads, railways, waterways, etc. Cartographers have developed ways of arranging the information in “layers” of importance: main roads are more salient than side roads; towns are more easily distinguished than other large features; topographic lines, must be visible but without intrusion over the other lines, etc.

The psychological principles that van Laar refers to could also be called perceptual principles. He takes the perceptual parameters of hue, lightness and saturation of colour as starting points for his layering principle. Similarly to Braseth et al, van Laar’s guiding principle is restraint, but added to this is the very interesting concept of coherence of visual layers. The information to be coded must first be carefully analyzed and arranged in categories and order of importance. Van Laar starts from the bottom with very small contrasts, working his way up the hierarchy, increasing the contrast at each layer. Meanwhile each contrast-layer must be equal in at least two ways: lightness and saturation. This way their content is distinguishable and separable as belonging to the same level importance.

Why teach fine art to design students?

What van Laar has presented is nothing more and nothing less than a graphic simplification of universal rules of representation of 3D space by two-dimensional means. There are of course other methods of 3D representation, such as perspective, occlusion, size hierarchy and texture gradients, but they are seldom as useful in arranging types of information in a hierarchical manner.

The principles that van Laar presents are very similar to the methods of representing space in painting, especially landscapes. Also other so-called good design principles resemble those of good pictorial composition in fine art. Artists, like cartographers have developed principles of 2D representation of a 3D world for centuries. The task of the painter is to create hierarchies of significance in a static image. The advantage of web-design is of course that the images don’t have to be static, but as we have seen, this benefit can often turn negative, distracting rather than aiding in finding what one needs.

Designers of graphic information can benefit from studying fine art, particularly painting, because the art of painting is about sensible and economic organisation of moods, emotions and significances through forms and colours. A visual artist must learn to master the universal perceptual principles of representation, common to all human beings, otherwise he/she will not be able communicate with the art work (contrary to common belief, this applies to contemporary art as well). As Semir Zeki says in his book Inner Vision – An Exploration of Art and the Brain: All visual art is expressed through the brain and must therefore obey the laws of the brain (Zeki 1999, p 1) and … Just as the brain searches for constancies and essentials, so does art. (Zeki 1999, p 11). The constancies that Zeki is referring to enable us to make our way through and operate in a three-dimensional and dynamic chaos of potential information. Fine art has always focused on these constancies ¬– the unifying factors of human visual experience.

When colours become information instead of noise, we can derive great pleasure and satisfaction from them. Colour can be a powerful coding device, helping to identify visual targets instantaneously and without recourse to cognition. Colour also separates or joins objects visually, organizes them hierarchically, helps separate objects from each other and from backgrounds, and colour helps in drawing attention to important features. When colour is applied with skill, appropriateness and restraint in design, it can lead not only to better-looking design, but can help to ensure universal access to information.

Sources:

• van Laar, D.L. (2000) Psychological and cartographic principles for the production of visual layering effects in computer displays. Displays 22 (2001) 125–135. Elsevier Science.
• J. K. Bowmaker, D. M. Hunt and J. D. Mollon (1997) Primate visual pigments: their spectral distribution and evolution. In C. Dickinson, I. Murray and D. Carden (Eds) ‘John Dalton’s Colour Vision Legacy’, pp. 37-46, Taylor and Francis, London
• Alf Ove Braseth; Welch, Robin; Veland, Øysten (2003). A Building Block for Information Rich Displays. Paper presented at ifea concerence on “alarmhåndtering” on Gardemoen, 25–26 November 2003.
• Zeki, Semir (2003), Inner Vision – An Exploration of Art and the Brain. Oxford University Press, Oxford.

Posted by Antti