Diseño Usable y Accesible

En este tema se habla de las pautas de diseño que hay que tener en cuenta para realizar un diseño Usable y Accesible, explicando primero ambos conceptos.

Usabilidad

Cuando diseñamos aplicaciones, la interfaz que planteemos será fundamental para que el usuario se sienta cómodo trabajando con ella. Por tanto la usabilidad se define como la disciplina que estudia la forma de diseñar sitios web y aplicaciones para que los usuarios interactúen con ellos de la forma más fácil, cómoda e intuitiva posible.

Por ello, para hacer un diseño usable, debemos tener en cuenta que los usuarios sean capaces de alcanzar sus objetivos con el mínimo de esfuerzo y con máximos resultados.

Características de una interfaz usable:

Cuando se diseña una UI se utilizan elementos como tipografía, símbolos, iconos, color y componentes UI para representar hechos y conceptos. Su correcta manipulación puede hacer que se cumplan los objetivos planteados por el sistema.

Para todo ello hay varios principios básicos que no deben olvidarse;

¿Por qué invertir en Usabilidad?

Normas

ISO 9126 CALIDAD DEL SOFTWARE Y MÉTRICAS DE EVALUACIÓN

Existe una norma estandarizada para valorar la usabilidad es la ISO 9126 CALIDAD DEL SOFTWARE Y MÉTRICAS DE EVALUACIÓN.

Esta norma define un modelo de calidad para productos de software y fue creada para establecer criterios y métricas que permitan evaluar la calidad de un software en base a diferentes dimensiones. La norma se organiza en 6 características:

  1. Funcionalidad: Mide si se cumple con los requisitos y especificaciones esperados
  2. Fiabilidad: Evalúa la capacidad del programa para mantener su rendimiento bajo condiciones específicas, incluyendo subcaracterísticas como madurez, tolerancia a fallos y capacidad de recuperación.
  3. Usabilidad: Determina lo fácil que resulta para que aprendan entiendan y operen los usuarios con el sistema. Incluye características como la inteligibilidad, capacidad de aprendizaje, operatividad y capacidad de atracción.
  4. Eficiencia: Mide la relación entre el rendimiento del sistema y los recursos usados, evaluando la eficiencia en términos de tiempo de respuesta y consumo de recursos.
  5. Mantenibilidad: Evalúa la facilidad con la que el software puede ser modificado para corregir fallos, adaptarse a nuevos entornos y mejorar.
  6. Portabilidad: Mide la capacidad del software a ser transferido entre entornos.

En 2011 la norma se reemplazó con la familia ISO/IEC 25000, conocida como SQuaRE (Software Product Quality Requirements and Evaluation).

ISO 9241 Requisitos del software en relación a la calidad de su uso

La norma ISO 9241 evalua los requisitos del software en relación a la calidad de su uso y está enfocada en la ergonomía de la interacción entre sistemas humanos. La serie incluye algunas partes específicas como:

  • ISO 9241-110 sobre principios de diálogo ergonómico,
  • ISO 9241-151 para interfaces de usuario web,
  • ISO 9241-171 que da orientación sobre accesibilidad en software,

Esta norma ISO 9241 se centra en el concepto de calidad en el uso, es decir, se refiere a cómo el usuario realiza tareas específicas en escenarios específicos con efectividad.

ISO 14915 Ergonomía del software para interfaces de usuarios multimedia.

Abarca una serie de recomendaciones esenciales para el diseño y la usabilidad en entornos interactivos que combinan diversos tipos de medios (texto, gráficos, audio, video, etc.).
La serie ISO 14915 consta de 3 partes principales

  1. Principios de diseño : Define principios generales para el diseño de interfaces multimedia, enfatizando la sincronización de diferentes tipos de medios. Esta parte es clave en aplicaciones profesionales como la educación y el trabajo, priorizando que los elementos visuales y auditivos se integren en una estructura coherente para mejorar la experiencia del usuario.
  2. Navegación y control en multimedia: Enfocada en la interacción del usuario para controlar y navegar en entornos multimedia.
  3. Selección y combinación de medios: Ofrece guías sobre cómo elegir y combinar diferentes tipos de medios en función del propósito comunicativo de la aplicación.
    Esta parte se centra en optimizar la elección de los medios para mejorar la comprensión y retención de información por parte del usuario, buscando una combinación efectiva que respalde los objetivos comunicativos.

¿Cómo saber cuánto de Usable es mi aplicación?

Es difícil evaluar este parámetro, que en todo caso depende del usuario que la vaya a utilizar. Se trata de encontrar una forma de evaluar la usabilidad de manera cualitativa y cuantitativa.

Las métricas de usabilidad se suelen dividir en 3 grupos:

Efectividad:

Plenitud con la que se alcanza un objetivo
concreto:
(%) de las tareas completadas
(%) de tareas completadas en el primer intento
(%) de usuarios que completan las tareas en el primer intento

Eficiencia

Esfuerzo para conseguir un objetivo.
Tiemplo empleado para completar el objetivo
% de errores cometidos
% de tiempo empleado en recuperarse de errores producidos
Nº de clics necesarios para realizar una tarea

Satisfacción

Grado de satisfacción del usuario.
% de usuarios que recomendarían la aplicación a otros usuarios
% de usuarios que califica la aplicación como fácil de usar

Aplicación de las métricas

Para medir las métricas anteriores, es necesario contar con un grupo numeroso de usuarios y seguir las siguientes pautas:

Una vez que se obtienen los resultados, se procede a su análisis. Lo más habitual es utilizar gráficos representativos.

Diseño centrado en el usuario

PRUEBAS DE USUARIOS

Las pruebas con los usuarios nos van a permitir obtener una valiosa información que será la base para lograr un diseño centrado en el usuario. Disponemos de las siguientes METODOLOGÍAS de Pruebas con Usuarios para conseguir un diseño centrado en el usuario.

Una muestra de un grupo entre 5-10 usuarios, es suficiente en la mayoría de los casos para detectar muchos problemas de usabilidad

REUNIONES

Encuentros que se hacen durante distintas etapas del proceso de desarrollo de software. Importante que haya un experto moderando la reunión

ENTREVISTAS Y ENCUESTAS

Son contactos personalizados con usuarios que se pueden realizar de manera oral o escrita. Las encuestas deben ser escritas y revisadas por especialistas para asegurarnos que se van a evaluar los aspectos más complejos de la interfaz

DISEÑO DE ESCENARIOS

Es una variante de la encuesta donde se les pide a los usuarios que definan el orden de las acciones que realizan para lograr algún objetivo específico. Su objetivo no es otro que obtener las secuencias lógicas
de acción en la consecución de alguna tarea.

DISEÑO PARTICIPATIVO

Se trata de una reunión entre los productores(equipo de desarrollo) y una muestra de usuarios potenciales del producto final. El objetivo es que los usuarios participen en el diseño de la interfaz. Para ello se les enseña el producto en sus primeras fases y se toma nota de sus sugerencias o consejos

PRUEBAS DE EXPERTOS

Las pruebas llevadas a cabo por expertos contribuyen a detectar problemas de errores del sistema basándose en su experiencia. Su principal objetivo es detectar elementos de diseño de la interfaz de usuario que puedan confundir al usuario y que resten calidad a la aplicación.

Las METODOLOGÍAS de Pruebas de Expertos son:

Evaluación Heurística

Metodología de pruebas de usabilidad en la que expertos analizan una interfaz comparándola con un conjunto de principios de diseño, conocidos como heurísticas. En usabilidad, las heurísticas son criterios basados en la experiencia y en buenas prácticas que ayudan a evaluar y mejorar la UI, identificando problemas que pueden afectar la interacción del usuario con el sistema.

Revisión de Normas

Metodología de pruebas de usabilidad en la que se revisa la UI para asegurarnos que cumple las normas establecidas

Inspección de Consistencia

Esta Metodología se enfoca en garantizar que todos los elementos de la UI mantengan una coherencia y
uniformidad en su diseño y funcionamiento. Se analiza terminología, diseño visual, comportamiento de
los controles, y patrones de interacción en toda la interfaz, para asegurar un diseño consistente.

Inspección Formal

Conjunto de experto en la materia que realizan una especie de juicio con uno de los participantes actuando como moderador, destacando las fortalezas y debilidades de la aplicación.
Se pueden detectar problemas de:

Diseño: color, vocabulario, presentación, tipografías,
distribución de controles…
Navegación: controles, menús, búsquedas…

Una técnica para realizar inspección formal es eyetracking. Mide y analiza el movimiento ocular de los usuarios mientras interactúan con una interfaz. Permite identificar las áreas de mayor atención o interés
(conocidas como puntos de fijación) y el recorrido visual (sacadas) en la pantalla. Con esta información, los evaluadores pueden detectar patrones de navegación, zonas ignoradas, y elementos que distraen o dificultan la experiencia de usuario.

image 4

Principios de diseño

Los principios generales de diseño de interfaces que ayudan a conseguir la usabilidad de un sistema interactivo pueden agruparse en 3 categorías:

Facilidad de aprendizaje

La facilidad de aprendizaje tiene como objetivo reducir el esfuerzo que tiene que hacer un usuario nuevo para trabajar con un sistema interactivo y para llegar a convertirse en un usuario experto. Algunos de los principios que contribuyen a ello son:

Predicción

Un sistema es predecible cuando los conocimientos adquiridos por el usuario por sus interacciones previas son suficientes para poder determinar los resultados de sus futuras interacciones. Para ayudar en la predicción conviene garantizar la Visibilidad de Operaciones. Permite que el usuario sepa, mirando la
interfaz y sin tener que memorizar, si la operación que le interesa puede realizarla o no.

image 5
Esta barra muestra opciones en gris que el usuario entiende que no puede usar.

Síntesis

Un sistema sintetizable permite que cuando una operación cambie algún aspecto del sistema ese
cambio sea captado por el usuario. Ejemplo: Borramos de una tabla y el registro se borra automáticamente, no es necesario pulsar en un botón refrescar para ver el cambio.

Familiaridad

Es la correlación que existe entre los conocimientos que posee el usuario y los conocimientos requeridos para la interacción en un sistema nuevo. Se facilita en gran medida empleando metáforas del mundo real que el usuario conoce perfectamente. Por ejemplo la calculadora de Windows se parece a las calculadoras físicas.

Consistencia

Implica que todos los mecanismos tienen que ser usados de la misma manera sea cuando sea que se utilicen. Es conveniente seguir las siguientes recomendaciones:

Flexibilidad

Hace referencia a las diferentes formas en las que el usuario y el sistema intercambian información. Algunos de los principios que contribuyen a ello son:

Iniciativa en el diálogo

Está relacionado con quién lleva la iniciativa en el diálogo entre el usuario y la aplicación (sistema).
Lo ideal es que la tenga el usuario, pero a veces es muy conveniente que sea el sistema. Ejemplo: Un diálogo modal en el que el usuario no puede hacer otra cosa hasta que no lo cierre

Migración de tareas

Posibilidad de transferir el control de las tareas entre el usuario y el sistema (Ej: copia de seguridad, corrector ortográfico)

Capacidad de sustitución

Posibilidad de que ciertos valores en una aplicación puedan ser sustituidos por otros equivalentes.
(Ej: selección de un color por el nombre, por su valor hexadecimal o mediante una paleta de colores).

Capacidad de configuración

Es la posibilidad de adecuar la interfaz de usuario bien por parte del usuario o bien por parte del propio sistema

Principio de solidez

Este principio hace referencia a la forma en la que aplicación realiza los procesos e informa al usuario de ello. Algunos de los principios que contribuyen a ello son:

Observabilidad

Permite al usuario evaluar el estado interno del sistema por medio de su representación percibida en la interfaz.

Recuperabilidad

Hace referencia a la capacidad de conseguir el objetivo deseado después de reconocer un error en la interacción.

Ejemplo: Botón deshacer en ciertas aplicaciones “Principio de esfuerzo proporcionado”: Si un efecto es difícil de deshacer entonces también debe ser más difícil de llevar a cabo.

Tiempos de respuesta

Representa el tiempo que necesita el sistema para expresar los cambios de estado al usuario

image 6

Adecuación de las tareas

Hace referencia al grado en que el sistema soporta todas las tareas que el usuario quiere hacer y la manera en que el usuario las comprende.

Pautas de diseño

Es importante seguir una serie de pautas en el diseño de una aplicación para que ésta tenga buena usabilidad. Entre los aspectos a tener en cuenta esta el color, contraste, la disposición de las ventanas, colocación de componentes, redacción de textos, etc.

Los diseñadores de interfaces dicen que lo primero que se debe hacer a la hora de desarrollar una aplicación, es diseñar la interfaz de usuario. Si comenzamos por el diseño de la interfaz de usuario
conseguiremos una interfaz más usable, y en consecuencia una aplicación de calidad

Las pautas de diseño pueden resumirse en:

Las pautas de diseño a TENER en cuenta:

Color

El color debe ser considerado como una herramienta adicional en el diseño y no como una necesidad básica Si el usuario no percibe correctamente los colores, la aplicación debe seguir siendo usable
A la hora de aplicar color en una aplicación:

Conjunto limitado de colores, usar de forma consistente

MATIZ, RESPLANDOR y CONTRASTE

Se estima que un 11% de la población mundial tiene algún desorden de ceguera nocturna. Si es posible, permitir al usuario personalizar los colores en cualquier parte de la aplicación que presente información importante. No utilizar combinaciones de colores «peligrosas» en partes importantes de la aplicación. Por ejemplo: fondo rojo sobre verde, fuente blanca sobre fondo amarillo.

DISPOSICIÓN DE LA VENTANA

La localización de los componentes en la ventana determina la relación entre estos. Un layout limpio es crucial para crear un flujo visual de información sin problemas para el usuario.

image 7

Debe proporcionarse una alineación a los controles que permita la lectura vertical en forma organizada y rápida. Recomendaciones:

Espaciado

Proporcionar un espacio adecuado entre controles y grupo de controles, esto facilitará al usuario encontrar y organizar mentalmente la información. Recomendaciones:

Elección de componentes adecuados

De todos los componentes que tenemos disponibles hay que saber elegir el adecuado para cada caso. Es recomendable hacer un estudio de todos los componentes disponibles antes de empezar a diseñar un interfaz de usuario, para saber con qué herramientas contamos.

Fuentes

Las fuentes son, en general, menos legibles en pantalla que en un material impreso, por ello se recomienda:

Redacción de textos

En la redacción de los mensajes y demás elementos de la interfaz, es fundamental tener presente la audiencia de la aplicación, pues ella determina el Estilo de Escritura.

Iconos

Los iconos son imágenes que representan acciones, se reconocen fácilmente, más rápido que las palabras, ocupan menos espacio en pantalla. Equilibrio y organización de los iconos es fundamental.

image 8
Ejemplo de iconos de los programas de texto

Como cambiar los iconos en JavaFX

Atajos de teclado

Se trata de combinaciones de teclas que realizan una acción sustituyendo el puntero del ratón sobre un
elemento gráfico por combinaciones de teclas. Se recomienda definir siempre atajos de teclado para
aumentar la velocidad de trabajo.

Cuadros de diálogo

Son mensaje producidos por el sistema en respuesta a las acciones del usuario. También se utilizan para el sistema de ayuda en línea. Son muy importantes en cualquier aplicación ya que contribuyen a la retroalimentación de la aplicación. Recomendaciones:

Accesibilidad

Según el Informe Mundial sobre la discapacidad publicado por la Organización Mundial de la Salud y el Banco Mundial, más de mil millones de personas tienen algún tipo de discapacidad, lo que significa un 15% de la población mundial.

Accesibilidad Digital

Ejemplo divertido de cosas que NO hay que hacer.