Keywords

1 Introduction

With the increase of users using the internet, it has been necessary for companies to become interested in aspects of design that capture consumer attention in order to persuade them and generate loyalty with their products [1].

The importance of good design is that it can increase the success of a system and can greatly improve the consumer intention to return to the website, as well as his/her trust and performance [2,3,4,5,6]. On the other hand a bad design can affect negatively and, in the case of commercial pages, can damage the whole corporate image [7,8,9,10]. With this goal in mind, for many years emphasis was placed on applying a user-centered design taking into account ergonomic recommendations or golden rules [1, 11, 12]. These recommendations focused primarily on reducing the cognitive load of users when interacting with a system and performing tasks [1]. In this way human computer interaction was conceived and evaluated under the usability approach and for this reason many of the studies have focused on functionality and usability, leaving aside what users felt when they interact with the system [1, 13].

Norman and Lockner state that new systems should consider complementing their functionality by injecting fun and pleasure into people’s lives as well as conveying feelings through the interface design features; however achieving interfaces that are both intuitive and fun are a challenging task [1, 12, 14].

In 1991, it began the interest to explore the power of metaphorical and emotional interfaces, since artists and designers have applied metaphors to different systems, objects, and works of art due to it was possible to transmit certain sensations or emotions to viewers that could not be described with only words [15]. In this sense, emotion was identified as a crucial indicator of user preferences and the concept of emotional design took force in its application to the design of everyday objects and by studies that established that the emotional design works better than the usable design; however, despite all the benefits described and the innumerable products successfully developed, these theories of emotional design have not been directly implemented in the educational environments [16, 17]. Up to now, incipient research has been found in relation to emotional design applied to graphs and multimedia lessons with the main evidence coming from authors such as Plass and colleagues [18, 19]. Other representative studies in this area are described in the research of Angela Villareal, et al. in which are detailed the ideas from Alan Clarke, Daryl Hancock, Um, Plass et al., Dorian Peters between others [20].

Alan Clarke establishes principles for the construction of computer-based learning materials in which includes aspects such as the use of text, color, graphics, multimedia, organization of content and how to arrange the elements on the screen in this type of materials [21].

Um, Plass et al. mentions two methods to induce positive emotions in multimedia learning: through color combinations and through visual forms. For each of these methods, there are guidelines to achieve the goal of promoting positive emotions in the student [22].

Dorian peters establishes 3 categories to design emotion in learning environments: creativity, motivation and commitment. For each of these categories establishes a series of strategies that can be used for the construction of interfaces for learning [23].

Linking emotion design to education or especially, to virtual learning environments (VLE) could not only help students to evoke emotions, but also to reduce the feelings of loneliness and isolation that lead to dropping out the virtual courses.

At this point the EMOVLE Guide (EMOtive Virtual Learning Environment) was consolidated as a tool that would allow developers to have a starting point for designing interfaces for virtual learning environments. The guide was built through a set of guidelines that seek to increase the creativity, motivation and engagement of the learner and these guidelines are supported on techniques that deal with fundamental aspects of design such as typography, color, arrangement of elements on the screen among others.

The aim of this research was achieved through the collection of various studies and the organization of the state of the art of design proposals that consider the affective issue in the construction of interfaces. Subsequently, the studies of Virtual Learning Environments were contemplated from the emotional perspective and were analyzed to determine the limitations to be considered in the developed guide. Finally, a guide was developed that includes the studied principles of emotional design and that considers the limitations detected in the VLEs. Based on the proposed guide, an assessment was made based on two approaches, the first one related to the evaluation that the users made of the guide after having created the interface prototypes, and the second one, according to the comparison of the guidelines used against the EMOVLE Guide to verify whether or not they were implemented correctly. After evaluating the guide, important results were obtained from users who rated the guide as useful, interesting, and a document to be used in later developments. This article mentions the process of building the guide, its application, evaluation and results.

2 EMOVLE Guide Construction

The designed guide is made up of constructs, guidelines and techniques. Techniques are strategies that complement the guidelines and the guidelines help to reach the constructs. The relationship of these three terms is presented in Fig. 1 and the description of each of them is described below.

Fig. 1.
figure 1

Elements of the EMOVLE Guide

Full size image

2.1 Constructs

The constructs were extracted from the classification proposed by Dorian Peters, and correspond to the three aspects to be taken into account for the inclusion of the emotional factor within the interface design of virtual learning environments [23]. According to the author, to evoke emotions in the design, it is necessary to consider 3 key aspects or constructs: creativity, motivation and engagement.

Creativity. Author Susan Winschenk [24] suggests that if a developer wants to design to support creativity, it must be first identified the kind of creativity. In her studies she mentions four types of creativity: deliberate cognitive, deliberate emotional, spontaneous cognitive and spontaneous emotional. Each of the types are described below.

Deliberate cognitive. Require time and a big knowledge. The interfaces should facilitate access and management of these two resources.

Deliberate emotional. In order to promote this kind of creativity, calm should be encouraged. It has to be taken into account not to exaggerate notifications and to limit the distractions.

Spontaneous cognitive. Design must focus on unconscious processing under the theory that problems need to be forgotten to allow the mind to make new connections.

Spontaneous emotional. It is the most difficult type of creativity to design but it should be considered the open space design.

Motivation. People do not always feel motivated to learn all the time. Some authors recommend punishment and reward, but contemporary psychologists and educators have written whole books dedicated to revealing how problematic these approximations can be. The advice given to capture motivation is to ask not how people can be motivated but how the ideal conditions can be created for people to motivate themselves, which leads to two types of motivation: intrinsic motivation and extrinsic motivation.

Engagement. It is the first emotional dimension of learning as instructors require the attention of their learners and seek to maintain this attention during the learning process. Through engagement students will learn better and enjoy more of the experience. The strategies that make up this classification are those that direct visual attention, provide relevance, stimulate curiosity, and provide the right level of challenge.

2.2 Guidelines

The guidelines have been constructed in order to facilitate to the developer the work of designing interfaces of emotive VLEs that promote the positive emotions in the apprentices and make reference to strategies or heuristics that must be implemented in the design of interfaces. Each construct groups a number of guidelines that can be put into practice according to the specific needs. These groups can be seen in Table 1.

Table 1. Guidelines list and the constructs to which they belong
Full size table
Table 2. Description of the guidelines template. Structure adapted from the proposal of the W3C
Full size table

To describe each guideline, the World Wide Web Consortium (W3C) guideline description template was used as an international community seeking the unification and development of web standards. Table 2 presents the structure for the description of the guidelines, which corresponds to an adaptation of the template proposed by W3C.

2.3 Techniques

Techniques are basic principles that should be considered when designing any interface and cover general aspects such as color, the layout of the elements on the page, among others.

In these techniques converge the concepts of different recognized authors in the field of user experience, emotional design and usability principles. These studies and the list of the techniques that constitute the guide EMOVLE is presented in Table 3.

Table 3. List of techniques and related studies
Full size table
Table 4. Description of the technique template. Structure adapted from the proposal of the W3C
Full size table

These techniques provide basic information, which allows the EMOVLE Guide to be easily extended with other techniques deemed appropriate.

To describe each one of them, the structure in Table 4 was proposed based on the W3C description template.

Each technique supports one or more guidelines giving greater detail in the application process and, in turn, one technique can complement others. For example, the guideline Set a Positive Mood can be extended by the techniques Use of Color, Use of Typography and Use of Simplicity due to color as typography and simplicity help to reach a good mood on the user. At the same time a technique as Use of Typography can be complemented by other technique as the technique Use of Color due to one typography with an specific color can give a different message than the same typography with another color. The way in which guidelines and techniques are linked is seen in Table 5 and the relationship between techniques in Table 6.

Table 5. Constructs - Guidelines - Techniques relationship
Full size table
Table 6. Relationship between techniques
Full size table

Table 7 show the description of one guideline and Table 8 presents the description of one of the techniques.

Table 7. Guideline: leverage the cathedral space
Full size table
Fig. 2.
figure 2

BalsamiqMockups page

Full size image
Fig. 3.
figure 3

Matlab screenshot

Full size image
Table 8. Technique: use of graphics and multimedia
Full size table
Fig. 4.
figure 4

Livemocha example screenshot

Full size image
Fig. 5.
figure 5

Example of use of graphs in learning

Full size image

3 Application of the EMOVLE Guide

While the guide is primarily intended for Virtual Learning Environments, it is not exclusive and could be applied to other types of interactive systems. In order to implement the guide, it is necessary first to establish what type of environment is being built, the target audience and define what kind of construct (creativity, engagement, motivation) the system intends to reach in order to delimit the guidelines that will be applied in the design process. Ideally, the greatest number of guidelines should be used, pointing to the three constructs; however depending on the time and the developer resources, only a few could be applied.

Once the guidelines that are to be applied are chosen then it is possible to drill down each one by reading the section of the techniques that are listed in the Technique section of each guideline.

4 Development of Non-functional Prototypes

The guidelines and techniques described in the guide have been compiled in order to facilitate the work of the developer and designer when building interfaces of a Virtual Learning Environment. For this reason, users with this profile were chosen to develop non-functional prototypes based on the EMOVLE guide and to evaluate these guidelines according to the experience gained. The detailed information of the sample of participants, the process that was followed to carry out the prototyping activity and the obtained prototypes are described below.

4.1 Selection of Participants

For the sample, 17 students of the seventh semester of the degree of Computer Engineering of the Institución Universitaria Colegio Mayor de Cauca (Colombia) were chosen. They were between 18 and 28 years of age and realized the activity as part of the course of Human Computer Interaction. This profile was chosen since the developed guide is implemented to be used by users knowledgeable in the subject of software development so that it facilitates the work of constructing interfaces of Virtual Learning Environments.

4.2 Prototyping Process

Once the participants were chosen, the activities described in Table 9 were presented. The target audience, the subject of the course and the tool in which the non-functional prototype was developed was the choice of each participant. It is important to clarify that depending on the type of lesson and the target audience some guidelines may or may not be taken into account; however, the more number of guidelines should be put into practice and each of them should be developed according to the EMOVLE guidelines.

Table 9. Description of activities
Full size table

After the prototype development, the students answered an evaluation related to the ease of use of the guidelines and their applicability within the interface design process.

4.3 Obtained Prototypes

In Figs. 6, 7 and 8 are presented some prototypes obtained by the students. Figure 6 identifies the use of two guidelines: Use Story and Narrative and Support Social Learning. The first guideline is perceived in the unit that was followed in the interfaces when using elements of a classroom such as books and the fact that all the content of the chat is displayed within a board. The second guideline is shown in the possibility of interacting with other apprentices and sharing comments.

Fig. 6.
figure 6

Prototype 1 - Student 1

Full size image

In Fig. 7 another interface proposal is shown, which, like the previous one, makes use of the story and narrative by placing a class board and some background drawings. The proposal of Fig. 7 emphasizes the Use of Color and the use of guidelines such as Beware of Primal Attention Grabbers through the implementation of a simple interface. Finally in Fig. 8 an interface is shown where the learner can share the videos of the course through the links of social networks which shows the Support social Learning guideline and the Use Multimedia guideline.

Fig. 7.
figure 7

Prototype 1 - Student 2

Full size image
Fig. 8.
figure 8

Prototype 1 - Student 3

Full size image

5 Validation of the EMOVLE Guide

The EMOVLE guide was evaluated under two different approaches: the first one, from the students’ point of view according to the answers obtained in the evaluation of the guide and the second one, according to the expert point of view validating that each guideline put in practice has been applied correctly. The results of each of the approaches are presented below.

Table 10. Evaluation results of the EMOVLE guide
Full size table

5.1 EMOVLE Guide Evaluation - First Approach

The purpose of the survey was to obtain feedback from the students about the guide in order to determine if it had been useful. In each question the user had to choose a number on a scale of 1 to 5 where 1 corresponded to completely disagree and 5 completely agree. The questions and their results are presented in Table 10.

After reviewing the different questions, it is possible to conclude that in general the guide had a good acceptance by the students, since 90% of the questions predominated the highest scores (grades 4 and 5). Also, it can be noted that in questions such as whether to recommend the guide, if it was useful or if it would be used for subsequent interfaces, 100% of the answers were affirmative indicating that the guide met the expectations outlined.

5.2 EMOVLE Guide Evaluation - Second Approach

Once the 16 prototypes were obtained, they were evaluated to ensure that the guidelines were implemented correctly. To this end, each guideline was compared to the document each student sent in which they had to mention how each guideline had been applied in the prototype. The analysis performed is presented in Table 11.

Table 11. Use of the guidelines in the prototypes
Full size table

It can be noted that the students were able to implement many of the guidelines and techniques included in the guide. This in turn allows us to consider the applicability of the guide and the possibility of building creative and improved interfaces. It also served to provide students with a starting point in prototyping.

6 Conclusions

The emotional design is an interesting area that has obtained results in several technological elements creating loyalty on the users to the products that they acquire. Linking this concept within the Virtual Learning Environments could mean a greater commitment of the trainees to the virtual course in which they are enrolled.

After a detailed review of the bibliography it was noticed that there are no detailed guidelines that point to the creation of Virtual Learning Environments interfaces. Incursing in this aspect can be innovative and is an incipient area of study.

Virtual Learning Environments are systems that have not been explored from an emotional perspective. Much has been said from the vision of usability but still the authors have not ventured to propose guidelines for the creation of emotive interfaces.

If aspects such as emotional design are taken into account when developing Virtual Environments, it is possible to achieve a significant improvement in the way in which the student perceives the system, and therefore, in the way in which he/she receives the information that there is projected.

The principles and theories related of emotional design are versatile enough to be applicable to almost any type of system. This was an advantage when adapting them to be applied to Virtual Learning Environments.

Although the EMOVLE guide was extensive, most of the students stated that it was possible to put it into practice and make use of the recommendations. Within the prototypes obtained were interesting results and creative interfaces, different from each other. This exposes an important aspect in the use of the guide and is that it does not intend to establish an unique interface but is intended to help, refine and maximize individual ideas.

After the implementation of the guidelines, users said that the EMOVLE guide were useful and they would use the guide for later interfaces and would recommend it to other colleagues.

Within the advantages of using the EMOVLE Guide is its practicality and ease of use, since it can be reviewed from general to specific interface design issues and vice versa, in addition, it can be supplemented by other studies and finally it provides specific examples of application. The great difference with other related studies, especially with Dorian Peters’ research who established the general structure of the guidelines, is that this guide has been extended and deepened with more authors who provide specific design guidelines and not only focus on what to do but also how to do it. Among the disadvantages is its size, since it contains about 98 sheets which can be a bit cumbersome for some users.

7 Recommendations

Within the recommendations made by the users who developed the prototype, the possibility of trimming the guide was established in order to increase its practicality. It is possible to make a shorter version pointing to specific guidelines.

When developing the interfaces according to the proposed guidelines, it is recommended to take into account the target population and the goal of the Virtual Learning Environment to be developed since not all the guidelines are applicable.

8 Future Work

To integrate the guide to the design of virtual agents, so that not only positive emotions are evoked in students, but if students evoke negative emotions during the learning process, these agents can help mitigate them.

To validate EMOVLE guide in different environments or systems that support the teaching-learning processes to assess their feasibility and versatility.

In order to finish validating the guideline it would be advisable to send it to a network of experts so that they can establish if the construction of this guideline is adequate and if it contains sufficient theoretical support.

Developed prototypes could be evaluated to test if they actually evoke positive emotions.

More detailed techniques could be included in order to obtain a more complete guide to be used by any type of expert.

It is necessary to build a website that supports the guide so that those interested in designing interfaces that evoke positive emotions in students through virtual learning environments, have all the information available about the guidelines and techniques.

Nowadays, the present research is being expanded by applying the EMOVLE Guide to a health environment, specifically for the design of therapeutic systems interfaces for children with attention deficit disorder. This study is part of the doctoral project entitled “EMOINAD Guide: An emotive interface design guide for attention deficit disorder in children”.