“If consumers can justify elegance to themselves in pragmatic terms, they’d much rather have it than ugliness.” (David Gelernter: The Omni Interviews)

Is it possible to justify artistic website design in pragmatic terms that are convincing enough for web designers from an engineering background? Writers of seminal works on web design tend to come from such a background and appear to have two conceptions of the value of art. It is either for pleasure or for personal expression. For them, neither of these values compares in importance with the criteria of accessibility and usability. A third value – aiding users’ understanding – is highlighted, recommended and exemplified in this post. This ability of art to assist comprehension should prove more palatable to designers and provide them with clearer criteria by which to evaluate their work.

In creating websites for educational purposes in the past, I have been uncertain about how much time and effort should be devoted to their visual appeal and impact. Besides aesthetic appeal, I was aware that visual learners, a high proportion of the population reportedly, have not been well-catered for in education historically, and that prompted me to explore the issue in a little more depth. The questions that I wanted answers to included:

• Is the use of art and visuals superfluous?
• Do art and visuals serve to distract and thereby reduce website usability?
• What is an appropriate balance between form and function in educational web design?
• Are there good reasons for designing visually attractive websites?

By the end of this post, I aim to establish criteria for the inclusion or exclusion of art and visuals in educational websites. The approach that I take is to use the views of noted web design gurus as a springboard for discussion and reflection.

What is art? This is a very old and perplexing question and for the purposes of this post, as Palmer and Dodson point out (1996: 3), “There is no point in trying to arrive at some eternal essence of art.” Tomes have been written on this very subject and it is beyond the scope of this post to do the same. Some visuals are art and some are not. Diagrams and charts, for example, are not normally considered to be works of art. At the other extreme, it is uncontroversial, this author believes, that the images at, e.g., My Pet Skeleton qualify as art. There are some examples which are more contentious. However, for the purposes of this post, the important issue is not so much what art is, but what the value of art is. A more profitable level of discussion is a normative one, the value or lack of value of art and other visuals in Web design. The often hotly debated distinction between art and non-art is not crucial because it is the value of both art and other visuals that is under discussion.

I will concentrate on pictorial art even though not all art is visual, as it is the use of pictorial art that is the subject of concern amongst authorities on Web design in question.

What are visuals? Within ‘visuals’ may be included photographs, drawings, cartoon strips, animation, charts and diagrams, backgrounds. The term is used here to cover all images that are not included under the term ‘art’. The difference between art and visuals is that the latter may not create an emotional response in the user or be a means of self-expression for the designer. Their value lies in their explanatory power and ability to present information in an easily digestible form.

What is visual design? Visual design is more than the appearance of a website. According to (the now defunct) Mouse Visual Design, the term “embraces the appearance and organisation and layout of the graphical elements: focal point, contrast, relationship of one element to another, use of colour and fonts, organisation, point of view, appropriate feedback, logical navigation and appropriate functionality.” This simple website, for example, has been created using a borrowed and slightly customized WordPress theme in an attempt to convey and reinforce the monochrome association that I have with jackdaws, probably resulting from having seen quite a few block prints of these birds. Hopefully, the jackdaw metaphor – stealing shiny objects for a nest – is made more obvious.

For Web designers there are numerous sources of advice. These consist of lists of assertions about best practice together with rationales.

Firstly, I read and summarised the views of prominent sources of advice (or gurus) on the aesthetics of computing and Web design. The following authorities were selected: Jakob Nielsen, Vincent Flanders, and David Gelernter. Also included are guidelines that informed the quango British Educational Communications and Technology Agency (BECTA)/Guardian Educational Web Site Awards. My interpretation of the theories of art and design behind these guidelines will be given in the following section.

Nielsen states (1999: 11) that “There are essentially two basic approaches to design: the artistic ideal of expressing yourself and the engineering ideal of solving a problem for a customer.” Nielsen declares his allegiance to the engineering approach. He does not prescribe totally excluding art, he does not try to negate the affective value of art, but sees it as just one of many factors to be taken into account by the designer. It is not the most important factor. Incidentally, the section of his book from which this quote is drawn is entitled Art vs. Engineering, suggesting an attitude that the two are antithetical. The attitude that self-expression is outweighed by fitness for purpose is reinforced by advice offered on his web site, useit.com. Websites must tone down their individual appearance and distinct design in all ways:

• visual design
• terminology and labeling
• interaction design and workflow
• information architecture

He also says, regards content, that “There will always be a need to determine the best approach to describing each unit of information.” Nielsen accepts that there is more than one way to present information. (One wonders if the best way might be visual on occasion.)

A recurring theme of Nielsen’s work is the need for simplicity:

If you do think you have too little complexity in your life, you will relish the challenge of a website with a mystery interface that makes you work hard to get any results. But most users would rather have simplicity. (1999:380)

Art is suspect in Nielsen’s view because it is ‘surplus to requirements’. Art can be an unnecessary complication that distracts the user from achieving their purposes on the web site; visual design that detracts from functionality should be avoided. Another disadvantage of art and visuals is that they increase download times.

In a discussion with Jakob Nielsen and Vincent Flanders in CIO Magazine, Nielsen says that a website looking good contributes to subjective satisfaction, and this is one criterion of usability. If there is no pleasure at all in visiting the site, then this will put users off. So, a website needs to be attractive to a certain minimum standard, but no more than that. A website that feels good is one which allows you to achieve your purposes with ease. Achieving purpose, I believe, is Nielsen’s paramount concern.

Flanders is mostly, but not totally, in agreement with Nielsen. He identifies an exception to Nielsen’s recommendations for simplicity and usability. The exception is websites dedicated to personal expression. He makes this serious point in characteristic style:

Imagine Van Gogh as a web designer being told, “Yo, Vinnie — your work has to fit inside 640 x 480 pixels and you can only use 216 colors.” I suspect it would be a piece of your ear that would be missing. (Fixing Your Web Site – defunct website)

In his joint interview with Nielsen in CIO Magazine, Flanders is more explicit. He says that “…certain sites [such as music group sites] are expected to be hip”. Being different is central to their purpose, and this applies as much to the way musicians design their websites as to the way they write music or dress. For example, TheBeatles.com. Visitors to this site, aficionados of The Beatles, will be prepared to put up with confusing navigation. Indeed, this is part of the attraction.

However, most websites will be for commercial, practical purposes. On Web Pages That Suck, Flanders gets to the point. “Web design is not about art, it’s about making money.” Websites are mostly designed to satisfy some economic need, desire or demand. This may not be the case with educational websites.

Gelernter’s discussion of design principles relates to computing in general rather than Web design specifically. In fact, he has no confidence in the Web and sees it as ‘prehistoric’. However, his ideas on design are nonetheless worthy of consideration in that they apparently contrast with those of Nielsen and Flanders. Gelernter proposes a central role for aesthetics and ‘beauty’ in computer design.  But what exactly does he mean by ‘beauty’?

“The beauty of a proof or machine lies in a happy marriage of simplicity and power – power meaning the ability to accomplish a wide range of tasks, get a lot done.” (1998: 2)

This is not a common definition of ‘beauty’. Beauty is commonly thought of as having a non-utilitarian nature. Actually, it can be seen that he is stressing accessibility and usability. The concept of beauty that he proposes is similar to Nielsen’s description of a site with a good feel.

Gelernter adds, intriguingly, that simplicity and power are necessary but possibly not sufficient conditions for beauty to exist. “Bringing power and simplicity to bear doesn’t guarantee machine beauty – just makes it possible, and nothing else does.” (1998: 2) Some other ingredient is hinted at by Gelernter, but he has no words to describe it.

Gelernter, I believe, does not see art and engineering as being in direct opposition, but that a balance is achievable that incorporates aspects of both. He proposes, in his 1998 book, designs for computer furniture and desktops that are efficient, minimalist, and with clean lines (in the case of the furniture).

There is a marked difference between the above guides’ attitudes towards design and those apparent in the guidelines supplied by (the now defunct) BECTA. Here are some excerpts relevant to this discussion:

• The standard of websites is rising all the time and people expect more in terms of look and feel.
• Does the design of the site, pages, graphics, sound, video, etc. assist user comprehension?
• If the design calls for special features – animation, for example – try to ensure that the technology works in the background and does not draw attention to itself.
• Use sound and video only when they aid understanding.

BECTA’s definitions of look and feel are not provided, so it is difficult to make a comparison with Nielsen’s definitions. If, as is claimed, users’ expectations are rising, then more resources and effort will be required for visual design in future. This source of guidelines is specific to educational websites and the emphasis on understanding makes sense in the light of this. BECTA’s guidelines hint at a different theory of the value of pictorial art and other visuals, one which will be clarified and explored below.

The next stage of this post is to clarify and evaluate the implicit philosophies of the value of art of the above advisors.

None of the above guides make explicit their theories of the value (or lack of value) of art, so there is the possibility of misinterpretation. Yet I still consider this a valuable exercise because I believe that there is a need to think about this subject in a theoretically self-conscious way.

Nielsen, as evidenced by the quote above (1999: 11), conceives of art as a vehicle for human expression. The web designers’ personal satisfaction in having expressed themselves is not as high a priority in his estimation as websites meeting users’ needs. This is a reasonable conclusion as long as one accepts that art’s only value is its ability to act as a vehicle of self-expression. The latter is important but not as important as the website fulfilling its function.

In addition, Nielsen may also be in the camp of those who believe that art has value because it can inspire positive emotions. “While I acknowledge that there is a need for art, fun and a general good time on the Web, I believe that the main goal of most Web projects should be to make it easy for customers to perform useful tasks.” (1999: 11) Art’s value in creating pleasure exists, but again it is not as crucial as getting things done. If pleasure is the only value of art, Nielsen’s conclusion seems reasonable for the vast majority of websites.

Flanders is less inclined to inhibit self-expression than Nielsen, but only in the special case of ‘artistic’ sites. He also appears sympathetic to the valuing of art for its ability to create pleasure for the creator or viewer.

To summarise, Nielsen and Flanders implicitly subscribe to the two most common and obvious theories of the value of art. These are identified by Graham (1997) as:

Art is valuable because it is a source of amusement, pleasure or an opportunity to play.

Art is valuable as it provides us with a chance to express our emotions and exercise our imaginations.

The above two theories are affective, they relate to subjective satisfaction, either of the user or the designer. However, there is another theory of the value of art which is more pragmatic and directly related to the website being fit for purpose:

Stated briefly, aesthetic cognitivism is “The thesis that serious art presents us with a means by which human understanding may be advanced…” (Graham 1997: 48)

Wittgenstein, in the translated and edited Culture and Value (1980), makes a similar point. “People nowadays think that scientists exist to instruct them, poets musicians etc. to give pleasure. The idea that these have something to teach them – that does not occur to them.”

Showing this latter claim to be correct would increase the importance of art in most people’s estimation because knowledge and understanding are generally given a greater status than entertainment, or even the expression of emotion. This greater status explains in part the high standing in which science [and engineering] is normally held… (Graham 1997: 45)

Relating this to website design, if the inclusion of art promotes understanding, then this may justify the time and effort needed to make art a feature of said website. Artistic design may lead not to confusion but to greater understanding. Amongst the authorities on Web design that have been considered here, only BECTA took into account the implications of aesthetic cognitivism. Unfortunately though, BECTA ceased to exist in 2011, a victim of government funding cuts.

In favour of aesthetic cognitivism is the observation that people commonly discuss art as if it carries messages; they wonder aloud or to themselves what a picture could mean.

There are also criticisms of aesthetic cognitivism, and these are related to Graham’s version of the theory as applying to masterpieces: he sees the facilitation of understanding and advancement of knowledge as a defining characteristic of masterpieces. Graham’s theory is grand. It makes the claim that art pushes back the frontier of human knowledge. To circumvent this criticism, I propose another, more humble version i.e. that advancing understanding is an additional quality of art, one that is not accounted for in the guidelines of these gurus, that can combine with pleasure and expression to make a more persuasive argument for the inclusion of art in websites wherever it is an effective and efficient means to convey meaning or raise awareness. The author argues that a recognition of art as a means to assist comprehension is very important and should be a guideline for Web design.

Graham does not clearly distinguish between enhancing understanding and advancing knowledge. He is talking about art as a means to extend the totality of human knowledge. The author here only claims that both art and other visuals can help individual humans to understand existing knowledge.

Gelernter’s ideas about beautiful design appear to me to be in accordance with those of the 20^th Century Modernist movement. In fact, some of the examples of good design that Gelernter mentions are from the 1930s.

The Bauhaus style, later known as the International Style, was marked by the absence of ornament and ostentatious facades and the harmony between function and the artistic and technical means employed. Bauhaus was established by Walter Gropius in Germany just after WW1. The motto of the Bauhaus movement from 1923 was ‘art and technology – a new unity’. Bauhaus attempted to break down the traditional distinction between art and crafts, and to achieve a purposeful integration of both engineering and aesthetic standards.

Gelernter’s ideas for computer furniture design, for example, and for a new interface, show that he values form that is functional, elegant and simple. Gelernter is attracted to purity (and Nielsen even more so). These are values, and they are not universally shared. A criticism, that Modernism is not exhaustive, was levelled by Postmodernists. Woodham reports that (1997: 183) “…questions were raised whether …the modernist aesthetic could cater adequately for the increasingly variegated tastes and desires of the consumer.” Some users prefer greater decoration, even on commercial sites, and greater decoration and individuality will be a part of the image of some products. For example, the Hong Kong website for the Mini (MINIhk.com) is highly dynamic whereas the Volkswagen Hong Kong site seems to me to be a reflection of the company’s car design philosophy; straightforward, unfussy, functional and reliable.

Gelernter says “beauty of a proof”. A proof in mathematics is admired for its simplicity and brevity. Scientists, mathematicians and philosophers are guided in choosing between rival theories, proofs or propositions by Occam’s Razor. Occam’s razor is a logical principle attributed to the mediaeval philosopher William of Occam. The principle states that one should not make more assumptions than the minimum needed. This principle is often called the principle of parsimony. It underlies all scientific modelling and theory building. It admonishes us to choose from a set of otherwise equivalent models of a given phenomenon the simplest one. (Occam’s Razor)

However, how close is this analogy between proofs and websites? Cognitive modelling is probably the equivalent of applying the Razor, but it is used in combination with user testing because “…no mechanistic interpretation of cognitive processes is comprehensive.” (Cognitive Modeling and Human Computer Interaction) The design that is most successful at the cognitive modelling stage of development may fail to impress users.

I propose several ways:

1) Art can help us understand art itself

For those websites devoted to art education, the exclusion of art would be a severe limitation. Eyes on Art is an example of a task-based art education site that it is difficult to imagine working as well with text only. There is the possibility of the benefit that exposure to and discussion of art may lead students to a better understanding of human nature, as Harrison (1997) concludes.

2) Visuals can reinforce the explanation of concepts

Haight, M (1999: 3) “A valid argument’s form is like a reliable sausage machine: if you put good meat in, you get a good sausage out; if you feed truth in, you get truth out.” Her sausage machine depiction of the process of argument is a good example of using a visual to reinforce a concept. This pictorial metaphor of a sausage machine is used several times to convey concepts and illustrate valid, invalid, sound and unsound argument forms. On a website, her sausage machine could be animated for greater effect.

3) Producing art is a valid response to art, to demonstrate understanding of a work of art

Avril (2002) found positive results in doing this with students. “Students made their own computer graphics both to discover and to describe literary structures of their choice.” The process of producing these graphics encouraged “genuinely original literary perceptions”. An example of this can be seen at At Exeter University TTI course: Cover 7; the student Alison Pringle has demonstrated her insight into the LeGuin novel through production of a title page. Avril concedes that, although the method appeared to work well, it is not understood why; further research by educational psychologists is required. In the meantime, however, the method can still be used. Importantly, “The module’s innovative methods are eminently transferable to other disciplines.”

4) Art and visuals help users comprehend the philosophies of companies and other organizations

No commercial website would be complete without artwork. Even on the simplest corporate sites e.g. Google, careful attention is paid to the logo, the choice of font and the background. This is sometimes referred to as identity or logo design. There is a point being made, a philosophy behind the design, and the logo is to help the consumer understand the message that the company wants delivered. For example, is the company modern and trendy, eco-friendly, or steeped in tradition and trustworthy? Woodham (1997: 143) attributes to Henrion the idea that the fashioning of corporate personality is crucial in a situation where it and its competitor’s products are very similar. The Care2 website has a good example of a logo. Green is used and a frog with the associations of nature and environment.

By contrast, Nielsen’s site, useit.com, lacks a logo that is truly distinctive. useit.com is in Arial. The word ‘use’ is red and the rest is black. It is not instantly recognisable, and it is not easy to protect in that it is reproducible on any computer. The author imagines that for these reasons it might have been difficult to register it as a trademark. Compare this with the logo for Google. Google is well-known for having a simple interface yet considerable effort has been put into the creation of its logo. Flanders used an image (of a spanner) as part of a meaningful logo on his old website called Fixing Your Web Site.

5) Art and visuals can, on occasion, be more efficient and effective than text at conveying ideas

In Kress and van Leeuwen (1996: 2) the view is put forward that “…some things can be ‘said’ only visually, others only verbally.” This is a strong claim, very difficult to substantiate, and one which is debated in Harrison (1997). Going back to Gelernter, he is unable to describe in words the ingredient that guarantees machine beauty. There may be truth in the above claim by Kress and van Leeuwen, and the evidence for it is simply that language is a clumsy tool with which to describe what visuals ‘say’. Weaker claims, that some things may be said more or equally as effectively via visuals, or are effectively reinforced via visuals, are preferred by the author because they are less controversial. The example is given in Kress (1996: 31) of how some science text books are changing in design, with visuals taking over from text as the primary means of explanation.

Visuals can be a particularly efficient way to portray complex concepts; as the old saying goes, “a picture is worth a thousand words”. On Flanders’ Web Pages that Suck he uses the term Mystery Meat Navigation, and then includes a paragraph to explain the expression. I would argue that his mouseover image of a road sign does a better job of getting across the concept of the result of poor design of navigation buttons. The language that he uses is opaque, not plain as Nielsen recommends. Flanders is willing to use language and visuals creatively in order to get his message across. The explanatory power of visuals should, however, be balanced carefully with Nielsen’s “An image takes two thousand words worth of download time.” (1999: 135) Yet this need not be the case when lossy files
are utilised and becomes less of an issue over time with the advent of shortened download times.

• Users with a tendency towards a visual learning style can benefit from the inclusion of art and other visuals.
• Visual literacy is a big issue in schools. Kress (1996: 32,33) “If schools are to equip students adequately for the new semiotic order…” “This will have to involve modern computer technology, central as it is to the new semiotic landscape.” The use of icons and other forms of visual shorthand is widespread.

Is it now possible, after this discussion, to establish criteria for the inclusion of art and visuals in website design?

Web designers will have to decide whether the inclusion or exclusion of art or visuals affects the website’s success significantly in any or all of these ways:

• users do or do not like the look of it
• users do or do not understand the message or content as well as they might.

In addition, copyright issues must be taken into consideration. Who do the images belong to? Is permission needed to use them?

A final question to pose is whether Web designers’ personal expression interferes with accessibility or usability. If it is only personal expression that is being satisfied by including art, and it does make the site more difficult to use, then another design is required.

These decisions can be informed by feedback from user testing.

Do any (educational) web designers out there agree with my criteria?

Do you know of any websites that include art and visuals in ways that promote comprehension? If so, please tell me about them. Thanks!

References

A Discussion with Jakob Nielsen and Vincent Flanders In this section … – CIO Magazine Dec 1. URL: http://www.cio.com/article/30756/How_Should_Websites_Look_Jakob_Nielsen_and_Vincent_Flanders_Speak_Up

Avril, H. (2002) Computer graphics and the literary construct: a learning method. British Journal of Educational Technology, Vol. 33, No. 1, 7-15.

Becta/The Guardian Educational Web Site Awards: Effective Web Design. URL:  http://webarchive.nationalarchives.gov.uk/20110130111510/http:/www.becta.org.uk

Care2 Environment Supersite. URL: http://www.care2.com/

Cognitive Modeling and Human Computer Interaction. URL: http://www.cs.uoregon.edu/research/cm-hci/

Eileen Gunn: Imaginary Friends :: The Omni Interviews :: David Gelernter. URL: http://www.sff.net/people/Gunn/gelernter.htm/

Exeter University TTI course: Cover 7. URL: http://www.blackwellpublishing.com/bjethybridarticles/welcome.html

Eyes on Art. URL: http://www.tommarch.com/webquests/art2/guide/guide.html

Fixing Your(tm) Web Site – Solving Design and usability problems. URL: http://www.fixingyourwebsite.com/nielsen_dogshows.html/

Gelernter, D. (1998) The Aesthetics of Computing. Phoenix.

Google. URL: http://www.google.com/

Graham, G. (1997) Philosophy of the Arts: An Introduction to Aesthetics. Routledge.

Haight, M (1999)The Snake and the Fox. Routledge.

Harrison, A. (1997) Philosophy and the Arts – Seeing and Believing. Thoemmes Press.

Kress, G. and van Leeuwen, T. (1996) Reading Images – The Grammar of Visual Design. Routledge.

MINIhk.com URL: http://www.minihk.com/

My Pet Skeleton. URL: www.mypetskeleton.com/

Mouse Visual Design. URL: http://www.mousewks.com/visual/definition.htm/

Nielsen, J. (1999) Designing Web Usability – The Practice of Simplicity. New Riders Publishing.

Occam’s Razor. URL: http://pespmc1.vub.ac.be/OCCAMRAZ.html/

Palmer, J. and Dodson, M. (eds) (1996) Design and Aesthetics – a Reader. Routledge.

THE BEATLES.COM. URL: http://www.thebeatles.com/top.html/

useit.com. URL: http://www.useit.com/alertbox/20000723.html/

Volkswagen UK. URL: http://www.vw.co.uk/

Web Pages That Suck. URL: http://www.webpagesthatsuck.com/

Wittgenstein, L. (1980) Culture and Value. Blackwell.

Woodham, J.M. (1997) Twentieth-Century Design. Oxford University Press.