Using a Design Science Research Approach to Develop a HCI Artifact for Designing Web Interfaces: A Case Study

Using a Design Science Research Approach to Develop a HCI Artifact for Designing Web Interfaces: A Case Study

Muhammad Nazrul Islam (Military Institute of Science and Technology, Bangladesh) and Franck Tétard (Uppsala University, Sweden)
DOI: 10.4018/978-1-5225-0435-1.ch012


Interface signs are the communication cues of web interfaces, through which users interact. Examples of interface signs are small images, navigational links, buttons and thumbnails. Although intuitive interface signs are crucial elements of a good user interface (UI), prior research ignored these in UI design and usability evaluation process. This chapter outlines how a design science research (DSR) approach is used to develop a Human-Computer Interaction (HCI) artifact (semiotic framework) for design and evaluation of user-intuitive web interface signs. This chapter describes how the principles and guidelines of DSR approach are adopted, while performing the activities of the DSR process model to construct the artifact.
Chapter Preview


Interface signs are the key elements of web user interfaces (UI). These signs act as the communication artifacts between the users and designers/systems (see figure 1). Examples of interface signs are navigational links, thumbnails, small images, command buttons, symbols, icons, and the like. Interaction between users and web systems is mediated via web interfaces, and in particular interface signs since the content and functions of web systems are directed primarily through interface signs. Thus, at the low level, end users are required to interpret the ‘interface signs’ of user interfaces to understand the system’s logic and to perform tasks (Derboven et al., 2003). Thus, designing user-intuitive interface signs and evaluating the intuitiveness of interface signs become essential in the UI design and usability evaluation process (De Souza, 2005; Islam, 2013; Islam & Tetard, 2013). Consequently, Bolchini et al. (2009) suggested ‘interface signs’ as one of the major dimensions of web UI design and usability evaluation. However, very few studies explicitly focused on interface signs in UI design and evaluation (Speroni et al., 2006).

Figure 1.

Snapshot of homepage shows some interface signs marked by ovals

(retrieved from in November, 2015)

Web user interfaces basically consist of a large number of interface signs. ‘Sign’ is the central notion of semiotic theories; the key criteria to consider something as a sign are that:

  • 1.

    A sign should have some meaning, and

  • 2.

    A sign should be interpreted (Peirce, 1931-58).

This means that it is the designer's task to make any interface sign of a web UI meaningful, and to ensure that end-users can interpret the meaning of the interface sign correctly. Interface designers should encode the referential content or objects as an ‘interface sign’. In that way, end-users can correctly decode the sign and understand its referential meaning. However, there is no one-to-one connection between an object and a sign (see Figure 2). Users may interpret a given sign in a number of different ways, while different signs may have the same meaning. So, some signs are easy to interpret, while others may not. As a consequence, end-users may perform a specific task appropriately when their interpretation matches the referential object (or meaning) of the interface signs, as encoded by designers. It is therefore utmost important to understand why and how some signs are more intuitive than others. In order to achieve this, we have developed the Semiotic Interface sign Design and Evaluation (SIDE) framework to design and evaluate web interface signs to make them intuitive for end users and to improve overall we usability (Islam, 2014).

Figure 2.

Different user interprets (a) a sign referring to different object/meaning, and (b) different signs referring to the same object/meaning

Key Terms in this Chapter

Usability Evaluation: Assessing the usability of a product with the purpose of identifying usability problems and/or obtaining usability measures. In usability evaluation, usability of a system is evaluated with respect to criteria such as effectiveness, efficiency and satisfaction of intended users.

Research Methods: The process used to collect information and data for the purpose of making business decisions. It is often necessary to include a consideration of the concepts and theories which underlie the methods. The methodology may include surveys, design science research, experiment, etc.

Design Science Research: Design science research is a research method for performing research in Information Systems (IS). It involves the design of innovative artifacts to improve and understand the behavior of aspects of Information Systems.

Semiotics: The central concept of semiotics is the concept of ‘sign.’ Semiotics is concerned with sign, signification, and signifying systems. In other words, semiotics is defined as the study of signs and its process of signification.

Sign: Anything like a sound, a word, an image, etc. can be defined as a sign if it refers to some object rather than itself. For instance, the word ‘ENTRY’ on a door outside a hall room provides an indication to use that door to in the hall room. In this case, we may treat the word ‘ENTRY’ as a sign.

Usability: Usability is defined as the effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments. Effectiveness is the accuracy and completeness with which specified users can achieve specified goals in particular environments. Efficiency is the resources expended in relation to the accuracy and completeness of goals achieved. Satisfaction is the comfort and acceptability of the work system to its users and other people affected by its use.

User Interface Design: UI design is the design of user interfaces for machines, web and software, with the focus on maximizing the overall usability and user experiences.

Web Interface Sign: Web user interface encompass a number of navigational links, command buttons, images, symbols, logos, etc. These have a referential or intended meaning that refers to another object. Therefore, these user interface elements are defined as interface signs. For instance, the interface sign ‘Admission’ in a university website stands for providing admission related information for prospective students.

Complete Chapter List

Search this Book: