Principios de usabilidad para el diseño de interfaces

Interpretación del comportamiento del usuario. Por ejemplo, los atajos de teclado deben mantener su significado.

Estructuras invisibles. Se refiere a acciones asociadas de manera no visible a elementos de la interfaz. Por ejemplo, si el usuario puede redimensionar la ventana de la aplicación arrastrando el contorno, este control debe mantenerse siempre (no sería coherente que unas veces pudiera hacerlo y otras veces no, sin que exista un elemento gráfico que lo indique).

Pequeñas estructuras visibles. Se refiere, entre otros, a los iconos y barras de desplazamiento, que deben mantener su apariencia. Generalmente, la posición de estos elementos en la pantalla también debe respetarse.

Elementos de diseño, es decir, el estilo visual que define la aplicación.

Un conjunto (o suite) de productos. Se refiere a un conjunto de aplicaciones que forman parte del mismo sistema (Microsoft Office, por ejemplo, es una suite compuesta por Excel, Word, Power Point y otras utilidades). La consistencia debe mantenerse entre todas las aplicaciones que forman parte de la suite, aunque con las variaciones adecuadas para favorecer la flexibilidad de funciones.

Instalación. Deben preverse las variaciones que pueda sufrir la aplicación al distribuirse. Por ejemplo, si se utilizan fuentes que dependan del sistema del usuario, no deberían existir variaciones importantes según las condiciones de instalación.

Plataforma. Se refiere al mantenimiento de la consistencia en plataformas distintas, como Apple/Windows.

No mostrar ventanas o gráficos no solicitados. No deberían aparecer ventanas o gráficos superpuestos a la página sin que el usuario los haya solicitado previamente (es un recurso que se utiliza, por ejemplo, para mostrar publicidad). Este tipo de efectos resulta muy molesto para el usuario, ya que lo desvía del centro de atención y puede ocultar zonas de la página que el usuario esté leyendo.

Aumentar la credibilidad del sitio. Es importante que una página web proporcione confianza al usuario. Los factores que contribuyen a la credibilidad son los siguientes:

• Proporcionar un acceso a las preguntas más frecuentes (FAQ o frequently asked questions), con sus correspondientes respuestas.

• Asegurarse de que la web tiene una estructura lógica, que resulte fácil de entender para el usuario.

• Cuando el contenido corresponde a una cita, incluir la referencia (respetando los estándares de citación bibliográfica).

• Mostrar los datos del autor de los contenidos.

• Asegurarse de que la web tiene un diseño gráfico profesional.

• Proporcionar un acceso a contenidos previos, si procede (por ejemplo, en el caso de diarios electrónicos).

• Asegurarse de que la web se mantiene siempre actualizada.

• Proporcionar enlaces hacia materiales y fuentes de información externos.

• Asegurarse de que el sitio enlaza hacia fuentes que sean creíbles.

Ayudas con la terminología del usuario. Las ayudas de un sitio web deberían tener un lenguaje claro, próximo a la terminología que utiliza el usuario de forma común. Se debe evitar el uso de términos especializados y, en caso de que sea inevitable, deben explicarse.

Estructura de las tareas por pasos. Cuando un usuario tiene que desarrollar una tarea que contiene varios pasos, éstos deben ordenarse siguiendo el mismo orden que el usuario seguiría en otros contextos, ya sean digitales (si el mismo tipo de tarea suele realizarse en otros sitios y existe un orden que ya se ha estandarizado) o reales (si la tarea que se realiza en la web tiene un paralelo en el mundo real).

Así pues, resulta fundamental tener en cuenta la experiencia previa del usuario en tareas similares. Además, el orden de los pasos debe ser evidente (es decir, el usuario tiene que poder reconocer claramente qué secuencia debe seguir).

Agrupación de elementos funcionalmente relacionados. En una interfaz, pueden existir elementos que estén relacionados entre sí y con los que el usuario interactuará como unidad. Por ejemplo, si el usuario puede acceder a la zona restringida de un sitio web mediante una clave, el campo de introducción de la clave y la opción "acceder" están estrechamente relacionados.

La relación entre los elementos debe ser evidente, por lo que se colocarán próximos aquellos que tengan una relación funcional.

Reducir la carga de trabajo del usuario. La aplicación debería ejecutar los procesos automáticos que no requieran intervención del usuario para que éste pueda dedicar toda su atención a las tareas que sí necesitan intervención humana. Por ejemplo, los campos de formulario prerrellenados con información introducida en ocasiones anteriores por el usuario (como la dirección de correo en el campo de email) contribuyen a reducir la carga de trabajo.

No obstante, es importante garantizar que ninguna de las acciones automáticas implique decisiones que deben corresponder al usuario.

No cargar la memoria del usuario. Debe evitarse que los usuarios tengan que recordar cosas de una página a otra del sitio web. Cuando dos contenidos tienen que compararse o están relacionados, es mejor colocarlos en la misma página para que el usuario pueda visualizarlos al mismo tiempo.

Esto es especialmente importante si los usuarios focales son personas mayores, ya que generalmente la capacidad para memorizar elementos durante un plazo relativamente largo de tiempo disminuye con la edad.

No pedir al usuario que ejecute tareas diversas mientras lee. Si el usuario tiene que ejecutar otras tareas mientras lee, reducirá notablemente la velocidad de lectura, así como la comprensión del texto. Por lo tanto, especialmente en sitios web con contenidos extensos, debería evitarse que el usuario realice multitarea (incluyendo la memorización de elementos de otras páginas).

Minimizar el tiempo de descarga de la página. Es importante que las páginas de un sitio se descarguen con la mayor velocidad posible, ya que de lo contrario aumenta la posibilidad de que el usuario abandone. Para ello, debe limitarse el tamaño de archivo de los elementos (el texto y las imágenes, por ejemplo) incluidos en la página.

Proporcionar indicaciones de tiempo de espera. En caso de que una descarga o de que la realización de una tarea por parte de una aplicación implique un tiempo prolongado, debería indicarse al usuario que debe esperar.

• Si el proceso es inferior a diez segundos, puede utilizarse un reloj animado o un efecto similar para indicar que el proceso se está desarrollando.

• Si el proceso dura más de diez segundos, debería incluirse un indicador de progreso que muestre cuánto falta para completar la tarea.

Si el proceso dura más de un minuto, debería indicarse la duración y proporcionar una señal auditiva discreta cuando el proceso se haya completado (ya que es posible que el usuario esté aprovechando para realizar otras tareas).

Advertir en caso de tiempo límite. En caso de que una página tenga algún límite de tiempo, debería avisarse al usuario antes de que éste se agote para que pueda solicitar un tiempo adicional.

Diseñar páginas que se impriman correctamente. Si se prevé que los usuarios van a querer imprimir las páginas del sitio web, es importante que éstas tengan un formado adecuado, de manera que la impresión no recorte contenidos de la página (este efecto puede darse si el formato de la página es demasiado ancho).

La solución puede consistir en diseñar la página con un formato adecuado, o en proporcionar una versión de la página orientada a la impresión (mediante la gestión de CSS).

Ubicación de las opciones. Se ha comprobado que la navegación se agiliza cuando el menú principal se encuentra en la zona izquierda de la interfaz.

También es importante agrupar o colocar juntos los menús secundario y terciario. Éstos pueden colocarse solos (por ejemplo, como menú horizontal si el menú principal es vertical) o bien agrupados con el menú principal.

Esto no implica que no puedan colocarse opciones en la zona derecha de la pantalla, pero en el caso del menú principal no es la ubicación preferida por los usuarios.

Menús desplegables. Los menús desplegables permiten acceder a las subopciones de un menú principal sin consumir espacio de pantalla. No obstante, presentan el inconveniente de que las subopciones aparecen inicialmente ocultas, de manera que es posible que el usuario se vea obligado a desplegar todos los menús para encontrar la opción que está buscando. Por lo tanto, es muy importante organizar adecuadamente la distribución de las subopciones y comprobar que tanto el orden en el que se han distribuido como sus etiquetas son entendidos adecuadamente por parte de los usuarios.

Por otra parte, los menús desplegables en cascada presentan el inconveniente de que pueden resultar difíciles de utilizar, ya que el movimiento del ratón requiere mucha precisión. Deberían evitarse siempre que sea posible, especialmente en caso de usuarios con discapacidades motrices.

Menús estáticos. El orden de las opciones de un menú nunca debe modificarse, ya que puede desorientar gravemente al usuario.

Incluso en el caso de los menús adaptables, en los que se colocan en primer lugar las opciones más utilizadas por los usuarios (por ejemplo, Microsoft Office), se ha observado que los usuarios prefieren menús estáticos.

Utilización de los mapas. En el caso de las aplicaciones o sitios web con importante volumen de contenidos, es recomendable incluir un mapa del sitio (que muestra la estructura jerárquica de los contenidos) o un índice (que presenta la lista de contenidos). Este mapa será más útil cuanto más se aproxime a la estructura mental del usuario.

Indicación de la situación del usuario. El usuario debe poder conocer siempre:

• En qué punto de la aplicación se encuentra.

• De dónde procede.

• Hacia dónde puede dirigirse.

Para ello, pueden utilizarse diversos recursos como breadcrumbs, diferencia visual de la opción activa del menú o títulos de las páginas.

Breadcrumbs. Los breadcrumbs (rastro de migas de pan) son un elemento que permite al usuario orientarse dentro del sitio web y suelen colocarse en la zona superior del área de contenidos de la página. Existen diferentes tipos de breadcrumbs:

• Localizador. Informa del lugar en el que está ubicada la página respecto a la estructura de contenidos de la aplicación; es independiente de la navegación realizada previamente por el usuario.

• Dinámico. Informa del camino seguido por el usuario hasta llegar al punto en el que se encuentra.

• Descriptivo. Muestra al usuario en qué categoría se ubica el contenido que se muestra. Permite que el usuario pueda acceder a otros contenidos similares o relacionados.

Aunque el breadcrumb es un elemento muy útil para situar al usuario y su aplicación se está extendiendo cada vez más, debe tenerse en cuenta que puede resultar poco comprensible para usuarios con poca experiencia. Por lo tanto, nunca debería sustituir a las opciones de navegación habituales.

Diferencia visual de la opción activa del menú. Cuando el usuario accede a un apartado de la aplicación, debe indicarse claramente cuál es la opción del menú correspondiente al apartado en el que se encuentra. Para ello pueden utilizarse recursos gráficos como el cambio de color o un elemento que destaque visualmente la opción activa. Es importante que el recurso gráfico elegido se aplique de manera consistente a lo largo de toda la aplicación.

Título de página claro y visible. El usuario debe poder distinguir claramente cuál es el título de la página, que debe ser coherente con la opción que se muestra activa en el menú y que no debe confundirse visualmente con el texto de contenido.

Proporcionar opciones de navegación. Una opción de menú o un enlace nunca debe dirigirse a una página que no contenga opciones de navegación, ya que el usuario debe poder navegar libremente por todas las páginas o pantallas de la aplicación.

En caso de que un enlace abra una nueva ventana, ésta debe contener un botón para cerrar la ventana en activo y regresar a la ventana original.

Diferenciar y agrupar elementos de navegación. Las opciones y enlaces deben diferenciarse claramente del resto de elementos no activos de una interfaz.

Además, las opciones relacionadas deben agruparse visualmente, de manera que las que tengan una relación más estrecha sean las que se encuentren más próximas entre sí.

Por otra parte, los menús verticales se leen más ágilmente que los horizontales.

En páginas extensas, incluir una lista de contenidos seleccionable. Cuando el contenido de una página es muy extenso, puede resultar difícil para el usuario localizar el contenido que está buscando. Para facilitar esta tarea, se recomienda colocar al principio de la página una lista o índice clicable de las secciones o apartados de la página, de manera que el usuario pueda ver si contiene el que está buscando y acceder a él directamente.

Evitar las páginas con demasiada información. Cuando las páginas de un sitio web contienen demasiada información, aumenta la dificultad con la que el usuario encuentra los datos que realmente necesita.

Colocar los elementos importantes en la zona superior de la página. Los elementos más importantes de una página deben situarse arriba y centrados, ya que es la zona en la que primero mira el usuario. Después realiza el barrido visual habitual de izquierda a derecha y de arriba abajo. Por lo tanto, los elementos críticos de la página deben aparecer en la zona superior.

En el caso de los menús, es especialmente importante que todas las opciones sean visibles sin necesidad de utilizar el scroll vertical.

Estructurar para facilitar la comparación. Cuando el contenido de un sitio web incluye elementos que deben ser comparados, éstos deberían colocarse en la misma página con el objetivo de que el usuario no tenga que recordarlos mientras va de una página a otra. Por ejemplo, si realiza una compra, debería poder ver el importe de los productos que ha solicitado en la misma página que la lista de detalle de esos productos.

Optimizar la densidad visual. La densidad visual viene determinada por el número de elementos que se encuentran en un área determinada de la página. Para los usuarios resulta mucho más difícil y lento encontrar un elemento cuando éste se encuentra en un área visualmente muy densa. Además, los usuarios tienden a visitar más las páginas claras y bien estructuradas, que no presentan una alta densidad.

Alinear los elementos de la página. Los usuarios prefieren las páginas en las que los elementos se encuentran bien alineados. Además, la alineación debe mantenerse de manera consistente a lo largo de las diferentes páginas o pantallas de la aplicación (es decir, deben mantenerse los mismos márgenes y distancias entre los elementos).

Evitar elementos que puedan entenderse como fin de página. En el diseño de las páginas de un sitio web, debe evitarse la inclusión de elementos que puedan dar a entender equivocadamente al usuario que la página se ha acabado, si no es así.

Longitud de página adecuada. La longitud de las páginas de un sitio web debe tener en cuenta el objetivo para el que están diseñadas.

En el caso de la página inicial del sitio y de las páginas de navegación (por ejemplo, el mapa de la web), las páginas deberían ser cortas para facilitar su observación en conjunto.

Pueden utilizarse páginas más largas para las que incluyen contenidos que deban leerse sin interrupción o que pueden imprimirse.

Incluir el logo o identificador en todas las páginas. La inclusión del logotipo o identificador en todas las páginas de un sitio web proporciona un marco de referencia al usuario que le permite comprobar que no ha abandonado el sitio.

Debe tenerse en cuenta, además, la posibilidad de que el usuario acceda directamente a una página interna procedente de un enlace externo o de un buscador, de manera que tiene que poder identificar el sitio aunque no haya pasado previamente por la página inicial. El logotipo debe aparecer en la misma ubicación en todas las páginas.

Ordenar los elementos de la página de manera que los diferentes niveles del contenido se reflejen en su aspecto gráfico.

Agrupar elementos relacionados.

Establecer puntos de atención dentro de la página que dirijan la mirada del usuario.

El tamaño. Los elementos de mayor tamaño son percibidos como más importantes o de primer nivel que el resto.

La posición. Los elementos que se sitúan en la zona superior de la pantalla son observados como de primer nivel respecto a los que se sitúan debajo de ellos. En la dimensión horizontal, los que se ubican en la zona izquierda son interpretados como de primer nivel respecto a los que se ubican a la derecha.

El contraste. Los elementos que presentan mayor contraste visual son aquellos que se perciben como más importantes o de primer nivel dentro de la página. Por ejemplo, resulta habitual informar de que una opción está desactivada utilizando el recurso gráfico de disminuir el grado de contraste.

La agrupación. Los elementos que se encuentran próximos están relacionados y, por lo tanto, presentan una jerarquía en cuanto al orden de los contenidos.

Eliminar el scroll horizontal. La utilización del scroll horizontal resulta mucho más compleja y tediosa para los usuarios que la del scroll vertical (que está relacionada con un movimiento mucho más natural de la mano). Debe evitarse la aparición de scrolls horizontales que se deban a un formato de página demasiado ancho.

Facilitar el scroll rápido mientras se lee. Cuando una página contiene un texto extenso, los usuarios tenderán a utilizar el scroll para ir escaneando la página en busca del contenido que más les interesa. Si el texto contiene títulos de secciones visibles, resultará más fácil para el usuario encontrar el texto que están buscando.

Utilizar la paginación mejor que el scroll. En caso de que el tiempo de descarga de la página sea pequeño, es recomendable utilizar la paginación en lugar del scroll para mostrar el contenido. Los usuarios entienden mejor el contenido cuando está dividido en varias páginas que si tienen que leer grandes extensiones de texto en una sola página.

Limitar la longitud del scroll. Si los usuarios están buscando información concreta es recomendable segmentar la información en páginas breves y bien organizadas, ya que la utilización del scroll en páginas largas es tediosa y puede requerir mucho tiempo.

Proporcionar un contenido útil y orientado al target. El contenido es el elemento más crítico de un sitio web; una buena presentación no salvará un sitio cuyo contenido sea inadecuado o irrelevante para los usuarios.

No todas las aplicaciones interactivas van orientadas al mismo target. Si éste es muy general, el lenguaje tiene que ser lo más claro y directo posible. En cambio, si el target es muy definido, pueden incorporarse expresiones que resulten familiares a esta comunidad (teniendo en cuenta, no obstante, que en este caso existe el riesgo de excluir a otros usuarios).

Brevedad. Para optimizar la comprensión lectora, el texto debe ser breve y se debería minimizar el número de palabras por frase, así como el número de frases por párrafo.

Una frase no debería contener más de veinte palabras. Un párrafo no debería contener más de seis frases.

Lenguaje claro y llano. El texto debería utilizar palabras que resulten familiares y que sean frecuentemente utilizadas por los usuarios focales (el target).

Para conocer las palabras que emplean con más frecuencia los usuarios de una web, resulta muy recomendable utilizar una herramienta de minería de datos, que permite recoger los términos introducidos en la búsqueda o en otros formularios del sitio.

Evitar la jerga. Si se utiliza terminología especializada, es posible que muchos usuarios no puedan entender el contenido. Debe tenerse en cuenta que los términos comprendidos por el diseñador o por el documentalista no siempre van a ser entendidos por el usuario.

En caso de que no pueda evitarse la utilización de jerga o términos especializados, es recomendable incluir un glosario o diccionario.

Enlazar a la información de ayuda. En caso de que se utilicen conceptos técnicos o jerga, deberían proporcionarse enlaces a un diccionario o glosario de términos.

Utilizar tiempos activos para los verbos. Cuando se utilizan tiempos activos para los verbos, las frases resultan más concisas y claras que si se usan tiempos pasivos.

Instrucciones afirmativas. Cuando se den instrucciones, es mejor comunicar a los usuarios lo que deben hacer en lugar de explicarles lo que deben evitar.

No obstante, si las consecuencias de un paso erróneo son graves, entonces el uso de instrucciones negativas debe ser muy claro.

Definir acrónimos y abreviaciones. Los acrónimos y las abreviaciones deben evitarse en la medida de lo posible. Si se utilizan, deben presentarse al usuario la primera vez que aparezcan.

Organizar el texto en secciones. Para favorecer la agilidad en la lectura, el texto debe dividirse en unidades de contenido breves y adecuadamente encabezadas por un título significativo, que permita al usuario localizar fácilmente el contenido que está buscando.

La idea principal en la primera fase del párrafo. La primera frase de un párrafo debe contener la idea principal del párrafo. Cuando escanean visualmente el texto, los usuarios suelen utilizar esta primera frase para saber si el contenido del párrafo les interesa.

Destacar las palabras claves. En la lectura en pantalla, el usuario suele realizar barridos visuales rápidos para localizar el contenido que le interesa. Para favorecerlo, resulta muy adecuado destacar las palabras claves, generalmente en negrita (debe evitarse destacarlas mediante subrayado, ya que se confundirían con enlaces).

Listas en lugar de párrafos, siempre que sea posible. En los casos en los que se esté describiendo o enumerando un conjunto de elementos, es altamente recomendable estructurar el contenido en forma de lista, ya que permite que el usuario comprenda con mayor facilidad el contenido.

Mostrar la información en un formato usable. En el caso de los datos, deben presentarse de la manera que resulte más inteligible para los usuarios (por ejemplo, utilizando gráficas o tablas). En todos los casos deben respetarse los estándares o convenciones a los que estén más habituados los usuarios.

En caso de que el target sea internacional, la información debe proporcionarse en varios formatos (por ejemplo, las unidades de medida de los diferentes países) o permitir al usuario que pueda elegir su propio formato.