1.3 : Principio de coherencia y estándares en el diseño de interfaces de usuario
Aprenda a diseñar teniendo en cuenta la coherencia y los estándares y comprenda las razones por las que es importante incorporarlos a su trabajo. Derivado de las diez directrices de interfaz de usuario (UI) de Jakob Nielsen y Rolf Molich, la “coherencia y los estándares” son evidentes en muchos de los productos de uso generalizado creados por algunas de las empresas más exitosas. Productos como Adobe Photoshop, lanzado originalmente en la década de 1990, y Google Gmail, lanzado a mediados de la década de 2000, son solo algunos de los productos ampliamente populares que exhiben esta importante regla empírica. Este artículo le enseñará cómo reconocer la coherencia y los estándares y explicará por qué son importantes en el diseño de la interfaz de usuario.
Dos razones clave para la coherencia y los estándares en el diseño de la interfaz de usuario
Al diseñar la interfaz de usuario, es importante tener en cuenta las interacciones que tienen lugar entre la cognición humana y la pantalla para la que está diseñando. Facilitar las cosas a sus usuarios significa no obligarlos a aprender nuevas representaciones o conjuntos de herramientas para cada tarea. Reducir la duración del proceso de pensamiento eliminando la confusión también es una apuesta segura cuando se trata de mejorar la experiencia del usuario.
1. Reducir el aprendizaje
La coherencia limita el número de formas en que se representan las acciones y operaciones, lo que garantiza que los usuarios no tengan que aprender nuevas representaciones para cada tarea. Además, el establecimiento de normas de diseño como las siguientes convenciones de plataforma permite a los usuarios completar nuevas tareas sin tener que aprender un conjunto de herramientas completamente nuevo. Esto puede parecer un concepto simple, pero hay muchos ejemplos que exhiben una falta de coherencia en sus diseños. Un ejemplo que retrata este problema es el sitio web de Xfinity de Comcast Corporation, una empresa estadounidense de medios de comunicación. En su sitio web, el menú secundario no solo es inconsistente casi cada vez que el usuario hace clic en otra página, sino que también es inconsistente para el menú principal. Echemos un vistazo y comparemos las tres páginas diferentes del sitio web: página de inicio, My Xfinity y TV.
Esta es la página de inicio del sitio web de Xfinity. Observe cómo el área anotada que resalta las barras de menú principal y secundaria diferirá a medida que el usuario haga clic en otras páginas.
Esta es la página de TV del sitio web de Xfinity. Lo que lo hace confuso para el usuario es cómo los colores, el diseño y los estilos de fuente se ven diferentes de la página de inicio.
Esta es la página My Xfinity del sitio web de Xfinity. Las tres páginas examinadas anteriormente tienen colores, diseños y estilos de fuente muy diferentes en su menú de navegación. Estas diferencias lo hacen confuso y desorientador para el usuario, ya que ya no se siente como un sitio web, como si fueran tres empresas diferentes.
2. Elimina la confusión
Los usuarios tienden a aplicar reglas que han experimentado fuera de su sitio web o producto, incorporando un conjunto de sus propias expectativas. Sabiendo eso, debemos ser conscientes de si estamos causando confusión y alienación cuando nos desviamos de los estándares y convenciones de diseño. Además, los usuarios no deberían tener que perder tiempo preguntándose si diferentes palabras, interacciones o acciones realmente significan lo mismo dentro del contexto de su producto. La confusión ocurre cuando las personas no pueden “juntar” la información y, a veces, les impiden lograr algo. Cuando el usuario no puede lograr su objetivo, es comprensible que se sienta enojado o frustrado. No es ningún secreto que la confusión generalmente causa frustración y la frustración conduce a una mala experiencia del usuario. Por lo tanto,
Cinco formas de lograr la coherencia en su trabajo
Hay muchos aspectos para lograr la coherencia dentro de su interfaz de usuario. Aquí hay 5 cosas que puede observar para mejorar la coherencia en sus diseños:
1. Su elección de idioma
El lenguaje que usa tanto en el texto de marketing como en la redacción utilizada a lo largo del flujo de usuarios no solo puede influir en la percepción que tiene el usuario de su producto, sino que también puede generar confusión cuando usa una terminología diferente para representar lo mismo. Esto se refiere no solo a los términos que elija, sino también al tono en el que transmite su mensaje.
Asustar a su usuario con un mensaje de error serio y amenazante cuando navega por un sitio de comercio electrónico que muestra un tono amigable en general seguramente matará una buena experiencia de usuario, por ejemplo.
Cuando las cosas significan lo mismo o realizan la misma operación, deben representarse de la misma manera, como es el caso de la función de correo electrónico de Google, Gmail. Según el estilo de organización de las aplicaciones de correo electrónico del cliente, las carpetas de Gmail se denominan “Bandeja de entrada”, “Borradores”, “Correo enviado”, etc. El idioma utilizado para estas carpetas muestra familiaridad y coherencia para cualquiera que haya utilizado aplicaciones de correo electrónico en el pasado.
Las etiquetas de carpeta en la versión 2011 de Gmail muestran una variedad de opciones familiares. El lenguaje utilizado para estas carpetas muestra coherencia, ya que utiliza las etiquetas “Bandeja de entrada”, “Borradores” y “Spam”, todos los cuales son familiares para cualquiera que haya utilizado aplicaciones de correo electrónico en el pasado.
2. Aplicar los elementos de la interfaz de usuario como se definieron originalmente
Los elementos de la interfaz de usuario que se utilizan habitualmente, como ventanas de mensajes, barras de menús, iconos, barras de desplazamiento y botones de opción, son elementos gráficos que suelen ser coherentes y tienen representaciones que los usuarios comprenden ampliamente. Por ejemplo, los botones de opción están diseñados para usarse cuando solo se permite una opción. Las casillas de verificación, por otro lado, deben usarse solo cuando al usuario se le permite más de una opción. En muchos sentidos, podemos ver cómo HTML5 superó a la tecnología Flash a finales de 2014. Una de las razones es posiblemente la facilidad de aplicación y uso que los desarrolladores, diseñadores y usuarios pueden disfrutar como resultado de la coherencia y los estándares de HTML5 en definir sus elementos de interfaz de usuario.
Un mal ejemplo de coherencia en la elección de los elementos de la interfaz de usuario aparece en la sección de comentarios que solía tener el sitio web de noticias de la BBC en el pasado. Los comentarios de los usuarios con la calificación más alta se indican con una flecha que apunta al sur, pero los usuarios deben hacer clic en la flecha que apunta al norte para aumentar la calificación de los comentarios. Usar una flecha que apunta al sur para representar los comentarios mejor calificados tampoco es intuitivo; los números crecientes suben, no bajan. Cuando los usuarios escanean la sección de comentarios de una página web, pueden simplemente actuar de acuerdo con las flechas, sin leer las etiquetas de acción, lo que puede inducir selecciones incorrectas.
No utilizar las representaciones visuales de uso común obligará al usuario a interactuar conscientemente con la interfaz de usuario de una manera incómoda, lo que reduce la velocidad a la que podría estar navegando y realizando las tareas deseadas.
3. Tenga en cuenta varias convenciones bien establecidas al decidir el diseño.
Sin duda, es discutible si un diseñador debería “copiar” cómo otras personas diseñan sus sitios web o aplicaciones. Sin embargo, cuando diseña teniendo en cuenta la perspectiva y la cognición del usuario, es importante comprender que los seres humanos tienen una memoria sólida para saber dónde se ubican visualmente las cosas en la pantalla. Debe aprovechar esta característica reservando ubicaciones de uso común para varios elementos gráficos, como tener el logotipo en la parte superior izquierda, el campo de búsqueda en la parte superior derecha, el icono de salida en la parte superior derecha, etc.
Tanto Microsoft como Apple colocan su logotipo en la parte superior izquierda y el campo de búsqueda en la parte superior derecha de sus sitios web. Esta forma de coherencia en el diseño ayuda a los usuarios a sentirse menos desorientados cuando navegan por un sitio nuevo y desconocido.
4. Diseñe para las expectativas de su usuario
Asegúrese de tener las características y funcionalidades que los usuarios esperarían ver en su sitio. Por ejemplo, el sitio de una aerolínea debe tener un sistema de reserva de boletos, mientras que un sitio para compartir música debe tener un reproductor multimedia.
Obviamente, se espera que un sitio web para compartir videos como YouTube tenga un reproductor de video. Este es un gran ejemplo de coherencia en el sentido de que las características y la funcionalidad del sitio son compatibles con lo que espera el usuario.
5. Cree elementos visuales coherentes en todo su sitio
Asegúrese de que los elementos visuales sean consistentes en todo su sitio. El contenido, los elementos de la interfaz de usuario, las fuentes, los fondos y los colores deben estar en armonía y sentirse consistentes en cada punto de contacto. Como se mencionó anteriormente, apegarse a las convenciones técnicas que existen en forma de HTML5 y CSS3 es una forma de mantener la coherencia. Mientras tanto, tener una guía de marca y estilo a seguir ayuda cuando se enfrentan a decisiones de diseño como colores y fuentes.
Un ejemplo de una guía de estilo y un manual de marca diseñado para la empresa ‘Goodnyt’. Tener un manual de estilo y marca puede ayudarlo a asegurarse de que sus elementos visuales sean consistentes en todo su sitio.
Un mal ejemplo de coherencia en la elección de colores y fuentes se puede ver en la versión 2013 de la interfaz de usuario móvil de Gmail de Google. Aunque se puede argumentar que el ‘significado’ no se ve afectado en este caso, es innegable que la experiencia del usuario casi siempre empeora como resultado de las extrañas diferencias en los elementos visuales entre pantallas.
Una captura de pantalla de la interfaz de usuario móvil de la aplicación Gmail cuando se lanzó por primera vez en 2013 muestra la inconsistencia en la elección de cuadros de colores y estilos de fuente.