Introducción
Jakob Nielsen y Rolf Molich definieron, en 1990, una lista de 10 principios para el diseño de interacción. Estos son todavía vigentes y, aunque en ese momento se referían a interfaces gráficas, en realidad son aplicables a cualquier otro tipo de interfaz.
Principios para el diseño de interacción
Los principios de Nielsen y Molich son los siguientes:
- Visibilidad del estado del sistema. Los usuarios siempre deben ser informados sobre las operaciones del sistema, con indicaciones fáciles de entender y visibles de manera inmediata o en un tiempo razonable.
- Coincidencia entre el sistema y el mundo real. El diseño debe reflejar el lenguaje y los conceptos que los usuarios encuentran en el mundo real, teniendo en cuenta las características de los usuarios objetivos. Si la manera en que se presenta la información es coherente con la experiencia real de los usuarios, se facilita el uso del sistema.
- Control de usuario y libertad. Hay que permitir a los usuarios retroceder, deshacer y volver a realizar acciones.
- Consistencia y estándares. El diseño debe asegurar que los elementos gráficos y la nomenclatura se mantienen entre pantallas y entre dispositivos, cuando el producto interactivo es multiplataforma. Por ejemplo, un icono que en un interactivo representa un concepto no debería representar un concepto diferente cuando se incluye en otra pantalla o dispositivo del mismo producto.
- Prevención de errores. Es más importante prevenir la aparición de errores que generar buenos mensajes de error. Hay que eliminar acciones que puedan favorecer errores; si no se puede, se pueden minimizar o preguntar al usuario si está seguro de querer realizarlas.
- Minimizar la carga de la memoria del usuario. El diseño debe evitar que el usuario se vea obligado a recordar gran cantidad de información. Para ello, puede mostrarla a través de objetos, acciones u opciones. El usuario no tiene por qué memorizar la información que recibe: por lo tanto, en los procesos que impliquen varios pasos, la información sobre los pasos anteriores debe quedar visible. Asimismo, las instrucciones para el uso del sistema han de estar al alcance del usuario.
- Flexibilidad y eficiencia de uso. Los atajos de teclado permiten agilizar la interacción y son muy útiles para usuarios expertos. El diseño debería tener en cuenta tanto a los usuarios novatos como a los experimentados, permitiendo atajar acciones frecuentes para que el usuario pueda agilizar las interacciones a su medida.
- Diseño minimalista. La interfaz ha de contener información que sea relevante o que se utilice. Cada elemento adicional de pantalla compite con los datos relevantes y disminuye su visibilidad.
- Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores. Los mensajes de error deben expresarse en un lenguaje claro, indicando el problema y siendo orientativos acerca de cómo alcanzar la solución.
- Ayuda y documentación. El mejor diseño es el que no necesita ayuda. Sin embargo, en ocasiones es necesario disponer de ella; si es así, esta ha de ser fácil de encontrar, estar enfocada a las tareas del usuario, detallar claramente los pasos a realizar y ser breve.
Aspectos comunicativos
Los principios de Nielsen y Molich se refieren a pautas asociadas con la usabilidad del sistema. En cuanto a los aspectos comunicativos, se pueden tener en cuenta las siguientes pautas:
Conocer al usuario
Los objetivos del usuario son los objetivos del diseñador. Este debe saber cuáles son las habilidades del usuario, cuál es su experiencia y qué necesita. Para un diseñador el foco está en conocer a fondo a sus usuarios.
Simplicidad
Las mejores interfaces evitan elementos innecesarios y son claras en el lenguaje que utilizan.
Los elementos relevantes deben ser obvios para el usuario, y si un elemento no es realmente relevante, hay que cuestionar su inclusión.
Aunque la información que haya detrás de una aplicación sea mucha y muy compleja, la interfaz debe transmitir sencillez y eficiencia.
Claridad
Para navegar por una aplicación, el usuario ha de sentirse bien informado y confiado. Para ello, es necesario que sepa perfectamente:
- ¿Qué ha pasado?
- ¿Dónde se encuentra?
- ¿Qué puede hacer?
- ¿Qué pasará cuando lo haga?
En el caso de errores inevitables, hay que informar claramente de las causas del error y de qué acciones puede realizar el usuario. El lenguaje utilizado en estos casos debe ser claro y directo pero empático.
También hay que pensar si podemos facilitar las cosas al usuario: por ejemplo, si en un formulario hay un campo referido a la ubicación del usuario, podemos llenar algunos datos por defecto teniendo en cuenta la IP desde el que se conecta (dejando que pueda modificarlos si no son correctos, por supuesto).
Flexibilidad
Un prototipo gráfico puede tener muy buen aspecto cuando se está trabajando en él, pero cuando se convierte en una aplicación con datos reales, ¿sigue viéndose bien?
Es recomendable:
- Basarse en soluciones que ya se ha demostrado que funcionan bien en diferentes situaciones (por ejemplo, trabajar con retículas responsive).
- Utilizar una tipografía que tengamos claro que es legible (negro sobre blanco, tamaño grande, bien diseñada).
- Prototipar las posibles contingencias de contenido: ¿qué pasa si no hay contenido?; ¿y si hay mucho?
- Prever todos los dispositivos y resoluciones.
- Considerar qué problemas pueden surgir durante el proceso de desarrollo y proporcionar pautas claras a los desarrolladores.
Familiaridad
A los usuarios les gusta ver y utilizar cosas que les parecen familiares: no hay que reinventar la rueda. Esto no quiere decir que todos los diseños tengan que ser iguales, pero es positivo aprovechar la experiencia previa del usuario cuando se diseñan elementos como:
- Iconos
- Navegación
- Call to action (también llamados CTA, es decir, botones especialmente destacados)
- Códigos de color
- Procesos de pago
Hablar el lenguaje del usuario
El copywriting (estilo del lenguaje) forma parte de la interfaz. Conocer a los usuarios target y tener claros los objetivos del proyecto es fundamental para definir el estilo expresivo de la interacción.
En todo caso, sea como sea el estilo, este debe mantener un tono conversacional, natural, claro y conciso. Las etiquetas de las opciones han de ser breves e indicar claramente qué acciones activan o a dónde llevan.
Eficiencia
El usuario ha de poder realizar las tareas de la manera más eficiente, sin perder nunca los resultados de su trabajo.
Para conseguirlo, hay que preguntarse en primer lugar cuál es la tarea que el usuario hace más a menudo, y qué pasos implica esta tarea. La interfaz se debe diseñar para que esta secuencia de acciones implique el menor esfuerzo posible (menos clics, menos pantallas, …).
Coherencia
La coherencia posibilita que el usuario se sienta familiarizado con ciertos elementos aunque antes no los conociera previamente. La coherencia se aplica en la creación de patrones de lenguaje, retícula y elementos de diseño. Una vez que el usuario aprende cómo hacer algo, tiene que poder aplicar este conocimiento a otros lugares del interactivo.
Estructura
La estructura hace que los contenidos sean fácilmente accesibles, sin que haya sensación de desorden ni agobio, de manera que la jerarquía de los elementos sea claramente visible.
Para conseguir una buena estructura, se pueden seguir las siguientes recomendaciones:
- Colocar los elementos de manera que la atención recaiga en las piezas más importantes: posición, color y tamaño son fundamentales a la hora de establecer una buena jerarquía visual. Las cosas realmente importantes deben destacar de manera audaz.
- La tipografía es también un elemento fundamental de la jerarquía visual: el tamaño y tratamiento del texto debe permitir diferenciar claramente qué niveles hay en un contenido.
- Alinear todo bien, teniendo como base una retícula.
- Utilizar un esquema de color coherente a lo largo de toda la aplicación.
Referencias
Interaction Design Foundation. «User Interface (UI) Design» [en línea]. <https://www.interaction-design.org/literature/topics/ui-design>. [Fecha de consulta: 25 de enero de 2021].
Portman, J. (2016). «The core principles of UI Design» [en línea]. <https://www.invisionapp.com/blog/core-principles-of-ui-design/>. [Fecha de consulta: 25 de enero de 2021].
Sollenberger, K. «10 User Interface Design Fundamentals» [en línea]. <http://blog.teamtreehouse.com/10-user-interface-design-fundamentals>. [Fecha de consulta: 25 de enero de 2021].
Usability.gov. «User Interface Design Basics» [en línea]. <https://www.usability.gov/what-and-why/user-interface-design.html>. [Fecha de consulta: 25 de enero de 2021].