Alicia López-Castañeda ORCID 0000-0001-9897-0643 Beatriz A. González-Beltrán ORCID 0000-0002-1718-9060 Yadira Alatriste-Martínez ORCID 0000-0001-5410-6749 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica de usuario para aplicaciones de salud Capítulo 13 pp. 139-152 De los métodos y las maneras Número 7 Coordinador de la obra Gustavo Iván Garmendia Ramírez Compilación y Diseño editorial Sandra Rodríguez Mondragón Diseño de portada Martín Lucas Flores Carapia México Universidad Autónoma Metropolitana Unidad Azcapotzalco Coordinación de Posgrado de Ciencias y Artes para el Diseño Primera edición impresa: febrero 2022 Primera edición electrónica en pdf: febrero 2022 http://hdl.handle.net/11191/8545 ISBN de la colección en versión impresa: 978-607-28-1322-9 ISBN No. 7 versión impresa: 978-607-28-2453-9 ISBN de la colección en versión electrónica: 978-607-28-1326-7 ISBN No. 7 versión electrónica: 978-607-28-2459-1 Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) https://creativecommons.org/licenses/by-nc-nd/4.0/ 2022: Universidad Autónoma Metropolitana, unidad Azcapotzalco, Coordinación de Posgrado de Ciencias y Artes para el Diseño. Se autoriza la consulta, descarga y reproducción con fines académicos y no comerciales o de lucro, siempre y cuando se cite la fuente completa y su dirección electrónica. Para usos con otros fines se requiere autorización expresa de la institución. Cordinación de Posgrado CyAD http://cyadposgrados.azc.uam.mx/ Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica de usuario para aplicaciones de salud Alicia López-Castañeda alice.lopez.c@gmail.com Beatriz Adriana González-Beltrán bgonzalez@azc.uam.mx Yadira Alatriste-Martínez yalatriste@azc.uam.mx Resumen La presente investigación es una revisión de la literatura gráficos son evaluados con criterios estéticos, dejando de sobre la correlación que existe entre la experiencia de usua- lado las funciones de comunicación, identificación, infor- rio y el diseño visual al momento de proponer interfaces mación, instrucción, presentación y metalingüística de los gráficas de usuario en aplicaciones de salud. Esta inves- gráficos. tigación proporciona las principales consideraciones que Palabras claves: se deben tomar en cuenta en el proceso de diseño de una interfaz gráfica de usuario en este tipo de aplicaciones, al e-salud, usar la experiencia del usuario como herramienta de retroa- experiencia de usuario,interfaz gráfica de usuario, limentación y de evaluación como sustento teórico de las diseño visual. propuestas de diseño visual. Se concluye que, aunque se reconoce la importancia del diseño visual, la evidencia em- Abstract: pírica es escasa. Además, la literatura menciona que existe una correlación, pero los detalles de cómo se establece la This research is a review of the literature on the co- correlación es inconsistente. De manera particular, existen rrelation that exists between user experience and vi- estudios que reconocen dicha correlación; sin embargo, sual design when proposing graphical user interfaces su aplicación, impacto, efectos positivos y negativos y las in health applications. This research provides the main métricas de evaluación sobre la UX están orientadas prin- considerations that should be taken into account in the cipalmente a resolver problemas de usabilidad, donde los design process of a graphical user interface in these ty- No. 7, ISBN 978-607-28-2459-1 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica pes of applications, by using the user experience as a fe- que orienten al usuario sobre cómo utilizar la función de edback and evaluation tool as theoretical support for the la herramienta, en el caso de diseñadores. Aunque ambos design proposals. visual. It is concluded that although casos permiten mejorar la experiencia del usuario, las the importance of visual design is recognized, empiri- prácticas de dichas soluciones están basadas en propuestas cal evidence is scarce. Furthermore, the literature men- hechas en campos de estudio aislados, sin una integración, tions that there is a correlation, but the details of how the dedicados a aplicar técnicas y métodos, con nada o muy correlation is established is inconsistent. In particular, poca evidencia comprobable de la opinión del usuario. there are studies that recognize this correlation; Howe- (Ritter and Winterbottom 2017). ver, its application, impact, positive and negative effects, and the evaluation metrics on the UX are mainly aimed La Interfaz Gráfica de Usuario (GUI, por sus siglas at solving usability problems, where graphics are eva- en inglés), es el resultado del trabajo entre desarrollado- luated with aesthetic criteria, leaving aside communica- res y diseñadores que buscan la mejor manera de que el tion, identification, information functions., instruction, usuario pueda interactuar y comunicarse con la compu- presentation and metalinguistics of the graphs. tadora, todo esto se puede lograr mediante el uso de ele- mentos visuales reconocibles y fáciles de comprender. (Lamarca, 2004). El diseño visual: es la práctica de uti- Keywords: lizar elementos visuales (color, tipografía, ilustraciones, ehealth, fotografía, entre otros) para comunicar un mensaje, en UX, el que se coordina, gestiona y administra la informa- GUI, visual design. ción visual de manera que se categoriza las variables visuales y se estudian los procesos cognitivos, donde Introducción la ejecución de cada proyecto de diseño se encuentra determinado por la naturaleza de la información y el Crear una aplicación web o móvil para el ámbito de la salud soporte de la imagen. (Ritter and Winterbottom 2017). utilizando el proceso de diseño denominado experiencia La correlación entre el diseño visual, el diseño de GUI de usuario (UX, por sus siglas en inglés) parece simple, y la UX de una aplicación, establece relaciones recípro- pero con frecuencia las organizaciones y equipos no lo cas que pueden llegar a afectar la UX de una aplicación aplican, debido a que los equipos de desarrollo que las que pueden ser un problema cuando se usa el enfoque diseñan o desarrollan generalmente se refieren a su propia UX sin un análisis que permita identificar cuáles y en experiencia como usuario, en términos de lo que tiene qué medida los componentes que los integran afectan sentido para ellos personalmente cuando interactúan con o benefician la UX de una aplicación en cada punto de alguna característica del artefacto desarrollado o diseñado, contacto del usuario. Ahora bien, la importancia de con- obteniendo simplemente su percepción de lo que creen tar con estudios sobre estas correlaciones sentará las ba- que disfrutará el usuario objetivo y cómo interactúa con ses que los diseñadores visuales deben considerar para esta función. Desde esta perspectiva, las suposiciones de aportar desde su área a la UX de una aplicación ehealth. diseño no representan los deseos del mercado objetivo El término ehealth se refiere al uso seguro de las tec- real y la captación de necesidades no son precisas para nologías de la información y las comunicaciones en apo- el usuario previsto que utilizará la aplicación. Existe una yo de la salud y los campos relacionados con la misma, tendencia por parte de diseñadores y desarrolladores de incluidos los servicios y procesos de atención médica, centrarse en solo algunos componentes exclusivos de su la prevención, la vigilancia de la salud, el tratamiento, área de estudio. Por ejemplo, el uso de un filtro para limitar la literatura sanitaria y la educación, el conocimiento los resultados de búsqueda en el caso de desarrolladores y la investigación sobre la salud ehealth puede ayudar o el centrarse en los elementos de la interfaz de usuario, a reducir costos y también incluye un alto potencial de como la iconografía para únicamente dar pistas visuales ventas. (Statista, 2020) pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 140 Alicia López-Castañeda Dentro del contexto comercial en un marco visual, la sobre la revisión sistemática de la literatura que se llevó UX está haciendo que la marca1 de un producto se adap- a cabo y la última presenta los resultados encontrados. te visualmente a cualquier escenario y plataforma po- sible en la que pueda encontrarse. El usuario observa a 1. UX y las diversas especialidades de diseño través de elementos visuales, como colores, líneas, tipo- La UX es una disciplina amplia con un complejo conjun- grafía, imágenes, gráficos, iconografía y otros elemen- to de componentes interconectados que contribuyen a la tos visuales más, a la marca u organización. El uso de experiencia general que un usuario tendrá con un pro- estos elementos visuales puede tener un impacto nega- ducto digital2 (Ritter and Winterbottom 2017). El campo tivo o positivo en la construcción de una conexión emo- de estudio de la UX se encuentra en un cambio constante cional con el usuario, que impactan en la UX, que, si y con esta expansión viene una variedad de diferentes bien las emociones del usuario están fuera del poder de especialidades que se ramifican desde la UX hacia otros control del diseñador, existen elementos que sí se pue- diseños (como diseño de producto, diseño interactivo, den controlar de acuerdo a la literatura. Como el estudio diseño de interacción, diseño de UI, por mencionar al- de Hamine et al. 2015, con contribuciones orientadas a gunos) y disciplinas (como la interacción humano com- mejorar las prácticas en el diseño visual y el manejo de putadora, mercadotecnia, entre muchas más). Aunque iconografía en la interfaz gráfica de usuario para aplica- algunas especialidades de diseño parecen similares (es- ciones ehealth que aporten positivamente a la UX. pecialmente porque la mayoría de ellas tienen la palabra El presente estudio parte de la hipótesis de que, si el diseño en el título), tienen puntos focales distintivos que diseño visual tiene efectos en la UX de las aplicaciones, diferencian unas de otras y contribuyen a la imagen más entonces conocer los elementos que la afectan y el nivel amplia del diseño centrado en el humano (HCD, por sus de afectación permitirá hacer mejoras en las prácticas siglas en inglés). Ver tabla 1. de diseño visual de las GUI para aplicaciones ehealth. El diseño visual y diseño de GUI, es desarrollado Los objetivos de este trabajo son: 1. Recopilar informa- principalmente (aunque no exclusivamente) por profe- ción sobre la correlación que se establece entre la UX sionales en gráficos: como diseñadores gráficos, diseña- de una aplicación ehealth y el diseño de interfaz gráfica dores de la comunicación gráfica, artistas digitales en los de usuario. 2. Identificar las principales dificultades en mejores casos, por mencionar algunos (Gutiérrez 2020), el proceso de diseño al usar la UX como herramienta (Suárez,2011). Los principios para evaluar en este estu- de retroalimentación. 3. Reconocer los principales ins- dio se harán desde la perspectiva teórica de diseño de trumentos de evaluación, para medir la eficiencia de las la comunicación visual a través de gráficos, en un mar- propuestas de diseño para aplicaciones. El propósito es co que permita rastrear las métricas de: comunicación, contribuir al estudio del diseño de nuevas herramientas identificación, información, instrucción, presentación y para ehealth. El texto consta de tres secciones: la prime- metalingüística, tanto en el diseño visual como en el di- ra explica los constructos teóricos sobre la UX y su rela- seño de GUI para una aplicación ehealth. ción con los diversos diseños y el diseño visual en apli- caciones ehealth, la segunda sección presenta el análisis Ritter and Winterbottom en su lista de especialida- des de diseño y UX dejan claro que cada una juega un papel importante en la experiencia del usuario y la in- 1. Marca. Según la Asociación Americana de Marketing, la marca teracción en productos digitales, pero, cada una cumple es un nombre, un término, una señal, un símbolo, un diseño, o una una función específica (Ritter and Winterbottom 2017). combinación de alguno de ellos que identifica productos y servicios de una empresa y los diferencia de los competidores. Sin embargo, Una interfaz de usuario (UI) es una capa interactiva la marca ha pasado de ser un nombre o símbolo, ha convertirse en entre la persona (usuario) y la tecnología (dispositivo). una herramienta estratégica en el entorno económico actual. Por lo cual la marca ha pasado de comercializar productos a vender sensaciones y soluciones, donde no solo se venden los atributos finales del producto, sino los intangibles y emocionales del mismo. 2. Producto digital: hace referencia a una aplicación. No. 7, ISBN 978-607-28-2459-1 141 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica Tabla 1. Distinción de las diferentes ramificaciones de la UX hacia la variedad de términos de diseño. Elaboración propia basada en el libro UX for the Web Build websites for user experience and usability de Ritter and Winterbottom y otros autores. pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 142 Alicia López-Castañeda Los diez principios heurísticos para el diseño de inter- satisfacerse primero antes de que una persona pueda faces de usuario del Grupo Norman y Nielsen son un cumplir con el siguiente nivel de necesidad, que es se- referente destacado en el diseño de UI. Estos principios guridad y protección. El modelo propuesto está repre- incluyen puntos de usabilidad cruciales que deben in- sentado por una pirámide de 5 niveles que se construye corporarse en el análisis UX tales como la coherencia, desde la parte inferior, el primer nivel es la fisiología, las notificaciones visibles del sistema, la prevención de seguridad en el segundo, afiliación en el tercero, reco- errores y la libertad para que el usuario tenga el control. nocimiento en el cuarto, autorrealización en quinto y Que si bien estos principios son los más usados para ga- punta de la pirámide. rantizar una buena UX no son los únicos (Group, 1998- El mismo principio de la jerarquía de necesidades 2021). humanas de Maslow se aplica a la jerarquía del diseño Como se puede observar en la lista de Ritter and emocional de Aaron Walter4. Según Walter, el diseño de Winterbottom, el diseño visual es un componente no un producto digital debe ser funcional primero, antes de solo para hacer visualmente atractivo un producto di- que pueda ser confiable o utilizable, y a la mayoría de gital como lo llaman los autores o aplicación como se los productos les falta el nivel superior de placer porque usa en este estudio, sino también para comunicar, apo- las necesidades básicas del usuario no están satisfechas. yar la usabilidad e interacción para garantizar que todos Los seres humanos crean confianza y conexión emo- los puntos de contacto respalden la navegación por la cional a través de la retroalimentación, por ejemplo: la aplicación y los objetivos finales del usuario, los cuales interacción de una persona que hace o dice algo y la se- tienen influencia en las emociones del usuario. Del mis- gunda persona responde de manera positiva o negativa. mo modo que lo afirma Grant, W. (2018) cuando dice Esta interacción de ida y vuelta genera confianza o hace que buscar la metáfora visual adecuada para un icono que se pierda; un ciclo de retroalimentación negativa es difícil, pero gracias a los gráficos los usuarios se be- romperá la confianza y en última instancia, también la nefician de una mayor familiaridad en el uso de la apli- conexión emocional. cación y las dificultades de comunicación (culturales de idioma, edad, etc.) (Grant, W. 2018). De la misma forma, el usuario interactúa con un producto digital, navegando, leyendo, rellenando un A este respecto las emociones experimentadas a tra- formulario, comprando, consultando, etc. Si el produc- vés de las interacciones de uso con una aplicación son to digital responde con estímulos positivos como una parte de la UX. La jerarquía de las necesidades huma- fácil navegación para acceder a todo el contenido o un nas de Maslow es una teoría motivacional en psicología formulario en línea es fácil de usar con campos claros, inventada por Abraham Maslow3 en 1943 para explicar la conexión emocional se fortalece. Al repetir este pro- la forma en que los humanos están motivados por sus ceso, se puede construir una fuerte conexión emocional necesidades. Maslow teorizó que las necesidades fisio- con el usuario. lógicas más básicas, como los requisitos físicos para la supervivencia humana son la comida y el agua y deben A través de la señal visual se fortalece la conexión emocional entre dos humanos, y de la misma manera que las señales visuales las microinteracciones y el dise- 3 . Abraham Maslow: Psicólogo estadounidense conocido como uno de los fundadores y principales exponentes de la psicología ño de anticipación mejoran la conexión emocional entre humanista, una corriente psicológica que postula la existencia de una tendencia humana básica hacia la salud mental, que se manifestaría 4 . Aaron Walter: Orador principal y facilitador de talleres sobre los como una serie de procesos de búsqueda de autoactualización y temas de diseño de productos, colaboración y ejecución de equipos autorrealización. El desarrollo teórico más conocido de Maslow es de diseño. Ha hablado en conferencias, empresas y eventos en la pirámide de las necesidades, modelo que plantea una jerarquía todo el mundo. Quien escribe sobre los principios del diseño para de las necesidades humanas, en la que la satisfacción de las humanos y aborda los desafíos más nuevos que han surgido para necesidades más básicas o subordinadas da lugar a la generación los profesionales de la web encargados de llegar a una audiencia en sucesiva de necesidades más altas o superordinadas constante cambio. No. 7, ISBN 978-607-28-2459-1 143 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica el usuario y el producto digital, como lo señala Ritter5 Una micro interacción funcional es una validación vi- and Winterbottom6. sual en tiempo real cuando un usuario ingresa una nueva Dar recompensas visuales es un factor importante contraseña, o un botón de envío atenuado para un for- en la construcción de una conexión emocional entre los mulario en línea, que solo se activa cuando el usuario ha humanos como las del lenguaje corporal. Cuando una completado todos los campos. persona le guiña un ojo a otra persona, el indicador vi- Como explica Ritter and Winterbottom el uso de mi- sual del guiño es la confirmación de que a una persona crointeracciones es un ejemplo del uso del lenguaje vi- le gusta o aprueba a la otra. A través de esta señal visual sual para mejorar la UX de un producto digital. La carga se fortalece la conexión emocional entre estos dos hu- cognitiva es un término psicológico que se utiliza para manos. De la misma manera las señales visuales como describir la cantidad de esfuerzo mental que requiere las microinteracciones y el diseño de anticipación pue- una persona para realizar una tarea específica. Si la fun- den mejorar la conexión emocional entre el usuario y un cionalidad y el diseño de la interfaz de usuario de un producto digital. Las microinteracciones son animacio- producto digital no reducen la carga cognitiva, entonces nes simples de la interfaz de usuario que transmiten un la UX no ha logrado crear una experiencia de usuario mensaje al usuario mientras interactúa con el producto ligera y agradable para el usuario. Este es otro aspecto digital (Ritter and Winterbottom 2017). Estas microin- al que el diseño visual contribuye. teracciones pueden ser funcionales al guiar al usuario a Las aplicaciones pueden ser atractivas de primera través de una serie de pasos para completar una tarea, instancia, pero deben ser fáciles de usar, al utilizar las o pueden tener un valor puramente de entretenimiento. mejores prácticas de interfaz de usuario estándar de la 5 . Marli Ritter: es especialista en UX y predicadora de accesibilidad industria, como el diseño de materiales de Google y las web que comenzó como diseñadora web básica en los años 90. Al pautas de interfaz humana de iOS, la interfaz de usuario crear sitios web, reconoció el vínculo fundamental entre la marca y no solo será estéticamente agradable, sino que también el diseño desde el principio y pasó los siguientes dos años estudiando cumplirá con todos los requisitos de usabilidad. la comunicación de marca en Vega School of Brand Leadership en Gauteng, Sudáfrica. Trabajó en el sector del comercio electrónico Los fundamentos de la UX, dentro del proceso de al unirse al equipo de Comair Limited, creando diseños digitales centrados en la marca, mientras desarrollaba frontend en marcas UCD, juegan un papel importante en la creación de una de viajes como kulula.com, Holiday Tours, mtbeds, GoTravel24 y aplicación de calidad que los usuarios disfruten usar. African Dream Holidays. La exposición a sistemas de comercio Las fases de investigación y concepto son esenciales electrónico complejos que atienden a una amplia base de usuarios para sentar las bases, pero el diseño visual da vida al la hizo más decidida a aprender técnicas de diseño y desarrollo que mejorarán la experiencia del usuario. En los últimos años, Marli ha concepto y apoyo a la comunicación, la interacción y creado conciencia activamente dando charlas en MeetUps locales y carga cognitiva. Las diferentes especialidades de dise- presentando un documento sobre la importancia de la accesibilidad ño que construyen la UX de una aplicación la afectan web para los productos digitales cotidianos en la Conferencia anual de UX de Sudáfrica. o benefician en diferentes momentos de su desarrollo, por lo que identificarlas, distinguirlas y estudiarlas por 6 . Cara Winterbottom: estudiosa de la vida de las personas, las ideas separado es relevante para su óptimo desarrollo. y los datos, con una formación académica, con títulos en psicología e informática. Con un doctorado en ciencias de la computación que lo obtuvo mediante el diseño, la construcción y la prueba de 2. UX y el diseño visual en aplicaciones ehealth usuarios para una herramienta de autoría para que los principiantes creen interacciones 3D para entornos virtuales. Durante los últimos El diseño visual es muy influyente para la información 6 años, ha trabajado como consultora independiente, desarrollando y los servicios de salud que se brindan a través de un aún más estas habilidades en una variedad de entornos y para una dispositivo digital o Internet, conocido como ehealth variedad de productos. Las áreas de la experiencia del usuario (Eysenbach, 2001). en las que está más interesada son los métodos de investigación cualitativos y cuantitativos, especialmente las pruebas y análisis Las pruebas de la UX siguen siendo poco investiga- de usabilidad, la arquitectura de la información y el diseño de interacción. das en la literatura relacionadas con aplicaciones para la pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 144 Alicia López-Castañeda salud. Algunos estudios han reconocido la importancia se evaluó el rigor de la mayoría de las medidas y se pro- de optimizar la UX de las aplicaciones ehealth, como porcionó poco sobre las aplicaciones de los datos. To- los estudios de (Rezae et al. 2020) (Tremblay et al. 2019) rous (2017) por su parte en una revisión de 11 estudios (Moqeem et al. 2018) (Sharma et al. 2017) (Heffernan et encontró una forma de prueba de la UX en la mayoría al. 2016) (Harte et al. 2014) pero pocos brindan orienta- de los estudios revisados, los cuales por lo general ob- ción sobre la mejor manera de hacerlo. tienen solo comentarios generales y no estructurados de Algunos autores como Bakker (2016) recomiendan los usuarios durante todo el proceso de diseño. utilizar funciones de recordatorio, diseños de interfaz También Nicholas y col. 2017 investigaron cómo los sencillos y proporcionar enlaces a servicios de apoyo en usuarios formulan evaluaciones de la UX y examinaron caso de crisis para mejorar la participación de los usua- las tendencias en las reseñas de usuarios públicos de las rios. Sin embargo, en este trabajo no se exploraron los aplicaciones de teléfonos inteligentes para el trastorno métodos disponibles para recopilar y utilizar datos de la bipolar. Los usuarios se centraron en la funcionalidad, UX en el diseño para realizar estas recomendaciones. los efectos percibidos en las relaciones con los médicos De igual forma Feather (2016) llevó a cabo una revi- y la facilidad con la que las aplicaciones se pueden inte- sión sistemática donde se examinaron 21 estudios sobre grar en los planes de atención existentes. Sin embargo, intervenciones basadas en la web para afecciones de sa- las posibles aplicaciones de estos datos recabados con los lud mental, como la depresión. En la que se reportaron usuarios no se examinaron en detalle. Obteniendo una hallazgos sobre la recopilación de datos para obtener in- comprensión limitada de las características del usuario. formación sobre la UX. Reportando que con mayor fre- Rezae 2020, Tremblay 2019, Moqeem y col. 2018, se- cuencia la información recabada está orientada a mejo- ñalan que el diseño visual de aplicaciones ehealth debe rar la comprensión de las barreras de uso. Así como los tener las siguientes características. Ver tabla 2. métodos utilizados fueron métodos cualitativos, como Las prácticas de diseño y las evaluaciones de servi- entrevistar a los usuarios durante las pruebas de campo cios de campo siguen siendo obstáculos para aprovechar de una intervención. Otros aplicaron cuestionarios para todo el potencial de las aplicaciones para mejorar los examinar la UX a través de constructos, incluida la sa- resultados de salud. Los métodos de diseño basados en tisfacción y aceptabilidad del usuario. Sin embargo, no la UX, el reporte de datos de la UX y el desarrollo de es- Tabla 2. Características de diseño visual sugeridas por Rezae 2020, Tremblay 2019, Moqeem y col. 2018. No. 7, ISBN 978-607-28-2459-1 145 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica tándares para las pruebas de la UX han sido reconocidos estética web, complejidad visual, presentaciones, pro- como temas clave tal como lo señala Torous J, Anders- totipado e imágenes persuasivas. (Lazard and Mackert son G and Bertagnoli A, 2019. Sin embargo, hace falta 2015) una síntesis de enfoques potenciales para ayudar a guiar a los investigadores, médicos, pacientes, desarrollado- 3. Revisión de la literatura res y diseñadores. La necesidad del desarrollo de más Se hizo una investigación documental cualitativa y estudios para identificar oportunidades para futuras cuantitativa en la que se recopiló y seleccionó informa- evaluaciones de UX en ehealth es un hecho en el diseño ción a través de la lectura de documentos, libros, revis- y desarrollo de aplicaciones ehealth. (Lemon et al. 2020) tas, páginas web y foros. El diseño visual es parte de la UX de las aplicaciones, Se realizaron consultas y búsquedas en bases de da- Lazard and Mackert (2015) señalan como el diseño vi- tos de artículos que involucran el uso de UX y ehealth, sual puede afectar a una aplicación ehealth en cuestión el diseño de aplicaciones para ehealth, así como la re- de milisegundos, la importancia de las primeras impre- levancia de los gráficos en la UX de aplicaciones para siones y la exposición inicial de un usuario al diseño a ehealth. Esta revisión sistemática siguió las pautas de través de una interfaz a menudo se pasa por alto como inclusión que se muestran en la Tabla 3. una fase relevante en el diseño de la promoción de la salud electrónica, lo que provoca situaciones en las que Para la identificación de las fuentes de datos se rea- el espectador desacredita o descarta inmediatamente la lizaron búsquedas en las bases de datos de Bidi UAM, información sobre la salud presentada (Sillence, Briggs, Web of Science, MedicLatina, Dataset search Google, Harris y Fishwick, 2007a). Engineering Village, Wiley Online library y World Scientific7. La estrategia de búsqueda incluyó una com- El diseño visual es muy influyente para la informa- binación de términos de UX and ehealth como búsqueda ción y los servicios de salud que se brindan a través de principal, seguido de la combinación de palabras como: dispositivos digitales o Internet, conocido como ehealth telemedicine and UX, UX and visual desing, UX guie- (Eysenbach, 2001). El diseño visual juega un papel fun- health. La estrategia de búsqueda inicial se aplicó en damental en el desarrollo de ehealth, y tiene un gran la Bidi UAM y posteriormente, se adaptó para el resto impacto en el potencial de divulgación para la comuni- de las bases de datos, utilizando la sintaxis y las espe- cación sanitaria adecuada. El diseño influye en las eva- cificaciones de búsqueda optimizadas para cada motor luaciones iniciales de los espectadores de las pantallas de búsqueda. Se realizaron búsquedas en libros blan- electrónicas de información de salud, así como impacta cos o publicaciones no revisadas por pares como Seiden directamente en la probabilidad de que se atienda y eva- (2014), Duarte (2015), Marin (2015), Barahona (2019), lúe favorablemente la información, acciones esenciales también en literatura gris Ver Tabla 4. para procesar los conceptos de salud presentados. Las personas con pocos conocimientos sobre salud son sus- Se realizaron búsquedas documentales a partir de ceptibles de empeorar sus resultados de salud sin la in- categorías preestablecidas, en bases de datos en inglés formación adecuada sobre salud, de manera que se be- como: Bidi UAM, con (730 resultados sobre Teleme- neficiarán enormemente de la aplicación de principios 7 . Bidi UAM https://bidi.uam.mx/index.html; Web of Science de diseño visual basados en la teoría. Los principios de ht t ps: // b id i .u a m.m x:4529/ WOS _Gene r a lSea rch _ i nput . diseño visual que han demostrado atraer e involucrar do?product=WOS&search_mode=GeneralSearch&SID=6DYApQ a las audiencias son el primer paso necesario para la J418XcloN23na&preferencesSaved=; MedicLatina http://bidi.uam. entrega eficaz del mensaje. Los principios de diseño mx:5647/ehost/search/basic?vid=0&sid=38d06a0f-3908-4285-8f63-8686f5db49b3%40sessionmgr4008; Dataset search Google visual, que impactan directamente en el aumento de la https://datasetsearch.research.google.com/; Engineering Village atención, las evaluaciones favorables y las mayores ha- https://www.elsevier.com/es-mx/solutions/engineering-village bilidades de procesamiento de información, incluyen: Wiley Online library https://bidi.uam.mx:3610/; y World Scientific https://bidi.uam.mx:4733/ pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 146 Alicia López-Castañeda Tabla 3. Criterios de inclusión y exclusión Tabla 4. Fuentes de literatura gris. dicine and UX, 3 resultados UX and visual desing, 19 con evaluación de estudios utilizando cuadros bibliomé- resultados UX and GUI&ehealth),Web of Science (5 re- tricos para resolver la utilidad. Se incluyeron revisiones sultados ehealth), MedicLatina (26 resultados ehealth, de la literatura, estudios observacionales, ensayos con- 25 resultados UX design or user experience) en Dataset trolados aleatorios y estudios de casos que describen el search Google (5 resultados de UX & ehealth, 100 resul- uso de los gráficos para mejorar la UX de aplicaciones tados de UX, 100 resultados de ehealth) y Engineering ehealth. Se realizaron listas de referencias de los estu- Village (10 resultados UX and ehealth), Wiley Online dios incluidos y búsquedas en la literatura gris. Se rea- library (7 resultados UX and ehealth), World Scientific lizó un análisis temático cualitativo para sintetizar los (1 resultados UX and ehealth), publicados entre enero resultados. Los resultados de la búsqueda en la base de de 2015 y diciembre 2020. Se utilizó una combinación datos tienen un total de 759 artículos después de elimi- de términos de búsqueda de “Telemedicine and UX”, nar los duplicados, de los cuales se seleccionaron 129 “UX and ehealth”, or “visual desing” or “GUI”. En la artículos que cumplieron los criterios de inclusión de elección de artículos se utilizó una selección por temas, (UX, ehealth,), de los cuales se identificaron 41 artículos No. 7, ISBN 978-607-28-2459-1 147 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica Tabla 5. Pautas de inclusión. Parte 1 de 2. pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 148 Alicia López-Castañeda Tabla 5. Pautas de inclusión. Parte 2 de 2. No. 7, ISBN 978-607-28-2459-1 149 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica para revisión final sobre (UX, ehealth y diseño de UI). ción de datos. Se encontró que solo 6 fuentes hacían alguna refe- El presente estudio es parte del sustento teórico para rencia a la relación entre UX, gráficos, UI e InfoVis de el desarrollo de aplicaciones para facilitar la búsqueda de los cuales tres son estudios de caso, dos son revisiones la información y materiales educativos para pacientes, de diseño y uno revisión de la literatura. Ver tabla 5. cuidadores y familias sobre el cuidado de salud. Resultados Discusión En el estudio realizado se encontró que de un universo Las principales limitaciones del estudio es la valida- de 759 artículos sobre el estudio de UX y ehealth sólo el ción de la hipótesis debido a la limitada evidencia de los 1.5% de ellos mencionan alguna relación de la UX y el elementos visuales que afectan la UX en aplicaciones diseño visual en aplicaciones para ehealth. Donde nin- ehealth. guno lo hizo a profundidad y con precisión. El porcen- taje indica un bajo estudio sobre el diseño visual en el ehealth. El 100% definen lo que es ehealth y describen la importancia de la UX, de los 6 estudios que cumplieron con los criterios de inclusión, en ninguno se encontró alguna métrica para evaluar el diseño visual. Solo dos de los cuatro estudios consideraron el diseño y visua- lización de datos como un elemento que afecta la UX. Conclusiones La evidencia empírica es escasa sobre la correlación que se establece en aplicaciones para ehealth entre la UX y el diseño visual. La literatura menciona que existe una correlación, pero los detalles de cómo se establece la correlación es inconsistente. Existen estudios que re- conocen la correlación; sin embargo, su aplicación, im- pacto, los efectos positivos y negativos, las métricas de evaluación sobre la UX están orientadas principalmente a resolver problemas de usabilidad, los gráficos son eva- luados principalmente con criterios estéticos sin consi- derar sus funciones de comunicación, identificación, in- formación, instrucción, presentación y metalingüística. La importancia del diseño visual es reconocido, pero no hay evidencia de su aplicación y evaluación en la UX, las métricas de UX no evalúa las diversas funciones que están cumpliendo los gráficos en la GUI de aplicaciones ehealth. Se recomienda desarrollar más estudios sobre las diversas funciones e implicaciones que los gráficos tienen en las GUI para ehealth. Así como la visualiza- pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 150 Alicia López-Castañeda Referencias Bakker D, Kazantzis N, Rickwood D, et al. (2016) Mental IDSA. (2020). Industrial Designer Society of America. health smart-phone apps: Review and evidence- based recommendations for future developments. Interaction design foundation. (2002). Interaction design JMIR Ment Health 3, e7. foundation. Obtenido de https://www.interaction-design.org/literature/topics/ux-design Barahona, J. (2019). Investigación UX: Metodos y herramientas para diseñar experiencia de usuario. Interaction design foundation. (2002). Interaction design United States: AyerViernes Libros. foundation. Obtenido de https://www.interaction-design.org/literature/topics/ux-design Cyr, D., Head, M., & Ivanov, A. (2006). Design aesthetics leading to m-loyalty in mobile commerce. Lamarca. (2004). Hipertexto: El nuevo concepto de Information & Management, 43(8), 950-963. documento en la cultura de la imagen. Duarte, J. M. (2015). Experiencia de Usuario (UX). Lemon, Christopher, Kit Huckvale, Kenneth Carswell, Argentina: Autores de Argentina. and John Torous. 2020. “A Narrative Review of Methods for Applying User Experience in the Design Eysenbach, G. (2001). What is e-health? Journal of and Assessment of Mental Health Smartphone Medical Internet Research, 3(2), e20. Interventions.” International Journal of Technology Feather JS, Howson M, Ritchie L, et al. (2016) Evaluation Assessment in Health Care 36(1):64–70. methods for assessing users’ psychological Marin, C. J. (2015). Guía UX. Aprende los principios experiences ofweb-based psychosocial inter- de la experiencia del usuario. United States: ventions: A systematic review. J Med Internet Res Createspace Independent Publishing Platiforme. 18(6), e181. Measuring U. (2004). Measuring U. Obtention de Gutiérrez, Susana Rodríguez. 2020. “Análisis https://measuringu.com/sus/ Prospectivo Del Diseño Gráfico En México Prospective Analysis of Graphic Design in Mexico.” Moqeem, Aasia A., Mirza Mansoor Baig, Hamid (8):109–20. GholamHosseini, and Farhaan Mirza. 2018. “Mobile Health Application Framework for an Ideal User Grant, W. (2018). 101 UX Principles: A Definitive Design Experience: A User-Centered Design Approach for Guide. Packt Clinicians.” Crimson Publishers 1(2):1–8. Group, N. N. (1998-2021). NNg Nielsen Norman Group. Nicholas J, Fogarty AS, Boydell K, et al. (2017) The Obtenido de https: / / www. nngroup. com / articles reviews are in: A qualitative content analysis / ten- usabilidad- heurística of consumer perspectives on apps for bipolar Harte, Richard P., Liam G. Glynn, Barry J. Broderick, disorder. J Med Internet Res 19, e105. Alejandro Rodríguez-Molinero, Paul M. A. Baker, Partheniadis, Konstantinos, and Modestos Stavrakis. Bernadette McGuiness, Leonard O’Sullivan, Marta 2019. Design and Evaluation of a Digital Wearable Diaz, Leo R. Quinlan, and Gearóid ÓLaighin. Ring and a Smartphone Application to Help Monitor 2014. “Human Centred Design Considerations for and Manage the Effects of Raynaud’s Phenomenon. Connected Health Devices for the Older Adult.” Vol. 78. Journal of Personalized Medicine 4(2):245–81. Rezae, Mortaza, Nigel Chen, David McMeekin, Tele Heffernan, Kayla Joanne, Shanton Chang, Skye Tamara Tan, Aneesh Krishna, and Hoe Lee. 2020. “The Maclean, Emma Teresa Callegari, Suzanne Marie Evaluation of a Mobile User Interface for People Garland, Nicola Jane Reavley, George Andrew on the Autism Spectrum: An Eye Movement Study.” Varigos, and John Dennis Wark. 2016. “Guidelines International Journal of Human Computer Studies and Recommendations for Developing Interactive 142(May):102462. EHealth Apps for Complex Messaging in Health Promotion.” JMIR MHealth and UHealth 4(1): e14. Ritter, Marli, and Cara Winterbottom. 2017. UX for the Web: Build Websites for User Experience and Usability. No. 7, ISBN 978-607-28-2459-1 151 Correlación entre la experiencia de usuario y diseño visual en la interfaz gráfica Seiden, J. G. (2014). Lean UX. Sebastopol: Universidad Internacional de la Rioja, S, A. Sillence, E., Briggs, P., Harris, P., & Fishwick, L. (2007a). Health Websites that people can trust - the case of hypertension. Interacting with Computers, 19(1), 32-42 Statista. (2020). Statista. Obtenido de https://www. statista.com/page/ehealth_outlook Suárez, G. (2011). Foro Alfa. Obtenido de https:// origenarts.com/ventajas-de-disen%CC%83adores- que-estudiaron-vs-disen%CC%83adores-sin- estudios/ Tremblay, Mélanie, Karine Latulippe, Anik M. C. Giguere, Véronique Provencher, Valérie Poulin, Véronique Dubé, Manon Guay, Sophie Ethier, Andrée Sévigny, Maude Carignan, and Dominique Giroux. 2019. “Requirements for an Electronic Health Tool to Support the Process of Help Seeking by Caregivers of Functionally Impaired Older Adults: Co-Design Approach.” Journal of Medical Internet Research 21(6):1–16. Torous J, Firth J, Mueller N, et al. (2017) Methodology and reporting of mobile heath and smartphone application studies for schizophrenia. Harv Rev Psychiatry 25, 146–154. Torous J, Andersson G, Bertagnoli A, et al. (2019) Towards a consensus around standards for smartphone apps and digital mental health. World Psychiatry 18,97–98. Universität de Basilea. (2017). Universität de Basilea Departement Public Health. Obtenido de https:// nursing.unibas.ch/de/forschung/forschung-227/ forschung/smile/ Ward Cunningham. (2001). Manifesto for Agile Software Development. Obtenido de https:// agilemanifesto.org/ World Health Organization. (2021). World Health Organization. Obtenido de https://www.who.int/ ehealth/about/e pp. 139-152; recibido 2021-03-31; aceptado 2021-08-31 152