Implications of Adopting Semiological Approach on Iconic Representation in Website Design

Computers are by far the most ubiquitous media used by contemporary societies; it took over large share of contemporary communication. Accordingly, digital advertising is getting more important and central to the advertising industry, specifically website design. As humans depend on signs in their lives from its simplest form to the ultimate advanced form, dependency on them is inevitable. People are surrounded by images, texts, and sound of all kinds; it is only natural for signs dependency to shape the landscape of contemporary advertising. This research discusses the role of semiotic theories played in designing websites. Moreover, it investigates the relationship among images and verbal texts in designing websites from semiology perspective. Iconic representation of websites will be studied to illustrate how signs are used in designing digital advertising. Multimodality versus traditional text-based communication is also discussed to demonstrate why semiotics is an important tool in designing digital advertising. This research aims to demonstrate why and how better understanding of semiotics can be used by designers to enhance the usability and accessibility of websites as manifestation of contemporary digital advertising. In addition, it aims to demonstrate the role of images and text as signs in the cognitive process of building meanings. To achieve the research aims, qualitative method is adopted. Documentation and observation will be used to collect data. Semiotic analysis of selected websites will be carried out.


Research questions:
Why semiotics approach is important for website design? How a better understanding of semiotics can be used by designers? What is the role of iconic representation in website design?

Research aims:
This research aims to: Demonstrate why and how better understanding of semiotics can be used by designers to enhance the usability and accessibility of websites as manifestation of contemporary digital advertising. Demonstrate the role of images and texts as signs in the cognitive process of building meanings.

Research methodology:
This research uses a qualitative method for its descriptive, explanatory and exploratory roles. This research aimed mainly to understand in a deep, detailed, and thorough way why semiotics approach is important for website design and how a better understanding of semiotics can be used by designers. Moreover, what is the role of iconic representation in website design. Websites sample is selected according to a focus group of professional Egyptian graphic designers. Analysis criteria were refined and finalized by the researcher depending on previous studies.

1-Introduction:
Contemporary times has shown flood of information rooted from empirical research accompanied by intensified generation and integration of various disciplines and spheres of knowledge. This lead to more and more fragmentation of knowledge, associated with visions and frameworks of research trying to control and understand the whole multitude of research fields. Semiotics as a discipline exemplifies one of the main efforts aims to conceiving transdisciplinary context through which boundaries can be constructed between distinct fields of knowledge as Bouissac 1998 asserted. Computers as vehicles of communication vary between personal, group and mass communication. Most of contemporary communication involve computers. By the spread of computers and mobile smart devices, researchers are interested more and more to research and examine the important and main social and cultural processes that are involved with the

2-Semiotics and web design:
Semiotics; the study of signs as a contemporary discipline has become more integrated with the study of design in recent years. As advertising design is evolving towards a more digital approach, moreover it is becoming more and more dependable on computers for production and consumption of the ads, studying semiotics will help the rise in digital advertising. Common understanding of semiotics concepts and theories with relation to communication would result in advancements in designing for the web. Researchers from diverse approaches and backgrounds have attempted to find common grounds among semiotics and different disciplines. Understanding semiotics opens more windows on human interaction and human centered design. Reality as well as virtual reality are involving signs. Studying signs and their role in construction of either reality or virtual reality is what semiotics offer. Semiotics is important to the general field of user interface design, since design is concerned with representation, and semiotics provide tools for analyzing these representations. The sign in the user interface is always an intentional sign, i.e., someone has created it in order to convey some message to the user. (Islam Etal 2008) Semiotics in modern times began by Ferdinand de Saussure and Charles S. Pierce who were both contemporaries yet living in different continents and having two very different backgrounds. Saussure had defined semiotics as a correlation of differences. (Bouissac 1998: p. 573). Semiotics, as originally defined by Ferdinand de Saussure, is "the science of the life of signs in society". Saussure addressed three relationships when approaching semiotics. The first and more celebrated is the signifier and signified relationship. The second is the relation between any sign and other elements in its system. The third is the sign and its surroundings in specific limited time. For Saussure meaning is generated from differences between the signifiers; he argued that these differences are of two types: positioning differences which are syntagmatic and associative or substitution which is paradigmatic. (Saussure 1983, 121;Saussure 1974, 122 ) ‫االنسانية‬ ‫والعلوم‬ ‫والفنون‬ ‫العمارة‬ ‫مجلة‬ ‫الخامس‬ ‫المجلد‬ -‫والعشرون‬ ‫الثاني‬ ‫العدد‬ 473 Peirce definition of signs involves their ability to create additional signs in the human mind. He gave a triadic structure of the sign. This structure consists of the representment that is a representation, the interpreting that is a mediation linking the sense of the object in human minds as well as an object. For pierce, the interpreting as well as the representment stand for an object as a second representation of it. For him, the sign generates and produces other signs. (Bouissac 1998). Charles Sanders Peirce as a philosopher and logician, used logic to explain the construction of meaning. The mental sense of the object is a crucial element in the representation and the construction of meaning. (Peirce 1992). As a semiotic system, we have seen that the web is a weave of icons, indexes and symbols that depend on each other even for its own definition. Although the web design in its essence and its success relies heavily on images, the dream of a 'perfect language of images' cannot be reified with this medium either. Peirce's most known definition of a sign is something that stands to somebody for something in some respect or capacity. It creates in the mind of that person an equivalent sign, or perhaps a more developed sign.‖ (Buchler 1955: p. 99). To understand the use of Peirce's theory of semiotics to web design, a simple sign (X) in fig (1) exhibits the semiotics theory of Peirce. Users would generate an understanding for (X) that is at least appropriate for the direct context of interaction drawn in Figure (1); consequently, produced signs are likely to be very dissimilar. One user may agree that (X) says ‗close the window', but develop additional explanations according to which the manifestation of (X) in that particular window is actually the result of careless programming. One may consider that if the (X) is clicked and closes that window, the browser will halt. In one mind, to stop the unfortunate state, the (X) control should not be active, especially because the ‗Close & Return' button is there to control the closing operation safely. Other user may develop the interpretation that the (X) control and the ‗Close & Return' button mean exactly the same thing. The difference, he may think, is a practical one. The generic ‗close a window' can be communicated with different signs: to click on (X) or press some specific key combination. The latter can be faster than the point-and-click alternative. Unconventional users may understand the presence of (X) as meaning that the use of keyboard input to control the window on Figure (1) is allowed, beginner users may miss this signification of (X) altogether and interpret that to close the window they must click on the  (Eco 1976), brings together Peirce's and Saussure's theories. Eco says that signs start a long chain of other signs in the mind, the unlimited semiosis. He defines signs as content-expression correlates. For Eco, signification is a correlation between content and expression. Signification systems are collections of -discrete units [...] or vast portions of discourse provided that the correlation has been previously posited by a social convention‖. Communication is a process in which -the possibilities provided by a signification system are exploited in order to physically produce expressions for many practical purposes.‖ (Eco 1976: p. 4). Umberto Eco argues that through familiarity an iconic signifier can acquire primacy over its signified. Such a sign becomes conventional 'step by step, the more its addressee becomes acquainted with it. At a certain point the iconic representation, however stylized it may be, appears to be more true than the real experience, and people begin to look at things through the glasses of iconic convention' (Eco 1976, 204-5). Eco's theory is concerned not only with the production of signs but also the social communication as a process of manipulating signs. He sees the communication process as exploring and using the possibilities of any signification system. Sign production for him, is stepping out of prevailing signification systems and is not bounded to them. This puts culture in a prime place of Eco's theory of semiotics along with communication conventions and context. For him semiotics is a complete study of culturally constrained sign and production of meaning with social conventionalized communication.

3-Computer mediated design:
Digital media has evolved and has been advanced beyond desktop and laptop computers. From desktop advertising design, to mobile advertising design, display advertising, social media, native advertising and digital interactive out-of-home advertising. Designers as well as programmers communicate through interfaces. Verbal texts, visual texts that comprises of icons, graphical layout as well as colors, shapes, sounds and controls are all methods of communication between the designer and the user of websites or digital advertising. The communication process starts by setting where, when, how and why communication happens. Users interpret and decode the messages embedded as they interact with the system; it is a part of a meta-communication process. Designers of digital advertising and web sites input a particular designed sign system. Users are led through the interface by communicating what, where, how and why the design works this way. Website designers might communicate through interfaces with human characteristics (humanoids), or as press buttons, controls, dials and likes (machines), or with virtual worlds and spaces.  Icons are the visual language of a culture, drawn from items people commonly use and recognize. An item readily identified in one culture may be totally unknown in another. Cross cultural confusions can occur when using images and icons to convey meaning, cultures differ according to the amount of visual information. A final dimension affecting the creation of web standards is the global nature of the web. Global nature of web design presents challenges that range from basic cultural communication differences to differences created by impairments. Language is the most obvious obstacle for cross-cultural instruction. Differences of style, format, content, and organization between web designers and their intended audience can also often lead to poor communication.

4-Standardization in computer mediated design:
Standardization of icons while designing the web icon and pictorial symbol is a part of human computer interface because when surfing through internet you are interacting with a remote computer in the web. Standardization covers different aspect of interaction in the web. One of this defines the standard icon in the websites. ISO/IEC 11581 defines pictorial symbol s for use on a screen, which users can manipulate and interact with. They are part of a graphical interface that can facilitate the user's ability to learn, understand and remember functional elements of the system, and aid in the manipulation of these elements. Their purpose is to facilitate interaction among computerbased applications (software products) and users. ISO/IEC 11581-5:2004 describes user interaction and appearance of tool icons on the screen. These tool icons are a subset of the interactive icons that modify graphical or text elements of an application by association with real-life tool objects. These icons represent tool functions such as drawing, painting or modifying graphical elements.

‫االنسانية‬ ‫والعلوم‬ ‫والفنون‬ ‫العمارة‬ ‫مجلة‬ ‫الخامس‬ ‫المجلد‬ -‫والعشرون‬ ‫الثاني‬ ‫العدد‬
477 ISO/IEC 11581-5:2004 contains requirements and recommendations for 21 commonly used tool icons. It also specifies the relationship between tool and pointer icons. With the prevalence of smart mobile phones and touch-screen technology, mobile phone interface, any original physical button has been gradually transformed into the software interface of the virtual keys. The operation of touch-screen technology has been established and gradually evolved detailed gesture commands.

5-Iconic signs representation:
Pure iconography is not possible, as icons have to present themselves as such, to display their own icon-ness. A sign is not iconic until the interpreter recognizes it as such. To that purpose the shape of the mouse pointer (the device used to move on the computer screen through the displayed text) changes when passing upon such a link, and it becomes ... a small hand with a pointed index. Thus, an index is used to identify an icon as such. But note also that an icon (pointed finger) is then used to identify the index as such. As it is well-known, pure iconicity is not possible. The content of a website is all about readability. How well can people grasp the meaning and how easily can they read and process information. To ease that designers, use visuals that can help in several ways to support the content presentation. Web pages are usually full of visuals that act as user-friendly and aesthetically appealing ways of navigating through the network. These are symbolic signs, in the sense that their object must be conventionally established in order to help the reader to orient himself in a homogeneous and unlimited cyberspace. In general, all pages at one web site are homogenized in order to use the same symbols to design the navigation, in such a way that the reader can quickly learn their conventional meaning. Visuals can act as duplications of the textual links, which actually lend their meaning to the visuals.

6-Functions of iconic representation in websites:
Icons are used to sum up what the text is about. Sometimes, icons can even be enough to communicate content, which makes reading additional text unnecessary. Figure (8) is an example of E-Play's home page, an Italian fashion company, is a good instance of a fully iconic Web page. No text duplicates the iconic links, which indeed ‗'talk'' by themselves, that is, ‗'exhibit their objects''. A great approach to icons is rhetorical figures. One of the most important aspects of icons is that they use metaphors people can relate to, like an alarm or a musical note as in (figure 9).

7-Icon representation and structure of websites:
Navigating the websites easily to reach information is the main purpose of websites existence. To do that websites use signs to instruct, guide and inform. Verbal and visual signs are used along other signs to design websites. The right sign either visual or verbal in the right setting in the right arrangement and a design that guarantee stress-free and pleasant navigation practice.

8-Affordance of Icon in Websites
Affordance is defined as the relationship between an environment and an actor. J.J. Gibson, in 1970, it is the intuitively implying of object's sensory characteristic and its functionality and use. In websites these sensory characteristics is limited to 2D visuals signs and icons that are being displayed. The affordance of visual signs and icons guides the user as a cue of usage and functionality on the websites. Explicit affordance and perceptible affordance are two kinds of affordance that are used when designing icons. Explicit affordance is the clues given by text or visual appearance of the object.  Other kind of affordance is pattern affordance. A pattern affordance is affordance set out by conventions. A logo that's at the top left angle of a webpage being clickable is a great example. It's an arrangement we see everywhere; so we expect it everywhere. Text that has different color, underlined or italic, among unaffected body text, is presumed to be a link. Email is often signified with an envelope, while settings are signified with a gear. Negative affordance can be thought of as representing no affordance; it's when you have an inactive button or a button that looks inactive. The most usual case of this is when a button or a link is greyed out. It's not that you are telling a user you can't use this buttonalthough it could bebut that the button looks that you cannot use it, even if in fact you can. Using of icon direction for navigation in the web has more cognitive advantage versus text instruction, at this part we talk about the cognition issues of icons.

9-Cognition of Icons
Identifying the purpose being served by an Icon or visual signs is useful for analyzing the role it plays in perception and cognition. Icons and visual signs in web design are often a clear example of delineation of verbal and visual process. The well-known convention for hyperlinked text to be underlined is an example. If the hyperlink is not symbolized visually there would presumably need to be a text instruction for how to find more information on topic. Icons and visual signs are simple and intuitive representation of common functions and navigation in websites, whether the icons and visual signs are learned and remembered or whether they visually indicate a process, they are able to aid working memory by balancing the cognitive work in comprehension between text (phonological processing) and graphics (visuo-spatial processing). (Misarraf et al 2017) Visual signs would constitute passive processing. Cornoldi & Vecchi (2003) investigating the range mode of working memory asserting that signs don't need to be actively attended to in order to comprehend their meaning in the context of website. However, in this passive processing icon and visual signs are able to fulfill the communicative functions, structure and progress of a website. Comprehension of visual sign and icons, communication and transfer to the long term memory are a challenge to website designers. This can be a challenge for web designers trying to minimize the need for text explanations and simplify visual representation while ensuring content is comprehensible for new users. By being visual rather than textual, they are more intuitive and overcome the need to be literate in order to carry forward the communication.

10-User Experience Icons in Website Design:
When considering user experience as an important factor for designing iconic representation that is used in website design, drives us towards semiotics. As Eco (1976) asserted that design is seen as a communication process aiming to identification, expression and defining through designs and what they stand for as well as what they reflect. Icon representation is done in the context of website design thus, to be of quality user experience it should communicate the self and context it is found for. User experience design concerns with usability as well as user interface that is why designers work in a user centered process to insure the success of communication. UX Icons serve as a user experience incorporate. Shown in figure 17, icons are used on the left side of the website to do the following functions.  Icons are easily recognizable. If you use common icons, users will recognize them instantly, helping with navigation and tasks.  Icons save space. This benefit is especially important where using icons can save valuable assets.  Icons make good touch targets. The recommended icon size for touch devices is 1 cm by 1 cm, an ideal target for tapping with your finger.  Icons are universal. The meaning of icons can be easily understood, even if users don't speak the language. ‫االنسانية‬ ‫والعلوم‬ ‫والفنون‬ ‫العمارة‬ ‫مجلة‬ ‫الخامس‬ ‫المجلد‬ -‫والعشرون‬ ‫الثاني‬ ‫العدد‬ 483  Icons are aesthetically appealing. When well-designed, icons can make a website visually attractive.

11-Conclusion:
Analysis of a sample of websites and collected documents concluded that, designers of digital media advertising and web sites are dynamic contributors in the communication that takes place through interfaces. They transfer their design to users by means of interface signs such as verbal texts, visual texts like icons, graphical layout as well as sounds, and interface controls like buttons, and dropdown lists. Semiotics help designers to figure out how meaning is conveyed through interfaces, in as various forms as they now occur. By bringing designers and users together, a semiotic viewpoint can endorse more consideration in action. Websites are a weave of icons, indexes and symbols that depend on each other even for its own meaning. Although the web design in its essence and its success relies heavily on visuals, a better understanding of semiotics can be used by designers to enhance the usability and accessibility of websites. Dimensions that impact web sites design are typography, site structure, cognitive design, medium use, message, appeal and accessibility. The visual elements generally do not transfer across cultures. Directional flow of information for users in Western culture may confuse non-Western users. Visuals function as replications of the textual links, which actually give their meaning to the visuals. Icons are used to sum up what the text is about, icons are used to draw attention; they can draw attention and provide structure as well as separation to the content. Moreover, icons are all about simplifying websites, the right sign either visual or verbal in the right context in the right structure and design guarantee easy and enjoyable navigation experience. The affordance of visual signs leads the user as a clue of usage on the websites. Designing websites with user experience and semiotics serves the purpose of communication.