Overview

Inclusive Design and Human-Centred Design

ID aims to put people first. It is about designing products with the specific needs of people with permanent, temporary, situational or changing disabilities in mind, according to their respective situations (DESIGN INCLUSIVO, 2023, web). HCD, in turn, was selected for this project given its relevance to ID and to the motto of people with disabilities — "nothing about us without us" — since it entails involving all those with a stake in the project, above all the end users, at every stage of the process.

In 2015, the World Design Organization (WDO) defined design as a process of solving complex (wicked) problems, centred on the human being, innovation-driven, strategic, participatory and transdisciplinary. It stated that design employs the creative synthesis of technological, economic, strategic, ethical, social and environmental values in developing artefacts, systems, services and experiences capable of reconciling the interests of the stakeholders of innovation and of fostering users’ quality of life (WDO, 2023, web).

HCD is a contemporary paradigm of design that prioritises more complex and more relevant problems, more agile, adaptive and participatory processes, and more innovative, sustainable and meaningful solutions. It offers a range of techniques and tools that help in understanding people’s needs and in including those people in the co-creative process that drives the development, generation and implementation of ideas and solutions (PEZZINI, 2016).

The participatory, collaborative and co-creative approach of HCD enables ideas to be generated collectively for the solution of shared problems. It assumes the involvement of users and other actors at every stage of the project. It makes it possible to increase the effectiveness of processes, the reception of results and the well-being of users. It understands that people make up a singular network of information for developing innovative solutions, capable of prompting ideas that accurately reflect what they want. It suggests entering communities, involving people, harmonising objectives, clarifying the design process, and imagining and making desirable futures possible (PEZZINI, 2016).

In 1993, the first book offering a theoretical overview of the oppression of disability was published. Its title was later adopted as the motto of people with disabilities: "nothing about us without us". In 1994, the term ID was used for the first time, by the English professor and activist Roger Coleman, to provide products and services that help people with disabilities carry out their activities with autonomy and quality of life (CLARKSON and COLEMAN, 2015). In 1999, HCD was recognised for the first time in an international standard. From 2001 onwards, its methodology was developed by researchers and practitioners in order to prioritise and involve everyone with a stake in the project at every stage of the design process (PEZZINI, 2016).

In the light of the definitions of ID and HCD, Inclusive Graphic Design (IGD) emphasises the creation of methods, the planning and the generation of informative products, intended for a variety of people, fostering independence for users.

The possibility that users may have some form of impairment, disorder, incapacity or physical/social disadvantage relating to the comprehension of information (such as disorders of sight, hearing and communication, as well as possible limitations of the medium or interface used to convey the messages — printed, digital, environmental, in the physical or virtual field) should steer the practice of Graphic Design towards more inclusive and accessible design measures, so that both users with and without disabilities can understand the information being proposed (BRAZ, HENRIQUES and DOMICIANO, 2017).

IGD can be developed in a number of ways. What follows is a table of images with illustrative examples of such solutions intended to advance accessibility and inclusion.

In view of this, Design for Education involves a procedure that combines interdisciplinary design approaches with the field of education, resulting in the capacity to create projects aimed at teaching and learning environments, covering the creation of educational products and services, as Márcio James Soares Guimarães (2020) states.

Legibility and typography

For the development of this undergraduate final project, a literature review was carried out on typography with an emphasis on legibility, complemented by information available on the websites of non-governmental organisations.

Typography

Typography is formed by a set of parameters and rules of space and anatomy, and is thus composed on a grid that maintains its order and structure. The grid is a "constructive structure that allows the compositional elements to be organised following a guide within a determined space, common to all the elements of the same system" (HENESTROSA, MESEGUER and SCAGLIONE, 2019).

Beyond understanding the boundaries the grid makes possible, it is necessary to understand the anatomical characteristics of glyphs (FRIELINK and SILVA, 2019).

• The Aperture is the open gap in letters such as a, c, e, s.
• The Ascender is the part that extends above the x-height of a lowercase letter, as in t, h.
• Uppercase is the change of a letter from lowercase to capital.
• Lowercase is the variation of a letter into its small form.
• Characters are all the letters, numbers and punctuation marks that make up our alphabet.
• Body size is the measure the characters occupy, generally expressed in points.
• The Descender is the part that extends below the x-height of a lowercase letter, as in p, q.
• Line spacing is the space between the lines of a text. It is the distance from the baseline of one line of text to the next.
• Letter spacing is the space between the letters or characters of a word.
• Extenders are the vertical stems of the characters, often called ascenders and descenders.
• The type family is the set of variations within a typeface, including all styles, such as italic, bold, small caps and so on.
• The Font is the set of characters — the letters, signs and numbers — of a given type. The full name of a font corresponds to a type family, with variation in size and style.
• The term Bowl, in typography, means the main round or elliptical form that defines the drawing of the letter. This can be seen in C, G, O in uppercase and b, o, p in lowercase.
• Bold consists of altering the drawing of the character, forming a heavier stroke than the regular version.
• The Ear, or Flag, is the small part of the letter’s drawing whose function is to balance the character and give it a better finish.
• Weight corresponds to the degree of darkness of a type, and can range from ultra-light to extra-bold.
• The Serif is the stroke or bar that finishes each stem of a letter.

Source: Frielink and Silva (2019).

Typography is concerned with structuring and organising visual language. When it is used to convey messages, it can be seen from two perspectives: the appearance or style of the typography, and the practical aspects of typographic work, such as legibility, scale and format (BAINES and HASLAM, 2005).

Legibility

According to Fontoura and Fukushima (2012):

In this context, the term legibility refers to the clarity with which the reader identifies individual letters. According to Unger (2016), among the measures for achieving good legibility, "the type designer can consider the anatomical aspects of similar letters in order to establish important differences in their glyphs, as in the case of the letters h and b, h and n, or j and i" (UNGER, 2016).

Frutiger (2002) also proposes a test through overexposure that simulates the deformations of characters resulting from the reader moving further away. "As the text is read at a greater distance, the tendency is for the outlines of the typography to become less sharp, and letters with small apertures tend towards an undesirable optical closing" (MERLO and GOMES, 2014).

Typography and low vision

The neuroscience doctor Aries Arditi (2014), in partnership with the organisation Lighthouse International, states in a non-academic publication that low vision hinders reading by reducing the amount of light entering the reader’s eye, which in turn blurs the retinal image and reduces the effective contrast of the text. He therefore presents ten guidelines for making printed texts more legible for the low-vision audience, among them: text should be printed with the greatest possible contrast. There is good evidence that light letters (white or light yellow) on a dark background (black) are more legible than dark letters on a light background.

Very high contrast is difficult to achieve with colour combinations other than black and white. Printed material is generally more legible in black and white.

The type should be large, at least 16 or 18 points, bearing in mind that the relationship between legibility and point size differs somewhat between typefaces.

Line spacing between the lines of text should be at least 25 to 30 per cent of the point size. This is because many people with partial sight have difficulty finding the start of the next line while reading.

Decorative or cursive typefaces should be avoided and, where it is necessary to use them, used only for emphasis. Standard serif or sans-serif typefaces, with familiar and easily recognisable characters, are best.

Although there is little reliable information on the comparative legibility of typefaces, there is some evidence that a roman typeface is more legible than italic, oblique or condensed type.

Wherever possible, spacing should be generous. Monospaced fonts, rather than proportionally spaced ones, appear to be more legible for these readers because they have inherently wider spacing.

Extra-wide binding margins are especially useful because they make it easier to keep the volume open.

Paper with a glossy finish can reduce legibility, because many older people or people with partial sight also have problems with glare.

The use of distinct colours, sizes and shapes on covers can be especially helpful for older people and people with partial sight.

Similarly, the Instituto Benjamin Constant (2014) proposes a number of recommendations for producing teaching material for people with low vision that bear directly on typography. According to the institution, the typefaces Arial, Verdana or Tahoma should be preferred when composing texts for the low-vision audience, avoiding elaborate or serifed letters. It further recommends applying the type at a body size of 24pt and in bold. As for column width, following the Instituto Benjamin Constant (2014), the number of characters per line should not exceed 39.

Colour and contrast

From its earliest manifestations, humankind has turned to colour as a channel of communication and of projection of its feelings and knowledge, making it a significant tool for conveying ideas and emotions, as well as for capturing the audience’s attention strongly and directly, subtly or progressively (BARROS, 2006).

Colour is one of the signifying mediators of instantaneous reception in communication, composed of structures of cultural codes and information. It performs specific functions that can be separated into two groups: one comprising syntactic and taxonomic relations — attracting attention, highlighting, ordering information hierarchically, directing reading and creating planes of perception — and another comprising semantic relations, such as setting an atmosphere, symbolising, connoting and denoting. Colour is therefore considered information whenever its application plays a part in organising and ranking information and attributing meaning to it (GUIMARÃES, 2003).

Colour vision

In physics, white light is a beam of electromagnetic waves with wavelengths ranging from 780 to 380 nanometres (nm = 1/1,000,000 of a millimetre) and frequencies from 400 to 800 billion pulses per second. If this beam of white light reaches a surface, the surface will absorb part of the electromagnetic waves and reflect another part. If the reflected waves reach the human eye, colour is seen. If the surface appears white, however, it means that it absorbed no frequency and reflected all the light (FARINA et al., 2006; SILVERA, 2015).

In physiology, the Young–Helmholtz theory proposes that the eye contains three distinct types of colour receptor, located in the retina, which respond strongly to red-orange (R), green (G) and blue-violet (B) wavelengths. The perception of colour would therefore be determined by the average of the three responses (FARINA et al., 2011).

In the case of people with visual impairments, the perception of colour differs depending on when in life the loss of sight occurred. For those with a visual impairment acquired later, the individual will have visual memories of the perception of light and colour, whereas for those with a congenital visual impairment, colour is merely an abstract concept used for categorisation (RAMSAMY-IRANAH et al., 2016).

Colour and low vision

For people with visual impairments who have residual vision, colour contrast should be used to optimise the reading of a text or the perception of images, since reading can be made easier simply by increasing the contrast between the colour of the letters and the background (PEREIRA, 2009).

Arditi (2014) reports that partial sight and congenital deficits produce changes in perception that reduce the visual effectiveness of certain colour combinations; two colours that contrast strongly for someone with normal vision are far less distinguishable for someone with a visual disorder. In order to explain what it is about the contrast between colours that makes them more or less discernible, he presents 3 guidelines for making effective colour choices that work for people with low vision, among them:

Exaggerate lightness differences between foreground and background colours, and avoid using colours of similar lightness adjacent to one another, even if they differ in saturation or hue.

The author stresses here that lightening light colours and darkening dark ones will increase visual accessibility.

Choose dark colours with hues from the bottom half of the hue circle against light colours from the top half. Avoid contrasting light colours from the bottom half with dark colours from the top half.

He reinforces that, for most people with partial sight and/or congenital colour deficiencies, the lightness values of colours in the bottom half of the hue circle tend to be reduced.

Avoid contrasting hues from adjacent parts of the hue circle, especially if the colours do not contrast sharply in lightness.

Arditi argues that the colour deficiencies associated with partial sight and congenital impairments make it difficult to discriminate between colours of similar hue.

Colour and design

In design, the use of colour must presuppose knowledge of several aspects, such as the mechanism of vision and colour vision, perception, the interaction of colours, harmonies and contrasts, psychophysiological reactions, symbolism and psychology, spatial effects, and communicative and semiotic functions. So when a title, a mark, a warning note or a piece of information is rendered in colour, it becomes necessary to check the background colour behind it in order to establish and feel the contrast between them (FARINA et al., 2011).

Contrasts, for Itten, occur when distinct differences can be perceived between two effects being compared. The human sensory organs work only by comparison. Tonal contrast — that is, the contrast between light and dark — is considered the most effective of all kinds of contrast (cited in BARROS, 2006). Farina et al. (2011) state that contrasts that are useful for easy visibility are: black on yellow, green or blue; red on yellow or white; white on blue or black; and yellow on black; and they consider the blue-green and red-green combinations to have poor visibility. Finally, they state that "white on black" has a medium value compared with yellow on black, which has the greater margin of visibility.

Silva (2013) emphasises the need to avoid combining adjacent colours on the hue circle, especially when those colours do not have significant contrast in lightness. This is because individuals with a deficiency in colour perception have difficulty distinguishing between colours of similar hue. For people with difficulties in colour perception, their ability to discriminate on the basis of hue, value and saturation is diminished. Designers therefore have a responsibility to compensate for those limitations, ensuring that colours differ more markedly in respect of those three attributes.

Certain colour combinations can create visual complications. As Silva (2013) observes, when developing visual elements intended to be read, it is essential to secure adequate contrast between the background and the text, since the human eye naturally seeks contrast in order to improve visibility and legibility. "Colours of contrasting values stand out from one another. Against a blue background, yellow leaps out at the reader. When the colour value has sufficient contrast with the background it is easy to read; but overusing contrast, or using complementary colours, takes the idea of contrast too far. The colours will appear to ‘vibrate’ and will create legibility problems…" (SILVA, p.71, 2013).

Webster (2014) states that incorporating dynamic colour and applying contrast feedback in design has a notable and important effect. This also highlights how important it is for designers to use design tools to evaluate the colours in their interface.

Layout

Layout is the "‘orchestration’ of the modalities", a "spatial order" in which the elements are placed, and the configuration that indicates "how salient they are, in what ways they have been arranged in relation to one another or connected to one another, such as overlap, colour harmony, and so on" (KRESS and VAN LEEUWEN, 2006).

Proximity

This principle holds that elements bearing a relationship to one another should be grouped and positioned close together, so that they are perceived as a cohesive unit rather than as a set of parts with no apparent connection (WILLIAMS, 2013).

Elements or blocks of information that have no relevance or relation to one another should therefore not be positioned close together, so as to give the reader a clear understanding of the structure and content of the page (WILLIAMS, 2013).

Alignment

According to this precept, nothing should be placed arbitrarily on a page. Every element needs some visual connection with another element on the page. This creates a clean, sophisticated, fresh look (WILLIAMS, 2013).

With the items aligned, a cohesive unit is created, so that the visual impact is stronger, even when the elements are far apart in the space used (WILLIAMS, 2013).

Repetition

Repetition consists of repeating visual elements of the design throughout the piece — colours, shapes, textures, spatial relationships, line weights, typefaces, sizes and graphic concepts. Doing so increases organisation and strengthens unity (WILLIAMS, 2013).

Contrast

Contrast prevents the elements of a page from being merely similar. If elements such as typeface, colour, size, line weight, shape and space are not the same, they should be markedly different. This principle is the visual attraction of a page, and what makes the reader look at it in the first place (WILLIAMS, 2013).