Qué importante es el uso del color como elemento para separar capas de información, centrar la atención donde hay que centrarla, mejorar la usabilidad de una aplicación y, en este caso concreto, incrementar el número de descargas del navegador.
Una captura de la página de de Apple para la descarga de Safari 4.0:
Fijaros cómo se utilliza el color azul degradado para el botón de la descarga y el naranja en el rectángulo superior de la página para crear un punto focal de atención. Al igual que podemos establecer jerarquías de información durante el diseño de un componente con sus correspondientes elementos, podemos establecer jerarquías de información basadas en colores.
En este diseño creo que el uso del color no es óptimo y se puede mejorar. Como me comentaba un compañero el otro día, Fernando, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul. Generalizando más, también para las descargas y las llamadas a la acción.
Fijaros en la diferencia entre la pantalla de arriba y la de abajo con el código de color del botón y del rectángulo de la esquina invertido:
Habría que testarlo pero apuesto a que este segundo tendría un ratio de número de clics mayor que con el actual botón azul. La jerarquía de color es óptima (el más cálido y llamativo es el elemento más importante en el que se quiere crear el punto focal de atención -el botón de la descarga-) y el azul para el otro elemento que crea un punto focal de atención secundario en la página tanto por su color característico frente al gris y al blanco que lo rodea, como por su forma triangular que rompe con todas las líneas rectas y bordes redondeados del diseño.
AOL, por ejemplo, también usa el naranja-calabaza para el botón de buscar del buscador de su home:
Botón de buscar del buscador principal en la home de AOL
Curiosamente en la pantalla de logado del webmail invierten el patrón y centran la atención en el botón de registrarse y crear cuenta frente al de logarse:
Botón de logado de color azul en AOL y naranja para el de registrarse y crear nueva cuenta
Yahoo España y Yahoo internacional siguen el mismo patrón de colores para los botones del buscador y de acción:
Botones de color calabaza en Yahoo España, del buscador y de quedarse en la versión local de la página del usuario
En Amazon.com usan el naranja como color para el botón de “Mostrar todos los departamentos” y el botón para lanzar la búsqueda con el rótulo “Go” que además lo hacen circular para convertirlo en un punto focal de atención por su forma (el círculo es un elemento que añade una fuerte tensión visual e interés a cualquier diseño):
Botones de color naranja de "Mostrar todos los departamentos" y ejecutar búsqueda de Amazon
En lugar del naranja-calabaza, Firefox utiliza un color verde para el botón de descarga, también admisible. Originalmente el verde que utilizaban era muy oscuro y con el paso del tiempo se ha ido aclarando mucho. Además incorporan la palabra “Free” al rótulo principal con lo que han conseguido, como comenta Yusef (no encuentro el enlace, si localizo la presentación donde lo ví lo pongo) incrementar el número de descargas del navegador.
En este caso particular es posible que la elección del color verde para el botón sea plenamente consciente e intencionada para potenciar el logotipo de Firefox y no robarle protagonismo. Los colores naranja, calabaza y amarillo otorgan gran predominancia al logotipo junto al hecho de que sea redondo frente al resto de elementos de líneas rectangulares (con excepción de las palomas, no entiendo el motivo de que figuren ahí al igual que el ¿altavoz? ¿biberón? de la cañería) convierténdolo en un punto focal de atención muy fuerte. En la página creo que hay demasiado ruido por el uso de la imagen de fondo lo que va en detrimento de la usabilidad de la tarea principal a la que está enfocada la página -la descarga del navegador- si la quitasen o planteasen otro diseño mucho más limpio como el de Apple posiblemente obtendrían un mayor número de descargas:
Botón verde de descarga de Firefox
El uso de los colores es un aspecto crítico para las webs.
Es necesario conocer los fundamentos básicos de la teoría del color para poder juzgar de manera mínimamente objetiva y con razones y argumentos de peso por qué funcionan unos diseños y otros no. De nuevo, queda pendiente publicar un post (otro) sobre colores y usabilidad. El tema es realmente fascinante y mucho más complejo de lo que uno podría pensar a priori, y lo más llamativo, es un aspecto al que prácticamente hasta hace muy poco no se le ha comenzado a prestar atención más allá de la pura faceta estética o emocional cuando en realidad, es un aspecto fundamental para la usabilidad de cualquier interfaz.
- Tab Candy o la evolución de los sistemas operativos según Mozilla
- Logotipo de Spanair: Sonría por favor (o el círculo como elemento de diseño semiótico)
- Two ideas to humanize and improve the URL's information visualization on Firefox 4.5
- Sobre la usabilidad de la barra de estado de los navegadores
- Mouseless: diluyendo el ratón e interacción ubicua con ordenadores y móviles
Información Bitacoras.com…
Esta anotación ha sido propuesta por un usuario para ser votada en Bitacoras.com. Para que el proceso finalice, deberás registrar tu blog en el servicio….
Posted by Bitacoras.com on Diciembre 21st, 2009.
“Como me comentaba un compañero el otro día, Fernando, para los botones en tiendas de comercio electrónico funciona mejor el color naranja-calabaza que el azul.”
No creo que se pueda generalizar tan alegremente. Es cierto que el naranja funciona muy bien sobre fondo blanco o en páginas que usan el azul como color principal pero poner un botón naranja en una web donde predomina este color, Terra por ejemplo, sería un suicidio.
Lo que hay que buscar es el contraste para llamar la atención, y en unos casos será el naranja y en otros cualquier otro color.
Posted by Jimena on Diciembre 21st, 2009.
Hola Jimena. No todos los colores funcionan igual de bien para los botones porque no todos los colores se perciben desde un punto de vista psicológico y físico visualmente de la misma forma dado que la naturaleza de la luz de la que se componen y que percibimos es diferente.
Por ello unos son cálidos y expansivos, atraen la atención y por ende, son más susceptibles de ser más pulsados que otros como los botones de color oscuro, como por ejemplo, grises, azules o negros, que parecen contraer el área que rellenan y alejarse. Dos formas con el mismo área rellenas de diferentes colores se perciben como mayores o menores según sus colores de relleno sean más cálidos o fríos.
Si la línea gráfica de la página se basa o deriva de los naranjas, amarillos, etc, para los puntos focales efectivamente habrá que utilizar otros colores para crear contraste. Es lo que comento en el caso de la página de descarga de Firefox en el que para evitar competir con el logotipo del navegador que contiene estos colores (rojo, naranjas y amarillos) se ha optado por emplear el verde.
Por otro lado, el código semiótico que transmiten los colores en función de cada cultura varía. En la occidental, la nuestra, el naranja -y esto no es más que una hipótesis- se puede asimilar con un estado de transición derivado de la asociación natural que podemos realizar con los tres colores de un semáforo: verde -adelante-, naranja -transición, acción-, rojo -peligro, stop, parada- y cualquier otro valor semiótico que le quieras/se te ocurra asociarles.
Por eso comento que el color naranja/calabaza parece funcionar mejor que otros colores para los botones de acción. Cualquier otro color no. En general los cálidos tendrán más probabilidad de ser pulsados que los oscuros (piensa por ejemplo en un botón negro). En cualquier caso y comparto el beneficio de la duda, hasta que esto no sea refrendado por estudios y tests de usuarios no es más que teoría, pero en mi opinión, una teoría que tiene una base científica lo suficientemente sólida como para pensar que esto sea así.
Posted by tentandote on Diciembre 21st, 2009.
para mi el de mac esta perfecto!
Posted by asael2 on Diciembre 22nd, 2009.