El uso de colores en las interfaces

Diseño UX
02/12/2016
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Hace un tiempo ya os hablamos del uso del color en las interfaces de usuario, hoy os vamos a hacer una pequeña explicación con ejemplos prácticos del uso de varios colores en interfaces de usuario.

A couple of red traffic lights against a blue sky
Foto de Horia Varlan

Podría decirse que los colores en una interfaz son los semáforos de la experiencia de usuario. Como ya dijimos en aquel post, los colores transmiten emociones que se trasladan a la interfaz cuando los usamos. Además, hay unas convenciones de color más o menos universales que no conviene romper.

Rojo

El rojo es el color de las advertencias en las interfaces (junto con el amarillo). Además, esta es una convención muy extendida, ya que en los primeros GUIs aparecía una señal de tráfico de advertencia (que son de color rojo) con una exclamación. Ahora, esta función se comparte con el amarillo, ya que éste color se diferencia mejor en las interfaces actuales donde el rojo puede ser usado para branding o para indicar que se está en época navideña en una interfaz web.

El rojo se sigue usando para acciones como ir hacia atrás, cancelar, o darle color a botones que no quieres que tus usuarios hagan uso de ellos. Es decir, para acciones que conllevan peligro al ejecutarlas o que no quieres que tus usuarios realicen.

Amarillo

El amarillo se ha convertido en el nuevo color de las advertencias. Esto se debe a diversas razones: tiene un componente aprendido, al usarse también en las señales de tráfico y en las advertencias de seguridad. Además, el rojo puede confundir al usuario y no ser tan claro como el amarillo para indicar peligro en una interfaz actual, como ya hemos dicho antes.

Naranja

El naranja es el color de los CTAs. Si quieres que un CTA de compra funcione, sigue la regla de un gran botón naranja (BOB en sus siglas en inglés).

El naranja es un color llamativo y que destaca sobre casi cualquier paleta de color elegida, por lo que los usuarios que escanean y no leen un interfaz encontrarán el CTA más rápidamente.

Azul

El azul es el color de la tranquilidad y el color habitual de los sitios gubernamentales como ya dijimos en el post sobre los US Web Standards. En una interfaz normalmente se usa para indicar que un sitio es seguro (los candados azules son cada vez más habituales) o para dar tranquilidad al usuario como en la mayoría de apps móviles bancarias, donde el azul es el color de los botones de la interfaz.

Verde

El verde es el color de la salud y de la aprobación y el fomento.  Si en una interfaz quieres hacerle saber a tus usuarios que han realizado una acción bien, nada como un tic verde grande para hacérselo notar. Además, si quieres que un usuario siga realizando una acción, nada como una ilustración con colores verdes. Por otro lado, el color verde se asocia a la salud en interfaces como los juegos de rol, donde las esmeraldas verde dan salud al personaje, o en medicina para indicar que se está en niveles seguros.

Ver también:

Artículo actualizado en marzo 2022.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.