Visual Communication by Colours in Human Computer Interface

In Human Computer Interface, graphics, icons, images and colours (screen) can be a powerful communication and attention getting technique. To understand how colours should be used in order to obtain the desired target on a screen, it is important to know about: user eye, how to choose the colours for categories of information, what the common meanings are, how to locate the colours on the screen, which the physical impressions are when the usability is verified. The order of colours, the foregrounds and the backgrounds, the number of colours, are all communication tools.


Introduction
By analysing the title, the following directions are traced: human computer interface, visual communication and colour.

Visual communication
Visual communication is the communication through a visual aid and it is described as the conveyance of ideas and information in forms that can be read or looked at.
Visual communication as a part or as a whole relies on vision (Sless 1981:187-190) and it is primarily presented or expressed with two dimensional images (signs, typography, drawing, graphic design, illustration, industrial design, advertising, animation, colour) and electronic resources.
We also explore the idea that a visual message (Smith 2005: 123-125) accompanying a text has a great power to inform, to educate, or to persuade a person or audience (Visual communication, 2015).
Visual communication is based on several theories (http://mtsujournalism.org).Some of them are: the semiotics (science of sign and symbols), the gestalt (the sum is greater than its part, the humans are capable to assembly mentally separate objects into new logical wholes), the constructivism (humans generate knowledge and meaning from an interaction between their experiences and their ideas / observations), the ecological (people interprets what they see through spatial properties: light and scale), the cognitive (perception involves mental processes) (Loubere 2015).

Colour
The colour gives realism to screen usability.It attracts the user's eye emphasizes the logical information, facilitates the difference of screen components, makes display more attractive, only if it is chosen properly.
The colour derives from the spectrum of light (wavelength) interacting in the eye with the spectral sensitivities of the light receptors.
Light is made of electromagnetic waves.Different colours have different wavelengths.Table 1 shows the colour of the visible light spectrum (Bohren 2006: 216-220).Table 1.Wavelengths and frequency interval Colours in human computer interface are defined by one of the colour space or model: RGB, HSL and HSV (HSB).(Figure 1) 3.1.1.RGB (Red Green Blue) RGB uses additive colour mixing, because it describes what kind of light needs to be emitted to produce a given colour.It defines a colour space in terms of three components:

Colours space
 Red, which ranges from 0-255  Green, which ranges from 0-255  Blue, which ranges from 0-255 The RGB colour model is an additive one.Red, Green and Blue values (known as the three primary colours) are combined to reproduce other colours.Maximum numbers of colours is 16.7 million.

HSV (Hue, Saturation, Value) / HSB (Hue, Saturation, Brightness) colour space
Often, it is easier to think about a colour in terms of hue and saturation rather than in terms of additive or subtractive colour components.
HSB / HSV is a nonlinear transformation of the RGB colour space (colour is not defined as a simple combination addition / subtraction of primary colours but as a mathematical transformation).
The HSB / HSV colour model defines a colour space in terms of three constituent components:  Hue: the colour type (such as red, blue, or yellow).It ranges from 0 to 360° in most applications.(Each value corresponds to one colour: 0 is red, 45 is a shade of orange and 55 is a shade of yellow). Saturation: the intensity of the colour.It ranges from 0 to 100% (0 means no colour, that is a shade of grey between black and white; 100 means intense colour). Brightness (or Value): the brightness of the colour.It ranges from 0 to 100% (0 is always black; depending on the saturation, 100 may be white or a more or less saturated colour).
 Hue: the colour type (such as red, blue, or yellow).It ranges from 0 to 360° in most applications (to each value corresponds one colour). Saturation: variation of the colour depending on the lightness.It ranges from 0 to 100% (from the centre of the black & white axis). Lightness (also Luminance or Luminosity or Intensity).It ranges from 0 to 100% (from black to white).
HSL is similar to HSB.The main difference is that HSL is symmetrical to lightness and darkness.This means that: in HSL, the Saturation component always goes from a fully saturated colour to the equivalent grey (in HSB, with B at maximum, it goes from saturated colour to white). in HSL, the Lightness always spans the entire range from black through the chosen hue to white (in HSB, the B component only goes half that way, from black to the chosen hue).HSL offers a more accurate (even if it is not an absolute one) colour approximation than HSB.

Dithering
If the pixels of colours (on display) are placed next to each other, the tremor of eyes combines the two colours and the user sees a third one.These phenomena can create an optical illusion on a screen.

Colour uses
Figure 2 shows some direction of colour usage for visual communication on screen.The colours in screen formatting are used to grouping or to separating elements / information and highlighting / calling attention to some of them.
Displaying grouping of information in different colours can enhance the differentiation of the groupings.Spatially separated but related fields can be tied up together through a colour scheme (Galitz 2002: 625-628).Colour is used in formatting because it is much more flexible than other techniques through a number of available colours.
Properly selected colour-coding schemes allow identifying and focussing on relevant information without reading its contents first.The remaining information is excluded from the user's attention.

Colour connotation
Humans have different reactions to colour.They may make colour associations learned in childhood or associations on how colour are applied to objects in environment.Table 3 and figure 3 show some of the more frequent colour connotations.

Cultural colour associations
Figure 4 refers to an interesting study about colours in different cultures:

Colours schemes
Figure 5 presents classical colour schemes.Figure 6 shows an example of triadic scheme and two variants of screen: light and dark (The 28 best tools for choosing a colour scheme, 2015).

Location on screen
The recommendations for usability of human interface are (Galitz 2002: 636): in the centre of the visual field: red, green in the peripheral areas: blue, yellow, black, and white.

Foreground and background colours
For choosing a display colour it is recommended to select first a background and then an acceptable foreground colours (The 28 best tools for choosing a colour scheme, 2015).
Many studies were made to analyse the best combinations (Galitz 2002: 636).Some applications are very useful in selecting a desired foreground for chosen background (Colour Scheme 2014; The 28 best tools for choosing a colour scheme, 2015).

Physical impression Colours yield different physical impression:
-Bright, saturated colours convey a feeling of largeness and closeness -Dark, saturated colours convey a feeling of heaviness and farness -Desaturated light colours indicate a light weight and height -Desaturated dark colours indicate smallness Figure 7 shows some of the most used impressions and colour's physical impression.

Human computer interface
User Interface Design is the process of crafting a visual language and hierarchy that allows someone to use and engage an application.
Designing a computer interface (user interface) implies: gaining user's understanding and his tasks; involving the users in design of interface from the beginning using of rapid prototyping and testing iterating or modifying the design to obtain the desired solution integrating the obtained design for all system components.In each step of the interface design, colour usage can change a range of usability.
The main principles in user interface design are: - tolerance -with user's errors: a tolerant user interface allows the users to recover after the mistakes they have made.feedback: how the user interface communicates with the user after he / she has carried out an interaction.The feedback can be visual, auditory or haptic.

Conclusion
Colour in user interface is more than an aesthetical element.It is a powerful tool of communication.
A good communication needs to be properly "sent" and "received", without noise.The feedback in visual communication by colours in human computer interface is difficult to measure.For this reason, colour is used to be closer to the user's needs, in order to understand and to help the development of the activity.
There are some usage of colours on interface that should be avoided: too many colours at one time, colours with equal brightness, lack of contrast, usage of colour in unexpected ways (e.g.use green for stop or danger), etc.

Figure 7 .
Figure 7.The physical impression of the colours simplicity: depends on the context of use, what the user wants to do, etc. structure: interface is clearly laid out, well organized and controls are easily identifiable.Elements must be grouped together.The same task implies the same look.visibility: interface controls that need to be accessed by the user are visible.consistency: "People see what they expect to see." Recognition is preferable over recall.