EMOINEC: Exploring the Application of the EMOINAD Guide to an E-commerce Context

Abstract

This article presents an adaptation of the process of construction of the EMOINAD guide to the context of electronic commerce, with which it is expected to obtain a set of guidelines that support interface designers in their work to build pleasant and usable sites that consider the emotions of the clients. To do this, an exploration is made of the studies related to interface design guidelines and user experience guidelines for e-commerce, then the methodology of the EMOINAD guide is presented to finally make the adaptation in the last section. The validation of the resulting EMOINEC guide is left for future work. Through the development of the work presented in this article, it is concluded that the methodology of the EMOINAD guide is versatile and can be applied to different contexts.

1 Introduction

One of the most important problems that companies face today is to maximize their profits through a website; However, the definition of a “good website” is not easy as it depends on the services to be offered, general purpose, and final clients [1].

The interface appearance and navigation of a website can affect the client in different ways, because if it is inefficient, people will have difficulties in carrying out their daily activities and more mistakes will be made [2]. This fact leads to increased levels of frustration and stress; without forgetting that a poor interface design has a huge impact on the financial cost of organizations and in some cases, it can even compromise the security of its users or the public in general. On the other hand, the benefits of having a good interface design are countless as the reduction of training costs, and most importantly, the user satisfaction is increased [3].

Due to the above, several researchers have focused on providing guidelines, principles and heuristics to facilitate the task of designing interfaces and guaranteeing a better response from the customer. These studies could be enough if what is sought is to have a starting point for the design of an e-commerce; However, if they are analyzed in depth, it can be perceived that they are not recent investigations and that the emotional perspective is not addressed in a deeper way. Bidin and Lokman [4] mention that the emotions of users have been what has made many products successful in the market, and that if a product such as a website can not attract visitors at first sight, it will go out of business even if it is useful and convenient to use. Also authors such as Pengnate [5] and Cyr [6] mention that less attention has been paid to affective aspects although the affective dimension has been explored during the last years [7]. Furthermore, emotional engagement has been found to impact and influence decision making, perception, attention, performance, users memories of product and cognition [8].

At this point, it is very important that the guidelines that are proposed for the design of e-commerce interfaces, not only incorporate aspects of Human-Computer Interaction (HCI) and User Experience (UX), but also consider how to design to evoke positive emotions.

It is for this reason that the EMOINAD (Emotive Interfaces for Attention Deficit) and EMOVLE (Emotive Interfaces for Virtual Learning Environments) guides have been created, each of which tries to contribute to the design of emotive interfaces for attention deficit disorder and for virtual learning environments, respectively [9, 10]. These guides are a compilation of the best practices in the field of user experience seeking to incorporate the emotional factor within the design in order to obtain not only functional but also attractive interfaces to the user. The guidelines, principles, and patterns that make up these guidelines, despite having been applied to specific environments, are transverse in nature and could be applied in different contexts. These guides with the studies analyzed, turn out to be a good starting point to gather the best practices in the context of e-commerce.

The purpose of this article is to make a proposal to adapt the construction methodology of the EMOINAD guide to an e-commerce environment. To do this, an exploration of the construction methodology is carried out and a detailed analysis is made of each element that makes it up to establish if it could be adapted or applied in the established context. Once this process is completed, a set of guidelines is made, forming a new guide called the EMOINEC guide (Emotive Interfaces for E-Commerce) which also incorporates some principles and guidelines focused on electronic commerce to give to the guide a greater depth.

The organization of this article is as follows: Sect. 2 explores the studies related to the design of interfaces for electronic commerce. Later, in Sect. 3, the methodology used for the construction of the EMOINAD guide is described and in Sect. 4 the proposal is made to adapt the methodology for the creation of the EMOINEC guide. Finally some conclusions of the work are presented.

As a result of this article, it will be obtained a preliminary set of guidelines that can be put into practice in the interface design of an e-commerce site and one example of one of the heuristic that is part of the EMOINEC guide. This is expected to contribute to the lack of specific guidelines for this context that consider the emotional aspect of the customer.

2 Guidelines for E-commerce Interface Design

Among the research related to the design of e-commerce interfaces are the Huang & Benyoucef’s studies who have compiled a set of design principles grouped into five categories: usability, information quality, system quality, service quality, and playfulness [3]; For its part Stefani [11], considers that in the design process of the e-commerce should be considered the characteristics and sub-characteristics proposed by the ISO 25000 such as accuracy, consistency, functionality, understandability, and learning.

Fang and Salvendy [12] are more specific and list the 19 most important customer-centered design rules; Bonastre and Granollers [13] carry out a compilation of heuristics in e-commerce sites grouped according to the stage of the purchase decision process, and, finally, and among the latest research, there are those of Diaz et.al [14] and Rusu et.al [15, 16] who propose 12 usability heuristics for e-commerce that consider the cultural aspect, and a comparative study of user perception in three sets of usability heuristics, respectively.

Wang and Emurian [17], in turn, propose a conceptual framework of the characteristics that induce confidence, which belong to three dimensions: visual design, content design and social-cue design.

Barnes and Vidgen [18], relate the quality aspects of e-commerce to the evaluation criteria of the WebQual method, an instrument that establishes the categories of usability, information and service interaction. Nah and Davis [19] establish the concept of web usability as the ability to find one’s own way through the web to locate the desired information, to know what to do next and most importantly, to do it with minimum effort. This is how they link the usability of e-commerce with the concepts of ease of navigation and search.

Lokman and Noor [8] present the concept of Kansei engineering applied to e-commerce websites and also establish the importance of affection and emotion. They declare the notion of the Perceived Affecive Quality (PAQ) as a primary affective reaction that the user obtains as the first impression of a website. Dorman [20] relates color and emotion in e-commerce systems and presents the importance of seducing consumers and evaluating emotions. Cyr [6] shows the relationship between navigation design, visual design and information design with trust, satisfaction and fidelity. It also establishes the characteristics of trust in a website, which are: reputation of the seller, quality of service, social presence, accuracy of online information and reputation of the firm. Basso [21] makes a model of trust in e-commerce contexts where it describes activities related to the formation of trust. Sheng [22] introduces the Stimulus-Organism-Response paradigm (S-O-R) which proposes that stimulus of the environment affects the internal states of the users which in turn influence their behavior and response.

Chandler and Hyatt [23], also perform a compilation of case studies and rules for a successful website and finally Beyer and Hotltzblatt [24] speak of contextual design as the process centered on the client that tries to understand how people work and that includes techniques that allow working in interdisciplinary teams providing explicit steps and deliverables.

All the studies described above serve as a starting point when building interfaces that take into account the user experience and that consider general design aspects; However, a structure and methodology is necessary to migrate all this information into an easy-to-use guide. Below is each of the steps of the EMOINAD methodology in which it is expected to migrate all the information gathered from the studies carried out.

3 The EMOINAD Guide Construction Process

Before adapting the methodology of creating the EMOINAD guide to the e-commerce context, it is necessary to explore each of the activities that comprise it. Figure 1 shows the different processes and activities that comprise it, which are described below.

• 1. Bibliographic review of the context

  • To define the key areas of the context: It is necessary to delimit the study in terms of its key areas. In the case of the EMOINAD guide, the key areas are design for emotion, child-centered design and attention deficit disorder.

  • To explore the bibliography for each area: After delimiting the key areas it is necessary to carry out a bibliographic exploration of each of them in order to know the most up-to-date studies.

• 2. Information Selection process

  • To define the selection criteria: After obtaining the most current and relevant studies in the areas in which the guide is framed, it is necessary to establish criteria that allow filtering the information and to guarantee the adaptation of the information to the context.

  • To apply the criteria to the information: Once the criteria are established, the information is classified according to the criteria to obtain the principles, heuristics and guidelines that should be considered in the design of interfaces.

• 3. Guide construction

  • To define the categories according to the context: It is important to classify the resulting information into sections that allow not only a possible extension of the guide but also facilitate its use. In the case of the EMOINAD guide, four categories were established: layout, navigation and interaction, content and performance. These categories will depend on the context.

  • To define the template: With the established sections and the information relevant to each section, an efficient and effective mechanism is chosen to record this information. In the case of the EMOINAD guide, the template of the word wide web consortium (W3C) was chosen and then the application of the guide to cards for a more interactive application was explored.

  • To record the principles in the guide: The information is organized in the template or in the chosen mechanism to socialize the guide.

• 4. Guide Evaluation and feedback

  • To define the types of evaluation according to context: Depending on the impact and the users that will use the guide, the experts that support the guide should be defined and the type of evaluation that will be carried out with each of them. In the case of the EMOINAD guide, 3 experts were defined: experts in creation of guidelines, experts in the treatment of attention deficit disorder and interface designers. A survey was conducted with the first experts to obtain feedback on whether the guide was complete and understandable. With experts in the treatment of attention deficit it was decided to hold a meeting in which the guide were exposed to validate that it did not contain inaccurate information regarding the attention deficit. Finally, with the last group of experts, the interface designers, a workshop was held for the construction of a prototype where they had to apply the guidelines of the guide and evaluate if the guide had been useful or not.

  • To plan the case studies: It refers to the detailed planning of each evaluation, logistics, communication with the experts and definition of spaces and times as well as the construction of the corresponding tests.

  • To develop the case studies: To execute the plan that was defined in the planning.

  • To restructure the guide based on the analysis of results: With the results obtained, generate a new version of the guide and repeat the validation if necessary.

Fig. 1.

EMOINAD guide construction process.

After reviewing each of the steps in detail, we proceed to the next phase, which consists of applying each of the processes in the context of electronic commerce. This process is done in the next section.

4 The EMOINEC Guide: The Application of the EMOINAD Guide Creation Process to an E-commerce Context

In order to adapt the EMOINAD guide to the context of e-commerce, it is necessary to start with the methodological construction process described in the previous section. In this way we proceed to retake each of the activities and apply the process in the e-commerce context. Given that the intention and scope of this article is to make a first approximation of the EMOINEC guide, only the adaptation of the process in the first three phases of the methodology will be presented. Validation will be left for future work.

The following describes each of the phases and how they could be adapted to create the EMOINEC guide.

• 1. Bibliographic review of the context

  • To define the key areas of the context: The key areas are: design for emotion and design for e-commerce.

  • To explore the bibliography for each area: The theories for design for emotion for interfaces defined for the EMOINAD guide are also valid for e-commerce, so they will be taken into account together with the bibliographic review presented in the Sect. 2.

• 2. Information Selection process

  • To define the selection criteria: The criteria chosen for the selection of information will be:

    • Updated information (published during the last 10 years).

    • Information without ambiguities.

    • Applicable to an e-commerce environment.

  • To apply the criteria to the information: When applying the criteria described in the previous section, a series of principles and heuristics are obtained. These are summarized below:

    • Key area 1: Design for emotion

      • $*$ Take into account aspects such as typography and color theory considering contexts and cultures. This directly affects the intrinsic motivation.

      • $*$ Show personality, that is, that the page is friendly, friendly, or humorous. This encourages creativity.

      • $*$ Include delighters (surprises, rewards, etc).

      • $*$ Beware of attention grabbers that are unnecessary and distracting.

      • $*$ If multimedia are used as videos, take into account the segmentation, that is, that they are not too long but can be visualized quickly.

      • $*$ Use visual narratives to encourage flow and engagement.

      • $*$ Use multimedia elements to provide context, show relevance and encourage curiosity. Support self-expression through personalization to subscribe, follow the page and share content.

      • $*$ Show and reward progress

      • $*$ Consider connectivity since it is the third pillar of the theory of motivation.

    • Key area 2: Design for e-commerce

      • $*$ Show obvious navigation and logical hierarchy.

      • $*$ Allow filters by categories.

      • $*$ Have a search box for products and information and allow advanced search, as well as the refinement of the search.

      • $*$ Present relevant results in the search of information.

      • $*$ Show guidance elements, progress indicators and site maps.

      • $*$ Present elements that direct attention and offers and products correctly announced.

      • $*$ Show the number of visitors of the page.

      • $*$ Categorize products in a way that is meaningful to regular customers and the depth of the categories should be no more than 3.

      • $*$ Present the information of the products in an appropriate format, in a precise, informative, convincing, updated, easy to remember and with added value. Also use images in good resolution and complete where you can estimate the size. Take care that there are no broken links.

      • $*$ Do not eliminate products that are out of stock.

      • $*$ It must have maximum 3 clicks to find a product.

      • $*$ Show product availability indicator.

      • $*$ Include reviews and scores for each product, as well as allow comments on the reviews of other customers. To do this, participants must be encouraged to comment and share the content of the page, generating a spirit of community.

      • $*$ To encourage participants to express their experiences, knowledge and interests, such as the Twitter “Like” button.

      • $*$ People who give their opinions should present their information along with a photo of their social networks to provide more credibility.

      • $*$ Include tools for product comparison.

      • $*$ Submit order charges, taxes, shipping costs and shipping dates

      • $*$ Show recommended products and products related to the selected product.

      • $*$ Offer monetary and non-monetary rewards based on the client’s performance.

      • $*$ The shopping cart must always be accessible.

      • $*$ Show a wish list option.

      • $*$ Provide assistance information in the purchase process.

      • $*$ Divide and show logical steps for the purchase process.

      • $*$ Carry out a short and simple registration process.

      • $*$ Present different delivery alternatives as well as different payment options and different ways to complete the order. Likewise, the costs and discounts applied before the approval of the purchase must be shown.

      • $*$ Show security logos.

      • $*$ Inform the level of security when paying by credit card.

      • $*$ Send a confirmation e-mail after the order.

      • $*$ Allow to track the status of an order from the client’s account and manage the orders from the website.

      • $*$ Allow the return of an item from the website.

      • $*$ Reasonable response time as well as short waiting time in searches.

      • $*$ Provide an exciting and consistent interface style with an innovative and attractive image

      • $*$ Allow the personalization of the information addressed to the client.

      • $*$ Possibility to be a VIP client or to have a loyalty program.

      • $*$ The website should be simple and easy to use.

      • $*$ Allow the client to leave the site at the time he/she requires it.

      • $*$ Prevent the user from making mistakes and help in the recovery of errors.

      • $*$ Allow the accessibility of all users.

      • $*$ Keep the conventions of the real world.

      • $*$ Avoid the horizontal scroll and the width of the page should be less than the browser.

      • $*$ The texts in the links and buttons should be descriptive and clear.

      • $*$ In the shopping cart page, provide a link that directs the customer back to the page he/she left for continuing the shopping.

      • $*$ There must be coherence between systems and cultural aspects.

      • $*$ Application of page design techniques (e.g., white space and margin, strict grouping, visual density, etc.)

      • $*$ Use of synchronous communication media (instant messaging, chat lines, video telephony, etc.).

      • $*$ Provide the customer with the privacy policy, as well as the return policy, shipping, etc.

      • $*$ Provide a security certificate from an external company.

      • $*$ Present visible contact information during the purchase process, as well as provide different forms of contact depending on the customer’s need.

      • $*$ Submit a section of frequently asked questions.

      • $*$ Answer comments and concerns.

      • $*$ Provide a safe and reliable appearance.

• 3. Guide construction

  • To define the categories according to the context: Given that there are numerous classifications related to the elements that make up the e-commerce experience, the one of Bonastre and Granollers [13] (based on the stages of the Buying Decision Process described by Engel et al. [25]) was chosen for considering the user experience in their studies. This classification is presented in Table 1.

  • To define the template: The template to be used will be an adaptation of the W3C, which contains the following sections:

    • (a) Number and name: The heuristic is assigned a name that is clear and concise and an identification number.

    • (b) Intention: The purpose of the heuristic is exposed.

    • (c) Examples: Practical cases of the application of the heuristic.

    • (d) Related resources: In case there are templates or complementary material.

    • (e) Key terms: Explanation of specialized terms, if necessary.

  • To record the principles in the guide: After grouping the principles according to the categories presented in the step to define the categories according to the context, a series of heuristics are obtained which are recorded in the defined template. One of the resulting heuristics of this process is “Product Visualization”, which belongs to the stage “Information Search”. This heuristic compiles all the information related to how the information of the products promoted on the e-commerce website should be presented and is shown in Table 2.

Table 1. Clasification proposed by Engel et al. [25]

Table 2. Heuristic: Product Visualization

Fig. 2.

modusnutrition.com screenshot

Fig. 3.

rebeccaatwood.com screenshot

5 Conclusions

• Many of the authors who compile interface design guidelines do not take into account the emotions of the users and most of their studies are not updated, so it is necessary to group the latest research in one place to facilitate the work to the interface developers.

• Emotions are decisive when making decisions so to consider the emotional aspect in the process of buying electronic commerce is an important and innovative work.

• The methodology for creating the EMOINAD guide is transversal enough to be applicable to other contexts. This article showed an example of application of this guide in an e-commerce environment.

• It is important to perform the validations of the EMOINEC guide to verify if the guidelines they contain are useful, meaningful and if they facilitate the work to the developers.