Jacques Hugo
November 1996 (revised July 2000)
Visual Communication and Visual Literacy
Communication and the Interface Designer
Modes of visual representation
Taxonomy of computer visual symbol systems
From archaeological records we know that prehistoric man was born with the ability to communicate with his fellow cavemen through signs and symbols. However, as man evolved, the form, function and meaning of visual communication changed drastically. At the same time, the understanding of the importance of visual communication has also seriously deteriorated.
Visual communication is the product of a complex human intelligence that is very poorly understood. Scientists generally accept the principle that a human being is dependent on vision for most of his information. It is thus a paradox that they know so little about visual communication. In a society that is overwhelmed by technology and the mass of complex visual messages that it generates daily, it is so much more important to understand the nature and characteristics of visual communication.
Visual communication has the ability, through symbolism, to enable a person to interpret meanings hidden deep in visual images (paintings, photographs, film or television). Only visual media have the ability to give form to abstract ideas.
Vision and visual communication are more than just one-way processes where one absorbs messages like a sponge. Visual communication is a dialogical process where the way a person perceives his environment is influenced by his knowledge and experience. Vision is really the source of human language and may thus be said to be more important than verbal language - in fact, images were first made to conjure up the appearance of something that was absent (like rock paintings of animals)!
As man developed into a more complex being, his communication activities also became more complex. With it, the mechanisms, signs, symbols and language that he used in the process also became more complex. Particularly since the invention of the camera, the way that man expresses himself through visual images, has undergone a dramatic change. One would have expected the ability to capture accurate images of our world to give rise to attempts to create a "universal visual language". Not so! In a strangely anachronistic way, it has contributed to the development of non-realistic and non-figurative ways to express ideas and communicate them to other people. Photographs and video are of course important media for conveying accurate information about people, objects or events. However, icons, symbols and diagrams, the rock paintings of the technological age, are equally powerful means to convey symbolic and quantitative information!
Regardless of the level of realism in the visual codes used, the key to successful visual communication is inevitably the receiver's familiarity with the signs and symbols that the communicator is using.
As a result of the infinite variety of visual signs, it inevitably happens that the difference between the communicator's and the receiver's visual knowledge may cause the whole or part of the message to be unintelligible. In order to ensure that communicating by means of images is as affective as possible, the communicator first has to ensure that his receiver is familiar with the visual codes used.
If the receiver is not visually literate, he or she has to receive some form of orientation or training. Furthermore, the more complex and technologically advanced the medium is, the more complex the visual codes are likely to be and the more attention must be paid to ensuring a common knowledge of visual codes and conventions.
Probably the most important motivation for the improvement of visual literacy, is that it should promote understanding and offer a means to share information among people in such a way that the probability is increased of everybody getting the same meaning from messages.
To achieve this goal, a person should use more than just his or her natural, inborn or intuitive visual talents. It requires exposure to, and knowledge of the elements of visual communication of a particular medium, as well as the structuring and functioning of these elements in effective communication.
Only persons who have achieved a reasonable level of visual literacy, can rise above the mediocrity and artificiality of popular media messages. Only then can they take their own decisions about what is applicable, effective and aesthetically pleasing in images. Given the necessary resources and skills, a visually literate person can produce visual messages that will contribute significantly to effectiveness and understanding. Visual literacy is thus an absolute prerequisite for the fine artist, media communicator, interface designer and instructional designer.
Because communication is a cyclical process, visual literacy applies to both communicator and receiver. For example, in the case of computer applications, the interface designer is the communicator and the user is the receiver. But when the user responds to the system, he sends feedback messages (consciously or unconsciously) to the designer - the roles are then reversed. It is therefore important to define visual literacy from both perspectives:
From the designer's perspective:
Visual literacy is the designer's ability to intentionally communicate information to a specified audience by means of a particular medium. The designer must understand:
Only then can the designer ensure that the intended message is accurately received and interpreted.
From the user's perspective:
Visual literacy is the level of a user's perceptual, cognitive and discriminatory skills and his/her knowledge of the codes and conventions of visual communication of the particular medium that will increase the probability that he/she will receive and interpret the intended message accurately.
Computers have come a long way since the ENIAC of 1946. Dramatic improvements in technological capability have been accompanied by an equally dramatic change in the way humans interact with computers. We have seen this interaction progress from manipulating switches of primitive machines, to controlling objects on a screen with a pointing device, to donning headgear and bodysuits in virtual reality applications.
In spite of such impressive improvements, the design of interfaces and the modes of interaction have not actually progressed as much as is generally assumed. The main reason for this is probably because the development of software applications is still directly linked to the development of information technology.
It is therefore not surprising that the most dramatic developments in software may be found over the past six to eight years as a direct result of the development of powerful desktop, laptop and hand-held computers and their impact on the creation, capture, storage, processing, reproduction and distribution of information. But it was through the combined influence and the convergence of the technologies of television, radio, video and data processing during the past two decades, that communication science has started to play a significant role in the design of applications that used the computer as a visual communication medium.
In modern interactive multimedia applications like games, computer-based training, interactive encyclopaedias and so on, designers pay a lot of attention to communicating a message effectively to a user. Clearly those designers consciously or unconsciously do the right thing - they design for communication. Ironically, the same does not happen with mainstream business applications. Commercial applications like in-house financial, insurance, personnel or logistic systems are generally not approached from a communication point of view. Here designers are more concerned with process validity and data integrity than with presentation of information or usability. Very little attention is given to the nature of the dialog (that is, communication) between the system and the user. Naturally all designers would find ways to justify their designs (or even worse, the lack of usability!), but it clearly points to a need for a formal link between the disciplines of visual communication and software design.
The primary concern of Human Factors practitioners is with the nature of the interaction between human and machine, which implies that they follow the principles of good communication. However, only very rarely do practitioners refer to, or acknowledge the role of visual literacy in software ergonomics. Against this background, an increasing number of people (with or without a formal qualification in Human Factors) are found in jobs where they have to develop applications to improve the task performance of users. When designers do not recognise the complex nature of the relationship between human and machine, sooner or later, users will either reject unusable software that does not make their jobs more enjoyable or makes it more complex, or they will perform worse and worse without even realising why.
Clearly designers need a methodology that takes into consideration the dialogical nature of computer applications. Such a methodology would consist of a systematic analysis of users, their tasks and skills, performance criteria, information structures, coding of software, implementation and maintenance. However, the sad truth is that the majority of software currently being developed by software designers is ineffective and often discarded even before it can be implemented. There is ample proof that successful software usually "works" for two reasons:
because of the serendipitous good luck of an intuitive designer, or
because the design team had employed a formal methodology where a large number of human factors and criteria are considered.
Some software development companies are currently using very sophisticated methodologies and there are a growing number of very exciting and effective applications of software. Yet, in spite of this, the principles of visual communication are receiving no more than a cursory recognition (as in a number of "screen design guidelines").
The obvious commonalities between communication and software engineering are reason enough to suggest that there should be ways to systematise visual communication knowledge so that it can be made available and useful to the interface designer.
One area where a significant contribution can be made by communication science, is in the structuring of visual messages and the human-computer dialog. At present, very few software development companies employ dedicated interface designers. Usually it is the more experienced programmer on the team who designs user interfaces. This person normally has a background in computer science and will naturally approach the design task from a process or technical point of view. Clearly this approach will produce applications that are valid from that point of view, but are bound to be less visually appealing, more difficult to use and prone to user error.
The disciplines of human factors, ergonomics and cognitive psychology have a lot to say about the way that visual messages and user dialog should be constructed and a large number of rules and principles pertaining to visual communication are implicit in these disciplines. Companies that follow a user-centred approach to software development employ usability engineers, interface designers and graphic designers with training in human factors. But even such experienced practitioners could benefit from learning more about the communication process.
When the computer is used interactively, a very complex communication and learning process is set in motion. Because interface design represents the convergence of several disciplines, of which information technology is just one aspect, it is totally unlike any other communication medium. It is a medium that requires special skills for development of messages, whether the nature of that message is instruction, business process or enterntainment. Also from the user's point of view, different perceptual skills are required to reap the full benefit of the medium.
However, since the traditional software designer has a very limited background in communication, the aspects that make the computer unique, both from a task performance and communicative viewpoint (that is, interactivity and adaptability) are not being developed. For this reason the human-computer interaction is not always as effective as it should be.
It follows then that the main source of user interaction problems can be found in poorly designed visual interfaces, which in turn can be related to inadequate visual literacy on the designer's part and also his failure to take into account the visual literacy of his target, the user. At present system designers mostly rely on inspiration or intuition. It appears that screen design, system design and problem-solving decisions are not based on visual factors, conceptual frameworks or techniques of visual communication. As a result, most of today's interfaces desperately lack the conceptual and visual clarity as well as communicative sophistication necessary to create effective visual interfaces.
We can now summarise the problem in one statement:
if the software designer is not visually literate and fails to take the user's visual literacy into account, the user interface will be ineffective and will lead to poor user performance.
As we have seen, visual communication is a universal phenomenon and is still our primary source of information. Much time and energy are spent in traditional education on literacy. Being literate in this case usually means understanding the nature of the printed message and being able to use the same codes (the alphabet and associated symbols and sounds) to read, write and speak.
However, we know that our knowledge of ourselves and the world is gained first from non-alphabetic visual information around us and not only from printed and verbal communication. The first thing that a baby learns when it opens its eyes is the shape of its mother's face. We are so used to "reading" the environment, that we do not consciously think of it as communication. But there is a mass of information in everything we see round us - recognising a person from a bad photograph in the paper, the type of tree from the shape of a leaf, the function of a computer program from an icon on a screen, or the name of a company from its logo.
It is obvious that a better understanding and mastery of the codes of non-alphabetic visual communication will empower us to communicate more effectively using visual media like television, film or computers. This requires a thorough understanding of the nature of these visual media and their codes and conventions. Visual communication is potentially very complex, but it is only complex because it does not generally form part of the traditional educational curriculum.
The following section provides an overview of the principles of visual literacy and how these principles apply to interface design.
The analysis of visual literacy is based on three possible attributes or levels of stimuli:
- the object as it is perceived visually, that is, the objective reality;
- the abstract attributes of an object, idea or event;
- the symbolic attributes of an object;
A person's visual literacy is consequently determined by his or her knowledge and understanding of these three levels:
Six factors contribute to the perception of an image as realistic:
- Recognisable scale
- Recognisable forms, especially in terms of their brightness and clarity
- Recognisable detail
- Colours depicted as in the real world
- Recognisable movement depicted, either real or suggested (that is, real-time movement, stop-frame movement or animation)
- Perspective depicted as perceived in reality.
Remember that this list might be valid only from a Western perspective. This is why it is important to keep the audience's frame of reference and "visual language" in mind when designing a visual message, regardless of the particular medium employed.
Abstraction in visual communication manifests in the simplification or contraction of an idea into a visual representation that has little or no relationship with the objective reality. The more realistic the image, the less uncertainty there is about its meaning. Conversely, the more abstract an image, the more generic its meaning becomes. Any marginal alteration of the original, realistic image, will stylise it, such as the reduction of a picture to a basic outline. A good example of abstraction is found in Stanley Kubrick's "2001: A space odyssey" where the trip through "hyperspace" which could only be experienced subjectively by the astronaut, is represented by psychedelic patterns on the screen.
Although the latest computer technology is sophisticated enough to allow a very high degree of visual realism, the majority of applications are characterised by a high degree of abstraction. This is partly a historical fact because of earlier limitations of the technology. But it is also due to the fact that, as a communication medium, the computer is normally used to capture, process and distribute quantitative data. Thus it is logical that information and concepts will more often be represented in abstract images.
The development of photography has also played an important part in the development of non-figurative and non-realistic styles in art. This was the beginning of a process of abstraction where, as seen in the previous paragraph, superfluous information in images is omitted and only outstanding characteristics are emphasised. When abstraction is taken to extremes, the image or a part of it acquires symbolic meaning. Unlike icons and realistic images, with symbols there is no relationship between the appearance of a symbol and its meaning, that is, reality is no longer recognisable. A symbol now acts as a substitute for the object, event or idea symbolised. The important fact is that accurate interpretation of symbols relies on the receiver's knowledge of the sign conventions that apply in a particular community or culture. This implies that, in order to be effective, a symbol must be recognised by the majority of the community and must also be reproducible by them.
All images are constructed from the combination of a number of basic elements. In order of possible transformation or level of complexity, these elements are:
|
|
|
Figure 1: Point, Line |
|
|
|
|
Figure 2: Line with attributes - direction, form, weight, orientation |
Figure 3: Combined lines |
|
|
|
Figure 4: Geometric forms and shapes |
Figure 5: Shapes with representational value |
|
|
|
Figure 6: Forms with varying degrees of realism or abstraction that influence meaning. |
Figure 7:Texture, shadow and light, colour and patterns; Addition of explicit, syntactical information - perspective, background and foreground, contrast and relative size |
|
|
|
Figure 8: General visual organisation - the way the eye is led to "read" an image - composition, graphical balance, dynamic vectors. |
|
The fact that so many elements or dimensions are involved in images, indicates also the various simultaneous perceptual processes involved in the interpretation of visual messages. Visual perception is really a multidimensional process that is characterised by "parallel processing", to take a term from information technology. This means that various physiological and cognitive processes involved in observation, recognition and signification are executed simultaneously.
When the meaning of visual messages has to be interpreted, three different classes of signs can be distinguished:
 |
The ICON is a sign that shares some of the features of its referent (as in the drawing of a house). This means that there is a one-to-one relationship between the subject and that which it represents, or, in semiotic terminology, between the signifier and the signified. |
 |
The SYMBOL is a rough equivalent of metaphorical or figurative language where the signifier represents a far greater range of meaning than an iconic reading would suggest. |
 |
The INDEX can be regarded as the visual equivalent of metonymy or synecdoche in linguistics. INDEX literally means "stands for ..." and as such it is not a relationship of likeness, but of cause and effect. For example, in a motion picture, a drunken stagger is indexical of inebriation, or a dishevelled appearance is indexical of untidiness. In diagrams in computer applications, arrows or lines are usually indexical of a relationship of some kind between different objects or entities. |
In film or television, all coding must be appropriate to the physical properties of the communication channel. The communication partners (that is, communicator and receiver, or "designer" and "user") must share a knowledge of the codes being used. Iconic codes such as international traffic signs, are widely understood because people of various cultures share an experience of the depicted referents.
The more specialised a visual code becomes, the less iconic it is and the less likely it is to be shared by a large group of people. Signs in this category are also called conventional signs and deal with the representation of concepts where everything depends on convention or agreement, such as the signs used in electronics, or some of the icons that are now familiar on roads and in airports and tourist spots around the world.
Examples of efforts to standardise signs so that visual messages may be standardised, are found in the "standard" icon sets in the interface guidelines of Microsoft, Apple and others. There was also the pictorial or symbolic language developed by Charles Bliss. This language, called "Blissymbolics", consists of many icons and composite symbols that represent words or ideas and is similar to oriental picto-ideographic writing. Blissymbolics has been computerised and is now used mainly for communication by and with people with communication handicaps.
In addition to the different levels of realism and abstraction, it is also possible to identify three different levels of meaning. These levels are determined by the meaning content that may be found at each level on a continuum from objective reality to subjective symbolism. These levels determine to a large extent how the entire message is structured and also how it is perceived by the viewer:
At this level the computer screen is observed and identified as a piece of computer hardware with illuminated patterns on its rectangular display surface - it is observed as something similar to a television screen.
At the next lower level the observer identifies the figurative elements on the screen in terms of light points, lines, shapes, foreground, background or pictures. The observer may recognise certain discrete shapes as graphs, text forms, abstract forms, icons or indexes (like arrows) or even more realistic shapes such as human forms. At this level the shapes themselves fix the observer's attention on their meaning. Now the meaning of the images depicted on the screen can be interpreted in terms of:
Denotative meaning
The logical, cognitive or denotative content of the image, for example a graph depicting sales over a certain period.
Connotative meaning
The connotative or associative meaning is found in explicit or implicit links established by the structuring of visual or cognitive elements. For example, the juxtaposition of graphical elements on the screen is often enough to let the user form an association between the elements. However, in software associations formed in this way are normally reinforced by other, more explicit devices such as labelling or the use of graphical indexes such as arrows or lines. It is interpreted by virtue of the verbal language that is associated with elements, for example the concepts "increase" or "decrease" may be derived from the direction of the graph.
Stylistic meaning
Stylistic meaning may be contained in the image in the form or style of the presentation. For example, a sales graph may be drawn as a three-dimensional bar graph with neat headings, titles and a specific colour palette. This presentation would be recognisable as the style used by a particular salesman or company and distinguish it from similar information presented in a different, equally recognisable style used by someone else.
Affective meaning
Affective meaning, that is, feelings or attitudes, can be communicated or implied by affective language usage or facial expressions of depicted individuals.
An analysis of the images found in the different categories of computer applications reveals that all possible visual elements may be structured in terms of the following taxonomy (Figure 9).
Figure 9: Taxonomy of visual elements
This diagram indicates that the visual image may be built up from a large number of text or graphical elements. Each of these elements can be analysed in terms of its attributes (e.g. shape, size, position, colour, movement, etc.).
The attributes of discrete objects on the screen will determine the final structure of the total image, the way it is perceived and the meaning that it conveys. The diagram also reveals that the considerable amount of text (alphanumeric messages) is one of the most important features that distinguish the computer from the other electronic media.
Based on Zettl's (1973) structural principles of area orientation and screen forces in visual communication, it is now possible to determine how these principles relate to screen images.
It is important to note that, since television is not a true interactive medium (not even modern versions of "interactive television" which at best will be videoconferencing systems), no distinction is made between certain areas of the screen, nor are any areas favoured over others for the display of information (except for the bottom portion that is often used for subtitles). The image is generally treated as a whole, with the normal attention paid to composition, vectors, dynamic balance, etc. The computer screen, on the other hand, must be treated differently because discrete bits of information are communicated and perceived at any point in time, instead of a complete image as in television. This emphasises the fact that, unlike television, the computer is essentially a window onto a two-dimensional world, with only a few three-dimensional elements.
It is interesting that "serious" business applications still use very little multimedia or 3-dimensional graphics, but true multimedia applications like games or presentations with a lot of video, animation and 3-D graphics are beginning to look more like television or motion pictures! This is a sign of the convergence of media that has been predicted by the industry.
It is probable that business applications will continue to be dependent on a lot of text and 2-dimensional quantitative graphs, possibly supplemented with voice and limited video. But as entertainment applications and other software that rely heavily on visual communication become more sophisticated, the lines between computer software and television or film will blur more and more - compare for example DVD (digital video disc) which makes no distinction between the screens on which it may be displayed.
This once again stresses the importance of understanding the nature of the communication situation and the characteristics of the medium, as explained in the following paragraphs:
The major components of the two-dimensional field are those that determine the boundaries of the global screen message area and the functional division of the screen. The two-dimensional field of the computer-based visual message is structured as follows:
- Screen layout - composition of the image (as in television) and the functional divisions.
- Functional areas (as in business applications, computer-based training or games)
- Balance between graphics and text.
- Text colours and typefaces (fonts).
- Quality of graphics (as a function of resolution and quality of the display hardware).
- Colour usage.
- Application of conventions - in terms of functional areas, icons and colours.
The three-dimensional field is represented in all elements (primarily graphical elements) used to simulate depth, distance and perspective. This is called the "Z-axis" of the visual image. The realism of the three-dimensional rendering is therefore dependent on the quality of the graphic, usually expressed in terms of realism of colour, shadows, texture, or level of detail.
The four-dimensional field represents the temporal dimension - that is, those components of an image that are not static but change over time. In this category we deal with the two types of representational images: "video" and "animation" (refer Taxonomy above). The realism of the four-dimensional rendering (in other words the level of temporal meaning conveyed by the image) is therefore dependent on the following:
- Type of animation - accuracy of simulation of the movement of real objects.
- Quality of animation - the smoothness or naturalness of simulated motion.
- Meaning conveyed by animation - abstract or concrete.
The preceding paragraphs outlined the structural elements of computer images. These elements can now be approached from the perspective of the designer who is primarily interested in converting the subject matter relating to the user's task into sequences of visually attractive and stimulating task events.
At this point it might seem that the construction of the visual interface is largely a matter of creating, applying, explaining and maintaining a set of conventions. However, it is important not to lose sight of the user's mental model and various usability attributes required by the user's task. Within the framework of the usability requirements, there will be established conventions that can be applied with reliable results.
The word "convention" implies a standard way of communicating certain information to the user. The following conventions are commonly used by organisations that follow a user-centred design approach.
Although there are no hard and fast rules concerning where on the screen certain information should be displayed, it is accepted as a general principle that user interaction and system feedback should always appear in the same areas on the screen and in the same format. In planning the layout of the visual interface, the designer will choose areas where certain types of information or certain functions will consistently be displayed or performed. These are the following:
- Application, module, topic or level identification
- Primary information
- Secondary information
- Graphics and diagrams
- User response or user action (for example input fields, buttons and various interactive objects)
- Feedback (for example error messages)
- Help messages (for example procedural steps)
- System feedback (for example more information or confirmation)
- Prompts and hints
Modes of interaction are normally determined by the nature of the subject matter. Keyboard input is avoided unless specific words or numbers have to be entered by the user. Often this can be avoided by selecting the appropriate dialog strategy. Typical visual interaction devices are:
Menus - (pop-up instructions and choices that can appear in any place and any size on the screen and pull-down menus that appear from the top line (menu bar) of the screen and used to access certain options).
Icons - these are small pictures representing various functions or options of the application.
Scroll bars - these are "handles" on the screen image that allow the user to move to different areas of an image that are not currently visible.
Buttons - usually containing text or an icon and are selected to activate a specific function.
The choice of display quality is determined by the nature of the subject matter. Subjects with no or limited visual content (that is, no graphics or symbols) may be handled by relatively cheap, monochrome displays. The current tendency is, however, to select the best possible display technology to limit eye strain to a minimum and to promote acceptance of the medium.
Within the framework of the functional areas chosen as indicated above, the designer still has to structure the visual elements in a harmonious way. He also has to ensure optimum clarity and readability by choosing correct colours, text size, etc. The following choices are determined to a large extent by the principles governing the structuring of the two-dimensional field:
Functional areas: the designer may choose to demarcate these areas consistently by using a frame or a particular background colour.
Text: the following factors determine the display of text on the screen:
Justification (left, right, centre or even).
Number of fonts (character types).
Number of text sizes.
Words per line for each character size.
Line spacing (distance between lines).
Type of highlighting or emphasis (reverse, blinking or colour).
Scrolling and clearing of text. Normally the horizontal or vertical scrolling of text is discouraged because the movement tends to capture the user's attention with the result that the words are not actually read.
Screen blanking - (removing or erasing existing information) should be instantaneous without any flickering. The user should never be confronted with a blank screen. The simple reason for this is that a blank screen creates uncertainty and confusion because there are no operational clues. The user should always know what is going on and what is expected of him. This means that new information should instantly replace existing information without first clearing the screen and then displaying new information.
Image overlapping - Images should never be superimposed on existing images unless it is intended that the remaining visible portion of the previous image should still convey information. Image overlapping makes the screen more complex and difficult to interpret.
Type and quality of animation. Animation means the simulation of movement by moving an object or "sprite" on the screen. "Gratuitous animation" must be avoided - animation is only appropriate when it improves understanding of the concept being conveyed. The simple rule is: if something has an inherent attribute of motion, then its screen representation should include that attribute. For example, if you want to tell people about the working of an engine, show how it moves. If you want to explain a biological process like osmosis, speed up the process and show the movement of fluid in a simulation!
The quality of the display technology and the computer software being used will normally determine the quality of the animation. Animation can be very effective in communicating certain concepts, but is often difficult and expensive to develop.
Icons: Icons should be self-explanatory. If the meaning of an icon is not immediately apparent, it should be easy for the user to ascertain the meaning (e.g. by clicking on a "Help" icon,or by displaying a "tooltip" when passing the mouse cursor over the icon). Icons should be restricted to those that really facilitate the smooth functioning of the system. No inactive or inappropriate icons or buttons should be displayed.
This convention involves all methods that determine how the user will access the various parts and functions of the system. From a communication point of view, this is the critical part that will determine how effective the dialog between user and subject matter (or functionality) will be. The navigation and selection of options may be handled by any of the following:
Keyed events - the user responds by pressing a key on the keyboard or mouse.
Timed events - execution of an option continues automatically after a time delay.
Back-paging - the amount of freedom that the user is allowed in moving back to earlier events or information, can be selective, restricted or free.
Glossary access - additional information on relevant topics or functions may be accessed by calling up a glossary or "quick reference".
System map/index - from a metacognitive point of view, it is important for the user to know how the system or the information in it is structured. Access to information concerning the sequence of functions, operations, prerequisites and progress through the processes may be obtainable in the form of menus, process route map and an indicator showing how much of the process (for example a financial transaction) has been completed.
Content presentation - access may be gained to system functions or underlying subject matter (for example contained in an on-line reference resource) by means of:
menu access - the sequence of operations or functions is controlled by making selections from a menu.
icon or button access - portions or functions of the system are identified and selected by means of icons or buttons.
forced sequence - the user has no control over the sequence of functions or operations in the system.
Metacognitive support and protocol - the user's need for assurance that he is making progress, what function has been completed and what remains to be done, is supported in the form of various visual cues that indicate the level of the system or process, progress (such as a counter, or bar that "grows" from left to right as progress is made through the process) and structure (system map).
As explained in the section on Signs and meaning above, icons in computer applications are stylised representations of the functions they are associated with. The most common icons are those that determine process flow - icons indicating Stop (e.g. a traffic stop sign where a function or process must be aborted), Start (e.g. a green button with the word "START"), Continue (e.g. an arrow pointing upward or to the right), etc. Icon designs may have further attributes:
Size - icons should be small enough so as not to interfere with the display of the subject matter on the screen, but big enough to be clearly discernible.
Number of colours - a maximum of eight colours should be used, but preference should be given to four-colour icons. Very colourful icons tend to be a distraction and interfere with the display of primary information. Even monochrome icons can be better than rainbow icons that are hard to identify. Some systems (for example Windows 95/98) allow the use of full-colour icons, but then they are bigger than normal icons (64 x 64 pixels instead of 32 x 32) and used on high-resolution, high-definition screens where quality close to print can be obtained. These colourful Windows 95/98 icons are often animated, but the main purpose is to add interest for new users, because animated icons add information value in only a few instances. Examples of well-designed animated icons are found in those that indicate the type of process it is associated with - for example the moving magnifying glass displayed while a search process is being performed by the system.
Orientation - icons may be rectangular and framed, or may be freeform and unframed. The position on the screen will depend on the overall design and layout of the screen image. Ideally the icon should appear close to the relevant information on the screen, or particular groups of icons (like the "toolbar" buttons) should be placed consistently in a position where the user expects them to appear.
A large number of studies have been conducted on the perception of colour, both on cinema screens and electronic media. Considering the general principles defined in these studies, the designer has to make the following choices:
Maximum number of colours (that is, for non-pictorial images) in terms of the number of background colours and the number of foreground colours.
Colour symbolism - although this may be a matter of convention, cultural influences have to be considered. Green is not always perceived as positive or red as negative!
Hue and saturation of colours - this will often be a function of the quality of the display technology, but small areas of highly saturated colours on more subdued colour backgrounds are preferred.
Colour combinations - the designer must be aware of the characteristics of the display technology because certain colour combinations tend to "bleed" while others may cause flicker or moiré patterns (a flickering or waving effect caused, for instance, by displaying information in equally spaced bars or lines). The designer must also be aware of the physiology of colour perception - allowance must be made for the possibility of colour blindness by not combining red and green on the screen.
Information theory makes an important contribution to the art of designing effective visual images, especially through the principles of information density (or complexity) and visual noise. The following factors influence the effectiveness of the visual message:
It is not the intention of this article to go into the mathematical methods of estimating the amount of information in a screen. Suffice it to say that the principles of information theory determine that the more non-information bearing visual elements there are on the screen, (such as shadows, shading, crosshatching, etc.) the more difficult it will be for the viewer to decipher the meaning. Edward Tufte's book (1983) "The visual display of quantitative information" is an excellent reference.
As in television and film, the designer of software messages has to contend with a certain amount of interference or "visual noise" and normally it is the technology itself that is the biggest source of interference. Particularly the quality of the visual display is the most common reason why a message is distorted, misinterpreted or simply rejected. This was particularly noticeable in the earlier generations of computer-based training software that was rejected or found ineffective because of the poor quality of the display. The reason for this appears to be that users are more critical of the clarity of a message when it is intended to teach and not just to inform as in other computer applications.
Ineffective or faulty screen layouts or inappropriate fonts may be another source of visual noise. Interference can also be caused by environmental conditions or ergonomic factors such as incorrect lighting in a room or reflections on the computer screen. Even fear of radiation from the cathode ray tube may cause the visual message to be lost on the intended audience.
From these factors the following general design principles may be formulated:
- Avoid unnecessary embellishment of screens.
- Avoid undesirable optical effects such as moiré patterns. Such effects can contaminate an entire screen design.
- Crosshatching on charts or filling of areas should be replaced with solid colours. If this leads to too many colours in a graph, shades of grey can also be used.
- Avoid grids on charts unless they are absolutely necessary.
- Match interface metaphors to users' mental models - apply the same rules of harmony, balance and simplicity as in photography.
- Simple quantitative information belongs in tables or in narrative; large and complex sets of data can only be handled by graphs.
- Be conservative in colour use - use fewer, softer, more natural colours, and small amounts of bright colour for "zing"
- Use 3-D graphics only when it will aid meaning - avoid unnecessary realism.
- The use of shadowed text is rarely justified, except in text bigger than 8mm high on the screen. It always interferes with legibility. Animated text is NEVER justified, except as a decorative element, and even then its value will be questionable!
- Always consider the user first, the designer last!
- Be consistent!
In this short overview of visual communication I have tried to indicate that there is more to the design of software than "meets the eye"! I believe that effective visual communication in software may be equated with usability (provided, of course, that the program has a sound human factors basis to start with). No other medium is so ideally suited to exploit the principle of visualisation - visually attractive screens can serve as an intrinsic motivator in task performance.
The diversity of disciplines and principles that are involved in interface design, make the task of the designer one of the most difficult and challenging in the information age. The rapid development of information technology requires that methodologies must be continually updated to accommodate new technical features and new methods of representing and transferring information. This means that the interface designer must also continually update his design, communication and system skills.
Interface designers with the ability to develop effective, state-of-the-art software with effective visual interfaces are few and far between. Advanced communication and technical skills are needed to develop the systems that make effective use of the computer as a visual communication medium.
A large number of conventions are currently used by software developers and each one believes that his or her design is the right one. Many software developers like to believe that what they do is an "art" and therefore it is not surprising that conventions used at present are more the result of "art" than of science. Without denying a software developer his or her creativeness, there is still a great need for a formal method to ensure the communicative validity of such conventions as functional layout, icons and colour. A great number of guidelines and standards have evolved as a direct result of empirical research by human factors scientists. Methods now exist that allow the quantitative comparison of interface designs with a great deal of accuracy. All we need to do is convince more designers to use these guidelines!
Where the use of computers in the past required a certain level of computer literacy on the part of the average user, the current tendency is to make systems easy to use for even the most uninitiated user. This is achieved by concentrating on the design of effective interfaces that use familiar symbols and signs from the user's environment. This means that more and more systems will be operated by means of an interactive visual interface, and in a multimedia system, perhaps even combined with voice recognition and in a few years, virtual reality!
In order to ease the load on existing designers and reduce the growing gap between user needs and available skills and resources, it is imperative that interface designers should adopt a user-centred design methodology based on visual communication. Such a methodology will take the guesswork out of software screen development and ensure that every system will enable the user to perform better with optimal utilisation of resources. Emphasis in such a methodology should fall not just on software engineering issues as at present, but should incorporate all factors and disciplines that contribute to the structuring of the component that the user eventually is confronted with - the visual interface. To the user, the interface is the system!
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
Arnheim, R. 1974. Art and visual perception. Berkeley & LA: University of California.
Dondis, D.A. 1973. A primer of visual literacy. Cambridge: MIT.
Fourie, H.P. 1975. Beeldkommunikasie. Johannesburg: McGraw-Hill.
Hugo, J.V. 1992. Computer-mediated Visual Communication: The Visual Literacy Perspective. Master's Thesis, UNISA.
Norman, D. 1988. The psychology of everyday things. New York: Basic Books.
Tufte, E.R. 1983. The visual display of quantitative information. Cheshire, Conn.: Graphics Press.
Waern, Y. 1989. Cognitive aspects of computer supported tasks. NY: Wiley.
Zettl, H. 1973. Sight Sound Motion. Belmont, CA: Wadsworth.
