Usabilidad: El poder del botón naranja

Dentro de la usabilidad web y de la usabilidad en general el botón es uno de los elementos básicos de interacción y en la mayoría de los casos es el fin de todas nuestros esfuerzos por conseguir que el usuario complete una acción dentro de nuestro sitio web.

En este caso nos gustaría hablar de el poder botón naranja.

La idea básica es que un botón de un tamaño adecuado y de un color adecuado puede hacer que la conversión de nuestros usuarios a clientes crezca de manera sorprendente.

El mero hecho de cambiar un colo rojo por un verde puede aumentar alrededor del 20% el número de usuarios que ejecutan la acción.

Hay numerosos estudios y debates acerca de esta cuestión pero hoy nosotros vamos a defender el uso del botón naranja como llamada a la acción de compra en una tienda online u otros contextos webs, por la asociación de dicho color con valores positivos.

Se ha demostrado que colores como el rojo o el naranja provocan mucha más atención en el usuario y tienen un mayor poder de atracción.

El rojo es también un color muy usado ya que es tradicionalmente un color de llamada muy potente con gran capacidad de atracción. Sólo basta recordar el rojo como botón de grabación o el botón rojo que ejecuta el lanzamiento de misiles. La realidad es que el rojo también nos parece un botón que ejecuta una acción sin marcha atrás. Cuantas veces habremos escuchado en alguna película el clásico “no presiones el botón rojo”.

El punto negativo que tiene para nosotros el color rojo es que el rojo es un color relacionado con alertas, con peligro o con errores (alerta roja) y esto para una compra quizás no sea lo más adecuado.

De cualquier manera no podemos ser dogmáticos con esta cuestión ya que la percepción de los colores no es algo universal y varía en diferentes lugares, contextos y culturas.

En el gráfico siguiente se muestra un recurso interesante extraido de colormatters con las diferentes percepciones de los colores en diferentes culturas.

Percepción de colores en diferentes culturas

El naranja en concreto se muestra como un color que lleva asociadas interesantes connotaciones en todas las culturas como deseo, energía, equilibrio, aprendizaje…esa es una de las razones por la que defendemos el poder del color naranja para la conversión a la hora de realizar una compra. La pega principal del naranja es que hay que vigilar el contraste con respecto al texto y al fondo ya que es un color que desde el punto de vista de la accesibilidad no proporciona un excesivo contraste con el blanco. Para cumplir con las pautas de la WAI y también con nuestros usuarios podemos arreglarlo usando un buen tamaño de fuente y un botón bien grande que proporcione una considerable zona activa.

Sea como sea, repetimos que hay que tener en cuenta el contexto en el que aparece el botón y la finalidad del mismo para evaluar cual es el color más interesante y el que mejor nos ayudará a cumplir la función de dicho botón.

Esta claro que al final “para gustos colores”

Os dejamos algunos artículos más que hemos encontrado (en inglés) que tratan la cuestión de la elección del color para los botones y os recomendamos que os paséis por el sitio de colormatters si os interesa como a nosotros la cuestión del color.

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

http://money.cnn.com/2014/03/20/smallbusiness/boost-online-sales/

El concepto de Mobile First

mobile-first

Esta es una filosofía que entronca con el diseño multidispositivo y que defiende que el diseño de interfaz debe partir del diseño de las interfaces para dispositivos móviles, o sea, el móvil primero. La idea es que la adaptación progresiva a formatos más grandes se hará más fácil si se parte de la esencia de los elementos que se deben desarrollar en un dispositivo más pequeño. Digamos que sería algo así como ir de lo concreto a lo general, o al menos es como yo lo veo.

En la siguiente ilustración se hace una comparación de lo que sería una degradación gradual del diseño partiendo de formatos más grandes y siguiendo con el diseño de interfaces móviles y un diseño que se mejora progresivamente si se sigue el camino contrario.

progressive_enhancement

Algunos de los beneficios que promulga esta filosofía:

  • Permite el acceso a más usuarios (el 77% de la población mundial tiene móvil y el 85% de los móviles vendidos en 2011 estaba equipado con navegador)
  • Obliga a los diseñadores a centrarse en el contenido y funcionalidades centrales (¿que hacer cuando pierdes el 80% de tu pantalla para diseñar?)
  • Deja que los diseñadores innoven y aprovechen las ventajas de las nuevas tecnologías (geolocalización, eventos como arrastrar, pulsación múltiple, etc)

Os dejamos un dato por si pensáis que internet viene dentro de tu ordenador de sobremesa:
España es el país de Europa con mayor penetración de smartphones, al tener un 66% de los usuarios de móvil.
Casi 7 de cada 10 personas que tienen un móvil disponen de internet en su terminal.

Parece que en España cada vez más parece que va cobrando sentido eso del Mobile First. Si os interesa podéis encontrar el libro de Luke Wroblewsky, padre filosófico de esta idea.

Voy a ver como ha quedado esta entrada en el móvil 😉

Google opina que el diseño de tu sitio es importante

El otro día estudiando la documentación de Google Adwords para los exámenes de certificación me encontré una pregunta muy curiosa que os dejo aquí para clientes excépticos-conformistas y en general dedicada a todo aquel que pretenda anunciarse y venderse en internet y que tiene dudas acerca de la importancia de construir un sitio web con más o menos dedicación, esfuerzo y/o dinero.

Ahí va la pregunta:

Un anunciante ha realizado cambios al diseño de la página de destino asociada con un grupo de anuncios. El anunciante observa que el nivel de calidad de muchas de las palabras clave de ese grupo de anuncios ha aumentado. ¿Cuál es la posible causa de ese aumento?

  • a) El anunciante ha excluido las visitas de AdWords™ a la página de destino como parte de los cambios.
  • b) El sistema de AdWords™ volvió a visitar la página de destino y ha determinado que sea de una calidad mayor que antes.
  • c) El sistema de AdWords™ determinó que la página de destino del competidor más cercana a la anunciante es de baja calidad.
  • d) La clasificación del anunciante en el índice de búsquedas de Google ha aumentado recientemente.

 

¿Que has respondido?

Si has respondido b) sabes de que estoy hablando y además has acertado, enhorabuena !!!