\documentclass[11pt,twoside]{article}\makeatletter

\IfFileExists{xcolor.sty}%
  {\RequirePackage{xcolor}}%
  {\RequirePackage{color}}
\usepackage{colortbl}
\usepackage{wrapfig}
\usepackage{ifxetex}
\ifxetex
  \usepackage{fontspec}
  \usepackage{xunicode}
  \catcode`⃥=\active \def⃥{\textbackslash}
  \catcode`❴=\active \def❴{\{}
  \catcode`❵=\active \def❵{\}}
  \def\textJapanese{\fontspec{Noto Sans CJK JP}}
  \def\textChinese{\fontspec{Noto Sans CJK SC}}
  \def\textKorean{\fontspec{Noto Sans CJK KR}}
  \setmonofont{DejaVu Sans Mono}
  
\else
  \IfFileExists{utf8x.def}%
   {\usepackage[utf8x]{inputenc}
      \PrerenderUnicode{–}
    }%
   {\usepackage[utf8]{inputenc}}
  \usepackage[english]{babel}
  \usepackage[T1]{fontenc}
  \usepackage{float}
  \usepackage[]{ucs}
  \uc@dclc{8421}{default}{\textbackslash }
  \uc@dclc{10100}{default}{\{}
  \uc@dclc{10101}{default}{\}}
  \uc@dclc{8491}{default}{\AA{}}
  \uc@dclc{8239}{default}{\,}
  \uc@dclc{20154}{default}{ }
  \uc@dclc{10148}{default}{>}
  \def\textschwa{\rotatebox{-90}{e}}
  \def\textJapanese{}
  \def\textChinese{}
  \IfFileExists{tipa.sty}{\usepackage{tipa}}{}
\fi
\def\exampleFont{\ttfamily\small}
\DeclareTextSymbol{\textpi}{OML}{25}
\usepackage{relsize}
\RequirePackage{array}
\def\@testpach{\@chclass
 \ifnum \@lastchclass=6 \@ne \@chnum \@ne \else
  \ifnum \@lastchclass=7 5 \else
   \ifnum \@lastchclass=8 \tw@ \else
    \ifnum \@lastchclass=9 \thr@@
   \else \z@
   \ifnum \@lastchclass = 10 \else
   \edef\@nextchar{\expandafter\string\@nextchar}%
   \@chnum
   \if \@nextchar c\z@ \else
    \if \@nextchar l\@ne \else
     \if \@nextchar r\tw@ \else
   \z@ \@chclass
   \if\@nextchar |\@ne \else
    \if \@nextchar !6 \else
     \if \@nextchar @7 \else
      \if \@nextchar (8 \else
       \if \@nextchar )9 \else
  10
  \@chnum
  \if \@nextchar m\thr@@\else
   \if \@nextchar p4 \else
    \if \@nextchar b5 \else
   \z@ \@chclass \z@ \@preamerr \z@ \fi \fi \fi \fi
   \fi \fi  \fi  \fi  \fi  \fi  \fi \fi \fi \fi \fi \fi}
\gdef\arraybackslash{\let\\=\@arraycr}
\def\@textsubscript#1{{\m@th\ensuremath{_{\mbox{\fontsize\sf@size\z@#1}}}}}
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\def\abbr{}
\def\corr{}
\def\expan{}
\def\gap{}
\def\orig{}
\def\reg{}
\def\ref{}
\def\sic{}
\def\persName{}\def\name{}
\def\placeName{}
\def\orgName{}
\def\textcal#1{{\fontspec{Lucida Calligraphy}#1}}
\def\textgothic#1{{\fontspec{Lucida Blackletter}#1}}
\def\textlarge#1{{\large #1}}
\def\textoverbar#1{\ensuremath{\overline{#1}}}
\def\textquoted#1{‘#1’}
\def\textsmall#1{{\small #1}}
\def\textsubscript#1{\@textsubscript{\selectfont#1}}
\def\textxi{\ensuremath{\xi}}
\def\titlem{\itshape}
\newenvironment{biblfree}{}{\ifvmode\par\fi }
\newenvironment{bibl}{}{}
\newenvironment{byline}{\vskip6pt\itshape\fontsize{16pt}{18pt}\selectfont}{\par }
\newenvironment{citbibl}{}{\ifvmode\par\fi }
\newenvironment{docAuthor}{\ifvmode\vskip4pt\fontsize{16pt}{18pt}\selectfont\fi\itshape}{\ifvmode\par\fi }
\newenvironment{docDate}{}{\ifvmode\par\fi }
\newenvironment{docImprint}{\vskip 6pt}{\ifvmode\par\fi }
\newenvironment{docTitle}{\vskip6pt\bfseries\fontsize{22pt}{25pt}\selectfont}{\par }
\newenvironment{msHead}{\vskip 6pt}{\par}
\newenvironment{msItem}{\vskip 6pt}{\par}
\newenvironment{rubric}{}{}
\newenvironment{titlePart}{}{\par }

\newcolumntype{L}[1]{){\raggedright\arraybackslash}p{#1}}
\newcolumntype{C}[1]{){\centering\arraybackslash}p{#1}}
\newcolumntype{R}[1]{){\raggedleft\arraybackslash}p{#1}}
\newcolumntype{P}[1]{){\arraybackslash}p{#1}}
\newcolumntype{B}[1]{){\arraybackslash}b{#1}}
\newcolumntype{M}[1]{){\arraybackslash}m{#1}}
\definecolor{label}{gray}{0.75}
\def\unusedattribute#1{\sout{\textcolor{label}{#1}}}
\DeclareRobustCommand*{\xref}{\hyper@normalise\xref@}
\def\xref@#1#2{\hyper@linkurl{#2}{#1}}
\begingroup
\catcode`\_=\active
\gdef_#1{\ensuremath{\sb{\mathrm{#1}}}}
\endgroup
\mathcode`\_=\string"8000
\catcode`\_=12\relax

\usepackage[a4paper,twoside,lmargin=1in,rmargin=1in,tmargin=1in,bmargin=1in,marginparwidth=0.75in]{geometry}
\usepackage{framed}

\definecolor{shadecolor}{gray}{0.95}
\usepackage{longtable}
\usepackage[normalem]{ulem}
\usepackage{fancyvrb}
\usepackage{fancyhdr}
\usepackage{graphicx}
\usepackage{marginnote}

\renewcommand{\@cite}[1]{#1}


\renewcommand*{\marginfont}{\itshape\footnotesize}

\def\Gin@extensions{.pdf,.png,.jpg,.mps,.tif}

  \pagestyle{fancy}

\usepackage[pdftitle={The Importance of the Journey Map in the Design of a Playful Interactive-Interface},
 pdfauthor={}]{hyperref}
\hyperbaseurl{}

	 \paperwidth210mm
	 \paperheight297mm
              
\def\@pnumwidth{1.55em}
\def\@tocrmarg {2.55em}
\def\@dotsep{4.5}
\setcounter{tocdepth}{3}
\clubpenalty=8000
\emergencystretch 3em
\hbadness=4000
\hyphenpenalty=400
\pretolerance=750
\tolerance=2000
\vbadness=4000
\widowpenalty=10000

\renewcommand\section{\@startsection {section}{1}{\z@}%
     {-1.75ex \@plus -0.5ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large\bfseries}}
\renewcommand\subsection{\@startsection{subsection}{2}{\z@}%
     {-1.75ex\@plus -0.5ex \@minus- .2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\Large}}
\renewcommand\subsubsection{\@startsection{subsubsection}{3}{\z@}%
     {-1.5ex\@plus -0.35ex \@minus -.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\large}}
\renewcommand\paragraph{\@startsection{paragraph}{4}{\z@}%
     {-1ex \@plus-0.35ex \@minus -0.2ex}%
     {0.5ex \@plus .2ex}%
     {\reset@font\normalsize}}
\renewcommand\subparagraph{\@startsection{subparagraph}{5}{\parindent}%
     {1.5ex \@plus1ex \@minus .2ex}%
     {-1em}%
     {\reset@font\normalsize\bfseries}}


\def\l@section#1#2{\addpenalty{\@secpenalty} \addvspace{1.0em plus 1pt}
 \@tempdima 1.5em \begingroup
 \parindent \z@ \rightskip \@pnumwidth 
 \parfillskip -\@pnumwidth 
 \bfseries \leavevmode #1\hfil \hbox to\@pnumwidth{\hss #2}\par
 \endgroup}
\def\l@subsection{\@dottedtocline{2}{1.5em}{2.3em}}
\def\l@subsubsection{\@dottedtocline{3}{3.8em}{3.2em}}
\def\l@paragraph{\@dottedtocline{4}{7.0em}{4.1em}}
\def\l@subparagraph{\@dottedtocline{5}{10em}{5em}}
\@ifundefined{c@section}{\newcounter{section}}{}
\@ifundefined{c@chapter}{\newcounter{chapter}}{}
\newif\if@mainmatter 
\@mainmattertrue
\def\chaptername{Chapter}
\def\frontmatter{%
  \pagenumbering{roman}
  \def\thechapter{\@roman\c@chapter}
  \def\theHchapter{\roman{chapter}}
  \def\thesection{\@roman\c@section}
  \def\theHsection{\roman{section}}
  \def\@chapapp{}%
}
\def\mainmatter{%
  \cleardoublepage
  \def\thechapter{\@arabic\c@chapter}
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \pagenumbering{arabic}
  \setcounter{secnumdepth}{6}
  \def\@chapapp{\chaptername}%
  \def\theHchapter{\arabic{chapter}}
  \def\thesection{\@arabic\c@section}
  \def\theHsection{\arabic{section}}
}
\def\backmatter{%
  \cleardoublepage
  \setcounter{chapter}{0}
  \setcounter{section}{0}
  \setcounter{secnumdepth}{2}
  \def\@chapapp{\appendixname}%
  \def\thechapter{\@Alph\c@chapter}
  \def\theHchapter{\Alph{chapter}}
  \appendix
}
\newenvironment{bibitemlist}[1]{%
   \list{\@biblabel{\@arabic\c@enumiv}}%
       {\settowidth\labelwidth{\@biblabel{#1}}%
        \leftmargin\labelwidth
        \advance\leftmargin\labelsep
        \@openbib@code
        \usecounter{enumiv}%
        \let\p@enumiv\@empty
        \renewcommand\theenumiv{\@arabic\c@enumiv}%
	}%
  \sloppy
  \clubpenalty4000
  \@clubpenalty \clubpenalty
  \widowpenalty4000%
  \sfcode`\.\@m}%
  {\def\@noitemerr
    {\@latex@warning{Empty `bibitemlist' environment}}%
    \endlist}

\def\tableofcontents{\section*{\contentsname}\@starttoc{toc}}
\parskip0pt
\parindent1em
\def\Panel#1#2#3#4{\multicolumn{#3}{){\columncolor{#2}}#4}{#1}}
\newenvironment{reflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemsep}{0pt}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\itshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{sansreflist}{%
  \begin{raggedright}\begin{list}{}
  {%
   \setlength{\topsep}{0pt}%
   \setlength{\rightmargin}{0.25in}%
   \setlength{\itemindent}{0pt}%
   \setlength{\parskip}{0pt}%
   \setlength{\itemsep}{0pt}%
   \setlength{\parsep}{2pt}%
   \def\makelabel##1{\upshape ##1}}%
  }
  {\end{list}\end{raggedright}}
\newenvironment{specHead}[2]%
 {\vspace{20pt}\hrule\vspace{10pt}%
  \phantomsection\label{#1}\markright{#2}%

  \pdfbookmark[2]{#2}{#1}%
  \hspace{-0.75in}{\bfseries\fontsize{16pt}{18pt}\selectfont#2}%
  }{}
      \def\TheFullDate{2021-05-15 (revised: 15 May 2021)}
\def\TheID{10.34257/GJMBRGVOL21IS4PG9\makeatother }
\def\TheDate{2021-05-15}
\title{The Importance of the Journey Map in the Design of a Playful Interactive-Interface}
\author{}\makeatletter 
\makeatletter
\newcommand*{\cleartoleftpage}{%
  \clearpage
    \if@twoside
    \ifodd\c@page
      \hbox{}\newpage
      \if@twocolumn
        \hbox{}\newpage
      \fi
    \fi
  \fi
}
\makeatother
\makeatletter
\thispagestyle{empty}
\markright{\@title}\markboth{\@title}{\@author}
\renewcommand\small{\@setfontsize\small{9pt}{11pt}\abovedisplayskip 8.5\p@ plus3\p@ minus4\p@
\belowdisplayskip \abovedisplayskip
\abovedisplayshortskip \z@ plus2\p@
\belowdisplayshortskip 4\p@ plus2\p@ minus2\p@
\def\@listi{\leftmargin\leftmargini
               \topsep 2\p@ plus1\p@ minus1\p@
               \parsep 2\p@ plus\p@ minus\p@
               \itemsep 1pt}
}
\makeatother
\fvset{frame=single,numberblanklines=false,xleftmargin=5mm,xrightmargin=5mm}
\fancyhf{} 
\setlength{\headheight}{14pt}
\fancyhead[LE]{\bfseries\leftmark} 
\fancyhead[RO]{\bfseries\rightmark} 
\fancyfoot[RO]{}
\fancyfoot[CO]{\thepage}
\fancyfoot[LO]{\TheID}
\fancyfoot[LE]{}
\fancyfoot[CE]{\thepage}
\fancyfoot[RE]{\TheID}
\hypersetup{citebordercolor=0.75 0.75 0.75,linkbordercolor=0.75 0.75 0.75,urlbordercolor=0.75 0.75 0.75,bookmarksnumbered=true}
\fancypagestyle{plain}{\fancyhead{}\renewcommand{\headrulewidth}{0pt}}

\date{}
\usepackage{authblk}

\providecommand{\keywords}[1]
{
\footnotesize
  \textbf{\textit{Index terms---}} #1
}

\usepackage{graphicx,xcolor}
\definecolor{GJBlue}{HTML}{273B81}
\definecolor{GJLightBlue}{HTML}{0A9DD9}
\definecolor{GJMediumGrey}{HTML}{6D6E70}
\definecolor{GJLightGrey}{HTML}{929497} 

\renewenvironment{abstract}{%
   \setlength{\parindent}{0pt}\raggedright
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
   \textcolor{GJBlue}{\large\bfseries\abstractname\space}
}{%   
   \vskip8pt
   \textcolor{GJMediumGrey}{\rule{\textwidth}{2pt}}
   \vskip16pt
}

\usepackage[absolute,overlay]{textpos}

\makeatother 
      \usepackage{lineno}
      \linenumbers
      
\begin{document}

             \author[1]{Eric  Torres-Velasco}

             \author[2]{Ana Lilia  Laureano-Cruces}

             \author[3]{Gustavo De La  Cruz-Martínez}

             \author[4]{Lourdes  Sánchez-Guerrero}

             \affil[1]{  Universidad Autonoma Metropolitana}

\renewcommand\Authands{ and }

\date{\small \em Received: 12 April 2021 Accepted: 4 May 2021 Published: 15 May 2021}

\maketitle


\begin{abstract}
        


This article presents the importance of using the customer journey map (CJM) as a tool for managing new information technologies. The case study presents the use of the CJM to indicate the experiences that people have when using a playful interactive-interface, where the causal relationship between the brightness and the distance of the stars is visualized. The CJM is the result of a quantitative and qualitative study about user experience (UX) or UX research. Where you can use: 1) observation techniques, 2) interviews, 3) questionnaires, 4) a review of the domain literature about the phenomenon, archetypal descriptions, 5) diagrams of mental models; also known as thought schemes, or cognitive maps, among others. This research focuses the development of the interface in the design of archetypal profiles and mental models to generate the CJM, in the domain of the specific phenomenon.

\end{abstract}


\keywords{customer journey map, interactive-interface, new technologies, mental model.}

\begin{textblock*}{18cm}(1cm,1cm) % {block width} (coords) 
\textcolor{GJBlue}{\LARGE Global Journals \LaTeX\ JournalKaleidoscope\texttrademark}
\end{textblock*}

\begin{textblock*}{18cm}(1.4cm,1.5cm) % {block width} (coords) 
\textcolor{GJBlue}{\footnotesize \\ Artificial Intelligence formulated this projection for compatibility purposes from the original article published at Global Journals. However, this technology is currently in beta. \emph{Therefore, kindly ignore odd layouts, missed formulae, text, tables, or figures.}}
\end{textblock*}


\begin{textblock*}{10cm}(1.05cm,3cm)
{{\textit{CrossRef DOI of original article:}} \underline{10.34257/GJMBRGVOL21IS4PG9}}
\end{textblock*}\let\tabcellsep& 	 	 		 
\section[{Introduction}]{Introduction}\par
ccording to the domain, the potential of the interface must be maximally exploited, using the most appropriate means (video, audio, etc.) to achieve the best understanding of the activities for which it was designed.\par
The interface is where the inputs and outputs of the system occur. Its basic responsibility is the communication between the system and the user, although as it is the means of exit from the system, it also has a responsibility according to its actions based on the application domain; in this case playful.\par
In a natural way, in the interaction of the user with the interface, patterns of thought are developed about the activity and knowledge of the human being, called user models. These patterns are schemas that relate: 1) sets of information and associations between objects, and 2) actions and thoughts. This implies that they are initialized as cognitive processes in the human mind; through stimuli from the environment.\par
A single mental model contains vast information. There are many of them in people's memories of different concepts; an example would be,on four-legged dogs, fur, sharp teeth, tail, and a number of noticeable qualities. When the stimulus from the environment coincides with the previous mental model, the thought pattern is activated in the mind (Laureano-Cruces 2000; Laureano-Cruces and Rodríguez-García 2012; \hyperref[b20]{Soegaard 2002)}.\par
In the case of study, the visual elements of the interface play an essential function from its semantics for the understanding of meaning. The case study is related to the concept that implies the difference between the magnitudes of brightness (apparent vs real) of the stars in relation to their distance. For more information on the subject, consult (Torres-Velasco, Laureano-Cruces and Santillán-González 2021). The visual elements are designed from the construction of mental models taking into consideration the user's emotions.\par
This article is organized as follows: in section two, the tools used in the development of the playful interactive-interface are explained; in conjunction with emotions as an essential element for the construction of the customer journey map; in section three, the case study applied to a playful interactive-interface is presented; in section four, final reflections on the importance of the customer journey map for the management of new information technologies are discussed. 
\section[{II.}]{II.} 
\section[{Development and Tools}]{Development and Tools}\par
This project consists of a theoretical-empirical investigation for the design and implementation of a playful interactive-interface that allows visualizing the causal relationships of the different parts of the distance modulus.\par
That is, it interacts in a didactic way with a set of instructions to relate the apparent brightness, the real brightness and the distance of a star or celestial object. Facilitating the understanding of this complex cognitive structure from the domain of astronomy. The four phases of the general design methodology (analysis, synthesis, testing and implementation) are described. 
\section[{a) Phases of the general design methodology}]{a) Phases of the general design methodology}\par
The methodology suggests associating the process of creating ideas to solving problems or determining hypotheses from the higher plane of the mind. Therefore, each idea goes through a similar process from its particular point of interest. Each phase is described below: i. Analysis: the design problem of the application of a specific scenario is examined together with the community (users, clients, protocol group, committee and members of the jury). The case study specializes in the field of information design and visualization. Likewise, the requirements and complexities necessary for the visual modeling of the theory from the perspective of causal reasoning are identified. In order to organize a diagnosis with the fundamental aspects of the design system and visual language. That is, the graphic description of an event related to the change of value in a physical process is proposed.\par
ii. Synthesis: the attributes and mappable properties of the phenomenon are conceptualized in visual devices, so that the user can reconstruct a possible route of inference for the solution of the problem or the given task. Once the class modeling is ready, it will proceed to the testing phase. If this is not accomplished satisfactorily, then it is possible to iterate into the analysis phase, again, to refine the diagnosis and improve on the prototype.\par
iii. Testing: the design is validated with ergonomic and usability test to collect the informative qualities of feedback focused on the end user. Bases on the results report, it will be decided whether to go back and iterate towards the analysis or synthesis phase for its refinement, or if it complies with the guidelines established for the implementation phase.\par
iv. Implementation: the cognitive artilect of visualization is integrated into the conceptual system of representation and configuration of the site (the museum); so that it is constantly monitored and maintained. The above based on possible approaches to scientific knowledge and taking actions in the future.\par
For the development of an interactive system, the analysis of the user's task is very important, even more when developing a system to support non-formal learning. To understand the user's needs, it is necessary to observe him in his environment and know her opinions; once the user's needs have been identified, the designers use different tools to capture their understanding of the user's activity (design model) from which the system is built. In the case of systems for education, it is also essential to rely on an expert in the domain to handle the subject to be considered.\par
User activity is the action you take to meet your needs. So how do we do that? How can we do an analysis and design of user activity to meet their needs?\par
There are different methods and techniques to reduce the gap between the mental model of the designer and the user such as: observation techniques, interviews, questionnaires, archetypal descriptions of people, travel maps, review of the domain about the phenomenon, among others. Some of these can be explored in the following link (https://medialabamsterdam.com/toolkit/). In the case study, archetypal descriptions, a review of the domain of the phenomenon and mental models were used. Coming up next, a brief explanation of these is offered. 
\section[{b) Archetypal descriptions}]{b) Archetypal descriptions}\par
It is the description of a character, image, symbol or situation that occurs in literature and in life, and that is considered universal in most cultures. In the case study, the archetype of the personality of children between eight and ten years old was developed.\par
The personas technique helps to consolidate archetypal descriptions about user behavior patterns in representational profiles, which humanize the design approach in the form of scenarios and direct communication \hyperref[b9]{(Martin and Hanington 2012)}. This distinction creates useful design goals by pointing out people's behavior.\par
For the implementation of the interactiveinterface, the specific operation stage of the cognitive development of the people who are going to use the device is considered. In order to reduce the level of cognitive load avoiding frustration.\par
In the case of study, the target audience is girls and boys between eight and ten years old. Since at this age they find themselves with the acquisition of logical, technical, motor, graphic, social and emotional thinking to adapt to the space that surrounds them (Levine 2014; Liu 2018).\par
Thus, these people begin to use logic through mental models of tacit knowledge and concrete ideas of abstract events, at the same time that they become accustomed to symbols or complex representations, extrapolating their meaning to other areas of neural plasticity.\par
It is worth mentioning that this audience must be familiar with the technology, through a mobile device such as the cell phone of a friend or relative. In other words, they know how to use apps, websites, and tools like the computer, mouse, trackpad, or keyboard. 
\section[{c) Review of the domain about the phenomenon}]{c) Review of the domain about the phenomenon}\par
Meetings are held with the domain expert, and by iterating little by little the contents that will be presented in the software are identified to adapt their understanding according to the user of the system. 
\section[{d) A mental model}]{d) A mental model}\par
There are two main types of mental models: the perceptual and the conceptual. As for the perceptual, as their name implies, they depend on the human senses of perception. Two aspects are important to these mental models: 1) the shape of the world, and 2) the way it is perceived. The conceptual ones represent abstract aspects. Both can reflect: a possible situation, an imaginary situation or a true situation.\par
A mental model is a diagrammatic perception of how a system works in reality. This represents the thought processes or internal constructs from the exploration, beliefs, assumptions, behaviors, feelings and motivations of people.\par
Mental models are important because they represent objects, states of affairs, sequences of events, the way the world is, and the social and psychological actions of daily life (Johnson-Laird 1983, 1989; Kalbach 2016; Norman 2011; Reeve 2007; Simon 1996; Yablonski 2020).\par
Norman (2011) points out that mental models are important tools for organizing and understanding complex aspects. A conceptual model resides in the mind of the person (Figure \hyperref[fig_0]{1}). Therefore, mental models help transform the complexity of reality into understandable mental concepts \hyperref[b14]{(Norman 2011)}. Therefore, in this case it is the mental model of the designer, from which the knowledge about the goals and objectives of design is subtracted to improve the user experience with a product; getting a deeper insight into the pre-existing mental models in people \hyperref[b18]{(Serrano, Blázquez 2016}). 
\section[{e) Emotions the cherry on the cake}]{e) Emotions the cherry on the cake}\par
They are considered to the emotions, because they represent the internal reactions of a user during the interaction and the interpretation of the interface; from a series of morphisms and list of needs to interact with the system (Laureano-Cruces, Sanchez-Guerrero, Velasco-Santos and Mora-Torres 2017; Mora-Torres, Laureano-Cruces and Velasco-Santos 2011; Yablonski 2020; Yáñez-Castillo, Laureano-Cruces and Garmendia-Ramírez 2017).\par
These reactions are associated with the peaks of emotional state to achieve satisfaction and meet the goal of the interactive-interface, as presented by the affective-motivational architecture proposed in Mora-Torres, Laureano-Cruces, Gamboa-Rodri?uez, Rami?ez-Rodri?uez, and Sa?chez-Guerrero (2014).\par
This architecture involves the concepts for the teaching-learning process: the objectives, events, rules, emotions and actions of the user when interacting with the interface represented in this case by a pedagogical agent (Laureano-Cruces 2004). These are linked to the motivational facets such as: effort and latency, among others (Figure \hyperref[fig_1]{2}). Thus, emotions assign meaning by supporting the decision-making process by assigning a valuation to the event; influencing the way we think. "Positive emotions are as important as negative ones: positive ones are essential for learning, curiosity and creative thinking ..."  {\ref (Norman 2005, 35)}. Furthermore, positive affect (+) "awakens curiosity, attracts creativity and makes the brain an effective learning organism"  {\ref (Norman 2005, 42)}.\par
From the affective-motivational architecture (Mora-Torres et al. 2014), external reactions are extended to the field of semantic design with symbols that map the relationships associated with the properties of the phenomenon in question. Emphasizing that the interaction with the interface's scientific information display system makes it possible to influence the meaning of its ontological knowledge. 
\section[{f) Customer Journey Map}]{f) Customer Journey Map}\par
A user journey map or customer journey map (CJM) is a functional tool that schematically visualizes the experiences of people when interacting with a product or service, allows evaluating each moment and to improve it individually. It is ideal for narrating peaks in emotional state while completing a specific task or goal \hyperref[b9]{(Martin et al 2012)}.\par
Gibbons (2018) points out that the CJM promotes a holistic view of the user experience by presenting moments of indecision, frustration and delight.\par
Additionally, it reveals opportunities to address pain points, alleviates fragmentation, and ultimately creates a better experience for users. This visualization tool must be honest with experience and be guided by the determination of a previous project objective \hyperref[b0]{(Gibbons 2018}; Kalbach 2016; Yablonski 2020).\par
By structuring these actions, a narrative is created. Thus, these moments (touchpoints) can take different forms depending on the context, whether from a personal contact between individuals face to face, to virtual interactions with a website or objects in a virtual world \hyperref[b0]{(Gibbons 2018;}\hyperref[b21]{Stickdorn and Schneider 2010)}.\par
Once touchpoints are identified, they are connected in a visual representation of the overall experience. Hence? "This overview should be visually engaging enough to make it easily accessible to all, but should also incorporate enough detail to provide real insights into the journeys being displayed. This might mean basing the map around personas, so that the customers doing the journeying become far more than just name on a page. Basing the map around materials customers have produced also helps facilitate empathic engagement, which is crucial for conveying the myriad emotions that most journeys are made up of" (Stickdorn and Schneider 2010, 152).\par
The customer journey map is also known as an experience map. The terms user journey map and customer journey map can be interchangeable. In both cases, the steps to be followed by a user until reaching a specific goal are displayed (Gibbons 2018; Komninos 2020; Schroeter 2019).\par
Commonly, the journey map displays the phases of experience along a horizontal axis to show the progression of time. Along the vertical axis, categories or metrics of particular interest to the organization are added \hyperref[b22]{(Tharon 2014}). As the template in Figure \hyperref[fig_2]{3} shows.  
\section[{Case Study}]{Case Study}\par
The case study involves the simulation of a physical process based on its mathematical equation (with three degrees of freedom) that relates the distance of a star with its absolute and apparent brightness, respectively. This is where the contribution to the field of visualization is found with the opening of a point of intersection between the design of interactive interfaces and the visual simulation of physical processes. The main objective of the interactive-interface is to facilitate understanding of the star distance modulus. Solving the causal relationship between brightness and distance by increasing the value in A (subgoal 1) or decreasing the value in B (subgoal 2). For more information, consult Torres-Velasco, Laureano-Cruces and Santillán-González (2021).\par
Each of these sub-goals is represented by a functional abstraction in the interactive-interface programming algorithm. Because it integrates a series of arithmetic operations returning a value to update the display system in real time. They are executed as long as there is an interaction in A or B. Which are represented as components of a visual element in iconographic symbols for the interpretation of meaning.\par
Each image considers previous research on how people perceive within a certain environment. Through what objects, shapes, colors, textures or sizes and how is it related to their prior knowledge.\par
In the case of study, if the value of the parameter in brightness or distance is changed in the interactive-interface, it would cause an effect of increase or decrease in the behavioral dimensions (*, +, ?). As shown in Figure \hyperref[fig_4]{4}.    \hyperref[fig_4]{4}, presents on the vertical axis the actions, events, tasks and emotions that both the user, the system and the interface experience, through the route or activity designed in order to modify the distance with the interactive-interface \hyperref[b15]{(Norman, Draper 1986)}. Temporality is represented on the horizontal axis.\par
In the case study, the system displays the interface to awaken an emotion of curiosity and intrigue in the user, so the interface suggests modifying the value in distance to feed their interest in using it.\par
The user decides to press a button that immediately increases the value of the property and the interface translates the change in the display. Because of this the user is happy with the results. So, he continues to motivate him by suggesting new tasks until he feels satisfied.\par
The above is an effective way to travel: from the first stage, where the necessary information is provided to generate empathy; to the second, where the problem of visualization is solved. As shown in Figure 5.  
\section[{Conclusions}]{Conclusions}\par
Because the case study involves the simulation of a physical process based on its mathematical equation, this work brings to the field of visualization the opening of an intersection point, between the design of interactive interfaces and the visual simulation of physical phenomena.\par
This work arises from the notion that both mathematical and graphic formulas and diagrams are a mode of conceptual representation of semantics that are responsible for presenting abstract domains existing in nature.\par
Therefore, it is proposed to determine that, despite the fact that abstract representations such as the distance modulus make it difficult to understand these complex cognitive structures. The visualization of this astrophysical phenomenon encourages qualitative reasoning through an interactive language. Visual simulation and interactive interface design facilitate this meaning: the conceptual reconstruction of a structure.\par
The use of tools and techniques for the management of new information technologies, such as the journey map, promote the understanding these essential structures for meaning in the pedagogical field. This is the highest concentration efficiency of cognitive capital.\par
Everything we know is in a higher mental structure that is constituted in the artilect from our intellectual economy. Commonly, it is used to access into a multi-representational field of associations inserted in a specific market.\par
For example, in engineering, these kinds of tools help to expand the knowledge that one has about the physical phenomenon. It is like the thread of knowing that can be purely mathematical or less abstract than in art.\par
The journey map results in the creation of the interactive-interface that, -not only obeys the designers and project managers to align a common mental model, but also creates a deep collaboration of the user experience; helping to identify current challenges and opportunities depending on the complexity of the project.\par
The process of creating maps reinforces conversion and aligns mental models between design teams. This shared vision is an achievement of the journey map and the diagrams, since, without it, consensus, decision-making and coherence in actions to improve people's experience would not be possible.\par
Carrying out a design system during visual coding highlights the importance of organizing all components of experience within the design process. Without planning all these elements, it would be difficult to abstract the results in a part time. Therefore, the design system facilitates the solution to coding problems.\par
The prototype of the playful interactive-interface could be consulted in the following internet link:(https://www.dropbox.com/s/7bo4miefhgx5l4u/video \textunderscore 1.mov?dl=0) and in the github repository (https://github.com/ciretorres/thesis-project) where the open source is located to download, play, test or contribute with the code for free.\begin{figure}[htbp]
\noindent\textbf{1}\includegraphics[]{image-2.png}
\caption{\label{fig_0}Figure 1 :}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{2}\includegraphics[]{image-3.png}
\caption{\label{fig_1}Figure 2 :}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{3}\includegraphics[]{image-4.png}
\caption{\label{fig_2}Figure 3 :}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{}\includegraphics[]{image-5.png}
\caption{\label{fig_3}}\end{figure}
 \begin{figure}[htbp]
\noindent\textbf{4}\includegraphics[]{image-6.png}
\caption{\label{fig_4}Figure 4 :}\end{figure}
   			\footnote{© 2021 Global Journals} 			\footnote{( )G © 2021 Global JournalsThe Importance of the Journey Map in the Design of a Playful Interactive-Interface} 			\footnote{The Importance of the Journey Map in the Design of a Playful Interactive-Interface} 		 		\backmatter   			 
\subsection[{Acknowledgments}]{Acknowledgments}\par
This work is part of the research project carried out by Eric O. TORRES-VELASCO to obtain the Master's degree in Diseño y Visualización de la Información at the Universidad Autónoma Metropolitana -Azcapotzalco. Supported by the posgraduate scholarship and the divisional project Design of intelligent interfaces for the simulation of behaviors of living or animated organisms: information visualization section from the same University. 			  			  				\begin{bibitemlist}{1}
\bibitem[ Revista Perfiles Educativos]{b11}\label{b11} 	 		\textit{},  	 	 		\textit{Revista Perfiles Educativos}  		UNAM, XXXIII. p. .  	 
\bibitem[Mora-Torres et al. ()]{b10}\label{b10} 	 		\textit{},  		 			M Mora-Torres 		,  		 			A L Laureano-Cruces 		,  		 			P Velasco-Santos 		.  		2011.  		 			Estructura de las Emociones dentro de un Proceso de Enseñanza-Aprendizaje 		 	 
\bibitem[Komninos ()]{b4}\label{b4} 	 		‘7 UX Deliverables: What will I be making as a UX designer?’.  		 			A Komninos 		.  		 \url{https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer}  	 	 		\textit{Interaction Design Foundation}  		2020.  	 
\bibitem[Schroeter ()]{b17}\label{b17} 	 		\textit{A beginner's guide to customer journey maps},  		 			E Schroeter 		.  		 \url{https://www.invisionapp.com/inside-design/customer-journey-maps/}  		2019.  	 
\bibitem[Mora-Torres et al. ()]{b12}\label{b12} 	 		‘An Affective-Motivational Interface for a Pedagogical Agent’.  		 			M Mora-Torres 		,  		 			A L Laureano-Cruces 		,  		 			F Gamboa-Rodri?uez 		,  		 			J Rami?ez-Rodri?uez 		,  		 			L Sa?chez-Guerrero 		.  	 	 		\textit{International Journal of Intelligence Science}  		2014. 4  (1)  p. .  	 
\bibitem[Co]{b23}\label{b23} 	 		\textit{Customer Journey Map},  		 			Thinkers Co 		.  		 \url{https://thinkersco.com/comunidad/herra-mientas/mapear/customer-journey-map/}  		 	 
\bibitem[Laureano-Cruces and Rodríguez-García ()]{b7}\label{b7} 	 		‘Design and Implementation of an Educational Virtual Pet Using the OCC Theory’.  		 			A L Laureano-Cruces 		,  		 			A Rodríguez-García 		.  	 	 		\textit{Journal of Ambient Intelligence and Humanized Computing}  		2012. 3  (1)  p. .  	 
\bibitem[Serrano and Blázquez ()]{b18}\label{b18} 	 		\textit{Design thinking: lidera el presente, crea el futuro},  		 			M Serrano 		,  		 			P Blázquez 		.  		2016. Madrid: ESIC.  	 
\bibitem[Norman ()]{b13}\label{b13} 	 		\textit{Emotional Design: Why We Love (Or Hate) Everyday Things},  		 			D A Norman 		.  		2005. USA: Basic Books.  	 
\bibitem[Laureano-Cruces ()]{b5}\label{b5} 	 		\textit{Interacción Dinámica en Sistemas de Enseñanza Inteligentes},  		 			A L Laureano-Cruces 		.  		 \url{http://kali.azc.uam.mx/clc/00\textunderscore principal/menu\textunderscore inicio.html}  		2000.  		 			Universidad Nacional Autónoma de México 		 	 	 (Ph. D. Thesis. Instituto de Investigaciones Biomédicas) 
\bibitem[Gibbons ()]{b0}\label{b0} 	 		\textit{Journey Mapping 101},  		 			S Gibbons 		.  		 \url{https://www.nngroup.com/articles/journey-mapping-101/}  		2018.  		 			Nielsen Norman Group 		 	 
\bibitem[Tharon (2014)]{b22}\label{b22} 	 		‘Journey mapping: a brief overview’.  		 			H Tharon 		.  		 \xref{http://dx.doi.org/10.1145/2644448.2644451}{10.1145/2644448.2644451}.  		 \url{https://doi.org/10.1145/2644448.2644451}  	 	 		\textit{Commun. Des. Q. Rev}  		2014. May 2014. 2  (3)  p. .  	 
\bibitem[Norman ()]{b14}\label{b14} 	 		\textit{Living with complexity},  		 			D A Norman 		.  		2011. USA: The MIT Press.  	 
\bibitem[Kalbach ()]{b3}\label{b3} 	 		\textit{Mapping experiences: a complete guide to creating value through journeys, blueprints, and diagrams},  		 			J Kalbach 		.  		2016. Canada: O'Reilly.  	 
\bibitem[Laureano-Cruces (2004)]{b6}\label{b6} 	 		\textit{Memorias XVII Congreso Nacional y III Congreso Internacional de Informática y Computación de la ANIEI [Memories XVII National Congress and III International Congress of Informatics and Computing of the ANIEI]},  		 			A L Laureano-Cruces 		.  		 \url{http://kali.azc.uam.mx/clc/02\textunderscore publicaciones/material/AgentesPedagogicos\textunderscore ANIEI04.pdf}  		2004. 20-22 October 2004. Tepic.  	 	 (Agentes Pedagógicos) 
\bibitem[Johnson-Laird ()]{b1}\label{b1} 	 		\textit{Mental models: towards a cognitive science of language, inference, and consciousness},  		 			P N Johnson-Laird 		.  		1983. Cambridge: Cambridge University Press.  	 
\bibitem[Soegaard ()]{b20}\label{b20} 	 		\textit{The basics of user experience design},  		 			M Soegaard 		.  		2002. USA: Interaction Design Foundation.  	 
\bibitem[Johnson-Laird ()]{b2}\label{b2} 	 		\textit{The Computer and the Mind: An Introduction to Cognitive Science},  		 			P N Johnson-Laird 		.  		1989. USA: Harvard University Press.  	 
\bibitem[Laureano-Cruces et al. ()]{b8}\label{b8} 	 		‘The interface: an object that is hated and loved’.  		 			A L Laureano-Cruces 		,  		 			L Sanchez-Guerrero 		,  		 			P Velasco-Santos 		,  		 			M Mora-Torres 		.  		 \url{https://www.Learn-techlib.org/primary/p/181208/}  	 	 		\textit{Proceedings of E-Learn: World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education},  				 			J Dron,  			\& S Mishra 		 (ed.)  		 (E-Learn: World Conference on E-Learning in Corporate, Government, Healthcare, and Higher EducationVancouver, British Columbia, Canada)  		2017. AACE. p. .  	 	 (Association for the Advancement of Computing in Education) 
\bibitem[Simon ()]{b19}\label{b19} 	 		\textit{The Science of the Artificial},  		 			H A Simon 		.  		1996. USA: The MIT Press.  	 
\bibitem[Stickdorn and Schneider ()]{b21}\label{b21} 	 		\textit{This Is Service Design Thinking: Basics, Tools, Cases},  		 			M Stickdorn 		,  		 			J Schneider 		.  		2010. Amsterdam: BIS Publishers.  	 
\bibitem[Reeve ()]{b16}\label{b16} 	 		\textit{Understanding Motivation and Emotion},  		 			J Reeve 		.  		2009. WILEY.  	 	 (Fifth Edition) 
\bibitem[Martin and Hanington ()]{b9}\label{b9} 	 		\textit{Universal methods of design: 100 Ways to research complex problems, develop innovative ideas, and design effective solutions},  		 			B Martin 		,  		 			B Hanington 		.  		2012. USA: Rockport Publishers.  	 
\bibitem[Norman and Draper ()]{b15}\label{b15} 	 		\textit{User Centered System Design: new Perspectives on Human-computer Interaction},  		 			D A Norman 		,  		 			S W Draper 		.  		1986. San Diego.  		 			USA: University of California 		 	 
\bibitem[Torres-Velasco et al. ()]{b24}\label{b24} 	 		\textit{Visualización a},  		 			E O Torres-Velasco 		,  		 			A L Laureano-Cruces 		,  		 			A Santillán-González 		.  		2021.  	 
\end{bibitemlist}
 			 		 	 
\end{document}
