Desarrollo Web Diseño Medios Digitales

El color en el diseño de UX

06/14/2016

El color es el aspecto inicial mediante el cual nuestra percepción genera un juicio estético sobre un sitio web o cualquier pieza de diseño. Pero aún siendo tan intuitivo, añadir un color u otro debe hacerse desde el sentido de utilidad que tiene para la experiencia de usuario. Después de todo, en todo sitio web el objetivo número uno debe ser la experiencia de usuario, por sobre incluso de los valores estéticos.

Los mejores sitios webs, usualmente, combinan hermosas paletas cromáticas pero al mismo tiempo pensadas para crear una experiencia de usuario inteligente, sencilla y que aumente cualitativamente y cuantitativamente la navegación por el sitio. Conocer estos aspectos tiene tanto que ver con la teoría fundamental del color como también con los aspectos más específicos de la experiencia de usuario.

En resumen, un color no sólo debe estar ahí porque es de su marca, porque es el color institucional, porque «le gusta a cliente», si no también porque añade y facilita la navegación, la percepción y comprensión de un sitio web.

Algunos aspectos específicos.

Uno de los objetivos más importantes en un sitio web es ayudar al usuario a encontrar el contenido que desea de forma rápida y eficiente. Esto es prioritario en los sitios de noticias, donde el contenido se actualiza varias veces al día y en muchas categorías. Si los diseñadores no utilizaran el color para jerarquizar las categorías destacadas, los usuarios no serían capaces de separar las noticias importantes, de las recientes, o las recientes de los reportajes.

Revisemos el ejemplo de cnn.com.
En la siguiente imagen vemos de que manera los únicos elementos de color rojo, son los que tienen la categoría de BREAKING NEWS, de esta manera todo el resto del contenido pasa a un segundo plano frente a ese jerarquización. De igual forma las fotografías, tomadas como un elemento cromático de alta visualización, también suman un nivel de jerarquía al layout del sitio.

cnn

Los colores complementarios siempre se han utilizado como una herramienta para destacar un elemento sobre otro, marca un contraste, y en diseño web también nos ayudan a guiar la vista hacia la información que queremos destacar. En el siguiente ejemplo vemos como el color amarillo esta cuidadosamente utilizado para resaltar el botón sobre el banner, probablemente la paleta cromática azul de las fotos tampoco es algo casual, este contraste ayuda al usuario a dirigir la vista rápidamente hacia donde quiere el diseñador.

cnn

En la misma página, encontramos nuevamente el color amarillo cuidadosamente utilizado para resaltar esta vez, no el botón, si no que la categoría a la que pertenece el contenido destacado. La paleta azulada del sitio general contrasta con el amarillo de los detalles a los que queremos llamar la vista.

cnn

La Jerarquía Visual es un concepto base del diseño. Utilizado correctamente conduce al usuario ya que el sitio se vuelve mucho más fácil de usar cuando las prioridades de dónde buscar están claras. Por el contrario, el siempre fallido intento de «destacar todo» siempre resulta en una en dónde nada tiene una jerarquía clara y en donde todo parece de la misma importancia. Tener claro «qué» es más importante en mi mensaje es clave para lograr una correcta jerarquización.

El ejemplo de Google es de gran importancia para la industria. Su técnica de diseño ha convertido a su páleta cromática en un referente de diseño. Los 4 colores básicos: azul, amarillo, verde y rojo, se convierten en un foco principal de su jerarquía, dejando los colores secundarios como una opción de soporte o apoyo para ciertas zonas de sus diseños.

Encontramos este tipo de uso en algunos de los siguientes ejemplos: googleplay.flatata.com, google.com/search/about o shopping.thinkwithgoogle.com.

Mientras que los colores definitivamente arreglan cualquier sitio, especialmente cuando se utiliza con las mejores prácticas de la teoría del color, tienen que servir a un propósito mayor cuando se diseña para sus clientes. Ellos tienen que cumplir una función de usabilidad y experiencia. De no hacerlo, significa que no está dando a sus usuarios la experiencia de usuario que se merecen.

Antes de añadir un color a su nuevo sitio web piense en cómo esa combinación está ayudando a la usabilidad del sitio.

You Might Also Like

No Comments

Leave a Reply