1.2 : Pautas de diseño de la interfaz de usuario: 10 reglas generales

Aprenda a diseñar teniendo en cuenta las necesidades y expectativas de sus usuarios aplicando las diez pautas de interfaz de usuario de Jakob Nielsen y Rolf Molich. Estas heurísticas se han reflejado en muchos de los productos diseñados por algunas de las empresas más exitosas del mundo como Apple, Google y Adobe. Más evidencia de cómo sus equipos de diseño incorporan estas reglas en su proceso de diseño se refleja en las pautas de interfaz de usuario publicadas y compartidas por estas empresas. Este artículo le enseñará cómo seguir las diez reglas generales en su trabajo de diseño para que pueda mejorar aún más la usabilidad, la utilidad y la conveniencia de sus diseños.

Diez directrices de diseño de interfaces de usuario de Nielsen y Molich

Jakob Nielsen, un reconocido consultor de usabilidad web y socio del Nielsen Norman Group, y Rolf Molich, otro destacado experto en usabilidad, establecieron una lista de diez pautas de diseño de interfaces de usuario en la década de 1990. Tenga en cuenta que existe una superposición considerable entre las heurísticas de Nielsen y Molich y las “ocho reglas de oro” de Ben Shneiderman. Estas 10 reglas empíricas repiten aún más las ocho reglas de oro de Shneiderman 4 años después de la publicación inicial de Shneiderman.

• Visibilidad del estado del sistema . Los usuarios siempre deben estar informados de las operaciones del sistema con un estado fácil de entender y altamente visible que se muestra en la pantalla dentro de un período de tiempo razonable.
• Coincidencia entre el sistema y el mundo real . Los diseñadores deben esforzarse por reflejar el lenguaje y los conceptos que los usuarios encontrarían en el mundo real en función de quiénes son sus usuarios objetivo. Presentar información en orden lógico y aprovechar las expectativas del usuario derivadas de sus experiencias del mundo real reducirá la tensión cognitiva y facilitará el uso de los sistemas.
• Control y libertad del usuario . Ofrezca a los usuarios un espacio digital donde sea posible retroceder, incluyendo deshacer y rehacer acciones anteriores.
• Coherencia y estándares . Los diseñadores de interfaces deben asegurarse de que tanto los elementos gráficos como la terminología se mantengan en plataformas similares. Por ejemplo, un icono que representa una categoría o concepto no debe representar un concepto diferente cuando se usa en una pantalla diferente.
• Prevención de errores . Siempre que sea posible, diseñe sistemas de modo que los errores potenciales se mantengan al mínimo. A los usuarios no les gusta que se les pida que detecten y solucionen problemas, que en ocasiones pueden estar más allá de su nivel de experiencia. Eliminar o marcar acciones que pueden resultar en errores son dos medios posibles para lograr la prevención de errores.
• Reconocimiento en lugar de recuerdo. Minimice la carga cognitiva manteniendo la información relevante para la tarea dentro de la pantalla mientras los usuarios exploran la interfaz. La atención humana es limitada y solo somos capaces de mantener alrededor de cinco elementos en nuestra memoria a corto plazo a la vez. Debido a las limitaciones de la memoria a corto plazo, los diseñadores deben asegurarse de que los usuarios puedan simplemente emplear el reconocimiento en lugar de recordar información en todas las partes del diálogo. Reconocer algo siempre es más fácil que recordar porque el reconocimiento implica percibir señales que nos ayudan a llegar a nuestra vasta memoria y permitir que aflore la información relevante. Por ejemplo, a menudo encontramos que el formato de las preguntas de opción múltiple es más fácil que las preguntas de respuesta corta en una prueba porque solo requiere que reconozcamos la respuesta en lugar de recordarla de nuestra memoria.
• Flexibilidad y eficiencia de uso . Con un mayor uso, surge la demanda de menos interacciones que permitan una navegación más rápida. Esto se puede lograr mediante el uso de abreviaturas, teclas de función, comandos ocultos e instalaciones de macros. Los usuarios deben poder personalizar o adaptar la interfaz para que se adapte a sus necesidades, de modo que se puedan realizar acciones frecuentes a través de medios más convenientes.
• Diseño estético y minimalista . Mantenga el desorden al mínimo. Toda la información innecesaria compite por los recursos de atención limitados del usuario, lo que podría inhibir la recuperación de información relevante de la memoria del usuario. Por lo tanto, la pantalla debe reducirse solo a los componentes necesarios para las tareas actuales, al tiempo que proporciona medios claramente visibles e inequívocos para navegar hacia otros contenidos.
• Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores . Los diseñadores deben asumir que los usuarios no pueden comprender la terminología técnica; por lo tanto, los mensajes de error casi siempre deben expresarse en un lenguaje sencillo para garantizar que no se pierda nada en la traducción.
• Ayuda y documentación . Idealmente, queremos que los usuarios naveguen por el sistema sin tener que recurrir a la documentación. Sin embargo, dependiendo del tipo de solución, es posible que se necesite documentación. Cuando los usuarios necesiten ayuda, asegúrese de que se localice fácilmente, sea específica para la tarea en cuestión y esté redactada de manera que los guíe a través de los pasos necesarios hacia una solución al problema al que se enfrentan.

Google Inc., la compañía de tecnología multimillonaria, ciertamente produce diseños que reflejan la heurística anterior. Jon Wiley, el diseñador jefe de la Búsqueda de Google en 2012, dijo una vez:

“Cuando pienso en el diseño y en la creación de excelentes experiencias de usuario, generalmente lo considero en términos de tres cosas: usabilidad, utilidad y conveniencia”.

Las 10 pautas de la interfaz de usuario de Nielsen y Molich cubren muy bien estos tres componentes clave de la experiencia del usuario, lo que significa que probablemente puede mejorar la experiencia del usuario de sus diseños siguiendo estas pautas.

Descubra cómo Adobe integra las diez pautas de diseño de interfaces de usuario de Nielsen y Molich

Adobe Systems Incorporated, la gran empresa norteamericana de software informático, es un gran ejemplo de cómo los diseños que reflejan las diez pautas de interfaz de usuario de Nielsen y Molich pueden llevar al éxito de una empresa. Uno de sus productos más populares, Adobe Photoshop, que es un editor de gráficos rasterizados, presenta las características de una interfaz de usuario bien diseñada que refleja estas pautas.

Examinaremos más de cerca cómo Adobe Photoshop refleja cada una de estas pautas para inspirarlo a mejorar la usabilidad, la utilidad y la conveniencia de sus propios diseños al incorporar las 10 reglas generales en su propio trabajo.

1. Visibilidad del estado del sistema

Photoshop hace un gran trabajo al permitir que el usuario sepa lo que está sucediendo con el programa mostrándole visualmente a qué han llevado sus acciones siempre que sea posible. Por ejemplo, cuando los usuarios mueven capas en la paleta Capas, pueden ver visualmente la capa que se representa como arrastrada físicamente dentro del espacio.

El gráfico del cursor pasa de representar una mano abierta a una mano agarrada cuando el usuario arrastra una capa dentro de la paleta Capas. Esto facilita la comprensión instantánea del estado del sistema. Además, la elección de Adobe de usar una ‘mano’ es un gran ejemplo de la segunda pauta en la que el sistema coincide con el mundo real.

2. Coincidencia del sistema con el mundo real

Un ejemplo de Photoshop que imita el mundo real en términos y representaciones que sus usuarios objetivo entenderían, es donde diseñan la estructura de la información y la terminología para reflejar la misma redacción que usaríamos en el mundo de la fotografía o los medios impresos. Se utilizan conceptos y términos familiares como RGB, Tono / Saturación / Brillo y CMYK para representar el color, mientras que varias herramientas como la herramienta de esquivar y la herramienta de grabación imitan una técnica tradicional de cuarto oscuro para fotografías.

3. Control y libertad del usuario

Photoshop es muy bueno para proporcionar a los usuarios el control de cada paso del camino. A medida que el usuario realiza cambios en una imagen o agrega varios efectos artísticos, puede dar un paso atrás rápida y fácilmente si comete un error, por ejemplo.

Los usuarios tienen el control, ya que pueden dar un paso hacia atrás o hacia adelante en el menú Editar, o alternativamente pueden usar los atajos de teclado de Photoshop como Alt + Ctrl + Z, por ejemplo.

4. Coherencia y estándares

Photoshop mantiene un diseño y apariencia estándar cuando se trata de la barra de menú. También utilizan terminología comúnmente conocida como “Nuevo …”, “Abrir …”, “Guardar como …”, etc.

El menú Archivo en Photoshop muestra una variedad de opciones muy familiares.

5. Prevención de errores

Para evitar que los usuarios cometan errores, Photoshop proporciona una breve descripción o etiqueta de las herramientas cuando un usuario pasa el mouse sobre ellas para ayudar a asegurarse de que los usuarios estén usando la herramienta adecuada para la tarea en cuestión.

El usuario se desplaza sobre el icono de borrador y Photoshop muestra la etiqueta “Herramienta de borrador”.

6. Reconocimiento en lugar de recuerdo

Ya sea haciendo una selección en el menú de filtros artísticos o abriendo un nuevo archivo de imagen, Photoshop proporciona una vista de muestra para que los usuarios tomen la decisión correcta. Esto permite que el usuario reconozca visualmente lo que está buscando en lugar de tener que recordar el nombre o escribirlo para buscarlo. Quizás haya encontrado otros programas de edición de fotografías que le piden que recuerde y escriba el nombre del archivo en el que desea trabajar. De hecho, esto puede ser realmente difícil de recordar, ya que a menudo tiene el efecto de: 29412_09342.JPG.

El usuario puede reconocer visualmente la imagen de la puesta de sol por su miniatura y seleccionarla.

7. Flexibilidad y eficiencia de uso

Una de las muchas razones por las que los usuarios frecuentes adoran Photoshop es su flexibilidad y eficiencia. Los usuarios pueden utilizar su flexibilidad al organizar y agregar a su espacio de trabajo, así como hacer las cosas más eficientes al guardarlo para uso futuro.

Photoshop ofrece a los usuarios frecuentes la posibilidad de guardar su configuración de espacio de trabajo preferida.

8. Diseño Estético y Minimalista

La barra de herramientas en Photoshop solo muestra los íconos y está cuidadosamente colocada a un lado para ayudar a mantener el desorden al mínimo y mantener una estética minimalista.

La barra de herramientas de Photoshop es minimalista y evita el desorden al representar las herramientas solo con iconos.

9. Ayude a los usuarios a reconocer, diagnosticar y recuperarse de errores

Siempre que hay un error, Photoshop proporciona un diálogo que le permite al usuario saber qué salió mal y cómo solucionarlo.

En este mensaje de error por el uso indebido del sello de clonación por parte del usuario, Photoshop explica qué salió mal, el motivo y cómo debe proceder el usuario a partir de ahí.

10. Ayuda y documentación

Se puede acceder fácilmente a la ayuda y la documentación a través de la barra de menú principal. Desde allí, puede encontrar una amplia variedad de temas de ayuda y tutoriales sobre cómo aprovechar al máximo el programa.

La ventana muestra información sobre cómo crear imágenes cambiantes en el contexto de gráficos web. El usuario también puede ver una lista de temas en el menú lateral.

Diez pasos para mejorar la usabilidad, la utilidad y la conveniencia mediante la implementación de las pautas de diseño de la interfaz de usuario de Nielsen y Molich

Como diseñador, debe tener la capacidad de criticar los diseños propios y el trabajo de otros con un razonamiento bien fundamentado. La aplicación de las 10 reglas generales de Nielsen y Molich en la evaluación del diseño de la interfaz lo ayudará a reconocer cualquier problema potencial y lo guiará a usted y a su equipo para crear mejores experiencias para sus usuarios. Aquí hay una hoja de trabajo para que practique a medida que aprende la habilidad de reconocer si estas reglas se han aplicado o no y cuándo se han violado. Finalmente, es hora de mejorar el sitio web o la aplicación implementando aún más las 10 pautas.