HCI Report

Douglas Robertson July 16, 1993

Contents

1 INTRODUCTION 3

2 Colour 3 2.1 Factors affecting colour perception . . . . . . . . . . . . . . . . . . . . 3 2.2 Colour effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.3 Suggestions on selecting colour schemes . . . . . . . . . . . . . . . . . . 4 2.4 Colour and text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.4.1 Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 2.4.2 Suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.5 Benefits of an agreed colour scheme . . . . . . . . . . . . . . . . . . . . 5 2.6 Using neural networks . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3 Fonts and Text 6

3.1 Readability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.1.1 Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.1.2 Suggestions on highlighting text . . . . . . . . . . . . . . . . . . 6 3.1.3 Suggestions to improve readability of text . . . . . . . . . . . . 7

3.2 Translation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.2.1 Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.2.2 Suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4 Layout and Functionality 8 4.1 Types of Functional Area . . . . . . . . . . . . . . . . . . . . . . . . . . 8 4.2 Ways to implement Functional Areas . . . . . . . . . . . . . . . . . . . 8 4.3 Considerations in the choice of layout . . . . . . . . . . . . . . . . . . . 9 4.4 Suggestions for layout and functionality . . . . . . . . . . . . . . . . . . 9

5 How to display text 9 5.1 Considerations in choosing how to display text . . . . . . . . . . . . . . 9 5.2 Suggestions in displaying text . . . . . . . . . . . . . . . . . . . . . . . 10 5.3 Suggestions to ensure text is read . . . . . . . . . . . . . . . . . . . . . 10

6 Use in lectures 10 6.1 Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 6.2 Suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

7 Consistency 11 7.1 The need for consistency . . . . . . . . . . . . . . . . . . . . . . . . . . 11 7.2 Features of Intra-application consistency . . . . . . . . . . . . . . . . . 11 7.3 Features of Inter-application consistency . . . . . . . . . . . . . . . . . 11

8 Menus 11 8.1 Type of menus available . . . . . . . . . . . . . . . . . . . . . . . . . . 11 8.2 Suggestions on designing menus . . . . . . . . . . . . . . . . . . . . . . 12

1 INTRODUCTION

The intention of this report is to provide brief outline of some of the general principles of designing human-computer interfaces. It mentions some features which should exist in good interfaces and suggests others which may make the interface easier to use and understand. Areas covered include the use of colour, layout, text and functionality.

The information within the report is drawn heavily from the souces listed at the end.

2 Colour

2.1 Factors affecting colour perception

Colour is perceived differently in different situations by different people. Factors affecting colour design are:

• Environment The appearance of a colour on the screen will be affected by:

– its location

– its its placement

– the size and shape of the area it fills

– surrounding colours

Colours cannot be selected in isolation. The appearance of a window may also change when other windows are opened on the same screen.

• External factors Colour perception is also affected by external factors such as:

– Ambient lighting. Colours may appear different depending on whether the lighting is flourescant, incandescent or daylight. Generally the lighting will be a mixture of these and sunlight will vary during the day.

– Computer monitor vary greatly in their calibration so there is no guarantee that a particular colour scheme will look the same on another screen.

• The physiological and cultural differences among individuals

– Older members of the population lose their their ability to discern blue hues. They also have a reduced sensitivity to colour which may require the use of brighter colours.

– 8% of males and 0.5% of females have colour deficient vision. Of these the most prevalent is the inability to distinguish red from green.

– Cultural and occupational variations in colour perception. Common colour hues can refer to different ranges of hues in dissimilar cultures. Some people can discern subtle colour distinctions where others cannot.

2.2 Colour effects

Certain undesirable effects can be caused by the inappropriate use of colours due to the context of colours on the screen and the visual system.

• Bleeding

– This is the effect where a colour takes on something of the colour surrounding it. A small area of red surrounded by a large area of blue may take on a purple appearance.

• Problems in seeing small blue areas

– Because the eye has fewer blue receptors (which are more widely spread out) than red or green receptors, the user may have difficulty in making out fine detail. This is a good reason not to use blue for text as it may appear blurred. The same effect will cause a small area of blue to appear ’more washed out’ than a larger area of the same shade.

• Colour and movement

– If a red and blue object is moved around from side to side on the screen, the red and blue components may appear to become dissociated, and to move relative to each other in a disturbing manner. This effect occurs because the blue component of the object does not make an input to the fast acting luminance channel of the visual system.

• Depth illusions

– When widely separated spectral colour such as red and blue are presented on a screen, they will often appear to be in slightly different depth planes.

• Chromatic aberration

– When colours such as red and blue are used together (e.g. a bright red text highlighted in a passage of small blue text) the eye may repeatedly attempt to pull each colour of image into sharp focus in rapid succession. In this case there is no wholly correct depth to focus at and there is evidence that the process of hunting around different focus depths is fatiguing.

2.3 Suggestions on selecting colour schemes

• Choose colour to minimise the above undesirable effects.

• Brightness level is more appropriate in indicating an attributes of an object rather than hue, since they are easier to read and because hue based codes are not generally intuitive

• Where possible, use colours redundantly to reinforce information displayed through another means such as text and shape as this provides additional cues to aid search time.

• Use bright colours and contrast sparingly. These attract the users attention and should be reserved for important areas otherwise the user may find it more difficult to know where to look and become confused.

• Avoid flashing areas whenever possible. When used, never have more than one area flashing at once. In fact, flashing areas are probably best avoided.

• To avoid problems with users with colour deficient vision, colours such as red and green should be of significantly different shades.

2.4 Colour and text

2.4.1 Considerations

• Very ’hot’ colours (such as pink and magenta) may appear to pulsate on the screen.

• Monochromatic colours (produced by a single electron gun) are likely to be sharper than those produced by several (usually not perfectly focused) electron guns.

• If selection of text colour is made on grounds of luminance alone, then on a black

background:

– The legible colours are white, yellow, cyan and green. (In that order)

– The least legible are magenta, red and blue

2.4.2 Suggestions • Use colour for highlighting rather than using underlining.

• Avoid using very ’hot’ colours (such as pink and magenta) wherever possible.

• Ensure adjacent colours complement each other (that is, that they don’t clash)

• Use monochromatic colours for text wherever possible.

• If a coloured background is used then select text colours on the basis of obtaining the strongest contrast in brightness between text and background.

• Green is probably the best choice for text on a dark background.

2.5 Benefits of an agreed colour scheme

An agreed colour scheme has the following advantages:

• Applications are more likely to have a consistent ”standard” look

• There is a reduction in development time

• Easier implementation Colour also has a use as a mnemonic in that it is used in conjunction with shapes and locations to create strong associations, aiding recognition, recall and reducing search time. This will be strengthed by consistency between applications.

2.6 Using neural networks

Neural networks have been used with some success in the selection of colour schemes by the Advanced Technology Group of Apple Computer. A neural network was trained on the colour of interface elements, such as scroll bars and window titles, from ”good” colour sets chosen by designers. When embedded in a colour-selection program, the network was able to complete a set of colours from a few chosen by the programmer. Although some colours would then be changed, it was still found to be easier than choosing a colour scheme from scratch.

3 Fonts and Text

3.1 Readability

3.1.1 Considerations

• Fonts can be used in an application to attract attention in the same way as colour.

• Text written in a proportional font is more easily read than text written in a fixed width font.

• Underlining is useful for emphasising titles but, when used in a block of text, it can make the line below harder to read.

• Italics are useful as they attract the users attention without causing severe breaks in reading rhythm.

• shorter lines easier to read since they reduce excessive eye movement.

• There is evidence to suggest that right justification of text is detrimental to the comprehension of poor readers.

• Hyphenation reduces reading speeds for both good and poor readers.

• Text which is completely in capitals is less legible than text which is printed completely in lower case or in normal mixed case text. This is because the varying heights of lower case letters provide more and more easily assimilated information about each character to the reader.

3.1.2 Suggestions on highlighting text

• When using reverse video to display a word, leave a space before and after the word to enhance visibility.

• Use of bold face, italics or a change in colour or brightness is probably better in highlighting text than underlining.

3.1.3 Suggestions to improve readability of text • Avoid using too many fonts within one application.

• Use proportional fonts for text

• Fixed fonts are easier for numerical text fields.

• Usually 8 to 10 words a line is easier to read.

• Blinking and flashing characters should be used sparingly, if at all, as these immediately attract (or distract) the users attention. When used, there should never be two areas flashing at the same time.

• Avoid right justification and the use of hyphenation.

• In breaking text into lines, it may be better to consider choosing the break points according to syntax instead of purely on the basis of the width of the text.

• Use lower case or normal mixed case text in preference to capitals.

3.2 Translation

Versions of the application may be required in languages other than English. 3.2.1 Considerations

• Text translated from English is likely to expand 30% to 50%, or even more. 3.2.2 Suggestions To make translation easier:

• Use brief and simple sentences as these are easier to understand and translate.

• Use affirmative statements as these are easier to understand than negative statements.

• Use active voice (e.g ”Press the Help Button” rather than ”The Help button should be pressed”)

• Use prepositions to clarify the relationships of nouns; avoid stringing three or more nouns together.

• Use simple vocabulary. Avoid Jargon unless it is a part of the audience’s working vocabulary.

• Allow space for text expansion after translation.

4 Layout and Functionality

The layout used can have a significant effect on both the speed and the extent of a users comprehension. There is still a tendency to design computer screens as if they were paper. (top to bottom, left to right, left justified.) A well written program may employ a variety of layouts, but for each layout there should be consistency.

4.1 Types of Functional Area

The main screen components (which translate into functional areas) are:

• orientation information

• directions

• student responses

• error messages

• student options

• feedback to students By and large each of these should be located in its own part of the screen.

4.2 Ways to implement Functional Areas

Three ways to implement Functional areas are

• fixed split screen

– The advantage of this is in the reduced time that it takes for the user to

become familiar with the layout.

• paned windows

– The advantage of paned windows is that, when not needed, the area can be used for other purposes.

– Disadvantages are the possible disruption to the other screen areas when they are required again and the possible confusion to the novice user.

• pop-up windows

– One advantage of pop-up windows is that they can be of arbitrary size and are obtrusive and so attract the user’s attention.

– They are of most use in displaying transient information. A combination is probably best, with the greatest emphasis on pop-ups and split screen.

4.3 Considerations in the choice of layout

• Output should not normally jump from window to window except in the case of transient information such as error messages.

• It is important that the users own response is not obliterated by any resulting feedback on it.

• In general, unpredictable needs are ideally satisfied by pop-up windows, since these do not damage the pre-existing display.

• Orientation information should be be visible at all times or available at all times and should not interfere with the continuity of other information on the screen.

• Functional areas must be distinguishable from each other by, for example, being surrounded by clear space or by borders.

4.4 Suggestions for layout and functionality

• To minimise eye movement, where possible the user should be asked to reply in an area directly adjacent to the question.

• Textual input areas and response areas should be as close as possible to the bottom of the screen since the majority of users are not touch typists.

• If orientation information is to be visible at all times, the the top or bottom of the window are suitable places.

• Directions to the user can be handled by being placed in fixed, scrollable areas or by being presented in pop-ups available on request from the user or on error.

• One possible layout technique is to associate decreasing height of screen with increasing transience. In this way a location window, being fairly static, is at the top of the screen and dynamic information occurs at the bottom of the screen where it is easily read by users who may have to refer frequently to the keyboard.

• Leave error messages relating to invalid input on the screen until the repeated input has taken place.

5 How to display text

5.1 Considerations in choosing how to display text

• Transient information may be overwritten before it can be read by the user.

• Transient information may be shown and although not overwritten, may not be noticed.

• The amount which the user is expected to read.

5.2 Suggestions in displaying text

• Text should be kept to a minimum as large amounts detract from the simulation.

• Where large amounts of text are required this can be done with a scrolled window but it may be better to sub-divide these.

5.3 Suggestions to ensure text is read

• Emphasise important parts by highlighting etc.

• The application can suspend its activities, requiring the user to perform an action such clicking on a button to continue. This can be achieved by the use of modal dialogs.

• Important output may be accompanied by an audible tone, but this may not be of much practical benefit where there are groups of users.

6 Use in lectures

6.1 Considerations

The requirements for certain features of an application may be different for use in a lecture situation. Some areas which may need additional consideration are:

• Font size

– Text may be required to be larger so that it can be easily read at a distance.

• Colours

– The colour of the computer display may appear different if projected onto a screen.

6.2 Suggestions

• Where possible, design applications to operate under a variety of font sizes. When designing the layout, consider the effects of different font sizes on interface objects such as text areas, push buttons and labels.

• Greater contrasts in colours may be required than for normal use, especially if fine details are to be made out.

• Consider attributes such as colour and fonts when deciding which command line options to include.

• Resources for attributes such as colour and font sizes may be placed in different resource files, allowing the application to be easily adaptable for use in different situations.

• Other possibilities include interrogating the user on start-up, or providing a menu option to toggle fonts and colours between those required for individual use and those required in a lecture situation.

7 Consistency

7.1 The need for consistency

Consistency is important among and within applications to • Help the user transfer familiar skills to new applications

• Reduce the amount of learning and recall necessary

• Facilitate exploration within applications

7.2 Features of Intra-application consistency

• Similar component operate similarly and have similar uses

• The same action should always have the same result

• The function of components should not change based on context

• The position of components should not change based on context

• The position of the mouse pointer should not warp

7.3 Features of Inter-application consistency

• Components look familiar

• Interaction is familiar

• Components are organized in a familiar manner

8 Menus

8.1 Type of menus available

Four types of menu are:

• Pull-Down Menus

• Pop-up Menus

• Option Menus

• Pin-up Menus Pin-up menus stay on the screen all the time allowing the user to see easily how they got to their current position. (an example of orientation information) Currently they are not supported in Motif and may take up valuable screen space when this resource is limited.

8.2 Suggestions on designing menus

• Keep Menu structures simple.

– Each submenu reduces ease of access.

– Consider using dialogs instead of submenus.

• Group like Menu elements together. – Group according to function.

– Use separators between logical groups of elements.

• List Menu selections by frequency of use. – Most frequently used elements should be positioned near the top.

• List menu selections by order of use. – This is more important than frequency of use.

• Separate destructive actions.

– Element such as Delete should be placed ath he end of a pull-down menu.

and separated from other elements by a Separator.

• Provide mnemonics and accelerators. – Where possible use the first letter of menu items as the mnemonic.

– Provide accelerators for frequently used menu items not evey menu item.

References

Laurel, Brenda The Art of Human-Computer Interface Design Addison-Wesley Publishing Company, Inc.

Rubin, Tony User Interface Design for Computer Systems Halsted Press

OSF/Motif Style Guide Prentice hall, Englewood Cliffs, New Jersey

Issacs, G Text Design for computer assisted learning British Journal for educational technology 1987 vol 18 p41-51

Jenkin, J M Some principles of screen design and software for their support Computers and education 1982 vol 6

Karat, J James, J E and Anderson M A comparison of menu selection techniques: touch panel, mouse and keyboard Journal of Man-Machine Studies 1986 vol 25 p73-88

MacDonald, J E Dayton T MacDonald D R Adapting menu layout to tasks Journal of Man-Machine Studies 1986 vol 25 p73-88

Mayes, JT Draper, SW McGregor, AM Oatley K Information flow in a user interface: the effect of context on the recall of MacWrite screens People and Computers IV (The British Computer Society Human-Computer Interaction Specialist Group) 1988 p275-289