Reassessing User-Friendliness of Evolving Graphical Interface Design from Social Perspective

Abstract

The saturation of software in industries is too obvious a fact to be mentioned. Nearly every business in the world is dependent upon software industry. Organizations are keen toward enhancing the user experience of their software interface. Earlier, the software applications were command line driven where users had to remember and type commands to which system performed associated actions. But nowadays, virtually all applications are operated through graphical user interface (GUI). Users just drag mouse, click buttons, and apply combinations of keystrokes to accomplish a task. This is how GUIs have made the software friendlier to the users. The aim of the research is to find out how users become accustomed to features over time, how they interpret the meaning associated to the symbols in different contexts, and how semiotics plays a role here to provide affordance to the users, thereby helping them familiarize with the interface quickly.

1 Introduction

Semiotics is the science of signs. It is about how signs and symbols gain meaning. In the context of design, it aims to understand the form of a sign or a symbol or a product or an interface, the meaning and function that the user derives from it. It helps a great deal in understanding the users’ mindset and approach toward different elements presented to them in a product, sign, or an interface. The field of semiotics emerged from studies in linguistics and aesthetics. In linguistics, semiotic studies emerged from an understanding of how words, signs, symbols, sounds, and received meaning in the context of the words around them. According to Saussure [1, 2], semiotics is the study of the relationship between a concept (e.g., a clickable button on the screen) and the form that it was represented in (maybe a blue rectangle with text in it). Saussure believed that elements of the form do not have a meaning of their own, but they derive meaning from the contrast with the elements around them. If we try to understand this statement in the context of graphical user interface, then we can say that the components such as icons, pointers, text, and layout do not hold any meaning individually, but they attain meaning and function when they are placed relative to the elements around them. For example, if an icon of a magnifying glass is provided in a toolbar along with other icons, it may denote symbol of magnifying glass to zoom into a particular area of the screen as any other image would be, but when placed next to a text box it represents itself as a symbol for find or search action (as in the case of popular search engine Google) (Fig. 28.1). Thus, in interface design, the meaning of symbols changes as per its context and the user adapts himself according to the layout of the interface designed by the software manufacturers.

Fig. 28.1

One symbol representing two different functionalities at different instances

Semantics is the science of exploring and researching meanings of languages. As semantics is the study of the meaning of words, similarly visual semantics is the study of the images and their meanings. The appearance of the visual product, i.e., the image, such as its form, style, color, size, function, and context, is widely recognized concerns of visual semantics as they form the meaning and concept that image seeks to convey. The information presented visually is processed differently from information presented in the textual form. If we consider the visual elements in a computer interface, Just as we are hardly pleased to see a human face without a skin, for ordinary computer users, understanding does not involve wires, chips, arithmetic units and electronic rays that activate images on the screen [3]. Typing and reading are not same as speaking, watching, or listening [4], and information presented from other channels is influenced by visual information, which is processed first because processing behaviors or text-based information requires more cognitive resources than processing visual information [5].

2 Description and Analysis

Following are a few good examples of GUI elements to analyze how the mental model of a user is shaped as he/she accesses the features and familiarizes with it with the evolving technology.

Earliest computer interfaces were command based and users had to remember commands to perform a certain task associated with the command. To overcome this problem/to reduce the cognitive load involved in command line interface, graphical user interface (GUI) was developed for the first time by Xerox in Palo Alto Research Center. The graphical user interface worked on the concept of WIMP which stands for windows, icon, menus, and pointer, where

• a window is a program that displays the current actions performed by the user;

• an icon is a graphical representation of a program or application. It acts as an origination point to initiate a program or task;

• a menu is generally a text-based selection system that executes tasks or programs based on the selected text;

• a pointer is a symbol to point and select other graphical elements in order to execute them.

This type of interface improves human–computer interactions by encouraging natural behavior while interacting with computers as well as improves user-friendliness for all user categories by replacing the hard to learn command lines and procedures with visually similar imageries so that the computer user can easily identify the functionality of the provided image by recognizing it as a representative of related object.

The first mouse pointer which was developed by Xerox for its 8010 system was an arrow placed vertically on the screen (Fig. 28.2).

Fig. 28.2

Vertical mouse pointer [6]

Arrowhead was encouraged in the mouse pointer so that it could assist the movement of eyes toward the required position on the screen. Arrow is a strong symbolic representation for guiding the eye to point the visual element. It is long being used as a tool to effectively explaining directions on maps. And as the form of the arrowhead was reduced to a basic triangular shape, it conveyed the meanings better [7]. To understand this, references from fine arts have been taken. As an artwork could not come with additional instructions, artists throughout ages have explored possibilities of hidden arrow formations to keep the main focal point fixed and secondary accents in visual interface. A condition that seldom uses sign and its association may mislead the user and force tasks leading to inconvenience and discomfort. Figure 28.3 shows the famous painting by artist David Hockney titled “Mr. and Mrs. Clark and Percy.” Here, the arrowhead is deliberately formed with the help of one corner of the table which brings the focus onto the subject matter of the painting. Similarly, in the painting titled “Fair Rosamund” by artist John William Waterhouse (Fig. 28.4), the arrowhead formed by the edge of the portrait in the painting shifts the focus of the viewer toward the character peeping out of curtains. “The Little Street” is another example which depicts anticipatory art movement in Vermeer’s painting (Fig. 28.5). Here again, a diagonal line is intentionally created to assist the focus of the viewer to observe the depth and make the character inside the house look more prominent.

Fig. 28.3

Mr. and Mrs. Clark and Percy by David Hockney [8]

Fig. 28.4

Fair Rosamund by J. W. Waterhouse [9]

Fig. 28.5

The Little Street by Johannes Vermeer [10]

But due to the low resolution of the screen and uneven size of the pixels those days, it was sometimes difficult to locate the vertical pointer in the presence of text on the screen (Fig. 28.2). So, in an attempt to reduce the number of pixelated edges on low-resolution screens and to make the mouse pointer recognizable, it was slightly tilted toward left and the size of the arrowhead was increased (Fig. 28.6). The tilted pointer was introduced for the first time in Xerox Star system 1987. It was found that a tilted pointer is easy to be located among the vertical lines on the screen and does not completely hide the text behind it (Fig. 28.7). Since then it has been a symbol for pointing in interfaces even when the display resolutions have improved and there is no good reason for the mouse pointer to be tilted. Adding to it, with the advent of touchscreen devices such as smartphones and tablets, a pointer is no longer required as a medium of interaction between the user and the interface as pointing can be directly achieved with the fingertip.

Fig. 28.6

Tilted mouse pointer [6]

Fig. 28.7

Locating tilted pointer against vertical segments [11]

The icons were carefully designed for Apple Lisa computer (Fig. 28.8). For example, trash resembled real-life trash can. Similarly, on inserting a floppy disk, an icon of a floppy disk used to appear on the screen so that the users can quickly understand the meaning associated with each icon.

Fig. 28.8

Apple Lisa icons

The command symbol which is used for accessing the shortcuts is considered one of an essential symbol of Apple computer till date and would always retain its symbolic value in the future (Fig. 28.9). There is a story behind the design of the Apple command symbol.

Fig. 28.9

Command symbol on Apple keyboard

When Apple released its Lisa computer, the shortcut keystrokes had to be used along with a button denoted by apple symbol (Fig. 28.10). Given the low resolution of the screen those days, the apple symbol was not clearly recognizable and Apple co-founder and CEO—Steve Jobs—had a concern that there were too many “apples” on the screen [12].

Fig. 28.10

Associated Apple symbols for shortcut keystrokes [12]

Graphic designer Susan Kare was responsible for designing a new symbol to replace the existing apple symbol. She came up with a symbol which already existed [12]. This symbol is actually used in street signs to indicate “point of interest or attraction” in Scandinavian countries (Fig. 28.11). Kare also one step further to uncover what the symbol actually represents. She discovered that the symbol is inspired by the ruins of a castle in Borgholm, Sweden [13] which appears as a symbol for point of interest when seen from above as shown in Fig. 28.12. The symbol was so simplistic that it could be easily recognized even in low resolution of the screen. The command symbol is still used in the current operating system of Apple (Fig. 28.13) and is also a part of the keyboard in Apple computers (Fig. 28.9).

Fig. 28.11

Point of attraction symbol [13]

Fig. 28.12

Borgholm Castle, Sweden [13]

Fig. 28.13

Apple command icon

Nevertheless, symbols as used in GUI, sometimes convey a false pragmatic meaning. One example is Apple system error message being represented with a bomb icon (Fig. 28.14). This resulted in people calling Apple being frightened about the fact that their computer would blow up.

Fig. 28.14

System error message in Apple’s Macintosh system [12]

A couple of experiments have been conducted to validate the problems led by visual ambiguities in icons as well as understanding the meaningfulness in the icons, and the results are mentioned precisely to justify the relevance of the experiments. In the first experiment, the “Windows magnifier” icon (Fig. 28.15) was shown to 30 participants and the task provided was to identify the icon. But 27 out of 30 participants recognized it as the icon for search program instead. For the second experiment, a set of Windows system icons (Fig. 28.16) were shown to these participants. These icons are from a latest version of Windows operating system, i.e., Windows 10. The operating system provides an index number to all these icons; however, the identity and purpose of few of the icons are unspecified. Unfortunately, the participants as well as the author were unable to make meaning out of the icons displayed.

Fig. 28.15

Windows magnifier icon

Fig. 28.16

Selected Windows system icons

When the computer started getting sold commercially as a mass market commodity to general public, a huge effort was made to improve the user-friendliness of the interface so that it could be easily understood and accessed by all users. Therefore, the components of the interface were explained as metaphors of real-world objects so that the users could relate and understand the meaning and functionality of the component. One example of metaphorical representation is Magic Desk I interface (Fig. 28.18), which had a visual environment of an actual desktop so that one could recognize the components of the system by relating the items to real-life objects (Fig. 28.17). The items present on the workbench could be accessed using the mouse pointer which was replaced by a hand with a fingertip working as a mouse pointer. The cabinets represented disk drives, whereas the drawers represented the directories. The files contained in each directory could be seen by clicking on these drawers. Typewriter represented text editor. To create a text document, one had to click the typewriter icon, and as soon as typing is finished, an icon representing a sheet of paper appears on the desk. Documents created could be deleted by selecting and dragging them to the trashcan as shown in Fig. 28.18.

Fig. 28.17

Real-world desktop [14]

Fig. 28.18

Metaphorical representation of desktop in Magic Desk I interface [15]

However, over the passage of time, the term “desktop” has become so associated with the computer world that on hearing the word “desktop” today, and one recalls it as computer desktop first instead of a real-world tabletop.

90’s operating systems had a metaphorical cursor states to represent waiting or busy state of the system. Windows operating system used “hourglass” to represent the busy state of the system, whereas Apple operating system used “wristwatch” for the same purpose (Fig. 28.19). The hourglass cursor has now been replaced with a rotating ring cursor in Windows, and the wristwatch cursor of Apple computer is replaced with symbol known as “spinning pinwheel of death” (Fig. 28.20). This is due to the fact that the processing time of the computers has decreased drastically over time, and also, users do not require the help of metaphors to understand that the system is in a busy state. This is one of the perfect examples of users getting accustomed to the GUI as provided by the operating system manufacturer.

Fig. 28.19

90’s “busy state” cursors [16]

Fig. 28.20

Modern-day “busy state” cursors

Even so, the imagery of the physical object as represented in GUI should evolve hand in hand with the technological evolution of the object; otherwise, the user will fail to relate it to his current mental model of the object. For example, in Fig. 28.21, the “modem” is represented by a dial-up modem of the 1990s. And if this icon is shown to users now, especially to ones who have not used a dial-up modem, a large number would not be able to recognize the image as their understanding of modem is generally a USB modem.

Fig. 28.21

Windows 95 “modem” icon

The extinction of the use of floppy disks has increased the use of the floppy icon to represent “save” function so much so that it is no longer recognized as a representation for secondary storage as shown in Fig. 28.22.

Fig. 28.22

Floppy symbol represents “save” functionality

Similarly, the dial and reject function in a communication application is still symbolically represented with receiver icon of the old telephone which is no longer in use (Fig. 28.23). People who are unfamiliar with the telephone receiver have started recognizing the symbols as an element of the interface rather than relating it with a telephone receiver.

Fig. 28.23

Telephone receiver symbol used for representing dial and reject functionality

3 Observations and Conclusion

• Initially, the components of GUI have to be explained to the user with the help of metaphors so that they could relate the interface with real-world objects to understand its function; but as they become familiar with the interface, they no longer require the help of metaphors to understand the meaning and functionality of the component.

• False pragmatics may lead to ambiguities in interpreting the actual meaning while accessing the user interface as in the case of “bomb” icon used by Apple for representing system error. This is further supported by experiment 1.

• Same icon may have a different meaning depending on the context of the environment where it is placed. But still user makes no mistake in understanding its functionality according to the context.

• Icon image evolves/should evolve with technological evolution since the older icon loses its meaning and is no longer recognizable in the current paradigm.

• On the other hand, few metaphoric icons may still retain its meaning even when the real-world object from which the icon is derived becomes extinct, e.g., telephone receiver icon. Few icons continue to survive with a different meaning than that which was originally introduced, e.g., floppy disk icon.

• Few symbols achieve iconic meaning depending on the functionality that it provides to the user, e.g., mouse pointer, Apple command symbol.

4 Future Scopes

The study directs to the field of inclusive design developments that targets a wider range of users. The flexibility that is offered by customization plays two major roles in the design endeavor. Firstly, by letting the user overcome difficulties caused by physical uniqueness and secondly by treating the target user with due empathy that is derived in an advanced/modern interface design. The designer is instrumental here to tell the users that there is no room for discomfort in the receiving end. Instead of adjusting with the interface, they may expect the interface to adjust and alter.