SciELO - Scientific Electronic Library Online

 
vol.7 número14La infografía: un recurso didáctico para los procesos actuales de aprendizaje y enseñanza índice de autoresíndice de materiabúsqueda de artículos
Home Pagelista alfabética de revistas  

Servicios Personalizados

Revista

Articulo

Indicadores

Links relacionados

  • No hay artículos similaresSimilares en SciELO

Compartir


Zincografía

versión On-line ISSN 2448-8437

Zincografía vol.7 no.14 Guadalajara oct. 2023  Epub 01-Dic-2023

https://doi.org/10.32870/zcr.v7i14.204 

Reference

TriSigEM: a Semiotic Model for Usability Evaluation of Graphical User Interface in Apps

TriSigEM: un Modelo Semiótico para la Evaluación de la Usabilidad de la Interfaz Gráfica del Usuario en Apps

Edna P. Quezada-Bolaños1 
http://orcid.org/0000-0001-6987-9007

Lizbeth Gallardo-López2 
http://orcid.org/0000-0001-9281-2206

1Center of Science and Technological Studies, Campus No. 2, “Miguel Bernal”, National Polytechnic Institute Mexico City, Mexico equezadab@ipn.mx

2Metropolitan Autonomous University, Campus Azcapotzalco Mexico City, Mexico glizbeth@azc.uam.mx


Abstract

The percentage of user acceptance and adoption of some apps needs to be improved. Sometimes the app’s functionalities work correctly, but its GUI does not allow correct use. Our research subject is usability in implementing GUI Design Patterns. This paper describes the design and implement of TriSigEM (Peirce’s Triad of Signs Evaluation Model), a quantitative and hierarchical model that guides evaluators in observing the GUI’s signs: Index, Icon, and Symbol. TriSigEM can help us improve GUI’s implementation and, eventually, the app’s functionalities. Also, this paper presents a comparative analysis of TriSigEM with related works reported in the literature. This analysis shows that TriSigEM surpasses other models and highlights that the analyzed GUI patterns need specifications on the Triad of Signs.

Keyword: Graphical User Interface; Usability Evaluation; Triad of Signs; Semiotic Principles

Resumen

El porcentaje de aceptación y adopción de algunas apps, por parte de los usuarios, necesita ser mejorado. En ocasiones, las funcionalidades de la app funcionan correctamente, pero la interfaz gráfica de usuario (GUI) no permite un uso apropiado. Nuestro tema de investigación se centra en la usabilidad e implementación de Patrones de Diseño de GUI. Este artículo describe el diseño e implementación de TriSigEM (Peirce’s Triad of Signs Evaluation Model), Modelo de evaluación a través de la Triada Sígnica de Peirce, y basado en criterios de usabilidad. Se trata de un modelo cuantitativo y jerárquico que guía a los evaluadores en la observación de los signos de la GUI: Índice, Icono y Símbolo. TriSigEM puede ayudarnos a mejorar la implementación de la GUI y, eventualmente, las funcionalidades de la app. Además, este artículo presenta un análisis comparativo de TriSigEM con trabajos relacionados reportados en la literatura. Este análisis muestra que TriSigEM supera a otros modelos y destaca que los patrones de GUI analizados requieren mejoras respecto a la Triada sígnica.

Palabras clave: Interfaz Gráfica de Usuario; Evaluación de Usabilidad; Triada sígnica; Principios Semióticos

1. Introduction

An app is a software application intended for users who are not computer experts and hope that it will facilitate some tasks. For example, some apps support ludic, medical, educational, banking, and office activities (Akowuah & Ahlawat, 2018), (Barday, 2018). App’s Graphical User Interface (GUI) is the interaction mechanism between the user and the app’s functionalities. Currently, there are GUI designs proposed by Google, Apple, Windows, and Amazon, among others, which haven’t reached a consensus or standard due to market strategies. Nevertheless, authors like Granlund et al. (2001), Van and Van (2003), Tidwell (2010) and Werkmeister (2021) have found patterns in these designs, classifying and specifying every one of them. A GUI Design Pattern proposes a solution to a recurring design problem. GUI designers and developers (ideally) use the patterns and implement them in developing new applications. We assume the app implementation is successful because of GUI Design Patterns, but this is not the case; according to Statista (2022), apps available today in the market are in the order of millions, and their order of popularity is in 0.01% of the total number of apps, which means that users do not like 99.99% of them. One of the reasons for this is, that although app’s functionalities work correctly, the GUI does not allow its correct use. Thus, a GUI is an essential part of an app because the user perceives its responses through it. According to Hawley (2010) and Joachims et al. (2017), the first 50 milliseconds determine the user’s perception of the system. Our research subject is usability in implementing GUI Design Patterns. According to the norm Standardization (2018), Usability is the extent to which specified users can use a product to achieve specified goals with Effectiveness, Efficiency, and Satisfaction in a specified context of use. Therefore, measuring GUI’s Effectiveness, Efficiency, and Satisfaction in a specified use context is fundamental to evaluating the app’s Usability. Moreover, there needs to be a solution either in implementing GUI Design Patterns or in the patterns themselves. Works like Fernández (2011) and Turner (2011) propose heuristic methods to evaluate GUI Effectiveness, Efficiency, and Satisfaction. Among the heuristic models, semiotic ones stand out because they allow the evaluation of the signs and their incidence in the user interaction with the GUI. De Souza (2005) and De Souza (2018) defines semiotics as the study of signs, meaning processes, and how signs and meaning are part of interaction. The sign is the minimal ontological GUI element. Peirce (1974) defines sign as “anything that stands for someone rather than something else in some respect or capacity”. The Triad of Signs: Icon, Index, and Symbol, is part of Peirce’s semiotic theory. This triad is present in GUI: Icon corresponds to images, Index corresponds to links and buttons, and Symbol corresponds to texts. Our study focalizes the Triad of Signs presence in the implementation of GUI Design Patterns, allows us to evaluate and detect incidents in GUI signs and, where appropriate, make the corresponding improvements. On the one hand, designers and engineers need a tool to help them pay more attention to the Sign Triad; on the other hand, GUI Design Patterns need to specify the Triad of Signs. For example, a Navigation pattern indicates a button to return to the previous screen. However, the implementation of that button needs to have the right color or texture to identify it. Our proposal is a new evaluation model called TriSigEM, which is based on Semiotics to identify GUI problems, mainly in those implementing some GUI Design Patterns: Navigation, Search, Form, Errors, Help, and Homepage. TriSigEM is a hierarchical and quantitative model where it is possible to calculate the degree of compliance with Usability or one of its Characteristics: Effectiveness, Efficiency, and Satisfaction. This research is the foremost step for GUI Design Patterns to integrate the Triad of Signs into their specification.

This article has the following sections: section 2 presents the research methodology; section 3 presents the related works; section 4 describes TriSigEM design and implementation; section 5 presents the results of comparing TriSigEM with related works; and finally, section 6 presents the conclusions and future work of the research.

Methodology

Problem Statement

New apps still need to meet the minimum usability requirements to be accepted or adopted by users. Even when previous works have revealed GUI Design Patterns, those do not include the Triad of Signs in their specification.

Hypotheses and Research Objectives

Hypothesis. Evaluating the usability criterion in apps, from a semiotic perspective, will allow us to explore and identify the Triad of Signs present in the GUI. In the medium term, the Triad of Signs will be part of the specification of GUI Design Patterns. Consequently, app acceptance and adoption by users will be successful.

  • Objective 1. Propose a heuristic evaluation model for the app’s GUI based on the usability criterion and from a semiotics perspective. The design patterns involved are Navigation, Search, Form, Errors, Help, and Homepage.

  • Objective 2. Conduct a comparative study with related works to evaluate the usability criterion in apps reported in the literature.

Research Contributions

  1. TriSigEM (Peirce’s Triad of Signs Evaluation Model), an evaluation model based on usability criterion and from a semiotics perspective. The model has a hierarchical structure with quantitative parameters.

  2. A comparative analysis of TriSigEM with related works reported in the literature. TriSigEM is a model that allows a GUI evaluator to observe and punctually evaluate a series of indicators in the interface signs.

  3. It brought to light that the analyzed GUI patterns need specifications on the Triad of Signs. These specifications are an opportunity to provide a new dimension that attends to full compliance with usability, increasing users’ possibility to employ and adopt the apps.

Related Works

There are essential heuristic models to evaluate the app’s GUI, for example, Web Usability Evaluation Process (WUEP), Web Site Usability Characteristics, Neil Turner’s Tool, Semiotic Interface Sign Design and Evaluation (SIDE), a Systematic and Generalizable Approach to the Heuristic Evaluation of User Interfaces, and a Usability Model of Hypertext based on Semiotics.

Fernandez et al. (2011) in their work WUEP propose to observe and evaluate the Visual Characteristics as Consistency, Operability, and Orientation. Consistency allows visual information to be consistent for the user. Operability considers that the graphics allow the user to carry out correctly app’s functionalities. Finally, Orientation allows directing the user toward the correct use of the app through quality graphics and the correct feedback.

Aziz et al. (2013) and Aziz and Kamaludin (2018) propose a broader set of Visual Features that they associate with Web Site Usability Characteristics. For Efficiency: Minimal Memory Load, Operability, Feedback, and Navigability. For Effectiveness: Flexibility, Consistency, Feedback, Accuracy, Completeness, Navigability, Help effectiveness, Documentation for user effectiveness, and Description Completeness. For Satisfaction: Attractiveness, Sympathy, Flexibility, Minimal Memory Load, Operability, and User Orientation.

Neil Turner’s Tool is based on the Usability criterion and examines web apps through ten evaluation criteria: a) Features and Functionality, b) Homepage, c) Navigation, d) Search, f) Control and Feedback, g) Form, h) Errors, i) Content or Text, j) Help, and k) Performance (Turner, 2011). Each criterion has a set of characteristics such as Clarity, Accessibility, Flexibility, and Understanding, among others. The evaluator must evaluate each characteristic on the scale [0.5]; scale interpretation: 0 not applicable, 1 very poor, 2 poor, 3 good, 4 very good, and 5 excellent. Results allow the evaluator to observe if the principles of the best practices of software are achieved. However, this tool asks general questions, for example, is the navigation scheme, such as the menu, easy to find, consistent, and intuitive? The question is open to the evaluator’s interpretation of the navigation schemes. It does not clearly refer to the location or the structural form of the menu itself.

The model of Islam et al. (2010) and Islam et al. (2020) called SIDE (Semiotic Interface Sign Design and Evaluation) proposes to evaluate usability problems and the intuitive nature of GUI’s signs; that is, the heuristic model has a semiotic perspective. SIDE has five levels: Semantic, Environmental, Social, Pragmatic, and Syntactic, each determined by topics that, in turn, have attributes. SIDE proposes to evaluate web apps and mobile apps. However, the model does not precisely describe the signs nor propose indicators. Instead, the model proposes questions as follows: Is use of color made effective to design the signs of the interface? From this, it is possible to infer that the color can be an indicator; nonetheless, the model does not specify it. Even so, the model considers quantitative parameters to evaluate the severity of the problem detected.

A Systematic and Generalizable Approach to the Heuristic Evaluation of User Interfaces by Alonso (2018) uses comprehensive taxonomies of usability attributes, context-of-use features, and GUI elements, which, according to the authors, adds depth and structure. Although this research does not have a semiotic approach, authors consider relevant attributes for the GUI’s usability. These attributes are Shape, Size, Orientation, and Color, among others. In addition, they propose dividing the evaluable elements into categories, such as Control, Text, and Images. Finally, an evaluator could evaluate the attributes on a three-level scale: positive, negative, and neutral. These attributes should be indicators of an evaluation model with a Likert scale [0.5], which could increase the evaluation’s accuracy.

A Usability Model of Hypertext based on the Semiotics of C.S. Peirce by Amare and Manning (2006) and Amare and Manning (2016) uses the second trichotomy of the Peirce model, corresponding to the semiotic object, to evaluate the properties of the signs of a GUI. The authors translate Peirce’s Triad of Signs, examining the design properties and adapting them to terminology corresponding to GUI elements. First, the Icon has to do with form and appearance. Second, the Index has to do with the style and particularities of the image to which it refers; it is a concrete fact related to the actions. Third, the Symbol, which gives coherence and meaning to the sign, gives the relationship of belonging and relevance of the sign or the sign’s system; the Symbol relates to experience, intuition, and cultural norms. Finally, the author’s classification of the Triad of Signs on the GUI is relevant to configure a robust evaluation model because their proposal’s parameters are qualitative.

However, those evaluation models are still general and, therefore, can be ambiguous to the evaluator, for he needs to establish specific indicators and metrics to guide him in observing and evaluating the GUI signs. In this sense, the evaluator must identify specific visual attributes; on these attributes, he must locate observable and indivisible indicators. Bertin (1983) provides the key by establishing that a Visual Attribute is a variable described within the framework; it can be represented and printed on a piece of paper of a specific size at a considerable distance for its reading through the use of available graphic means, which have (indicators such as) Size, Tonal Value, Texture, Color, Orientation, and Shape.

TriSigEM Design and Implementation

TriSigEM takes elements from related works and establishes a logical hierarchy between them (see Figure 1); this hierarchy derives a set of metrics. The arrows on the right show TriSigEM construction hierarchy, while those on the left mark the direction of the evaluator’s evaluation and interpretation; TriSigEM allows him to evaluate the degree of usability compliance in implementing some GUI’s Design Patterns.

Source: Authors.

Figure 1 Model's hierarchy. 

TriSigEM has three levels: 1) The Triad of Signs corresponding to the model’s base. 2) The conceptual structure of the model. 3) The metrics of the model.

Level 1. Triad of Signs: model’s base

The designers often design the app’s GUI through a compound GUI pattern. A compound pattern combines two or more patterns into a solution. Also, a GUI design pattern is a composite pattern that allows us to compose objects (the Triad of Signs) into tree structures to represent part-whole hierarchies. Each sign is described in the following (see Table 1).

Table 1  Triad of Signs definitions 

Sign Description
Icon A decorative and informative sign whose function is to augment the user cognition. In defining an Icon, the designer employs metaphors to represent an object of the real world. The types of Icons are as follows: the image that shares sensorial qualities with an object, the diagram that has relational and structural qualities.
Index An indicative sign whose function is to point out. The designer defines an Index through abstractions of the physical cause-effect relationship. The Index types are the following: Signalization: consists in putting a visual mark that allows the user to identify a piece of information. Action: a sign the user requests to trigger an app’s functionality. Reference: a sign facilitating the user to find something in other GUI parts. Finally, Social Code: a sign accepted and recognized without ambiguity by a social group.
Symbol An informative sign whose function is to provide precise information. The Symbol types are the following: Word: the minimal information element. Phrase: an element that provides descriptive information. Text : an element formed by phrases that provide precise information.

Source: Authors, based on Peirce (1974) and Amare and Manning (2016).

Level 2. The structure of the model

TriSigEM is a hierarchical conceptual structure with the following elements: Usability Characteristics → Visual Characteristic → Visual Attribute. First, three Usability Characteristics (see Table 2). Second, five Visual Attributes (see Table 3). Third, three Visual Characteristics and their relationships with Usability Characteristics and Visual Attributes (see Figure 2).

Table 2  Characteristics Definition 

Characteristic Description
Effectiveness It is the accuracy and completeness with which users achieve specified goals when using an app in a given context.
Efficiency Resources expended concerning the accuracy and completeness with which users achieve goals.
Satisfaction It refers to the user’s comfort and acceptability towards an app.

Source: Authors, based on Standardization (2018).

Table 3  Visual Attributes Definition 

Visual Attribute Description
Attractiveness It responds to whether the signs Icon and Symbol have a Visual composition and balance between them. Those signs communicate something to the user, and he should feel attracted by their guidance.
Sympathy It replies to whether the signs Icon and Symbol are pertinent concerning the app socio-cultural context and its purpose.
Minimal Memory Load It answers whether the signs Icon and Symbol have the appropriate degree of abstraction to be recognized and remembered, reducing cognitive effort.
Accuracy It is the accuracy of the Triad of Signs where the Index sign stands out because it triggers the action established by the Icon and Symbol signs.
Feedback Responds to whether the Triad of Signs ratifies the user’s action.

Source: Authors.

Source: Authors.

Figure 2 TriSigEM: Hierarchical Conceptual Structure. 

Consistency. Evaluates whether the composition of the Triad of Signs in the GUI is coherent; that is, if the Triad of Signs is logically related to each other to provide precise information about the app’s functionalities. Therefore, Consistency impacts Satisfaction because if the user gets clear messages, he can accept the app easily. The app achieves Consistency through three Visual Attributes: Attractiveness, Sympathy, and Minimal Memory Load. Attractiveness, because the Icon and Symbol signs communicate something to the user, and he could feel attracted by their guidance. Sympathy, because the Icon and Symbol signs show the socio-cultural context of the app. Finally, Minimal Memory Load, because Icon and Symbol signs should be easy to recognize and remember.

User Orientation. Evaluates whether the Triad of Signs directs the user toward the app’s correct use. The user orientation impacts Satisfaction because if the Triad of Signs gives the appropriate direction, the user can feel comfortable using it. The app achieves User Orientation through three Visual Attributes: Attractiveness, Feedback, and Minimal Memory Load. Attractiveness, because if the Icon and Symbol signs have a suitable composition and balance (in equilibrium, Visual weight), the user will feel comfortable. Feedback, because if the Triad of Signs ratifies the user’s action, he will feel guidance. Finally, Minimal Memory Load, because if the Icon and Symbol signs have the right degree of abstraction to be recognized and remembered, this reduces the user’s cognitive effort.

Operability. Evaluates the correspondence between the Triad of Signs metaphor and the specific app’s functionality in order that the user utilizes the application correctly. Therefore, Operability impacts Effectiveness, Efficiency, and Satisfaction. Effectiveness, specifically Accuracy (prepared with care, accurate, elaborate), because if the metaphor corresponds to the app’s functionality, the user can achieve his goals in terms of using the app. Efficiency, because if the Triad of Signs metaphor is accurate, the designer can reduce the resources needed to describe the functionalities. Satisfaction, because if the user recognizes the functionality through the metaphor expressed by the Triad of Signs, the user can experience comfort. The app achieves Operability through two Visual Attributes: Accuracy and Feedback. Accuracy, because if the Triad of Signs triggers the action established through metaphor, the user can use the application correctly. Feedback, when the Triad of Signs ratifies the user’s action.

Level 3. The metrics of the model

TriSigEM metrics will be described in the following order: six GUI Design Patterns, the relation of the Triad of signs with the Visual Attributes, and the eight indicators, finally, the metrics and the evaluation scale.

GUI Design Patterns and Triad of Signs

The GUI Design Patterns (see Table 4), which implementation corresponds to the evaluation object of TriSigEM, is a composite of the Triad of Signs; then, each sign is related to at least one of the Visual Attributes (see Figure 3), a relation derivate from the definition of Visual Attributes (see Table 3).

Table 4  GUI Patterns Definitions 

Pattern Description
Navigation The user moves and easily accesses the app’s contents and actions.
Search The user finds desired information through the app using a search engine.
Form Set of fields that the user must fill out.
Errors Error messages express in plain text, without codes; pinpoint the problem and constructively suggest a solution. Additionally, they must present a confirmation option before the user commits to action.
Help The app gives the user advice and information about its use and functionalities.
Homepage The app starts loading with information from where its contents are accessed.

Source: Authors, based on Van and Van (2003) and Tidwell (2010).

Source: Authors.

Figure 3 Triad of Signs related to Visual Attributes. 

Indicator and Metrics

Indicator An indicator is the minimal feature evaluable on the GUI’s Triad of Signs (see Table 5).

Table 5  Indicators Definition.  

Indicator Description
Location Refers to a sign in the GUI canvas (or panel).
Size The sign dimension concerning the GUI format.
Color Chromatic expression of a sign.
Orientation Sign variation by rotating it on the axis perpendicular to the GUI canvas.
Texture A filling for a sign in the GUI.
Shape The figure or the exterior delimitation that distinguishes a sign in the graphical interface.
Blurring A treatment on a sign. The higher the blurring level, color, shape, and texture are lost.
Transparency When a sign allows us to see another sign below it; there are different degrees of transparency.

Source: Authors, based on Alonso et al. (2018).

Metric. Eleven questions arising from the relation between Visual Attributes and the Triad of Signs: Visual Attributes → Triad of Signs → Indicator. A question defines a metric when the evaluator asks it for each indicator (see Table 6 and Table 7). Each question has a variable set of indicators associated to it.

Table 6 Questions 1-7.  

Attractiveness (Icon, Symbol)
No. Question Indicator
1 Is the layout used by <pattern> to place graphics and texts appropriate? According to their <indicator>

  1. Location

  2. Size

  3. Orientation

Attractiveness (Icon, Symbol)
2 Are the text and graphics well distributed in the layout? According to their <indicator>

  1. Location

  2. Size

  3. Orientation

  4. Shape

Sympathy (Icon)
3 Do the graphics used by <pattern> cause a positive attitude in the user? According to their <indicator>

  1. Orientation

  2. Shape

  3. Color

  4. Texture

  5. Blurring

  6. Transparency

Sympathy (Symbol)
4 Do the texts used by <pattern> cause a positive reaction in the user? According to their <indicator>

  1. Color

  2. Texture

  3. Blurring

  4. Transparency

Accuracy (Icon)
5 How do you evaluate the abstraction degree of the graphics? According to the information provided for <pattern> by its <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

Accuracy (Symbol)
6 How do you evaluate the abstraction degree of texts? According to the information provided for <pattern> by its <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

Accuracy (Index)
7 How do you evaluate the abstraction degree of the links? According to the information provided for <pattern> by its <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

Source: Authors.

Table 7  Questions 8-11 

Minimal Memory Load (Icon)
No. Question Indicator
8 Can the graphics used by <pattern> be recognized and remembered by their abstraction and action, thus achieving a Minimal Memory Load? According to their <indicator>

  1. Size

  2. Color

  3. Texture

  4. Form

  5. Blurring

  6. Transparency

Minimal Memory Load (Symbol)
9 Do texts return after an action gives answers, and are those appropriate for reading? According to their <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

Feedback (Icon, Index)
10 Do graphics used by <pattern> allows the user to ratify the activity carried? According to their <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

  5. Texture

  6. Form

  7. Blurring

  8. Transparency

Feedback (Symbol, Index)
11 Do the texts used by <pattern> allows the user to ratify the activity carried out? According to their <indicator>

  1. Location

  2. Size

  3. Color

  4. Orientation

Source: Authors.

Evaluation Scale

TriSigEM evaluation scale is Likert’s [0..5], having the interpretation that follows: 0 - not applicable (scale’s neutral element), 1-very poor, 2-poor, 3-good, 4-very good, and 5-excellent. To start with, from the 11 questions applicable to the GUI Design Pattern implementation and considering five as the maximum value of the Likert scale, the evaluator must determine the maximum value for the pattern’s Usability criterion and each Usability Characteristic, Visual Characteristic, and Visual Attribute. Following that, the evaluator must normalize these maximum values in terms of percentage. This normalization will allow him to provide a partial evaluation for each hierarchy: first, Visual Attribute; second, Visual Characteristic; third, Usability Characteristic; fourth, Usability criterion. Then, since the evaluator analyses and evaluates each pattern’s implementation of the compound, given the usability evaluation of each part (a pattern), the evaluator can weigh an evaluation of the whole (pattern compound). To begin, the evaluator must calculate the maximum value for the compound’s usability criterion. Then, normalize the maximum value in terms of percentage. To wrap up, calculate the percentage achieved by the GUI’s compound.

Qualitative interpretation of the TriSigEM evaluation consists of six levels: not applicable, very poor, poor, good, very good and excellent. Let x be the rating obtained by a GUI. Then, if x equals 0, the sign does not exist or is not applicable. Else if x is in the range [10...60], the sign is very poor; on the other hand, if x is in the range [60...70], the sign is poor; on the contrary, if x is in the range [70...80], the sign is good; moreover, if x is in the range [70...80] the sign is very good. Otherwise, the sign is excellent if x is in the range [90...100]. For the Triad of Signs to be considered adequate, they must have a minimum percentage of 60%, exceeding 50% by at least ten percentage points. This scale is huge because it should be conclusive to distinguish apps whose Triad of Signs might be better than those that do not.

TriSigEM Implementation

The TriSigEM implementation is a web form (see Figure 4). First, sections corresponding to the following design patterns: a) Navigation, b) Search, c) Help, d) Form, f) Errors and g) Homepage. Next, each section integrates the questions from Table 6 and Table 7. Finally, each indicator has an options menu with the Likert scale. For example, the evaluator must select one of Likert’s values for the sign’s indicator to a mobile app’s GUI (see Figure 5). The values average determines a score; first, for each Visual Attribute (Accuracy, Attractiveness, Sympathy, Minimal Memory Load, and Feedback) and, subsequently, for each Usability Characteristic (Efficiency, Effectiveness, and Satisfaction). The score accurately guides the evaluator to detect a specific problem and to determine to what extent that problem impacts Usability Characteristics so that it can be adressed.

Source: Authors.

Figure 4  Example questions form 

Source: Authors.

Figure 5  Navigation frequent use 

5. Results Analysis

Based on the TriSigEM elements explained in section 4 and the related works explained in section 3, this section shows a comparison of the following works: Evaluation tool of Turner (2011), SIDE-Semiotic Interface Sign Design and Evaluation of Islam et al. (2010) and Islam et al. (2020), Systematic and Generalizable Approach to the Heuristic Evaluation of User Interfaces of Alonso et al. (2018), Amare and Manning Model (2006) and Amare and Manning (2016) and TriSigEM (see Table 8). This comparison considers the following characteristics: a) heuristic model to evaluate mobile applications, b) semiotic-oriented model, c) qualitative parameters consideration, d) quantitative parameters consideration, f) indicators inclusion.

Table 8  Comparison of Works Related to TriSigEM 

Characteristic Turner Tool SIDE Heuristic Evaluation of User Interface Amare and Manning Model TriSigEM
Apps Evaluating Heuristic Model YES YES YES NO YES
Semiotic-oriented Model NO YES NO YES YES
Qualitative Parameters Consideration YES YES YES YES YES
Quantitative Parameters Consideration YES YES NO NO YES
Indicators Inclusion NO NO YES NO YES

Source: Authors.

TriSigEM, in contrast with Turner’s tool, has theoretical and methodological support in its construction. Questions have clear and explicit wording about what must be evaluated, unlike Turner’s tool, where the questions are ambiguous and vague about what must be observed and evaluated. TriSigEM, like Turner’s tool, starts from a clear and well-defined structure. Also, TriSigEM has a hierarchical structure that determines the degree of usability at any level, from minor structures, such as indicators, to sub-characteristics.

SIDE evaluates the intuitive nature of each sign in the GUI; it focuses on measuring its accuracy concerning the functionality it represents. Nevertheless, the authors must clarify this model’s Sign, Icon, Index, and Symbol. Instead, TriSigEM establishes each sign and defines indicators to observe and evaluate its function in the GUI. With SIDE’s quantitative evaluation, authors suggest the seriousness of the problems implied by an imprecise sign. TriSigEM’s quantitative evaluation allows evaluators to calculate the usability degree regarding Effectiveness, Efficiency, and Satisfaction of the Triad of Signs.

Concerning the Systematic and Generalizable Approach to the Heuristic Evaluation of User Interfaces, the taxonomic proposal of the GUI elements and their properties is valuable. In this taxonomy, the authors identified the evaluable elements and categorized them first by sub-characteristics and later by visual characteristics. TriSigEM coincides whit this proposal in considering evaluable parameters. Both proposals pursue minimum observable elements. We call those elements indicators, and the authors call them attributes. However, only in TriSigEM a metric based in indicators is proposed.

Concerning Amare & Manning, who propose exploring GUI from a semiotic perspective, their main contribution is classifying the app’s GUI signs into the Triad of Signs Icon, Index, and Symbol. However, TriSigEM allows evaluators to explore and test the Triad of Signs. Hence TriSigEM has a semiotic structural base tied to concepts typical of the most classic heuristics. Amare & Manning’s model stays in categorization and website exploration but does not consider measuring quantitative parameters.

A significative TriSigEM contribution not found in other models is its hierarchical structure from Usability Characteristic → Visual Characteristics → Visual Attribute → Triad of Signs → Indicators. Each Visual Attribute was related to the Triad of Signs in implementing GUI Design Patterns, so that the evaluator could punctually recognize and evaluate it, moreover, interpret the evaluation result. The evaluator should be someone other than an expert in semiotics but an expert in GUI design or a Designer of Graphic Communication since TriSigEM specifies metrics in simple questions

6. Conclusion

As a result of the research, our proposal is TriSigEM, a semiotic-oriented heuristic model that evaluates the GUI Usability of any app. The model has indicators that allow the punctual evaluation of interface signs. The measure provided by the model makes it possible to improve the app GUI and, eventually, the functionalities layer of the app as a whole.

Peirce’s semiotics theory, Amare & Manning’s work, Systematic and Generalizable Approach, and Neil Turner’s work substantiate TriSigEM. Amare & Manning’s research provided a taxonomy based on Peirce’s model in its second trichotomy, corresponding to the semiotic object. The Systematic and Generalizable Approach sums up eight indicators associated with Amare & Manning’s taxonomy; also, these indicators were related to metrics that qualify the GUI’s sign. Finally, Neil Turner’s work provided ten observable app sub-characteristics that coincide with GUI Design Patterns: Navigation, Search, Form, Errors, Help, and Homepage.

Heuristic Model. Unlike related works that propose heuristics in the form of sentences or suggestions, TriSigEM heuristics are specific questions about a subset of the eight indicators. That allows the evaluator a less subjective interpretation when observing the Triad of Signs. As a result, characteristics evaluations can provide the grade of compliance on the GUI’s Usability. Furthermore, the evaluator applying TriSigEM will determine adjustments or changes in the Triad of Signs’ indicators impacting GUI’s usability hierarchy. The GUI designer using TriSigEM will ensure a good composite of the Triad of Signs because it will keep the model’s hierarchy in mind.

Semiotic Dimension. TriSigEM proposes eight Indicators observables in the Triad of Signs and defines eleven questions. It ensures that these questions are straightforward to comprehend and interpret for the evaluator. TriSigEM’s detail level we did not find in other reported models’ descriptions.

GUI Design Patterns. TriSigEM provides a new dimension to Usability compliance from the Triad of Signs observation and evaluation. In the medium term, GUI Design Patterns could integrate Triad of Signs specifications, positively impacting users adopt the apps.

Quantitative Parameters. TriSigEM allows the evaluator to conduct a quantitative evaluation of GUI Usability in apps, revealing to him the nature and degree of an indicator affectation on the GUI Usability. These features we did not find in other models.

In a future work, the results of case studies applying TriSigEM to some apps implementing GUI Design Patterns will demonstrate its effectiveness. Finally, we plan to conduct other case studies to test the TriSigEM’s effectiveness in other GUI Design Patterns and elaborate on some examples of the specification of the Triad of Signs, observing in some of them its impact on user acceptance and adoption of the apps.

7. References

Akowuah, F., & Ahlawat, A. (2018). Protecting sensitive data in android SQLite databases using TrustZone. 2018 International Conference on Security & Management, National Science Foundation; 2018: pp. 227-33. [ Links ]

Alonso-Ríos, D., Mosqueira-Rey, E., & Moret-Bonillo, V. (2018). A systematic and generalizable approach to the heuristic evaluation of user interfaces. International Journal of Human-Computer Interaction, 34(12), pp. 1169-1182. [ Links ]

Amare, N., & Manning, A. (2006). Back to the future: A usability model of hypertext based on the semiotics of CS Peirce. 2006 IEEE International Professional Communication Conference (pp. 47-56). IEEE. [ Links ]

Amare, N., & Manning, A. (2016). A unified theory of information design: Visuals, text and ethics. Routledge. [ Links ]

Aziz, N. S., & Kamaludin, A. (2018). Measuring Website Usability Construct as Second Order Construct in Website Usability Model. Advanced Science Letters. 24, pp. 7727-7731(5). American Scientific Publishers. doi:https://doi.org/10.1166/asl.2018.13007Links ]

Aziz, N. S., Kamaludin, A., & Sulaiman, N. (2013). Assessing web site usability measurement. IJRET: International Journal of Research in Engineering and Technology, 2(9), pp. 386-392. [ Links ]

Barday, K. A. (2018). Data processing systems and methods for operationalizing privacy compliance via integrated mobile applications. Google Patents. [ Links ]

Bertin, J. (1983). Semiology of graphics. University of Wisconsin press. [ Links ]

De Souza, C. S. (2005). The semiotic engineering of human-computer interaction. MIT press. [ Links ]

de Souza, C. S. (2018). Semiotics and human-computer interaction. The Wiley handbook of human computer interaction, 1, pp. 33-49. [ Links ]

Fernández Martínez, A. (2011). WUEP: un proceso de evaluación de usabilidad web integrado en el desarrollo de software dirigido por modelos. [ Links ]

Granlund, Å., Lafrenière, D., & Carr, D. A. (2001). A pattern-supported approach to the user interface design process. International Conference on Human-Computer Interaction: 05/08/2001-10/08/2001. [ Links ]

Hawley, M. (2010). Rapid Desirability Testing: A Case Study. Accessed online, 15(04), p. 2010. [ Links ]

Islam, M. N., Bouwman, H., & Islam, A. N. (2020). Evaluating web and mobile user interfaces with semiotics: An empirical study. IEEE Access, 8, pp. 84396-84414. [ Links ]

Islam, M., Ali, M., Al-Mamun, A., & Islam, M. (2010). Semiotics explorations on designing the information intensive web interfaces. Int. Arab J. Inf. Technol., 7(1), pp. 45-54. [ Links ]

Joachims, T., Granka, L., Pan, B., Hembrooke, H., & Gay, G. (2017). Accurately interpreting clickthrough data as implicit feedback. Acm Sigir Forum. 51, pp. 4-11. Acm New York, NY, USA. [ Links ]

Peirce, C. (1974). Clasificación de los Signos. En la Ciencia de la Semiótica. Nueva Visión, Buenos Aires. [ Links ]

Standardization, I. O. (2018). ISO 9241-11: 2018-Ergonomics of Human-System Interaction-Part 11: Usability: Definitions and Concepts. [ Links ]

Statista Corporation. (2022, november). Statista. Retrieved mars 10, 2023, from https://www.statista.com/Links ]

Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design. “O’Reilly Media, Inc.”. [ Links ]

Turner, N. (2011). A guide to carrying out usability reviews-UX for the masses. UX For the masses. [ Links ]

Van Welie, M., & Van der Veer, G. C. (2003). Pattern languages in interaction design: Structure and organization. 3. Proceedings of interact. [ Links ]

Werkmeister, T. (2021). Development of User-Centred Interaction Design Patterns for the International Data Space. In M. M. Soares, E. Rosenzweig, & A. Marcus (Ed.), Design, User Experience, and Usability: UX Research and Design (pp. 144-155). Cham: Springer International Publishing. [ Links ]

Received: February 12, 2023; Accepted: April 25, 2023; Revised: October 01, 2023

Edna P. Quezada-Bolaños

Originally from Mexico City. Ph.D. in Information Design and Visualization from the Metropolitan Autonomous University, Campus Azcapotzalco, Mexico City, in Human-Computer Visual Interaction Design. Master in Creativity for Design from the School of Design of the National Institute of Fine Arts, EDINBA, Mexico. Professor at the National Polytechnique Institute, Mexico City. Research interests in Virtual and Augmented Reality, User Interface (UI), Project Management and Innovation, Heuristic Evaluations, and Digital Semiotics. She has participated as a speaker at MexIHC International Congress, Mérida 2018; FORMA International Congress, Cuba 2019; UAM-Azcapotzalco Methods and Ways Colloquium; UAM-Xochimilco Conference on Creativity and Innovation; LASERA 2019 Conference “Visual Resources for the dissemination of scientific topics” and “Development strategy of apps enriched with augmented reality for the learning of NMS students of the IPN with the focus on Challenge-Based Learning, in the context of education 4.0” and the Fourth Colloquium on Methodology in the Graduate Design Methods and Manners “Presence of the signs triad in graphic interfaces of mobile applications.”

Lizbeth Gallardo-López

Ph.D. in Computer Science with a specialty in Information Systems from the Joseph Fourier University, Grenoble, France. Training as a Bachelor of Computer from the Metropolitan Autonomous University, Campus Iztapalapa, Mexico City. Professor-Researcher in the Systems Department, Division of Basic Sciences and Engineering, at the Metropolitan Autonomous University, Campus Azcapotzalco, Mexico City. Research interests: Information Visualization, E-Learning, Health-Care Computing, and Software Processes. She has published in magazines like Research in Computing Science, Journal of Scientific and Technical Applications, Zincografía, and Tecnología y Diseño. In addition, she has participated in Congresses like “Avances en Interacción Humano-Computadora”, “De los Métodos y la Maneras”, and “Conférence en Recherche d’Information et Applications.”

Creative Commons License This is an open-access article distributed under the terms of the Creative Commons Attribution License