Elusodelcontrastede

coloresaldiseartusitio
mvil

porAndreaSanchezOct18,2015

0Lobuenosecomparte
Facebook
Twitter
Linkedin

Debido a la popularidad en crecimiento del comercio

mvil, cada vez hay ms clientes que se interesan
por consumir a travs de estos dispositivos, por lo
que si tu tienda online an no est preparada para
ofrecer una experiencia de compra mvil fluida,
cmoda y sin limitaciones, tus clientes van a
comenzar a perder inters en tu negocio, aunque tus

productos sean excelentes.

Simplemente no hay manera de evitar la tendencia
de usar dispositivos mviles. Al menos, eso es lo
que las estadsticas muestran. La firma de
investigacin de marketing Smart Insights reporta
que los dispositivos mviles estn imponindose
ante los dispositivos de escritorio en dos reas
importantes: el tiempo de uso y como medio de
comunicacin. Ponindolo en palabras ms claras,
cada vez hay ms personas navegando en internet
desde su smartphone o tablet, en lugar de su
computadora de escritorio.
Esto tambin significa que cada vez hay ms
personas que disfrutan la experiencia de compra en
lnea. De hecho, un informe de TheStreet.com
acenta que la satisfaccin del cliente en el comercio
electrnico aument en ms de 5% este ao.
Mientras ms experiencias positivas se generen al
comprar en lnea, habr ms personas que decidan
experimentar y hacer compras en lnea, en lugar de
acudir a una tienda fsica.
En este momento debes poner en prctica tus
habilidades de diseo web. Mediante la creacin
de sitios mviles que ofrezcan una experiencia de
usuario envidiable, ms clientes vas a tener y ms
dinero va a generar tu tienda online. A su vez, esto
conducir a realizar ms negocios y ms clientes.
Entonces, cmo lograr esto?
Una de las mejores maneras es utilizar el contraste
de colores al momento de disear tu sitio mvil. A
continuacin te mostramos como lograrlo.

Contrastedecolorparamostrar
jerarqua

En el diseo web, la jerarqua se define como las

relaciones entre los diferentes elementos de diseo
que los usuarios perciben, as como la importancia
dada a dichos elementos. En esencia, la jerarqua es
una forma de comunicar qu elemento es ms
importante en una pgina web, ayudando a que el
usuario le preste atencin con sentido de urgencia.
Cuando entiendas y aprecies cmo es que la
jerarqua se puede aprovechar para que ciertos
elementos influyan en el comportamiento del
usuario, podrs disear pginas del sitio mvil de tu
tienda online eficaces, que apoyen el cumplimiento
de los objetivos de tus clientes e incrementen tus
conversiones.
Hablando de conversiones en el comercio
electrnico, la importancia de la jerarqua dicta cmo
se comunica un producto u oferta al comprador, tras
lo cual se tiene la oportunidad de actuar a travs de
un llamado a la accin o call to action sencillo, pero
bien pensado.
El sitio mvil de Pepsi es un excelente ejemplo de
esto:

Nota como el ttulo principal est en blanco y se

muestra en la parte superior de la pgina, lo que
llama la atencin del visitante casi de inmediato. El
contraste de color entre las letras blancas y azules
facilita una lectura fcil. Adems, el ttulo est
ubicado justo al final del primer movimiento
horizontal, que constituye un patrn de lectura tpica
en forma de F, bastante comn entre los lectores de
pginas web. Todos estos elementos trabajan en
conjunto para que el ttulo se convierta en la
caracterstica ms importante en la jerarqua de la
pgina.
A partir de ah, la visin del usuario va directamente

al botn amarillo situado justo debajo del ttulo, ya

que el contraste de color es an ms fuerte.
Debido a que el botn es ms pequeo que el ttulo,
los ojos de los usuarios slo le van a prestar atencin
despus de leer el ttulo.
Utilizar contraste de colores para mostrar
jerarqua entre estos dos elementos es un excelente
ejemplo de cmo el color es utilizado en la
experiencia de compra mvil para generar
conversiones. A partir de ese momento, los usuarios
pueden simplemente darse de alta en el programa
de lealtad de Pepsi en la siguiente pgina.

Contrastedecolorparasealesde
direccin

Las seales de direccin son elementos en la pgina

que apuntan fuertemente la atencin del cliente al
call to action en un sitio. El mejor ejemplo de esto
son las flechas notables que apuntan a botones de
comprar o inscribirse.
Sin embargo, el contraste de color puede funcionar
para apuntar direcciones de manera sutil, siendo
eficaz para ayudar a conducir conversiones para
tus clientes.
Recuerda que las seales de direccin tienen que
centrar la atencin del comprador en el botn de
llamado a la accin. El sitio mvil de Macys entiende
este principio de manera excelente
En la pgina principal del sitio, notars el uso
abrumador de tres colores: rojo, negro y blanco. Esto
no es casualidad; los tres colores contrastan entre s
fuertemente y de manera eficaz.
El ejemplo ms obvio se basa en el contraste de
colores del anuncio 5 Day Specials en el lado

izquierdo de la pantalla.

Nota cmo el fondo de la seccin es rojo, pero el

botn de llamado a la accin es blanco. Blanco sobre
rojo crea un contraste ntido, dirigiendo los ojos del
comprador directamente al botn de Shop All.
Pero no es todo. Para llevar ms all este contraste,
utiliza una tipografa en color negro dentro del call to
action. La frase Shop All se destaca del botn
blanco, lo que hace que la atencin del comprador se
centre sobre la accin deseada.
Bueno, ese fue un ejemplo relacionado con el
llamado a la accin. Sin embargo, Macys tambin
utiliza este contraste de colores en la funcin de
bsqueda ubicada en la parte superior de su pgina.

La funcin de bsqueda es parte importante de todos

los sitios de comercio electrnico, ya que ayuda a
que los visitantes encuentren rpidamente lo que
estn buscando. Es por eso que debe ser fcil de
utilizar, algo que Macys logra correctamente.
El campo blanco de la barra de bsquedas contrasta
fuertemente con la lupa roja, que de acuerdo con las
mejores prcticas de diseo, funciona como botn de
bsqueda. La vista de las personas va a ser atrada
hacia el botn de bsqueda, que se destaca
crudamente. Ahora, si tomamos ms all el concepto
de contraste, tambin vemos como el campo de
descripcin explica lo que los usuarios
probablemente escribirn en la barra de bsqueda
en color negro y que va de acuerdo con el fondo
blanco.
Ambas decisiones de diseo aumentan
considerablemente las posibilidades de que los
compradores entiendan que deben escribir la barra
de bsqueda y en donde deben hacer clic para
realizarla.

Contrastedecolorpararesaltar
imgenes

Las imgenes son de vital importancia en la

experiencia de compra mvil del usuario. Debido
a que es comercio electrnico, el cliente no puede
tomar el producto, por lo que las imgenes funcionan
para darle una idea de cmo luce de cerca, de lejos y
a detalle. Mostrar imgenes de alta calidad y sper
detalladas permite que los usuarios experimenten de
cerca lo que van a comprar.
Se han hecho estudios que muestran que la inclusin
de imgenes en las pginas de productos aumenta

las tasas de conversin. Cuando los clientes no

pueden examinar personalmente el producto en una
tienda, es comprensible que piensen dos veces antes
de completar la compra. Quin quiere comprar algo
que no puede ver a detalle?
Con el fin de poner de relieve estar imgenes en las
pginas de productos, los diseadores web deben
utilizar el contraste de colores para hacer que
cada imagen de producto luzca mejor y llame la
atencin del cliente, lo que permite visualizarlas de
manera ms ntida.
La tienda online ms grande, Amazon.com, sobresale
al mostrar imgenes que cuenta con un contraste de
color utilizado para que los clientes vean fcilmente
lo que van a comprar.
En la pgina del producto DualShock 4 Wireless
Controller para PlayStation 4, el azul ola contraste
maravillosamente con el fondo blanco, por lo que el
producto luce colores ms vivos. Como resultado, se
puede apreciar cmo luce el producto y hasta sentir
que lo ests tocando, para despus decidirte y
comprarlo. Amazon tambin muestra el control
desde diferentes ngulos, lo que facilita que los
compradores imaginen cmo van a interactuar con l
cuando ya lo hayan adquirido.

Untoquedecolorparamejorarlos
diseosdecomerciomvil

Parte importante del comercio electrnico

actualmente es el comercio mvil. De acuerdo con
Statista.com, el gasto realizado en tiendas online
desde mviles super los $11 mil millones, solo en el
primer trimestre del 2015. Esta cifra es mayor que
nunca, lo que demuestra una tendencia de gasto que
indica que el comercio mvil tiene un excelente
futuro. Es por eso que como diseador, te
recomiendo que la plantilla que utilices para la
versin mvil de tu tienda online sea fcil de
navegar y permita realizar compras sin problemas.
Tus clientes te agradecern los ajustes adicionales y
las consideraciones que tengas en el diseo mvil.
Una de las tcnicas que puedes agregar, bastante
sencilla, es el contraste de color. No necesitas
tener conocimientos tcnicos, slo conocimientos
bsicos de teora del color y la forma en la que los
contrastes ayudan en diferentes elementos de una
pgina.
Como se puede ver, si los grandes minoristas ya
estn utilizando el contraste de colores en sus sitios
mviles, es porque funciona! El contraste promueve
el objetivo de cada sitio de comercio electrnico, que
es conseguir ventas y conversiones. Esto ayuda a
guiar a los compradores y hace mucho ms fcil el
proceso de navegacin en sitios mviles.
Si puedes aprovechar este conocimiento en
diferentes proyectos de diseo, hazlo!, puedes
impresionar a tus clientes y ofrecer un impulso en la
tasa de conversin. As que la prxima vez que
necesites hacer hincapi en la jerarqua de un

elemento, incluir una instruccin de direccin o

mostrar imgenes tiles, considera que el contraste
de colores puede llevarte al xito.
En resumen, el contraste de color trabaja en el
diseo mvil de tu tienda online, a travs de:
Jerarquas
Direcciones
Imgenes
Cul es tu estrategia del uso del color en tus
sitios mviles? Comparte tus tips en los
comentarios.