UX, IA,Guía para el diseño de una interfaz de usuario 2021 UI: todas estas abreviaturas pueden resultar confusas. En realidad, como diseñador Guía para el diseño de una interfaz de usuario 2021es, a menudo trabajaremos en estas diferentes especialidades Guía para el diseño de una interfaz de usuario 2021: diseñando la experiencia general del usuario (UX), organizar Guía para el diseño de una interfaz de usuario 2021 usando la información de manera lógica considerando la arquitectura de la información (IA) y considerando el diseño granular de la interfaz de usuario (UI).
En este artículo, exploraré los detalles, cómo diseñamos interfaces que son consistentes y escalables . Nuestro objetivo en esta fase del proceso de diseño es aplicar lo que hemos aprendido del diseño de nuestra interfaz de usuario mediante:
- Usar evaluaciones comparativas para desarrollar inventarios de interfaces que aseguren que tu interfaz de usuario sea considerada coherente;
- Crear una biblioteca de patrones, informada por tu inventario de interfaz, para garantizar que lo que diseñes sea rentable y consistente;
- Adoptar la animación como una forma de comunicarte con los usuarios, mejorando nuestro diseño a niveles tanto de funcionalidad como de deleite.
En resumen, este artículo está destinado a ayudarte a desarrollar un enfoque sistemático hacia el diseño de la interfaz de usuario que sea ampliamente aplicable en una variedad de proyectos y que sea escalable. Al construir un marco para el diseño, podemos aplicar las lecciones aprendidas de otros, mejorando así nuestros diseños y dando como resultado un mejor resultado para nuestros usuarios.
El diseño de la interfaz de usuario (UI) es un tema extenso, así que considera este artículo como una breve introducción, pero, como en algunos de mis artículos anteriores , proporcionaré algunas lecturas sugeridas para asegurarme de que estés bien cubierto.
Comienza con un inventario de interfaz de usuario
Es posible que estés comenzando desde cero con un nuevo producto o revisando un producto existente, pero es útil comenzar estableciendo un inventario de interfaz. Así como un inventario de contenido ayuda a garantizar que el contenido (es decir, palabras, imágenes y otros tipos de contenido) sea coherente, un inventario de interfaz de usuario también garantiza que las interfaz de usuario se desarrollen de forma coherente dentro de un marco completo y considerado.
Dedicar un poco de tiempo a esto por adelantado ahorrará mucho tiempo a largo plazo al establecer sistemas de diseño que sean consistentes entre los miembros del equipo y que sean fácilmente escalables. La creación de un inventario de interfaz de usuario te ayuda a centrar tu tiempo y esfuerzo en los elementos que necesitas en este momento, pero, al igual que una guía de estilo , debe ser un documento vivo que sea extensible y que crezca a medida que crece tu producto.
Entonces, ¿qué es exactamente un «inventario de interfaz de usuario»? Bueno, el término fue acuñado y popularizado por Brad Frost. Toma la idea que sustenta los inventarios de contenido y la asigna al mundo del diseño de interfaz de usuario. Como resume Frost: «Un inventario de interfaz de usuario es similar a un inventario de contenido, solo que en lugar de examinar y categorizar el contenido, estás haciendo un inventario y categorizando los componentes que componen tu sitio web o producto. Un inventario de interfaz de usuario es una colección completa de partes y piezas que componen tu interfaz «.
Inventario de interfaz , Brad Frost
[optin-cat id=380]
Si estás rediseñando un producto existente, un inventario de interfaz de usuario comienza mapeando todos tus componentes, sin importar cuán grandes o pequeños sean, para que se documenten sistemáticamente. Si te estás embarcando en un nuevo proyecto, es posible que quieras trazar un mapa del producto de la competencia y realizar un análisis del trabajo de otros. Esto te ayuda a familiarizarte con los diferentes componentes de la interfaz que deberás tener en cuenta.
La primera etapa del proceso es realizar capturas de pantalla de todo lo que has diseñado de forma sistemática. Esto llevará mucho tiempo, pero es importante. En esta etapa, especialmente si tienes un equipo de diseño considerable, es posible que comiences a ver inconsistencias en cómo se han diseñado los diferentes elementos. Tu inventario de interfaz te ayudará a identificar estos elementos, que luego podrás corregir.
Considera todos los diferentes componentes que componen tu interfaz de usuario, incluidos:
- Tipografía
- Encabezados y subtítulos
- Elementos de texto
- Imágenes y medios
- Logotipos
- Iconografía
- Imágenes
- Formularios
- Entradas de texto
- Entradas de radio / casilla de verificación
- Seleccionar menús
Es posible que hayas diseñado estos diferentes componentes cuando surgió la necesidad, sin ningún enfoque sistemático. La idea de un inventario de interfaz es imponer un orden en este proceso asegurando que todo sea consistente.
La segunda fase del proceso, categorizar todo, está destinada a imponer cierto orden a las capturas de pantalla que has realizado. Puedes organizar tus capturas de pantalla usando todo tipo de herramientas, pero te sugiero que organices todo usando Keynote o PowerPoint, de esa manera puedes presentar el trabajo cuando esté completo a tu equipo. El siempre útil Brad Frost ha proporcionado una plantilla que puede usar (ZIP).
Una vez realizado el trabajo anterior, es una buena idea reunirse en equipo o con el cliente y analizar todo. Esta discusión conducirá a una mejor comprensión de los diferentes componentes que necesitas diseñar. También es probable que conduzca a una optimización de los diferentes componentes mediante la identificación de patrones compartidos, una gran ventaja para la eficiencia.
Construye una biblioteca de patrones
Con su inventario de interfaz realizado y todos sus componentes organizados, es importante comenzar a identificar patrones de diseño comunes y construir en torno a ellos . Es probable que su inventario de interfaz haya revelado graves inconsistencias en su diseño, ahora es el punto en el proceso de diseño en el que debe abordarlas reconstruyendo su interfaz de usuario de manera modular. Me parece útil pensar en este enfoque como algo parecido a LEGO.
Con LEGO, puedes (usando componentes pequeños) construir cosas increíblemente complicadas. Las interfaces son similares. Aunque a primera vista una interfaz puede ser increíblemente compleja, se compone esencialmente de componentes más pequeños. Estos componentes son donde entran en juego las bibliotecas de patrones. Entonces, ¿qué es una biblioteca de patrones?
Una biblioteca de patrones identifica y clasifica patrones de diseño que son soluciones recurrentes a problemas de diseño típicos. Estos pueden ser:
- Selectores de calendario
- Senderos de migas de pan
- Carruseles
Una biblioteca de patrones divide una interfaz en elementos más pequeños que luego se pueden usar como bloques de construcción reutilizables. Los beneficios de este enfoque incluyen:
- Coherencia en su diseño
Al crear elementos de interfaz de usuario complejos utilizando componentes más pequeños y reutilizables, se asegura de que todos los elementos de la interfaz de usuario sean coherentes porque todos están construidos a partir de los mismos componentes simples. - Un vocabulario visual que puede compartir con los miembros del equipo.
Al establecer una biblioteca de patrones para su producto, todos los miembros de su equipo construyen usando eso como base, en lugar de construir sus propios elementos ad-hoc. - Eficiencia a lo largo del tiempo a medida que se desarrollan sus diseños
Incluso si su producto crece con el tiempo, su mantenimiento es eficiente porque se basa en una biblioteca de patrones central.
Al diseñar su interfaz de usuario, es útil consultar los patrones de diseño de otros para ver qué funciona, e igualmente, qué no. UI Patterns es un recurso excelente para hacer esto, ya que reúne una gran cantidad de patrones de diseño.
Al utilizar su inventario de interfaz como punto de partida para identificar patrones de diseño comunes, está a un paso de establecer los componentes que necesita crear para establecer un sistema de diseño. Esto ayudará a garantizar que su interfaz de usuario sea coherente y escalable.
Adopción del sistema atómico
La idea es, que debemos dejar de diseñar páginas de forma aislada y centrarnos en la creación de los sistemas a partir de los cuales se construyen esas páginas y a la importancia de centrarse en los patrones de diseño.
Tenemos la suerte de que varios diseñadores hayan tomado el relevo y hayan explorado esta línea de pensamiento en profundidad. El libro de Brad Frost sobre diseño atómico y el libro de Alla Kholmatova sobre sistemas de diseño están llenos de consejos útiles y deberían ser una lectura obligatoria. Los recomiendo encarecidamente.
Destacando la importancia de adoptar un enfoque metódico hacia el diseño de interfaces, Frost afirma: «Estoy interesado en saber de qué se componen nuestras interfaces y cómo podemos construir sistemas de diseño de una manera más metódica. En la búsqueda de inspiración y paralelos, sigue volviendo a la química. […] Toda la materia está compuesta de átomos . Esas unidades atómicas se unen para formar moléculas, que a su vez se combinan en organismos más complejos para finalmente crear toda la materia en nuestro universo. De manera similar, las interfaces están formadas por componentes más pequeños. Esto significa que podemos dividir interfaces enteras en bloques de construcción fundamentales y trabajar a partir de ahí. Esa es la esencia básica del diseño atómico «.-
Diseño atómico , Brad Frost
La metodología de Frost establece cinco niveles distintos que comprenden el diseño atómico: átomos, moléculas, organismos, plantillas y páginas. Al construir desde el átomo hacia arriba, creamos bloques de construcción fundamentales de diseño que nos permiten construir cualquier cosa.
La química nunca fue mi punto fuerte, pero esencialmente:
- Los átomos se unen para formar moléculas;
- Estas moléculas se combinan para formar organismos;
- Estos organismos se utilizan luego como base para la creación de plantillas y páginas.
En resumen, creamos pequeños bloques de construcción de interfaz y luego los juntamos para crear elementos de interfaz progresivamente más complicados. Los beneficios del diseño atómico son que puedes garantizar la coherencia al combinar elementos a un nivel granular y luego construir a partir de ellos.
CÓMO COMENZAR CON LOS KITS DE UI
Como diseñadores que trabajan, en su mayor parte, en la web, somos increíblemente afortunados de ser parte de una comunidad que celebra un enfoque compartido hacia el trabajo que hacemos. Hemos visto una explosión de kits de interfaz de usuario, conjuntos de componentes de interfaz de usuario diseñados sistemáticamente, en los últimos años, lo que nos ha ayudado a hacer la vida un poco más fácil.
No tiene sentido perder el tiempo rediseñando componentes comunes de la interfaz de usuario cuando un kit de interfaz de usuario puede ahorrarte este tiempo y esfuerzo. Un kit de interfaz de usuario bien diseñado puede constituir la piedra angular de un producto digital, ya sea un sitio web o una aplicación, lo que garantiza que tengas una apariencia y una identidad visual coherentes.
Adobe se ha asociado con una serie de diseñadores de renombre mundial para crear fantásticos kits de interfaz de usuario de Adobe XD , que vale la pena explorar. También han proporcionado algunos excelentes tutoriales sobre cómo comenzar tu diseño con kits de interfaz de usuario para que puedas comenzar a usarlo .
Además de ofrecer una serie de conjuntos de iconos gratuitos (diseñados por Lance Wyman, Büro Destruct y Anton & Irene), también han creado un conjunto completo de kits de interfaz de usuario gratuitos con plantillas prediseñadas para proyectos web y móviles.
Los kits de interfaz de usuario son increíblemente útiles y pueden ahorrarte una cantidad considerable de tiempo al evitar que tengas que volver a dibujar elementos de uso común. Sin embargo, una nota de precaución, como con cualquier kit genérico, existe el peligro de caer en un enfoque basado en plantillas en el que un diseño se parece mucho a otro. Es importante usar un kit como punto de partida , sobre el cual colocar la apariencia que estableciste al crear tus collages de elementos.
Diseño de interacciones y animaciones
Uno de los diferenciadores clave entre el diseño para pantalla y la impresión es que cuando diseñamos para pantalla, estamos diseñando para un medio fluido . Ésta es una diferencia fundamental entre el diseño de interacción y el diseño gráfico.
Como diseñadores de interacción, no estamos diseñando colecciones estáticas de páginas, estamos considerando cómo interactúan estas páginas y los elementos dentro de estas páginas. Esta es una distinción fundamental y que a menudo es pasada por alto por un subconjunto de diseñadores gráficos que creen que su función es simplemente diseñar conjuntos de páginas que luego serán pasadas y «unidas» por «alguien técnico».
A riesgo de dar rienda suelta a la lata de gusanos de que ‘los diseñadores deben programar’ que constantemente asoma la cabeza, es fundamental que los diseñadores que trabajan en este medio comprendan cómo funciona el medio. Para diseñar realmente experiencias memorables, es importante dedicar un tiempo a aprender sobre los principios de la animación. Afortunadamente, herramientas como Adobe XD abstraen gran parte del código con el que uno habría tenido que lidiar en el pasado para diseñar experiencias interactivas inmersivas.
Al diseñar para pantallas, medios inherentemente fluidos , es fundamental considerar cómo el usuario interactuará con lo que estás diseñando , considerando cómo se manejan las transiciones de una pantalla a otra y brindando comentarios valiosos dentro de los componentes de la interfaz de usuario. Necesitamos considerar tanto las macro interacciones (a nivel de página) como las micro interacciones (a nivel de objeto).
Pasando de A a B
En este punto del proceso, debemos centrarnos en cómo los usuarios se mueven entre estas pantallas , pasando de A → B → C.
En el pasado, podríamos habernos movido simplemente entre pantallas con poca o ninguna animación, limitados por los dispositivos que usábamos en ese momento. Sin embargo, a medida que la potencia de procesamiento en nuestros dispositivos móviles y de escritorio ha aumentado, también lo ha hecho la cantidad de oportunidades que se nos brindan para diseñar experiencias más inmersivas.
Por supuesto, necesitamos usar estos nuevos poderes con moderación, pero el hardware a disposición de nuestros usuarios ahora nos brinda la oportunidad de diseñar interacciones agradables. Es por eso que hemos visto un aumento en el interés por la animación en los últimos años. Como diseñadores, respondemos a las herramientas a nuestra disposición; a medida que evolucionan esas herramientas, también deben hacerlo nuestros diseños.
Al diseñar transiciones entre pantallas, debemos considerar una serie de factores, que incluyen:
- Cómo el usuario activa la transición para pasar de una página a otra
Al hacer clic en un botón o al deslizar el dedo en la pantalla. - Qué tipo de transición usamos
Disuelve, limpia, escala u otros efectos. La transición que elijamos se comunicará con el usuario, por lo que es importante elegirla con cuidado. - ¿Cuánto tiempo dura la transición?
¿Es rápida o lenta?
A medida que diseñamos el viaje desde A → B → C, las elecciones que hacemos (es decir, desencadenantes, transiciones y tiempos) afectarán la narrativa, por lo que es importante pensar en ellas. Al igual que con cualquier viaje, transcurre con más suavidad si se disfruta.
El tipo de contenido que estamos diseñando también influirá en estas decisiones. En algunos casos, nos gustaría que un usuario se moviera un poco más lentamente a través de una narrativa usando transiciones y tiempos para marcar el ritmo de las cosas. En otros casos, nos gustaría salirnos del camino acelerando las transiciones.
Cuando Apple lanzó iBooks por primera vez, su transición de página al leer un libro (un efecto de ‘curvatura de página’) ralentizó a los lectores. El ‘enrollamiento de la página’ fue delicioso a primera vista, pero una vez que lo viste cientos de veces, cuando todo lo que querías hacer era leer un libro, se volvió increíblemente frustrante. Los microsegundos utilizados en cada vuelta de página se sumaron a una experiencia frustrante.
Al diseñar transiciones entre pantallas, es importante no perder de vista la funcionalidad subyacente. Al final del día, nuestro objetivo es deleitar a nuestros usuarios, no frustrarlos .
La animación puede ser una delicia, por supuesto, pero no si es a expensas de la funcionalidad. Sophie Paxton escribe sobre este mismo tema en un excelente artículo titulado Tu interfaz de usuario no es una película de Disney , que destaca cómo la animación gratuita y las interfaces de usuario demasiado animadas pueden, si no tenemos cuidado, frustrar a los usuarios. Vale la pena leerlo.
También te podría interesar
Interactuar con objetivos
Con nuestras macro interacciones definidas a nivel de página, es hora de centrar nuestra atención en las micro interacciones a nivel de objeto.
Así como debemos considerar todos los factores que se suman para facilitar a los usuarios de una página a otra, también es importante prestar atención a facilitar las interacciones de los usuarios con objetos específicos dentro de nuestras páginas. Estos pueden incluir botones, campos de formulario y otros elementos en los que una pequeña animación juiciosa puede ayudar a proporcionar comentarios a nuestros usuarios.
Proporcionar comentarios visuales es extremadamente importante en el diseño de la interfaz de usuario: tranquiliza a los usuarios al proporcionar una señal de que sus acciones han sido reconocidas . Cuando hago clic en un interruptor de luz en el ‘mundo real’, recibo retroalimentación al escuchar un clic satisfactorio, así como el resultado del encendido o apagado de la luz. Esta retroalimentación me permite saber lo que está sucediendo.
Podemos mejorar nuestros diseños de interfaz de usuario aplicando estas lecciones del mundo real al mundo de las pantallas. Una interfaz de usuario bien diseñada debe responder a las acciones de un usuario , haciéndole saber que tus acciones tienen el efecto deseado, tranquilizándolo. Aquí es donde la animación puede jugar un papel importante.
Sitios como UI Movement brindan una gran cantidad de inspiración, mostrando ejemplos efectivos de animación aplicada a interfaces de usuario. Es importante considerar cómo proporciona comentarios y en qué contexto, por ejemplo:
- Cuando solicita una contraseña, es útil indicar la fortaleza o debilidad de la contraseña mientras el usuario ingresa la información (descubrir solo más tarde que una contraseña es demasiado débil es frustrante).
- Cuando un usuario interactúa con un botón, ayuda a proporcionar comentarios, lo que le permite saber que tus acciones han sido reconocidas.
- Al interactuar con selectores de fechas y calendarios, existe un margen considerable para proporcionar comentarios útiles.
Los escenarios anteriores son solo la punta del iceberg. En cualquier lugar donde se le pida a tu usuario que interactúe con elementos en una página, es una oportunidad para considerar el uso de la animación para proporcionar comentarios útiles. Por supuesto, como señalé anteriormente, tu interfaz de usuario no es una película de Disney, ¡así que no te excedas!
Finalmente, vale la pena señalar que la animación no es para todos y puede, para algunas personas, causar problemas. Para los usuarios con trastornos vestibulares , el movimiento puede causar mareos o náuseas, por lo que es importante tener en cuenta la accesibilidad al utilizar la animación.
Podría ser una idea ofrecer a los usuarios una opción, y es genial ver sitios como la Feria Mundial de CodePen que alertan a los usuarios sobre el uso de la animación y les ofrecen la opción de continuar en el sitio con o sin animación . Es genial ver este tipo de consideración: ¡Bravo por la accesibilidad!
En cierre
Al diseñar tu interfaz de usuario, es útil tener un sistema en su lugar. Esto asegura que todo lo que construyas sea coherente y consistente. Comenzar con un inventario de interfaz, especialmente cuando estás revisando un producto existente como parte de un rediseño, lo ayudará a identificar los puntos donde tu interfaz necesita funcionar. Con el tiempo, es natural que surjan inconsistencias.
Cuando llegue el momento de construir tu interfaz, dedica algo de tiempo a establecer un sistema de diseño considerado. Esto no solo garantiza que tu diseño sea coherente, sino que también ayuda a mantener a su equipo en la misma página y proporciona a los autónomos que trabajan en el proyecto toda la orientación que necesitan en una ubicación central.
Por último, es importante considerar el diseño de sus interacciones y animaciones. Como diseñadores que trabajan para pantallas, es importante que consideremos cómo lo que diseñamos responde a las interacciones de los usuarios. Después de todo, estamos diseñando para un medio maleable, ¡usemos esa maleabilidad a nuestro favor! Al unir todo lo anterior, tendrá las bases de un enfoque de interfaz de usuario sólido que resistirá la prueba del tiempo.
LECTURA SUGERIDA
Hay muchas publicaciones excelentes, tanto en línea como fuera de línea, que te ayudarán en tu aventura. He incluido algunos a continuación para comenzar tu viaje.
Alla Kholmatova ha escrito un excelente libro sobre sistemas de diseño , que recomiendo encarecidamente. Explora cómo la construcción de sistemas de diseño efectivos puedes capacitar a los equipos para crear excelentes productos digitales.
Brad Frost ha escrito extensamente sobre el proceso de realizar inventarios de interfaces . También ha escrito un libro muy bueno, Atomic Design , que se centra en la creación de sistemas de diseño de interfaces eficaces. Frost es una cookie inteligente y recomiendo encarecidamente que marque su blog como favorito.
Si está interesado en aprender más sobre el diseño de interacciones y animaciones, le recomiendo encarecidamente los recursos de animación y experiencia de usuario de Val Head . Head organiza talleres y también tiene un excelente boletín informativo por correo electrónico.
Si la web es tu medio y es nuevo en la animación, deja todo y regístrate en el curso de animación CSS de Donovan Hutchinson . Es un curso excelente y el estilo de enseñanza de Hutchinson es insuperable.
Es cierto que la creación de una interfaz de usuario puede ser desafiante y confusa, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesión de estrategia y dejar que comience la lluvia de ideas.
