Saltar al contenido

Diseñar para vender – Mejoras en mi tienda de regalos

25 mayo, 2011

Este post intentará enseñarte algunos trucos que uso a nivel de diseño, con los cuales mejoro la conversión de mis tiendas online.  En este caso, se trata de mi «otra» tienda de regalos personalizados www.regalosconfoto.com.

Esta tienda la monté en su día como apoyo a mi tienda principal www.mybestpresent.com, pero con el tiempo, las dos han evolucionado de forma independiente y han ido compitiendo entre si en el mercado del regalo personalizado. (Te explicaré más sobre la importancia de este tema en el próximo post).

La importancia de adaptar tu diseño a la evolución del mercado

Ya tocaba.  No había cambiado el diseño de esta página en casi 2 años.  Y con la velocidad que van cambiando las cosas a nivel online, no puedes permitirte tener una tienda con un diseño «anticuado», aunque solo sea por dos años.   La calidad de las webs va mejorando a pasos agigantados, y si te quedas estancado en un diseño antiguo, tu competencia, tarde o temprano, te adelantará.

Ayer terminamos el diseño y se estrenó la nueva web.

Vamos a analizar la portada de la página y veamos los factores importantes que hay en ella a nivel de conversión.

Diseño portada

La primera impresión que he buscado en este diseño es un diseño limpio y minimalista.  No hay cosa que más odie que las webs sobrecargadas con información y donde el visitante no sabe donde mirar o donde hacer click.  Cuando hay demasiada información de golpe, el visitante acaba agobiándose y marchándose de tu página.

La cabezera de la web

A continuación te voy a explicar lo que he intentado destacar en la cabezera de la web:

diseño cabezera

Lo primero que tienes que destacar es el logo de tu web.  Intenta crear un logo sencillo, moderno y que no esté demasiado sobrecargado.  El logo suele ser el primer sitio donde la gente mira una vez que entra en tu web.  Si ya de entrada el logo les parece bonito, hay gran posibilidad de que sigan mirando el resto de tu página.  En cambio, si ya de por si el logo les parece feo, entran en tu web con una actitud totalmente distinta, y menos predispuestos a comprar.

Lo segundo es el slogan.  Ya comenté en otro post la importancia de un buen slogan.  En esta web he optado por un slogan basado en la humildad y el trabajo.  No somos los más grandes, por eso nos esforzamos el doble creo que es un slogan que despierta simpatía, porque no vas de superior por la vida.  Demasiadas webs usan slogans de «somos los más grandes» «los más guapos» y «los más baratos».  La gente ya se ha cansado de este tipo de publicidad.  Sorpréndeles con cosas nuevas.

Y por último, creo que es importante que el visitante pueda encontrar en seguida el producto que busca.  Esto es lo que hace el menu de navegación.  Es claro y sencillo.

Fíjate también en el juego de sombras que hemos usado en el menu de navegación.  Las sombras son un recurso fantástico para darle efecto a los elementos de tu web.

El cuerpo de la web

Diseño central

Esta es la parte donde destaco el producto que más me interese vender.  Cuando el visitante llega a este punto, empezará a tener sus primeras dudas.  Estas dudas las intento resolver con los 3 pequeños banners que salen a la derecha.  El primero es un banner de contacto.  Mucha gente quiere respuestas rápidas y prefiere contactarte para que se las aclares.  Ese banner la da esa opción.

El segundo banner lleva a una página donde pueden leer más sobre nosotros y darse cuenta que detrás de la web, realmente hay personas. (Esto es un punto importante porque mucha gente aún no se fía a la hora de comprar por internet, y si le pones caras a la gente detrás de la web, ese miedo suele desaparecer.)

El tercer banner lleva a una página donde se responden la mayoría de las preguntas que la gente suele tener antes de comprar un producto.

De nuevo, hemos jugado con las sombras para darle un toque más elegante a los banners.

La parte inferior de la portada y el footer

diseño footer

En la primera sección verás que hay algunos productos destacados de la tienda.  No tiene demasiada importancia, pero si que ayuda al cliente a guiarle un poco hacia los productos que tu quieres que compren.  Mucha gente suele comprar las cosas que las webs recomiendan, o que estén en listas de «los más vendidos».  Esto lo puedes usar a tu favor para vender los productos que te interese que compren.

Entre los productos destacados y el footer hay una sección de texto cuyo único objetivo es el SEO.  Básicamente es la creación de un poco de contenido para que te ayude a posicionar la web.  No tiene más importancia que esa.

El footer si que es un elemento importante en la web por varias razones.

La primera y más importante es que no todo el mundo que entra en tu web lo va a hacer a través de la portada.  Por eso, todos los elementos como «quienes somos», «preguntas frecuentes», «contacto», etc. deberían estar visibles, independientemente de la página que el visitante esté viendo.

Otro factor importante son los iconos.  Poner iconos de pago como Visa, Paypal, La Caixa, etc. hará que el visitante vea elementos familiares que conozca, lo cual le quitará algo de miedo a la hora de comprar.

La página del producto

Esta página es igual o incluso más importante que la portada.  Vamos a analizar con detalle los elementos importantes de esta página:

página del producto
Click para agrandar

Aquí tengo que destacar varias cosas:

1- Opiniones de los clientes.  Usa las opiniones para persuadir a la gente a que compre.  Cuanta más gente haya pasado por el proceso de compra de tu web y te dejen un comentario positivo, más posibilidades hay de que otra gente se anime a comprar.

2- Remarca otra vez en el lateral las ventajas que tiene tu web y el contacto.  También puedes poner aquí un código de descuento para tus visitantes.  Mucha gente se anima a comprar por el simple hecho de tener un código de descuento.

3- El botón de «añadir a cesta» tiene que destacar.  Muchas webs lo tienen «escondido» y por esto pierden ventas.

4- La última sección de esta página está dedicada a responder las últimas preguntas que los clientes puedan tener a la hora de comprar tu producto.  Esto te ayudará mucho a ganarte los «indecisos» que no compran porque tienen alguna duda no resuelta y les da verguenza llamar o contactarte para que se la resuelvas.

El carrito de compras

Otra de las páginas importantes de la web.  Vamos a verla:

carrito de compra

Dos factores importantes en esta sección:

1- Vuelve a recordarle al visitante que puede ahorrar un 5% si inserta el cupón de descuento.

2- Remarca bien el botón de comprar.

Estos son algunas de las claves que hacen que mis tiendas online y mis tiendas de dropshipping tengan éxito.  Como último, quiero remarcar que siempre uso Magento para crear mis tiendas online.  Se que soy muy pesado con este tema, pero de verdad que si aún no usas este CMS gratuito, deberías plantearte hacerlo.

Espero que este post te haya ayudado a aprender algo nuevo sobre la venta online.  Como siempre, te sugiero que te registres en el lateral de mi blog para que te pueda enviar sugerencias directamente a tu email.

Un saludo…y hasta el próximo post!

Alex :)

Diseñar para vender – Mejoras en mi tienda de regalos

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentarios (36)

Hola! Me parece fabuloso que compartas tus conocimientos tan detallados con nosotros.

Yo llevo tiempo con ganas de crear una tienda de este tipo. No tengo ni idea de cómo la podría hacer. No sé por dónde empezar.

La idea de negocio la tengo clara. Solo me falta la parte técnica: crear una tienda de este tipo. ¿Qué conocimientos tendría que tener?

Sé bastante de SEO, no me resultaría difícil posicionarme. ¿Cuánto me podría costar hacer una tienda de este tipo?

Gracias por tu ayuda, te sigo de cerca porque me encantan tus artículos.

Saludos.

Responder

Hola Dani! muchas gracias por tu comentario. Mándame un mail y lo vemos.
Un saludo!

Responder

Muy interesante y completo, te felicito por tus diseños.
Mmmm sobre lo de Magento no se yo…
Prefiero Prestashop, tal vez porque llevo un par de años con el y no me quiero separar jeje.

PD: Si pudieras ofrecer Tarjetas de presentación, creo que te iría muy bien, además ami me interesa comprar algunas, a ver si te animas a ofrecer ese producto :=)

¡Mucha Suerte en todos tus proyectos!

Responder

Muchas gracias Youssef!
Magento y prestashop son muy buenos los dos…..pero yo soy un poco más fan de Magento. ;)

Un abrazo!
Ah..y tendré en cuenta tu recomendación. :)

Responder

excelente informacion alex,gracias por mandarme informacion que me ayudara a tomar la descision de hacer una tienda onlimea.saludos desde mexico.

Responder

Muchas gracias Eder :)

Responder

Muy interesante la información, como siempre. Comentarte nada más una errata que tienes en el footer de tu página http://www.regalosconfoto.com
En Garantía pone Estampaciones resisntentes, se ha colado una n.
Yo también utilizo Prestashop para las tiendas eso si intento poner en práctica todos tus consejos.
Un Saludo.

Responder

Ya lo hemos arreglado. Muchas gracias por avisar!!! :)

Responder

Gracias Alex, no tengo más que decir.

Ah! sí, también te deseo suerte, aunque como decía Seve Ballesteros «cuanto más me entreno, más suerte tengo» y está claro que tu te entrenas mucho.

Saludos

Responder

jajajajaj que crack.
Gracias, Antonio.

Responder

Eres el más GRANDE, álex!
Que subidón me da leer tus posts. No paro de aprender. Sigue así.

Responder

Hola Juanfran
Me alegro que te sean útiles los posts! Y referente a ser el más grande..si es a lo ancho..si. Lo reconozco.. estoy pillando algunos kilitos de más.. ;)

Un abrazo

Responder

Grácias crack!!

Responder

A ti por leerme. :)

Responder

Gran artículo Alex, como siempre.

Yo estoy ahora empezando con Magento y he de decir que la curva de aprendizaje es algo elevada, pero viendo tus resultados, parece que merece la pena. Una duda… te haces tú los diseños de cero o usas algún tema como base y luego le metes mano? Qué es mejor?

Responder

Hola Alberto!
Magento es un poco más complicado al principio, si. Pero una vez que le sacas el truquillo, es genial.

Yo suelo hacer los diseños desde cero. Voy buscando inspiraciones o ideas en otras webs y hacemos el diseño en Photoshop. Una vez terminado todo el diseño, se maqueta en html/css y se adapta a magento. Pero no es necesario que hagas todo esto, hay muchas plantillas fantásticas ya terminadas. En mi sección de «herramientas indispensables» encontrarás los sitios donde pillar esas plantillas.

Responder

Me gusta mucho como te quedó la web Alex! muy limpia :D

Responder

Gracias Bruno! :)

Responder

wowwwww,tienes la primera y la tercera posi por la key «regalos», enhorabuena!

Responder

si? mira..ni me había fijado! No suelo hacer seo para palabras tan genéricas en mis tiendas. Las palabras de productos o categorías tienen una conversión mucho mejor, pero siempre es una alegría estar arriba con todo tipo de palabras clave! ;)

Responder

Puff veo que ya vas retomando ritmillo, desde el boom de seonautas ya extrañabamos mas de vivirdelared, un gran post.
Saludos Alex

Responder

Gracias Jose Antonio! :)
Si..la verdad es que he estado un poco ausente ultimamente..
A ver si me pongo un poco más en las próximas semanas.
Un abrazo!

Responder

un consejo… todos estos enlaces con texto casi oculto:

Tazas personalizadas | Lienzos personalizados | Bolsos personalizados | Puzzles personalizados | Cojines personalizados | Imanes personalizados | Monederos personalizados Chapas personalizadas | Alfombrillas personalizadas | Parchis personalizado | Cestas de navidad | Regalos Originales | Regalos de cumpleaños | Sublimación | Regalos de Empresa | Regala Experiencias | Relojes | Regalos Mybestpresent.com | Regalos Día de la Madre |

…Cámbiales el color si no quieres que te penalicen en un spam report.

Como te decía, buen diseño, pero algo tan básico como esto puede estropearte todo el gran trabajo anterior…

Hasta luego!

Responder

Hola Miguel!

Tienes toda la razón. La verdad es que nos fué un poco el color en los enlaces. Ya lo hemos mejorado.
Gracias por comentarlo.
un abrazo!

Responder

ES FABULOSO LO QUE COMPARTES CON TODOS LOS QUE QUEREMOS SEGUIR ADELANTE APESAR DE TODO.GRACIAS POR ESTOS TIPS QUE DAS PARA MEJORAR .SIGUE ASI PORQUE TODO LO QUE HAZ LOGRADO ES POR COMO ERES
ABRAZOS……..

Responder

Muchísimas gracias Alessita. No sabes cuanto me ha alegrado tu comentario. :)
Un saludo y mucha suerte.

Responder

Llegué a tu blog por pura casualidad como suele suceder y me he quedado enganchado para siempre, gracias por compartir tu conocimiento e ideas. Me están ayudando mucho, porque no hace tanto que comenzamos con una tienda online y toda la ayuda prestada es poca, por eso te vuelvo a agradecer la que nos das tan desinteresadamente.
Hoy me he decidido a agradecértelo y aprovecho igualmente para mandarte mi mail y recibir así tus noticias.
Por cierto también tenemos un blog: http://blog.as-airsoft.es si puedes le echas un vistazo y me comentas

Responder

Hola Alex, me encanta tu blog, y como te ha quedado el nuevo diseño de regalosconfoto, me gustaría saber que plugin utilizas para ampliar las imágenes de los productos, me refiero a la parte donde pone «Doble click en la imagen para abrir/cerrar» y una barra de desplazamiento para hacer zoom en la imagen.

Muchas gracias

Responder

Hola Alex:

He llegado a tu blog, después de dar unas cuantas vueltas buscando palabras clave caras, como hosting, unsurance, etc.

La cuestión es que en poco tiempo he aprendido muchos trucos que son muy útiles y me ha servido para cambiar de mentalidad respecto al SEO. Quisiera que le echaras un vistazo a un nuevo proyecto que he comenzado, para que me aconsejaras un poco como subir posiciones en Google. La pagina es un Comparador de Precios.

Saludos.

Responder

Hola Alex, ¿Que tal? Me ha encantado el diseño, felicidades :D Espero que estés bien, y por si no me lees hasta entonces.. felices fiestas!!

Responder

Enhorabuena Alex!
Me gusta como cuentas la película, se entiende muy bien… Solo un detalle, en cuanto al diseño de «regalosconfoto». He visto que el botón de compra está lejos de la foto. Yo lo pondría al lado para facilitar la navegación. Aunque me gusta la idea de las opiniones. Lo aplicaré, con tu permiso : ) en la tienda que hicimos para este cliente: http://botiga.moya.es/
Ahora la veo un poco pobre… Saludos y gracias!

Responder

Hola!! Me encanta tu blog. Me encantaría aprender a realizar mis propias plantillas . Se hacer la maquetación con html y css, pero no se por donde empezar para adaptarlas para prestashop. ¿Sabes donde puedo conseguir información clara? es que no encuentro algo en claro la verdad. O mejor aun seria un post sobre este tema . Gracias y sigue así!!

Responder

Hola Alex, tu blog es muy interesante. Me estoy planteando utilizar ebay como medio de venta utilizando el método drop shipping pero no tengo información de proveedores de confianza….
¿ Me podrías indicar proveedores drop shipping ?

Muchas gracias :)

Responder

Hola cómo estás, gracias por compartir siempre tus conocimientos y ayudarnos con muchas ideas. Tengo una duda sobre las tiendas online. Soy de Ecuador, del sur del país, de una ciudad pequeña, quisiera hacer una tienda online que funcione localmente, pero no tengo ni idea de qué vender. Tengo conocimientos de programación y mi deseo no es sólo crear tiendas online, sino yo mismo administrar mi propia tienda. Qué me recomiendas hacer??? Tú fabricas por ejemplo los regalos personalizados o tienes un distribuidor??? Tú vas a cada distribuidor y les compras los productos o cómo le haces, espero tu ayuda y gracias desde antemano por tus sabios consejos.

Responder

Hola Alex!!!….sabes de alguna empresa que trabaje con dropshipping en el tema de regalos???

Muchas gracias

Responder

Mi felicitacioón muy bueno el artículo. ;).

Responder