Cuando escuché por primera vez sobre la escritura sobre la experiencia del usuario, solo tenía la vaga noción de que servía como un punto de intersección entre la escritura y el diseño. Mientras tiraba de ese hilo, el mundo más amplio del diseño de experiencias de usuario comenzó a desmoronarse ante mí y, al aprender sobre las estrategias y herramientas involucradas en la creación de una experiencia de usuario ejemplar, me di cuenta de que la escritura y el diseño están completamente entrelazados.
Con una mayor conciencia de las características de UX, está claro que los elementos del diseño de UX son omnipresentes: en aplicaciones, sitios web e incluso en botellas de desinfectante para manos. Comencé a notar cuando los elementos visuales y el texto funcionaban en conjunto y cuando faltaban o eran defectuosos. En lugar de navegar irreflexivamente por las interfaces de usuario, ahora aprecio la ejecución decidida de ideas que estaban destinadas a hacer que la experiencia del usuario fuera positiva y fluida.
Si bien un producto digital puede ser digno de elogio por realizar una función útil o brindar un servicio relevante, elementos menos tangibles como la eficiencia, la flexibilidad y la usabilidad intuitiva pueden colocar un producto por encima del resto. Idealmente, la funcionalidad principal de un producto debería fusionarse con una interfaz clara y navegable. En el centro de la creación de productos que incorporan estas características está el diseño de la experiencia del usuario, un campo que abarca la investigación del usuario, la navegabilidad, el diseño de la interfaz y los mensajes y elementos visuales que guían la forma en que una persona usa el producto.
Un producto de diseño digital que presenta características claramente estructuradas y una navegación sencilla al mismo tiempo que ofrece su servicio principal es la aplicación web Coolors. Coolors ayuda a los usuarios a ver, crear y guardar paletas de colores, que se pueden agregar a proyectos o colecciones dentro de la aplicación. Se puede copiar una amplia variedad de formatos de códigos de color con un solo clic, lo que permite a los diseñadores aplicar los colores elegidos en otros programas de software de diseño casi al instante. Otras características incluyen evaluar el contraste de color entre el texto y su fondo, identificar colores de imágenes y obtener una vista previa del impacto de diferentes condiciones de daltonismo en los colores de la paleta.
Coolors fue creado por el diseñador y desarrollador web Fabrizio Bianchi, quien se inspiró para crear la aplicación después de luchar por encontrar un generador de paleta de colores que no fuera ni demasiado básico ni demasiado abrumador. Con Coolors, los usuarios pueden sortear esos problemas cultivando esquemas de color a partir de paletas existentes que ofrecen inspiración y una variedad de características personalizables (Stinson). Como diseñador y persona que continúa manteniendo y actualizando el sitio, Bianchi tiene un gran interés en mejorar esta herramienta y crear un producto digital que facilite el trabajo (y la diversión) a los usuarios de Coolors.
Al explorar las características que hacen que Coolors sea único como generador de paletas de colores, resulta evidente que muchos de sus elementos formales en el diseño están indisolublemente ligados a la funcionalidad. Profundizar en ciertos aspectos de la interfaz puede parecer a veces como evaluar las funciones explícitas de Coolors, pero esas características de la interfaz de usuario a menudo contribuyen a una experiencia de usuario positiva porque son el medio por el cual el usuario accede a una herramienta, y las imágenes agradables contribuyen a su facilidad. de uso. Cuando el propósito de la aplicación puede entregarse a los usuarios en una interfaz bien hecha, se vuelve cada vez más conveniente, eficiente o inesperada, todo lo cual puede combinarse con la innovación del concepto del producto más que con su diseño.
Aún así, Coolors se destaca porque es un producto útil y bien diseñado, y cuando un usuario puede concentrarse más en usar el producto que en su apariencia, los principios de UX han funcionado bien. Explorar los detalles minuciosos del diseño UX en este producto digital demuestra el impacto de las pequeñas cosas y delinea el proceso de traducción directa de la función a la forma. Las acciones del usuario que se describen a continuación destacan ejemplos de todo el diseño de UX, incluido el diseño de interfaz, la microcopia y la navegabilidad, que culminan en una experiencia de usuario productiva y entretenida dentro de Coolors.
Confirma tu correo electrónico con un código de color.
Desde el momento en que te registras con una cuenta de Coolors (que no es necesaria para usar el sitio), la aplicación adopta un enfoque inesperado para guiarte a través de la confirmación de la dirección de correo electrónico. Coolors rompe con lo que suele ser una tarea aburrida y molesta al utilizar un código de color para confirmar el correo electrónico del usuario, lo que contribuye positivamente a la experiencia del usuario al recordarle el propósito de la aplicación y darle una sorpresa. Para los diseñadores, este aspecto de crear una cuenta puede ayudarlos a sentirse más íntimamente conectados con el producto porque ya trabajan con colores y sus códigos de forma regular. También es mucho más divertido ingresar un código de color en el sitio web porque luego aparece el color correspondiente.
Disfrute de un texto claro y conciso en el tutorial.
La apariencia de las interfaces de usuario recibe mucha atención cuando se trata de cómo dan forma a la experiencia del usuario, pero la estrategia de contenido y la copia de la interfaz juegan un papel importante a la hora de guiar al usuario a través de diferentes funciones. En el caso de la imagen a continuación, Coolors ofrece instrucciones concisas para usar el generador de paleta de colores y explica cómo aprovechar al máximo la personalización de las paletas en unas pocas frases breves. La línea de apertura apela a lo que los usuarios ya pueden estar pensando mientras contemplan las paletas existentes; Dado que una paleta o color puede haberles llamado la atención de inmediato, la pregunta inicial de “¿Te gusta un color?” utiliza un lenguaje coloquial para reconocer las primeras impresiones de los usuarios desde el principio de su experiencia con Coolors.
Sin los detalles proporcionados en las instrucciones escritas a continuación, algunos usuarios pueden tardar más en descubrir cómo mantener sus colores favoritos en la paleta mientras cambian los demás para encontrar los mejores complementos. Dado que la capacidad de aprendizaje y la eficiencia son consideraciones cruciales para un diseño de UX eficaz, esta breve explicación podría tener un impacto significativo en la rapidez con la que los usuarios aprenden a navegar por Coolors y, lo más importante, si están lo suficientemente satisfechos como para regresar. Ser consciente de cuáles son las funciones y cómo utilizarlas puede llevar a los usuarios a tener una visión más favorable del producto.
Copie instantáneamente el código de un color.
Incluso si no necesita generar paletas y no tiene interés en guardarlas en colecciones o usar Coolors con regularidad, la función más inmediata dentro de Coolors seguirá siendo una excelente característica para trabajar en cualquier cosa relacionada con el diseño. Este es quizás el mejor ejemplo de forma que sigue a la función; Mientras visualiza cualquier paleta, el código hexadecimal de un color se puede copiar con un solo clic. La copia de la interfaz luego cambia del código de color a “¡Copiado!”. para informar al usuario que ha agregado el código a su portapapeles. Esta microcopia es muy eficaz para confirmar el resultado de la acción de un usuario.
Esta función no requiere una cuenta y se puede utilizar inmediatamente, lo que hace que sea casi perfecto copiar códigos de color que luego se aplican en Figma, Sketch, Adobe XD u otras plataformas de diseño. La facilidad de transferir un color elegido desde la aplicación web directamente a un proyecto de diseño hace que Coolors sea útil para los profesionales del diseño y otros usuarios creativos.
Al visualizar paletas, el punto redondo en los colores de la paleta es un indicador simple de qué color está seleccionado actualmente. Cuando cambia entre colores claros y oscuros, el punto cambia de negro a blanco para aparecer en marcado contraste con el color. Cuando el usuario pasa el mouse sobre los otros colores, aparece un punto atenuado, lo que invita a la percepción de que se puede hacer clic y demuestra claramente que esos colores también se pueden seleccionar. La selección inicial permanece en su lugar incluso cuando se invita al usuario a hacer clic en otro lugar, mitigando cualquier incertidumbre sobre qué color está seleccionado actualmente. Este efecto de atenuación también aparece cuando el mouse se mueve entre la variedad de códigos de color, lo que indica intuitivamente que la acción del usuario es posible allí y que hay otra función disponible. La claridad de la interfaz favorece la función porque las dos están profundamente integradas y aparecen como una sola para el usuario final. La copia de cualquier tipo de código de color deseado para el color seleccionado se puede realizar con un solo clic y, en el modo de visualización de paleta, esa acción se solicita con las palabras “Haga clic para copiar” a medida que el mouse se mueve sobre cada código. Esas tres palabras comunican de forma inequívoca tanto lo que recibirá el usuario como cómo conseguirlo. Todas estas características son detalles minuciosos que aclaran las funciones y ayudan al usuario a comprender lo que pueden hacer las diferentes entradas.
Organiza tus paletas guardadas.
Esta característica, que permite a los usuarios nombrar una paleta, agregar etiquetas, editar los colores y guardarla en un proyecto o colección, se destaca por la interfaz en capas que aparece. Con tantas acciones potenciales, la división en las cuatro pestañas que se ven a continuación (Información, Colores, Proyectos y Colecciones) hace que sea mucho más fácil usar las funciones que realmente necesita sin tener que desplazarse por otras; Con esta interfaz, el usuario puede ver todas las opciones disponibles en la pestaña seleccionada a la vez. El usuario solo necesita cambiar a las otras pestañas si desea realizar cambios más allá de guardar la paleta con un nombre. Este diseño está bien diseñado porque no inunda al usuario final con demasiado contenido, pero aún así contiene muchas opciones de personalización.
Compare los cambios de tono, brillo, saturación y temperatura con la paleta original.
La interfaz de paleta dividida diseñada para ofrecer esta función permite una comparación óptima del original con cualquier cambio que realice el usuario. Hay dos elementos clave del diseño UX a considerar aquí, particularmente dentro del contexto de la función que modifican. Las herramientas de ajuste de la derecha permiten al usuario editar aspectos como el tono o el brillo, y el formulario (la interfaz) lo ejecuta bien de dos maneras. Primero, a través de la nueva dualidad de la paleta, que le permite ver los cambios a medida que se aplican y considerar los cambios en comparación con la paleta original. Este diseño es ideal para permitir al usuario ver cuánto afecta cada cambio a la apariencia general.
En el lado derecho de la pantalla, se nos proporciona un conjunto diverso de imágenes para comunicar las configuraciones de tono, saturación, temperatura y otros elementos editables. Hay un número, signos más y menos y una barra con un interruptor. La barra se llena de color a medida que se cambia cada aspecto. Lo que esto hace es ofrecer al usuario numerosas formas de visualizar los cambios y realizar ediciones en incrementos de diversa precisión.
Esta interfaz incluye una gran cantidad de contenido sin parecer ruidosa ni abarrotada. Si solo existiera la barra deslizante, el usuario podría frustrarse por la falta de ajustes más pequeños e incrementales. Por otro lado, si solo hubiera números, no podrían ampliar las ediciones tan rápidamente, lo que limitaría su comprensión de cómo el tono o el brillo afectan los colores originales. Dado que estas herramientas visuales se utilizan juntas como parte de la función de edición, el usuario final tiene mucha flexibilidad y la posibilidad de gravitar hacia sus preferencias.
Aprenda a utilizar los iconos de Coolors.
En el modo de generación, hay un uso concreto de imágenes en forma de iconos, que se enumeran verticalmente en cada color. Durante el primer uso, es necesario pasar el mouse sobre ellos para ver qué hacen realmente. Después de un momento, aparece un texto con una o dos palabras que describen lo que sucede cuando se hace clic en el ícono. En el siguiente ejemplo, se revela un icono de cuadrícula para indicar que el usuario puede “Ver sombras” seleccionándolo.
Sin esa guía, un icono de cuadrícula podría corresponder a…