Piensa menos. Diseña mejor.

Promover un mejor flujo de trabajo en el diseño de la interfaz de usuario a través de procesos de pensamiento y toma de decisiones manejables.

Una interfaz de usuario bien diseñada es el resultado de una serie de decisiones clave que no solo hacen que una experiencia sea intuitiva, sino también estéticamente agradable para el usuario. Al agilizar el proceso de toma de decisiones, puede permitir un flujo de trabajo más fácil y una mayor probabilidad de producir el resultado óptimo.

Cuantas más posibilidades hay en el proceso de diseño, más pensamiento se requiere para ejecutar y delicadeza.

El psicólogo estadounidense Barry Schwartz escribió en The Paradox Of Choice que eliminar las elecciones puede reducir en gran medida la ansiedad. Argumentó que deberíamos tener estándares y criterios, pero no preocuparse por la posibilidad de que haya algo mejor. Fue en el contexto de los consumidores, pero creo que también se aplica a las decisiones de diseño.

La estrategia de maximizar es no ser un perfeccionista, sino tomar las decisiones más favorables disponibles que colectivamente creen la experiencia óptima.

1. Variables limitantes

Si consideramos todas las variables potenciales para producir un concepto de alta fidelidad, y puede haber muchas, queda claro que necesitamos limitarlas y definirlas desde el principio. Reducir la cantidad de opciones disponibles hará que sea más fácil ser decisivo.

Con la experiencia, es más fácil predecir cómo limitar ciertos grupos de variables tiene un efecto multiplicador a lo largo de una composición.

La reducción de opciones no se correlaciona con la reducción de la originalidad. Nuestra suposición es que la creación de conceptos en torno a reglas predefinidas es una limitación, pero como diseñadores podemos establecer nuestras propias reglas y tener el control total de su formulación.

Escala y espaciado

Cada faceta del diseño de la interfaz de usuario debe girar en torno a un sistema que promueva el ritmo y ayude a mantener la consistencia en la escala y el espacio a medida que crece un proyecto. Uno de esos sistemas que me encanta usar es la escala modular, que puede facilitar una escala desde cualquier proporción dada para medir o establecer el tamaño de un elemento o espacio negativo en una composición.

Una vez que elegimos una relación, la escala modular puede facilitar la definición de escala y espaciado

Si bien puede reducir las variables en cuadrículas, tipografía, espaciado vertical y las dimensiones generales de un diseño a un nivel manejable, también proporciona una estética y un ritmo agradables. Diseñar interfaz de usuario es mucho más fácil.

Rejillas

Los sistemas de cuadrícula son excelentes para restringir la forma en que se organiza el contenido dentro del plano horizontal y una obviedad en lo que respecta a la interfaz de usuario. Sin embargo, una cuadrícula a menudo se elige sin pensarlo demasiado, para que sea una talla única. Lo que la mayoría de los diseñadores no se dan cuenta es que es mejor crear un sistema de cuadrícula basado en el contenido.

Un sistema de cuadrícula reducirá las variables en el diseño

Esto significa, idealmente, tener una comprensión clara de los escenarios de contenido de antemano, de modo que dibuje una imagen de cómo servir mejor el contenido de una cuadrícula particular. Piense en las limitaciones comerciales con los activos preexistentes y las guías de marca, como un logotipo que tiene reglas y requisitos de espacio específicos, o tal vez anuncios con unidades fijas específicas.

El tipo de contenido también es un factor. Hay una gran diferencia entre diseñar un diseño para una tienda, publicación de noticias o blog, o una simple página de bienvenida. Un diseño que es pesado en imágenes versus pesado en palabras. Podría ser útil comprender los patrones de escaneo ocular y cómo tienen un impacto en la jerarquía visual.

Cuanto mayor sea la comprensión del negocio y las restricciones de contenido por adelantado, más fácil será elegir un sistema de cuadrícula y tomar decisiones de diseño.

Tipografía

Yo diría que la tipografía es el aspecto más importante del diseño de la interfaz de usuario, ya que puede representar hasta el 95% de la web y ser la fuerza impulsora de la comunicación.

Si bien los sistemas como la escala modular se pueden aplicar al tamaño y al liderazgo, las familias de fuentes y los estilos también se pueden limitar. Una IU nunca debería necesitar exceder dos familias y un par de pesas. Las reglas también se pueden extender a cómo se maneja la justificación y el caso del título.

Color

Es fácil ponerse demasiado celoso con las paletas. Una pequeña gama de tonos puede ser muy útil para producir imágenes suficientes y consistentes. Por lo general, todo lo que necesitamos para un punto de partida son cinco muestras.

Herramientas como Adobe Color CC facilitan la predefinición de una paleta

La mayoría de las marcas deben incorporar un color primario o de acento, y algunos tonos neutros o contrastantes para complementarlo. No necesitamos 15 tonos de un tono, especialmente al principio. Es mejor comenzar de a poco y aumentar una o dos sombras más adelante.

Imágenes

La forma en que incorporamos imágenes en la interfaz de usuario está determinada en gran medida por el contexto del contenido. Si tenemos una noción aproximada de lo que es eso, podemos crear un punto de partida para nuestras imágenes con variables de relación, tamaño, forma y tratamiento. Podemos encontrar que no necesitamos tantos.

Limitar nuestras variables de imagen impondrá una mejor consistencia y facilitará la administración de activos de imagen a largo plazo. Lo mismo vale para la iconografía.

¿Cuántas variaciones en relación y tamaño para las imágenes necesitamos realmente?

2. Crear una guía de estilo anterior

A medida que un proyecto de IU crece conceptualmente, se vuelve cada vez más importante crear y mantener una guía de estilo o una biblioteca de patrones. Esto establecerá principios de diseño para ayudar al proyecto a escalar, manteniendo el ritmo y la consistencia. Si estamos definiendo variables de antemano, es una buena manera de documentarlas. La futura toma de decisiones será más fácil con una guía de estilo que sin una.

Dependiendo del proyecto, crear una guía de estilo es un lujo y a menudo está destinado a futuras referencias. Esta es la razón por la cual la mayoría de las guías de estilo se elaboran en el último minuto o después de que se complete el proyecto, y esa es una buena práctica. Pero si bien hay una gran cantidad de post-racionalización y razonamiento para una guía de estilo para ayudar al diseño y desarrollo prospectivo, en realidad puede ayudar a construir la fidelidad en las primeras etapas de la conceptualización.

Crear una guía de estilo básica desde el principio no solo establecerá principios desde el principio para reducir las decisiones de diseño, sino que también ayudará como una infraestructura para evolucionar y aumentar los principios en el futuro.

Hacer uno al principio no significa que tenga que estar completo, ni mucho menos. Los estilos tienden a evolucionar más en las primeras etapas de todos modos, y cuanto más grande se vuelve un proyecto, más claros y ajustados se vuelven los límites.

3. Prioridad y adaptación de base modular

En los sistemas de diseño basados ​​en módulos, como el diseño atómico de Brad Frost, se puede formular un diseño a partir de áreas clave específicas. Los módulos se vuelven reutilizables en varios diseños. Las interfaces se tratan como sistemas y no como páginas, y el diseño y el desarrollo basados ​​en patrones son una gran parte del proceso.

Esta es una excelente metodología y hace que el diseño de la interfaz de usuario sea mucho más manejable, pero para que sea más efectivo tenemos que priorizar las áreas clave y adaptar todo lo demás a su alrededor. Esto a su vez asegurará que haya coherencia visual.

Identificar áreas clave

Nuestro diseño debe girar en torno a las partes importantes. La prioridad de cada área está determinada por su contenido o funcionalidad dentro de la interfaz, y es esencialmente la clave del rompecabezas.

Al centrarnos primero en las áreas importantes, estamos reduciendo las decisiones de diseño a partir de entonces, ya que las áreas posteriores tienen que doblarse y adaptarse al entorno establecido.

Centrarse en áreas clave

Una vez que se han identificado las áreas de alta prioridad, se trata de enfocarse en las partes críticas y perfeccionarlas hasta su finalización. La idea es garantizar que sean intuitivos y cumplan con todos los requisitos antes de adaptar las áreas menos importantes.

4. Hacer que funcione para todos

Durante miles de años, los diseñadores se han esforzado por hacer una cosa: comunicarse de manera efectiva. Continuamente reinventamos y afinamos formas de comunicarnos mejor de forma visual y audible a una audiencia.

Con el acceso cada vez mayor a la información de la audiencia más amplia posible, se hace imprescindible maximizar la accesibilidad a la mayor cantidad de personas posible.

La accesibilidad es una bendición disfrazada

Servir a un público más amplio parece más trabajo, y es tentador ver la accesibilidad como una barrera para la innovación. Sin embargo, cumplir con los últimos estándares puede ser una bendición disfrazada, especialmente si se convierten en una segunda naturaleza.

Algunos ejemplos de esto en términos de diseño podrían incluir el requisito de que necesitemos un tamaño de fuente mínimo en la copia del cuerpo, o una cantidad significativa de contraste entre la copia y el fondo, o áreas enlazables más grandes en los dispositivos táctiles.

No se trata solo de discapacidades

La accesibilidad no solo atiende a las discapacidades, como algunos implicarían, sino también a los usuarios con dispositivos y navegadores heredados que no admiten todas las funciones y mejoras más recientes. Ser consciente de estos estándares y observarlos naturalmente reducirá las decisiones de diseño.

5. Uso de patrones probados y probados

El hecho es que los usuarios encuentran interfaces intuitivas cuando se ajustan a los cientos de patrones de diseño comunes que han absorbido tras años de práctica y exposición. Tan pronto como comencemos a separarnos de los moldes típicos y pisar nuevos terrenos, podemos encontrar que toma tiempo para que un nuevo patrón se vuelva completamente intuitivo para las masas.

Hay un momento y un lugar para crear patrones de interfaz de usuario originales, pero no debemos evitar las técnicas comunes: tienen éxito por una razón.

El lado positivo es que nos preocupemos menos por reinventarnos y nos concentremos en la estética. Todavía es posible crear trabajos originales basados ​​en patrones establecidos.

Cuanto más conocemos e integramos patrones de diseño exitosos, menos opciones tenemos que tomar como diseñadores. No estamos necesariamente considerando qué podría funcionar, sino qué funcionará.

Nota final

Algunos de estos enfoques pueden, individualmente, no reducir en gran medida nuestro pensamiento y la toma de decisiones, o mejorar nuestros diseños por un amplio margen. Sin embargo, incorporarlos juntos, junto con obtener buenos comentarios en el camino, puede hacer que sea mucho más fácil diseñar una mejor interfaz de usuario.

Sigueme en Twitter