Creación de una guía de estilo de interfaz de usuario para una mejor experiencia de usuario

Escucha la versión en audio de este artículo

Garantice un diseño de producto y una experiencia de usuario cohesivos

En 1976, Johnny Cash lanzó One Piece at a Time , una canción que cuenta la historia de un trabajador automotriz de Detroit que pasa veinte años recolectando piezas de Cadillac robadas de la línea de montaje.

Desafortunadamente, cuando el trabajador comienza a construir su Cadillac de contrabando, descubre que muchas partes son incompatibles porque las características clave del diseño han cambiado a lo largo de los años. Con un poco de ingenio, el automóvil personalizado se une, pero es una mezcolanza antiestética que inspira el ridículo dondequiera que vaya.

La parte trasera también se veía un poco divertida.
Pero lo armamos y cuando terminamos
Bueno, fue entonces cuando nos dimos cuenta de que solo teníamos una aleta caudal.

Los diseñadores y desarrolladores de las experiencias digitales actuales enfrentan un desafío similar. El paso del tiempo es un enemigo formidable capaz de hacer estragos en la continuidad de los productos digitales. Con el tiempo, los miembros del equipo van y vienen, las tendencias evolucionan y las características cambian. Además, el rápido ritmo de nuestro panorama digital moderno significa que la innovación de productos ocurre en trimestres, no en años.

Si una empresa o un equipo de diseño no tiene un registro compartido que documente el aspecto y la sensación deseados de un producto, surgirán incoherencias visuales y experienciales, los usuarios se frustrarán y la reputación de la marca se verá afectada.

Las guías de estilo de interfaz de usuario son una herramienta de diseño y desarrollo que aporta cohesión a la experiencia y la interfaz de usuario de un producto digital. En esencia, ellos:

• Registre todos los elementos de diseño y las interacciones que ocurren dentro de un producto
• Enumere los componentes cruciales de la interfaz de usuario, como botones, tipografía, color, menús de navegación, etc.
• Documente componentes importantes de UX como estados de desplazamiento, rellenos desplegables, animaciones, etc.
• Contener elementos en vivo y fragmentos de código para que los desarrolladores los usen y hagan referencia.

Antes de echar un vistazo más de cerca a cómo armar una guía de estilo de interfaz de usuario de nivel experto, es importante comprender que no existe un enfoque único para todos. El valor de las guías de estilo se extiende más allá de las grandes marcas con grandes equipos de productos. Las medianas y pequeñas empresas que buscan una experiencia digital uniforme también se benefician cuando las guías de estilo de la interfaz de usuario se adaptan a sus necesidades específicas.

Incluya estos componentes de diseño cruciales en las guías de estilo de la interfaz de usuario

Los diseñadores familiarizados con las pautas de identidad de la marca no deberían tener problemas para hacer la transición a las guías de estilo de la interfaz de usuario porque hay una gran superposición con muchos de los componentes de diseño cruciales que deben incluirse.

Consejo profesional: solo documente los componentes de diseño relevantes. La información superflua hace que las guías de estilo de la interfaz de usuario sean infladas y difíciles de manejar.

esquema de tipografía

La tipografía es uno de los elementos de diseño de interfaz más comunes, por lo que no basta con enumerar los nombres de los tipos de letra utilizados en un producto. Se deben dar instrucciones claras para títulos, subtítulos, encabezados (H1, H2, H3), cuerpo del texto y subtítulos.

Además, se deben proporcionar los tamaños de fuente, indicar los pesos y definir los estilos. También se necesita la altura de la línea y el interletraje, y es una buena idea seleccionar una fuente de referencia para usar cuando surjan circunstancias especiales.

Diseños receptivos

Cuando los productos digitales se diseñan en torno a sistemas de cuadrícula receptivos, las guías de estilo de la interfaz de usuario deben abordar los diseños de interfaz en todos los tamaños de pantalla. Esto significa incluir notas y ejemplos de espaciado, relleno y ubicación. También es útil mostrar superposiciones del sistema de cuadrícula del producto en relación con diferentes tamaños de pantalla.

El gran objetivo aquí es proporcionar suficiente contexto para evitar la necesidad de diseños de pantalla únicos. Con el tiempo, estos se suman y socavan la cohesión de un producto digital.

Paleta de color

Una de las formas más rápidas de arruinar una interfaz es el uso inconsistente del color, por lo que las combinaciones de colores deben definirse claramente. Enumerar los colores y sus valores (HEX, UIColor) es un buen comienzo, pero también se deben dar combinaciones específicas y ejemplos de uso.

Si la Guía de estilo de la interfaz de usuario hace referencia a un conjunto de pautas de identidad de marca, verifique si hay disponible un esquema secundario de colores de énfasis más claros. Si no, cree el suyo propio y documente. Una selección de valores de gris también es útil.

Botones

Casi todas las interfaces incluyen botones, así que tómese el tiempo para documentar sus tamaños, estilos, colores, ubicación, espaciado y elementos tipográficos. Si se usan varios botones en diferentes contextos, déjalo claro también.

Componentes de interfaz de usuario adicionales que pueden ser necesarios

• Iconografía
• Información sobre herramientas y ventanas emergentes
• modales
• Elementos de formulario
• Tablas de datos
• Menús de navegación
• Gráficos y visualizaciones de datos
• Pestañas
• Interruptores de encendido y apagado
• Diálogos
• Listas de cuadrícula de contenido
• Listas verticales
• Barras de herramientas
• Selectores de fecha y hora
• Indicadores de carga
• Casillas de verificación
• Alertas
• menús desplegables
• Controles deslizantes
• paso a paso
• Paginación

Organizar y contextualizar las instrucciones de diseño

Además de los componentes imprescindibles de la interfaz de usuario, hay una serie de características prácticas que hacen que las guías de estilo de la interfaz de usuario sean más fáciles de consultar, navegar e implementar para las empresas y los equipos de diseño.

Tabla de contenido

Una tabla de contenido bien organizada y claramente marcada es una forma sencilla de ayudar a todos a encontrar rápidamente el contenido del documento.

Notas de contexto

Es imposible predecir todas las decisiones de diseño problemáticas que pueden surgir durante la vida útil de un producto, por lo que articular la lógica de diseño detrás de los componentes de la interfaz de usuario de uso frecuente puede hacer que los escenarios imprevistos sean más fáciles de resolver.

Por ejemplo:

“En esencia, nuestro producto se trata de mostrar las mejores imágenes de arquitectura de todo el mundo. Por esa razón, el diseño de nuestra interfaz prioriza las imágenes grandes y llamativas sobre el texto. Siempre que sea posible, haga de las imágenes el punto focal de nuestro producto”.

Instrucciones de espaciado y posicionamiento

El espaciado y el posicionamiento a menudo se tratan en la sección 'Diseños receptivos'. Dependiendo de la complejidad del producto digital, las instrucciones pueden consistir en "reglas generales" generales o ser bastante granulares.

Normas

A menudo, puede ser útil delinear claramente lo que se debe y lo que no se debe hacer en el diseño. Por ejemplo:

• " Utilice la versión de la marca denominativa blanca del logotipo de nuestra empresa en el pie de página de la interfaz".
• “ No utilice versiones en colores alternativos de la marca denominativa de nuestra empresa sobre fondos negros”.

Lo que se debe y lo que no se debe hacer evita el debate y ahorra tiempo de diseño y desarrollo, pero siempre es mejor proporcionar una nota de contexto como esta:

“Esta lista de lo que se debe y no se debe hacer cubre una amplia gama de decisiones de diseño importantes, pero no tiene en cuenta todos los posibles usos indebidos de los elementos de diseño de nuestro producto. Con esto en mente, use su mejor juicio cuando surja la incertidumbre y tome decisiones que reflejen con precisión la apariencia general de nuestro producto”.

Elementos vivos y fragmentos de código

Las pautas de identidad de la marca suelen ser documentos estáticos, pero las guías de estilo de la interfaz de usuario incluyen elementos en vivo que funcionan como lo harían en el producto final, lo que significa que los botones se comportan como botones, los menús desplegables en realidad se despliegan y las animaciones son animadas.

Los fragmentos de código permiten a los desarrolladores copiar y pegar rápidamente el código de los elementos activos en el back-end de un producto.

Haga que las guías de estilo de la interfaz de usuario sean fácilmente accesibles para los equipos de diseño

Ahora que entendemos cómo crear una guía de estilo y los componentes y funciones incluidos en una guía de estilo de interfaz de usuario, cambiamos nuestra atención al uso compartido y la comunicación. Más específicamente, ¿cuáles son las opciones para albergar guías de estilo de interfaz de usuario?

Tradicionalmente, las guías de estilo de la interfaz de usuario han existido como páginas web. Esto proporciona a los diseñadores y desarrolladores un fácil acceso y permite que los elementos de diseño funcionen como lo harían en el producto.

Más recientemente, han surgido un puñado de plataformas basadas en la nube, que permiten a los equipos diseñar, crear prototipos y probar productos de forma colaborativa. Estas mismas plataformas también son capaces de albergar guías de estilo de interfaz de usuario y permitir que los miembros del equipo intercambien comentarios e ideas en forma continua.

Veamos cómo algunas de estas plataformas describen su enfoque de las guías de estilo de la interfaz de usuario.

figma

“Cree sistemas de diseño con componentes de interfaz de usuario vinculados que todo el equipo pueda usar. Obtenga actualizaciones cuando se realicen cambios en los componentes compartidos”

Fase

“Bibliotecas como siempre deberían haber sido: colores, propiedades y elementos… incluso tiempos de transición: todo en un componente ahora. Edite en el lugar: todo es un maestro. Anula todo lo que no necesites, por instancia”.

InVision

“Todos los componentes de marca y UX, incluida la documentación de uso, se administran en un solo lugar. Los cambios se sincronizan con todo el equipo y los diseñadores pueden cambiar a la última versión o revertir las actualizaciones en cualquier momento”.

material.io

“Cree su propio tema Material y cree una biblioteca de símbolos de marca aplicando cambios de estilo al color, la forma y la tipografía. Comparta, cargue y presente iteraciones de diseño en la Galería. Luego use el modo de inspección para acceder a la documentación del desarrollador”.

Las guías de estilo de la interfaz de usuario deben ser fáciles de usar

Al ensamblar guías de estilo de interfaz de usuario, la comunicación no se puede dar por sentada. Los equipos de productos están formados por personas de diferentes disciplinas, orígenes culturales y experiencias profesionales. Utilice estos principios para garantizar la claridad y la facilidad de uso.

Diseños simples

Las guías de estilo de la interfaz de usuario requieren diseños de pantalla limpios y despejados. Cada pantalla debe estar bien organizada, claramente etiquetada y altamente legible. No hay ningún beneficio en sobrecargar las pantallas con información visual, así que busca arreglos que sean mínimos y espaciosos.

Instrucciones concisas

Mantenga las instrucciones cortas y dulces. Evite los párrafos extensos y use viñetas. Siempre que sea posible, demuestre con imágenes sobre palabras.

Escenarios de uso informativo

¿Se pregunta cuándo usar este estilo de control deslizante sobre ese? Los 'escenarios de uso' resuelven este tipo de confusión. Nuevamente, las imágenes son más fuertes que las palabras aquí, así que proporcione ejemplos que demuestren claramente tanto el escenario como el camino correcto a seguir.

Historiales de versiones relevantes

Los productos digitales se actualizan con frecuencia. A medida que los equipos de productos buscan refinar hasta el último detalle de la interfaz, es importante mantener un registro continuo de cómo han evolucionado los componentes de diseño. Sea discreto aquí: para empresas más pequeñas y equipos de productos, mantener una biblioteca extensa de historiales de versiones puede no ser práctico.

Las guías de estilo de la interfaz de usuario son un recurso valioso y una poderosa herramienta de diseño

Los equipos de diseño y desarrollo contemporáneos valoran la eficiencia y la colaboración multidisciplinaria, como lo demuestran los sistemas de lenguaje de diseño que promocionan grandes marcas como MailChimp, Google y Salesforce.

Los sistemas de lenguaje de diseño permiten que diversos equipos que trabajan en productos digitales sofisticados se comuniquen utilizando un lenguaje visual estandarizado. Las guías de estilo de la interfaz de usuario están entretejidas en la estructura de los sistemas de lenguaje de diseño y sirven como una herramienta en la que se puede confiar para una iteración rápida y experiencias digitales consistentes.

Al mismo tiempo, el diseño no es una actividad reservada solo para las grandes empresas. Una amplia gama de equipos de productos y proyectos digitales se beneficiarán de guías de estilo de interfaz de usuario bien construidas, pero los recursos (financieros, de tiempo y de talento) varían de una empresa a otra.

Por esta razón, las guías de estilo de la interfaz de usuario son más útiles cuando se adaptan a las necesidades de las empresas individuales y los equipos de diseño. El objetivo más importante de cada Guía de estilo de interfaz de usuario es un equilibrio entre claridad y practicidad que conduzca a experiencias de usuario siempre agradables.

Lectura adicional en el blog de diseño de Toptal:

• Estilos tipográficos para diseño web e impreso
• Diseño receptivo: mejores prácticas y consideraciones
• Por qué las startups necesitan una guía de estilo
• Prácticas recomendadas de usabilidad y diseño de iconos
• Usa tu inspiración: una guía para los tableros de humor