Diseño y desarrollo de una metodología de evaluacion de la UX · Diseño y desarrollo de una metodología de evaluación de la UX 5 Resum Avui dia l'èxit d'una aplicació depèn

Diseño y desarrollo de una

metodología de evaluación

de la UX

Grado en Ingeniería Multimedia

Trabajo Fin de Grado

Autor: Clara Saquero Ros

Tutor/es: José Vicente Berná Martínez

Febrero 2019

Ingeniería Multimedia, Universidad de Alicante

Diseño y desarrollo de una metodología de evaluación de la UX

3

Resumen

Hoy en día el éxito de una aplicación depende de múltiples factores, más allá de lo eficiente

y efectiva que sea la propia lógica de negocio, elementos tales como las campañas de

difusión y publicidad, la expectación que se puede generar entorno a la herramienta, el

oportunismo temporal, etc. Uno de estos factores ampliamente reconocidos y que hoy

componen incluso líneas de investigación completas es la conocida como Experiencia de

Usuario (UX). El concepto es controvertido pues ni siquiera la comunidad se pone de

acuerdo en lo que es y cómo se define. En UX se mezclan áreas como la usabilidad y

accesibilidad, el diseño gráfico o la psicología, pero también se mezclan otros ingredientes

como las emociones que despierta, los recuerdos que perduran y la capacidad de enganche

emocional que se puede producir.

En este trabajo fin de grado se ha llevado a cabo un estudio sobre todas estas áreas que

pueden componer la UX de una aplicación web o móvil, y cuáles son los elementos que han

de incluirse y la forma de hacerlo para provocar una UX favorable que incremente las

posibilidades de éxito de una aplicación. A partir de aquí se ha ideado una metodología de

análisis y evaluación que permita poder clasificar la experiencia de usuario de una

plataforma de forma objetiva. Por último, esta metodología se ha materializado en una

herramienta al alcance de cualquier desarrollador o analista, con la capacidad de obtener

una clasificación de la UX de dicha plataforma con independencia de la lógica de negocio

que exista detrás.


Abstract

Nowadays the success of an application depends on multiple factors, regardless of how

efficient and effective the business logic is, elements such as dissemination and advertising

campaigns, the expectation that can be generated around the tool, temporary

opportunism, etc. One of these factors widely recognized and that today compose even

complete lines of research is known as User Experience (UX). The concept is controversial

because not even the community agrees on what it is and how it is defined. UX mixes areas

such as usability and accessibility, graphic design or psychology, but also mixes other

ingredients such as the emotions it arouses, the memories that endure and the capacity for

emotional engagement that can be produced.

In this end-of-grade work a study has been carried out on all these areas that can compose

the UX of a web or mobile application, and which are the elements that must be included

and how to do it to provoke a favorable UX that increases the chances of success of an

application. From here an analysis and evaluation methodology has been designed to

classify the user experience of a platform in an objective way. Finally, this methodology

has materialized into a tool available to any developer or analyst, with the ability to obtain

a classification of the UX of that platform regardless of the business logic behind it.


5

Resum

Avui dia l'èxit d'una aplicació depèn de múltiples factors, més enllà de l'eficient i efectiva

que siga la pròpia lògica de negoci, elements tals com les campanyes de difusió i publicitat,

l'expectació que es pot generar entorn de l'eina, l'oportunisme temporal, etc. Un d'aquests

factors àmpliament reconeguts i que avui componen fins i tot línies de recerca completes

és la coneguda com a Experiència d'Usuari (UX). El concepte és controvertit doncs ni tan

sols la comunitat es posa d'acord en el que és i com es defineix. En UX es barregen àrees

com la usabilitat i accessibilitat, el disseny gràfic o la psicologia, però també es barregen

altres ingredients com les emocions que desperta, els records que perduren i la capacitat

d'enganxe emocional que es pot produir.

En aquest treballe fi de grau s'ha dut a terme un estudi sobre totes aquestes àrees que

poden compondre la UX d'una aplicació web o mòbil, i quins són els elements que han

d'incloure's i la forma de fer-ho per a provocar una UX favorable que incremente les

possibilitats d'èxit d'una aplicació. A partir d'ací s'ha ideat una metodologia d'anàlisi i

avaluació que permeta poder classificar l'experiència d'usuari d'una plataforma de forma

objectiva. Finalment, aquesta metodologia s'ha materialitzat en una eina a l'abast de

qualsevol desenvolupador o analista, amb la capacitat d'obtenir una classificació de la UX

d'aquesta plataforma amb independència de la lògica de negoci que existisca darrere.



7

Motivación, justificación y objetivo general

Siempre me ha parecido que muchos desarrolladores no terminaban de hacer las cosas

bien, siempre implementaban la funcionalidad y ahí quedaba la cosa, no pensaban si luego

ponían cada elemento en el sitio correcto y si les decías que te parecía que tendría que

estar situado de otra manera entonces: “¿qué más da?, no es importante”.

Un texto incoherente, un botón que no es igual que los demás o una imagen que no encaja

en el lugar elegido me llama la atención enseguida y me pregunto: ¿cómo alguien ha sido

capaz de escribir este texto tan mal redactado, esta pregunta tan mal formulada?, ¿quién

puede pasar por alto este botón que claramente no es igual a los demás y, encima no está

situado donde debería?

Todo esto me creaba una sensación de incomodidad cada vez que navegaba por esa

página, cada vez que iba a hacer clic sobre ese botón o cada vez que leía ese texto que

sabía que el usuario no entendería sin leerlo dos o tres veces.

En la segunda mitad de cuarto curso descubrí que había un ámbito entero a estudiar y

cuidar todos esos detalles que algunos desarrolladores pasan por insignificantes a pesar

de su importancia, no para la funcionalidad, sino para crear la comodidad y confianza

necesaria en el usuario, este ámbito se llamaba Experiencia de Usuario (del inglés, User

Experience o UX).

Este trabajo es en principio viable, ya que se trata de una recopilación de los principios de

la UX, exponiendo algunos casos prácticos que muestren la teoría aplicada y diseñar una

herramienta que, mediante preguntas, examine el grado de experiencia de usuario.

Actualmente existen diversos estudios sobre la experiencia de usuario y cómo mejorarla.

Sin embargo, estas no ayudan a evaluar si la experiencia de usuario de mi producto es

actualmente buena o no.

El objetivo principal de este trabajo va a ser exponer los principios teóricos de la UX,

mostrar casos prácticos que ayuden a aplicarlos y diseñar y desarrollar una metodología

de evaluación para esta, que será lo que marque la diferencia.

Con todo esto, conseguiré adquirir y ampliar los conocimientos en el diseño de interfaces,

usabilidad y experiencia de usuario. Además, gracias a estos seré capaz de juzgar la UX de

distintos productos.



9

Agradecimientos

A mi familia, por estar ahí.

A mis amigos, por el apoyo en los buenos y en los malos momentos.

A mi tutor, por hacer que todo parezca más fácil.

A los responsables de mi formación de prácticas en Capgemini, por ofrecerme muchas

facilidades para el empujón final del TFG.

A mi pareja, por absolutamente todo.



11

“Persigue tus sueños o alguien te pagará para que persigas los

suyos”

Farrah Gray

“Como no sabía que era imposible, lo hice.”

Albert Einstein



13

Índice de contenidos

Resumen ................................................................................................................................................................... 3

Abstract ..................................................................................................................................................................... 4

Resum ........................................................................................................................................................................ 5

Motivación, justificación y objetivo general .............................................................................................. 7

Agradecimientos ................................................................................................................................................... 9

Índice de figuras .................................................................................................................................................. 17

Índice de tablas .................................................................................................................................................... 21

1. Introducción ................................................................................................................................................ 23

2. Estudio de viabilidad ............................................................................................................................... 27

2.1. Análisis DAFO .................................................................................................................................. 27

2.2. Análisis de riesgos ......................................................................................................................... 29

3. Planificación ................................................................................................................................................ 31

4. Estado del arte ............................................................................................................................................ 33

4.1. ¿Por qué es importante la UX? .................................................................................................. 33

4.2. ¿Qué es la UX? .................................................................................................................................. 35

4.3. ¿Qué puedo medir en una web de forma objetiva? .......................................................... 38

4.4. Herramientas ................................................................................................................................... 43

4.4.1. PageSpeed Insights ............................................................................................................. 44

4.4.2. Bankia Índicex ...................................................................................................................... 45

4.4.3. W3C Markup Validator ..................................................................................................... 47

4.4.4. WP Doctor .............................................................................................................................. 48

4.4.5. Website Grader .................................................................................................................... 50

4.4.6. GTMetrix ................................................................................................................................. 51

4.5. Conclusiones .................................................................................................................................... 52

5. Objetivos ....................................................................................................................................................... 55

6. Metodología ................................................................................................................................................. 57

6.1. Estudio teórico y recopilación de información.................................................................. 57


6.2. Recopilación de las propiedades que componen la UX .................................................. 57

6.3. Desarrollo de la herramienta .................................................................................................... 57

6.4. Herramientas software ............................................................................................................... 58

7. Desarrollo de la metodología de evaluación de la UX ................................................................ 59

7.1. Objetivo de la metodología ........................................................................................................ 59

7.2. Definición de las áreas a evaluar ............................................................................................. 60

7.3. Definición de las pautas a evaluar .......................................................................................... 62

7.3.1. Lógica Visual .......................................................................................................................... 63

7.3.2. Contenidos (textos) ............................................................................................................ 68

7.3.3. Color y Contraste ................................................................................................................. 69

7.3.4. Iconos ....................................................................................................................................... 72

7.3.5. Menú de Navegación .......................................................................................................... 74

7.3.6. Búsqueda ................................................................................................................................ 75

7.3.7. Tiempo de Carga .................................................................................................................. 76

7.3.8. Ayuda ....................................................................................................................................... 78

7.3.9. Formularios ........................................................................................................................... 80

7.3.10. Links ......................................................................................................................................... 84

7.3.11. Botones .................................................................................................................................... 85

7.3.12. Móvil ......................................................................................................................................... 88

7.4. Puntuaciones ................................................................................................................................... 90

7.5. Definición de las cuestiones ...................................................................................................... 90

7.5.1. Lógica Visual .......................................................................................................................... 92

7.5.2. Contenidos (textos) ............................................................................................................ 93

7.5.3. Color y Contraste ................................................................................................................. 93

7.5.4. Iconos ....................................................................................................................................... 94

7.5.5. Menú de Navegación .......................................................................................................... 94

7.5.6. Herramienta de Búsqueda ............................................................................................... 94

7.5.7. Tiempo de Carga .................................................................................................................. 95

7.5.8. Ayuda ....................................................................................................................................... 95


15

7.5.9. Formularios ........................................................................................................................... 95

7.5.10. Links ......................................................................................................................................... 96

7.5.11. Botones .................................................................................................................................... 96

7.5.12. Móvil ......................................................................................................................................... 96

7.6. Implementación de la herramienta ........................................................................................ 96

8. Pruebas y validación ................................................................................................................................ 99

8.1. Selección de los sitios web ......................................................................................................... 99

8.2. Creación de la encuesta ............................................................................................................ 102

8.3. Resultados de nuestra herramienta de evaluación ...................................................... 102

8.3.1. IKEA ....................................................................................................................................... 102

8.3.2. Conservatorio Superior de Música de Murcia ...................................................... 105

8.3.3. Twitter .................................................................................................................................. 107

8.3.4. Airbnb ................................................................................................................................... 108

8.1. Comparativa entre los resultados ofrecidos por la herramienta y la opinión de

los usuarios encuestados ......................................................................................................................... 109

8.2. Conclusiones de la encuesta ................................................................................................... 115

9. Resultados ................................................................................................................................................. 117

10. Conclusiones y trabajo futuro ..................................................................................................... 119

Referencias ......................................................................................................................................................... 121

Bibliografía ......................................................................................................................................................... 127

Anexo I .................................................................................................................................................................. 129

Anexo II ................................................................................................................................................................ 133

Anexo III............................................................................................................................................................... 135

Anexo IV ............................................................................................................................................................... 141



17

Índice de figuras

Ilustración 1. Ejemplo de dos libros con distinta experiencia de usuario. .................................. 24

Ilustración 2. Ejemplo de dos habitaciones con experiencia de usuario diferente. ................ 25

Ilustración 3. Apple Store el día de salida del iPhone 7. ..................................................................... 26

Ilustración 4. Matriz de análisis DAFO. ...................................................................................................... 27

Ilustración 5.Dispositivos digitales en propiedad en España. .......................................................... 34

Ilustración 6. Definición de experiencia de usuario por Mäkelä y Fulton Suri (2001). ......... 35

Ilustración 7. Influencias en la experiencia por Forlizzi y Ford (2000). ...................................... 36

Ilustración 8. Definición de experiencia de usuario por Hassenzahl y Tractinsky. ................. 36

Ilustración 9. Diferencias entre usabilidad y experiencia de usuario. .......................................... 38

Ilustración 10. Menú de navegación de la homepage de Evanto tuts+. ....................................... 40

Ilustración 11. Esquema de la carga de elementos con scroll. ......................................................... 41

Ilustración 12. Resultados del test en PageSpeed Insights para la web de la Universidad de

Alicante. .................................................................................................................................................................. 45

Ilustración 13. Resultados obtenidos del análisis en Bankia Índicex. ........................................... 46

Ilustración 14. Análisis de Movilidad detallado. .................................................................................... 46

Ilustración 15. Resultados de W3C Validator. ......................................................................................... 47

Ilustración 16. Resultado del análisis en WP Doctor. .......................................................................... 49

Ilustración 17. Resultados obtenidos en Website Grade. ................................................................... 50

Ilustración 18. Información específica sobre los resultados. ........................................................... 51

Ilustración 19. Resultados obtenidos en GTMetrix. .............................................................................. 52

Ilustración 20. Ejemplo gráfico de agrupar funciones o ítems similares por proximidad. .. 64

Ilustración 21. Ejemplo gráfico de usar animaciones visibles para marcar cambios en la

interfaz. ................................................................................................................................................................... 64

Ilustración 22. Ejemplo gráfico de mostrar el progreso y tiempo restante en las actividades

del sistema. ............................................................................................................................................................ 65

Ilustración 23. Ejemplo gráfico para mantener a los usuarios ubicados. .................................... 66

Ilustración 24. Ejemplo del uso del acordeón. ........................................................................................ 67

Ilustración 32. Ejemplo de indicación visual de scroll. ....................................................................... 67

Ilustración 26. Ejemplo gráfico de oscurecer el fondo bajo los pop-ups. .................................... 70

Ilustración 27. Tipos de daltonismo. ........................................................................................................... 70

Ilustración 25. Ejemplo de acción diferenciada. .................................................................................... 72

Ilustración 28. Ejemplo de complejidad correcta en los iconos. ..................................................... 73

Ilustración 29. Ejemplos de iconos familiares. ....................................................................................... 73


Ilustración 30. Ejemplo gráfico para destacar la sección actual del menú. ................................ 75

Ilustración 31. Ejemplo de campo de búsqueda. ................................................................................... 76

Ilustración 33. Presentación previa de la página principal de la app BBVA............................... 77

Ilustración 34. Ejemplo gráfico para mantener a los usuarios entretenidos en los períodos

de espera. ............................................................................................................................................................... 78

Ilustración 35. Ejemplo de tooltip. ............................................................................................................... 79

Ilustración 36. Ejemplo gráfico con las etiquetas de campo dentro y fuera de él (izquierda

y derecha respectivamente). .......................................................................................................................... 80

Ilustración 37. Imágenes resultantes del estudio de Eye tracking sobre formularios web. 81

Ilustración 38. Ejemplo gráfico de campo con el formato esperado. ............................................ 82

Ilustración 39. Ejemplo de tamaño incorrecto para un campo. ....................................................... 83

Ilustración 40. Ejemplo gráfico de no incluir instrucciones demasiado obvias. ....................... 84

Ilustración 41. Página principal de la WCAG 2.0 .................................................................................... 85

Ilustración 42. Establecer una jerarquía mediante el diseño y la posición. ............................... 86

Ilustración 43. Pop-up de confirmación. ................................................................................................... 87

Ilustración 44. Menú de navegación de Facebook situado en la parte inferior de la pantalla.

.................................................................................................................................................................................... 89

Ilustración 45. Cuestiones deshabilitadas y no deshabilitadas. ...................................................... 97

Ilustración 46. Código encargado de la comprobación de condiciones. ...................................... 98

Ilustración 47. Código encargado del mensaje resultante. ................................................................ 98

Ilustración 48. Página principal de IKEA. .............................................................................................. 100

Ilustración 49. Página principal del Conservatorio Superior de Música de Murcia. ............ 100

Ilustración 50. Página principal de Twitter. ......................................................................................... 101

Ilustración 51. Página principal de Airbnb............................................................................................ 101

Ilustración 52. Resultado obtenido en la herramienta. .................................................................... 103

Ilustración 53. Etiquetas de más de 2-3 palabras (arriba) y sección del menú no destacada

(abajo). ................................................................................................................................................................. 104

Ilustración 54. Formulario antes de introducir datos (arriba) y después de intentar

guardar (abajo)................................................................................................................................................. 104

Ilustración 55. Interfaz de detalles de producto en la app de IKEA. ........................................... 105

Ilustración 56. Resultado obtenido por la herramienta para el CSMM. .................................... 105

Ilustración 57. Menú de navegación del CSMM. .................................................................................. 106

Ilustración 58. Formulario de la web CSMM. ....................................................................................... 106

Ilustración 59. Web vista en un dispositivo móvil. ............................................................................ 107

Ilustración 60. Resultado de UX de Twitter. ......................................................................................... 107

Ilustración 61. Etiquetas de campo únicamente dentro de este. ................................................. 108


19

Ilustración 62. Pop-up de confirmación(arriba) y opciones para eliminar un tuit (abajo).

................................................................................................................................................................................. 108

Ilustración 63. Resultado obtenido para Airbnb. ............................................................................... 108

Ilustración 64. Animación de carga (izquierda) y elementos interactivos (derecha). ....... 109

Ilustración 65. Campos para introducir fecha de entrada y salida. ............................................. 109

Ilustración 66. Edades y sexo de las personas encuestadas. ......................................................... 110

Ilustración 67. Conocimientos en diseño y uso de internet de las personas encuestadas. 111

Ilustración 68. Experiencia de los usuarios en IKEA. ........................................................................ 112

Ilustración 69. Facilidad del objetivo según los usuarios en IKEA. ............................................. 112

Ilustración 70. Experiencia de los usuarios en el CSMM. ................................................................ 113

Ilustración 71. Facilidad para realizar el objetivo en el CSMM. .................................................... 113

Ilustración 72. Experiencia de los usuarios en Twitter. .................................................................. 114

Ilustración 73. Facilidad del objetivo por los usuarios de Twitter. ............................................. 114

Ilustración 74. Experiencia de los usuarios en Airbnb. .................................................................... 115

Ilustración 75. Facilidad del objetivo para los usuarios en Airbnb. ............................................ 115

Ilustración 76. Primera parte del cuestionario. .................................................................................. 136

Ilustración 77. Parte 2 del cuestionario. ................................................................................................ 139



21

Índice de tablas

Tabla 1. Planificación temporal TFG. .......................................................................................................... 31

Tabla 2. Áreas a evaluar con su respectivo peso. ................................................................................... 90



23

1. Introducción

Actualmente vivimos conectados a la tecnología. De una manera u otra, nos guste o no, se

ha vuelto esencial en nuestro día a día. Raro es la persona que no tenga un Smartphone,

una televisión o un coche. Es posible que haya una pequeña parte de la población que no

tenga ninguna de estas tres cosas, pero ¿y un frigorífico? Cada vez será más común tener

un frigorífico inteligente.

La tecnología cada vez quiere ser más cercana a las personas. Seguramente si le preguntas

a tu móvil qué temperatura hará mañana tenga más posibilidades de acertar que si le

preguntas a la vecina del quinto, además de que su respuesta a “¿Cuánto es cero 0/0?” no

será tan divertida como la de Siri1. Hace años que podemos entablar conversación con los

Smartphone, ¿Recuerdas el coche fantástico? Cada vez estamos más cerca de que medio

mundo conduzca un coche así.

Esta tecnología interactúa con el usuario a través de una interfaz, y es esta interfaz la que

marca la diferencia. Hoy en día cualquier tutorial te puede explicar cómo hacer una

aplicación móvil en 2 horas, pero no todos saben diseñar una interfaz que sea lógica,

intuitiva y sencilla.

¿Alguna vez te has perdido dentro de una página web, de manera que no sabías cómo

volver al menú principal? Y cuántas veces al querer cancelar una operación te has

preguntado: si hago clic en el botón “Cancelar”, ¿estoy cancelando la cancelación o

afirmando que quiero cancelar? En mi experiencia diré que demasiadas. Esto podría

suponer muchos problemas si ocurre cuando estamos realizando una transferencia

bancaria o cualquier tipo de papeleo importante.

Una de las cosas más importante para que una plataforma atraiga usuarios, es que estos

tengan una buena experiencia al navegar por su interfaz, de manera que sientan confianza,

seriedad y simpatía entre otras cosas, dependiendo de en qué ámbito se encuentre la

plataforma.

La experiencia de usuario es uno de los factores más importantes capaz de dibujar la línea

entre el fracaso o el éxito de un gran producto.

Solemos pensar que usabilidad y experiencia de usuario son lo mismo, por ello vamos a

dejar clara la diferencia antes de indagar en el tema. La usabilidad es la facilidad con que

1 Siri es una inteligencia artificial con funciones de asistente personal a veces con su propia personalidad para iOS, macOS, tvOS y watchOS.


las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado

por humanos con el fin de alcanzar un objetivo concreto [1]. Por otro lado, la experiencia

de usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con

un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción

positiva o negativa de dicho servicio, producto o dispositivo [2]. Esto significa que un

producto usable no tiene por qué tener una buena experiencia de usuario.

Veamos un ejemplo. Tenemos dos libros infantiles que cuentan la misma historia, sin

embargo, uno de ellos no tiene imágenes ni colores y, por el contrario, el otro sí tiene

imágenes, colores e incluso figuras con las que interactuar, lo que permitirá recrear una

historia con muy buena UX.

Ilustración 1. Ejemplo de dos libros con distinta experiencia de usuario.2

Todos conocemos productos que nos divierten, nos frustran, nos facilitan las cosas o nos

las complican. Esta experiencia es creada por alguien, directa o indirectamente.

Una investigación realizada por psicólogos de la Universidad de Cornell [3], en Estados

Unidos, ha revelado que la búsqueda de la felicidad se encuentra más en nuestras

vivencias que en los objetos materiales que podamos adquirir. El profesor de psicología

Thomas Gilovich3 expone que, si adquirimos algo material, solemos compararlo, sin

embargo, una experiencia es difícil de comparar, ya que es única y sólo pertenece a aquel

que la ha vivido.

Tiene mucho más valor una experiencia que algo puramente material. Cuando

experimentamos una vivencia positiva generamos endorfinas, al igual que si recordamos

algo ya vivido. Crear una buena experiencia en el usuario hará que nuestro producto sea

un éxito.

2 Fuente: https://www.hosteurope.es/blog/diferencia-entre-usabilidad-y-experiencia-de-usuario [Accedido el 29 octubre 2018] 3 Thomas Gilovich. https://en.wikipedia.org/wiki/Thomas_Gilovich [Accedido el 29 octubre 2018]

https://www.hosteurope.es/blog/diferencia-entre-usabilidad-y-experiencia-de-usuario

https://en.wikipedia.org/wiki/Thomas_Gilovich


25

Si alguien nos ofrece la posibilidad de pasar una noche en una de estas dos habitaciones

mostradas en la Ilustración 2, ¿Cuál elegiríamos?

Ilustración 2. Ejemplo de dos habitaciones con experiencia de usuario diferente.4

La habitación de la imagen de la derecha, ¿cierto? Esto es porque esta, además de

funcionalidad, nos ofrece diseño y una buena experiencia.

Un producto con una buena experiencia de usuario debe de enamorar a primera vista, de

transmitir las emociones oportunas, ser personal, detallista, sorprendente, acogedor y de

entablar una interacción con el usuario.

Para ello tenemos que saber con qué tipo de usuario tratamos. ¿Quiénes son mis usuarios?,

¿cuáles son sus hábitos?, ¿dónde se encuentran?, ¿cuándo hará uso de nuestra plataforma?,

¿dónde lo hará? Además de conocer a nuestros usuarios, también tenemos que conocer

otros factores, ya que no es lo mismo planificar un viaje tranquilamente desde casa, que

comprobar el horario del tren para ver si se llega a tiempo a coger el que pasa en 10

minutos o si, por el contrario, se ha adelantado y toca esperar una hora.

Una experiencia que consiga satisfacer al usuario hará que este vuelva y que confíe en

nosotros. Y no sólo eso, también nos dará una buena reputación, haciendo que el usuario

hable bien de nosotros. Esto es lo que logran conseguir empresas como Apple, quienes

llevan la experiencia de usuario a cada uno de sus productos, haciendo que estos sean

fáciles de usar, usables y satisfactorios, creando así una reputación única y una red de

usuarios fieles a la marca, hasta el punto de protagonizar titulares de noticias.

4 Fuente: https://www.pinterest.es/pin/73957618867057467/ [Accedido el 29 octubre 2018]

https://www.pinterest.es/pin/73957618867057467/


Ilustración 3. Apple Store el día de salida del iPhone 7.5

La experiencia de usuario no se tiene en cuenta en muchas ocasiones, tanto por parte de la

empresa como del desarrollador y eso es un gran error. Hacer un producto sin experiencia

de usuario supone, en numerosas ocasiones, que este no encuentre fácilmente lo que

busca, no consiga hacer las acciones de manera rápida y directa o no entienda bien lo que

se le quiere preguntar, lo que genera una gran desconfianza hacia dicha marca, derivando

en pérdida de usuarios y mala reputación.

Como bien dice el diseñador, autor e ilustrador Frank Chimero: “La gente ignora el diseño

que ignora a la gente”6.

5 Fuente: http://valencianews.es/tendencias/el-iphone-7-se-vende-desde-hoy-en-espana-pero-el-iphone-7-plus-esta-agotado/ [Accedido el 29 octubre 2018] 6 Del inglés original: “People ignore design that ignores people”.

http://valencianews.es/tendencias/el-iphone-7-se-vende-desde-hoy-en-espana-pero-el-iphone-7-plus-esta-agotado/

http://valencianews.es/tendencias/el-iphone-7-se-vende-desde-hoy-en-espana-pero-el-iphone-7-plus-esta-agotado/


27

2. Estudio de viabilidad

Antes de empezar a desarrollar el proyecto, es importante analizar cuáles son sus

objetivos, si son necesarios y establecer al fin, si este es viable o no, para así poder llevarlo

a cabo.

Para realizar dicho estudio haremos uso de la herramienta conocida como Análisis DAFO.

Este análisis ayuda a plantearnos las acciones que deberíamos poner en marcha para

aprovechar las oportunidades detectadas y eliminar o prepararnos contra las amenazas,

teniendo conciencia de nuestras debilidades y fortalezas.

Por último, analizaremos otro tipo de riesgos a los que nos enfrentamos ajenos al proyecto

y al tema que trata.

2.1. Análisis DAFO

El análisis DAFO (de las iniciales de Debilidades, Amenazas, Fortalezas y Oportunidades)

es una herramienta de estudio de la situación de un proyecto, analizando sus

características internas (Debilidades y Fortalezas) y su situación externa (Amenazas y

Oportunidades) en una matriz cuadrada como muestra la Ilustración 4 [4].

Ilustración 4. Matriz de análisis DAFO.7

7 Fuente propia.


En primer lugar, dentro los elementos de origen interno, podemos observar tres

debilidades a destacar. La primera, argumenta el desconocimiento de la experiencia de

usuario por parte de los desarrolladores, así como su importancia y los beneficios que

aporta.

En segundo lugar, cabe mencionar la falta de recursos financieros para el desarrollo de

este proyecto, puesto que es un trabajo académico. Disponer de más recursos implicaría

poder dedicarle más tiempo al proyecto, así como hacer uso de herramientas que

facilitarían y agilizarían nuestro trabajo.

En tercer lugar, nos encontramos con la falta de conocimientos sobre la UX y de

experiencia en el sector. A pesar de haber estudiado cuatro años temas encaminados al

desarrollo web, lo más cercano que hemos tocado ha sido usabilidad y accesibilidad en

segundo curso, sin embargo, no ha sido hasta el cuarto curso cuando hemos escuchado

hablar sobre el tema. Aun así, no tenemos experiencia en este sector específico.

Una vez vistas las debilidades, vamos con nuestras fortalezas. En primer lugar, cabe

destacar que contamos con una actitud positiva y motivación a la hora de desarrollar el

proyecto, lo que nos ayudará a ser ambiciosos y querer mejorar nuestro estudio día a día.

La actitud es uno de los puntos más importantes, ya que con actitud negativa o desgana no

se conseguirían buenos resultados, además de que tardaríamos el doble de tiempo en

hacer algo productivo.

En segundo lugar, desarrollamos un estudio que no necesita de financiación. Puesto que

tratamos un tema de investigación, no necesitamos softwares potentes ni específicos. Sí es

cierto que el uso de alguno de ellos nos facilitaría el trabajo, pero podemos sacarlo

adelante sin ningún problema.

Por último, gracias a los estudios en realizados durante los cuatro años de ingeniería

multimedia, hemos adquirido ciertos conocimientos teóricos y prácticos en usabilidad y

accesibilidad, además de tener una mínima experiencia en el diseño de interfaces.

Si vamos a la parte que estudia la situación externa, nos encontramos con tres amenazas.

En primer lugar, los usuarios que no disponen de grandes conocimientos digitales, ya que

esto nos limitará a veces. No es lo mismo diseñar la UX para usuarios que son conocedores

del uso de las tecnologías y se desenvuelven bien con ellas, que realizar una web pensando

en alguien que está acostumbrado a usar el papel.

En segundo lugar, los constantes cambios en las tendencias y necesidades del usuario, no

nos va a permitir acostumbrarnos a un diseño específico ni a una reacción común de los


29

usuarios. Estaremos constantemente pendientes de las novedades y nuestra forma de

actuar tendrá que ir acorde con la tendencia actual.

Otra amenaza a la que tenemos que estar preparados es la posibilidad de que surjan

nuevos estudios sobre la experiencia de usuario, o más concretamente, nuevas guías y

herramientas para el estudio de la UX en productos y webs, que realicen la labor que

vamos a desempeñar nosotros.

Por último, nos encontramos con las oportunidades de las que nos podemos aventajar. La

primera es el hecho de que estamos tocando un tema que actualmente está en auge. Esto

nos puede suponer una gran ayuda a la hora de que gente recurra a nuestra metodología

en busca de ayuda y que cada vez, lo haga más gente conforme sean conscientes de la

importancia que tiene.

Por otra parte, esta herramienta está dirigida a un grupo numeroso, que pueden ser desde

desarrolladores web que quieran implementar una buena experiencia para su producto,

hasta aficionados que simplemente quieran crear su propio sitio web para venderse, ya

sea pequeño o de gran envergadura.

Por último, destacaremos la oportunidad que nos ofrece el desconocimiento por parte de

un gran número de personas del mundo de la UX, ya que no dispondremos de mucha

competencia.

2.2. Análisis de riesgos

Para el completo estudio de la viabilidad, no sólo tenemos que tener en cuenta la situación

del proyecto y sus características, también debemos pensar en otras situaciones que

podrán poner en riesgo el desarrollo de nuestro estudio.

Entre los riesgos a los que nos podemos exponer durante el transcurso del proyecto, nos

encontramos con riesgos bastante probables entre los que se encuentran: la posibilidad de

enfermar de manera leve, adquirir una carga extra en nuestro puesto laboral o quedarnos

atascados en el desarrollo del proyecto. Para poder asumir este riesgo, de las horas totales

que debemos emplear en el desarrollo del proyecto (300 horas), reservaremos un 10%

(30 horas) para cualquier incidente que pudiese ocurrir y, en caso de no ser necesario,

emplearíamos este tiempo en mejoras.

Por otro lado, debemos tener en cuenta otros riesgos menos probables, pero de mayor

magnitud, como son: enfermar gravemente, lesionarnos o que ocurra algún suceso

inoportuno que haga cambiar nuestra rutina y nos suponga un parón temporal en el


desarrollo del trabajo. Depende el tiempo perdido, si no es posible recuperarlo, deberemos

plantearnos el retraso de la entrega oficial del proyecto.

Una vez estudiadas las características y situaciones positivas y negativas que pueden

afectar a nuestro estudio, concluimos que sí es viable su realización.


31

3. Planificación

La planificación de un proyecto es uno de los pasos iniciales más importantes a la hora de

administrar el tiempo y ayudarnos a ser más productivos. Para ello expondré los puntos

principales del proyecto, agrupándolos y asignando una fecha límite a cada grupo de

apartados.

Teniendo en cuanta que comenzaremos a realizar el proyecto una vez finalizado el curso,

comenzaremos el trabajo a mediados de agosto y emplearemos un mes a realizar la parte

inicial del proyecto, buscar información genérica, la motivación, la introducción, el estudio

de viabilidad, la planificación, los objetivos y la metodología.

A partir del 15 de septiembre, empezaremos a desarrollar el estado del arte y le

dedicaremos un mes y medio, para poder empezar el desarrollo de la herramienta de

evaluación el 15 de octubre, a la que le dedicaremos un mes y medio intenso.

Finalmente, teniendo terminada la herramienta para el 15 de diciembre, comenzaremos

con las pruebas y validación de esta, los resultados y las conclusiones y trabajo futuro.

También redactaremos finalmente el resumen, así como los agradecimientos y citas.

Planeando el final para el 1 de enero nos deja un margen para posibles inconvenientes que

puedan surgir.

Contenidos Tiempo total Fecha límite fin

Motivación, justificación, objetivo general

Introducción

Estudio de la viabilidad

Planificación

Objetivos

Metodología

1 mes 15 septiembre

Estado del arte 1 mes y medio 1 noviembre

Herramienta de evaluación para la UX 1 mes y medio 15 diciembre

Pruebas y validación

Resultados

Conclusiones y trabajo futuro

Resumen

Agradecimientos, citas

2 semanas 1 enero

Tabla 1. Planificación temporal TFG.



33

4. Estado del arte

En este apartado intentaremos recoger diferente información sobre la experiencia de

usuario y lo relacionado con esta, para así adquirir un mayor conocimiento y poder

realizar este trabajo más objetivamente. Además, estudiaremos lo que la industria del

desarrollo de software está haciendo para, primero ofrecer buenos productos y segundo,

evaluar que de verdad esas interfaces cumplen con su misión y generan la UX deseada en

el usuario.

4.1. ¿Por qué es importante la UX?

Cada vez hay más páginas web, más aplicaciones móviles y productos digitales, por lo que

actualmente hay mucha más competencia que antes en este campo. Cada vez los usuarios

son más y más exigentes con lo que les aporta cada plataforma. Antes, a la hora de diseñar

una web o una aplicación, sólo miraban por la estética, sin embargo, esto ha cambiado.

Según la famosa consultora Nielsen Norman Group, si la UX en un sitio web es ineficaz,

este será abandonado, de promedio, en menos de 15 segundos. Y lo peor es que 9 de cada

10 usuarios que perciban una mala experiencia no regresarán, pero sí serán propensos a

compartir su opinión con otros. Según la empresa española de marketing y publicidad

Cyberclick, a continuación, nombraremos algunas de las razones por las que la experiencia

de usuario es importante [5].

En primer lugar, destaca que la complejidad de las webs ha aumentado. Esto hace que las

páginas web se vuelvan cada vez más complejas, con mayor número de páginas y de

información. Si la experiencia de usuario no es buena, probablemente conllevará que el

usuario se pierda entre tanta información y no sepa cómo continuar.

Cabe comentar también, la cantidad de operaciones de importancia que realizamos a

través de internet. Cada año depositamos el peso de algunos procedimientos cotidianos en

una aplicación móvil o una plataforma web, como realizar la matrícula de la universidad,

comprar un ordenador de 1.000€ o realizar una transferencia bancaria. Actualmente la

mayoría de los procesos y “papeleo” del día a día están digitalizados. Esto nos permite

ahorrar tiempo en colas o en desplazamiento entre otras cosas (como no perder la

paciencia en procesos lentísimos), sin embargo, muchas de estas operaciones son de gran

importancia y a veces, nos cuesta depositar nuestra confianza en una página donde no le

vemos la cara a nadie. La experiencia de usuario tiene un papel muy importante aquí, ya


que debe conseguir que un usuario se fíe de introducir su número de tarjeta de crédito,

además de que no se pierda en ningún momento del proceso.

Cyberclick también destaca que accedemos a las plataformas desde diferentes

dispositivos. Muchas webs están pensadas únicamente para ordenadores, sin pensar en

otros tamaños de pantalla diferentes, por lo que es un gran error, ya que actualmente

numerosos usuarios optan por usar un Smartphone o una Tablet como dispositivo

principal. Una correcta UX debería de contemplar el uso de la plataforma desde distintos

dispositivos con distinto tamaño de pantalla, desde un móvil de 4 pulgadas, hasta un

televisor de 55, puesto que la experiencia de usuario no será buena si la interfaz no se

ajusta correctamente a cada una de ellas, con el correcto tamaño de botones, textos,

imágenes, etc.

Ilustración 5.Dispositivos digitales en propiedad en España.8

Por último, expone que cada vez valoramos más la accesibilidad. Con la que no sólo nos

referimos a poner la plataforma al alcance de personas con discapacidades visuales (por

ejemplo), sino también de quienes tienen un dispositivo antiguo o una conexión a internet

lenta.

Actualmente muchas de las herramientas principales de desarrollo se encuentran al

alcance de todos, por lo que ya no se necesita un buen capital para poder adquirir el mejor

8 Fuente: https://www.xatakamovil.com/movil-y-sociedad/espana-territorio-smartphone [Accedido el 29 octubre 2018]

https://www.xatakamovil.com/movil-y-sociedad/espana-territorio-smartphone


35

programa de la historia o una enciclopedia donde te expliquen cómo usarla. Esto significa

que hoy en día todos los desarrolladores disponen de las mismas herramientas de

programación y formación gratuita en internet, por lo que muchas plataformas pueden

hacer lo mismo, la diferencia la marca la experiencia de usuario que tengan. De dos

plataformas que hacen la misma función, nos quedaremos con la que más agradable nos

parezca y mejor experiencia tengamos.

4.2. ¿Qué es la UX?

Podría decirse que la experiencia de usuario es un término que aún no tiene una definición

única, aunque haya estándares que hayan intentado definirla como el International

Standars Organisation (ISO). Algunos autores e investigadores de la experiencia de

usuario ofrecen su propia definición.

En primer lugar, Mäkelä y Fulton Suri (2001) definen experiencia de usuario como “el

resultado de una acción motivada en un determinado contexto. La experiencia y las

expectaciones previas del usuario influencian la experiencia actual, y la experiencia actual

lleva a más experiencias y expectativas modificadas” (Ilustración 6) [6].

Ilustración 6. Definición de experiencia de usuario por Mäkelä y Fulton Suri (2001).9

Forlizzi y Ford (2000) estudian qué influencia a la experiencia de usuario investigando las

características de una interacción usuario-producto, y qué la rodea. La experiencia previa

aparece como uno de los atributos de este modelo también [7].

9 Fuente: https://www.researchgate.net/figure/User-experience-definition-by-Maekelae-Fulton-Suri-2001_fig2_27516496 [Accedido el 29 octubre 2018]

https://www.researchgate.net/figure/User-experience-definition-by-Maekelae-Fulton-Suri-2001_fig2_27516496

https://www.researchgate.net/figure/User-experience-definition-by-Maekelae-Fulton-Suri-2001_fig2_27516496


Ilustración 7. Influencias en la experiencia por Forlizzi y Ford (2000).10

Posteriormente, los autores Marc Hassenzahl y Noam Tractinsky (2006), exponen que la

UX es la consecuencia del estado interno de un usuario (predisposición, expectaciones,

necesidades, motivación, estado de ánimo, etc.), las características del sistema diseñado

(por ejemplo, complejidad, propósito, usabilidad, funcionalidad, etc.) y el contexto (o el

entorno) dentro del que se produce la interacción (por ejemplo, entorno

organizativo/social, sentido de la actividad, voluntariedad de uso, etc.) [8].

Ilustración 8. Definición de experiencia de usuario por Hassenzahl y Tractinsky.11

Por otro lado, Don Norman y Jakob Nielsen, fundadores de Nielsen Norman Group (NN/g)

en 1998, empresa estadounidense de consultoría líder en experiencia de usuario basada

en la investigación, proponen que la experiencia del usuario abarca todos los aspectos de

la interacción del usuario final con la empresa, sus servicios y sus productos.

10 Fuente: http://file.scirp.org/Html/1-8601168/694e83e1-59ff-4bdc-ac39-37f9b23b3021.jpg [Accedido el 29 octubre 2018] 11 Fuente: https://www.researchgate.net/figure/User-experience-definition-by-Hassenzahl-Tractinsky-2006_fig5_27516496 [Accedido el 29 octubre 2018]

http://file.scirp.org/Html/1-8601168/694e83e1-59ff-4bdc-ac39-37f9b23b3021.jpg

https://www.researchgate.net/figure/User-experience-definition-by-Hassenzahl-Tractinsky-2006_fig5_27516496

https://www.researchgate.net/figure/User-experience-definition-by-Hassenzahl-Tractinsky-2006_fig5_27516496


37

Apuntan que el primer requisito para una experiencia de usuario de libro es satisfacer las

necesidades exactas del cliente, sólo eso. Luego viene la simplicidad y la elegancia que

producen productos que son una alegría de poseer, una alegría de usar. La verdadera

experiencia del usuario va mucho más allá de dar a los clientes lo que dicen que quieren, o

de proporcionar funciones de lista de comprobación. Para lograr una experiencia de

usuario de alta calidad en las ofertas de una empresa debe haber una fusión perfecta de los

servicios de múltiples disciplinas, incluyendo ingeniería, marketing, diseño gráfico e

industrial, y diseño de interfaces [9].

Por último, la definición que nos ofrece el estándar internacional sobre ergonomía de la

interacción del sistema humano, ISO 9241-210, define la experiencia de usuario como “las

percepciones y respuestas de una persona como resultado del uso o uso anticipado de un

producto, sistema o servicio” [10]. De acuerdo con la definición del ISO, la experiencia de

usuario incluye todas las emociones, creencias, preferencias, percepciones, respuestas

físicas y psicológicas, comportamientos y logros de los usuarios que ocurren antes,

durante y después del uso. Además, el ISO enumera tres factores que influencian la

experiencia de usuario: sistema, usuario y contexto del uso.

Finalmente añade que la usabilidad aborda aspectos de la experiencia del usuario, por

ejemplo, "los criterios de usabilidad pueden utilizarse para evaluar aspectos de la

experiencia del usuario".

En esta definición de experiencia de usuario la norma ISO no indaga más en cuanto a

usabilidad se refiere, por eso vamos a definirla a continuación y a ver en qué se relacionan

y en qué se diferencian.

La definición oficial de usabilidad que nos proporciona la norma internacional ISO 25010

hace referencia a “la capacidad del producto software de ser entendido, aprendido, usado

y resultar atractivo para el usuario, en condiciones específicas de uso” [11].

En definitiva, una página web es usable si esta es fácil de usar, mientras que la experiencia

de usuario hace referencia a cómo de bien se ha sentido el usuario antes, durante y

después de haber utilizado la plataforma. Por tanto, si los usuarios pueden navegar

fácilmente por la página web y son capaces de cumplir el objetivo principal que tenían

cuando entraron, podemos decir que el sitio es funcional, pero si además de esto, los

usuarios se llevan una experiencia agradable y se sienten satisfechos con lo que ven,

podemos decir que la experiencia es positiva.


Ilustración 9. Diferencias entre usabilidad y experiencia de usuario.12

4.3. ¿Qué puedo medir en una web de forma objetiva?

Como hemos visto, cuando hablamos de experiencia de usuario, hablamos de algo

subjetivo como sentimientos, emociones, etc. El objetivo principal de este proyecto es

desarrollar una metodología de evaluación de la UX, pero ¿cómo vamos a medir un aspecto

que no es objetivo?

No todos los aspectos que abarca la experiencia de usuario se pueden medir, ya que como

hemos visto, la predisposición de esa persona o su estado de ánimo influenciará la

experiencia que va a tener sobre la plataforma, sin embargo, existen algunos patrones de

diseño que debemos seguir si queremos sumar puntos en la UX de nuestro sitio. A

continuación, investigaremos cuáles son estos requisitos, ya que nos permitirán valorar

una plataforma de manera objetiva si los tenemos en cuenta.

En primer lugar, nos encontramos con el post “3 principios básicos de UX/UI: mostrar,

explicar y empoderar” [12], de la mano de Verónica Traynor13, la cual forma parte del

equipo de expertos en UX de Google y además, es cofundadora y directora de Puntolab14,

una empresa dedicada al UX Research & Usability Testing (investigación UX y pruebas de

usabilidad).

12 Fuente: https://www.slideshare.net/UXnights/usabilidad-vs-experiencia-de-usuario-adriana-martnez [Accedido el 29 octubre 2018] 13 Verónica Traynor. https://www.linkedin.com/in/veronicatraynor/ [Accedido el 29 octubre 2018] 14 Puntolab. https://www.linkedin.com/company/puntolab/?originalSubdomain=es [Accedido 29 el octubre 2018]

https://www.slideshare.net/UXnights/usabilidad-vs-experiencia-de-usuario-adriana-martnez

https://www.slideshare.net/UXnights/usabilidad-vs-experiencia-de-usuario-adriana-martnez

https://www.linkedin.com/in/veronicatraynor/

https://www.linkedin.com/company/puntolab/?originalSubdomain=es


39

Verónica Traynor nos muestra principios ofrecidos por el World Wide Web Consorcium

(W3C), más concretamente, las recomendaciones recogidas en el Web Content

Accessibility Guidelines (WCAG) 2.015. Expone tres principios básicos de UX/UI basados en

los principios del W3C: mostrar, explicar y empoderar, los cuales servirán para poder

agrupar las recomendaciones que nos ofrece en cada uno de estos principios.

En el primer grupo “Mostrar”, Verónica nos menciona que incluyamos textos que

acompañen los contenidos que son visuales para ofrecer alternativas en formato texto.

También debemos cuidar el contraste, el tamaño, el interlineado y la alineación de estos

para hacerlos legibles, así como hacer uso de un lenguaje interactivo consistente, que sea

claro y unívoco, con elementos interactivos inconfundibles y jerarquías definidas y claras.

Por otro lado, tenemos que hacer factible que el usuario pueda navegar por nuestra web

sin la necesidad de leer gran cantidad de información.

En el segundo grupo “Explicar”, formula consejos como la adaptación del lenguaje al

conocimiento del usuario, la inclusión de dibujos e iconos para facilitar la comprensión,

ofrecer consistencia lógica en los mecanismos de navegación, de manera que siempre se

siga una misma lógica para que no dificulte el aprendizaje del usuario. Además, debemos

permitir que los componentes interactivos sean identificables y pronosticables, y ayudar al

usuario a avanzar, dando, por ejemplo, instrucciones claras de dónde se encuentran

errores y ayudando a corregirlos.

Por último, Verónica pone de manifiesto que debemos ayudar al usuario a ubicarse en

todo momento, debemos darle la posibilidad de poder aplazar lo que esté haciendo y de

tener el control sobre los contenidos. Todo ello lo nombra como “Empoderar”.

Por otro lado, nos encontramos con el blog Inboundcycle, la primera agencia dedicada

exclusivamente al “inbound marketing”16 en España y Latinoamérica. Es la primera

agencia “Diamond Partner” de HubSpot17 fuera de EE. UU., lo que los coloca en el TOP 10

mundial.

Arturo Landeros nos da algunos consejos muy interesantes y algo más específicos en el

artículo “8 trucos de diseño UX-UI para que los usuarios se enamoren de tu web” [13].

15 WCAG. En español, Pautas de Accesibilidad al Contenido en la Web. https://www.w3.org/TR/WCAG20/ [Accedido 29 el octubre 2018] 16Inbound marketing: Técnica de mercadeo diseñada para atraer a potenciales clientes ofreciendo información de su interés a través de diversos medios propios del marketing de contenidos. Fuente: https://es.wikipedia.org/wiki/Mercadotecnia_de_atracci%C3%B3n [Accedido el 29 octubre 2018] 17 HubSpot es un desarrollador y comercializador de productos de software basado en Cambridge Massachussets que ofrece una suite completa de herramientas de marketing, ventas y atención al cliente para empresas de todo tamaño. Fuente: https://es.wikipedia.org/wiki/HubSpot [Accedido el 22 de noviembre 2018]

https://www.w3.org/TR/WCAG20/

https://es.wikipedia.org/wiki/Mercadotecnia_de_atracci%C3%B3n

https://es.wikipedia.org/wiki/HubSpot


Arturo comienza razonando y proponiendo que adaptemos la plataforma al perfil de

nuestro usuario objetivo, ya que no vamos a dirigirnos igual a los padres que buscan una

guardería, como a un mecánico que busca por tiendas online recambios para su taller.

Afirma también la importancia de un menú de navegación preciso y accesible, dado que es

el medio mediante el cual los usuarios navegarán por la plataforma.

Ilustración 10. Menú de navegación de la homepage de Evanto tuts+.18

Nos incita a añadirle importancia al buscador interno, alegando que el cibernauta

promedio está acostumbrado a navegar mediante búsquedas (quizás por culpa de Google).

Por otro lado, comenta que no debemos saturar el espacio, de manera que eliminemos los

elementos no necesarios, pero siendo adecuadamente minimalista. La optimización del

sitio es un factor muy importante en la UX, ya que a una persona con una conexión algo

lenta le será imposible navegar por una plataforma pesada. Una de las técnicas más

efectivas es lo que se conoce como “Lazy Load”, que consiste en adaptar la carga de

algunos elementos al scroll, de manera que no se cargue todo el contenido al principio,

sino poco a poco.

18 Fuente: https://tutsplus.com/ [Accedido el 29 octubre 2018]

https://tutsplus.com/


41

Ilustración 11. Esquema de la carga de elementos con scroll.19

Otro aspecto importante trata sobre la interacción con el usuario, que conseguiremos que

sea positiva haciendo el medio de contacto (la página de contacto) más accesible y

humana. Para Google, es importante el tiempo medio que un usuario pasa en un sitio web

a la hora de medir los factores SEO, los cuales están muy relacionados con el trabajo UX,

por lo que sería favorable crear una estrategia para mostrar contenido relacionado con lo

que estamos viendo en ese instante.

Por último, declara la importancia que tiene el análisis constante del trabajo realizado, de

manera que los propios usuarios pueden darte su valoración y opinión de la página,

ayudándonos a mejorarla.

Como hemos visto anteriormente, sabemos que la usabilidad y la experiencia de usuario

van de la mano, ya que, en gran medida, una página con una gran usabilidad hace que

dicha web sea más propensa a tener una UX buena. Por ello, nos ha parecido interesante

de estudiar los 10 principios de usabilidad de Jakob Nielsen recogidos en el artículo escrito

por él: “10 Usability Heuristics for User Interface Design”. Añade, además, que son

llamados “heurísticos” porque son reglas generales y no directrices específicas de

usabilidad [14].

En primer lugar, dicta “visibilidad del estado del sistema”. En todo momento el usuario

tiene que estar al tanto de lo que está pasando en la plataforma. ¿Cuántas veces hemos

rellenado un formulario y a la hora de enviarlo, no sabemos si se ha mandado o si ha

habido un error? ¿o si simplemente está tardando un poco más de la cuenta y tenemos que

esperar? Todo esto debe de mostrarse al usuario a través de barras de carga, otras páginas

intermedias que indiquen que todo ha ido correctamente, páginas de errores, etc.

19 Fuente: https://www.inboundcycle.com/blog-de-inbound-marketing/trucos-dise%C3%B1o-ux-ui [Accedido el 29 octubre 2018]

https://www.inboundcycle.com/blog-de-inbound-marketing/trucos-dise%C3%B1o-ux-ui



Seguidamente tenemos “Relación entre el sistema y el mundo real”. Si el usuario no se

siente cómodo interactuando con nuestra web, éste abandonará el sitio rápido y puede

que no vuelva, por ello debemos emplear un lenguaje coloquial, lógico y que entienda

perfectamente.

“Control y libertad del usuario”. Intentaremos darle al usuario el control de la plataforma,

de manera que pueda hacer todos los cambios que desee dentro de lo permitido. Además,

todos en este mundo nos equivocamos alguna vez, ¿no? Tenemos que asumir que el

usuario también puede equivocarse, por ello le daremos la opción de deshacer, borrar o

modificar cualquier acción que realice.

“Consistencia y estándares”. Si seguimos los convenios establecidos para ciertos iconos no

necesitaremos redactar instrucciones para que los usuarios aprendan a utilizar nuestra

plataforma.

“Prevención de errores”. Ya que sabemos que en algún momento todos nos equivocamos,

intentaremos prevenir cualquier error que pueda cometer, por lo que añadiremos doble

confirmación en acciones importantes entre otras cosas.

“Reconocer antes que recordar”. Esta regla heurística nos recomienda que ayudemos a los

usuarios a reconocer las cosas poniendo una imagen o previsualización, de manera que

este no tenga que memorizar nada.

“Flexibilidad y eficiencia de uso”. Las plataformas han de estar pensadas para cada tipo de

usuario, pensando en quiénes la visitarán.

“Diseño estético y minimalista”. Diseñemos interfaces agradables y limpias, para que se

pueda prestar atención en lo que la requiere.

“Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores”. Si uno de los

campos del formulario está incompleto, el usuario nos agradecerá que le indiquemos lo

más claramente posible dónde se encuentra el error y de qué manera puede solucionarlo.

Por último, Nielsen apunta “Ayuda y documentación”. Nunca estará de más disponer de un

manual de funcionamiento, como, por ejemplo, una página de FAQs (del inglés, frequently

asked questions), donde estarán las preguntas más frecuentes respondidas.

Lo planteado por Verónica Traynor, Arturo Landeros de Inboundcycle y Jakob Nielsen, es

muy interesante a la hora de comprender, de manera global, cómo podemos aumentar la

UX de nuestra plataforma, por lo que una vez visto esto, iremos en busca de asesoramiento


43

más exhaustivo, que nos ayude a encontrar cada uno de los puntos clave que debe tener

una web para conseguir una experiencia de usuario de admirar.

Con estos requisitos hemos dado con un artículo de la mano de Andrew Kucheriavy20,

llamado “Top 100 UX Design Tips from a User Experience Master” que nos ofrece 100

consejos para el diseño UX [15]. Estos consejos que nombra, algunos de los cuales quedan

recogidos en el Anexo I, hablan sobre el flujo de la web, las ventajas del scrolling y la

importancia del contraste y los colores usados, además de algunos requisitos que debe

cumplir nuestra página relacionados con la carga, la navegación, los formularios, los

botones, los links y los iconos. De igual manera, incluye anotaciones sobre la importancia

de la búsqueda, la ayuda, el contenido, la legibilidad y la adaptación de las plataformas a

los móviles y algunas pautas para hacerlo correctamente manteniendo o aumentando la

UX. Por otra parte, comenta las dificultades de los carruseles y el correcto uso de los

acordeones.

Por último, nos encontramos con el blog de Ernesto Olivares, Partner certificado de

Hubspot, en el cual, nos nombra 125 reglas (recogidas en el

Anexo II)para optimizar la experiencia de usuario que nos servirán en nuestra labor de

conseguir una gran cantidad de información y pautas para la mejora de la UX, para poder

sacar conclusiones propias y conseguir evaluar una metodología objetiva y optimizada.

Estas reglas las encontramos en el post titulado “Experiencia de usuario: 125 reglas para

optimizar la UX de cualquier web o app” [16].

Ernesto plantea indicaciones para llamar la atención del usuario, guiarlo hacia el objetivo

final, mantener un proceso fluido sin que este se pierda o quede confundido, así como

adaptar la plataforma a los usuarios y situaciones, como a ayudarlos a evitar errores,

indicando sólo las opciones válidas a la hora de rellenar un campo o implementar

pantallas de confirmación a la hora de realizar una acción importante.

4.4. Herramientas

La necesidad de crear una herramienta es real, ya que muchos desarrolladores web se

forman en titulaciones técnicas en las que no tocan temas de diseño de interfaces, sólo

código funcional para las capas inferiores de una plataforma. Muchas empresas tienen

flotas enormes de desarrolladores sin dar apenas importancia al diseño de interfaces y

más concretamente, al diseño de experiencia de usuario. Muchos de estos desarrolladores

20 Andrew Kucheriavy en Linkedin: https://www.linkedin.com/in/ky4ep/ [Accedido el 29 octubre 2018]

https://www.linkedin.com/in/ky4ep/


se ven envueltos en la implementación de interfaces sin saber del tema más que lo básico,

por lo que la mayoría las diseñan a su manera, sin pensar en el usuario. Lo mismo ocurre

con empresas pequeñas y con particulares que quieren hacerse su propia página web. Por

ello, disponer de una herramienta de evaluación les ayudará a no perder de vista la

importancia de la experiencia de usuario y les ayudará a mejorarla, sin necesidad de ser

grandes expertos.

A continuación, estudiaremos qué herramientas se están ofreciendo para garantizar una

buena UX y qué es lo que evalúa, ya que, al ser un campo tan grande que abarca desde los

colores hasta los sentimientos, muchas herramientas se han centrado en evaluar un

aspecto concreto. Para obtener resultados comparables, estudiaremos en todas las

herramientas la misma URL, la página web de la Universidad de Alicante21.

4.4.1. PageSpeed Insights

En primer lugar, nos encontramos con PageSpeed Insights de Google [17]. Esta

herramienta se centra en evaluar la velocidad de la página web e informa sobre el

rendimiento real de una página para dispositivos móviles y de escritorio además de

ofrecer sugerencias para mejorarla. Las métricas se basan en el Informe de Experiencia de

Usuario de Chrome [18]. Informa sobre la velocidad de la página y sobre la optimización

de esta.

En cuanto a la velocidad de la página, esta herramienta nos mide el FCP (First Contentful

Paint22), que indica el tiempo que tarda en pintarse el primer contenido y el DCL (DOM

Content Loaded23), que mide el tiempo que tarda el contenido DOM en cargarse. Por otro

lado, el índice de optimización examina la cantidad de recursos que bloquean el

renderizado de la página y se basa en un rango del 0 al 100. Cabe mencionar que toma

como referencia 10.000 muestras que se recogen en el Informe mencionado

anteriormente [19].

21 Página Universidad de Alicante: https://www.ua.es/ [Accedido el 22 de noviembre 2018] 22 First Contentful Paint en español: Primera impresión de contenido. 23 DOM Content Loaded en español: Contenido DOM cargado.

https://www.ua.es/


45

Ilustración 12. Resultados del test en PageSpeed Insights para la web de la Universidad de

Alicante.24

La evaluación nos muestra que la web de la Universidad de Alicante en la versión para

ordenador es rápida en cuanto a la carga, pero lenta en la optimización, con una

puntuación de 52 / 100. Esta optimización se mide según el tiempo de carga de la mitad

superior de la página y el tiempo de carga completa de la página. PageSpeed Insights

ofrece tras este análisis, más información sobre estadísticas la página, sugerencias de

optimización y qué optimizaciones ya se están aplicando. También ofrece información

detallada sobre qué es exactamente lo que está evaluando [20].

4.4.2. Bankia Índicex

Por otro lado, encontramos Bankia Índicex [21], una herramienta que analiza el nivel de

competitividad digital de cualquier negocio a partir de la evaluación de su

comportamiento en nueve áreas específicas a través de más de 100 parámetros.

Estas áreas son: posicionamiento SEO, movilidad, experiencia de usuario, seguridad,

marketing digital, contenidos, redes sociales, e-commerce y analítica web. Para conocer los

resultados debemos registrarnos en la plataforma con un usuario y una contraseña,

además si queremos obtener el informe al completo y conocer detalladamente cada

campo, debemos completar nuestro perfil, añadiendo los datos de la empresa, incluido el

CIF. Esto es un poco molesto, sobre todo si no tienes una empresa formal y simplemente

quieres conocer la competitividad de tu blog personal, por ejemplo.

24 Fuente: https://developers.google.com/speed/pagespeed/insights/?url=www.ua.es&tab=desktop [Accedido el 14 noviembre 2018]

https://developers.google.com/speed/pagespeed/insights/?url=www.ua.es&tab=desktop


En la Ilustración 13, observamos los resultados del análisis de la página web de la

Universidad de Alicante, indicando si la web es competitiva o no, en los diferentes campos.

Ilustración 13. Resultados obtenidos del análisis en Bankia Índicex.25

De cada sector que la herramienta examina, podemos conocer más detalladamente los

resultados, ofreciéndote detalladamente cómo podríamos mejorar cada aspecto y qué

hacemos de manera correcta.

Ilustración 14. Análisis de Movilidad detallado.26

25 Fuente: https://bankiaindicex.com/ [Accedido el 3 de noviembre 2018]

https://bankiaindicex.com/


47

Bankia Índicex estudia diferentes aspectos de una plataforma, pero ya que este trabajo

trata de la experiencia de usuario, vamos a ver más en profundidad qué aspectos incluye

en la sección “experiencia de usuario”. Según el documento que nos ofrece la propia

página, llamado “Informe Tipo Bankia Índicex” [22], en el que muestra cómo sería el

informe que esta herramienta ofrece generarte sobre tu propia web se estudia, si tiene o

no versión imprimible de la página, si dispone de página con preguntas frecuentes,

comprueba que en el navegador aparece el icono de la web, si la navegación es segura, que

se haga uso de las migas de pan para mantener al usuario ubicado, hace un análisis

sintáctico y mide el tiempo de carga de la página.

Un aspecto negativo que encontramos es que, si queremos volver a ver nuestros

resultados, cada vez que volvemos a entrar tenemos que volver a analizarla desde cero, es

decir, tenemos que volver a responder las 22 preguntas que nos realiza, lo cual es un poco

pesado, sobre todo si no tenemos información nueva que añadir y simplemente queremos

volver a ver el análisis.

4.4.3. W3C Markup Validator

W3C propone su propia herramienta para verificar la accesibilidad W3C Markup Validator.

Este verifica la validez de marcado de los documentos Web en HTML, XHTML, SMIL,

MathML, etc. [23]. En la Ilustración 15 vemos los resultados obtenidos para la página web

de la Universidad de Alicante.

Ilustración 15. Resultados de W3C Validator.27

26 Fuente: https://bankiaindicex.com/ [Accedido el 3 de noviembre 2018] 27 Fuente: https://validator.w3.org [Accedido el 4 de noviembre 2018]


https://validator.w3.org/


Esta herramienta no valora la experiencia de usuario en cuestión, lee y valora la sintaxis

de cada página. De cara a la UX esto influye a la hora de la accesibilidad y la indexación de

Google.

W3C también ofrece herramientas para verificar el feed RSS o Atom, la hoja de estilos CSS

o busca si existen links rotos.

4.4.4. WP Doctor

Encontramos WP Doctor, herramienta gratuita de la mano de Webempresa28 que realiza

una auditoría en tiempo real de una página en WordPress [24]. Para probarla hemos

probado a analizar la página principal de WordPress, ya que necesitábamos una

desarrollada con esta plataforma de gestión de contenidos. En el análisis que vemos en la

Ilustración 16, nos informa de los errores que tenemos, advertencias que deberíamos

tener en cuenta y lo que tenemos correctamente. Si clicamos en cada uno de los aspectos

analizados nos ofrece información detallada, indicándo qué nos falta, qué podríamos

cambiar y qué tenemos correctamente.

28 Empresa que ofrece hosting para páginas en Wordpress. https://www.webempresa.com/ [Accedido el 6 de noviembre 2018]

https://www.webempresa.com/


49

Ilustración 16. Resultado del análisis en WP Doctor.29

Para la evaluación de las páginas webs, WPDoctor examina los datos que Google tiene muy

en cuenta a la hora de indexar páginas web, estos datos son los llamados metadatos o

etiquetas META30, los cuales definen las keywords, el título, la descripción, el autor, etc. La

herramienta comprueba si estos datos están definidos o, por el contrario, están vacíos, lo

cual supondría un aspecto negativo para el posicionamiento web y para la indexación. La

herramienta también mide el tamaño de todos los ficheros de la web y el tamaño de las

imágenes entre otras cosas para determinar la velocidad de esta.

29 Fuente: https://www.wpdoctor.es/analisis/?url=https:%2F%2Fes.wordpress.com%2F [Accedido el 4 de noviembre 2018] 30 Definición etiquetas META: la palabra meta significa información sobre. Los Meta Tags fueron creados desde el principio para proporcionar información concisa sobre un sitio web. Las meta etiquetas contienen información sobre la página web, como el autor, las palabras clave, la descripción, el tipo de documento, los derechos de autor y otra información básica. Fuente: https://codex.wordpress.org/Meta_Tags_in_WordPress [Accedido el 21 de noviembre 2018]

https://www.wpdoctor.es/analisis/?url=https:%2F%2Fes.wordpress.com%2F

https://codex.wordpress.org/Meta_Tags_in_WordPress


4.4.5. Website Grader

Website Grader es una herramienta gratuita ofrecida por HubSpot que analiza el

rendimiento, la adaptabilidad móvil, el SEO y la seguridad de una web [25]. A

continuación, igual que en las otras herramientas, ponemos a prueba la página principal

de la web de la universidad y obtenemos estos resultados, que parecen notablemente

mejores que los obtenidos anteriormente.

Ilustración 17. Resultados obtenidos en Website Grade.31

Si volvemos a echar un vistazo a los resultados obtenidos en Bankia Índicex en la

Ilustración 13, observamos que en movilidad obtuvimos un 5,9/10 de puntuación,

mientras que en Website Grader tenemos un 30/30, dos resultados bastante diferentes.

En la Ilustración 18 observamos los detalles sobre el análisis del rendimiento de la web,

donde especifica el tamaño de la web, la velocidad de carga, etc.

31 Fuente: https://website.grader.com/results/www.ua.es [Accedido el 5 de noviembre 2018]

https://website.grader.com/results/www.ua.es


51

Ilustración 18. Información específica sobre los resultados.32

Esta herramienta, para poner a prueba el rendimiento, calcula el tamaño de la página, el

número de peticiones HTTP y la velocidad de la página principalmente. En cuanto a la

adaptabilidad móvil, comprueba si la web es responsive (adaptativo) y si la vista está

ajustada al tamaño de pantalla. Para el SEO comprueba la longitud y consistencia de los

títulos, las meta descripciones, los titulares y si existe el sitemap (mapa del sitio).

4.4.6. GTMetrix

Por último, hemos dado con GTMetrix, una herramienta similar que analiza de manera

específica distintos tiempos de carga como el tiempo exacto de cada request (petición), la

optimización de los recursos, etc. Algunos de los resultados que ofrece sólo son visibles

tras registrarte en la página.

32 Fuente: https://website.grader.com/results/www.ua.es [Accedido el 5 de noviembre 2018]

https://website.grader.com/results/www.ua.es


Ilustración 19. Resultados obtenidos en GTMetrix.33

GTMetrix también examina, la velocidad y el rendimiento de la página midiendo el tiempo

que tarda en cargar, observando el tamaño de los archivos, la optimización y el número de

peticiones a otras páginas.

4.5. Conclusiones

Casi todas estas herramientas funcionan de la igual manera, primero introducimos la URL

de la página web a evaluar, después se muestran los resultados de manera visual y con una

puntuación adjudicada y, por último, ofrece información más detallada sobre estos además

de consejos para que mejores tu web. Además, cabe destacar que todas muestran además

los resultados que obtendrías en PageSpeed Insights, enlazando a esta página.

Sin embargo, cabe decir que estas herramientas, al fijarse en algo en concreto como por

ejemplo en la optimización como ocurre en PageSpeed Insights, puede pasar que al

intentar corregir algunas cosas concretas para llegar al 100/100 de puntuación,

sacrifiquemos otras cosas importantes que pueden hacer que nuestra página web se vea

mal. Así lo han contado Javier Gobea, CEO en Hormigas en la Nube34, en el post “Por qué

debes olvidarte YA de PageSpeed, WP Doctor y de medir tanto tu web” [27] y Manuel

Vicedo, consultor web especializado en WordPress, en “Por qué aumentar el PageSpeed de

33 Fuente: https://gtmetrix.com/reports/www.ua.es/RfhTTT6r [Accedido el 7 de noviembre 2018] 34 Hormigas en la Nube: empresa dedicada a la consultoría en Wordpress.

https://gtmetrix.com/reports/www.ua.es/RfhTTT6r


53

tu blog a 100% no te servirá de nada”[28]. Ambos pretenden dejar claro que no hay que

obsesionarse con conseguir el 100% de la puntuación que te dan estas herramientas

porque muchas veces conseguir esto supondría otras pérdidas importantes, sobre todo si

hablamos de webs hechas con WordPress. En el caso de Javier Gobea, él mismo somete su

web a este examen y nos demuestra que muchas veces los plugins no son reconocidos o no

se detectan algunas implementaciones que sí están.

Vemos que hay diversas herramientas, sin embargo, estas se centran es aspectos concretos

como la velocidad, la competitividad, etc. Lo que nosotros buscamos es un criterio

unificado, es decir, un acuerdo objetivo que diga qué aspectos debemos examinar

exactamente para determinar la UX. Para ello, lo primero es recopilar principios teóricos y

heurísticos de la UX para crear la metodología de análisis que permita crear este indicador

UX y más tarde, si disponemos de recursos para ello, desarrollar una herramienta software

que realice el análisis de UX.



55

5. Objetivos

El objetivo principal del proyecto será diseñar una herramienta que permita la evaluación

de la experiencia de usuario en todo tipo de plataformas. Queremos conseguir que esta

herramienta sea una gran ayuda para cualquier desarrollador interesado en mejorar la UX

de su plataforma y no tengan los conocimientos suficientes en el tema.

A continuación, definiremos algunos sub-objetivos más concretos y específicos que nos

ayudarán a conseguir el objetivo principal de manera más sencilla.

Hacer un estudio del arte. En primer lugar, necesitamos adquirir más

conocimientos en este campo, para ello estudiaremos la problemática con la que

nos encontramos e intentaremos encontrar las mejores soluciones a estos

problemas.

Extraer los principios y definiciones básicas de la UX. Esta recogida de información

ayudará a que nuestro proyecto sea objetivo, basando nuestra herramienta en

principios y definiciones de la experiencia de usuario ya existentes y estudiadas.

Esto quedará abordado dentro del estudio del arte, ya que forma parte del estudio

teórico inicial.

Desarrollar una metodología de evaluación para la UX. Esta metodología tendrá uso

en la creación de páginas web y diseño de UX/UI, de manera que se pueda,

siguiendo dicha metodología, diseñar e implementar una buena experiencia de

usuario para cada plataforma. Esta metodología estará sustentada por una

herramienta que permitirá evaluar de forma rápida en qué medida un sitio web

está cumpliendo la metodología.

Probar y validar la herramienta de evaluación. Tendremos que asegurarnos de que

nuestra herramienta es fiel a nuestro objetivo y que funciona según lo previsto. De

no ser así, haremos las modificaciones oportunas para que cumpla con los

requisitos.



57

6. Metodología

6.1. Estudio teórico y recopilación de información

Al comienzo de este proyecto para el desarrollo de una metodología de evaluación de la UX

se llevó a cabo la recopilación de información sobre la experiencia de usuario y todo lo

relacionado con ella. Para que todo el desarrollo posterior tenga una congruencia, es

necesario tener unas bases sobre el tema a tratar. Toda la información es extraída de

fuentes fiables como estudios o publicaciones de autores con experiencia en la UX/UI

como profesores de universidad, investigadores o propietarios/trabajadores de empresas

punteras en el sector de páginas web y diseño. Todas las fuentes externas usadas en el

proyecto, están referenciadas en el apartado de Bibliografías siguiendo el formato APA

(American Psychological Association).

De este estudio teórico se extraen los fundamentos de la experiencia de usuario, su

definición y la importancia que tiene para el éxito y el buen funcionamiento de

plataformas y sitios web.

6.2. Recopilación de las propiedades que componen la UX

Al observar que la experiencia de usuario es, en gran parte, subjetiva, se buscaron

patrones para medirla de manera objetiva.

Como parte de la metodología, a raíz de la recopilación de las propiedades que componen

la UX, se elaboró un listado de buenas prácticas, de las cuales, se extrajo una pauta que

definiría en una sola frase la buena práctica. Además, tras un estudio de la competencia en

el que se contrastaron las herramientas que empleaban para evaluar la UX, se estableció el

mecanismo para medirlas: un cuestionario.

6.3. Desarrollo de la herramienta

Con el fin de evaluar la UX, el objetivo principal de la metodología, se procedió al diseño de

una herramienta que cumpliese con este propósito. Tras concluir que la mejor opción sería

un cuestionario formado por distintas preguntas que estableciesen qué pautas se

cumplían y cuáles no, se procedió a la definición de las preguntas, estudiando las posibles

respuestas y realizando las debidas modificaciones para que el comportamiento del

cuestionario fuese el apropiado.


Posteriormente, se llevó a cabo la implementación de la herramienta. Esta se desarrolló en

Excel, haciendo uso del lenguaje de programación Visual Basic for Applications (VBA),

gracias al cual se modifica el cuestionario según la necesidad de cada sitio web y se realiza

el cálculo de la puntuación final.

Finalmente, se diseñaron distintas pruebas y se validó la herramienta con la ayuda de

usuarios que colaboraron a través de una encuesta.

6.4. Herramientas software

Este proyecto ha sido llevado a cabo con la ayuda de distintas herramientas software:

Microsoft Word

Programa informático de Microsoft orientado al procesamiento de textos.

Usado para el desarrollo de la memoria del TFG.

Microsoft Excel

Aplicación de hojas de cálculo creada por Microsoft. Usada para la

implementación de la herramienta de evaluación.

Adobe Illustrator

Herramienta de Adobe para la edición de gráficos vectoriales. Usada

para la creación de esquemas en el documento.

Toggl

Herramienta de Toggl OÜ para contabilizar el tiempo dedicado a cada

tarea. Usado para controlar el tiempo empleado en cada apartado del

proyecto.

Google Forms

Herramienta creada por Google para la creación de encuestas y

formularios. Usada para la creación de una encuesta para recopilar

fácilmente los datos introducidos por los usuarios.


59

7. Desarrollo de la metodología de evaluación de la UX

El término metodología se define como el grupo de mecanismos o procedimientos

racionales, empleados para el logro de un objetivo, o serie de objetivos que dirige una

investigación científica. Son muchos los contextos en donde la palabra metodología puede

ser utilizada, entre los cuales se encuentra la metodología del desarrollo de software, la

cual hace referencia al conjunto de técnicas, procedimientos y soportes documentales

empleados en el diseño de sistemas de información. Su objetivo principal es exponer una

serie de técnicas clásicas y modernas de modelado de sistemas que permitan desarrollar

un software de calidad, que incluyen heurísticas de construcción y criterios de

comparación de modelos de sistemas [29].

Según nos explica Tomàs Modroño, diseñador de experiencia de usuario en Interactius35,

existen varios tipos de metodologías de UX. Él nos habla de la evaluación heurística en

concreto y comenta que es una de las metodologías más comunes. En su post

“Metodologías de UX: Evaluación Heurística (PARTE I)” [30] comenta que esta

metodología inspecciona problemas potenciales, ya que el evaluador se pone en la piel del

usuario real, intentando predecir los errores que podrá encontrarse. En la segunda parte

de esta publicación, “Metodologías de UX: Evaluación Heurística (PARTE II)” [31], Tomàs

nos detalla cómo podemos llevar a cabo esta evaluación heurística, ofreciendo, además,

algunas ventajas y desventajas.

7.1. Objetivo de la metodología

Esta metodología tiene como objetivo principal el análisis de la experiencia de usuario en

plataformas, ya sea web o móvil. Para ello, pasaremos a definir los puntos que deberán ser

evaluados con el fin de conseguir un resultado objetivo que ayude al entendimiento y

mejora de la UX en las plataformas. En primer lugar, decidiremos qué áreas de la web son

las más relevantes y decisivas, después definiremos, dentro de cada área, unas pautas

específicas, las cuales han sido recogidas anteriormente en el estado del arte, guiándonos

de expertos en UX como Jakob Nielsen. En tercer lugar, definiremos las cuestiones que

formarán parte de la herramienta de evaluación, analizando previamente qué áreas

queremos evaluar y por qué. Después crearemos dicha herramienta, la cual podrá ser

utilizada como medio práctico para que el interesado pueda realizar el cuestionario

35 Interactius es una consultoría estratégica de Barcelona especializada en transformación digital, innovación, diseño UX, branding y contenidos. Fuente: https://www.linkedin.com/company/interactius/

https://www.linkedin.com/company/interactius/


fácilmente y posteriormente, hacer un cálculo de los resultados, de manera que, nada más

realizar el cuestionario se muestre el resultado final.

7.2. Definición de las áreas a evaluar

Antes de proceder a la definición de las pautas que servirán como esqueleto de nuestra

metodología, realizaremos una selección de qué áreas relacionadas con un sitio web

vamos a tener en cuenta a la hora de evaluar. Esta selección es necesaria, ya que una

plataforma está compuesta por multitud de secciones, cada una relacionada con un

aspecto diferente y enfocada a una función específica.

Nuestra metodología trata la experiencia de usuario, lo cual implica principalmente el

front-end, es decir, los elementos y funciones que se encuentran de cara al usuario y a lo

visual de la plataforma. Por esto vamos a descartar las áreas que tienen que ver con el

back-end de una web, como pueden ser las bases de datos, conexiones con servidores, etc.

No podemos olvidar que la UX está influenciada tanto por el front-end como por el back-

end, de hecho, un buen diseño en la base de datos supondrá que el sitio web cargue de

manera más rápida, lo cual ayuda a una mejor experiencia. Sin embargo, ya que no

podemos abarcarlo todo en una sola herramienta, nos centraremos más en el diseño.

La parte visual y que interacciona con el usuario la componen numerosos elementos. Estos

elementos pueden abarcar desde los detalles únicamente visuales hasta las interacciones

del usuario con el sitio web. Para establecer un orden y no perdernos entre los numerosos

componentes o áreas de una plataforma, vamos a establecer un orden específico a la hora

de estudiarlos. Este orden irá de las áreas con conceptos más genéricos, hasta los

elementos más específicos.

La primera área que nombraremos tiene que ver con la visión general del sitio web, tanto

lógica como estéticamente. Esta llevará la etiqueta de “Lógica Visual” y contemplará pautas

relacionadas con la coherencia estética, la jerarquía del diseño o indicaciones visuales que

debemos aportar al usuario. Si indagamos más, la lógica visual, está compuesta por 5

principios relacionados con el diseño: principio de la jerarquía, principio de la coherencia,

principio del significado, principio de la organización y principio de la funcionalidad. El

técnico superior en Publicidad del Polimodal de Comunicación, Artes y Diseño de

Argentina, Diego Zanetti, ofrece un documento extenso sobre la lógica visual en el que

explica estos principios detenidamente [49].

La segunda área que evaluaremos es el Contenido de la web relacionado con la redacción y

el lenguaje, es decir, qué vamos a escribir, cómo lo vamos a escribir y dónde. Una gran


61

interacción con el usuario se realiza a través de las palabras, por ello consideremos

importante evaluar si este contenido transmite lo que se desea.

Otra área que nos encaja dentro de los conceptos genéricos aun formando parte ya del

ámbito de la legibilidad es el Color y Contraste de los distintos elementos, como el texto, o

los componentes interactivos. Queremos que el sitio web se vea correctamente, teniendo

en cuenta, además, a las personas daltónicas, ya que afecta a un 8% de los hombres y a un

0,5% de las mujeres [33].

Los Iconos son un componente fundamental. Estos están presentes en la mayoría de sitios

web y son un recurso muy utilizado, ya que contribuyen a la rápida comprensión de las

funciones que tiene una plataforma pero que si se usan erróneamente pueden generar el

efecto contrario. En el post “Uso (que no abuso) de los iconos en diseño web” de

Websa100 citan 9 beneficios del uso de iconos [50].

Entramos ya a hablar de la navegación. El componente esencial para navegar por el sitio

web es el Menú de navegación, imprescindible en cualquier plataforma y debe estar

siempre presente. La ausencia o una disposición errónea de este puede suponer un efecto

negativo para la UX.

Con el menú de navegación debería bastar para encontrar cualquier elemento de un sitio

web, sin embargo, los usuarios de internet estamos acostumbrados al uso de buscadores

como Google, ya que nos facilita una búsqueda rápida y muy específica. Por esta razón, la

Herramienta de búsqueda se ha convertido en un imprescindible.

Ahora pasamos a un área que puede ser olvidada pero muy relevante a la hora de navegar

por el sitio. Nos referimos al Tiempo de Carga. Pasando por alto la importancia que tiene

un buen tiempo de carga para el posicionamiento web en los buscadores (ya que no

queremos centrarnos en eso), tener una web mal optimizada es muy negativo en muchos

otros aspectos. Según Google, 3 segundos es el tiempo máximo de espera de la mayoría de

usuarios [51]. Además, hacer esperar a un usuario y, por ende, hacer que pierda el tiempo,

hará que este abandone el sitio si el tiempo es lo suficientemente prolongado, por lo que

debemos cuidar cada detalle durante estos tiempos de espera. Como vemos, el tiempo de

carga depende del back-end, aun así, en nuestra metodología evaluaremos que la parte del

diseño del front-end cumple con las pautas necesarias para que este tiempo de espera

parezca el menor posible.

Por otro lado, disponer de Ayuda para el usuario es más importante de lo que parece,

puesto que si este no sabe cómo usar el sitio web y no encuentra ayuda, no podrá cumplir


su objetivo. Ofrecer asistencia y ayuda es necesario, pero si lo hacemos de un modo

erróneo, puede surgir un efecto negativo en la UX.

Damos paso ya a las áreas más específicas, dedicadas a elementos esenciales de una web

que tienen como propósito diferentes funciones determinadas. Con estas características

podemos encontrar 3 secciones. La primera de ellas son los Formularios, necesarios e

imprescindibles si queremos recoger algún dato del usuario. La mayoría de los sitios web

tienen formularios con distintos propósitos, ya sea para realizar encuestas, para

almacenar información importante o para realizar el registro o login en la web. En

cualquier caso, el objetivo principal del usuario no es rellenar el formulario, sino que debe

pasar por esto para conseguir lo que quiere, por ello es imprescindible que los formularios

tengan un diseño y una función adecuada y correcta.

Un componente esencial y básico que permite y facilita la navegación entre dos páginas o

sitios web son los enlaces o Links. Es un recurso muy usado que, si no se emplea como se

espera, no generará buena UX, por lo que necesita ser evaluado.

La última sección que encontramos dentro de la clasificación como elemento específico,

encontramos los Botones, un recurso que requiere especial evaluación, ya que se suele

depositar en ellos acciones más o menos importantes y si no se siguen unas determinadas

pautas pueden provocar que el usuario cometa errores indeseados o no alcance su

objetivo fácilmente.

En último lugar, está situada un área que se puede considerar del ámbito general, pero es

única y específicamente para la visualización del sitio web en dispositivos Móviles. Debido

a que estos (sobre todo los móviles) tienen un tamaño de pantalla y un aspecto diferente,

como la orientación principal en vertical y no en horizontal (ordenadores), los sitios web

debe estar preparado para su uso en teléfono móvil y Tablet. Cada vez son más los

usuarios que navegan por internet a través de dispositivos móviles, ya sea de camino al

trabajo, en cualquier momento en el que se encuentren fuera de casa o para búsquedas

rápidas estén donde estén, por esta razón se debe tener en cuenta las necesidades

específicas que pueda necesitar un usuario que accede a través del móvil (elementos más

grandes y accesibles e información principal muy accesible).

7.3. Definición de las pautas a evaluar

En este apartado vamos a proponer una serie de buenas prácticas para la UX de cada cual

extraeremos una pauta numerada. Las áreas y pautas elegidas son las que consideramos

más importantes y con mayor repercusión en la UX, por ello, de todos los principios


63

teóricos extraídos en el Estado del Arte hemos descartado las que consideramos menos

relevantes o que no encajarían en nuestra herramienta de evaluación, puesto que no

queremos realizar un cuestionario muy extenso y largo de responder.

Para que nuestra herramienta sea coherente, debemos definir el peso que tiene cada pauta

a la hora de evaluar ya que no todas tienen la misma importancia. Por ejemplo, puede

haber una que hable del tamaño que debe tener un botón, pero si ese botón no está en el

lugar adecuado porque no se ha cumplido la pauta que define dónde debe estar ubicado

ese botón, podría ser hasta inservible.

A continuación, dentro de las áreas que hemos seleccionado en el apartado anterior,

detallamos cada pauta seleccionada para componer la metodología de evaluación,

detallando el peso en puntos (pts.) que tendrá cada una de ellas en formato numérico.

7.3.1. Lógica Visual

Debemos asegurarnos de que los usuarios del sitio web puedan completar su objetivo

principal de forma rápida y sencilla, por ello debemos usar patrones comunes de sitios

web comunes y no hacer a los usuarios aprender algo nuevo. Por esta razón, debemos

mantener una jerarquía visual, partiendo de que los usuarios son más propensos a ver

más importantes los elementos situados en la parte superior.

PA01. Los elementos más importantes deben estar situados en la parte superior y los

de menor importancia en la parte inferior. (2 pts.)

Una plataforma con un diseño distinto en cada interfaz no transmite confianza y puede

despistar, por lo es muy recomendable crear una guía de estilos para seguir un mismo

diseño. Una guía de estilos es una colección de elemento prediseñados gráficos y reglas

que diseñadores o desarrolladores web deben seguir para asegurarse que partes

separadas del sitio web sean consistentes y creen una experiencia cohesiva al final [34].

Esta guía de estilos es una buena forma para hacer que la coherencia en el diseño se

cumpla, aun así, también se puede prescindir de ella si se hace uso de una librería de

estilos externas (por ejemplo, Bootstrap o Angular Material36).

PA02. Usar siempre las mismas formas, estructuras y diseño a lo largo de la interfaz.

(5 pts.)

36 Bootstrap y Angular Material son librerías de componentes para front-end. https://getbootstrap.com/ y https://material.angular.io/ [Accedido el 12 de enero de 2019]

https://getbootstrap.com/

https://material.angular.io/


Una de las leyes de Gestalt es el principio de proximidad. El principio de la proximidad

dice que los elementos aislados, pero con cierta cercanía tienden a ser considerados como

grupos [35].

Ilustración 20. Ejemplo gráfico de agrupar funciones o ítems similares por proximidad.37

PA03. Agrupar funciones o ítems similares por proximidad. (2 pts.)

Cualquier cambio de la interfaz debe ser claramente visible por el usuario, por eso es

recomendable usar animaciones indicándolo. Estas animaciones deben dar indicaciones

sobre su ubicación o sobre el cambio, por ejemplo, al expandir un menú de hamburguesa

situado en la parte superior izquierda, debemos desplegar el menú mediante una

animación que indique que el menú se despliega desde ese icono y no desde la parte

inferior de la pantalla. Otro ejemplo es la animación de las ventanas de MAC OS al

minimizarse.

Ilustración 21. Ejemplo gráfico de usar animaciones visibles para marcar cambios en la interfaz.38

PA04. Usar animaciones visibles para marcar cambios en la interfaz. (1 pt.)

37 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 25 de noviembre 2018] 38 Fuente: Ibídem

https://ernestoolivares.es/ux-experiencia-de-usuario/


65

Es muy común, al pulsar sobre el botón “comprar”, volver a pulsarlo si vemos que no ha

ocurrido nada aparentemente. Es un error no dar nada de información cuando se realiza

una interacción así, por esta razón, es necesario mostrar un mensaje sobre lo ocurrido

poco después de clicar el botón, ya sea de error o de éxito.

PA05. Dar información al usuario después de cada interacción importante (como

realizar una compra, eliminar algún dato, etc.), mostrando un mensaje de éxito

o error. (6 pts.)

Al hacer una interacción larga o compleja, es necesario mantener informado al usuario

sobre el punto actual en el que se encuentra, para que sepa cuántas operaciones le quedan

por hacer y cuántas ha hecho, además de dar la posibilidad de que retroceda a pasos

anteriores por si desea comprobar o modificar información de una operación anterior.

Ilustración 22. Ejemplo gráfico de mostrar el progreso y tiempo restante en las actividades del sistema.39

PA06. Mostrar el progreso y pasos restantes en las actividades con más de dos

pasos. (4 pts.)

PA07. Permitir el retroceso a pasos anteriores. (3 pts.)

Siguiendo la lógica de la pauta anterior, debemos mantener ubicados a los usuarios a

través de la navegación por la plataforma, debido a que puedan regresar al punto anterior

fácilmente y saber dónde se encuentran de manera rápida. Esto se hace mediante migas de

pan o mapas de secuencias.

39 Fuente: Ibídem


Ilustración 23. Ejemplo gráfico para mantener a los usuarios ubicados.40

PA08. Hacer uso de las migas de pan o de los mapas de secuencias para mantener

ubicados a los usuarios. (3 pts.)

El usuario debe reconocer fácilmente las áreas clicables o interactivas, de manera que

tenga claro con qué elemento puede interactuar y con cuál no. Esto evitará malentendidos.

PA09. Comunicar claramente qué áreas son clicables o interactivas. (2 pts.)

Más de una vez nos hemos encontrado con un pop-up imposible de cerrar y que nos estaba

poniendo de los nervios. Siempre debe ser visible la forma de cerrar una ventana

emergente o pop-up.

PA10. Proporcionar una forma visible de cerrar un pop-up. (3 pts.)

Si el usuario se encuentra con mucho texto en una misma página puede ser abrumador.

Captará mejor la información si él mismo va haciendo que aparezca la información que le

interesa en ese momento. Para ello es recomendable el uso de acordeones.

40 Fuente: Ibídem.


67

Ilustración 24. Ejemplo del uso del acordeón.41

PA11. Utilizar acordeones para comprimir contenido extenso. (3 pts.)

PA12. Cuando se usen acordeones, ofrecer una forma de contraer el contenido de

nuevo una vez que el usuario lo haya expandido. (2 pts.)

El scroll de una página es una forma de interactuar con el usuario, ya que este es libre de

visualizar el contenido que quiera en ese momento, pudiendo desplazarse hacia el final de

una página cuando este desee. Sin embargo, en algunas ocasiones puede ser confuso,

puesto que este puede no estar bien indicado y hacer que el usuario piense que no se

puede desplazar, lo que supondría que este no vería toda la información.

Para indicar que se puede hacer scroll y que hay más información, se puede hacer de

manera directa o indirecta, pudiendo ser mediante flechas que indiquen que hay más

información abajo, o extendiendo los elementos más allá del marco visible para indicar al

usuario que hay más información. Un ejemplo de ello se puede ver en la siguiente imagen.

Ilustración 25. Ejemplo de indicación visual de scroll.42

41 Fuente: https://webdesignledger.com/best-practices-accordions-in-web-design/ [Accedido el 2 de enero de 2019]

https://webdesignledger.com/best-practices-accordions-in-web-design/


PA13. Proporcionar una fuerte indicación visual de la dirección del desplazamiento y

de si hay más contenido disponible. (2 pts.)

Los usuarios esperan encontrar en la esquina superior derecha de la web acciones

principales como el login, las opciones de cuenta, cerrar sesión, contacto o el carrito de

compra en caso de tienda online, ya que es a lo que estamos acostumbrados. Si ubicamos

estas funciones en otra parte puede que no las encuentren fácilmente.

PA14. Colocar funciones útiles en la esquina superior derecha, como el login,

opciones de cuenta, contacto, la búsqueda o el carrito de compra. (4 pts.)

Se debe poder volver atrás o a la página principal desde todas las páginas, ya que si el

usuario llega a una página desde la que no se puede salir a ningún lado le causará

confusión.

PA15. Todas las páginas de un sitio web deben tener una forma de retroceder a otra

página. (4 pts.)

7.3.2. Contenidos (textos)

No toda la información ofrecida en una web o plataforma es igual de importante, por lo

que tenemos que hacer notar qué es importante y qué no lo es tanto. Esto se hace

mediante contrastes de color, tamaño o estilo.

PA16. Crear contrastes de color, tamaño y estilo para diferenciar la información

principal de la información extra. (3 pts.)

Lo primero que se lee al entrar en una página son los encabezados, por ello es bueno hacer

un uso correcto de ellos y que tengan sentido por sí mismos, así como escribir información

de interés.

PA17. Escribir encabezados que tengan sentido por sí mismos. (5 pts.)

42 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 3 de enero de 2019]



69

En ocasiones en las que hay mucho texto en una página, nos perdemos leyendo o no

conseguimos enterarnos del asunto, por ello en recomendable utilizar un mayor espaciado

entre párrafos y líneas de una lista para aumentar la legibilidad y conseguir leer sin

dificultad.

PA18. Utilizar un mayor espaciado entre líneas de listas y párrafos para aumentar la

legibilidad. (2 pts.)

Según el post “Por qué no se debe escribir TODO EN MAYÚSCULAS” del blog de

Desarrollos Creativos, en el lenguaje de Internet, escribir en MAYÚSCULA SOSTENIDA es

entendido como un grito para llamar la atención. Como toda norma, esta no ha sido

establecida por una persona o por un grupo, sino que se desarrolla a través del sentido

común de los usuarios y del uso mismo del lenguaje.

Para la gran mayoría de los usuarios resulta incómodo e irritante leer bloques enteros de

texto en mayúsculas. Incluso se ha demostrado que estos bloques de texto representan

una pésima experiencia de usuario en las páginas web ya que afecta la legibilidad del texto.

Además, muchas personas manifiestan que cuando se encuentran bloques enteros escritos

en mayúsculas automáticamente renuncian a la lectura [36].

PA19. Escribir los titulares y eslóganes sin mayúsculas sostenidas. Es decir, haciendo

un uso correcto de mayúsculas y minúsculas. (2 pts.)

7.3.3. Color y Contraste

Anteriormente hemos comentado la importancia de comunicar claramente los elementos

interactivos o clicables para un correcto flujo por la plataforma, pues bien, además,

debemos comunicarlo cuando el usuario pase el cursor por encima de dicho elemento.

Esto se puede hacer mediante el cambio de colores, contrastes o sombras, haciendo que el

elemento interactivo quede diferenciado y resaltado con respecto al resto.

PA20. Resaltar el elemento interactivo sobre el que el usuario pasa el cursor. (3 pts.)

Un pop-up o ventana emergente, es ese contenido que aparece de forma repentina en un

navegador web o en la pantalla de tu ordenador [37]. Normalmente, este contendrá

información que el desarrollador considera relevante en ese momento, por ello, si queda

camuflado entre el resto de la página, el usuario puede no percatarse de que esa ventana


emergente a aparecido. Para destacarla y que el foco del usuario vaya a ella, basta con

oscurecer el fondo bajo el pop-up, como se muestra en la Ilustración 26.

Ilustración 26. Ejemplo gráfico de oscurecer el fondo bajo los pop-ups.43

PA21. Oscurecer el fondo bajo los pop-ups o cajas con mensajes. (2 pts.)

No podemos ignorar a las personas daltónicas, ya que estas constituyen un 8% de la

población total. El daltonismo es una enfermedad que disminuye la capacidad de ver un

color, o de distinguir los colores separados unos de los otros [38].

Ilustración 27. Tipos de daltonismo.44

A menudo, los colores que empleamos en nuestro diseño no son distinguibles para una

persona daltónica y no nos damos ni cuenta, por lo que es recomendable convertir el

diseño a escala de grises para comprobar que la información importante se puede leer y

pasarlo por un filtro que simule la ceguera por los colores para ver que el diseño y la

información se entiende correctamente. Además, en el post “Cómo diseñar una web para

usuarios daltónicos” del blog LanceTalent, nos dan algunas recomendaciones a tener en

cuenta para que nuestra UX no se vea afectada en el caso de personas daltónicas, como

evitar el diseño de bajo contraste siguiendo la guía de Web Content Accessibility

43 Fuente: Ibídem 44 Fuente: https://www.lancetalent.com/blog/como-disenar-una-web-para-usuarios-daltonicos/ [Accedido el 3 de enero de 2019]

https://www.lancetalent.com/blog/como-disenar-una-web-para-usuarios-daltonicos/


71

Guidelines (WCAG)45 o probar nuestro trabajo en herramientas como Photoshop o

Illustrator, donde encontramos filtros en el menú (Ver > Ajuste de prueba > Ceguera de

los colores) [38].

PA22. Convertir los diseños a escala de grises o pasarlo por un filtro que simule la

ceguera de colores (daltonismo) para asegurar que todos los usuarios pueden

leer la información importante. (5 pts.)

Además del contraste necesario mencionado en el punto anterior, si alineamos el texto a la

izquierda, este será más fácil de leer, puesto que así es como estamos acostumbrados a

verlo.

PA23. El texto debe ser muy fácil de leer. Crear contraste entre el texto y el fondo y

alinear a la izquierda. (4 pts.)

Usar colores congruentes con el significado de cada elemento o acción hará que sea mucho

más intuitivo y evitaremos errores, ya que si, por ejemplo, el botón de “anular operación”

lo ponemos en color verde y el de “confirmar” en rojo, muchos de nosotros anularíamos la

operación sin haberlo querido.

PA24. Usar colores congruentes con el significado de cada elemento (color rojo para

errores o cancelar operaciones y verde para aceptar o indicar que todo ha ido

bien). (6 pts.)

Algunas acciones son importantes y su ejecución podría tener un resultado no deseado

para el usuario o que no haya vuelta atrás, por eso debemos hacer una diferenciación

visual de esa acción respecto a las demás, ya sea poniendo un color alarmante o dejando

un espacio.

45 Fuente: https://www.w3.org/TR/WCAG20/ [Accedido el 3 de enero de 2019]



Ilustración 28. Ejemplo de acción diferenciada.46

PA25. Diferenciar las funciones más importantes mediante el color o dejando un

espacio. (2 pts.)

7.3.4. Iconos

El uso de iconos en una web es muy importante, debido a que además de aportar estética,

ayudan al usuario a entender mejor y más rápidamente las acciones, eso sí, siempre y

cuando se empleen de manera correcta y no se abusemos de su uso.

Google ofrece en su plataforma Material Design47, que ayuda a la hora de crear diseños

web mostrando los estándares para un diseño UX/UI apropiado, algunos principios

básicos para el uso apropiado de los iconos, además de sugerencias a la hora de crearlos

uno mismo. En la siguiente ilustración, vemos que simplifiquemos iconos para una mayor

claridad y legibilidad (icono a la izquierda), y que no seamos demasiado literales, que

evitemos los iconos complejos (imagen a la derecha).

46 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 2 de enero de 2019]

47 Fuente plataforma Material Design: https://material.io/ [Accedido el 3 de enero de 2019]


https://material.io/


73

Ilustración 29. Ejemplo de complejidad correcta en los iconos.48

Material Design dispone de una librería de iconos de ámbitos distintos como mapas,

imágenes o acciones, los cuales son de libre uso y personalizables49.

Si ya existe un icono para describir una determinada acción, es recomendable no

modificarlo y usar siempre el mismo. En la siguiente imagen podemos ver algunos de los

iconos más familiares y significativos.

Ilustración 30. Ejemplos de iconos familiares.50

PA26. Utilizar iconos para ayudar a entender el significado de una acción. (4 pts.)

PA27. Los iconos deben describir visualmente su función y propósito. Es importante

que sean simples, familiares y significativos. (4 pts.)

48 Fuente: https://material.io/design/iconography/system-icons.html#system-icon-metrics [Accedido el 3 de enero de 2019] 49 https://material.io/tools/icons/?icon=phone_locked&style=baseline [Accedido el 3 de enero de 2019] 50 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 25 de noviembre 2018]

https://material.io/design/iconography/system-icons.html#system-icon-metrics

https://material.io/tools/icons/?icon=phone_locked&style=baseline



PA28. Los iconos solo deben usarse cuando sea necesario y no usarlos en exceso o

simplemente para decorar. (1 pt.)

7.3.5. Menú de Navegación

Toda plataforma debe disponer de un menú de navegación o una forma de navegar a

través de sus páginas. Este debe estar visible en todo momento y no ocultarse, además,

debe ser obvio cómo acceder a él.

PA29. Siempre debe ser obvio cómo acceder al menú de navegación en un sitio web.

(6 pts.)

Cualquier página debería ser accesible como máximo en 3 clics, esto significa que, si la

jerarquía de tu menú tiene más de 3 niveles de profundidad, este se tiene que volver a

diseñar para que así no sea.

PA30. La jerarquía del sitio web debe ser inferior a 3 niveles de profundidad. (3 pts.)

Las etiquetas del menú deben de ser descriptivas, lo que conlleva que sean palabras claras,

que transmitan la mayor cantidad de información posible y que no sean más de 2-3

palabras.

PA31. Hacer que las etiquetas de navegación sean específicas, menos de 3 palabras,

que sean clave y que transmitan la mayor cantidad de información posible. (3

pts.)

Los usuarios están acostumbrados a que las listas desplegables del menú sean verticales,

no horizontales. Además, si fuesen horizontales sería más difícil el desplazamiento y

también de entender y ocuparía mucho espacio a lo largo, ya que las etiquetas están

escritas en horizontal.

PA32. Las listas desplegables de menús deben ser verticales, no horizontales. (2 pts.)

Funciones principales como el inicio de sesión o la búsqueda no se deben incluir dentro de

los menús, puesto que quedan ocultas y no son tan fáciles de encontrar como si estuvieran

en la parte superior derecha.


75

PA33. Las funciones de inicio de sesión o búsqueda deben permanecer fuera de los

menús del sitio. (3 pts.)

Los elementos que son constantes y se mantienen en todas las páginas no deberían

cambiar de sitio si no queremos despistar a los usuarios. Si inicialmente hemos colocado el

menú de navegación en la parte superior izquierda, esta debería ser su misma posición en

todas las páginas, ya que es ahí donde se espera encontrarlo.

PA34. Mantener los menús de navegación en la misma posición a través de todas las

páginas. (3 pts.)

Es importante también indicar dónde nos encontramos. Para ello, se debe destacar de

alguna manera la sección del menú en la que estamos actualmente, ya sea mediante el

color, el subrayado o cambiando a negrita la etiqueta.

Ilustración 31. Ejemplo gráfico para destacar la sección actual del menú.51

PA35. Destacar la sección actual dentro del menú de navegación. (3 pts.)

7.3.6. Búsqueda

Como bien comenta el blog Aukera, el buscador de nuestro sitio web es el punto más eficaz

que la marca posee para ayudar a los clientes a solucionar los distintos obstáculos y dudas

que puedan surgir durante la navegación [39]. A menos que el sitio web sea muy pequeño

y tenga poco contenido, es necesario disponer de un campo de búsqueda.

51 Fuente: Ibídem


PA36. A menos que se tenga un sitio web muy pequeño con poco contenido, siempre

es necesario un campo de búsqueda. (3 pts.)

Es importante que un cuadro de búsqueda parezca que lo es, por lo que debe ser

reconocible el cuadro de texto y aparecer junto a un icono de búsqueda (una lupa). Si

además lo situamos en la esquina superior derecha como hemos comentado

anteriormente cuando hablábamos de la navegación, será mucho más fácil de encontrar,

pues este es el sitio donde se suele hallar. Cabe decir que el cuadro de texto debe de ser de

un tamaño suficientemente amplio para que se pueda ver toda la búsqueda.

Ilustración 32. Ejemplo de campo de búsqueda.52

PA37. El campo de búsqueda siempre debe verse como un cuadro de texto y junto a

un icono de búsqueda. (4 pts.)

PA38. Situar el campo de búsqueda en la parte superior derecha del portal. (2 pts.)

PA39. Los campos de búsqueda en los sitios web deben ser lo suficientemente

amplios para ver toda la consulta de búsqueda. (1 pt.)

7.3.7. Tiempo de Carga

La diseñadora web y experta en UX Txaro Fontalba53, argumenta que, si el sitio tarda más

de diez segundos en cargar, la mayoría de los visitantes no esperarán. Debemos pensar

sobre el tiempo de carga antes de añadir contenido gráfico y multimedia a la web que haga

la carga más lenta. Es necesario optimizar las nuevas imágenes antes de añadirlas al sitio

web [40].

Uno de los recursos para no hacer esperar a los usuarios es mostrar un esqueleto del sitio

para transmitir el diseño mientras la página está cargando, además, el texto se debe

mostrar antes de que las imágenes carguen.

52 Fuente: https://iwos.com/blog/barra-busqueda-mejora-usabilidad-aumento-ventas/ [Accedido el 3 de enero de 2019] 53 Más información sobre Txaro Fontalba: https://www.linkedin.com/in/txarofontalba/?originalSubdomain=es [Accedido el 4 de enero de 2019]

https://iwos.com/blog/barra-busqueda-mejora-usabilidad-aumento-ventas/

https://www.linkedin.com/in/txarofontalba/?originalSubdomain=es


77

Ilustración 33. Presentación previa de la página principal de la app BBVA.54

PA40. Mostrar un esqueleto del diseño del sitio y el texto mientras se cargan las

imágenes. (1 pt.)

Podemos sacar un extracto de la publicación de Steinmann, Sascha & Rollin, Robér &

Schramm-Klein, Hanna & Mau, Gunnar & Wagner, Gerhard en 2016, titulada “El rol del

contraste de color y el color primario predominante de los iconos para aplicaciones de

juegos móviles en la influencia de las reacciones del usuario” que dice:

“... Por ejemplo, con respecto a la dimensión del tono, se encontró que el rojo provocaba

un mayor nivel de excitación en comparación con el azul; Curiosamente, si los productos

se presentaron frente a un fondo de color azul, se evaluarán más positivos que los

productos presentados frente a fondos de color rojo (Bellizzi e Hite 1992) y el fondo de

color rojo (en comparación con los fondos de color azul) aumentan la disposición del

usuario a pagar, así como la obtención de saltos de ofertas más altas en las subastas en

línea (Bagchi y Cheema 2013). Gorn et al. (1997) encontraron que un mayor nivel de

ligereza conducía a la relajación, mientras que un mayor nivel de saturación conducía a la

emoción. Además, el color de fondo de una página web influye en la rapidez de descarga

percibida y tiene consecuencias adicionales para las evaluaciones de los usuarios del sitio

web (Gorn et al. 2004). ...” [41] De este extracto concluimos que usar colores fríos en los

momentos de carga, aumenta la relajación, la cual forma nuestra siguiente pauta.

54 Fuente: Aplicación para Android BBVA España.


PA41. Usar colores fríos como el azul en las animaciones de carga, ya que reduce la

excitación y aumenta la relajación (Gorn et al., 2004). (1 pt.)

Un artículo de La Voz de Galicia relata que, durante los últimos 12 meses, los usuarios han

perdido en España más de 120 horas (5 días) frente a sus ordenadores esperando a que

aplicaciones y archivos tardan en cargarse, según un estudio de Redshift Research para

SanDisk, que recoge datos externos de 8.000 usuarios de PC en el Reino Unido, Francia,

Alemania, España, Italia, China, Australia y EE.UU. [42] Estos datos nos hacen imaginarnos

la cantidad de tiempo que pasamos esperando “algo”, ya no sólo frente al ordenador, sino

en nuestro día a día. Es por esta razón la importancia de mantener a los usuarios

entretenidos para que los periodos de espera no sea sólo esperar.

Ilustración 34. Ejemplo gráfico para mantener a los usuarios entretenidos en los períodos de espera.55

PA42. Mantener a los usuarios entretenidos durante los periodos largos de espera.

(1 pt.)

7.3.8. Ayuda

Cuando un usuario entra en un sitio web debería captar al instante el objetivo de ese sitio

y de todas sus páginas conforme va navegando por ellas, de lo contrario, este terminará

abandonando el sitio web, ya que no tendrá claro qué puede hacer. Si la función de cada

página no es obvia significa que algo estamos haciendo mal o no sabemos comunicarlo.

PA43. El objetivo principal de cada página web debe ser obvio. (6 pts.)

55 Fuente: https://www.google.es/ [Accedido el 25 de noviembre 2018]

https://www.google.es/


79

Aunque todo en la web sea obvio, siempre pueden aparecer ciertas dudas, por ello nunca

está de más ofrecer ayuda a nuestros usuarios cuando la necesiten. Una forma sencilla de

solventar algunas dudas que puedan o suelan tener algunos usuarios es creando una

página de preguntas frecuentes (en inglés, Frequently Asked Questions o FAQ), haciendo

una lista de las posibles dudas que puedan surgir y solventándolas. Otra opción, son los

llamados chatbots, los cuales se pueden implementar en nuestra propia plataforma web.

Un chatbot es un programa informático con el que es posible mantener una conversación,

tanto si queremos pedirle algún tipo de información o que lleve a cabo una acción [43].

Los usuarios son reacios a usar la ayuda, por lo que hay que ponerla en contexto y

ofrecerla cuando sea necesario.

PA44. Poner la ayuda en contexto y ofrecer asistentes y preguntas frecuentes (FAQ)

cuando sea apropiado y necesario. (1 pt.)

La ayuda y las instrucciones deben ser cortas y visualmente diferentes de otros elementos

de la interfaz, de esta manera serán claras y mucho más visibles. Asimismo, debemos

reducir la carga de memoria presentando una sola sugerencia a la vez.

No podemos olvidarnos de los usuarios expertos, de modo que, no debemos aborrecerlos

con consejos y sugerencias que no necesitan. Para conseguir ayudar a los nuevos usuarios

sin molestar a los usuarios expertos, podemos hacer uso de los tooltips. Estos son

pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado

durante unos instantes encima de un componente visual de una ventana. Son muy

prácticos para suministrar una información adicional relacionada a este componente [32].

Ilustración 35. Ejemplo de tooltip.56

PA45. Añadir sugerencias para ayudar a los usuarios nuevos sin molestar a los

usuarios expertos. (3 pts.)

56 Fuente: https://mail.google.com/mail [Accedido el 25 de noviembre 2018]

https://mail.google.com/mail


7.3.9. Formularios

En cualquier tipo de sitio web, debemos tener claro que el objetivo del usuario no es

rellenar un formulario web, sino a lo que puede acceder tras rellenar ese formulario. Por

esta razón, se debe solicitar única y exclusivamente los campos necesarios. Como bien dice

David Gil Ripoll, en el blog Usabilidad y Experiencia de Usuario, cada campo de más que

solicitemos al usuario es una posible barrera a la conversión. Recordemos que el

formulario es un “impedimento” entre el usuario y su objetivo final, la compra (en el caso

de una tienda online). Aquí deberíamos ser implacables. Cada campo que solicitemos al

usuario tiene que estar más que justificado. Deben estar los campos en su mínima

expresión, y deben ser los suficientes como para poder tramitar correctamente la solicitud

del usuario [44].

Nos encontramos con numerosos sitios web cuyos formularios tienen el texto aclaratorio

únicamente dentro del campo a rellenar. Un ejemplo de esto lo encontramos en la página

principal de Facebook, en el formulario de registro (imagen de la izquierda).

Ilustración 36. Ejemplo gráfico con las etiquetas de campo dentro y fuera de él (izquierda y derecha respectivamente).57

Hay diversas razones por las que la etiqueta debe estar situada fuera del campo. La razón

principal es que una vez empezamos a escribir en ese campo, la etiqueta desaparece, por

lo que si tras rellenar el formulario completo, queremos repasar la información

introducida, no sabremos qué etiqueta tenía cada campo.

Otra razón es que, si el usuario está utilizando el tabulador del teclado para pasar de

campo a campo, el cursor va a llegar al foco del mismo antes de que a él probablemente le

dé tiempo de leer lo que tiene que rellenar, con lo que le estaremos obligando a quitar el

foco para saber lo que tiene que hacer.

Por otra parte, la etiqueta se debe situar preferiblemente arriba del campo de texto, no a la

izquierda. De esta manera, los usuarios no tienen que buscar por separado las etiquetas

57 Fuente: https://www.facebook.com/ y https://accounts.google.com/signup [Accedido el 25 de noviembre 2018]

https://www.facebook.com/

https://accounts.google.com/signup


81

del campo y asociarlo a su campo correspondiente, sino que el movimiento natural hacia

abajo realiza la asociación mucho más eficientemente. De hecho, en el 2006 se hizo un

análisis de Eye tracking acerca de cómo consumían los usuarios los distintos tipos de

formulario según donde se situaban las etiquetas, a la izquierda, a la izquierda con

alineación derecha, o arriba del campo, y los resultados fueron concluyentes [44].

Ilustración 37. Imágenes resultantes del estudio de Eye tracking sobre formularios web.58

PA46. Las etiquetas de campo deben estar fuera y encima del campo de texto, para

que los usuarios no las pierdan de vista al comenzar a escribir. (3 pts.)

Cuando existen formularios muy largos y pesados, tenemos que dividirlo, creando así

distintas secciones para una mejor comprensión. De esta forma, se verá a primera vista

más claro y el usuario puede ir rellenándolo por secciones.

PA47. Dividir secciones con separadores para hacer que los formularios largos sean

más fáciles de usar. (2 pts.)

Todos los formularios tienen datos obligatorios y opcionales, por esta razón debemos

indicar claramente cuáles son obligatorios para indicar al usuario que tiene que rellenarlo.

En el caso de que todos los campos sean obligatorios, podemos indicarlo al comienzo,

evitando así, añadir una indicación junto a cada campo de manera que evitemos añadir

ruido visual. Por otra parte, la posibilidad de que todos sean opcionales no debería existir,

ya que entonces estaríamos haciendo rellenar al usuario un formulario que no es

imprescindible.

La aclaración o instrucción “los campos marcados con un asterisco (*) son obligatorios”

debemos situarla antes del formulario y no al final, ya que entonces la leerán una vez

hayan llegado abajo.

58 Fuente: http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/#No_incluir_el_texto_aclaratorio_del_campo_unicamente_dentro_del_campo [Accedido el 4 de enero de 2019]

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/#No_incluir_el_texto_aclaratorio_del_campo_unicamente_dentro_del_campo



PA48. Indicar claramente si los elementos de un formulario son opcionales u

obligatorios. (3 pts.)

Debemos ayudar en lo máximo posible a que el usuario introduzca los datos

correctamente, para así evitar errores que causen que el usuario invierta más tiempo del

necesario. Los campos en los cuales hay que introducir un número determinado que suele

estar separado por guiones, espacios u otros caracteres como pueden ser el campo del

número de cuenta o de un número largo, suelen provocar bastantes dudas y errores, ya

que no sabemos si introducir guiones, espacios o simplemente escribir todos los números

sin nada de por medio.

Sería de gran ayuda para el usuario que diésemos a cada campo la estructura correcta para

que esta coincida con la entrada de datos que se requiere, como en la imagen siguiente.

Ilustración 38. Ejemplo gráfico de campo con el formato esperado.59

Uno de los más problemáticos, ya que se encuentra en muchos formularios es el campo

fecha. Para solucionar cualquier controversia podemos echar mano de otras opciones

como, por ejemplo, dejar libertad al usuario para que escriba los separadores que desee,

pero ayudar mediante la programación del campo, a que el formato sea el deseado, de

manera que cuando el usuario teclee para la fecha un guion o un espacio, este se cambie

automáticamente por una barra.

Otro aspecto importante a la hora de darle forma al campo del formulario, es tener en

cuenta qué tamaño tendrá el dato a incluir. Por ejemplo, no es correcto pedir el código

postal con un campo de este tamaño:

59 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 24 de noviembre 2018]



83

Ilustración 39. Ejemplo de tamaño incorrecto para un campo.60

PA49. Dar a cada campo de un formulario el tamaño y la estructura correcta para

que coincida con la entrada requerida y así evitar errores. (2 pts.)

Al mostrar un mensaje de error en un formulario, este siempre debe indicar claramente

cuál ha sido el error, de la manera más concreta y fácil de entender posible. Nunca mostrar

mensajes muy largos que puedan confundir al usuario, pues lo que nos interesa es que

resuelva el error lo más rápido posible.

PA50. Los mensajes de error deben ser útiles, concisos, concretos y fáciles de

entender. (3 pts.)

Mostrar los errores en los campos concretos donde se producen, no en un mensaje general

(o en un lugar descontextualizado). De esta manera, podemos, además, indicar la solución

a ese error de manera contextualizada, señalizando, así, en qué campo específico se ha

producido el error y qué se debe hacer para solucionarlo, y nunca redirigir a otra página

diferente.

PA51. Mostrar todos los campos que causan errores a la vez, con el error junto a cada

campo problemático. (2 pts.)

Cada formulario debe ser lo más simple posible, de manera que las instrucciones sean lo

más cortas y simbólicas posibles, es por esto que debemos evitar instrucciones que sean

obvias o redundantes, ya que ocuparán cierta atención por parte del usuario siendo

totalmente innecesario.

60 Fuente: http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/#No_incluir_el_texto_aclaratorio_del_campo_unicamente_dentro_del_campo [Accedido el 4 de enero de 2019]




Ilustración 40. Ejemplo gráfico de no incluir instrucciones demasiado obvias.61

PA52. No incluir instrucciones redundantes o demasiado obvias. (2 pts.)

Imaginemos que acabamos de rellenar un formulario bastante largo, de unos 15 campos,

para el que hemos tenido que buscar cierta información expresamente ya que no estaba en

nuestro conocimiento y, tras completar el formulario, hemos tenido un error en el email y

tenemos que volver a rellenar todos los datos debido a que se han reseteado. Más de uno

no volvería a rellenar ese formulario. Por esta razón es importante guardar los datos que

el usuario va introduciendo para que, en caso de cualquier error (de datos o de conexión),

no tenga que volver a introducirlos.

PA53. Guardar los datos que introducen los usuarios para que no tengan que volver a

hacerlo en caso de que ocurriese algún error. (4 pts.)

7.3.10. Links

Estamos acostumbrados a que los enlaces (links) sean de color azul y/o estén subrayados

para indicar que, haciendo clic en esa palabra, podemos ir a otra página relacionada con

ella. Este es el estilo que generalmente y de manera automática se les da a los enlaces en la

mayoría de editores de texto, por ejemplo, en Microsoft Word. De hecho, si creamos una

página simple en HTML y no añadimos nada de diseño en CSS, los links nos aparecen por

defecto subrayados y de color azul. Esto se ha convertido en un estándar y lo podemos ver

un ejemplo en la página de Web Content Accessibility Guidelines (WCAG) 2.0, de W3C62.

61 Fuente: https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 24 de noviembre 2018] 62 WCAG20 https://www.w3.org/TR/WCAG20/ [Accedido el 4 de enero de 2019]




85

Ilustración 41. Página principal de la WCAG 2.0

PA54. Los enlaces en los sitios web deben estar claramente diferenciados del resto

del texto, normalmente en azul y/o subrayado. (4 pts.)

Si usamos el diseño estándar que se aplica a los links, estaríamos indicando que esa

palabra es un hipervínculo. Debemos evitar crear ese tipo de confusión.

PA55. No utilice texto azul o subrayado para elementos que no sean links. (1 pt.)

7.3.11. Botones

Un elemento de importancia en la interacción del usuario con la web son los botones. Su

diseño debe ser el correcto, pues de lo contrario, podrían ocasionar acciones no deseadas.

Los tres principios que nos propone Material Design para los botones son: identificable,

localizable y claro. Deben indicar que pueden desencadenar una acción. Deben de ser

fáciles de encontrar entre otros elementos, incluyendo otros botones. La acción y el estado

de un botón debe de estar clara [45].

En primer lugar, cualquier botón se debe poder clicar y tener el suficiente espacio para

hacerlo sin problemas ni errores.

PA56. Los botones se deben poder clicar y tener suficiente espacio para hacerlo

cómodamente. (2 pts.)


Los botones de un sitio web deben tener una jerarquía, ya que no todos tienen la misma

importancia o se usan con la misma frecuencia. Las acciones frecuentes deben estar por

encima de las menos frecuentes.

Esta jerarquía podemos definirla mediante diferentes niveles en énfasis, haciendo uso del

diseño y de la posición en la pantalla. Material Design de Google nos lo ejemplifica

mostrando con un número el nivel de prioridad de la siguiente manera:

Ilustración 42. Establecer una jerarquía mediante el diseño y la posición.63

La prioridad de los botones de la interfaz propuesta sería, en primer lugar, el botón en la

parte inferior de “+ Añadir Entrada” (en inglés, “+ Add Entry”), en segundo lugar, se

encuentra el botón “Ver Entrada” (“View Entry en inglés) y, por último, la acción menos

importante sería “Aprender Más” (“Learn More”).

PA57. Las acciones frecuentes deben ser botones grandes, ubicados en zonas

accesibles. (2 pts.)

La etiqueta de texto de un botón es el elemento más importante de este, ya que comunica

la acción que se realizará cuando el usuario la toque. Este texto debe indicar una acción

específica y debe ser visualmente diferente al resto de elementos para que sea

distinguible. Debemos evitar los textos muy largos, esta etiqueta tiene que ser lo más

concisa posible y, además, si el texto no está en mayúsculas, entonces debemos hacerlo

diferente mediante el color, el estilo o el diseño.

63 Fuente: https://material.io/design/components/buttons.html#hierarchy-placement [Accedido el 4 de enero de 2019]

https://material.io/design/components/buttons.html#hierarchy-placement


87

PA58. Distinguir el botón del resto de texto mediante colores de fondo, bordes y

textos orientados a la acción. (3 pts.)

No se debe alinear verticalmente el icono y el texto en el centro de un botón, al igual que

tampoco se debe usar dos iconos en el mismo.

PA59. Los textos de los botones deben ser descriptivos e indicar qué acción

realizarán. (2 pts.)

Si la interacción con un botón se ha realizado correctamente, se debe dar al usuario una

indicación visual de que la acción fue un éxito en un tiempo menor a 0,1 segundos, pues de

lo contrario el usuario empezará a pensar que algo ha ido mal y podría hacer un segundo

clic.

PA60. Se debe proporcionar una indicación visual de que el clic de un botón fue

exitoso en un periodo menor de 0,1 segundos después la interacción. (4 pts.)

Un botón cuya acción sea modificar o eliminar algún dato, debe requerir más esfuerzo que

el resto. Debemos evitar de cualquier manera que un usuario elimine información por

error o accidentalmente. Para ello podemos añadir un paso intermedio tras clicar el botón

que requiera una segunda confirmación de que realmente se quiere llevar a cabo esa

acción.

Ilustración 43. Pop-up de confirmación.64

PA61. Los botones que cambian o eliminan datos deberían requerir un mayor

esfuerzo o un paso de confirmación para evitar acciones accidentales. (5 pts.)

64 Fuente: https://www.pinterest.es/ [Accedido el 10 de enero de 2019]

https://www.pinterest.es/


7.3.12. Móvil

Los dispositivos móviles no tienen las mismas características que los ordenadores, por ello

la experiencia de usuario será distinta si sabemos que el usuario está visitando el sitio web

desde el teléfono móvil o desde la Tablet.

La organización educativa sin ánimo de lucro Interaction Design Foundation65 alega que

los usuarios móviles se relacionan con sus dispositivos en momentos cruciales y sólo por

períodos cortos. Sus experiencias deben ser personalizadas, eficientes y agradables para

mantenerlos ocupados y asegurar el uso continuo de tales artículos. Por lo tanto, el diseño

de UX móvil se centra en la entrega de dispositivos y servicios que se agilizan para

satisfacer las necesidades espontáneas de los usuarios que cambian con el contexto en el

que se encuentran, al tiempo que mantienen los niveles de interacción lo más bajos

posible. Por ejemplo, un usuario puede tener dos manos libres y menos distracciones

mientras está de pie en una cafetería que sí, cinco minutos después, tiene que agarrar un

poste o una barandilla en un autobús que viaja por una carretera irregular [47].

En estos dispositivos, el espacio disponible para interactuar con la plataforma es una

pantalla de unas 6 pulgadas como mucho, en comparación con las 13 pulgadas que pueda

tener un ordenador portátil Ultrabook, las 15 pulgadas de un portátil de tamaño estándar

o las 27 que pueda tener el monitor de un ordenador de sobremesa. Esta diferencia de

tamaño y de forma de uso debe estar muy presente a la hora de realizar el diseño. Es difícil

ser muy precisos en una pantalla tan pequeña en la cual el “ratón” con el que

interactuamos son nuestros dedos (más o menos gruesos), por ello, todos los elementos

interactivos del sitio deben tener un tamaño y una separación mínima para que no haya

problema a la hora de pulsar uno de ellos. El tamaño mínimo para un objetivo táctil debe

ser de 1 cm x 1 cm con el relleno adecuado.

PA62. El tamaño mínimo para un objetivo táctil en móviles debe ser de 1 cm x 1 cm

con el relleno adecuado. (1 pt.)

Al contrario que para dispositivos que no son táctiles, en móviles y tablets no debemos

hacer uso del doble toque, si no que se debe garantizar que los usuarios puedan

interactuar con un solo toque.

65 La Interaction Design Foundation es una organización educativa sin fines de lucro que produce contenido abierto y materiales educativos de acceso abierto en línea con el objetivo declarado de "democratizar la educación haciendo que los materiales educativos de clase mundial sean gratuitos para todos, en cualquier lugar" [46].


89

PA63. Usar un único toque para interactuar en dispositivos móviles o tablets. (2 pts.)

Nick Babich de UX Planet propone dejar el menú de navegación visible, ya que lo que está

fuera de la vista, está fuera de la mente (en inglés, Out of Sight, Out of Mind). La teoría de

la interacción, los test A/B y la evolución de algunas de las mejores aplicaciones del mundo

muestran que exponer las opciones de menú de una manera más visible aumenta el

compromiso y la satisfacción del usuario [48]. Si además tenemos en cuenta que al

sostener un móvil o una tablet la parte inferior de la pantalla es muy fácil de alcanzar con

el dedo pulgar (los lados también para tablets), vemos que el sitio más apropiado para

ubicar el menú es la parte inferior de la pantalla, esta ubicación podemos verla, por

ejemplo, en aplicaciones como Instagram o Facebook. Aquí situaremos los accesos más

importantes, mientras que el resto de funciones las ocultaremos dentro de un menú de

hamburguesa.

Ilustración 44. Menú de navegación de Facebook situado en la parte inferior de la pantalla.66

PA64. Situar el menú en la parte inferior de la pantalla con las opciones más

utilizadas. (3 pts.)

Siempre debemos tener en mente el tamaño reducido que tienen las pantallas de los

dispositivos móviles, por lo que es posible que necesitemos aumentar el tamaño de la

fuente para que la información se pueda leer sin ningún problema y sin necesidad de hacer

zoom.

PA65. Aumentar el tamaño de la fuente en los sitios web para móviles. (1 pt.)

66 Fuente: https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377 [Accedido el 5 de enero de 2019]

https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377


7.4. Puntuaciones

A la hora de evaluar un sitio web, como veremos en el próximo punto, este optará a una

puntuación u otra según el tipo de sitio del que disponga.

Tras sumar el peso que hemos adjudicado a cada pauta, concluimos que la puntuación

máxima a obtener en la evaluación es de 185 puntos. En la siguiente tabla se muestra el

peso máximo correspondiente a cada área:

# Área Peso en puntos

1 Lógica Visual 46

2 Contenidos (textos) 12

3 Color y Contraste 22

4 Iconos 9

5 Menú de Navegación 23

6 Herramienta de

búsqueda 10

7 Tiempo de Carga 3

8 Ayuda 9

9 Formularios 21

10 Links 5

11 Botones 18

12 Móvil 7

Tabla 2. Áreas a evaluar con su respectivo peso.

7.5. Definición de las cuestiones

Tras la definición de las pautas que consideramos imprescindibles para el desarrollo de

nuestra metodología, debemos diseñar las cuestiones que complementarán la

metodología. La función de estas cuestiones será constituir la herramienta resultante de

esta metodología de evaluación. A través de este cuestionario los desarrolladores y

diseñadores de sitios web, podrán conocer la calificación de la experiencia de usuario de

su plataforma, con el fin de que esta experiencia pueda mejorarse positivamente.


91

Para que nuestra metodología sea realmente objetiva, debemos tener en cuenta el tamaño

que tiene el sitio web que se va a evaluar, ya que una web que no tenga formularios o

buscador no tiene por qué tener una mala UX, puede simplemente, ser una página sencilla

para mostrar información. Para evitar asignar una mala puntuación a una buena página

sólo por tener menos elementos, el cuestionario de nuestra metodología estará compuesto

por dos partes: la primera la formará un pequeño cuestionario mediante el cual

deduciremos el tipo de web de la que se trata, para entonces ofrecer una segunda parte

personalizada para la evaluación de los elementos que debe tener dicha página.

Para la primera parte definiremos una serie de preguntas que nos indiquen si el sitio web

dispone de elementos como el buscador, formularios, pop-ups o versión para móvil, sin

contar con elementos que consideramos esenciales en cualquier web, sea del tamaño que

sea, como los contenidos, los colores y los elementos de navegación.

En la segunda parte, cada cuestión estará directamente relacionada con una pauta, puesto

que hemos seleccionado estas pautas y no otras pensando en que nos serían de gran

utilidad para el cuestionario, siendo las más indispensables para una buena UX, de manera

que, si una no se cumple, la UX del sitio web decaiga. De esta manera, hemos descartado

las que, aun siendo muy recomendables, no son de primera necesidad, dando así prioridad

y visibilidad, sin que queden camufladas entre cientos de pautas.

Para conocer y tener una relación entre las cuestiones y las pautas, estas tienen una

numeración similar a la usada para las pautas. Consistirá en un identificador del estilo

“PRXX”, el cual indica que es una pregunta (PR) y el número que le sigue será el mismo

que el número del identificador de la pauta correspondiente. Por ejemplo, si tenemos una

pauta que dice: “el objetivo principal de cada página web debería ser obvio” y su

identificador es el “PA43”, entonces tendremos una cuestión que estará relacionada con

esa pauta y su identificador será “PR43”.

Las cuestiones serán lo más objetivas posibles y tendrán como respuesta únicamente “SÍ”

o “NO”, para que los resultados sean lo más exactos posibles. Además, si consideramos que

alguna cuestión puede crear confusión, añadiremos una breve explicación para poder

redactar las preguntas de manera específica y clara, introduciéndolas lo necesario para no

alargar ni enrevesar la pregunta como consecuencia de intentar explicarla dentro de las

interrogaciones.

Tras establecer esta serie de puntos, pasamos a la redacción de las preguntas que

formarán la primera parte del cuestionario:


1. ¿De qué tipo de sitio web se trata?

a. Red Social

b. Tienda online

c. Página informativa

d. Herramienta online

e. Otra

2. ¿El sitio web tiene más de 15 páginas?

3. ¿Hay al menos un formulario?

4. ¿Hay formularios de más de 10 campos?

5. ¿Hay interacciones de más de dos pasos?

6. ¿Hay pop-ups o ventanas emergentes?

7. ¿Hay contenido extenso en algún momento?

8. ¿Hay menú de navegación?

9. ¿El menú tiene listas desplegables (dropdown)?

10. ¿Hay campo de búsqueda?

11. ¿Hay alguna página que tarde en cargar más de 2 segundos?

12. ¿Hay scroll en al menos una página del sitio?

Después de que el usuario haya respondido a las 12 cuestiones anteriores, tendrá acceso

entonces a la segunda parte del cuestionario, cuyas preguntas redactaremos a

continuación:

7.5.1. Lógica Visual

PR01. ¿Al menos un 70% de las páginas del sitio web están estructuradas de forma que

los elementos importantes están situados en la parte superior de cada página y

los menos relevantes en la inferior? (2pts.)

PR02. ¿Se mantiene el mismo estilo, formas y estructuras en al menos un 70% de las

páginas del sitio web? (5pts.)

PR03. ¿Los elementos de cada página que estén relacionados o se refieran a un mismo

tema se mantienen más próximos entre sí que el resto? (3pts.)

PR04. ¿Se usan animaciones para avisar al usuario de que la interfaz cambia? (1pt.)


93

PR05. ¿Se muestra un mensaje de éxito o error cada vez que el usuario hace una

interacción importante? Una interacción importante es la que supone la

modificación de datos sensibles (personales, bancarios o similares), eliminación

de cualquier elemento (datos, elementos multimedia…) o la que supone manejo

de dinero. (6pts.)

PR06. En las interacciones de más de dos pasos, ¿se muestra el progreso y los pasos

restantes? (4 pts.)

PR07. ¿Se permite retroceder a los pasos anteriores? (3 pts.)

PR08. ¿Se muestran migas de pan en las páginas cuando se navega? (3pts.)

PR09. ¿Los botones y áreas interactivas se diferencian claramente del contenido que no

es interactivo? (2 pts.)

PR10. ¿Hay una forma visible de cerrarlos? (3 pts.)

PR11. ¿Se hace uso de acordeones para comprimir contenido extenso? (3 pts.)

PR12. ¿se ofrece la posibilidad de contraer el contenido una vez se haya expandido? (2

pts.)

PR13. ¿Existe una indicación visual clara de que el usuario se puede desplazar hacia

abajo (scroll)? (2 pts.)

PR14. ¿Hay alguna función importante en la esquina superior derecha? Por ejemplo, el

login, contacto, búsqueda o carrito de compra si se trata de una tienda online. (4

pts.)

PR15. ¿Es posible retroceder a la página anterior o ir a la página principal desde todas

las páginas? (4 pts.)

7.5.2. Contenidos (textos)

PR16. ¿Se diferencia la información principal de la información extra mediante cambio

de estilo, tamaño o color? (3 pts.)

PR17. ¿Todos los encabezados de la plataforma tienen sentido por sí mismos? (5 pts.)

PR18. ¿Hay suficiente espacio entre distintos párrafos o líneas de una lista de manera

que se puedan leer con facilidad? (2 pts.)

PR19. ¿Los titulares y eslóganes están escritos sin utilizar MAYÚSCULAS SOSTENIDAS?

Es decir, utilizando mayúsculas y minúsculas adecuadamente. (2 pts.)

7.5.3. Color y Contraste

PR20. ¿Se resaltan los elementos interactivos cuando el usuario pasa el cursor por

ellos? (3 pts.)

PR21. Cuando aparecen pop-ups, ¿queda oscurecido el fondo bajo ellos? (2 pts.)


PR22. Si se convierten los diseños de la web a escala de grises o a ceguera de color, ¿Es

posible leer la información esencial? (5 pts.)

PR23. ¿Hay un alto contraste entre el texto y el fondo y además está alineado a la

izquierda? (4 pts.)

PR24. ¿Se usan colores acordes con el significado de cada elemento? Por ejemplo, usar

color rojo para errores y verde para mensajes de éxito. (6 pts.)

PR25. ¿Hay alguna diferencia entre las funciones más importantes? Por ejemplo,

gracias al color o al espaciado con el resto. (2 pts.)

7.5.4. Iconos

PR26. ¿Se hace uso de los iconos? (4 pts.)

PR27. ¿Los iconos son en 2D, con máximo dos colores o pertenecen a una librería

estándar (como Material Design o Fontello), siendo además familiares y

significativos? (4 pts.)

PR28. ¿Se usan los iconos únicamente para ayudar a entender el significado de las

acciones? (1 pt.)

7.5.5. Menú de Navegación

PR29. ¿El menú de navegación está ubicado en un sitio visible a primera vista? (6 pts.)

PR30. ¿La jerarquía del menú tiene como máximo 3 niveles de profundidad? (3 pts.)

PR31. ¿Las etiquetas del menú de navegación son como máximo de 2-3 palabras? (3

pts.)

PR32. ¿Las listas desplegables son verticales? (2 pts.)

PR33. ¿Las funciones de búsqueda o inicio de sesión se encuentran fuera del menú? (3

pts.)

PR34. ¿El menú tiene siempre la misma ubicación en todas las páginas? (3 pts.)

PR35. ¿Queda destacada la sección del menú donde se encuentra el usuario? (3 pts.)

7.5.6. Herramienta de Búsqueda

PR36. ¿Se dispone de campo de búsqueda? (3 pts.)

PR37. ¿El campo de búsqueda se ve como un cuadro de texto junto a un icono de

búsqueda? (4 pts.)

PR38. ¿El campo de búsqueda se encuentra en la parte superior derecha o se distingue

fácilmente? (2 pts.)


95

PR39. ¿Es suficientemente amplio para que se pueda ver la consulta de búsqueda? (1

pt.)

7.5.7. Tiempo de Carga

PR40. ¿Se muestra el esqueleto de la web y el texto antes de que cargue el contenido al

completo? (1 pt.)

PR41. ¿Se usan colores fríos para las animaciones en los períodos de espera? (1 pt.)

PR42. ¿Se mantiene a los usuarios entretenidos mediante animaciones, texto o

imágenes en los períodos de espera? (1 pt.)

7.5.8. Ayuda

PR43. ¿En cada página se comunica claramente la función principal mediante

encabezados, imágenes o instrucciones y los elementos que se tienen que usar

para llevarla a cabo? (6 pts.)

PR44. ¿Ofreces ayuda o sugerencias en contexto a los usuarios? Como asistentes o

preguntas frecuentes (FAQ) cuando sea apropiado. (1 pt.)

PR45. ¿Se ofrece ayuda a los nuevos sin molestar a los que ya son expertos? Por

ejemplo, haciendo uso de tooltips. (3 pts.)

7.5.9. Formularios

PR46. ¿Las etiquetas de campo se encuentran fuera y encima de este? (3 pts.)

PR47. En los formularios largos, ¿se encuentran divididos en secciones? (2 pts.)

PR48. ¿Se indica claramente qué campos son obligatorios? (3 pts.)

PR49. ¿Se da a cada campo la estructura de entrada que se espera para indicar al

usuario cuál es la correcta? (2 pts.)

PR50. ¿Los mensajes de error indican clara y concisamente el problema ocurrido? (3

pts.)

PR51. ¿Los errores que pueda haber se muestran todos a la vez y junto a cada campo

problemático? (2 pts.)

PR52. ¿Se dan instrucciones para rellenar el formulario únicamente cuando necesita

aclaración? (2 pts.)

PR53. En caso de que ocurriese algún error, ¿se guardan los datos introducidos por el

usuario para que no tenga que volver a introducirlos? (4 pts.)


7.5.10. Links

PR54. ¿Los enlaces están destacados del resto de texto? Por ejemplo, en un color

distinto y/o subrayado. (4 pts.)

PR55. ¿Se utiliza un color diferente o subrayado para elementos no sean links? (1 pt.)

7.5.11. Botones

PR56. ¿Los botones son fáciles de clicar y tienen espacio suficiente para ello? (2 pts.)

PR57. ¿Las acciones frecuentes están ubicadas en zonas accesibles y son botones

grandes? (2 pts.)

PR58. ¿Los elementos clicables dan a entender que lo son? Por ejemplo, con colores de

fondo, bordes y textos orientados a la acción. (3 pts.)

PR59. Cuando el usuario hace clic en un botón, ¿se le comunica que la interacción fue

exitosa en menos de 0,1 segundos? (2 pts.)

PR60. Los botones que cambian o eliminan datos, ¿requieren una doble confirmación

antes de efectuar la acción? (4 pts.)

PR61. Los textos de los botones, ¿son descriptivos e indican qué acción realizan? (5

pts.)

7.5.12. Móvil

PR62. ¿Se puede pulsar cualquier objetivo táctil sin necesidad de ampliar? (1 pt.)

PR63. ¿Todos los objetivos táctiles funcionan con un solo toque? (2 pts.)

PR64. ¿El menú se encuentra en la parte inferior de la pantalla y ofrece las opciones

más utilizadas? (3 pts.)

PR65. ¿Se aumenta el tamaño de fuente de manera que se pueda leer fácilmente en un

dispositivo móvil? (1 pt.)

7.6. Implementación de la herramienta

Con las cuestiones que forman nuestra herramienta ya definidas pasamos a implementar

la herramienta. El software utilizado para desarrollarla es Microsoft Excel, ya que dispone

de hojas de cálculo en las que podemos plasmar nuestro cuestionario. Pensamos que este

es el programa que más nos puede ayudar a la hora de calcular los resultados e imponer

condiciones haciendo uso de la inhabilitación de celdas y funciones.


97

El primer paso es plasmar todas las cuestiones en dos hojas diferentes, una para la

primera parte del cuestionario y otra para la segunda parte. En el Anexo III podemos ver

mediante ilustraciones la herramienta resultante [53].

En segundo lugar, habilitando la opción en el menú de “Programador”, podemos acceder al

uso de macros usando al lenguaje de scripts Visual Basic for Applications (VBA), gracias a

las cuales se pueden ejecutar de forma automática comandos rutinarios o incluso añadir

nuevas funciones a la hoja de cálculo [54]. Esta nueva opción del menú nos permite

insertar distintos controles de formulario, en nuestro caso hemos utilizado botones de

opción (en inglés, radio buttons) para la selección de respuesta, de forma que sólo se

pueda responder SÍ o NO.

En tercer lugar, hemos implementado algunas macros para que nos ayudasen a realizar

algunas funciones como cambiar de una hoja a otra, iniciar el cuestionario o calcular el

resultado. La tarea que más tiempo nos ha llevado ha sido imponer todas las condiciones

necesarias para que una vez resuelta la primera parte del cuestionario, la segunda parte

sea modificada según lo especificado, ya que, si por ejemplo se indica que el sitio web no

tiene herramienta de búsqueda, las preguntas relacionadas con el buscador aparecerán

deshabilitadas y en color gris.

Ilustración 45. Cuestiones deshabilitadas y no deshabilitadas.


Ilustración 46. Código encargado de la comprobación de condiciones.

Por último, hemos creado las condiciones necesarias para el cálculo final de la puntuación,

de manera que sume la puntuación específica para cada pauta si la respuesta marcada es

“SI”. La siguiente imagen muestra el código encargado de calcular el porcentaje obtenido a

partir de la suma total de puntos y de mostrar el mensaje por pantalla.

Ilustración 47. Código encargado del mensaje resultante.


99

8. Pruebas y validación

Una vez hemos desarrollado la metodología de evaluación de la UX, debemos comprobar

que su funcionamiento es el esperado, además de fiable y útil, de lo contrario, habría que

realizar los cambios oportunos para que los resultados sean los deseados.

Para llevar a cabo estas pruebas, procederemos primero a diseñar diferentes situaciones,

escogiendo varias páginas web con características diferentes y sometiéndolas a la

herramienta creada. Contrastaremos si los resultados son acordes con nuestra experiencia

personal de dicho sitio web. Para que estas pruebas sean lo más objetivas posibles,

realizaremos pruebas alfa, que son las realizadas por el usuario con el desarrollador como

observador en un entorno controlado. Cada persona puede tener una opinión muy

diferente sobre una misma web, por ello pediremos a personas externas de distintas

edades y con diferentes conocimientos del diseño web, que respondan un cuestionario

muy simple para conocer su opinión general y grado de satisfacción con la web, de manera

que podamos comprobar si su criterio coincide con el resultado obtenido por la

herramienta, lo cual indicará que nuestra metodología es concluyente.

8.1. Selección de los sitios web

Comenzamos con la elección de los sitios web que formarán parte de nuestras pruebas.

Esta elección será totalmente arbitraria, intentando que los sitios elegidos tengan

diferentes propósitos, estilos y que sean utilizados diariamente. De esta manera, hemos

escogido cuatro sitios entre los que se encuentra una tienda online, una página

informativa y dos redes sociales de diferente temática y características.

Sitio web de IKEA67, dedicada a la venta de muebles y objetos para el hogar

(https://www.ikea.com/es/es/).

67 IKEA es una corporación multinacional fundada en la provincia de Småland en 1943 por Ingvar Kamprad y con sede en Suecia dedicada a la fabricación y venta minorista de muebles, objetos para el hogar y otros objetos de decoración de diseño contemporáneo. [52]

https://www.ikea.com/es/es/


Ilustración 48. Página principal de IKEA.68

Sitio oficial del Conservatorio Superior de Música de Murcia

(http://www.csmmurcia.com/), en el cual se pueden consultar noticias, requisitos

de la prueba de acceso o el plan de estudios entre otros.

Ilustración 49. Página principal del Conservatorio Superior de Música de Murcia.69

68 Fuente: https://www.ikea.com/es/es/ [Accedido el 21 de enero de 2018] 69 Fuente: http://www.csmmurcia.com/ [Accedido el 21 de enero de 2018]

http://www.csmmurcia.com/

https://www.ikea.com/es/es/



101

Twitter es una red social de microblogueo, en la que usuarios publican mensajes de

texto plano de corta longitud llamados tuits. Cada usuario puede ver en su página

principal las publicaciones de la gente a la que sigue.

Ilustración 50. Página principal de Twitter.70

Airbnb es una plataforma dedicada a la oferta de alojamientos a particulares y

turísticos mediante la cual los anfitriones pueden publicitar y contratar el arriendo

de sus propiedades con sus huéspedes. (https://www.airbnb.es/)

Ilustración 51. Página principal de Airbnb.71

70 Fuente: https://twitter.com/ [Accedido el 22 de enero de 2019] 71 Fuente: https://www.airbnb.es/ [Accedido el 21 de enero de 2019]

https://twitter.com/

https://www.airbnb.es/


8.2. Creación de la encuesta

La experiencia de usuario, como ya hemos visto durante todo el trabajo, trata los

sentimientos y emociones de los usuarios ante una plataforma web. Aunque con esta

metodología hayamos recopilado propiedades objetivas y mensurables, para validar el

funcionamiento de la metodología precisamos de la opinión de usuarios externos.

Entre 10 y 15 personas de diferente sexo, edad, profesión y conocimientos sobre diseño se

someterán a una breve encuesta en la que accederán a los 4 sitios web seleccionados en el

punto anterior y responderán a unas preguntas para conocer qué experiencia han tenido

en cada uno.

Primero preguntaremos sobre su edad, sexo, conocimientos de diseño en páginas web y

uso de internet diario para comprobar que hay variedad en las personas encuestadas y los

resultados sean más objetivos. Para conocer el grado de satisfacción de cada plataforma,

estableceremos un objetivo muy simple y básico de la web en cuestión para que la

respuesta no se base en la opinión a simple vista.

Haremos uso de la herramienta Google Forms para la realización de esta encuesta, debido

a la posibilidad que nos ofrece de poder compartirla fácilmente a través de un enlace, de

obtener resultados visuales a través de gráficos estadísticos y a la facilidad para crear las

preguntas. Podemos ver la encuesta resultante en el Anexo IV.

8.3. Resultados de nuestra herramienta de evaluación

Hemos probado nuestra metodología con 4 plataformas distintas y estos son los

resultados de nuestra herramienta:

8.3.1. IKEA

En primer lugar, hemos evaluado la web de IKEA que, tras responder a las preguntas

planteadas, hemos obtenido un resultado de 154/178, es decir, del 87%.


103

Ilustración 52. Resultado obtenido en la herramienta.72

Como vemos, esta plataforma tiene una buena UX. Debido a que es una web grande con

bastante contenido y elementos, la puntuación máxima que se puede obtener es de 178

(recordemos que el total máximo que una web puede alcanzar es de 185). Algunos de los

motivos por los que no ha conseguido una UX del 100% han sido las etiquetas del menú de

navegación, que sobrepasan las 2-3 palabras, además, la sección en la que nos

encontramos no queda destacada en el menú.

Podemos ver en las siguientes imágenes que dentro de la opción “Productos” encontramos

opciones como “Tus artículos de decoración favoritos”, etiqueta con 5 palabras. En la

segunda imagen vemos que nos encontramos en la sección “Inspiración”, sin embargo, la

etiqueta del menú no está señalada distinguida del resto.

En esta misma imagen, podemos observar también, buena UX en cuanto a la existencia de

migas de pan para mantenernos ubicados.

72 Fuente: propia


Ilustración 53. Etiquetas de más de 2-3 palabras (arriba) y sección del menú no destacada

(abajo).73

También vemos que en los formularios no se indica claramente qué campos son

obligatorios, únicamente lo sabemos una vez clicamos en guardar y nos aparecen errores.

Ilustración 54. Formulario antes de introducir datos (arriba) y después de intentar guardar

(abajo).74

73 Fuente: https://www.ikea.com/es/es/ikea/inspiracion-decoracion/ [Accedido el 23 de enero de 2018]

Migas de pan

Etiqueta con más de 2-3

palabras

Sección actual sin

marca diferencial

https://www.ikea.com/es/es/ikea/inspiracion-decoracion/


105

En cuanto a la versión móvil, esta plataforma recoge los 7 puntos de UX, ya que la

información se lee correctamente, el menú se encuentra en la parte inferior y con las

opciones más utilizadas y todos los objetivos táctiles se pueden pulsar perfectamente y

mediante un solo clic.

Ilustración 55. Interfaz de detalles de producto en la app de IKEA.75

8.3.2. Conservatorio Superior de Música de Murcia

En segundo lugar, vamos a estudiar los resultados de la web del Conservatorio Superior de

Música de Murcia (CSMM), la cual ha conseguido una puntuación de 62/153, con un 41%

de UX.

Ilustración 56. Resultado obtenido por la herramienta para el CSMM.76

Como podemos ver, la herramienta muestra que esta web tiene una mala UX, ya que no

cumple un mínimo de puntuación en nuestro cuestionario.

74 Fuente: Ibídem 75 Fuente: Aplicación móvil Android de IKEA Shop. [Accedido el 22 de enero de 2018] 76 Fuente: propia

Botones amplios

Menú en la parte inferior


A pesar de que en esta ocasión la puntuación máxima era menor ya que esta plataforma

contaba con menos elementos, debido, en parte, a ser una página informativa.

Parte de la puntuación obtenida por esta web ha sido gracias a tener un menú de

navegación en buena ubicación y accesible, con etiquetas de menos de 2-3 palabras y

destacando la sección en la que nos encontramos.

Ilustración 57. Menú de navegación del CSMM.77

Algunos de sus aspectos negativos son la existencia de páginas con error y desde las que

no se puede acceder a ninguna otra página, de formularios que no cumplen con casi

ninguno de los requisitos (por ejemplo, etiquetas en mal lugar, no se muestran errores o

no se guardan los datos en caso de error), además, si clicamos en “Enviar” si haber

rellenado ningún dato, nos indica que el mensaje ha sido enviado correctamente.

En la misma imagen podemos ver que el tamaño de los botones tampoco es el adecuado,

ya que es demasiado pequeño.

Ilustración 58. Formulario de la web CSMM.78

Otros aspectos que empeoran la UX es la inexistencia de una jerarquía, el mal uso de los

colores acordes con el significado o la inadaptación a pantallas móviles, ya que el texto no

se puede leer, se necesita ampliar para poder clicar los enlaces y botones y el menú se

encuentra en la parte superior y con todas las opciones.

77 Fuente: www.csmmurcia.com [Accedido el 22 de enero de 2019] 78 Fuente: Ibídem

Sección destacada

Botón muy

pequeño

Etiquetas a la

izquierda



107

Ilustración 59. Web vista en un dispositivo móvil.79

8.3.3. Twitter

En tercer lugar, Twitter obtiene una evaluación positiva con un 156/169, es decir una UX

del 92%.

Ilustración 60. Resultado de UX de Twitter.80

De los aspectos negativos encontrados en Twitter han sido las etiquetas de los campos en

formularios, ya que se encuentran dentro de estos y desaparecen al comenzar a escribir,

además de no indicar claramente los campos obligatorios y no haber migas de pan.

79 Fuente: Ibídem 80 Fuente: propia


Ilustración 61. Etiquetas de campo únicamente dentro de este.81

Nos encontramos en cambio con muchos aspectos positivos, entre los que destacamos la

doble confirmación al modificar un dato sensible de nuestro perfil, el fondo oscurecido

bajo los pop-ups, una forma fácil de cerrarlos o el correcto uso del color para enlaces.

También se usan los colores acordes con el significado como vemos en la imagen de abajo,

donde se usa el color rojo para advertir de que se eliminará.

Ilustración 62. Pop-up de confirmación (arriba) y opciones para eliminar un tuit (abajo).82

8.3.4. Airbnb

Por último, como nos demuestra la puntuación máxima posible en este caso, Airbnb es una

web con muchos elementos de todo tipo. Esta evaluación resulta positiva, con un 93%

(167/180).

Ilustración 63. Resultado obtenido para Airbnb.83

81 Fuente: https://twitter.com/login [Accedido el 23 de enero de 2019] 82 Fuente: https://twitter.com/settings/account# [Accedido el 23 de enero de 2019] 83 Fuente: propia

https://twitter.com/login

https://twitter.com/settings/account


109

Son pocas las pautas que no se cumplen en esta web, aun así, encontramos que no se

resaltan los elementos interactivos al pasar el cursor por ellos, la inexistencia de migas de

pan, la sección del menú en la que nos encontramos no queda resaltada y no podemos

volver a la página principal de Airbnb una vez hemos entrado en la sección “Anfitrión”, la

única manera es mediante el navegador o modificando la URL.

Entre los aspectos positivos encontramos el uso de colores fríos para las animaciones en

los periodos de espera, las áreas interactivas se diferencian claramente del contenido que

no lo es, las acciones frecuentes están ubicadas en zonas accesibles y con textos orientados

a la acción.

Ilustración 64. Animación de carga (izquierda) y elementos interactivos (derecha).84

También vemos formularios con las etiquetas de campo en la parte superior y campos con

el formato de entrada adecuados.

Ilustración 65. Campos para introducir fecha de entrada y salida.85

8.1. Comparativa entre los resultados ofrecidos por la

herramienta y la opinión de los usuarios encuestados

Para conocer si nuestra metodología es fiable y precisa, debemos contrastar el resultado

que obtenemos a través de la herramienta con la opinión que tienen los usuarios. Si,

finalmente, ambos resultados se asemejan entre sí, podremos decir entonces que las

pautas que forman la Metodología de Evaluación de la UX son acertadas, objetivas y

mensurables.

84 Fuente: https://www.airbnb.es [Accedido el 23 de enero de 2019] 85 Fuente: Ibídem.

https://www.airbnb.es/


Como vemos en la Ilustración 66 han realizado la encuesta 13 personas, hombres y

mujeres de edades que varían desde los 22 años hasta los 58 y con diferentes

conocimientos de diseño. Un aspecto que tienen todos en común es el uso diario que hacen

de internet.

Ilustración 66. Edades y sexo de las personas encuestadas.86

86 Respuestas del formulario, fuente: https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform?usp=sf_link [Accedido el 24 de enero de 2019]

https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform?usp=sf_link

https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform?usp=sf_link


111

Ilustración 67. Conocimientos en diseño y uso de internet de las personas encuestadas.

Tras realizar los objetivos propuestos para cada sitio web, los usuarios han respondido a

dos preguntas para cada sitio. En la primera preguntamos sobre la experiencia que han

tenido mientras realizaban el objetivo y en la segunda si ha resultado fácil o no llevarlo a

cabo. Las respuestas posibles van del 1 al 5, siendo en el primer caso, 1 muy negativa, 2

negativa, 3 neutra, 4 positiva y 5 muy positiva y para el segundo caso, la opción 1 indica

que el objetivo ha sido muy complicado, la 2 que ha sido complicado, 3 neutro, 4 fácil y 5

muy fácil.

Empezamos por IKEA, la primera web a visitar. A grandes rasgos comprobamos que el 77

% de los usuarios han tenido una experiencia positiva o muy positiva interactuando con la

plataforma de IKEA, incluso, tras realizar el objetivo de añadir una cortina de ducha al

carrito de la compra, el 100 % opina que le ha resultado fácil o muy fácil realizarlo.

Si comparamos los resultados, recordemos que la puntuación obtenida por la plataforma

es de un 88 %, vemos que la herramienta concluye una buena UX de la web, aunque


mejorable, ya que restan más de un 10 % para alcanzar el 100 % de la puntuación, y, según

los gráficos de la encuesta real, aunque la mayoría han tenido una experiencia muy

positiva (con el 46,2 %), vemos un 23,1 % opina haber tenido una experiencia neutra. En

cuanto a la facilidad de llevar a cabo el objetivo, el 53,8 % de los usuarios opina que ha

sido fácil, mientras que el 46,2 % opina que ha sido muy fácil.

Ilustración 68. Experiencia de los usuarios en IKEA.

Ilustración 69. Facilidad del objetivo según los usuarios en IKEA.

En las opiniones del Conservatorio Superior de Música de Murcia apreciamos más

variedad, aunque las opiniones se inclinan hacia una visión negativa. El objetivo que

debían realizar los usuarios en esta página informativa, consistía en buscar el calendario

de exámenes de febrero, al cual se podía acceder mediante un enlace en la página

principal. Tras realizar el objetivo, el 69,3 % de los usuarios ha tenido una experiencia

negativa (30,8 %) o muy negativa (38,5 %) y la de un 15,4 % ha sido neutra, equivalente a

la que opina que ha sido positiva. En relación a la facilidad del objetivo, un 53,9 % se

posicionan en que ha sido complicado, un 15,4 % en neutro y un 30,8 % en fácil o muy


113

fácil. Con una visión genérica, podemos decir que los usuarios, en general, han tenido una

experiencia negativa, aunque el objetivo ha resultado fácil para algunas personas. Si

comparamos este resultado con el 41 % de UX obtenido por nuestra herramienta, vemos

que concuerda una mala experiencia con una puntuación baja.

Ilustración 70. Experiencia de los usuarios en el CSMM.

Ilustración 71. Facilidad para realizar el objetivo en el CSMM.

El objetivo definido para Twitter consistía en publicar un tuit (una publicación) y después

borrarlo. Como observamos en el primer gráfico, el 53,8 % de los usuarios han tenido una

experiencia muy positiva, mientras que la otra parte se reparte mayoritariamente entre

experiencia neutra y fácil y un 7,7 % indica que tuvo una experiencia negativa. El segundo

gráfico muestra que el objetivo planteado resultó muy fácil para la mayoría de usuarios

(61,5 %), fácil para un 15,4 % y neutro para el 23,1 %.

En una visión general, vemos que más de la mitad de usuarios opinan que han tenido una

buena experiencia y que ha resultado fácil llevar a cabo el objetivo. Si comparamos estos


resultados con los de la herramienta, que nos muestra un 94 % de UX, podemos ver que

concuerdan entre sí, a pesar de que exista un pequeño porcentaje que no ha tenido buena

experiencia.

Ilustración 72. Experiencia de los usuarios en Twitter.

Ilustración 73. Facilidad del objetivo por los usuarios de Twitter.

En último lugar, el objetivo propuesto para la plataforma de Airbnb consistía en realizar

una búsqueda para encontrar un apartamento en Alicante para 8 personas y llegar hasta el

botón para realizar la reserva (sin llegar a realizarla). Estos resultados han sido bastante

más precisos que los anteriores, ya que, como observamos en las siguientes ilustraciones,

el 100 % de los usuarios encuestados han tenido una buena experiencia de usuario, siendo

el 69,2 % una experiencia muy positiva y el 30,8 % positiva. Las opiniones en cuanto a la

facilidad de conseguir el objetivo son similares a la experiencia, con un 69,2 % de los

usuarios que contestaron que les pareció muy fácil y un 30,8 % opinaron fácil.


115

Los 13 usuarios encuestados han tenido una experiencia bastante positiva en Airbnb y, si

comparamos con los resultados de nuestra herramienta, comprobamos que también

obtiene una puntuación alta en UX con un 93 %.

Ilustración 74. Experiencia de los usuarios en Airbnb.

Ilustración 75. Facilidad del objetivo para los usuarios en Airbnb.

8.2. Conclusiones de la encuesta

A rasgos generales, la experiencia real de los usuarios muestra que la evaluación llevada a

cabo por la herramienta creada es la correcta, asemejándose los resultados entre sí. Sin

embargo, cabe destacar que para hacer una validación más exhaustiva y exacta debemos

realizar una mejora en la encuesta realizada, de manera que se haga una evaluación de las

preguntas que se deben formular para que el usuario de su opinión lo más eficientemente

posible, realizando un mayor número de cuestiones y con una redacción más específica.

Así mismo, habría que realizar un estudio de las posibles respuestas a ofrecer al usuario.


Sería conveniente que la encuesta tuviese un alcance mayor y que fuese respondida por un

mayor número de personas.

Una vez se hubieran implantado los cambios y obtuviésemos la cantidad de datos

necesaria, se llevaría a cabo, entonces, un estudio para comprobar la validación de la

herramienta, o si, por el contrario, necesita ser remodelada.


117

9. Resultados

La primera incógnita de este trabajo era cómo medir y dar una puntuación numérica a un

aspecto que en su definición nombra aspectos relativos a las emociones, sentimientos o

confiabilidad. Por ello, el primer resultado de este proyecto ha sido una reflexión sobre

cómo se materializa la buena UX a través de una investigación previa.

Tras la reflexión, hemos conseguido categorizar y recoger los elementos que conforman la

UX, de esta manera se crea una metodología en la cual hay unas pautas definidas basadas

en una serie de buenas prácticas de la UX, desarrolladas y acompañadas de ejemplos

gráficos.

Para completar la metodología se ha creado una herramienta que permite, de forma

objetiva y basándose en la existencia de los elementos que indica la buena experiencia de

usuario, evaluar el grado de buena UX de una aplicación web. Esta herramienta ha sido

publicada en el repositorio de la Universidad de Alicante [53] de manera que se encuentra

al alcance de todos y, además, se utilizará como material en la asignatura de Sistemas

Multimedia Avanzados (SMA).

Finalmente, hemos validado la herramienta creada comparando los resultados con la

experiencia real de usuarios para comprobar que la suma de los elementos que componen

una buena UX concuerda con una buena experiencia real.

Este trabajo deja una herramienta funcional y fiable al alcance de todo el mundo,

disponible para quien desee evaluar la experiencia de usuario que ofrece cualquier sitio

web y así poder mejorarla siguiendo las pautas establecidas en la metodología. Esta

herramienta, sin embargo, no es absoluta, ya que la UX está compuesta por un número

muy alto de elementos, los cuales pueden variar según las modas o las necesidades de las

personas.

Gracias a los conocimientos adquiridos en asignaturas como Usabilidad y Accesibilidad,

Estructuración de Conocimientos, Sistemas Multimedia Avanzados o Sistemas Distribuidos

Multimedia, hemos tenido una base que nos ha ayudado a entender y clasificar más

rápidamente los conceptos investigados.

En comparación a la planificación temporal inicial, nos hemos demorado algunas semanas

debido a que hemos tardado más de lo esperado en la investigación inicial y recogida de

información, así como en la definición de pautas.



119

10. Conclusiones y trabajo futuro

Este estudio me ha dado una reflexión sobre un aspecto que hasta ahora parecía muy

subjetivo, haciendo que se vea mensurable, como un conjunto de buenas prácticas. Esta

nueva visión más objetiva hace más fácil la implementación de una buena experiencia de

usuario, materializándolo en una herramienta lo hace, además, accesible a cualquier

persona sin necesidad de ser un experto en el tema.

Hemos centrado los recursos en la investigación, recopilando las propiedades de la UX y

encontrando una forma de medirlas. Sin embargo, desarrollada la metodología hasta este

punto, queda aún mucho trabajo por delante.

En primer lugar, desarrollar la mejora planteada en las pruebas de validación, en segundo

lugar, gracias a unos datos más exactos, realizar una validación íntegra de la metodología

al completo, repitiendo las pruebas las veces necesarias. Y, en tercer lugar, seguir

investigando nuevas técnicas del diseño UX.

Debemos tener en cuenta, que tanto la metodología como la herramienta, tienen que estar

en constante desarrollo, ya que el diseño es un campo que cambia según la época y las

modas.

Sin duda, este trabajo abre las puertas a profundizar en la sistematización de la UX.



121

Referencias

1. ISO 9241-11:2018. Ergonomics of human-system interaction -- Part 11: Usability:

Definitions and concepts.

https://www.iso.org/standard/63500.html [Accedido el 20 noviembre 2018]

2. “Experiencia de usuario”. 40 de fiebre.

https://www.40defiebre.com/que-es/experiencia-usuario [Accedido el 20

noviembre 2018]

3. Web Tendencias21.

https://www.tendencias21.net/Las-experiencias-nos-hacen-mas-felices-que-las-

cosas-que-compramos_a4302.html [Accedido el 26 octubre 2018]

4. Análisis DAFO.

https://foda-dafo.com/ [Accedido el 20 noviembre 2018]

5. “¿Por qué es importante la experiencia de usuario?” Cyberclick

https://www.cyberclick.es/numerical-blog/por-que-user-experience-o-

experiencia-del-usuario [Accedido el 26 octubre 2018]

6. Roto, Virpi. (2006). Web Browsing on Mobile Phones – Characteristics of User

Experience. 951-22-8469-3.

7. Forlizzi, J., & Ford, S. (2000). The Building Blocks of Experience: An Early

Framework for Interaction Designers. In Proceedings of the 3rd Conference on

Designing Interactive Systems: Processes, Practices, Methods, and Techniques (pp.

419–423). New York, NY, USA: ACM. doi:10.1145/347642.347800

8. Marc Hassenzahl & Noam Tractinsky (2006) User experience - a research agenda,

Behaviour & Information Technology, 25:2, 91-97, DOI:

10.1080/01449290500330331

9. Nielsen Norman Group. Líderes mundiales en experiencia de usuario basada en la

investigación

https://www.nngroup.com/articles/definition-user-experience/ [Accedido el 26

octubre 2018]

10. ISO 9241-210:2010. Ergonomics of human-system interaction – Part 210: Human-

centred design for interactive systems. 2010.

11. Usabilidad, definiciones formales, Wikipedia.

https://es.wikipedia.org/wiki/Usabilidad#Definiciones_formales [Accedido el 26

octubre 2018]

12. 3 principios básicos de UX/UI: Mostrar, explicar y empoderar.

https://www.tendencias21.net/Las-experiencias-nos-hacen-mas-felices-que-las-cosas-que-compramos_a4302.html

https://www.tendencias21.net/Las-experiencias-nos-hacen-mas-felices-que-las-cosas-que-compramos_a4302.html

https://foda-dafo.com/

https://www.cyberclick.es/numerical-blog/por-que-user-experience-o-experiencia-del-usuario

https://www.cyberclick.es/numerical-blog/por-que-user-experience-o-experiencia-del-usuario

https://www.nngroup.com/articles/definition-user-experience/

https://es.wikipedia.org/wiki/Usabilidad#Definiciones_formales


https://www.linkedin.com/pulse/3-principios-b%C3%A1sicos-de-uxui-mostrar-

explicar-y-veronica-traynor/ [Accedido el 26 octubre 2018]

13. Inboundcycle. “8 trucos de diseño UX-UI para que los usuarios se enamoren de tu

web”.

https://www.inboundcycle.com/blog-de-inbound-marketing/trucos-

dise%C3%B1o-ux-ui [Accedido el 26 octubre 2018]

14. Jakob Nielsen, 10 Usability Heuristics for User Interface Design. Nielsen Norma

Group.

https://www.nngroup.com/articles/ten-usability-heuristics/ [Accedido el 26

octubre 2018]

15. Andrew Kucheriavy. “Top 100 UX Design Tips from a User Experience Master”.

https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-

master/ [Accedido el 26 octubre 2018]

16. Ernesto Olivares. “Experiencia de usuario: 125 reglas para optimizar la UX de

cualquier web o app”.

https://ernestoolivares.es/ux-experiencia-de-usuario/ [Accedido el 26 octubre

2018]

17. PageSpeed Insight.

https://developers.google.com/speed/pagespeed/insights/ [Accedido el 14

noviembre 2018]

18. Informe de Experiencia de Usuario de Chrome

https://developers.google.com/web/tools/chrome-user-experience-report/

[Accedido el 3 de noviembre 2018]

19. “Así son los nuevos “informes de experiencia” de Chrome con los que Google

quiere mejorar la web”. Softzone.

https://www.softzone.es/2017/10/25/informes-experiencia-chrome-google-

mejorar-web/ [Accedido el 3 de noviembre 2018]

20. Acerca de PageSpeed Insight.

https://developers.google.com/speed/docs/insights/about[Accedido el 2 de

noviembre 2018]

21. Bankia Indicex.

https://bankiaindicex.com/ [Accedido el 19 noviembre 2018]

22. Informe Tipo de Bankia Indicex.

https://bankiaindicex.com/pdf/Bankia-Indicex-informe_tipo.pdf [Accedido el 19

de noviembre 2018]

23. W3C Markup Validator.

https://www.linkedin.com/pulse/3-principios-b%C3%A1sicos-de-uxui-mostrar-explicar-y-veronica-traynor/

https://www.linkedin.com/pulse/3-principios-b%C3%A1sicos-de-uxui-mostrar-explicar-y-veronica-traynor/



https://www.nngroup.com/articles/ten-usability-heuristics/

https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master/

https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master/


https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/web/tools/chrome-user-experience-report/

https://www.softzone.es/2017/10/25/informes-experiencia-chrome-google-mejorar-web/

https://www.softzone.es/2017/10/25/informes-experiencia-chrome-google-mejorar-web/

https://developers.google.com/speed/docs/insights/about


https://bankiaindicex.com/pdf/Bankia-Indicex-informe_tipo.pdf


123

https://validator.w3.org/ [Accedido el 4 de noviembre 2018]

24. WP Doctor.

https://www.wpdoctor.es [Accedido el 4 de noviembre 2018]

25. Website Grader.

https://website.grader.com [Accedido el 5 de noviembre 2018]

26. GTMetrix.

https://gtmetrix.com/ [Accedido el 5 de noviembre de 2018]

27. Javier Gobea. Hormigas en la nube. “Por qué debes olvidarte YA de PageSpeed, WP

Doctor y de medir tanto tu web”.

https://hormigasenlanube.com/olvida-pagespeed-wpdoctor/ [Accedido el 4 de

noviembre 2018]

28. Manuel Vicedo. “Por qué aumentar el PageSpeed de tu blog a 100% no te servirá de

nada”.

https://manuelvicedo.com/conversiones/aumentar-pagespeed/ [Accedido el 4 de

noviembre 2018]

29. Definición de metodología.

https://conceptodefinicion.de/metodologia/ [Accedido el 9 de noviembre 2018]

30. Tomàs Modroño. “Metodologías de UX: Evaluación Heurística (PARTE I)”

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-

heur%C3%ADstica-parte-i-b5d02b566987 [Accedido el 28 de noviembre 2018]

31. Tomàs Modroño. “Metodologías de UX: Evaluación Heurística (PARTE II)”

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-

heur%C3%ADstica-parte-ii-8fbf97e1e5b8 [Accedido el 28 de noviembre 2018]

32. Definición Tooltips.

https://trucosinformaticos.wordpress.com/2010/09/28/tooltips-en-html/

[Accedido el 24 de noviembre 2018]

33. “El daltonismo afecta a más hombres que mujeres”. Vissium.

https://www.vissum.com/el-daltonismo-afecta-mas-a-hombres-que-a-mujeres/

[Accedido el 25 de diciembre 2018]

34. “¿Cómo crear una guía de estilo de diseño de páginas web?” Staffcreativa.

http://www.staffcreativa.pe/blog/crear-una-guia-de-estilo-de-diseno-web/

[Accedido el 2 de enero de 2019]

35. Leyes de Gestalt. Wikipedia

https://es.wikipedia.org/wiki/Leyes_de_la_Gestalt [Accedido el 4 de enero de

2019]

36. “Por qué no se debe escribir TODO EN MAYÚSCULAS”. Desarrollos Creativos.

https://validator.w3.org/

https://www.wpdoctor.es/

https://website.grader.com/

https://gtmetrix.com/

https://hormigasenlanube.com/olvida-pagespeed-wpdoctor/

https://manuelvicedo.com/conversiones/aumentar-pagespeed/

https://conceptodefinicion.de/metodologia/

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-heur%C3%ADstica-parte-i-b5d02b566987

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-heur%C3%ADstica-parte-i-b5d02b566987

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-heur%C3%ADstica-parte-ii-8fbf97e1e5b8

https://blog.interactius.com/metodolog%C3%ADas-de-ux-evaluaci%C3%B3n-heur%C3%ADstica-parte-ii-8fbf97e1e5b8

https://trucosinformaticos.wordpress.com/2010/09/28/tooltips-en-html/

https://www.vissum.com/el-daltonismo-afecta-mas-a-hombres-que-a-mujeres/

http://www.staffcreativa.pe/blog/crear-una-guia-de-estilo-de-diseno-web/

https://es.wikipedia.org/wiki/Leyes_de_la_Gestalt


https://www.desarrolloscreativos.net/2-buenas-razones-para-no-escribir-todo-

en-mayusculas/ [Accedido el 2 de enero de 2019]

37. “Concepto de Pop-up”. NeoAttack.

https://neoattack.com/neowiki/pop-up/ [Accedido el 3 de enero de 2019]

38. “Cómo diseñar una web para usuarios daltónicos”. LanceTalent.

https://www.lancetalent.com/blog/como-disenar-una-web-para-usuarios-

daltonicos/ [Accedido el 3 de enero de 2019]

39. “Optimizando el buscador interno de tu ecommerce”. Aukera.

https://aukera.es/blog/buscador-interno-web-pautas/ [Accedido el 3 de enero de

2019]

40. Txaro Fontalba. “5 claves para conseguir una experiencia de usuario positiva en tu

sitio web”. Planeta ttandem.

https://www.ttandem.com/blog/5-claves-para-conseguir-una-experiencia-de-

usuario-positiva-en-tu-sitio-web/ [Accedido el 4 de enero de 2019]

41. Steinmann, Sascha & Rollin, Robér & Schramm-Klein, Hanna & Mau, Gunnar &

Wagner, Gerhard. (2016). The Role of Color Contrast and Predominant Primary

Color of Icons for Mobile Gaming Apps in Influencing User Reactions.

42. Europa Press. “¿Cuánto tiempo perdemos al año frente al ordenador?” La Voz de

Galicia.

https://www.lavozdegalicia.es/noticia/tecnologia/2013/10/08/tiempo-

perdemos-ano-frente-ordenador/00031381244542492768673.htm [Accedido el 4

de enero de 2019]

43. “¿Qué es un chatbot?” 40 de fiebre.

https://www.40defiebre.com/que-es/chatbot [Accedido el 4 de enero de 2019]

44. David Gil Ripoll. “Usabilidad y UX en formularios web”. Usabilidad y Experiencia de

Usuario.

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-

web/#Estructura_y_organizacion_de_un_formulario_web [Accedido el 4 de enero

de 2019]

45. Buttons. Material Design.

https://material.io/design/components/buttons.html#usage [Accedido el 4 de

enero de 2019]

46. Interaction Design Foundation. Wikipedia.

https://en.wikipedia.org/wiki/Interaction_Design_Foundation [Accedido el 5 de

enero de 2019]

47. “Mobile User Experience (UX) Design”. Interaction Design Foundation.

https://www.desarrolloscreativos.net/2-buenas-razones-para-no-escribir-todo-en-mayusculas/

https://www.desarrolloscreativos.net/2-buenas-razones-para-no-escribir-todo-en-mayusculas/

https://neoattack.com/neowiki/pop-up/



https://aukera.es/blog/buscador-interno-web-pautas/

https://www.ttandem.com/blog/5-claves-para-conseguir-una-experiencia-de-usuario-positiva-en-tu-sitio-web/

https://www.ttandem.com/blog/5-claves-para-conseguir-una-experiencia-de-usuario-positiva-en-tu-sitio-web/

https://www.lavozdegalicia.es/noticia/tecnologia/2013/10/08/tiempo-perdemos-ano-frente-ordenador/00031381244542492768673.htm

https://www.lavozdegalicia.es/noticia/tecnologia/2013/10/08/tiempo-perdemos-ano-frente-ordenador/00031381244542492768673.htm

https://www.40defiebre.com/que-es/chatbot

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/#Estructura_y_organizacion_de_un_formulario_web

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/#Estructura_y_organizacion_de_un_formulario_web

https://material.io/design/components/buttons.html#usage

https://en.wikipedia.org/wiki/Interaction_Design_Foundation


125

https://www.interaction-design.org/literature/topics/mobile-ux-design


48. Nick Babich. “Perfect menu for mobile apps”. UX Planet.

https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377 [Accedido el

5 de enero de 2019]

49. Diego Zanetti. Lógica visual. Scribd.

https://es.scribd.com/document/51900307/Apuntes-de-Catedra-LOGICA-VISUAL


50. “Uso (que no abuso) de los iconos en diseño web”. Websa100.

https://www.websa100.com/blog/diseno-web-y-uso-de-iconos/ [Accedido el 9 de

enero de 2019]

51. “La importancia de la velocidad de carga de tu web y qué factores debes tener en

cuenta”. Ragose.

https://ragose.com/importancia-velocidad-carga-web/ [Accedido el 9 de enero de

2019]

52. IKEA

https://es.wikipedia.org/wiki/IKEA [Accedido el 21 de enero de 2019]

53. Saquero Ros, C. y Berna Martínez, J. V. (2019). Aplicación de evaluación UX.

http://rua.ua.es/dspace/handle/10045/86727 [Accedido el 24 de enero de 2019]

54. (2017). “Macros en Excel: optimiza tu trabajo con las hojas de cálculo”. Digital

Guide.

https://www.ionos.es/digitalguide/online-marketing/vender-en-

internet/macros-en-excel-que-son-y-por-que-son-tan-utiles/ [Accedido el 24 de

enero de 2019]

https://www.interaction-design.org/literature/topics/mobile-ux-design

https://uxplanet.org/perfect-menu-for-mobile-apps-39b2cb5b7377

https://es.scribd.com/document/51900307/Apuntes-de-Catedra-LOGICA-VISUAL

https://www.websa100.com/blog/diseno-web-y-uso-de-iconos/

https://ragose.com/importancia-velocidad-carga-web/

https://es.wikipedia.org/wiki/IKEA

http://rua.ua.es/dspace/handle/10045/86727

https://www.ionos.es/digitalguide/online-marketing/vender-en-internet/macros-en-excel-que-son-y-por-que-son-tan-utiles/

https://www.ionos.es/digitalguide/online-marketing/vender-en-internet/macros-en-excel-que-son-y-por-que-son-tan-utiles/



127

Bibliografía

1. Yuste Torregrosa, R. (2017). Análisis y diseño de interfaces centrado en la UX.

Trabajo de fin de grado Ingeniería Multimedia.

2. David Gil Ripoll. Usabilidad y UX en formularios web. Usabilidad y Experiencia de

Usuario.

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-

web/ [Accedido el 4 de enero de 2019]

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/

http://www.usabilidad-ux.com/usabilidad-experiencia-de-usuario-formularios-web/



129

Anexo I

A continuación, listamos una serie de pautas recogidas del artículo escrito por Andrew

Kucheriavy, las cuales hemos considerado interesantes y nos servirán en la

implementación de la metodología [15].

Relacionadas con el flujo:

Pauta 1. Los usuarios son más propensos a notar los elementos cerca de la parte

superior de la página, en orden de importancia.

Pauta 2. Es importante evitar que el usuario llegue a las llamadas dead end pages,

que son las páginas sin salida.

Pauta 3. Usar patrones e interfaces de sitios web comunes. No hacer a los usuarios

aprender algo nuevo.

Relacionadas con el scroll:

Pauta 4. Los usuarios se desplazarán hacia abajo en la página web, siempre que

quede claro que hay información relevante adicional más abajo.

Pauta 5. El scroll en las páginas web es agradable porque siempre es más rápido

que hacer clic. Pero hay que tener cuidado y no hacer que las páginas sean

demasiado largas.

Relacionadas con el Contraste y color:

Pauta 6. Diseño para usuarios daltónicos. Convertir los diseños a escala de grises

para asegurar que todos los usuarios pueden leer la información importante.

Relacionadas con la carga:

Pauta 7. Asegurarse de que los usuarios del sitio web puedan completar su

objetivo principal de forma rápida y sencilla.

Pauta 8. Mostrar un esqueleto de los elementos del sitio web para transmitir el

diseño mientras se está cargando.

Pauta 9. El texto del sitio web debe cargarse antes que las imágenes para que los

usuarios puedan comenzar a leer antes de que el resto del sitio cargue.

Relacionadas con el móvil:

Pauta 10. No requerir desplazamiento vertical para cualquier otra cosa que no sea

el desplazamiento normal de la página web.


Pauta 11. No usar doble toque en dispositivos móviles.

Relacionadas con la navegación:

Pauta 12. Siempre debe ser obvio cómo acceder al menú de navegación en un sitio

web.

Pauta 13. Si la jerarquía del sitio web es mayor de 3-4 niveles de profundidad

significa que necesita ser rediseñada.

Pauta 14. Considerar el uso de menús fijos en páginas web largas.

Pauta 15. Hacer que las etiquetas de navegación sean específicas, no más de 2-3

palabras, que sean clave y que transmitan la mayor cantidad de información

posible.

Pauta 16. Los usuarios deben saber dónde están en el sitio web. Esto se consigue

usando migas de pan.

Pauta 17. En móvil mostrar las opciones más utilizadas y ocultar las otras en un

menú de hamburguesas. No usar este tipo de menú en una aplicación para

ordenador.

Pauta 18. Las listas desplegables de menús deben ser verticales, no horizontales.

Pauta 19. Los menús laterales (muy comunes en móviles) debe ser más estrecho

que la página para que sea fácil clicar fuera. Es recomendable que además de

cerrarlos clicando fuera se ofrezca una alternativa como la posibilidad de cerrarlos

con una cruz o con un desplazamiento o swipe horizontal.

Pauta 20. No ocultar las funciones de inicio de sesión o búsqueda dentro de los

menús del sitio.

Relacionadas con los formularios:

Pauta 21. Alinee las etiquetas y los campos de formulario en una sola línea vertical

para permitir un escaneo rápido.

Pauta 22. Las etiquetas de campo deben estar fuera del campo de texto, no dentro,

para que los usuarios no las pierdan de vista.

Pauta 23. Dividir secciones con separadores para hacer que los formularios largos

sean más fáciles de usar.

Pauta 24. Mostrar todos los campos que causan errores a la vez, junto a cada

campo problemático para que los usuarios móviles no se pierdan la advertencia.

Pauta 25. Los mensajes de error deben ser útiles, utilizables, concisos, concretos y

fáciles de entender.


131

Relacionadas con los links:

Pauta 26. Los enlaces en los sitios web deben destacarse: usar texto azul y/o

subrayado para indicar hipervínculos.

Pauta 27. El texto del link debe indicar de manera obvia a dónde dirige en el

enlace.

Pauta 28. No utilice texto azul o subrayado para elementos que no sean links

Relacionadas con los botones:

Pauta 29. Los botones se deben poder clicar y tener suficiente espacio para hacerlo

cómodamente.

Pauta 30. Las acciones frecuentes deben ser botones grandes, ubicados en zonas

accesibles.

Pauta 31. Colores de fondo, bordes y textos orientados a la acción indican a los

usuarios que se puede hacer clic en un elemento.

Pauta 32. Se debe proporcionar una indicación visual de que el clic de un botón fue

exitoso en un periodo menor de 0,1 segundos después la interacción.

Pauta 33. Los botones que cambian o eliminan datos deberían requerir un mayor

esfuerzo o un paso de confirmación para evitar acciones accidentales.

Relacionadas con la búsqueda:

Pauta 34. A menos que se tenga un sitio web muy pequeño con poco contenido,

siempre es necesario un campo de búsqueda.

Pauta 35. Este debe estar situado en la parte superior derecha del portal.

Pauta 36. Los campos de búsqueda en los sitios web deben ser lo suficientemente

amplios para ver toda la consulta de búsqueda.

Relacionadas con los carruseles:

Pauta 37. Evitar los carruseles en la medida de lo posible.

Pauta 38. Solo alrededor del 1% de los usuarios hace clic en las diapositivas del

carrusel en los sitios web.

Relacionadas con los acordeones:

Pauta 39. Utilizar acordeones para comprimir contenido extenso.

Pauta 40. Cuando se usen acordeones, se debe ofrecer una forma de contraer el

contenido de nuevo una vez que el usuario lo haya expandido.


Relacionadas con la ayuda:

Pauta 41. El objetivo principal de cada página web debería ser obvio.

Pauta 42. Los usuarios son reacios a usar la ayuda. Por eso es necesario ponerla en

contexto y ofrecer asistentes y preguntas frecuentes (FAQ) cuando sea apropiado y

necesario.

Pauta 43. La ayuda y las instrucciones deben ser cortas y visualmente diferentes de

otros elementos de la interfaz.

Pauta 44. Solo presente una sugerencia a la vez. Esto reduce la carga de memoria.

Relacionadas con los iconos:

Pauta 45. Los iconos deben describir visualmente su función y propósito. Es

importante que sean simples, familiares y significativos.

Pauta 46. Los iconos solo deben usarse cuando sea necesario y no usarlos en

exceso o simplemente para decorar.

Relacionadas con el contenido:

Pauta 47. La información más importante siempre debe destacarse frente al resto.

Esta debe ir primero. Los usuarios comienzan en la parte superior izquierda y

siempre se fijan más en las primeras 2-3 palabras.

Pauta 48. Contrastes de color, tamaño y estilo para diferenciar la información

principal de la información extra.

Pauta 49. Prioridades para los móviles: Ubicación, eventos, número de teléfono,

información de emergencia, información sensible al tiempo e información

necesaria sobre la marcha.

Relacionadas con la legibilidad:

Pauta 50. Utilizar un mayor espaciado entre líneas de listas y párrafos aumenta la

legibilidad.

Pauta 51. Aumentar el tamaño de la fuente en los sitios web para móviles.

Pauta 52. Ceguera por Banners: los usuarios se esfuerzan por no ver nada que se

parezca a los banners publicitarios.

Pauta 53. No usar todas las mayúsculas en titulares y eslóganes, es más difícil de

leer.


133

Anexo II

Aquí podemos ver una selección de las 125 pautas ofrecidas por Ernesto Olivares en su

blog [16].

Para focalizar la atención del usuario:

Pauta 1. Mantener una jerarquía visual.

Pauta 2. Agrupar funciones o ítems similares por proximidad.

Pauta 3. Usar animaciones visibles para marcar cambios en la interfaz.

Pauta 4. Oscurecer el fondo bajo los pop-ups o cajas con mensajes.

Para guiar al usuario al objetivo final y evitar que el usuario se pierda:

Pauta 5. Mostrar el progreso y tiempo restante en las actividades del sistema.

Indicando el estado actual de interacciones complejas o muy largas, además del

número de pasos que tiene una secuencia.

Pauta 6. Indicar claramente si los elementos de un formulario son opcionales u

obligatorios.

Pauta 7. Los textos de los botones deben ser descriptivos e indicar qué acción

realizarán.

Pauta 8. Indicar cuál será el siguiente elemento de una secuencia.

Para garantizar un proceso fluido:

Pauta 9. Colocar funciones útiles en la esquina superior derecha, como el login,

opciones de cuenta, contacto, la búsqueda o el carrito de compra.

Pauta 10. Dar información al usuario después de cada interacción, como mostrar

un mensaje de éxito después de cada interacción importante.

Pauta 11. Resaltar el elemento sobre el que el usuario pasa el cursor.

Pauta 12. Minimizar los efectos negativos de los períodos de espera. Usar colores

fríos como el azul en las animaciones de carga, ya que reduce la excitación y

aumenta la relajación. (Gorn et al., 2004).

Pauta 13. Mantener a los usuarios entretenidos durante los periodos largos de

espera.

Pauta 14. Comunicar claramente qué áreas son clicables o interactivas.

Pauta 15. Utilizar iconos para ayudar a entender el significado de una acción.


Pauta 16. Usar colores congruentes con el significado de cada elemento (color rojo

para errores o cancelar operaciones y verde para aceptar o indicar que todo ha ido

bien).

Pauta 17. Escribe encabezados que tengan sentido por sí mismos.

Pauta 18. Romper los bloques de texto largos con elementos visuales para dar

variedad.

Pauta 19. El texto debe ser muy fácil de leer. Crear contraste entre el texto y el

fondo y alinear a la izquierda.

Pauta 20. Usar siempre las mismas formas y estructuras a lo largo de la interfaz.

Crear una guía de estilos para el diseño del front-end facilitará esta tarea.

Pauta 21. Mantener los menús de navegación en la misma posición a través de

todas tus páginas.

Pauta 22. Añadir sugerencias para ayudar a los usuarios nuevos sin molestar a los

usuarios expertos. Esto se puede hacer mediante tooltips.

Pauta 23. Utilizar la clasificación de tarjetas para construir la arquitectura de

información.

Para ayudar a evitar errores:

Pauta 24. Dar a cada campo de un formulario la estructura correcta para que

coincida con la entrada requerida.

Pauta 25. Diferenciar las funciones más importantes mediante el color o dejando

un espacio.

Pauta 26. Proporcionar una forma visible de cerrar un pop-up.

Pauta 27. Guardar los datos que introducen los usuarios para que no tengan que

volver a hacerlo.


135

Anexo III

En este anexo se muestran las interfaces pertenecientes a la herramienta de evaluación de

la UX, la cual ha sido creada con Microsoft Excel y ha sido subida al repositorio de la

Universidad de Alicante [53]. Esta herramienta se puede descargar libremente y puede ser

usada por cualquier persona que la necesite. Como vemos, el formulario consiste en 2

partes, en la primera se realizan algunas preguntas para conocer el tipo de herramienta

que se va a evaluar y así poder personalizar la segunda parte del cuestionario, de manera

que el usuario no tenga que responder preguntas relacionadas con los formularios si su

web no tiene formularios.


Ilustración 76. Primera parte del cuestionario.87

87 Fuente: http://hdl.handle.net/10045/86727 [Accedido el 25 de enero de 2019]

http://hdl.handle.net/10045/86727


137



139

Ilustración 77. Parte 2 del cuestionario.



141

Anexo IV

Encuesta realizada en Google Forms para la recogida de datos sobre UX

(https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-

PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform).

https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform

https://docs.google.com/forms/d/e/1FAIpQLScL2vBcDFnTFADBwwz-PKn0pe6VPTbZK6NoGG1fHq1DqnbzSw/viewform



143

Documents

Diseño y desarrollo de una metodología de evaluacion de la UX · Diseño y desarrollo de una metodología de evaluación de la UX 5 Resum Avui dia l'èxit d'una aplicació depèn