Las reglas de oro del diseño de interfaces (2013)

Las ocho reglas de oro del diseño de interfaces

• Buscar la consistencia: en situaciones similares debe requerirse la misma secuencia de acciones, y deben usarse de forma uniforme los mismos términos en prompts, menús y pantallas de ayuda, así como colores, layouts, uso de mayúsculas y minúsculas, tipografías, etc.
• Buscar la usabilidad universal: se deben reconocer las necesidades de distintos usuarios y diseñar considerando desde principiantes hasta expertos, grupos de edad, discapacidades, diferencias internacionales y diversidad tecnológica.
• Ofrecer retroalimentación útil: debe existir retroalimentación de la interfaz para todas las acciones del usuario; para acciones frecuentes y menores basta una respuesta simple, mientras que para acciones poco frecuentes e importantes se requiere una respuesta más profunda.
• Brindar cierre mediante diseño interactivo: las secuencias de acciones deben organizarse en grupos, y mediante retroalimentación sobre la finalización de cada grupo se debe dar al usuario una sensación de logro y alivio.
• Prevenir errores: la interfaz debe diseñarse para evitar que el usuario cometa errores graves y, si ocurren, debe ofrecer instrucciones de recuperación simples y específicas.
• Permitir deshacer acciones fácilmente: siempre que sea posible, las acciones deben poder revertirse para animar a los usuarios a explorar nuevas opciones sin miedo a equivocarse.
• Mantener el control del usuario: los usuarios con experiencia quieren que la interfaz responda a sus acciones y que no haya cambios en los comportamientos que ya conocen; sienten desagrado cuando es difícil obtener la información necesaria o no logran el resultado deseado.
• Reducir la carga de la memoria de corto plazo: como la cantidad de información que las personas pueden procesar en la memoria de corto plazo es limitada, deben evitarse las interfaces en las que el usuario tenga que recordar información de una pantalla para usarla en otra.

La opinión de GN⁺

• Este texto presenta los principios básicos del diseño de interfaces propuestos por Ben Shneiderman, y estos principios ofrecen un buen punto de partida para diseñadores de móvil, escritorio y web.
• Estos principios para mejorar la experiencia de usuario ayudan a que las personas entiendan mejor el sistema y lo usen de manera más eficiente.
• Este texto ofrece lineamientos útiles que los ingenieros de software principiantes pueden consultar al diseñar interfaces fáciles de usar.

[GN⁺]

Comentarios de Hacker News

• El rendimiento no forma parte del diseño de UI, pero suele pasarse por alto. Una UI con mal rendimiento viola todos los principios de diseño.

  • Por ejemplo, los smart TV Android de Sony se ven bien, pero la UI es tan lenta que resulta difícil usarlos.

• Una UI inestable y que cambia con frecuencia también viola la mayoría de los principios. Los smart TV son especialmente malos en este aspecto: el diseño de la pantalla de inicio y los íconos de las apps cambian seguido sin motivo.

• Los íconos sin etiquetas, a veces ni siquiera con tooltip, son un problema cada vez peor. Si tienes que buscar en Google para saber qué hace un botón, el diseño de UI es malo.

• Explicación de por qué la consistencia es importante.

  • No se trata de perseguir detalles específicos como una paleta de colores limitada o elegir tipografías discretas.
  • Se trata de permitir que el usuario pueda usar el software con soltura.
  • Microsoft Office y (Neo)Vim no son ejemplos sobresalientes de UI, pero son singulares en términos de estabilidad.

• Es importante comunicar con claridad el modelo conceptual al usuario.

  • Si no entiendes el modelo conceptual del producto, siempre te sentirás confundido aunque los íconos estén bien etiquetados.
  • La UI debe diseñarse de modo que el usuario pueda inferir el modelo conceptual explorando la interfaz.

• Cuando el usuario introduce un código postal incorrecto, se le debe guiar para corregir solo la parte con error en lugar de volver a llenar todo el formulario de nombre y dirección.

  • Esto también debería aplicarse al completar formularios de varias páginas.
  • Las acciones incorrectas no deberían cambiar el estado de la interfaz, o bien debería haber instrucciones sobre cómo restaurarlo.

• En lugar de desactivar elementos del menú, debería mostrarse un mensaje de error que explique por qué el comando no está disponible cuando el usuario haga clic en él.

  • Tener que averiguar por qué un comando fue desactivado puede ser frustrante para el usuario.

• Las 10 heurísticas de usabilidad de Nielsen ofrecen buenas guías para el diseño de UI.

  • Incluyen visibilidad del estado del sistema, correspondencia con el mundo real, control y libertad del usuario, consistencia y estándares, prevención de errores, reconocimiento antes que memoria, flexibilidad y eficiencia de uso, diseño minimalista, reconocimiento y recuperación de errores, ayuda y documentación.

• Desde 2013, la consistencia empezó a desmoronarse, y con la aparición de las UI basadas en CSS, cada sitio y app implementó su propia UX.

  • Volvió la "navegación de carne misteriosa", que la comunidad de UX ya había criticado cuando Flash estaba de moda a inicios de los 2000.

• Es un error particularmente grave que, en lugar del elemento que el usuario intenta seleccionar, aparezca de repente otra cosa y haga que seleccione algo por error.

• Los elementos de la interfaz no deberían moverse inesperadamente después de que esta se haya renderizado.

  • Google es especialmente culpable de este problema, aunque no es el único caso.

• Discusión sobre reglas de oro de una utopía evidente.

  • La mayoría de los desarrolladores han trabajado en interfaces que rompen estas reglas con frecuencia.
  • No es porque no las entiendan, sino porque en ese momento el costo era demasiado alto.
  • Por ejemplo, la función de deshacer solo es posible cuando las estructuras de datos subyacentes de la aplicación fueron construidas teniendo eso en cuenta. Prevenir errores también es difícil porque cuesta definir con precisión qué constituye un error, y dar retroalimentación perfecta en el lenguaje del usuario es aún más complejo.