El documento habla sobre la usabilidad web. Define la usabilidad como la facilidad con la que los usuarios pueden usar una herramienta para lograr un objetivo. Explica los principios básicos de usabilidad como la facilidad de aprendizaje, uso y flexibilidad. También describe los beneficios de tener una alta usabilidad como aumentar la tasa de conversión y satisfacción de los usuarios.

1. “ N O M E H A G A S P E N S A R ”
Usabilidad Web

2. ¿Qué es?
El neologismo usabilidad (del inglés usability —facilidad de uso—) se
refiere a 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.
La usabilidad en la web se aplica a la facilidad con que nuestros
visitantes pueden lograr realizar la conversión en nuestro sitio web;
es decir, que finalizan el proceso para el que fue diseñado el website.

3. Usefulness
El modelo conceptual de la usabilidad,
proveniente del diseño centrado en el
usuario, no está completo sin la idea
utilidad. En inglés, utilidad + usabilidad
es lo que se conoce como usefulness.
Jakob Nielsen definió la usabilidad como
el atributo de calidad que mide lo fáciles
que son de usar las interfaces Web.

4. Definición formal
ISO/IEC 9126:
“La usabilidad se refiere a la capacidad de un software de ser
comprendido, aprendido, usado y ser atractivo para el usuario, en
condiciones específicas de uso.”

5. Principios básicos
 Facilidad de Aprendizaje
 Predicibilidad y consistencia
 Facilidad de Uso
 Eficacia y eficiencia
 Flexibilidad
 Multiplicidad de vías y optimización
 Robustez
 Nivel de apoyo y ajuste

6. Definición no formal
Redish (2000):
Es preciso diseñar sitios web para que los usuarios sean capaces de
“encontrar lo que necesitan, entender lo que encuentran y actuar
apropiadamente… dentro del tiempo y esfuerzo que ellos consideran
adecuado para esa tarea”

7. Definición no formal
Redish (2000):
Es preciso diseñar sitios web para que los usuarios sean capaces de
“encontrar lo que necesitan, entender lo que encuentran y actuar
apropiadamente… dentro del tiempo y esfuerzo que ellos consideran
adecuado para esa tarea”

8. Diseño centrado en el Usuario
La mejor forma de crear un sitio web usable es realizando un diseño
centrado en el usuario, diseñando para y por el usuario, en contraposición
a lo que podría ser un diseño centrado en la tecnología o uno centrado en
la creatividad u originalidad.

9. Reglas básicas de usabilidad web
 Rápido
 Simple
 Indexable
 Para la mayoría
 Actualizado

10. Beneficios de la usabilidad
• Reducción de los costes de aprendizaje y esfuerzos.
• Disminución de los costes de asistencia y ayuda al usuario.
• Disminución en la tasa de errores cometidos por el usuario y del retrabajo.
• Optimización de los costes de diseño, rediseño y mantenimiento.
• Aumento de la tasa de conversión de visitantes a clientes de un sitio web.
• Aumento de la satisfacción y comodidad del usuario.
• Mejora la imagen y el prestigio.
• Mejora la calidad de vida de los usuarios, ya que reduce su estrés,
incrementa la satisfacción y la productividad.

11. ¿Que obtenemos al mejorar la UX?
 Aumentar el tráfico recurrente.
 Es decir, que tenemos más puntos para que un usuario después de
haber visitado nuestra web o blog, vuelva a ella en un futuro.
Aplicando estos consejos podemos aumentar el número de visitas de
nuestras páginas webs.
 Disminuir el porcentaje de rebote.
 El porcentaje de rebote no es otra cosa que conseguir que el tiempo
de estancia del usuario sea alto y conseguir que navegue por las
diferentes partes de nuestro site.

12. Decálogo sobre usabilidad de Jackob Nielsen
10 Usability Heuristics for User Interface Design
by JAKOB NIELSEN on January 1, 1995

13. 1. Visibilidad del estado del sistema
Este principio de usabilidad web nos indica que siempre tenemos que tener
informado al usuario de lo que está pasando en nuestra web y ofrecerle
una respuesta en el menor tiempo posible.
• Confirmación de envío de un formulario cuando un usuario ha pulsado
enviar.
• Las barras de carga de las imágenes o de los procesos de descarga de
archivos.
• Los Breadcrumbs o migas de pan que nos muestran dónde nos
encontramos dentro de la web.
• Los indicadores de los procesos de compra que suelen indicarnos en
qué fase nos encontramos.
• Las páginas de situación de suscripción con confirmación donde
cargas una página que indica que hemos enviado un mail para que haga
click en el enlace.

14. 2. Relación entre el sistema y el mundo real
Tenemos que conectar con el usuario. El sistema tiene que “hablar” el
lenguaje del usuario con palabras o frases que a éste le sean familiares y
que pueda reconocer con facilidad.
La información tiene que mostrarse con un orden lógico y las imágenes o
iconos usados tienen que ser claros, sin darle la posibilidad al usuario de
equivocarse.
Con esto, conseguimos que la interacción con el lector sea natural y no le cueste
moverse por la web.
El ejemplo más claro es el uso de la papelera como símbolo de borrar. Este
icono sabemos para qué sirve o por lo menos lo intuimos sólo con verlo.
O los iconos en forma de flecha, que permiten intuir si se está avanzando u
retrocediendo en un proceso.

15. 3. Control y libertad del usuario
A veces, un usuario se equivoca, es normal, está dentro de la naturaleza
humana el equivocarse. Tenemos que darle al usuario la posibilidad de
subsanar el error y no sentirse frustrado por no poder realizar algo.
¿Nunca has añadido un producto en un carrito de la compra y luego te has
arrepentido? El botón de borrar el artículo de la lista de la compra es un claro
ejemplo de este principio de usabilidad para páginas web o tiendas online.
Otros ejemplos:
• Botón de deshacer.
• Dar la posibilidad de editar un perfil personal.
• Volver atrás sin perder el progreso guardado

16. 4. Consistencia y estándares
Otro punto que tenemos que tener en cuenta es seguir los convenios
establecidos para ciertos iconos. Por ejemplo, las líneas horizontales que
indican el menú desplegable en un dispositivo móvil.
Más ejemplos:
• Los botones verdes los asociamos a aceptar una cosa, y los botones
rojos a cancelar, ¿o no? Nunca se nos ocurriría poner los colores al revés,
porque el número de errores que cometería la gente sería enorme. Tenemos
que facilitar el camino todo lo posible.
• Si el menú de navegación lo tienes a la izquierda, no lo cambies
dependiendo de las páginas, volverás loco al usuario. Son segundos los que
el usuario tarda en encontrar el menú en “el otro sitio”, pero lo justo para ir
empeorando la satisfacción con el site.

17. 5. Prevención de errores
“Prevenir mejor que curar”, seguro que te suena. Tenemos, en todo lo posible,
que prevenir cualquier error que pueda cometer el usuario. Y dado el caso de
que este cometa uno, tenemos que poner a su alcance todas las opciones
posibles para poder corregirlo.
La opción de autocompletar de Google es un buen ejemplo de este principio de
usabilidad web.
El buscador te da la opción de completar tu texto, con esto te ayuda, por un
lado, a acotar tu búsqueda y, por otro, porque así de esta forma se asegura de
que escribes el texto correctamente.
Ejemplos:
• Confirmación de dirección de correo electrónico o de la contraseña con
doble campo en los formularios
• Comprobación de campos de formularios en tiempo real

18. 6. Reconocer antes que recordar
Siempre es mejor reconocer que obligar al usuario a memorizar acciones u
objetos para que pueda cumplir su objetivo. ¡Ayuda al usuario a no
memorizar!
El ejemplo más fácil de entender es con un editor de textos.
Cuando vas a seleccionar una fuente de las tropecientas que has instalado, ¿qué
es más fácil? acordarnos del nombre de cada una de ellas y de cómo era; o por
el contrario, que nos hagamos una idea de cómo es si nos muestra una
previsualización de la fuente.
En el caso de una carrito de la compra de una tienda online, es una buena idea
incluir una miniatura de la foto del objeto en la cesta, en lugar de solamente el
nombre o la descripción, para que el usuario asocie rápidamente esa línea de la
cesta con el objeto que compró.

19. 7. Flexibilidad y eficiencia de uso
Tenemos que tener un sitio web preparado para todo tipo de usuario,
desde los más novatos hasta los más experimentados. Si conseguimos que
cualquiera pueda navegar por nuestra web logramos flexibilidad. Y si
tenemos opciones para los más experimentados obtenemos eficiencia.
Por ejemplo, el buscador de Google:
Si no tienes mucha experiencia en su uso, simplemente pones lo que quieres
buscar y listo.
Pero si eres más experimentado y quieres conseguir búsquedas más específicas
puedes usar operadores dentro del buscador.
No es necesario conocer los operadores de Google para poder cumplir tu
objetivo. Pero si los conoces puedes tardar la mitad de tiempo en alcanzar tu
meta.

20. 8. Diseño estético y minimalista
Las páginas web no deben contener información innecesaria, distrae al
usuario y puede llegar a molestar en la navegación.
• Si no hace falta no lo pongas.
• No recargues el diseño de tu página web.
• El usuario busca sites limpios y que carguen rápido.
• Elimina todo lo que consideres innecesario y que no aporta nada a lo que
quieres decir.
• La mejor forma de recordar este principio básico de usabilidad web es con
el acrónimo KISS, Keep It Simple Stupid.

21. 9. Ayudar a los usuarios a reconocer,
diagnosticar y corregir los errores
Tenemos que intentar que todos los errores que puedan ocurrir en tu web
estén expresados en un lenguaje entendible por todos, no por códigos.
La mayoría conocemos qué es un error 404, pero hay gente que no sabe lo que
es.
Es por esto, por lo que tenemos que cambiarlo para que en vez de que aparezca
error 404, diga algo más amigable como: Lo siento, página no
encontrada y darle una posible salida añadiendo páginas relacionadas o un
buscador interno para que pueda buscar y no se vaya de la web.
De esta forma tan sencilla, estamos indicando al usuario qué es lo que pasa en
ese momento y que tiene que hacer para salir de ahí.

22. 10. Ayuda y documentación
Con estos principios se intenta siempre que el usuario no tenga que usar
documentos de ayuda para poder navegar o utilizar una aplicación. Aun así,
siempre tenemos que dar al usuario la posibilidad de tener un
pequeño manual de funcionamiento. Esta ayuda debe ser fácil de
localizar, definir los pasos claramente y no ser muy extensa.
Existen numerosos ejemplos de este principio general de usabilidad
web:
• FAQs, Frequently Asked Questions, preguntas frecuentes
• El icono de la interrogación cerca de algunas opciones
• Minitours nada más abrir una aplicación donde se muestra lo esencial

23. ¿Quieres 10 consejos más?
 Un diseño de calidad que aporte confianza
 Un diseño gráfico y web elegante, logotipo atractivo, estructuración de contenidos
sencilla y uso de paleta de colores coherente, hace que un diseño se vea agradable,
además de dar confianza a los clientes y visitantes de la misma.
 Estándares de accesibilidad y usabilidad web
 Es importante maquetar el proyecto respetando los estándares
de accesibilidad y usabilidad web actuales. Esto no sólo beneficia a nuestros
visitantes que se encuentran con un sitio más rápido y ligero, sino que nos otorga
muchos puntos a la hora de posicionarnos en los buscadores, así como mayor facilidad
a la hora de hacer cualquier modificación dentro de las páginas.
 Botones de llamadas a la acción (Call to action)
 Se recomienda utilizar colores cálidos como el naranja, rojo, escarlata. Estos colores
incitan a la acción, y hay estudios que los asocian a la compra compulsiva. Además de
los colores, es importante cuidar que el mensaje de llamada a la acción sea lo más
claro y sencillo posible.

24. ¿Quieres 10 consejos más?
 Colores estándares para los enlaces
 El color de los enlaces de una web debe ser apreciado y diferenciado claramente de los
demás contenidos. Utilizar el color azúl estándar para los enlaces es una gran idea,
ya que los usuarios relacionan cualquier texto pintado en este color con un enlace. Si
por ejemplo, utilizamos el mismo formato y color de los enlaces para resaltar unos
textos simples, podría llevar a la confusión de los visitantes.
 Enlaces internos y externos
 Una web de referencia debe mencionar dentro de sus contenidos a sus páginas
relacionadas, ya que con esto está facilitando la navegación por las secciones internas.
Además, es importante mencionar webs con autoridad que tengan relevancia y aporte
información útil a nuestros usuarios.
 Menor número de clicks
 Esto significa no tener que hacer muchos clicks para lograr acceder a todas las
secciones de nuestra web y sus respectivos contenidos. Normalmente un usuario que
entre a una web para buscar información y tenga que hacer más de 3 o 4 clicks,
probablemente se canse y se vaya frustrado.

25. ¿Quieres 10 consejos más?
 Menú de navegación: “Calidad antes que cantidad”
 En la mayoría de los casos, se recomienda presentar una web con un menú de
navegación razonable, antes de tener cientos de menús, sub-menús y sub-sub-menús,
los cuales normalmente hacen que nuestros visitantes se desorienten en la navegación.
 Tiempo y peso de carga óptimo
 Hoy en día, el peso y el tiempo de carga de una web son extremadamente importantes,
tanto para la experiencia del usuario como para un mejor posicionamiento en
buscadores. Por lo tanto es aconsejable cuidar estos detalles al iniciar cualquier
proyecto.
 El popular “scroll” en la usabilidad
 Aunque hoy en día los usuarios y las tecnologías han evolucionado en la manera de
navegar, tanto en ordenadores como en dispositivos móviles, sigue siendo útil
tener la presentación e información más relevante de nuestro proyecto en un primer
pantallazo, sin necesidad de dezplazarnos hacia abajo.

26. ¿Quieres 10 consejos más?
 Compatibilidad con los distintos
navegadores y dispositivos
 Hoy en día es imprescindible que nuestro sitio web sea
compatible con los diferentes navegadores y las diferentes
resoluciones de pantallas de los ordenadores y dispositivos
móviles para su mejor usabilidad y accesibilidad. Cada vez es
mayor el acceso de usuarios a través de los móviles, por lo que
la mejor opción es hacer nuestro diseño web adaptable o
responsive web design (RWA)

27. 5 puntos clave de UX
1. Incluir un mapa del sitio.
Esto ofrece una visión completa de la estructura lógica de tu
sitio web e incluye todas las secciones, categorías principales,
y enlaces en formato serializado. Un mapa del sitio es una
gran forma de aumentar la usabilidad y la accesibilidad de tu
web.

28. 5 puntos clave de UX
2. Hazlo simple.
No te compliques, no lo hagas extremadamente
impresionante. Recuerda que debes ayudar a tus visitantes
para que vean rápidamente la información disponible y
encuentren lo que están buscando. Ten en cuenta que cómo
tengan que pensar demasiado sobre lo que deben hacer, los
perderás.

29. 5 puntos clave de UX
3. Prueba tus páginas en dispositivos móviles.
Para esto además de las pruebas manuales, existen varias
herramientas automatizadas para evaluar la usabilidad de tu
sitio en dispositivos móviles.

30. 5 puntos clave de UX
4. Se descriptivo.
Evita el uso de subtítulos genéricos a todos los posts o
artículos como “Servicios” o “Productos” ya que estos no
consiguen comunicarse con tus visitantes. Tu público no está
buscando “Productos” y “Servicios”, debes hacerles saber de
antemano lo que se pueden encontrar en tu web.

31. 5 puntos clave de UX
5. La validación social.
Cuando las personas no están seguras sobre algo en concreto,
y van a mirar a los demás para, podríamos decir, ayudarse a
decidir qué hacer. Obtén validación social sobre tu sitio web, y
gana prescriptores de tu website.

32. Usabilidad vs. Accesibilidad
 La usabilidad trata las
recomendaciones que se deben
tener en cuenta al diseñar un sitio
web. Siempre, en lo referente a la
facilidad de acceso para
los usuarios.
 Se trata de que un sitio web sea
fácilmente navegable, es decir, que
un usuario no se pierda en los
contenidos, que encuentre
fácilmente los menús y que llegue a
cumplir los objetivos del sitio web:
comprar, descargar, subscribirse,
etc…
 La accesibilidad trata las normas
que se deben cumplir al diseñar un
sitio web. Siempre, en lo referente
al correcto acceso a los contenidos,
desde los
diferentes dispositivos.
 Las normas de accesibilidad
también hablan del acceso
universal para todos los usuarios.
Velando por que éstos, tengan
alguna minusvalía o no, puedan
acceder a todos los contenidos de
un sitio web.

33. C É S A R J O D R A
W W W . J O D R A . C O M
Muchas gracias por su atención