La guía de diseño de interfaz de usuario definitiva

Contenido

• 01. Elige tu tipografía
• 02. Elija la paleta correcta
• 03. Enlaces y botones de estilo
• 04. Crea tus componentes
• 05. Documentar y colaborar

¿Qué es el diseño de la interfaz de usuario? Una mejor pregunta sería, ¿qué implica realmente el diseño de una interfaz de usuario? ¿Estética? Usabilidad? ¿Accesibilidad? ¿Todos ellos? ¿Cómo se unen todos estos factores para permitir una experiencia de usuario óptima y cuál debería ser lo primero?

La accesibilidad siempre debe ser lo primero, sentando las bases para una usabilidad óptima (el uso de un creador de sitios web superior ayudará aquí). Y luego, cuando una interfaz de usuario es accesible y utilizable, ya debería verse bastante decente en términos de estética (las herramientas de diseño de la interfaz de usuario ayudarán aquí). Luego, para asegurarse de que su diseño funcione en todos los niveles, deberá probarlo a fondo, lo que puede hacer con nuestra selección de las mejores herramientas de prueba de usuarios. Echemos un vistazo más de cerca a los elementos fundamentales de la mayoría de los diseños y lo que se puede hacer para garantizar la coherencia visual.

01. Elige tu tipografía

La gran tipografía (como muchos aspectos del diseño) se reduce a la accesibilidad. El diseño visual ciertamente se suma a la experiencia general del usuario, pero al final del día, los usuarios interactúan con la interfaz de usuario, no la ven como arte. Las letras legibles resultan en claridad y las palabras legibles son las que ayudan a los usuarios a digerir el contenido de manera eficiente. Ambos son más importantes que cualquier estética visual.

Sin embargo, una tipografía bien diseñada puede resultar estéticamente satisfactoria. Helvetica en blanco y negro (o una fuente similar) puede ser una belleza después de solo unas pocas mejoras tipográficas simples. Por mejoras, nos referimos a ajustar el tamaño de la fuente, la altura de la línea, el espaciado entre letras, etc., no la fuente o el color del texto.

La tipografía 'hermosa' es realmente fea cuando es ilegible porque la frustración siempre triunfa sobre la estética. El gran diseño es equilibrado y armonioso.

Al igual que muchos aspectos del diseño de la interfaz de usuario, ajustar las imágenes para equilibrar la accesibilidad y la estética no es el desafío. El desafío es mantener la coherencia en todo el diseño. La coherencia establece una jerarquía clara entre elementos de diversa importancia, lo que a su vez ayuda a los usuarios a comprender una interfaz de usuario más rápido e incluso a digerir el contenido de manera más eficiente.

Cuando se trata de legibilidad y legibilidad, el tamaño de fuente mínimo aceptable según lo definido por las Pautas de accesibilidad al contenido web WCAG 2.0 es de 18 puntos (o 14 puntos en negrita). El mejor tamaño de fuente para usar depende en gran medida de la fuente en sí, pero es importante tener en cuenta la jerarquía visual y cómo este tamaño base se distingue de los resúmenes y encabezados (p. Ej. h1>, h2>, h3>).

Con la herramienta de diseño de interfaz de usuario que elija (usaremos InVision Studio), cree una serie de capas de texto (T) y luego ajuste todos los tamaños para que se correlacionen con la siguiente plantilla:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Con InVision Studio (y todas las demás herramientas de diseño de IU), esto se hace ajustando los estilos usando el panel Inspector en el lado derecho.

A continuación, elija su fuente, pero tenga cuidado porque lo que puede notar con algunas fuentes es que 18px p> y 22px h3> no se ve tan diferente. Tenemos dos opciones: modificar los tamaños de fuente o considerar una fuente diferente para los títulos. Opte por este último si prevé que su diseño tendrá mucho texto.

Manten eso en mente:

• El diseño de la interfaz de usuario visual es a menudo un enfoque intuitivo
• No se decide nada; todo está sujeto a cambios

Altura de la línea

La altura de línea óptima asegura que las líneas de texto tengan suficiente espacio entre ellas para lograr niveles decentes de legibilidad. Esto se reconoce cada vez más como un "estándar"; La herramienta Lighthouse Audit de Google incluso lo sugiere como una verificación manual (o incluso como una marca si el texto contiene enlaces que pueden estar demasiado juntos como resultado de una altura de línea subóptima).

Una vez más, la WCAG nos ayuda con este, declarando que las alturas de las líneas deben ser 1.5 veces el tamaño de la fuente. Por lo tanto, en su herramienta de diseño de interfaz de usuario en "Línea" (o similar), simplemente multiplique el tamaño de fuente por, al menos, 1,5. Por ejemplo, si el texto del cuerpo es 18px, entonces la altura de la línea sería 27px (18 * 1.5 - también puede ejecutar la operación matemática directamente en el Inspector). Una vez más, sin embargo, tenga en cuenta: si 1.6x se siente mejor, use 1.6x. Recuerde que diferentes fuentes generarán resultados diferentes.

Es demasiado pronto para pensar en usar datos reales en nuestro diseño, pero, como mínimo, deberíamos usar datos algo realistas (incluso lorem ipsum). InVision Studio tiene una aplicación nativa de datos reales para ayudarnos a ver cómo se vería realmente nuestra tipografía.

Espaciado de párrafos

El espaciado de párrafos no es un estilo que podamos declarar usando Inspector de InVision Studio. En su lugar, tendremos que alinear capas manualmente con las guías inteligentes (⌥). Similar a la altura de la línea, el multiplicador mágico es 2x (el doble del tamaño de la fuente). Por ejemplo, si el tamaño de la fuente es de 18 píxeles, debe haber al menos un espacio de 36 píxeles antes de pasar al siguiente bloque de texto. El espaciado entre letras debe ser de al menos 0,12.

Sin embargo, no debemos preocuparnos por esto hasta que comencemos a crear componentes.

Estilos compartidos

Si su herramienta de diseño de interfaz de usuario lo admite (InVision Studio aún no lo hace), considere convertir estos estilos tipográficos en "Estilos compartidos" para que puedan reutilizarse rápidamente y, al mismo tiempo, garantizar la coherencia visual. Esto generalmente se logra a través del Inspector.

02. Elija la paleta correcta

Seleccionar los colores perfectos para su diseño va más allá de la estética: puede informar a toda la jerarquía de su sitio.

Cuando se trata del diseño de la interfaz de usuario, el color suele ser una de las primeras cosas con las que disfrutamos incursionando, pero nos han enseñado que sumergirse directamente en el diseño visual es algo malo. Esto es ciertamente cierto, sin embargo, cuando se trata de coherencia visual, el color debe ser una de las principales preocupaciones porque desempeña otros roles.

El color en el diseño de la interfaz de usuario puede ser muy efectivo, pero dado que algunos usuarios (muchos, en realidad) sufren de varios tipos de discapacidades visuales, no siempre es confiable. Dicho esto, no se trata necesariamente del color específico que se está utilizando, sino del tipo de color. Es posible que esto no sea cierto cuando se trata de la marca, ya que el color se usa para el impacto emocional en este sentido, pero, en el diseño de la interfaz de usuario, el color también se usa para comunicar la intención, el significado y, por supuesto, la jerarquía visual.

01. Rígido
El complemento Stark es compatible con Sketch y Adobe XD y lo ayuda a verificar el contraste de color y simular el daltonismo directamente desde el lienzo. Próximamente será compatible con Figma e InVision Studio.
02.Colores
Colors es un conjunto de 90 combinaciones de colores que tienen la cantidad adecuada de contraste de color para cumplir con las pautas WCAG 2.0; algunas de ellas incluso logran cumplir con el estándar AAA.
03. Proyecto A11y
El Proyecto A11y es un centro masivo para todo lo relacionado con la accesibilidad. Incluye recursos, herramientas, consejos, tutoriales y es creado por el fabricante del complemento Stark y recibe fondos de InVision.

Los tres tipos de color

Los colores tienen significado, por lo que es importante no tener demasiados. Demasiados significados dan como resultado más cosas que el usuario debe comprender y recordar, sin mencionar más combinaciones de colores de las que debemos preocuparnos. Generalmente hablando, este sería el formato recomendado:

• Un color de llamada a la acción (también el color principal de la marca)
• Un color oscuro neutro (mejor para elementos de la interfaz de usuario o modo oscuro)
• Para todo lo anterior, una variación ligeramente más clara y más oscura

Esto habilita lo siguiente:

• El modo oscuro será fácilmente alcanzable
• Nuestro color de CTA nunca entrará en conflicto con otros colores
• En cualquier escenario podremos enfatizar y restar importancia

Configura tu paleta

Con la herramienta de diseño de interfaz de usuario que elija, cree una mesa de trabajo bastante grande (toque A) para cada color (llamado "Marca", "Neutro / Claro" y "Neutro / Oscuro"). Luego, en cada mesa de trabajo, cree rectángulos más pequeños que muestren las variaciones más oscuras y más claras del color y también los demás colores.

Consideraríamos un poco más claro y más oscuro como un 10% más de blanco y un 10% más de negro, respectivamente. Cuando haya terminado, muestre una copia de los estilos tipográficos en cada mesa de trabajo. El color de estas capas de texto debe ser de luz neutra, excepto en la mesa de trabajo de luz neutra donde deben ser de oscuridad neutra.

Contraste

A continuación, deberemos comprobar nuestros colores para obtener un contraste de color óptimo. Hay una variedad de herramientas que pueden hacer esto, por ejemplo, el complemento Stark para Sketch y Adobe XD o Contrast para macOS; sin embargo, una solución en línea como Contrast Checker o Color Contrast Checker funcionará bien.

Verifique el contraste de color para cada combinación y modifique los colores en consecuencia. Si no está seguro de qué colores usar, intente seguir las recomendaciones de Color Safe.

03. Enlaces y botones de estilo

Tamaño

Los botones y enlaces, al igual que la tipografía, deben tener algunas variaciones. Después de todo, no todas las acciones tienen el mismo nivel de importancia y, como discutimos anteriormente, el color es un método de comunicación poco confiable, por lo que no puede ser el método principal para influir en la jerarquía visual. También necesitamos jugar con el tamaño.

Una prueba de capacidad visual es una prueba de usabilidad que se utiliza para determinar si parece que se puede hacer clic en los objetivos táctiles. Sincronice el diseño de Studio a Freehand (⌘⇧F), envíe la URL resultante a los probadores y pídales que encierren en un círculo los elementos en los que creen que se puede hacer clic.

Los usuarios que no pertenecen a InVision Studio también pueden usar Freehand, pero los usuarios de InVision Studio pueden lanzar sus diseños a Freehand sin problemas desde InVision Studio, que es la forma más rápida y eficiente de obtener comentarios visuales de los usuarios.

Generalmente, recomendamos que el texto del botón se declare como 18px (igual que el texto del cuerpo) pero que los botones en sí tienen tres variaciones de tamaño:

• Normal: 44px de altura (esquinas redondeadas: 5px)
• Grande: 54px de altura (esquinas redondeadas: 10px)
• Extra grande: 64px de altura (esquinas redondeadas: 15px)

Esto nos permite hacer que ciertos botones parezcan más importantes sin depender del color y también anidar botones (por ejemplo, usar un botón dentro de un campo de formulario de apariencia mínima).

Profundidad

Independientemente de si el objetivo del toque es un botón o un campo de formulario, las sombras deben usarse para aumentar la profundidad y, por lo tanto, sugerir interactividad. Un estilo de sombra único para todas las variantes de botones y campos de formulario está bien.

Interactividad

Cada tipo de botón necesita una variación para indicar su estado de desplazamiento. Esto aclara al usuario que lo que ha intentado hacer está totalmente bien y garantiza que continúe sin demora.

En realidad, este es uno de los aspectos más complejos de mantener la coherencia visual porque el color es a menudo el estilo preferido para cambiar cuando se trata de crear un estado. Afortunadamente, estos cambios de estado pueden ser relativamente sutiles, por lo que está bien cambiar el color a una variación ligeramente más clara o más oscura; para eso están. Esto también se aplica a los enlaces.

Decidir en contra de esto hará que usemos un color que ya tenga un significado significativo, lo que hará que los usuarios se confundan, o que decidan buscar otro color. Decidir usar un color secundario está totalmente bien, pero debe guardarse para efectos visuales de marketing en lugar de elementos de la interfaz de usuario. Menos es más (y más fácil).

Recuerde repetir este paso para cada mesa de trabajo. No incluya los botones de llamada a la acción de la marca en la mesa de trabajo de la marca; más adelante cubriremos lo que sucede cuando ciertas combinaciones no funcionan.

04. Crea tus componentes

Los componentes ahorran mucho tiempo y todas las herramientas de diseño de IU ofrecen esta función (por ejemplo, en Sketch, se llaman Símbolos). En Studio podemos crear componentes seleccionando todas las capas que deben componer el componente y usandoK atajo.

Usando componentes

Los wireframes son muy útiles, no solo para diseñar interfaces de usuario de alta usabilidad, sino también para descubrir qué requerirá nuestra interfaz de usuario a largo plazo. Es como una prueba de futuro.

Esto no significa que debamos diseñar una gran cantidad de componentes o estar preparados para cualquier escenario posible, pero sí significa que debemos emplear una actitud de "¿Qué pasaría si?".

Por ejemplo, si nuestra estructura alámbrica requiere un componente de 3x1 pero sabemos que el contenido no está escrito en piedra, un poco de contemplación podría llevarnos a preguntarnos: "¿Qué pasa si estos componentes terminan siendo 4x1?". La regla general es: diseñar solo para las necesidades del usuario que ya existen, pero tratar de hacer que las soluciones sean relativamente flexibles. De lo contrario, terminaremos con una "deuda de diseño" muy complicada más adelante.

Ahora podemos reutilizar este componente arrastrándolo al lienzo desde Bibliotecas> Documento en el lado izquierdo, aunque tenga en cuenta que este flujo de trabajo puede diferir dependiendo de su herramienta de interfaz de usuario.

Este método de crear guías de estilo (y eventualmente crear el diseño en sí) funciona especialmente bien con diseños modulares / basados ​​en tarjetas, aunque las "áreas comunes" como encabezados, pies de página y navegaciones también son excelentes candidatos para un componente.

Al igual que hemos hecho con nuestros estilos, colores y botones tipográficos, debemos recordar organizar nuestros componentes con cuidado.

Utilizando nuestras reglas

Anteriormente hicimos un comentario sobre no usar botones de llamada a la acción de marca además del color de la marca, ya que los botones de llamada a la acción de marca obviamente deben destacarse entre todo lo demás. Entonces, ¿cómo hacemos para crear un componente de marca sin dejar de usar un botón de llamada a la acción de marca? Después de todo, si usamos botones oscuros neutrales para, digamos, botones de navegación o simplemente botones menos importantes, esa no sería una opción, ¿verdad?

Derecha. Entonces, esta sería una oportunidad ideal para crear un componente, específicamente, una combinación de encabezado + texto + botón. Observe cómo he creado un fondo de "tarjeta" de luz neutra para permitir el uso del botón de la marca. Del mismo modo, el campo de forma de luz neutra (los campos de formulario suelen ser blancos debido al modelo mental históricamente sinónimo de formularios en papel) no se ve increíble en el fondo de luz neutra, por lo que solo se pueden usar en el fondo oscuro neutro, ya sea directamente o dentro un componente oscuro neutro. Así es como hacemos que nuestro diseño sea flexible mientras obedecemos nuestras reglas y mantenemos la coherencia.

Pruebas de estrés

Idealmente, la forma más rápida y eficaz de garantizar la solidez de nuestro diseño es realizar una prueba de esfuerzo. Poner un diseño a prueba significa ser cruel. Supongamos que tenemos una navegación con X cantidad de elementos de navegación porque ese era el requisito; Para garantizar realmente la flexibilidad, intente cambiar estos requisitos agregando más elementos de navegación o, para realmente lanzar una llave en las obras, intente también agregar un elemento de navegación con una jerarquía visual más alta que los demás. ¿Nuestras reglas de tamaño, tipografía y color permiten algo como esto? ¿O para ofrecer una usabilidad óptima necesitamos otra regla?

Tenga en cuenta que existe una diferencia entre agregar reglas y doblar las reglas. Más casos extremos significan menos consistencia, por lo que la mayoría de las veces es mejor por el bien de la usabilidad simplemente repensar el componente.

05. Documentar y colaborar

¿Cómo hacemos que nuestros archivos de diseño sean más fáciles de usar tanto para nosotros como para cualquier otro diseñador que pueda usar nuestro archivo de diseño? Bueno, como descubrirás, es importante mantenerlos almacenados de forma segura en un almacenamiento en la nube compartido y confiable.

Colores

El primer paso es guardar todos los colores en la muestra "Colores del documento" si aún no lo hemos hecho; esto hará que sea más fácil acceder a ellos cuando necesitemos aplicarlos en nuestro diseño.Para hacer esto, abra el widget selector de color desde el Inspector, elija "Colores del documento" en el menú desplegable y luego haga clic en el icono + para agregar el color a la muestra. Esto funciona de la misma manera en la mayoría de las herramientas de interfaz de usuario.

Bibliotecas compartidas

A continuación, necesitamos convertir nuestro documento, completo con estilos tipográficos, colores, botones, áreas comunes y componentes básicos, en una biblioteca compartida.

Básicamente, esto significa que cada elemento debe ser un componente, incluso si consta de una sola capa. Haga clic en el botón + ‌ en la barra lateral de Bibliotecas del lado izquierdo y luego importe este mismo documento a un documento nuevo. Así es: nuestro documento ahora es una biblioteca y está listo para ser utilizado para diseñar interfaces de usuario con consistencia garantizada.

InVision Studio es algo limitado en el sentido de que aún no se sincroniza con la herramienta de administración del sistema de diseño oficial de InVision, pero es bastante fácil albergar la biblioteca en Dropbox para que otros diseñadores la usen y actualicen con el tiempo. Cuando se realiza un cambio (local o remotamente), cada archivo de Studio que usa la biblioteca (nuevamente, localmente o remotamente) le preguntará si desea actualizar los colores y componentes. Así es como se mantienen las bibliotecas de diseño en todos los equipos.

Cuando se trata de diseñar interfaces de usuario que sean visualmente coherentes, reutilice todo. Diseñe botones, luego use botones para crear componentes de botón, luego use
componentes de botón para crear otros componentes como alertas y cuadros de diálogo.

Simplemente no cree componentes que no sean necesarios. Recuerde, la construcción de una biblioteca es un esfuerzo colaborativo continuo. No tiene que ser completado de una vez, completado por usted solo o completado nunca. Solo tiene que transmitir un idioma.

Diseño a escala

A medida que un diseño se expande, administrarlo se vuelve más difícil. Hay varios ajustes que podríamos querer hacer para mantenerlo eficiente y fácil de mantener, especialmente porque el DSM de InVision aún no funciona con Studio.

Por ejemplo, podríamos querer usar capas de texto para anotar nuestra biblioteca como un medio para explicar los casos de uso de varios elementos. Para los estilos tipográficos, incluso podríamos editar el texto para que sea más descriptivo (por ejemplo, "h1> / 1.3 / 44px"). Esto dice que h1>s debe tener 44px y una altura de línea de 1.3.

Transferencia de diseño

Las herramientas de transferencia de diseño muestran los diversos estilos utilizados por cada elemento del diseño para que los desarrolladores puedan crear la aplicación o el sitio web. Estas herramientas incluyen una descripción general de los estilos y también una copia de la muestra de "colores del documento". Los desarrolladores pueden incluso copiar estos estilos como código, lo cual es excelente si ha decidido crear cualquier documentación de diseño escrita y desea incluir representaciones de fragmentos de código de los componentes.

Si está preocupado por la resolución de problemas y la administración de un sitio web, asegurarse de tener el servicio de alojamiento web adecuado le ayudará, pero para su sistema de diseño, la herramienta de transferencia de diseño de InVision, Inspect, es lo que debe usar. Para utilizarlo, hacemos clic en el botón / icono "Publicar en InVision" en InVision Studio, abrimos la URL resultante y luego tocamos para cambiar al modo de inspección. Es realmente conveniente.

Este contenido apareció originalmente en la revista net.