UX Design: principios y leyes que todo diseñador debería conocer

¿Cuándo comenzó esto del UX Design?

Cinco anillos prominentes. Azul, amarillo, negro, verde y rojo. Es uno de los símbolos más reconocibles a nivel mundial, un sello distintivo del buen diseño. Sin embargo, diseñar un logotipo olímpico no es un «paseo por el parque».

Lograr el delicado equilibrio entre la ciudad anfitriona y el jolgorio de los juegos es un acto difícil, aunque no inalcanzable. El logotipo de los Juegos de Tokio de 1964, diseñado por Yusaku Kamekura y Masaru Katsumi, es un ejemplo estelar de diseño atemporal.

¿Por qué funcionó el logotipo?

Entre otras razones, incorporó dos mandamientos cruciales en los principios de diseño de Dieter Ram (volveremos a esto): (a) El buen diseño es duradero, y (b) El buen diseño es la menor cantidad de diseño posible.

¿Quién no conoce la «tierra del sol naciente»? por mencionar otro gran ejemplo.

En todo el mundo, el Allianz Arena en München, Alemania, tiene capacidad para 75.000 espectadores. Pero, eso no es lo único que es impresionante al respecto. Sede de las ceremonias de apertura de la Copa del Mundo de 2006, se considera una de las mejores estructuras arquitectónicas. El diseño del estadio enfatiza la forma de caminar de los fanáticos hacia el estadio, como si fuera una procesión.

Aunque tiene la forma de un cráter, las escaleras en el exterior conducen a una gran pendiente hacia el acceso, por lo que parece un enjambre de hormigas regresando a casa desde una vista aérea. Miles de hinchas caminan hombro con hombro, la adrenalina es alta y se respira solidaridad. El exterior del estadio también cambia de color. Cada aspecto del estadio es una clase magistral de diseño innovador.

Esto quiere decir que todos los diseños deben tener un propósito.

Pero, antes de llegar allí, volvamos a las raíces del diseño en lo que se ha convertido el UX Design (diseño de experiencia del usuario) ahora. El objetivo siempre ha sido el mismo: crear una experiencia fácil de usar.

Es la base de todo diseño, ya sea en arte, arquitectura o espacios digitales.

Una breve historia del diseño

Según un artículo publicado por Career Foundry, podemos ir al año 6000 A.C. para comenzar nuestro viaje en el diseño. Con el concepto de Feng Shui implementado en los espacios habitables, la idea era mover los objetos para hacer la vida armoniosa y óptima. Elegir los colores correctos también es una parte intrínseca del Feng Shui, ya que afecta el estado de ánimo de una persona.

No es muy diferente de diseñar cualquier interfaz de usuario, ¿verdad?

Para el año 500 A.C., los alfabetos habían tomado forma concreta: un hito en el diseño y un gran avance en la comunicación. El diseño moderno, la eficiencia y el propósito del diseño tal como lo vemos ahora quizás comenzaron con Toyota. Puso a la gente y a los trabajadores al frente, fomentando un estilo de vida saludable, un salario digno, incorporando activamente sugerencias y comentarios.

Pusieron a sus empleados en el centro, un paso crítico en la definición de la experiencia del usuario.

¿El UX Design finalmente había visto la luz del día? Tal vez, lo hizo.

De los años 70 hasta Apple

Sin embargo, el centro de investigación PARC de Xerox merece una mención especial aquí. El mouse y la interfaz gráfica fueron bendiciones que el centro otorgó al mundo y marcaron el camino para la computación personal del futuro que hemos llegado a aceptar como una necesidad en la actualidad.

Antes de que el mundo confiara en Siri o se acostumbrara al tono de llamada «Marimba», Macintosh lanzó la primera PC de Apple con una interfaz gráfica de usuario. Una pantalla integrada y un mouse. Luego, en 2001, los adolescentes encontraron la única forma de mantenerse «cool» jugando con la rueda de clic del iPod, hasta que aterrizaron en «Wherever You Will Go» de The Calling.

Fue una época de gran UI (Interfaz de Usuario), incluso mejor UX y de música increíble.

En 1995, Donald Norman, un científico cognitivo de Apple, acuñó el término «Experiencia de usuario». Allí, trabajó como Arquitecto de Experiencia de Usuario, fue el primero que hubo.

En pleno 2022, el término se ha convertido en mucho más que solo lo que «se ve bien».

Es un fenómeno que cambia de forma y se ve diferente cada día. El enfoque ahora está en la experiencia del usuario personalizada y localizada con una gran dosis de realidad aumentada, inteligencia artificial, visualización de datos, elementos 3D y diseños receptivos.

Ahora, vayamos al meollo de este post.

Principios de UI / UX Design

Pareto

¿Alguna vez has oído hablar de la regla 80/20: comer el 80 % del pastel y dejar el resto para el cónyuge? No, desafortunadamente, esa no. 🙂

El principio establece que el 80% de los efectos de cualquier proceso resultan del 20% del esfuerzo que se ha invertido en él. Sin embargo, es posible que desees verlo de forma ligeramente diferente en el diseño de UX. Suponiendo que el 80% son tus usuarios y el 20% son sus características.

En pocas palabras: simplifica las interfaces. Deshazte de los volantes. Elimina botones o funciones que no contribuyan al resultado.

Gestalt

O la psicología de la Gestalt son «leyes de la percepción humana que describen cómo los humanos agrupamos elementos similares, reconocemos patrones y simplificamos imágenes complejas cuando percibimos objetos».

Para los diseñadores, es crucial comprender e implementar este principio para organizar el diseño de cualquier interfaz y hacerla estéticamente agradable.

Seis leyes comunes entran bajo el Principio Gestalt:

• Cierre (Reificación)
  La mente humana está conectada a espacios completos en formas incompletas percibidas. Por lo tanto, automáticamente llenamos los espacios entre los elementos, para que la mente pueda aceptarlos como una entidad singular o completa.
  
  Los diseñadores nos basamos en gran medida en esta ley para crear logotipos con espacios negativos o hacer que los espacios negativos no parezcan tan estériles.
  
• Región común
  Nuestro cerebro también agrupa elementos que caen en una misma región cerrada. Para aplicar esta ley, los diseñadores colocamos deliberadamente objetos relacionados en la misma área cerrada para mostrar la diferencia con otro conjunto de áreas cerradas.
  
  Una forma excelente de crear una región común es colocar elementos dentro de un borde.
  
• Continuación
  Ya sea con líneas, curvas o una secuencia de formas, nuestros ojos tienden a seguir un camino natural. Una ruptura en estos elementos puede ser discordante: un aprendizaje clave para un diseñador. Puede alejar inmediatamente a un usuario. La continuación también afecta los espacios positivos y negativos en el diseño.
  
  El objetivo es crear un flujo que sea fácil de navegar.
  
  Al diseñar un sitio web de comercio electrónico, asegúrate de que la navegación siga una ruta lineal. En el ejemplo que se muestra a continuación, uno puede categorizar y diferenciar rápidamente entre navegación primaria y secundaria. El hogar, el perfil, la tienda, el contacto y la ayuda se destacan rápidamente como un grupo, mientras que los hombres, las mujeres y los niños son otro.
  
• Figura/Tierra (Multi-estabilidad)
  
  ¿Qué ves primero? ¿Un jarrón o dos caras? Lo que sucede aquí se llama el principio de estabilidad múltiple. La imagen se puede interpretar de dos maneras, pero nuestra mente solo puede interpretar una vista de una sola vez. Debido a que está fuera de nuestro control consciente, no podemos predecir qué y quién verá primero el jarrón o las dos caras.
  
  Ante un dilema como este, nuestra mente es rápida para combatir la incertidumbre y buscar elementos sólidos y estables. Pero, en la mayoría de los casos, a menos que una imagen sea verdaderamente abstracta, el primer plano llama nuestra atención primero.
  
  En el UX Design, este principio se utiliza en paneles de navegación, modales y cuadros de diálogo.
  
• Proximidad (Emergencia)
  
  Es la relación espacial entre elementos dentro de un marco percibido o real. Para seguir esta regla, coloca las cosas relacionadas cerca unas de otras y las cosas no relacionadas lejos unas de otras.
  
  También puedes aplicar la misma regla en el contexto del texto. Las oraciones deben agruparse en párrafos y separarse debajo y arriba por espacios en blanco. Los espacios en blanco alrededor de los encabezados marcan el comienzo de un nuevo tema o párrafo.
  
• Similitud (Invarianza)
  
  Este principio establece que nuestro cerebro encuentra similitudes y diferencias en todo. Por eso es fácil convertir algo en el centro de atención en una multitud de objetos similares. Imagina una pared llena de cuadrados negros de diferentes tamaños y un solo cuadrado rojo. Sin darte cuenta, creaste dos grupos en tu cabeza.
  
  Comprender los principios de diseño proporciona a los diseñadores una buena ventaja en la actividad profesional diaria. Pero, hay 10 mandamientos de diseño de Dieter Rams que un diseñador también debería conocer.

Los 10 mandamientos de Dieter Ram para un buen diseño

El buen diseño es…

1. Innovador: los desarrollos en tecnología van de la mano con los del diseño de UI y UX, se complementan entre sí. Como resultado, siempre hay lugar para un diseño innovador con nuevas ofertas en tecnología, especialmente cuando se diseña para las masas. Sin embargo, el diseño innovador no tiene que depender únicamente de la tecnología. También puede beneficiarse de las tendencias cambiantes en el comportamiento de los usuarios.
   
2. Hace que un producto sea útil: el único objetivo del diseño es cumplir un propósito práctico. Cuando un diseño cumple con criterios funcionales, psicológicos y estéticos, enfatiza la utilidad de un producto.
   
3. Estético: los seres humanos somos criaturas visuales y hemos vivido con señales visuales desde el principio de los tiempos. Para encontrar comida, refugio, pareja y otro montón de cosas. Entonces, al diseñar un producto, la calidad estética es parte integral de su utilidad y éxito.
   
4. Hace que un producto sea comprensible: si debes explicar un producto y lo que hace; puedes dar por perdida la batalla. Un buen diseño describe la estructura del producto, ya que se presenta cuidadosamente en el producto mismo. Debe ser auto-explicativo e intuitivo.
   
5. Discreto: en el UX Design, los productos rara vez ocupan mucho espacio físico. Sin embargo, un buen diseño de UX se incorpora a la perfección a nuestra vida diaria. El diseño debe ser neutral y sentirse personalizado.
   
6. Honesto: si su diseño intenta manipular al consumidor, debe volver a la mesa de dibujo y comenzar de nuevo. Un buen diseño de interfaz de usuario no tiene nada que ocultar; es transparente.
   
7. Duradero: el buen diseño no intenta estar a la moda; se mantiene clásico y nunca parece anticuado. En cambio, se destaca como fresco incluso en un mundo en constante cambio.
   
8. Minucioso hasta el último detalle: al diseñar un producto, un diseñador debe ponerse en el lugar del usuario. Comenzar un proyecto forzando una solución no es el camino a seguir. En su lugar, concéntrate en todos los puntos débiles y no dejes nada fuera. Practica el cuidado y la precisión en cada paso del proceso de diseño.
   
9. Respetuoso con el medio ambiente: ¿qué puedes hacer como diseñador de interfaz de usuario para que tus diseños sean más respetuosos con el medio ambiente? Para empezar, puedes elegir un servidor web ecológico, potenciar tu sitio web con una fuente de energía verde y crear diseños simples. Todo lo cual ayudará a reducir las emisiones de carbono de tu sitio web.
   
10. La menor cantidad de diseño posible: siempre reduce a lo básico y mantén lo que es crucial. Cuanto más desorden, más confundido estará el usuario. Concéntrate en reducir elementos y botones, ya que te ayudará a concentrarte en aspectos esenciales y cosas que sí importan.

¿Encontrar el truco? Solo hay una última cosa que cubriremos ahora. Presta atención, es importante.

Leyes de UX que todo diseñador debe conocer

Hick

La ley de Hick establece que cuantas más opciones haya, más mimado será el usuario. Esto aumenta directamente el tiempo de toma de decisiones, ya que están abrumados por la complejidad de las opciones. Para incorporar la ley de Hick en tu diseño, divide las tareas complejas en pasos más pequeños y minimiza las opciones cuando los tiempos de respuesta sean críticos.

A veces, el usuario necesita un poco de ayuda. Resalta las opciones como recomendaciones para ayudar a facilitar su viaje de usuario. Sin embargo, ten cuidado con lo que estás sustrayendo o eliminando: puedes perder elementos cruciales.

Fitt

Por su parte, la ley de Fitt simplifica aún más el proceso para los usuarios. Piénsalo de esta manera: el usuario quiere dar en el blanco de un tiro, pero la única diferencia es que el centro del objetivo no debe ser un pequeño punto rojo. Debe ser lo más grande posible.

Los objetivos táctiles deben ser lo suficientemente grandes para que los usuarios puedan seleccionarlos con precisión. Asegúrate de que haya suficiente espacio entre el objetivo táctil y otros botones para que los movimientos sean rápidos, deliberados y precisos.

Miller

En promedio, la ley de Miller establece que una persona solo puede retener siete elementos en su memoria de trabajo. Supón que estás diseñando una página de navegación: bombardeas al usuario con más de siete elementos y lo más probable es que no recuerde la ubicación de la que llegó.

Esta es a menudo la razón por la que se agrupan servicios o productos con varias opciones para reducir la carga de memoria del usuario.

Jakob

La ley de Jakob establece que los usuarios a menudo proyectarán expectativas de otros sitios/apps en el tuyo. Si prefieren un sitio web por cualquier motivo, disfrutarán de pasar tiempo en él. Cuando ingresen a tu sitio, esperarán una sensación similar de estética y satisfacción que ofrece su sitio preferido.

Si bien puede parecer contrario a la intuición, quizá sea una buena idea rondar los puntos de referencia ya establecidos y no intentar crear algo abiertamente único.

Incluso cuando está armado con todo el conocimiento del mundo, es probable que ocurran errores. Al diseñar para UX, los diseñadores solemos cometer los siguientes errores. Con todo lo que hemos aprendido, averigüemos cómo podemos evitarlos.

Errores en el UX Design que debemos evitar

Inconsistencias

La inconsistencia es un gran desvío para todos, ya sea en la vida o en el diseño de UX. Por ejemplo, al utilizar líneas rectas como divisores de iconos, elementos o segmentos, asegúrate de que las líneas sean gruesas o finas. Si te has decidido por una fuente, incorpora tipografías de la misma familia en todo el producto. Cuando cada elemento dentro de tu diseño crea lo que parece ser un patrón consistente, la inconsistencia rompe el patrón. La anomalía se destaca de una manera discordante.

Líneas borrosas entre los botones principal y secundario

No delimitar los botones primarios y secundarios es una buena manera de molestar a un usuario, el mayor pecado que puede cometer un diseñador. Los botones primarios y secundarios existen porque tienen un propósito específico. Resalta los botones primarios en un color fuerte y agrégales más peso visual.

Falta en la jerarquía del texto

La falta de jerarquía de texto también puede romper instantáneamente tu diseño. Piensa en las notas de estudio que tomaste en la escuela mientras te preparabas para un examen. Pusiste en mayúsculas el tema principal, escribiste sobre él para que pareciera negrita e incluso lo marcaste con un resaltador amarillo fluorescente. Los fragmentos importantes siguieron como subtítulos y luego viñetas. Una clasificación clara de la información más crítica a la que menos se destacó de manera más efectiva. Aplica prácticas similares para el diseño de UX y asegúrate de dejar que tu texto respire con el espacio adecuado.

No centrarse en los iconos

Una mala iconografía puede hacer que un diseño o producto potencialmente exitoso sea olvidado instantáneamente. ¿Por qué los íconos son importantes en el diseño de UX? Los usuarios los reconocen al instante y les ayuda a navegar mejor.

Lo más importante: los iconos ahorran espacio. El propósito de un ícono es comunicar un concepto rápidamente. Por lo tanto, es mejor ceñirse a figuras e imágenes que resuenen con la acción que provoca. Los íconos de estilo de línea, dibujados a mano y multicolores están de moda en 2022.

Imágenes de baja calidad

Estamos en 2022: las imágenes lo son todo. No hay excusa para que te conformes con imágenes de baja calidad. Tu usuario definitivamente no lo hará. Mientras lo hace, busca imágenes que hablen sobre tu servicio o producto y encuentra solo imágenes de alta calidad. Las fotos manipuladas y falsas pueden llevarte a un lío, así que busca fotos realistas y creativas.

Tu turno.

Ahora que tienes este post condensado a tu disposición, ¿te convertirás en un mejor UX Designer? Con toda seguridad, serás uno mejor que ayer. Si bien seguir las leyes y los principios es crucial para comprender la experiencia del usuario y la mejor manera de diseñar para el usuario, también es seguir una metodología, es aquí donde el Design Thinking aparece en el horizonte, pero de esto escribiré en un próximo post.