Pautas de diseño de 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 facilidad de uso, la utilidad y el atractivo de sus diseños.

Las 10 pautas de diseño de interfaz de usuario de Nielsen y Molich

Jakob Nielsen, un renombrado consultor de usabilidad web y socio de Nielsen Norman Group, y Rolf Molich, otro destacado experto en usabilidad, establecieron una lista de diez pautas de diseño de interfaz 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 generales reiteran 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 muy 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 la 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 hará que los sistemas sean más fáciles de usar.

• Control y libertad del usuario. Ofrezca a los usuarios un espacio digital donde sea posible retroceder, incluso 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 ícono 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 los sistemas para que los posibles errores se mantengan al mínimo. A los usuarios no les gusta que los llamen para detectar y solucionar problemas, que en ocasiones pueden estar más allá de su nivel de experiencia. La eliminación o el marcado de acciones que pueden dar lugar a errores son dos posibles medios para lograr la prevención de errores.

• Reconocimiento en lugar de recuerdo. Minimice la carga cognitiva al mantener 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 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 surja 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 el de las preguntas de respuesta corta en un examen porque solo requiere que reconozcamos la respuesta en lugar de recordarla de nuestra memoria.

• Flexibilidad y eficiencia de uso. Con un mayor uso viene 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 y funciones de macro. Los usuarios deben poder personalizar o adaptar la interfaz para satisfacer sus necesidades, de modo que las acciones frecuentes se puedan lograr 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 limitados recursos de atención del usuario, lo que podría inhibir la recuperación de la memoria del usuario de información relevante. 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 a otro contenido.

• Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores. Los diseñadores deben asumir que los usuarios no pueden entender la terminología técnica, por lo tanto, los mensajes de error casi siempre deben expresarse en un lenguaje sencillo para garantizar que nada se pierda 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, puede ser necesaria la documentación. Cuando los usuarios requieran ayuda, asegúrese de que sea fácil de localizar, específica para la tarea en cuestión y redactada de manera que los guíe a través de los pasos necesarios para encontrar 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 la creación de excelentes experiencias de usuario, generalmente pienso en términos de tres cosas: facilidad de uso, utilidad y conveniencia”.

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

Descubra cómo Adobe integra las diez directrices de diseño de interfaz 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 directrices de interfaz de usuario de Nielsen y Molich pueden conducir al éxito de una empresa. Uno de sus productos más populares, Adobe Photoshop, que es un editor de gráficos de trama, exhibe las características de una interfaz de usuario bien diseñada que refleja estas pautas.

Echaremos un vistazo más de cerca a cómo Adobe Photoshop refleja cada una de estas pautas para inspirarlo a mejorar la facilidad de uso, la utilidad y el atractivo de sus propios diseños mediante la incorporación de 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 al mostrarle 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 que la capa se representa como arrastrada físicamente dentro del espacio.

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 cuando 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 Sobreexponer y la herramienta Subexponer 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 control en cada paso del camino. A medida que el usuario realiza cambios en una imagen o agrega varios efectos artísticos, puede retroceder rápida y fácilmente si comete un error, por ejemplo.

4. Consistencia y Estándares

Photoshop mantiene un diseño y una 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.

5. Prevención de errores

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

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 fotos 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 es algo como: 29412_09342.JPG.

7. Flexibilidad y Eficiencia de Uso

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

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.

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.

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.

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

Como diseñador, debe tener la capacidad de criticar sus propios diseños y el trabajo de otros con un razonamiento bien fundamentado. La aplicación de las 10 reglas generales de Nielsen y Molich para evaluar el diseño de la interfaz lo ayudará a reconocer cualquier problema potencial y lo guiará a usted y a su equipo en la creación de 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.

Descargar PDF aquí.

el llevar

Cuando siga las 10 pautas de interfaz de usuario de Nielsen y Molich, diseñará teniendo en cuenta la facilidad de uso, la utilidad y el atractivo. Al igual que los diseñadores de empresas exitosas como Apple, Google y Adobe, podrá respaldar sus decisiones de diseño con heurísticas bien investigadas y confiar en la creación de diseños que sean útiles y hermosos. Para practicar el reconocimiento de estas 10 reglas generales, continúe y realice el ejercicio descrito en el archivo adjunto de la sección anterior.

Referencias y dónde obtener más información

Para encontrar más información sobre ‘Mejorar el poder explicativo de las heurísticas de usabilidad’ de Jakob Nielsen, por favor ver

Curso: Patrones de diseño de interfaz de usuario para software exitoso

Imagen del héroe: Barry Schwartz. Flickr, CC BY-NC 2.0