INTERACCION HUMANO COMPUTADOR

SIS407
Tema 4 –UX EXPERIENCIA DE USUARIO

Ing. en Ciencias de la Computación

Ms.C. Ing. Gustavo Poquechoque

INTRODUCCION
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.
INTRODUCCION
Muchos desarrolladores no terminaban de hacer las cosas bien, siempre
implementaban la funcionalidad, no piensan si luego si cada elemento
está en el sitio correcto: “¿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 la pregunta es:
¿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 crea una sensación de incomodidad cada vez que se navega por
una página, cada vez que se va hacer clic sobre ese botón o cada vez que
se lee ese texto que se sabe que el usuario no entendería sin leerlo dos o
tres veces.
INTRODUCCION

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 las personas pueden utilizar una

herramienta particular o cualquier otro objeto fabricado por humanos con el fin
de alcanzar un objetivo concreto [ISO 9241-11:2018].

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 necesariamente una
buena experiencia de usuario.

[2] “Experiencia de usuario”. 40 de fiebre. https://www.40defiebre.com/que-es/experiencia-usuario

INTRODUCCION
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.

Ejemplo de dos libros con distinta experiencia de usuario

 INTRODUCCION

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 Gilovich) 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.

[3 ] https://www.tendencias21.net/Las-experiencias-nos-hacen-mas-felices-que-las-cosas-que-compramos_a4302.html
INTRODUCCION
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.
INTRODUCCION

Apple Store el día de salida del iPhone 7

¿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.

• 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.
¿POR QUÉ ES IMPORTANTE LA UX?
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
• 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.

• 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 USD o realizar una transferencia
bancaria. 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,
sin embargo, 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.
 ¿POR QUÉ ES IMPORTANTE LA UX?
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

• Cyberclick también destaca que

accedemos a las plataformas
desde diferentes dispositivos,
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.
¿QUÉ ES LA UX?
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

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”

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

¿QUÉ ES LA UX?
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.

Influencias en la experiencia por Forlizzi y Ford (2000).

¿QUÉ ES LA UX?
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.)

Marc Hassenzahl & Noam Tractinsky (2006) User experience - a research agenda
¿QUÉ ES LA UX?
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.
 ¿QUÉ ES LA UX?
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”

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.
 ¿QUÉ ES LA UX?
ISO 9241-210

Además, el ISO enumera tres factores que influencian la experiencia de usuario: sistema,
usuario y contexto del uso.
¿QUÉ ES LA UX? Vs USABILIDAD
Diferencias entre usabilidad y experiencia de usuario
 ¿SE PUEDE MEDIR LA UX?
Cuando hablamos de experiencia de usuario, hablamos de algunos aspectos
subjetivos como sentimientos, emociones, etc. ¿cómo vamos a medir un aspecto
que no es objetivo?

• Mostrar
• Explicar
• Empoderar

Los cuales servirán para poder agrupar las recomendaciones que nos ofrece en
cada uno de estos principios.

Post “3 principios básicos de UX/UI: mostrar, explicar y empoderar” [12], de la mano de Verónica Traynor y Web
Content Accessibility Guidelines (WCAG)
¿HERRAMIENTAS WEB DE UX?
Cuando hablamos de experiencia de usuario, hablamos de algunos aspectos
subjetivos como sentimientos, emociones, etc. ¿cómo vamos a medir un aspecto
que no es objetivo?

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 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.

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.
 ¿HERRAMIENTAS WEB DE UX?
PageSpeed Insights

PageSpeed Insights de Google, 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. 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 Loaded), 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.
 ¿HERRAMIENTAS WEB DE UX?
PageSpeed Insights Resultados del test en PageSpeed Insights para la web de la Universidad de Alicante

• FCP (First Contentful Paint22), que indica el tiempo que tarda en pintarse el primer contenido
• DCL (DOM Content Loaded), que mide el tiempo que tarda el contenido DOM en cargarse.
 ¿HERRAMIENTAS WEB DE UX?
Bankia Índicex

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.
 ¿HERRAMIENTAS WEB DE UX?
Bankia Índicex

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
 ¿HERRAMIENTAS WEB DE UX?
Bankia Índicex

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.
 ¿HERRAMIENTAS WEB DE UX?
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.
.

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.
 ¿HERRAMIENTAS WEB DE UX?
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.
AREAS A EVALUAR SITIO WEB
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.

Entre los numerosos componentes o áreas de una plataforma, se puede 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.
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
a) 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.)

b ) 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, que 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
PA02. Usar siempre las mismas formas, estructuras y diseño a lo largo de la
interfaz. (5 pts.)

También se puede prescindir de ella si se hace uso de una librería de estilos externas
(por ejemplo, Bootstrap o Angular Material36).
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
c) 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

Ejemplo gráfico de agrupar funciones o ítems similares por proximidad

PA03. Agrupar funciones o ítems similares por proximidad. (2 pts.)

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
d) 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.

PA04. Usar animaciones visibles para marcar cambios en la interfaz. (1 pt.)

Ejemplo gráfico de usar animaciones visibles para marcar cambios en la interfaz

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
e) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
f) 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.

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.)

Ejemplo gráfico de mostrar el progreso y tiempo

restante en las actividades del sistema
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
g) 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.

PA08. Hacer uso de las migas de pan o de los mapas de secuencias para
mantener ubicados a los usuarios. (3 pts.)

Ejemplo gráfico para mantener a

los usuarios ubicados
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
h) 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.)

i) 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.)

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
j) 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.
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.)

Ejemplo del uso del acordeón

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
k) 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.

Ejemplo de indicación visual

de scroll

PA13. Proporcionar una fuerte indicación visual de la dirección del

desplazamiento y de si hay más contenido disponible. (2 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LÓGICA VISUAL
l) 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.)

m) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

CONTENIDOS (TEXTOS)
a) 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.)

b) 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.)

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

CONTENIDOS (TEXTOS)
a) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

CONTENIDOS (TEXTOS)
c) 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.)

d) 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.
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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

COLOR Y CONTRASTE

a) La importancia de comunicar claramente los elementos interactivos o clicables

para un correcto flujo por la plataforma. 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

COLOR Y CONTRASTE

b) 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. 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

PA21. Oscurecer el fondo bajo los pop-ups o cajas con mensajes. (2 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

COLOR Y CONTRASTE

c) 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].

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

COLOR Y CONTRASTE
d) 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.)

e) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

COLOR Y CONTRASTE
f) 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.

PA25. Diferenciar las funciones más importantes mediante el color o dejando

un espacio. (2 pts.)

Ejemplo de acción diferenciada

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

ICONOS

a) 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).

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

ICONOS
b) 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.

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.)
PA28. Los iconos solo deben usarse cuando sea necesario y no usarlos en exceso o
simplemente para decorar. (1 pt.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MENÚ DE NAVEGACIÓN

a) 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.)

b) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MENÚ DE NAVEGACIÓN

c) 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. (3pts.)

d) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MENÚ DE NAVEGACIÓN

e) 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.

PA33. Las funciones de inicio de sesión o búsqueda deben permanecer fuera de los
menús del sitio. (3 pts.)

f) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MENÚ DE NAVEGACIÓN

g) 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.

Ejemplo gráfico para destacar la sección actual del menú

PA35. Destacar la sección actual dentro del menú de navegación. (3 pts.)

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
BÚSQUEDA
a) 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ña y tenga poco contenido, es
necesario disponer de un campo de búsqueda.
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.)

b) 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.

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
TIEMPO DE CARGA
a) La diseñadora web y experta en UX Txaro Fontalba, 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 .
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.

PA40. Mostrar un esqueleto del diseño del sitio y

el texto mientras se cargan las
imágenes. (1 pt.)

Presentación previa de la página principal de la app BBVA

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
TIEMPO DE CARGA
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..”

PA40. Usar colores fríos como el azul en las

animaciones de carga, ya que reduce la
excitación y aumenta la relajación (1 pt.) (Gorn et
al., 2004)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
TIEMPO DE CARGA
b) 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.

PA42. Mantener a los usuarios entretenidos durante los periodos largos de espera.
(1 pt.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
AYUDA
c) 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.

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

PA45. Añadir sugerencias para ayudar a los usuarios nuevos sin molestar a los
usuarios expertos. (3 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
AYUDA
d) 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
PA42. En cada página se comunica claramente la función principal mediante
encabezados, imágenes o instrucciones y los elementos que se tienen que utilizar para
llevarlas a cabo. (1 pt.)

d) Aunque todo en la web sea obvio, siempre pueden aparecer ciertas dudas.
• 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),
• 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
• 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
a) 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.
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.

Ejemplo gráfico con las etiquetas de campo dentro y fuera de él (izquierda y derecha respectivamente).

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.)

Imágenes resultantes del estudio de Eye tracking sobre formularios web

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
b) 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.)

c) 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.
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

PA48. Indicar claramente si los elementos de un formulario son opcionales u

obligatorios. (3 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
d) 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

• Uno de los más problemáticos, ya que se encuentra en muchos formularios es el

campo, Fecha, 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:

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
e) 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.)

f) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
g) 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.

Ejemplo gráfico de no incluir instrucciones demasiado obvias

PA52. No incluir instrucciones redundantes o demasiado obvias. (2 pts.)

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
FORMULARIOS
h) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
LINKS
a) Estamos acostumbrados a que los enlaces 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, 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.

PA54. Los enlaces en los sitios web deben estar claramente diferenciados del resto
del texto, normalmente en azul y/o subrayado. (4 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

LINKS

b) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

BOTONES

a) 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.

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
BOTONES
b) 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:

La prioridad propuesta sería:

• Primer lugar, el botón en la parte inferior de “+ Añadir
Entrada” (en inglés, “+ Add Entry”)
• Segundo lugar, se encuentra el botón “Ver Entrada”
(“View Entry en inglés)
• Por último, la acción menos importante sería “Aprender
Más” (“Learn More”).

Establecer una jerarquía mediante el diseño y la posición

PA57. Las acciones frecuentes deben ser botones grandes, ubicados en zonas
accesibles. (2 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

BOTONES
c) 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.

PA58. Distinguir el botón del resto de texto mediante colores de fondo, bordes y
textos orientados a la acción. (3 pts.)

d) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

BOTONES
e) 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.)

f) 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.

Pop-up de confirmación

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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MÓVIL
a) Los dispositivos móviles no tienen las mismas características que los ordenadores, por ello
la experiencia de usuario será distinta.

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.
• 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.
• El espacio disponible para interactuar, pantallas de unas 6 pulgadas. 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. 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MÓVIL

b) 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.

PA63. Usar un único toque para interactuar en dispositivos móviles o tablets. (2

pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB
MÓVIL
c) 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.
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.

PA64. Situar el menú en la parte inferior de

la pantalla con las opciones más
utilizadas. (3 pts.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

MÓVIL

d) 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.)
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

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:

Áreas a evaluar con su respectivo peso

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

DEFINICIÓN DE LAS CUESTIONES

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.
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

DEFINICIÓN DE LAS CUESTIONES – CUESTIONARIO 1

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?
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

DEFINICIÓN DE LAS CUESTIONES – CUESTIONARIO 1

 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

DEFINICIÓN DE LAS CUESTIONES

CUESTIONARIO 2:
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.
 DEFINICIÓN DE LAS PAUTAS A EVALUAR EN UN SITIO WEB

DEFINICIÓN DE LAS CUESTIONES

CUESTIONARIO 2:
 PRACTICO
Utilizando La aplicación de Excel para la evaluación de UX, realizar la
evaluación a los siguientes sitios: