Usabilidad de la web

Introducción

¿Qué significa que una página sea usable?

Usable es un término ampliamente utilizado en el ámbito informático. Su significado es “que se puede usar”. ¿Pero qué significa “que se puede usar”? Podríamos pensar que un sitio Web es usable sólo por el hecho de haber accedido a él y haber visitado alguno de sus enlaces. Nada más lejos de la verdad. Una página es usable si al usuario le resulta fácil el uso de su interfaz.

Cuando hay una buena comunicación entre el usuario y el ordenador se reducen los errores y aumenta la satisfacción del usuario.

El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible.

La usabilidad es una cualidad de un sitio web de la que sólo se percibe por su ausencia. Cuando está presente, el usuario interactúa con facilidad y rapidez y sólo se detecta cuando el usuario se queja.

La usabilidad, también se define como el grado en que un producto puede ser utilizado, en un contexto de uso específico, por determinados usuarios, para conseguir objetivos específicos, con efectividad, eficiencia y satisfacción.

La usabilidad se refiere a la capacidad de un software de ser comprendido , aprendido , usado y atractivo para el usuario, en condiciones específicas de uso.

La usabilidad es un atributo cualitativo que evalúa cuán fáciles son de usar las interfaces de usuario.

¿Por qué es importante que nuestra página sea usable?

Porque la facilidad de uso está relacionada directamente con la eficiencia. Si la página es usable, el usuario no dudará al tomar decisiones sobre lo que tiene que hacer y podrá efectuar un mayor número de operaciones en menos tiempo.

La web https://userinyerface.com/ está hecha para conseguir la peor experiencia de usuario posible.

¿Cómo sabemos que un elemento de una web es clickable?

Lee el artículo La usabilidad en el diseño de aplicaciones

Además de los consejos del artículo anterior yo incluiría los siguientes:

Debemos asegurarnos de que las áreas clicables tengan el tamaño adecuado, para que el usuario pueda realizar correctamente dicha acción. Sobre todo en móvil.
No abusar de la paginación.

Objetivos del diseño de interfaces

El diseño de interfaces Web se basa en sus mismos principios:

Dar el control al usuario.
Reducir la carga de memoria (del usuario).
Mantener una interfaz consistente.

Al realizar un diseño de una interfaz hay que hacer un análisis de los posibles usuarios de la misma. No es lo mismo diseñar una aplicación para una empresa que para todo el mundo con conexión a Internet.

¿El objetivo principal del diseño de interfaces es conseguir que la interfaz que diseñamos llame la atención?

No.

A la hora de diseñar una interfaz Web, debemos tener en cuenta algunos de los objetivos de la Web relacionados con la usabilidad:

Permitir una búsqueda rápida, cómoda y eficiente de la información por parte de los usuarios.
Facilitar la navegación de los usuarios en el sitio web.
Facilitar la interactividad de los usuarios con el sitio web.
Tener en cuenta las necesidades de los usuarios.

El usuario, ese gran desconocido

Cada usuario es un mundo y, si quieres tener alguna ventaja sobre la competencia, tendrás que identificar qué es lo que pueden tener en común pero sobre todo aquellas cosas que los diferencian.

Si queremos hacer un diseño pensando en el usuario, tendremos que tener en cuenta sus características, sus expectativas, sus capacidades y aptitudes, qué información necesitan, cómo acceden a la Web, qué experiencia previa tienen en el uso de la Web, qué conocimientos tienen o si tienen algún tipo de discapacidad. También es importante las limitaciones técnicas que pueden tener los usuarios potenciales de un sitio web, qué plataforma utilizan y qué tipo de conexión tienen. Es por esto, que en las empresas del sector del desarrollo de software, es muy habitual trabajar con historias de usuario.

¿Qué es una historia de usuario?

Una historia de usuario es una descripción breve, simple y comprensible de una funcionalidad que debe tener un sistema, vista desde el punto de vista del usuario final o del cliente. Se utiliza principalmente en metodologías ágiles como Scrum.

La forma más común de redactar una historia de usuario es:

Como [tipo de usuario], quiero [acción o funcionalidad], para [beneficio u objetivo].

También debes tener en cuenta si el sitio que estés diseñando esté orientado a ser usado por diferentes perfiles de usuario: visitante o invitado, usuario registrado o colaborador, usuario experto o administrador. En este caso, a cada usuario se le suele presuponer una experiencia determinada en el uso de la web.

Lenguaje y vocabulario

Debemos emplear un lenguaje cercano al usuario. El lenguaje debe ser sencillo y comprensible. El mayor problema radica en saber cuál es ese lenguaje cercano al usuario si nosotros mismos no somos ese usuario objetivo.

La tarea de escribir de manera clara y natural no es fácil. Al contrario, es algo complejo que va más allá de una buena ortografía, de un buen conocimiento de la gramática o de un amplio vocabulario: requiere una buena selección de la palabra o frase adecuada, un ordenamiento lógico del tema a tratar, y una exigente labor de revisión que elimine sin piedad toda palabra superflua, frase ambigua o estructura complicada.

Consejos sobre cómo redactar el contenido

Los siguientes consejos generales a la hora de redactar son tanto para atraer la atención del usuario como para mejorar nuestro posicionamiento en motores de búsqueda como Google.

Escribe sin faltas de ortografía.
Uso de lenguaje sencillo y directo, palabras sencillas expresadas de forma simple y transmisión clara de las ideas. Han de evitarse las estructuras complejas y los conceptos abstractos.
Si es breve, mejor. Si puedes decir lo mismo con menos palabras, hazlo sin dudar.
En caso de necesidad de mención de conceptos abstractos es recomendable usar ejemplos concretos o comparaciones que faciliten su comprensión
No se debe dar por hecho que el usuario tiene conocimientos previos sobre el tema que se trata.
Empleo de palabras cortas, evitando, en la medida de lo posible, palabras largas y/o difíciles de pronunciar.
Dirigirse al usuario de forma directa y personal, utilizando la segunda persona (“Si tienes alguna pregunta no dudes en contactar con nosotros”) en lugar de la tercera persona (“En caso de que algún usuario tenga alguna pregunta que no dude en contactar con nosotros”).
Dar instrucciones claras al visitante. Botones llamativos que sean descritos con acciones sencillas “pincha aquí para recibir el ebook”. Dile lo que va a pasar cuando pincha en un enlace.
Adaptar el lenguaje utilizado a la audiencia potencial del sitio, y que dicho lenguaje sea positivo Se han de evitar las negaciones.
Céntrate en el usuario/cliente. No hables tanto de ti o tu empresa y habla al cliente de sus problemas y cómo puedes ayudarle a solucionarlos
Evita el subjuntivo, que es impreciso y confuso.
Cuidado al utilizar lenguaje figurativo o metafórico, ya que puede resultar confuso para una parte de los usuarios
Uso de voz activa en lugar de pasiva, haciendo que el documento sea más vivo y con menor complicación.
Sistematización en el uso de las palabras, utilizando siempre la misma palabra para denominar una misma cosa, aunque la repetición de palabras afecte al estilo de redacción.
Elección de signos de puntuación sencillos, evitando el punto y coma, los guiones y las comas.
Evitar el uso de jergas, abreviaturas e iniciales, y si se hace uso de ellas etiquetarlas adecuadamente en el código con las etiqueta ABBR (ACRONYM no está soportada en HTML5).
División del texto en varias secciones en caso de que éste sea extenso, de forma que se facilite la lectura.

Para llegar a todo el mundo y hacer una interfaz más usable hay que tratar de:

Simplificar las frases.
Suprimir palabras inútiles.
Utilizar adornos literarios.
Utilizar un lenguaje de culto con estructuras complejas.

1 y 2 son correctas.

¿Qué es el copywritting?

El copywriting es la técnica de redactar textos persuasivos con el objetivo de atraer, captar y convencer al lector para que realice una acción determinada, como comprar un producto, suscribirse a un boletín, descargar un contenido, o simplemente generar interés hacia una marca o idea. Es decir, el copywriting es el arte de vender con palabras.

También existe el copywriting SEO que es escribir de modo que el buscador de Google te posicione en las primeras posiciones.

Navegación en la web

Podemos decir que una interfaz es usable si los usuarios pueden contestar a las preguntas: ¿Dónde estoy? ¿Cómo llegué aquí? ¿A dónde puedo ir después? ¿Qué puedo hacer en este momento? ¿Cómo puedo regresar al punto anterior?

La mayoría de estas preguntas serán de fácil respuesta para el usuario si se tienen presentes las características deseables de un sistema de navegación cuando diseñamos un sitio web.

Información accesible

Para lograr un acceso más eficiente y sencillo a la información de un sitio web es importante:

Una buena organización de los contenidos del sitio.
Un buen diseño del sistema de navegación.

El menú de navegación de una página es aquel que permite acceder a los lugares relevantes de un sitio web. Es importante comprobar que:

Todos los contenidos son accesibles ya sea desde el menú de navegación principal o desde alguno de los enlaces.
No existen enlaces que no conducen a ninguna parte. Los enlaces rotos o los que acceden a un contenido inesperado dan una mala imagen de un sitio web. Evita siempre poner enlaces a páginas “En construcción”. Ya pondrás el enlace cuando tengas la página terminada.
Todos los enlaces muestran el contenido que se esperaba.

En lo que respecta al desarrollo de interfaces, una de las directrices a tener en cuenta si queremos desarrollar una interfaz usable es…

Formar al usuario en el uso de la interfaz mediante un tutorial que se puede descargar de la página.
Dar respuesta inmediata a las acciones de los usuarios.
Informar al usuario de los errores cometidos.

Dar respuesta inmediata a las acciones de los usuarios.

Consistencia

Cuando hablamos de consistencia en un sistema de navegación hacemos referencia a que sus elementos son coherentes en todas las páginas que componen un sitio web.

Ejemplo de barras de navegación consistentes

De cara a la consistencia de una web es importante la reutilización de componentes con el uso de WebComponents o un framework como React, Angular o Vue.

A la vista de los tres ejemplos anteriores, podemos decir que el sistema de búsqueda es una parte del diseño Web que todavía no está muy estandarizado y que puede presentar problemas a los usuarios con un nivel de experiencia bajo.

Persistencia

Cuando hablamos de persistencia en un sistema de navegación hacemos referencia a que sus elementos se colocan siempre en el mismo sitio en todas las páginas que componen un sitio web.

La navegación en un sitio web debe de ser predecible para los usuarios. Las barras de navegación deben mantener su posición en las diferentes páginas de un sitio. Por regla general, las barras de navegación se colocan arriba o a la izquierda.

Las barras de navegación deben permitir al usuario encontrar las secciones o áreas de interés de un sitio web sin dificultad. De ahí que siempre se suelan ubicar en los mismos lugares.

En el este enlace puedes comprobar el funcionamiento del sistema de navegación de la página web de Burning Pixel Productions, aunque para comprobarlo primero tendrás que encontrarlo porque está en el pie de la página.

Ejemplo de barra de navegación NO persistente

También es importante que el sistema de búsqueda permanezca siempre en el mismo sitio.

En lo que respecta al sistema de navegación y al sistema de búsqueda de una interfaz, son deseables la(s) característica(s):

Permanencia.
Constancia.
Persistencia y consistencia.

Persistencia y consistencia.

Sencillez de navegación

¿No te ha pasado que cuando una familiar está embarazada empiezas a ver mujeres embarazadas por todas partes? ¿O cuando te compras un coche empiezas a ver el mismo modelo por todas partes? Esto es porque “cada uno ve lo que sabe”.

Si al usuario se le presenta un sistema de navegación que le recuerde otro tipo de situaciones a las que ya está acostumbrado, tendrá mucha menos dificultad en adaptarse a él.

Cuando diseñas el sistema de navegación de un sitio debes recordar que este sistema sirve para que los usuarios sepan dónde pueden ir, dónde están y cómo pueden regresar a la página donde estaban antes.

Un sistema de navegación correctamente diseñado debe suministrar al usuario un acceso a la página principal del sitio web, en cualquier momento de la navegación:

El logotipo de la empresa u organismo del sitio web que suele ir colocado en el encabezamiento de todas las páginas del sitio suele servir para este propósito.
El sistema de navegación principal ubicado, normalmente, en el encabezado de todas las páginas del sitio e informa de las principales secciones del mismo.
El sistema de navegación que informa del camino recorrido desde la página principal hasta el lugar donde se encuentra el usuario.

¿Qué son los breadcrumbs?

Los breadcrumbs (o “migas de pan”) en una interfaz web son un sistema de navegación secundario que muestra la ruta jerárquica que ha seguido el usuario dentro de un sitio web. Su objetivo es ayudar a los usuarios a:

Ubicarse: Saber en qué parte del sitio se encuentran.
Navegar fácilmente: Volver a secciones superiores sin usar el botón “Atrás” del navegador.
Mejorar la experiencia de usuario (UX): Hacer la estructura del sitio más clara.

Tipos comunes de breadcrumbs:

Jerárquicos: Muestran la estructura del sitio (ej: Inicio > Categoría > Producto).
Basados en rutas: Reflejan el recorrido del usuario (menos comunes).
Atributos: Filtros aplicados (ej: Inicio > Zapatos > Color: Rojo).

Si la ubicación de los elementos de navegación es consistente y persistente y, si además el lenguaje empleado en los enlaces es claro y sencillo, el usuario no tendrá que recordar dónde estaba la información que buscaba o el camino a seguir para encontrarla, lo reconocerá en cuanto lo vea.

Cuando el usuario se encuentra en medio de un proceso que implique un conjunto de pasos, es conveniente mantenerle en todo momento informado del progreso de dicho proceso.

Herramientas

Hoy en día, casi todo el software está preparado tanto para el uso del ratón como del teclado.

Los atajos de teclado ahorran gran cantidad de tiempo pero hay que recordarlos y nos permiten acceder a diferentes opciones del menú del navegador. Por ejemplo [Ctrl] + [+] para aumentar el tamaño de la fuente, [Ctrl] + [P] para imprimir y [Ctrl] + [T] para abrir una nueva pestaña. Pero hay infinidad de ellos. Los suelen usar usuarios avanzados pero también usuarios con una discapacidad.

En cualquier navegador al pulsar F7 se activa y desactiva la opción de uso del teclado dentro de una web como si estuviéramos manejando un procesador de textos.

Análisis y verificación de la usabilidad

Una parte importante que todo diseño debería tener en cuenta es hacer una prueba de usabilidad con usuarios heterogéneos y con distintos tipos de discapacidad.

Una página web usable es, además, siempre accesible. ¿Verdadero o falso?

Falso. Una página web sea usable no significa que sea obligatoriamente accesible. Lo que si podemos decir es que cuando se tiene en cuenta la accesibilidad en el diseño de una interfaz, ésta será más usable para un mayor número de personas en cualquier situación o contexto. El hecho de realizar un diseño accesible posibilita a todos los usuarios la realización y consecución de sus tareas.

Existen varios métodos para analizar la usabilidad de una interfaz:

Contratar una empresa o experto para que realice una análisis heurístico.
Realizar una prueba o test de usabilidad antes o después de publicar la página.
Utilizar la técnica eye tracking.

Análisis heurístico

La evaluación heurística se realiza siguiendo las directrices marcadas por Jacob Nielsen (padre de la usabilidad):

Lee el artículo Principios de usabilidad web de Jacob Nielsen y el diseño UX.

El lenguaje de las páginas: ¿es cercano al usuario? ¿está presentado en un orden lógico para el usuario?
La consistencia: ¿la representación gráfica es la misma en conceptos similares? ¿se emplean los mismo términos para el mismo tipo de elementos?
La memoria del usuario: ¿hay enlaces directos a la información relevante? ¿debe el usuario recordar demasiadas cosas?
Eficiencia y flexibilidad: ¿el usuario encuentra siempre lo que busca? ¿y el usuario novato, dispone de alguna ayuda adicional?
Diseño: ¿es ergonómico y visual o está todo junto sin espacios?
Información: ¿está ordenada y correctamente agrupada? ¿el nivel de detalle de la información se suministra bajo demanda o se presenta todo de una sola vez?
Ubicación y navegación: ¿sabe el usuario dónde está en todo momento? ¿sabe a dónde puede ir? ¿puede regresar a la página principal de la sección o del sitio? ¿son los enlaces intuitivos? ¿hay enlaces rotos? ¿hay enlaces con contenido impropio según el nombre del enlace?

El profesional que realiza el análisis heurístico deberá responder de forma afirmativa o negativa a un conjunto de preguntas. Aquellas contestadas de forma negativa son las que detectan los problemas de usabilidad.

Este análisis suele ser eficiente si lo que se quiere es encontrar soluciones alternativas ya que suele ser realizado por un experto en usabilidad o en diseño de interfaces de usuario.

El análisis heurístico debe ser realizado por un experto en accesibilidad. ¿Verdadero o falso?

Falso.

Normas ISO relacionadas con la usabilidad

Los estándares relativos a la usabilidad se refieren básicamente a los siguientes aspectos:

Uso del producto, interfaz de usuario e interacción.
Proceso llevado a cabo para el desarrollo del producto.
Capacidad de una organización para aplicar un diseño centrado en el usuario.

Si nos centramos en la norma ISO IEC 9126, esta define la usabilidad como un atributo de la calidad del software , asociado al diseño y a la evaluación de la interfaz de usuario y a la interacción. Se analiza en términos de:

Comprensibilidad: Capacidad del producto software para permitir al usuario entender si el software es adecuado y cómo puede ser utilizado para la realización de tareas en condiciones de uso particulares.
Aprendizaje: Capacidad del producto software para permitir a los usuarios aprender a utilizarlo.
Operabilidad: Capacidad del producto software para permitir que el usuario opere con él y logre el control del mismo considerando aspectos como adaptabilidad, instalación y tolerancia a errores.
Atractividad:Uso de colores y de un diseño gráfico atractivo para el usuario.
Conformidad: Capacidad del producto software para adherirse a estándares , convenciones, guías de estilo o regulaciones relacionadas con la usabilidad.

Existen otras normas que también son importantes de cara a la usabilidad:

ISO DIS 9241-11
ISO 13407
ISO TR 18529
ISO 9241-151

No es necesario que te aprendas el nombre de estas normas, pero sé consciente de que existen para poder consultarlas el dia de mañana.

Test de usabilidad

Un test de usabilidad es una medida concreta y objetiva de la usabilidad de una herramienta, un sistema, un sitio web, etc. tomada a partir de usuarios verdaderos que realizan tareas reales.

Un test de usabilidad permite verificar si existen problemas de usabilidad y encontrar, en su caso, una posible solución a ellos. Hay que tener varios elementos en cuenta:

El momento: Cuanto antes mejor. Si es posible debe realizarse antes de publicar el sitio. Idealmente, debería realizarse después de un análisis heurístico.
Las personas: ¿Cuántas personas lo van a realizar y qué características tendrán que tener estas personas? Se puede realizar un test con un grupo pequeño de usuarios o emplear un gran grupo. Se pueden incluir personas con distintos grados de discapacidad y con distinto nivel de experiencia.
La duración: El tiempo dedicado a la realización de los test suele estar relacionado con el número de personas que lo van a realizar.
El lugar: Debe escogerse cuidadosamente, de forma que los usuarios que participan en la prueba se sientan a gusto y no puedan interactuar entre sí.
El material: Para realizar el test se debe disponer de toda la tecnología necesaria, incluida la tecnología asistiva en el caso de que haya personas con discapacidad en el grupo de usuarios. También se deberían hacer pruebas en equipos con conexiones lentas y dispositivos portátiles.
El test: Debe estar bien planificado: ¿Qué tareas se le van a pedir a los usuarios? ¿En qué momento realizarán cada una de esas tareas? ¿Cuánto tiempo se considera correcto para realizar dicha tarea? Durante la realización del test, se debe observar la interacción de cada usuario con la máquina en la realización de cada una de las tareas, ver sus reacciones mientras maneja la interfaz, anotar el tiempo que le lleva realizar una determinada tarea, etcétera.

No es muy recomendable realizar test de usabilidad al usuario final una vez se a publicado la web ya que obliga a publicar la página con fallos. Además los usuarios habituales deberán tomarse la molestia de realizar una encuesta con el objetivo de medir su nivel de satisfacción. Esto puede conllevar a la pérdida de usuarios y reputación.

Eye tracking

La técnica del eye tracking consiste en analizar y registrar los movimientos oculares que realiza un usuario mientras navega o interactúa con un sitio web o aplicación. Esto permite conocer detalladamente qué áreas captan mayor atención, cómo el usuario explora el contenido y cuáles son las zonas que ignora o le resultan confusas.

Debemos ser conscientes que lo habitual es que un usuario no lea con detalle ni siquiera una mínima parte de los textos de una página web. En su lugar, y por economía de tiempo, el usuario se limita a hojear la página por encima. Es decir, el usuario realiza un rápido barrido visual de cada página buscando elementos que llamen su atención (como títulos y botones Call To Action (CTA)).

Resultados del eye tracking

Aplicando esta técnica, los expertos en comercio y marketing colocan los productos en los lineales de los supermercados para conseguir un mayor número de ventas o promocionar algún producto.