Análisis y diseño de

interfaces centrado
en la UX
Grado en Ingeniería Multimedia

Trabajo Fin de Grado

Autor:
Raquel Yuste Torregrosa
Tutor/es:
José Vicente Berná Martínez

Diciembre 2017
 4.3. Recomendaciones para garantizar una buena UX

En esta sección investigaremos y recabaremos información mediante la cual poder

enumerar o listar diferentes requisitos que, en primer lugar, permitan garantizarnos una buena
usabilidad y además consigan crear una gran experiencia de usuario, desde un punto de vista un
poco más técnico.

Investigando hemos intentado buscar empresas que se dedicaran a desarrollar interfaces

y que además fueran pioneras en el mercado del desarrollo de interfaces con mucha experiencia
en este ámbito. Entre muchas encontramos la agencia norteamericana Intechnic[16] con base en
Chicago, que ha sido nominada[17] varias veces por uno de sus diseños a los premios
awwwards[18] y que ha trabajado con empresas como Disney, Microsoft o Google.

En el blog corporativo de esta agencia encontramos un artículo muy interesante escrito

por Andrew Kucheriavy, CEO de esta empresa, y reconocido visionario con experiencia funcional
en desarrollo web, marketing, e-commerce y desarrollo de negocios y además, el autor del libro
Results On Internet (ROI): Secrets of Successful Business Websites.

Este artículo titulado Top 100 UX Design Tips from a User Experience Master[19] nos
facilita 100 tips relacionados con la experiencia de usuario. Los resumiremos y los organizaremos
en una serie de tablas dividiéndolos en diferentes secciones aprovechando la clasificación que el
mismo autor ha realizado en su artículo.

Mover a los usuarios de una sección a la siguiente sin problemas. Para ello es
necesario comprender sus objetivos y sus necesidades.

Los usuarios son más propensos a notar los elementos cerca de la parte
superior de la página, en orden de importancia. Por lo que debemos situar ahí
lo que queremos que cale más a este.

Flujo
Es importante evitar que el usuario llegue a las llamadas dead end pages, que
son aquellas que digamos “no tienen salida”. El flujo termina en ellas y no hay
manera de salir de ellas, solo volviendo hacia atrás. Causan confusión y crean
trabajo adicional para los usuarios.

Usar patrones e interfaces de sitios web comunes. Siempre puede ser más
arriesgado que los usuarios tengan que aprender algo nuevo.

Tabla 2. UX en el flujo de la aplicación

28
 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, por lo tanto, el sitio
web deberá proporcionar una fuerte indicación visual de la dirección del
desplazamiento y si hay más contenido disponible.

Scrolling Cuanto más larga es la página del sitio web, menos probable es que alguien se
desplace hacia abajo hasta el final.

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.

Tabla 3. UX en el scrolling de la aplicación

Diseño para usuarios daltónicos. Esto está directamente relacionado con la

accesibilidad del sitio web que al fin y al cabo también es importante cuando
se quiere generar una buena UX para cualquier tipo de usuario.
Contraste y
color Tener en cuenta también el contraste en los dispositivos móviles.

Los contrastes entre letra y fondo deben ser adecuados para que se garantice
siempre una correcta legibilidad.

Tabla 4. UX en el contraste y el color de la aplicación

Asegurarse de que los usuarios del sitio web puedan completar su objetivo
principal de forma rápida y sencilla.

Generar la sensación al usuario de que el portal es rápido y eficiente, y esto

no quiere decir que tenga que serlo, sino que así lo perciba el usuario.

Mostrar un esqueleto de los elementos del sitio web para transmitir el diseño
Loading y mostrar algo mientras se está cargando el contenido

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, ya que
lo más pesado en cargar suelen ser las imágenes.

Los retrasos de más de varios segundos a menudo harán que los usuarios
abandonen el sitio web.
Tabla 5. UX en el loading de la aplicación

29
 Los elementos de la interfaz móvil son difíciles de tocar con precisión si son
pequeños o están muy juntos. 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.

Al sostener el dispositivo, generalmente los lados y la parte inferior de la

pantalla son muy fáciles de alcanzar ya que el dedo pulgar está justo ahí. Por
lo tanto, es importante situar en la parte inferior izquierda aquellos elementos
que queremos que sean fácilmente accesibles en cualquier momento de la
navegación
Móvil
No generar desplazamiento vertical para nada más que el desplazamiento
normal de la página web.

No usar doble toque en dispositivos móviles. Se debe garantizar que los

usuarios puedan interactuar con un solo toque.

En los dispositivos móviles no existe el hover, por lo que no se debe dar

connotaciones importantes a este fenómeno.
Tabla 6. UX en el móvil

Siempre debe ser obvio cómo acceder al menú de navegación en un sitio web.

Si la jerarquía del sitio web es mayor de 3-4 niveles de profundidad significa

que necesita ser rediseñada.

Considerar el uso de menús fijos, especialmente en páginas web largas, que

requieren un acceso rápido o que se apoyan mucho en la navegación.

Navegación La navegación debe ser consistente; no debería cambiar en todo el sitio web.
Esto ayudará a que los usuarios siempre sepan dónde buscar las cosas y no se
desorienten.

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.

Los usuarios deben saber dónde están en el sitio web. Esto se consigue usando
migas de pan.

30
 En móvil mostrar las opciones más utilizadas y ocultar las otras en un menú
de hamburguesas.

Para navegación secundaria en teléfonos móviles, usar categorías, submenús

o menús dentro de la página.

Las listas desplegables de menús deben ser verticales, no horizontales.

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.

Si hay megamenús, se han de organizar enlaces en grupos y distinguir bien

visualmente entre los elementos que son clicables y los que no.

No ocultar las funciones de inicio de sesión o búsqueda dentro de los menús

del sitio.
Tabla 7. UX en la navegación de la aplicación

Alinee las etiquetas y los campos de formulario en una sola línea vertical para
permitir un escaneo rápido.

Las etiquetas de campo deben estar fuera del campo de texto, no dentro, para
que los usuarios no las pierdan de vista.

Dividir secciones con separadores para hacer que los formularios largos sean
más fáciles de usar.
Formularios

Mostrar los mensajes de error de envío de formulario visibles en el momento

de su envío. O bien junto al botón de enviar o bien de manera flotante en
alguna parte de la pantalla.

Mostrar todos los mensajes de error automáticamente al lado de cada campo

problemático para que los usuarios móviles no se pierdan la advertencia una
vez hayan perdido de vista ese campo.

Los mensajes de error deben ser útiles, utilizables, concisos, concretos y

fáciles de entender.
Tabla 8. UX en los formularios

31
 Los enlaces en los sitios web deben destacarse: usar texto azul y/o subrayado
para indicar hipervínculos.

Los enlaces siempre deben verse como enlaces. Es decir, deben ser siempre
iguales. Si se definen un color o unas características de fuente específicas para
los enlaces, deben mantenerse para toda la página.

Un usuario no debería tener que hacer clic en un enlace para descubrir hacia
dónde conduce.

Links Esto ya lo hemos comentado, no utilice texto azul para elementos que no sean
links, pero tampoco use el subrayado.

Una referencia a una URL completa en cualquier lugar de un sitio web siempre
debe vincular a esa página.

Ciertos elementos, como imágenes de productos o reseñas, siempre se espera

que puedan hacer clic.

Usa un color diferente para los enlaces visitados en los sitios web para reducir
la carga de memoria de los usuarios.
Tabla 9. UX en los links

Los botones se deben poder hacer clic y tener suficiente espacio para que los
usuarios hagan clic o toquen cómodamente.

Acciones frecuentes deben ser botones grandes ubicados en zonas accesibles.

Colores de fondo, bordes y textos orientadas a la acción indican a los usuarios

que se puede hacer clic en un elemento.

Botones
Para diseños planos, asegúrese de que los botones están hechos en un color
que contrasta con un texto orientada a la acción.

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.

Los botones que cambian o eliminan datos deberían requerir un mayor

esfuerzo o un paso de confirmación para evitar acciones accidentales.
Tabla 10. UX en los botones

32
 A menos que se tenga un sitio web muy pequeño con poco contenido, siempre
es necesario un campo de búsqueda.

El campo de búsqueda siempre debe verse como un cuadro de texto y

recomendablemente junto con un icono de búsqueda.

Búsqueda Hacer que el campo de búsqueda sea fácil de encontrar. Los usuarios suelen
buscarlo en la parte superior del portal, y más concretamente en la parte
superior derecha.

Los campos de búsqueda en los sitios web deben ser lo suficientemente

amplios para ver toda la consulta de búsqueda. Para ello es importante
detectar o definir qué contenido se introducirá en ese campo.
Tabla 11. UX en la búsqueda

Evitar los carruseles en la medida de lo posible. Cada diapositiva nueva borra

la memoria de la diapositiva anterior. Los usuarios normalmente se enfocan
en una sola cosa a la vez.

Los puntos en los carruseles son difíciles de ver en los sitios web móviles.
Utilice imágenes que se asoman de izquierda a derecha en su lugar o flechas
Carruseles notablemente visibles.

Solo alrededor del 1% de los usuarios hace clic en las diapositivas del carrusel
en los sitios web.

Los carruseles que se deslizan automáticamente deben cambiar manualmente

también una vez que los usuarios interactúen con ellos.

Tabla 12. UX en los carruseles

Utilizar acordeones para comprimir contenido extenso.

Cuando se usen acordeones, se debe ofrecer una forma de contraer el

contenido de nuevo una vez que el usuario lo haya expandido.
Acordeones
Las páginas más cortas son más fáciles de usar, además que el uso de
carruseles es más cómodo que los saltos de página. Pero, suponen también
mayor costo de interacción que su mostráramos todo el contenido desde el
principio. Si está fuera de la vista está fuera de la mente.
Tabla 13. UX en los acordeones

33
 El objetivo principal de cada página web debería ser obvio.

Los usuarios son reacios a usar la ayuda. Por eso es necesario ponerla en
contexto y ofrecer asistentes y preguntas frecuentes cuando sea apropiado y
necesario.
Ayuda

La ayuda y las instrucciones deben ser cortas y visualmente diferentes de otros

elementos de la interfaz.

Solo presente una sugerencia a la vez. Esto reduce la carga de memoria.

Tabla 14. UX en la ayuda

Los iconos deben describir visualmente su función y propósito. Es importante

que sean simples, familiares y significativos.
Iconos
Los iconos solo deben usarse cuando sea necesario y no usarlos en exceso o
simplemente para decorar.
Tabla 15. UX en los iconos

La información más importante siempre debe destacarse frente al resto.

La información clave debe ir primero. Los usuarios comienzan en la parte

superior izquierda y siempre se fijan más en las primeras 2-3 palabras.

Contrastes de color y tamaño para diferenciar la información principal de la

información extra.
Contenido

En los dispositivos móviles información como la ubicación o el contexto tienen

mucha más relevancia que otra.

Los términos simples y obvios son mejores para el usuario que los términos
más específicos o de una jerga. Tenemos que usar su idioma, sus términos, su
forma de hablar cuando nos comunicamos con ellos.
Tabla 16. UX en el contenido

34
 La mayoría de los usuarios echa un vistazo por encima y luego se para a leer.
Por esto, es beneficioso utilizar variedad visual para hacer más fácil el escaneo
de la página.

La legibilidad no se trata solo de si puede leer algo, sino también de si desea

leerlo. Es decir, que lo que se vaya a mostrar sea de interés. No mostrar
Legibilidad demasiado contenido irrelevante que puede confundir al usuario.

Utilizar espacio entre líneas aumenta la legibilidad.

Evitar utilizar fuentes demasiado pequeñas o condensadas, especialmente

para textos largos.
Tabla 17. UX en el contraste y el color de la aplicación

Partiendo de todas estas premisas podremos empezar a mejorar nuestro sitio web
notoriamente. Aunque personalmente considero que se han olvidado de tratar algo muy
importante cuando se habla de interfaces, y es la importancia de las imágenes. Tras todos estos
años de carrera y de estudio, he entendido el peso que tienen las imágenes dentro de una buena
interfaz, además igual que el color, pueden ser un arma muy poderosa para poder transmitir al
usuario diferentes sensaciones. Es por esto por lo que he continuado investigando para
informarme mejor a cerca de consejo que seguir en este aspecto para mejorar la UX de una
interfaz.

Nick Babich, editor jefe de UX Planet[20] y con más de 41.000 seguidores en la

plataforma Medium[22], nos enumera en el artículo How to Use Images to Improve Mobile App
UX [22] una serie de principios que es aconsejable seguir con relación a las imágenes dentro de
una interfaz:

- “Cree un diseño que se ajuste a la pantalla de un dispositivo. Los usuarios

deberían ver el contenido principal, incluidas las imágenes, sin hacer zoom ni
desplazarse horizontalmente”. Es decir, es importante tener en cuenta que la
organización de las imágenes en un diseño móvil no será la misma, como vemos
en la Figura 7.

35
 Figura 7. Diseño de contenido con imágenes.
(How to Use Images to Improve Mobile App UX)

- “Tanto la ilustración como la fotografía se pueden usar dentro de la misma

aplicación. La fotografía implica automáticamente un grado de especificidad y
debe usarse para mostrar entidades e historias específicas. La ilustración es
efectiva para representar conceptos y metáforas donde una fotografía específica
puede ser alienante.”

- Es bueno usar imágenes como una herramienta de comunicación visual y para

reforzar el mensaje. Pero se recomienda “tener un punto de enfoque icónico en
tus imágenes. Un enfoque claro comunica el concepto de un vistazo. Las
imágenes icónicas más potentes consisten en algunos elementos significativos,
con mínimas distracciones.”

- “Las imágenes no deben aparecer pixeladas […]”. Es importante que las

imágenes den sensación de calidad y de confianza, y si estas están pixeladas
generarán una experiencia desagradable para el usuario.

- “Visualizar fotos y gráficos en su relación de aspecto original, no deben ser

escaladas más del 100% de su tamaño.” Aunque es importante también permitir
que los usuarios, si desean, puedan escalar las imágenes más, hacer zoom en ellas.
De la misma manera, se debe evitar cargar imágenes grandes y luego disminuir
su tamaño a la hora de mostrarlo por el navegador ya que aparte de que podemos

36
 perder nitidez en la imagen, estaremos cargando un contenido mucho más pesado,
lo que hará que el tiempo de carga de la web sea mayor innecesariamente.

- Asegurarse siempre que cuando un texto está superpuesto en una imagen, éste
continúa siendo legible. Para ello lo más fácil poner a la imagen una capa oscura
semitransparente para que el texto de color blanco pueda leerse perfectamente.
Aunque, el autor nos recomienda mejor utilizar degradados para conseguir esto
sin necesidad de oscurecer toda la imagen como vemos en la Figura 8.

Figura 8. Degradados para texto sobre imágenes.

(Fuente How to Use Images to Improve Mobile App UX)

Del mismo autor, encontramos además un artículo que nos habla de las animaciones, algo
que también tiene un papel muy importante para generar una buena experiencia de usuario. Este
es el artículo Functional Animation In UX Design: What Makes a Good Transition?

En este artículo se nos explica que las animaciones “reducen la carga cognitiva” y
“establecen un mejor recuerdo en las relaciones espaciales”, pero además “dan vida a la interfaz
[…] El movimiento puede hacer que las superficies se sientan vivas al multiplicarlas, dividirlas o
cambiar su forma y tamaño […] El movimiento, por su naturaleza, tiene el mayor nivel de
prominencia en una interfaz de usuario. Ni los párrafos de texto ni las imágenes estáticas pueden
competir con el movimiento.”

Las animaciones que consiguen un mayor éxito en la experiencia de usuario dentro de un

portal son las que presentan las siguientes características:

- Receptivas. Es decir, que la animación se produzca después de una acción por

parte del usuario. “La retroalimentación visual es extremadamente importante en
el diseño de la interfaz de usuario.”

- Asociativas. Animaciones que consigan asociar, por ejemplo, las superficies

recién creadas al elemento o acción que las crea.

37
 - Naturales. Con esto conseguimos evitar una transición abrupta. “Cada
movimiento debe ser inspirado por las fuerzas en el mundo real.”

- Intencionales. Generadas intencionalmente para guiar al usuario y centrar su

atención en una parte de la interfaz.

- Rápidas. Es importante que las animaciones no sean demasiado largas o hagan

esperar al usuario, se crea un retraso innecesario.

- Claras. Las animaciones no deben ser confusas o hacer demasiadas cosas a la vez,
deben transmitir su significado de manera clara, sin complicaciones.

- Divertidas. Las animaciones tienen el poder de invitar a los usuarios a interactuar.

Pueden amplificar la empatía en el diseño y evocar emociones.

Y con todo esto ya tenemos una serie de directrices que podemos ir siguiendo para crear una
buena experiencia de usuario en nuestro portal.

4.4. Pruebas de usabilidad para garantizar una buena UX

Una vez realizadas las mejoras, siempre es importante realizar pruebas de usabilidad,
porque como ya hemos comentado, es lo más cercano que podemos estar de medir de alguna
manera el éxito de nuestra UX.

Estas pruebas pretenden identificar y analizar los problemas que puedan hacer que la
interacción del usuario con el portal sea difícil, costosa o frustrante. Por ejemplo, puede medir la
cantidad de tiempo que tarda un usuario en realizar una tarea específica o el porcentaje de usuarios
que abandonan un formulario y poder obtener resultados de si la experiencia de usuario es
satisfactoria o no.

Para ello vamos a seleccionar una serie de pruebas de usabilidad recogidas en el artículo
6 Test de usabilidad fundamentales para asegurar la experiencia de usuario publicado por una
empresa chilena de Marketing online con más de 7 años de experiencia. [23]

Algunas pruebas nos servirán para probar cualquier funcionalidad, pero habrá otras que
serán más específicas para algún caso en concreto. Vamos a ver todas estas pruebas en la Tabla
18.

38