Cómo el color afecta la experiencia de usuario y el comportamiento del usuario
Publicado: 2016-12-24Color: cuando un diseño lo hace bien, es probable que nunca lo note, pero ¿cuándo lo hace mal? No importa si se trata de un fondo demasiado brillante que llama la atención o texto negro sobre un fondo gris oscuro, las opciones de color por debajo del par pueden arruinar incluso la aplicación más funcional. Al igual que otros aspectos del diseño, el color no solo está ahí para darle vida a una aplicación. El color puede ser una herramienta como cualquier otra característica de la experiencia del usuario.
La filosofía de diseño gráfico utilizada para diseñar una aplicación, desde el tamaño de cada elemento hasta cómo se desliza por la interfaz de usuario y, sí, el color, afecta el comportamiento del usuario. Después de todo, hay una buena razón por la que los diseñadores suelen pasar los primeros meses de un proyecto angustiándose por las paletas de colores y no por los wireframes.
Elegir la paleta perfecta puede ser la diferencia entre diseñar una aplicación de meditación que realmente ayude a los usuarios a relajarse y una que haga que quieran tirar su teléfono a la pared. Es la diferencia entre una aplicación bancaria que lo pone nervioso al verificar su saldo y una que puede calmar sus ansiedades sobre cuándo llegará el próximo cheque de pago.
Entonces, ¿cómo hacerlo bien y qué puede hacer para dominar el color en su diseño?
Filosofía del diseño gráfico: la teoría del color
Antes de entrar en el meollo de la filosofía del diseño gráfico (¡y la psicología!), es importante comprender algunos principios básicos del color y el diseño. Si bien el color puede no parecer un tema excesivamente complejo, hay una buena razón por la cual cada clase de arte comienza no solo con una lección sobre cómo usar el color, sino también sobre cómo crear color.
Los conceptos básicos, como se explica en la rueda de colores, son simples: los colores primarios (rojo, amarillo y azul) se pueden combinar para crear colores secundarios (verde, morado y naranja). Del mismo modo, se pueden agregar varias fracciones de blanco a un color para crear matices, y se puede agregar negro para crear sombras.
Los colores opuestos entre sí (como el rojo y el verde o el azul y el naranja) se consideran complementarios. Estos colores contrastan fuertemente, haciéndolos resaltar cuando están uno al lado del otro (o encima de ellos).
Los colores que están uno al lado del otro se consideran análogos. Estos colores tienen un contraste mucho menor, lo que significa que tienden a no resaltar tanto cuando están juntos.
No hay nada inherentemente "correcto" o "incorrecto" en los colores con alto o bajo contraste. A veces, una aplicación requerirá colores brillantes que contrasten marcadamente entre sí. Otras veces, querrás algo que sea un poco más suave. En general, cuanto más desee que algo se destaque, más debe confiar en los colores contrastantes.
La mejor manera de tener una idea de cómo los colores van (y no van) juntos es jugar con ellos. Incluso si no está trabajando en un proyecto en este momento, un giro rápido de la rueda de color de Adobe puede hacer que su mente piense en el color de una manera nueva.
Muestras de emoción: color y psicología
Cuando está consolidando la filosofía de diseño gráfico detrás de su aplicación, no puede pensar simplemente en cómo se ven las cosas, debe pensar en cómo se sienten. Tampoco estamos hablando de retroalimentación háptica. Desde que Johann Wolfgang Goethe estudió los efectos fisiológicos del color, hemos estado obsesionados con el uso del color para producir efectos físicos y emocionales.
Incluso hoy en día, el color ocupa un lugar central en la filosofía de diseño de muchas marcas. La atención médica, las empresas y el gobierno tienden a usar el azul, ya que transmite una sensación de confianza y profesionalismo. El verde se considera un color juvenil lleno de energía y, por supuesto, refleja un sentido de ecologismo y cercanía con la naturaleza. El rojo es enérgico e impulsivo, dando la impresión de velocidad, eficiencia y potencia. Cada color que vemos (y ciertamente cada color que asociamos intrínsecamente con ciertas marcas) implica algo, ya sea directa o indirectamente, que ayuda a impulsar nuestra percepción de las marcas individuales.
Piense en las marcas y los símbolos que reconoce como muy centrados en el color. Apple, Wikipedia y The New York Times presentan colores en escala de grises, lo que simboliza una confiabilidad tranquila. Estas marcas se consideran equilibradas y fiables. Whole Foods, John Deere y Starbucks presentan tonos verdes en sus logotipos, conectando la naturaleza y la salubridad con su marca y sus productos.
Algunos colores incluso van más allá de sus marcas, definiendo industrias enteras. Piense en cuántas cadenas de comida rápida o restaurantes utilizan esquemas de color rojo o amarillo, por ejemplo. Estos colores ayudan a activarnos mentalmente, colocándonos en un cierto lugar psicológico que nos prepara para comprar algún tipo de producto.
Si bien esto es algo que los especialistas en marketing descubrieron hace mucho tiempo, la ciencia justifica muchos de nuestros sentimientos mutuos sobre el color. Se ha descubierto que el rojo, por ejemplo, hace que algunas personas reaccionen más rápido y con más fuerza a ciertos estímulos. También puede intimidar: los investigadores descubrieron que cuando los examinados veían el color rojo, sus puntajes eran peores.
¿Incluso más extraño? El color de una pastilla tiene un efecto leve sobre cómo funciona. Las pastillas azules funcionan mejor como sedantes, las amarillas funcionan mejor como antidepresivo y, en todos los casos, los colores brillantes funcionan mejor. Si bien es probable que esto sea solo el efecto placebo que aumenta nuestras respuestas a la medicación activa, el efecto es lo suficientemente fuerte como para que las empresas lo consideren al producir nuevos productos farmacéuticos.
Ahora, no estamos diciendo que el uso de un esquema de color basado en amarillo en su aplicación de seguimiento del estado de ánimo lo haga efectivo como antidepresivo, pero la paleta de colores que elija podría tener un impacto razonable en el estado de ánimo del usuario, así que elija sabiamente.
Recomendado para ti:
Cómo Metaverse transformará la industria automotriz india
¿Qué significa la disposición contra la especulación para las nuevas empresas indias?
Cómo las empresas emergentes de Edtech están ayudando a la fuerza laboral de la India a mejorar y prepararse para el futuro...
Acciones tecnológicas de la nueva era esta semana: los problemas de Zomato continúan, EaseMyTrip publica...
Startups indias toman atajos en busca de financiación
La plataforma de marketing digital Logicserve obtiene fondos de INR 80 Cr, cambia de marca como LS Dig...
Color y usabilidad
El diseño no se trata solo de verse bonito, se trata de funcionalidad y facilidad de uso, los dos principios que posiblemente sean los más importantes para cualquier diseñador de UX. Si la experiencia de usuario no es fluida, no importa cuán hermosa sea la paleta de colores elegida o cuán impresionante sea la interfaz de usuario. Si un usuario no puede deslizarlo de manera eficiente, no tendrá ningún poder de permanencia.
Pero, ¿qué tiene que ver el color con todo eso?
Simple: el color es una herramienta que puede ayudar a guiar el ojo . Si puede usar el color de manera eficiente, puede guiar a un nuevo usuario a través de su aplicación sin un extenso tutorial, una serie de videos complejos o incluso una sola palabra. Una interfaz de usuario intuitiva utiliza el color para dirigir no solo la atención del usuario, sino también sus interacciones con toda la experiencia.
Imagine, por un segundo, que está desarrollando una aplicación para una empresa de catering que ayuda a las grandes organizaciones a personalizar fácilmente los pedidos de comida. Un cliente potencial descarga su aplicación por primera vez y la abre. ¿Qué ven?
En la aplicación, la mayoría de los elementos del menú, incluidos el fondo y los cuadros de información, están coloreados en una paleta apagada y apagada de colores en escala de grises. La única excepción es un cuadro rojo anaranjado que dice "pedir". Como diseñador, usted sabe que lo primero que los usuarios quieren hacer cuando usan su aplicación es configurar sin problemas su pedido de comida. En lugar de ocultar esta función en lo profundo de la aplicación, o pedirles que se desplacen hacia abajo página tras página para llegar a ella, la estás poniendo al frente y al centro. No solo eso, sino que estás atrayendo su atención de inmediato. El color lo ayuda a sobresalir y muestra a los nuevos usuarios exactamente a dónde deben ir.
Del mismo modo, interactuamos con el color de varias maneras a diario y creamos ciertas asociaciones sociales en nuestra mente. Tome un semáforo, por ejemplo: verde significa avanzar, rojo significa detenerse y amarillo significa reducir la velocidad (o nos alerta de algo más adelante). Al poner una advertencia importante en amarillo, o al usar el rojo para resaltar algo, puede transmitir un mensaje poderoso que prepare al usuario para su aporte.
Sin embargo, esa misma lógica se puede usar para más que solo pantallas de advertencia. Cambiar el color de un botón en su aplicación que conduce a compras dentro de la aplicación puede afectar significativamente las tasas de conversión.
Si bien no estaba dentro de una aplicación, HubSpot descubrió que podían aumentar su tasa de conversión en un 21 % simplemente haciendo que un botón fuera rojo en lugar de verde. Ahora, esto no significa que deba cambiar cada botón de compra dentro de la aplicación a un carmesí brillante, pero aquí se puede argumentar que el color no puede ser solo parte de su filosofía de diseño: tiene que ser central para toda su filosofía de desarrollo de aplicaciones.
Uso inteligente del color: una filosofía de diseño y accesibilidad
En Proto.io, la accesibilidad siempre está a la vanguardia de nuestra filosofía de diseño. Para ser franco, la accesibilidad es algo que debe integrarse en un buen diseño. Si no está ahí, entonces el diseño simplemente no es muy bueno.
Alrededor del 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de daltonismo. Contrariamente al pensamiento popular, no existe un tipo singular de daltonismo, pero el daltonismo rojo/verde tiende a ser el más común. Alguien que sufre de esta forma de daltonismo generalmente tendrá problemas para ver variaciones tanto de rojo como de verde. Si bien la gravedad de esta forma de daltonismo varía bastante, incluso el daltonismo leve de rojo/verde puede hacer que el uso de muchas aplicaciones sea prácticamente imposible.
Aparte de la ceguera al color, los usuarios miopes a menudo tienen dificultades para leer texto con bajo contraste a menos que muevan la pantalla cerca de su cara, algo que potencialmente puede afectar la usabilidad de muchas aplicaciones.
La solución a ambos problemas es bastante simple: evite usar colores que no contrasten cuando muestre texto sobre un fondo . Si bien no puede garantizar que todos puedan ver su aplicación de la manera que desea, si usa colores contrastantes, al menos le dará a las personas una aplicación que pueden usar. Del mismo modo, el uso de colores de alto contraste hará que el texto sea más fácil de leer para todos, incluso si no tienen problemas de visión.
Otra opción para aumentar la accesibilidad es ofrecer paletas de colores intercambiables en su aplicación. Si bien esta no es una opción para todos, puede aumentar en gran medida la accesibilidad de su aplicación. También puede permitir que los usuarios cambien el color de características específicas. Por ejemplo, podría tener una opción que cambie el color de acento de su aplicación o el color del texto en toda la aplicación. Si bien ambas opciones pueden quitarle algo de control, garantizarán que su aplicación sea accesible para un público más amplio.
Si todavía tiene dificultades para descubrir cómo integrar el color en su filosofía de diseño de una manera que no perjudique la accesibilidad de su aplicación, le sugerimos que consulte la biblioteca de diseño de materiales de Google.
Elegir la paleta perfecta: consolidar su filosofía de diseño
Aunque debe quedar claro que hay algunas reglas a seguir cuando se trata de color, tampoco es necesariamente una ciencia. El color a menudo se trata de cosas más abstractas, como la sensación. Incluso si su aplicación no intenta manifestar algún tipo de emoción en un usuario, eso no significa que no lo hará. Si bien encontrar la paleta perfecta no es un esfuerzo en blanco y negro, sugerimos comenzar con algo en escala de grises .
Cree un prototipo plano de su aplicación en un degradado de escala de grises y utilícelo como línea de base. Tome nota de cómo se ve y se siente: páselo a su equipo de control de calidad y vea lo que tienen que decir. ¿Su proceso de incorporación es turbio sin color? ¿Está llamando la atención sobre las partes incorrectas de su aplicación? Con estos comentarios, diseñe algunos prototipos más, esta vez incorporando color. No confíes en una paleta singular. En su lugar, siga el ejemplo del sitio web de diseño de materiales de Google y juegue con algunas de sus muestras.
Envíe estas revisiones también al control de calidad. No tenga miedo de probarlos A/B entre sí (y contra la versión original en escala de grises). Asegúrate de hacer algunas preguntas difíciles sobre los colores que vas a incluir en la refriega. ¿Utiliza el color para guiar la vista del usuario en la aplicación? ¿Estás lanzando color en la pantalla solo para agregar una chispa? ¿El color distrae al usuario de llegar a donde quiere ir?
No te olvides de la psicología del usuario o la accesibilidad. Si está creando una aplicación de viajes, ¿de verdad quiere que todo sea de color rojo brillante? Si está creando una aplicación de atención médica, ¿su fondo debería ser realmente verde? ¿Tus colores contrastan lo suficiente para que el texto sea legible?
Un buen diseño de UX tiene en cuenta todas estas preguntas; después de todo, el color tiene un impacto definitivo en el comportamiento y el disfrute del usuario. Si su filosofía de diseño no tiene esto en cuenta, podría estar creando una aplicación que no es tan accesible o utilizable como cree que es. Asegúrese de crear un prototipo de su diseño en cada paso del camino y no se obsesione demasiado con uno o dos colores.
Experimente, elija otro color y continúe revisando hasta que encuentre la paleta perfecta para usted.