Categoría:

Diseño Web

Artículos de diseño Web con criterios de usabilidad y conversión

4 aprendizajes en Conversión Online para StartUps

El argentino Cristian Rennella, ingeniero en sistemas y Co-Creador de elMejorTrato.com, envía un artículo sobre cómo lograr conversión en un sitio Web. Los dejo con el artículo:

No hay lugar a duda, que para un emprendimiento, las conversiones a resultados son el eslabón fundamental para el éxito o el fracaso del mismo. Lamentablemente no hay margen para la inversión de tiempo, esfuerzo y mucho menos capital sin obtener a cambio resultados medibles para seguir creciendo.

Me gustaría compartir a continuación, los 4 aprendizajes alcanzados en los últimos 5 años desarrollando nuestro emprendimiento a través de Internet:

1) ¿Qué es lo que hacemos?

Entender que cuando ingresa un nuevo usuario a nuestro Sitio Web tenemos un máximo de 5 segundos para que entienda que es lo que hacemos y que beneficios le podemos ofrecer es clave para alcanzar una conversión de alta eficiencia en nuestro emprendimiento online.

Lo podemos ver hasta en nosotros mismos, intentemos ahora mismo entrar a un sitio y pasar más de 5 segundos buscando ¿para qué sirve?, vamos a ver como automáticamente decidimos, por un sentido de inmediatez al que estamos acostumbrados a partir de este nuevo canal de Internet, abandonar y cerrar la página.

Transmitir nuestra Propuesta de Valor en forma inmediata debe ser nuestro primer objetivo al diseñar nuestro diseño para la conversión de usuarios a clientes.

Sin dar vueltas, veamos un ejemplo concreto, el famoso buscador de vuelos, hoteles, etc.: Kayak. Donde directamente lo que tenemos es el Buscador para comenzar sin dar vueltas a planificar nuestro próximo viaje, ni más ni menos, simple y directo.

Kayak

2) Sólo una opción

Por más sencillo que parezca, el 95% de los emprendedores al comenzar cometen este error. Por querer transmitir absolutamente TODO lo que hace su magnífico desarrollo, terminan sobrecargando su sitio web “Landing Page” con miles de detalles que a nadie le interesa. Lamentablemente, el foco del potencial cliente se pierde como así también la efectividad en la conversión final a resultados.

Sí en 5 segundos debemos explicarle al usuario de que se trata nuestro sitio, también en ese intervalo de tiempo, debemos mostrarle claramente cuál es el paso a seguir. Este paso debe ser uno, debe ser claro, debe ser obvio. A este nivel del túnel de conversión, el usuario no va a tener la paciencia ni la disposición para darnos una segunda oportunidad o perder tiempo. En consecuencia, cualquier duda, va a derivar en la pérdida indefectible de facturación.

En nuestro caso particular, y vimos a muchos otros ejemplos pasar por el mismo proceso, probamos de todo, pero finalmente la mejor solución es presentar:

1.    Un título (enorme) explicando que es lo que hacemos.
2.    Un sub-título (menor en tamaño) reforzando nuestro argumento del punto anterior con algún dato estadístico importante.
3.    Y por último el paso de la decisión (un solo camino), sea un botón para comenzar, sea los campos para comenzar una búsqueda u otra alternativa.

Analicemos el ejemplo de AirBnB. Simple, directo y conciso.

Título: “Find a place to stay”.
Sub-Título: “Rent from people in 34,183 cities and 192 countries”.
Acción: Ingresar campos y comenzar la búsqueda.

AirBnB

3) Embudo de Conversión

Finalmente, debemos diseñar nuestro embudo de conversión. Este es un trabajo NO difícil, pero SI  de perseverancia, ya que debemos medir absolutamente todo para poder entender al cliente: ¿dónde abandona?, ¿por qué?, qué está faltando?, ¿cuáles son sus miedos?, ¿qué no estamos ofreciendo en tiempo y forma?, etc.

Embudo de Conversión

Solo pocos llegan al objetivo final, sea la venta, la registración, el uso correcto de la herramienta u otra opción válida. En el camino, se queda gran parte de nuestras ganancias, por no decir la mayoría.

Vuelvo a repetir, y por experiencia propia lo destaco, en este factor, la clave está en la medición, en la prueba y error, en el A/B testing comparando una y otra vez hasta alcanzar el éxito (la mejor conversión!).

4) Tips para mejorar nuestro Embudo

Existen miles de consejos que podemos tomar para mejorar nuestra conversión, tantas como podamos imaginar y probar. En función a nuestro aprendizaje, compartimos las que nos brindaron mejores resultados y cambios positivos al final del día de la pruebas.

a) Testimonios: Agregar testimonios de usuarios reales, con nombre, apellido, foto, etc, es clave para mejorar la conversión en función a los clientes ya satisfechos por nuestro emprendimiento.

Testimonios

b) Señales de Confianza: Logos de seguridad como VeriSign son claves para transmitir transparencia en momentos claves de la venta, como por ejemplo, ingresar datos sensibles de la tarjeta de crédito, información personal, etc.

c) Imágenes de personas enfocadas en tu Producto: Si vemos la imagen a continuación, podemos entender como cada imagen de nuestro sitio debe tener un objetivo, en el caso de una persona, debe estar enfocada en nuestro producto, observemos como al pasar e una imagen a otra se ve reflejado como el potencial cliente se interesó considerablemente más en lo que le estamos ofreciendo.

Autor:

Cristian RennellaCristian Rennella

Ingeniero en sistemas

Co-Creador de elMejorTrato.com

Emprendimiento para la comparación de préstamos en Argentina.

3 Comentarios
0 FacebookTwitterGoogle +Pinterest
Psicología del color en Marketing: use los colores para negocios, atraer clientes y aumentar las ventas + infografía

En este artículo revisaremos: el impacto del color en el marketing, el color y el consumidor y otros aspectos importantes de persuasión en las compras.

Algunos datos interesantes del uso del color en el marketing son los siguientes:

1. Colores y marketing

De acuerdo con múltiples estudios se ha comprobado que el color tiene una influencia muy importante en la decisión de compra y el aumento de las ventas. Es por esto que es fundamental hacer una elección adecuada de colores para los productos, la publicidad, sitios web, puntos de venta, entre otros.

En estos estudios se ha identificado que los compradores impulsivos reaccionan mejor a colores como el rojo, naranja, negro y azul. Por otro lado los compradores más racionales (que planean más sus compras) responden muy bien a colores como: el rosado claro, celeste y azul marino.

Algunos datos que te pueden sorprender y que se deben tener en cuenta son:

  • La apariencia visual y el color de un nuevo producto son mucho más importantes que la textura, el sonido o el olor para los consumidores en un nuevo producto: 93% de los consumidores consideran más importante la apariencia visual y el color, 6% de los consumidores consideran más importante la textura, 1% de los consumidores considera más importante el sonido o el olor.
  • El 85% de los compradores consideran que el color es la principal razón para comprar un producto.
  • El Color incrementa el reconocimiento de la marca en un 80%.

2. Color y consumidor (cliente)

El color es una poderosa herramienta de diseño, sin embargo el efecto de los colores en el consumidor es diferente de acuerdo a la región. Veamos como el color influencia las personas.

2.1. Rojo

  • Aumenta el apetito.
  • Crea sensación de urgencia.
  • Utilizado muy frecuentemente para ventas de liquidación.
  • Asociado con movimiento, excitación y pasión.
  • Genera aumento de energía y hace que nos concentremos.
  • Aumenta en las personas la presión sanguínea y el pulso cardíaco.

2.2. Azul

  • Preferido por hombres.
  • Asociado con paz, agua y confiabilidad.
  • Provee sensación de seguridad y confianza.
  • Estimula la productividad.
  • Utilizado comúnmente para bancos y grandes negocios.
  • Calma la mente, provee sensación de tranquilidad y espacio.
  • Los jóvenes asocian azul con madurez.

2.3. Verde

  • Asociado con salud, tranquilidad y naturaleza.
  • Asociado también con dinero y personas (marcas) ricas.
  • Se usa en tiendas para relajar a los visitantes.
  • Frecuentemente usado para promover temas ambientales.
  • El verde estimula la armonía en el cerebro y facilita el balance entre cuerpo y emociones.

2.4. Amarillo

  • Incrementa la alegría y el optimismo.
  • Puede causar fatiga y tensión en los ojos.
  • Estimula procesos mentales y el sistema nervioso.
  • Incentiva la comunicación.
  • Representa optimismo y juventud.
  • Usado para llamar la atención en las vitrinas.
  • Muestra claridad.

2.5. naranja

  • Puede refleja emoción y entusiasmo.
  • Estimula la parte lógica del cerebro.
  • Muestra calidez y cercanía
  • Usado con frecuencia en los símbolos de precaución.
  • Puede generar ansiedad y ser considerado agresivo.
  • Muy efectivo en los Call to Actions (botones de llamado a la acción) en los sitios de comercio electrónico: Adicionar al carro de compras, suscríbete, etc.
  • Tiene un efecto considerable en compradores impulsivos.

2.6. Púrpura

  • Frecuentemente asociado con realeza, riqueza, éxito y sabiduría.
  • Estimula la parte del cerebro de resolución de problemas y la creatividad.
  • Bastante efectivo en productos de belleza o anti-edad.
  • Puede ser usado para calmar y apaciguar.
  • Representa una marca creativa e imaginativa.

2.7. negro

  • Crea una sensación de autoridad, poder y fortaleza.
  • Con frecuencia es un símbolo de inteligencia.
  • Usado en las tiendas de productos lujosos.
  • Si se usa con mucha frecuencia puede abrumar a las personas.

2.8. Otros colores

  • Blanco: Asociado con sentimientos de pureza, limpieza y seguridad. Puede representar neutralidad por la ausencia de color.
  • Rosado: Es un color romántico y femenino, usado para el marketing de productos para mujeres y jóvenes.
De acuerdo al tipo de negocio también se puede escoger el color:
  • Negocios como comidas rápidas, Outlets y ventas de liquidación (compradores de impulso): Los colores que funcionan en este tipo de negocio son rojo, naranja, negro y azul rey.
  • Bancos y almacenes de grandes superficies (compradores ceñidos a un presupuesto): Azul oscuro y verde azulado.
  • Tiendas de ropa (compradores tradicionales): rosado, azul claro y rosa

3. Otros aspectos importantes del color en el marketing

  • Para los compradores Online otros aspectos que influencian su comportamiento son: diseño del sitio Web y el texto utilizado (copy).
  • El 42% de los compradores basan su opinión de un sitio Web fundamentado en el diseño general.
  • El 52% de los compradores no regresan a un sitio Web que consideran que no es estético.
  • El 64% de los compradores no compran en un sitio cuando es lento.
  • Amazon ha encontrado que por cada 1oo milisegundos de mejora en la velocidad aumenta un 1% las ventas del sitio.
  • El 60% sienten más a gusto durante la compra cuando existe un texto de garantía asociado con el producto.

4. Infografías de psicología del color y Marketing

Anexo una infografía que puede ser de su utilidad:

Psicologia del color

Otra infografía bastante útil sobre el tema es:

Guía del color Marketing y Branding

Quisiera conocer su opinión frente a la siguiente pregunta: ¿Considera que el color afecta las compras ventas online y offline?

Quedo atento a sus respuestas.

629 Comentarios
0 FacebookTwitterGoogle +Pinterest
Marketing emocional aplicado al diseño de sitios Web y aplicaciones para redes sociales

El Marketing Emocional es muy importante para las empresas y está siendo utilizado frecuentemente por estas en sus estrategias de Marketing Digital. En este artículo se revisará como aplicar el concepto marketing emocional al diseño de sitios Web y las aplicaciones para redes sociales.

La información de este artículo la he extractado de una excelente presentación la diseñadora María José Castañer sobre diseño emocional.

1. ¿Qué es el Marketing Emocional?

El Marketing Emocional permite a las empresas crear y desarrollar un vínculo afectivo con los clientes, de tal forma que estos sientan la empresa o marca como algo propio, y sientan deseos de aportar a su crecimiento y supervivencia.

Lo que buscan las empresas con el marketing emocional es pasar de la mente de sus clientes a su corazón.

El marketing ha tenido la siguiente evolución:

  • Marketing transaccional que se fundamenta en el producto.
  • Marketing relacional que se fundamenta en  el cliente.
  • Marketing emocional que se fundamenta en cómo conectarse emocionalmente con estos.

2. Aspectos que influyen en la conexión emocional del diseño Web

Diseño web emocional

El diseño del sitio Web y las aplicaciones en redes sociales deben ofrecer experiencias positivas y memorables para que las personas regresen.

Me referiré a seis aspectos que menciona María José Castañer en su conferencia para lograr este tipo de diseños:

2.1. La armonía

La armonía se presenta cuando un sitio Web o aplicación de Facebook resulta agradable, aunque no se pueda definir por qué. La armonía implica que el sitio Web tenga proporción en los elementos, espacios, tipografías y colores.

2.2. Ritmo

El ritmo en un sitio Web o aplicación en redes sociales se presenta cuando los elementos gráficos transmiten orden.

2.3. Colores

Los colores evocan ciertos aspectos emocionales y fisiológicos. En un artículo anterior de este blog llamado Psicología del color: Utilice los colores para aumentar sus ventas Online y Offline se revisó en detalle el tema.

2.4. Tipografías

Son transmisores de mensajes muy efectivos gracias a sus rasgos, jerarquías, inclinaciones, etc. Se puede afirmar que cada tipografía tiene una personalidad. Las letras mayúsculas producen una sensación de potencia, seguridad, coherencia, transparencias. Se debe evitar crear diseños con demasiadas tipografías en un sitio Web o aplicación de redes sociales para evitar confusión, ruido y caos.

2.5. Espacio

Los espacios permiten transmitir volumen, resaltar el mensaje, crear interés y llamar la atención. La gestión de espacios permite lograr la atención del visitante sobre un elemento sin tener que aumentar su tamaño que es lo que hacen frecuentemente la mayoría de los diseñadores.

2.6. Jerarquía

Las jerarquías en los elementos del diseño Web y las aplicaciones de redes sociales son muy importantes a la hora de clarificar la lectura de la información. Los espacios, las tipografías, lo tamaños y los colores permiten jerarquizar el sitio Web o aplicación de las redes sociales.

Para terminar les dejo una pregunta:

¿Conoce otros aspectos de diseño Web que afecta la conexión emocional de los visitantes? Cuéntenos cuál.

Quedo atento a sus respuestas.

5 Comentarios
0 FacebookTwitterGoogle +Pinterest
Sitios Responsive Web Design - cuándo utilizar y cuándo no utilizar el diseño líquido

Responsive web design se está convirtiendo en una tecnología que  todos quieren utilizar para hacer sus sitios Web, ya que permite realizar un solo sitio Web que se adapta a cualquier equipo en que se cargue: computadores de escritorio, iPads o smartphones. En este artículo mostraré por qué la tecnología responsive web design no es adecuada para todos los casos

1. ¿Qué es responsive web design?

La tecnología responsive web design, también llamado diseño líquido o adaptable, permite a un sitio Web adaptarse al tamaño de la pantalla de cualquier dispositivo. Esto permite tener un solo sitio independiente del equipo en el que se esté cargando (computador de escritorio o smartphone).

Para los que estén interesados en el tema les recomiendo un artículo anterior que escribí en este mismo blog: 22 plantillas gratuitas con tecnología responsive web design.

En la práctica una empresa que quiera tener una presencia profesional en smartphones tiene dos opciones:

  • Hace un dos sitio web: uno para los computadores de escritorio y otro para smartphones.
  • Hace un solo sitio web con tecnología responsive web design que se vea bien tanto en computadores de escritorio como en smartphones.

2. ¿Cuándo utilizar responsive web design en un sitio web?

La tecnología Responsive Web Design es muy útil en los siguientes tipos de sitio Web:

  • Blogs: los blogs tienen muchos beneficios de utilizar la tecnología responsive web design ya que muchas personas acceden al contenido desde dispositivos móviles. En el caso de mi blog (donde está leyendo este artículo), tengo el 25% de visitas desde dispositivos móviles.
  • Sitios orientados a marca con estructuras simples: Los sitios web sin mucha complejidad también son adecuados para ser realizados con esta tecnología.

3. ¿Cuándo no utilizar responsive web design en un sitio web?

La tecnología Responsive Web Design no funciona de manera adecuada en los siguientes tipos de sitio Web:

  • Periódicos electrónicos: Los periódicos electrónicos por la cantidad de contenido y complejidad deben tener dos portales uno para computadores de escritorio y otro para dispositivos móviles. Normalmente los portales para móviles solo presenta las noticias principales con una breve descripción.
  • Tiendas electrónicas: Los sitios de comercio electrónico, como Amazon.com por ejemplo, generalmente manejan un portal móvil y otro para los equipos de escritorios. Estos tipos de sitios Web también serían muy complejos de navegar con un portal Responsive Web Design.
  • Sitios complejos o con bastante contenido: Los sitios complejos también se vuelven muy complejos para navegar con tecnología responsive web design, en estos casos es mejor tener un portal móvil y otro para computadores de escritorio.

Para terminar les dejo una pregunta:

¿Considera que la tecnología responsive web design funciona en todos los casos?

Quedo atento a sus respuestas.

Nota: Imagen tomada de Loftyword.com

15 Comentarios
0 FacebookTwitterGoogle +Pinterest
8 ejemplos de pruebas A/B: casos de éxito en la optimización de la usabilidad web

Las pruebas A/B, también llamadas A/B test, es una herramienta de usabilidad que te permite realizar evaluaciones con los visitantes reales de tu sitio Web para medir de manera objetiva el mejor diseño entre varias alternativas.

En otras palabras las pruebas A/B te permite eliminar las suposiciones del diseño del sitio Web. Además, estas pruebas le permitirá a tu empresa mejorar continuamente su sitio Web, optimizando los elementos que son susceptibles a mejora.

En este artículo se revisarán algunos ejemplos de mejoras en la conversión logradas con pruebas A/B tomados de un artículo llamado 12 Surprising A/B Test Results to Stop You Making Assumptions y otras fuentes.

Ejemplo 1: ¿Cuál botón de adicionar al carro de compra originó un aumento de 30% en las ventas?

En esta prueba, el tercer botón de la tercera columna (botón naranja con ícono de carro de compras y leyenda Add to cart) obtuvo el mayor incremento en ventas.

¿Por qué funciona mejor ese botón?

A pesar de ser un caso que tiene varios años de haber sido documentado, es impresionante la mejora obtenida en ventas del 30% (US$1.300 millones al año) por la empresa Newegg.com. Los botones de adicionar al carro de compras evaluados tenían los siguientes elementos variables:

  • Tamaño
  • Color
  • Forma
  • Fuente
  • Texto
  • Iconografía

 

Ejemplo 2: ¿Cuál versión generó un 38% más inscripciones?

En esta prueba, la Versión B obtuvo un 38% más de inscripciones.

¿Por qué funciona mejor la versión B?

Al evaluar las piezas se identifica que el texto es más efectivo en la versión B ya que el título es más corto, y tiene un subtítulo que amplia la explicación con algunas palabras importantes en negrita que facilita la lectura. Aunque puede resultar que no es tan bonito, logra la transmisión de información al usuario de manera eficiente debido al énfasis en palabras relevantes.

Se puede concluir en este caso que no siempre el diseño limpio es más eficaz.

Ejemplo 3: ¿Cuál página logró un 439% más de leads (formularios diligenciados)?

La versión A produjo un asombroso aumento del 439% en la generación de leads.

¿Por qué funciona mejor la versión A?

Al revisar las páginas se identifican que ambas páginas está muy bien diseñadas lo que hace difícil identificar la que tendría mayor conversión sin realizar pruebas A/B.

Los motivos por los que la versión A tienen mayor conversión se pueden atribuir a tres elementos:

  • El formulario es un poco más corto, tanto en el número de campos como en la forma en que se muestra visualmente.
  • La ubicación del texto dentro de la imagen hace que el mensaje se enfoque más rápidamente y aumenta el impacto.
  • La adición de las dos imágenes en la parte inferior da a la página una sensación de más auténtica y confiable.

Ejemplo 4: ¿Cuál página de aterrizaje tuvo 89,8% más de conversión?

La versión B generó 89,8% más conversión.

¿Por qué funciona mejor la versión B?

Una buena página de aterrizaje debe comunicar la información rápida y eficientemente, para lograrlo debe tener textos atractivos y una tipografía adecuada.

La versión B combina mejor estos dos elementos que la versión A. El uso de las viñetas funcionó muy bien y resultó ser muy efectivo para dar orden y claridad.

Otro aspecto que se puede destacar fue la eliminación del menú principal ya que puede convertirse en una distracción en una página de arribo y reduce el riesgo de que los usuarios se vayan de la página con un clic en esta parte.

Ejemplo 5: ¿Cuál versión obtuvo un 115% más de conversión?

La versión A obtuvo un 115% más de conversión comparado con la versión B.

¿Por qué funciona mejor la versión A?

Este es uno de los casos en el que la mayoría de las personas a las que se le preguntan se equivocan en la respuesta, ya que la opción B parece con un texto más rápido y y subtítulo muy claro.

La versión A resultó mejor ya que fue diseñada para vincular y complementar los anuncios Adwords que conducen a los usuarios a la página.

Hay una lección muy importante con este ejemplo y es que la persona que diseñe una página de arribo debe tener en cuenta que el embudo de ventas consta de varios elementos y es muy importante que sean consistentes para aumentar su efectividad.

Ejemplo 6: ¿Cuál página de aterrizaje generó 24% más leads generados?

La versión A logró un 24% más de suscripciones que la versión B.

¿Por qué funciona mejor la versión A?

Sorprende la versión A fue la página que obtuvo una mayor conversión y lo logro al eliminar la imagen de la página.

Las imágenes suelen ser muy efectivas en la comunicación digital de la empresa, pero en este caso afectó la eficacia de la página de aterrizaje de dos maneras:

  • La imagen desplaza el formulario hacia abajo en la página, limitando su impacto y apartando nuestra atención del formulario.
  • La imagen es tomada de un sitio web que vende fotos y esto en ocasiones disminuye la conversión.

Ejemplo 7: ¿Cuál página de aterrizaje aumentó el diligenciamiento de solicitudes en un 64%?

La versión A obtuvo un 64% más de conversión que la versión B.

¿Por qué funciona mejor la versión A?

Aunque los videos son una tendencia de marketing digital, no funcionan bien en todos los casos. En este caso la presencia de video no fue efectivo por lo que la versión A logró un 64% más de leads que la versión B.

El video está ubicado en la parte inferior de la página donde puede tener muy poco efecto. Además, el llamado a la acción (CTA) está en la parte superior de la página, obteniendo gran visibilidad, pero localizado antes de que el usuario tenga algún contexto. Es un error ubicar un formulario antes que el texto de explicación.

Ejemplo 8: ¿Cuál página de aterrizaje de una campaña de Pago Por Clic (PPC) logró 98% más descargas del Trial?

La versión B obtuvo un 98% más de conversión que la versión A.

¿Por qué funciona mejor la versión B?

En la versión B se puede ver una página que hace lo básico realmente bien:  es simple y está libre de distracciones, tiene un título llamativo y un texto de apoyo que detalla los beneficios y características.

Imagen destacada tomada de DepositPhotos.com

Para terminar los dejo con una pregunta:

De los casos vistos ¿cuál lo sorprendió más?

 

6 Comentarios
0 FacebookTwitterGoogle +Pinterest
20 plantillas gratis Responsive Web Design para WordPress, Joomla y Drupal. Los mejores templates

Existen gran número de plantillas gratuitas para los diferentes administradores de contenido (CMS) de excelente calidad, lo que la convierte en una opción para las personas que están iniciando con su blog o sitio web.

Compartiré con ustedes las que, en mi opinión, son las mejores plantillas gratis que utilizan la tecnología Responsive Web Design, también llamado diseño líquido, adaptable o elástico que utilizan la tecnología HTML 5 y CSS3. La tecnología Responsive Web Design permite que el sitio Web se adapte a cualquier pantalla (PC o dispositivo móvil). Los que quieren conocer mejor esta tecnología les recomiendo el artículo: Sitios Responsive Web Design: cuándo utilizar y cuándo no utilizar el diseño líquido.

WordPress: plantillas Responsive Web Design gratis

WordPress es el CMS que más plantillas gratis tiene disponibles con la tecnología Responsive Web Design y tecnología HTML5 y CSS3 . Veamos las más destacadas:

1. Plantilla WordPress Nova

La plantilla gratuita de WordPress Nova es fue creada por Themeinprogress.com, con diseño responsive web design. Esta plantilla puede ser utilizada para diarios digitales, blogs informativos o corporativos.

Plantilla wordpress Nova

Ver el DEMO Nova.

Descargar la plantilla Nova.

2. Plantilla WordPress Asteria Lite

Asteria Lite es una plantilla creada por Towfiqi.com con tecnología de diseño líquido. Es un template limpio con gran cantidad de opciones de diseño, iconos sociales y plantillas de página.

Plantilla WordPress Asteria

Ver el DEMO Asteria.

Descargar la plantilla Asteria.

3. Plantilla WordPress Cubby

Cubby es una plantilla creada por Mageewp.com con tecnología responsive web design. Cubby es una elegante plantilla basada en Bootstrap y diseñada para pequeñas y medianas empresas.

Plantilla WordPress Cubby

Ver el DEMO Cubby.

Descargar la plantilla Cubby.

4. Plantilla WordPress iTheme2

iTheme2 es una plantilla de WordPress con diseño líquido (Responsive Web Design). Esta es una excelente plantilla creada por Themify. Es un template muy adecuado para blogs de tecnología y asociados con Mac, ya que usa un diseño similar al sitio de Apple.com.

Plantilla gratis itheme2 Responsive Web Design

Ver el DEMO iTheme2.

Descargar la plantilla iTheme2.

5. Plantilla WordPress Bento

La plantilla gratuita de WordPress Bento es fue creada por Satoristudio.net, con diseño responsive web design. Es una plantilla multipropósito.

plantilla wordpress Bento

Ver el DEMO Bento.

Descargar la plantilla Bento.

6. Plantilla WordPress Skeleton

El template Skeleton de WordPress fue creada por Simplethemes con diseño elástico (Responsive Web Design).

Plantilla gratis Skeleton Responsive Web Design

 

Ver el DEMO Skeleton.

Descargar la plantilla Skeleton.

7. Plantilla WordPress Fullby

Fullby es una plantilla de WordPress gratis creada por Marchettidesign.net. Es un plantilla formato grid, responsive, diseño flat y muy liviana que usa tecnología Bootstrap 3.

plantilla wordpress Fullby

Ver el DEMO Fullby.

Descargar la plantilla Fullby.

8. Plantilla WordPress Yoko

El template Yoko de WordPress fue creado por elmastudio con diseño líquido (tecnología Responsive Web Design).

Plantilla gratis Yoko Responsive Web Design

Ver el DEMO Yoko.

Descargar la plantilla Yoko.

9. Plantilla WordPress Pieces

Pieces es una plantilla creada por csthemes.com con tecnología responsive web design. Esta plantilla tiene un diseño limpio y minimalista basado grid.

Plantilla WordPress Pieces

Ver el DEMO Pieces.

Descargar la plantilla Pieces.

10. Plantilla WordPress Arcade

Arcade es una plantilla creada por Bavotasan.com que usa tecnología responsive web design. Es una plantilla  HTML5 ligera y con muchas funcionalidades.

Plantilla WordPress Arcade

Ver el DEMO Arcade.

Descargar la plantilla Arcade.

11. Plantilla WordPress FullScreen

Fullscreen es una plantilla gratuita creada por Graphpaperpress.com que usa tecnología responsive web design. Es una plantilla orientada a fotógrafos con un diseño minimalista.

Plantilla WordPress FullScreen

Ver el DEMO FullScreen.

Descargar la plantilla FullScreen.

12. Plantilla WordPress 320 and up

El template 320 and up de WordPress fue creada por ejhansel con tecnología Responsive Web Design.

Plantilla gratis 320 And Up Responsive Web Design

Ver el DEMO 320 and up.

Descargar la plantilla 320 and up.

Joomla: plantillas Responsive Web Design gratis

El CMS Joomla tiene algunas plantillas gratis con la tecnología Responsive Web Design. Veamos algunas:

13. Plantilla Joomla SJ Joomla3

SJ Joomla3 es un plantilla responsive web design creada por Smartaddons.com. Esta plantilla dispone de cuatro variaciones de estilos principales y campos para selección de colores. Incluye 13 tipos de fuentes y varias fuentes de Google.

Plantilla Joomla SJ Joomla3

Ver el DEMO SJ Joomla3.

Descargar la plantilla SJ Joomla3.

14. Plantilla Joomla Protostar

Protostar es una plantilla de Joomla creado por Ajoomlatemplates.com. Esta plantilla permite diseño con tres columnas y dispone de muchas posiciones para módulos. El menú desplegable soporta hasta 6 niveles.

Plantilla Joomla Protostar

Ver el DEMO Protostar.

Descargar la plantilla Protostar.

15. Plantilla Joomla Favourite

Favourite es una plantilla para el CMS Joomla creada por favthemes.com que usa tecnología responsive web design. Esta plantilla cuenta con más de 40 posiciones para módulos y 10 estilos de plantilla distintos.

Plantilla Joomla Favourite

Ver el DEMO Favourite.

Descargar la plantilla Favourite.

16. Joomla!Dagen

El template Joomla!Dagen de Joomla fue creado por joomladagen con tecnología Responsive Web Design.

Plantilla Joomla Dagen Nederland

Ver el DEMO Joomla!Dagen.

Descargar la plantilla Joomla!Dagen.

Drupal: plantillas Responsive Web Design gratis

El CMS Drupal tiene pocas plantillas gratis con la tecnología Responsive Web Design. Veamos algunas:

17. Plantilla Drupal TB Methys

Methys es una plantilla gratuita de Drupal con tecnología responsive creada por themebrain.com.  Esta plantilla soporta múltiples colores y funciona bien para sitios web de la categoría moda y fotografía.

Plantilla Drupal TB Methys

Ver el DEMO TB Methys.

Descargar la plantilla TB Methys.

18. Plantilla Drupal Phoenix

Phoenix fue cread por zymphonies.com con tecnología responsive web design. Es una plantilla moderna espcialmente diseñada para pequeñas y medianas empresas.

Plantilla Drupal Phoenix

Ver el DEMO Phoenix.

Descargar la plantilla Phoenix.

19. Plantilla Drupal Zircon

Zircon es una plantilla con tecnología responsive web design credo por weebpal.com.  Es una plantilla simple y limpia.

Plantilla Drupal Zircon

Ver el DEMO Zircon.

Descargar la plantilla Zircon.

20. Mojo

El template Mojo de Drupal fue creado por futurefriend con diseño adaptable  (Responsive Web Design).

Plantilla gratis Mojo Responsive Web Design

 

Ver el DEMO Mojo.

Descargar la plantilla Mojo.

 

Si usted conoce otra plantilla gratuita para WordPress, Joomla o Drupal que tenga diseño líquido (tecnología Responsive Web Design), compártela con nosotros.

Cuéntame tus dudas y comentarios que con gusto los responderé.

30 Comentarios
0 FacebookTwitterGoogle +Pinterest
Cómo rediseñar tu sitio web sin perder posicionamiento en buscadores (SEO)

Hacerle pequeños cambios a un sitio web es bastante común. Agregar y eliminar imágenes o pequeños textos pueden no afectar significativamente el funcionamiento y el SEO. Pero ¿cómo rediseñar totalmente tu web sin perder posicionamiento?

Un rediseño completo habitualmente implica cambios en la arquitectura y eso podría afectar significativamente tu SEO.

Para evitar perder el posicionamiento que has logrado, es necesario planear y tener en cuenta una serie de pasos

¿Por qué rediseñar?

De entrada, debes tener en cuenta, cuándo es necesario rediseñar completamente tu sitio web. Podría ser que encajes en una de estas buenas razones:

  • Diseño obsoleto. ¿Hace cuánto tiempo abriste tu web? Si ya tiene “un rato” de haber sido creada, es bueno que tengas en cuenta que el comportamiento de navegación de los usuarios cambia y que siempre hay tendencias de diseño web con las cuales mejorar.
  • No es responsiva. ¿Pero en dónde te has metido todos estos años? Hoy en día un 60% proviene de tráfico móvil, el diseño responsivo es casi una obligación. Además de las tendencias de consumo, Google da preferencia a los sitios que si cuentan con el responsive. En otras palabras, si no cuentas con ello, te penaliza. ¿Quieres estar en los primeros lugares? Este punto es una buena razón para rediseñar.
  • Cambios de imagen. Si tu empresa ha tenido un cambio en su imagen corporativa como el logo, la paleta de colores o cualquier otro concepto de imagen, no hay que olvidarse del sitio web. Aunque pueden ser cambios leves podrías generar un cambio total para impulsar tu estrategia.
  • Optimización de la arquitectura de la información. Si los usuarios de tu web no le encuentran ni pies ni cabeza a tu sitio, seguramente tienes que mejorar la usabilidad y la experiencia del usuario. Ya te diste cuenta, ¡genial! Es un buen momento de reestructurar tu sitio.
  • Nuevos contenidos y no hay forma de acomodarlos. Quizás tu estructura anterior ya no te da para más. Es “suficiente” para lo actual pero no te permite realizar marketing de contenidos de forma óptima. Buen momento para izar las velas.
  • Mala estructura o programación. Si sufres de esta enfermedad común, más vale que te prepares para un buen tratamiento de rediseño total. No lo dejes pasar o tu proyecto se muere 🙂

Herramientas básicas para SEO previas al rediseño web

Bueno, ya tienes todo listo para comenzar. Ahora es buen momento de tener en cuenta las herramientas básicas que necesitarás en el proceso.

  1. Google Analytics. Una de las herramientas más conocidas en el mundo del marketing digital. Durante el proceso de rediseño, esta herramienta ayudará con algunas estadísticas que necesitas para evaluar tu sitio web.
  2. Google Search Console. Si has creado un sitio web nuevo, no te olvides de indexar tu sitio al buscador. En ocasiones las páginas se indexan solas, pero si no lo hacen, necesitarás alguna herramienta. Para ser encontrados en Google, existe el Google Search Console.
  3. Google PageSpeed Insights. Siendo parte de las herramientas más completas que tiene Google, PageSpeed te ayuda a evaluar todo tu sitio y a encontrar los puntos débiles para realizar las mejoras. Lo mejor de esta herramienta, es que evalúas desde sitios desde ordenadores hasta los responsivos.

Otras herramientas que pueden ser grandes aliados para analizar y evaluar el posicionamiento de tu web son Sreaming Frog, Ahrefs y Majestic.

Aunque para la mayoría necesitas contar con una suscripción, te ofrecen la posibilidad de una prueba gratis, con la que puedes ver cuál es adecuada según tus necesidades.

Es importante tener conocimiento en las redirecciones 301. Las redirecciones que se realizarán en tu sitio web dependen del servidor o el CMS que estés utilizando. Los métodos más comunes son el uso del .htaccess y el uso de plugins.

Toma en cuenta estas recomendaciones antes de iniciar

No piensas en lanzarte de un avión sin haber revisado el paracaídas ¿verdad? Y ¡ni qué decir de lanzarte sin él!

El hecho de cambiar tu web no significa que vas a dejar a un lado el análisis de palabras claves, posicionamiento y métricas de tu sitio y páginas web -conoce la diferencia entre página web y sitio web aquí-. No olvides monitorear y tener bien definido lo siguiente.

  • Fuentes de tráfico web. Tráfico orgánico, por redes sociales, de otras webs y el tráfico directo. Necesitarás reactivarlo y monitorearlo tras la migración.
  • Backlinks. Con qué enlaces cuentas y cómo pretendes conservarlos. O en caso de redirecciones, conseguir que los actualicen.
  • El contenido. Lleva un estricto control de qué artículos en tu blog tienen un buen posicionamiento y están bien optimizados. Así mismo de los que no generan tráfico y no ganan posicionamiento, para ajustarlos en el rediseño.
  • Redirecciones 301. Es probable que necesites colocar algunas redirecciones 301 para ayudar a Google a identificar qué URLs de tu sitio se han eliminado permanentemente y se han cambiado a otra dirección.

Ten en cuenta que uno de los objetivos en un rediseño web es evitar perder posicionamiento y mejorar los puntos que te hayan llevado a realizarlo.

Pasos para rediseñar tu web

Entramos a lo bueno. Realizar un rediseño cuidando el SEO, puede llegar a ser complicado, pero no imposible. El rediseño consiste en tres etapas, donde cada una tiene sus propios pasos.

Las etapas son prelanzamiento, lanzamiento y post-lanzamiento. A continuación, veremos cada una y los pasos a seguir para tener un rediseño bajo SEO exitoso.

Prelanzamiento

Paso 1. Análisis de tráfico por cada página web de tu sitio

En esta etapa, necesitarás analizar toda la información sobre el tráfico que recibe cada página web. Es conveniente que incluyas en tu registro de control, la fuente de tráfico a la web, el nivel de tráfico por página y cualquier elemento que pueda afectar el posicionamiento.

Además de analizar el tráfico, debes tomar estos otros parámetros:

  • El estado de las métricas que se utilizan. La evaluación de las métricas será para medir el resultado exitoso -o desastroso- entre el diseño anterior y el rediseño. Aquí te será sumamente útil Google Analytics. Tip: elige cuidadosamente las métricas que representan el éxito del proyecto.
  • Una auditoría SEO. La auditoría se realizará con el propósito de encontrar puntos donde se puede mejorar. Algunos de los puntos a mejorar son las descripciones meta, las URLs, las palabras claves y los títulos. Toda esta información deberá estar en tu documento de control. Puedes usar herramientas como Screaming Frog para facilitarte el trabajo.

Paso 2. Priorizar las URL

Una vez realizado el análisis, debes comenzar a priorizar las URL de tu sitio web.  Observa cuáles son las URL que tienen mejores resultados de tráfico, así como de posicionamiento y sus palabras claves.

Crear esta lista de URLs te ayudará a conocer cuáles son las páginas que generan el tráfico total del sitio web, así como a ir afinando cuáles son las de mayor importancia para el sitio y el rediseño.

Paso 3. Clasificar por backlinks

Qué sería del SEO sin backlinks. En este paso se recoge la información de enlaces entrantes que se tienen en el sitio. Con la lista que se creó en el paso anterior de URLs, debes ir checando qué enlaces entrantes tiene cada una, la calidad y el tráfico que le generan a cada página.

Paso 4. Interlinking y enlaces salientes

Y, por último, más allá de los backlinks, también debes tener en cuenta el enlazado actual. Tanto interno como externo.

Con esta información, podrás realizar un análisis de si te conviene conservar dicho enlazado o definir qué cambios debes realizar en el mismo.

Lanzamiento

Paso 4. Comenzar el rediseño

Una vez que analizaste completamente tu sitio web y tienes claro cuáles son las necesidades, ¡manos a la obra que es tiempo del rediseño!

Toma en cuenta estas recomendaciones:

  • Si tienes que hacer redirecciones, revisa que funcionan correctamente.
  • Comprueba que las descripciones meta, títulos y las palabras clave vayan acordes al contenido.
  • En caso de haber creado o modificado URLs, cuida que sean cortas y amigables.
  • Cuida el indexado de las páginas nuevas y en general, de todas las que hayan sufrido algún cambio. Puedes enviar un sitemap desde Search Console o bien puedes emplear esta herramienta de Google.
  • Verifica que todo funcione correctamente en los navegadores y dispositivos desde los cuales tu público objetivo entrará a tu página.

Todas las recomendaciones son importantes, pero para Google hay algunas que importan más:

  • Mientras validas, evalúas y modificas, escóndete de los buscadores.

En caso de que estés creando un sitio web completamente nuevo, recuerda esconder esta nueva versión utilizando robots.txt. En el momento que estás agregando la información al sitio web nuevo del antiguo sitio, Google puede encontrar que se está duplicando contenido y te puede penalizar el nuevo sitio.

En caso de que no sepas muy bien de estos términos, puedes crear la nueva versión de tu sitio web en un archivo, borrar la antigua versión y comenzar como si fuera desde cero.

Aunque esto último no sería técnicamente correcto, también es una opción para quienes inician. Solo no te tardes mucho en colocar el nuevo sitio, o también te costará de cara al posicionamiento.

  • No olvides que Google se toma en serio las redirecciones. Revísalas bien.

Nunca debes pasar por alto las redirecciones en el rediseño de tu sitio web. Ya sea que estés migrando o eliminando páginas web, si cambias alguna URL no olvides redireccionar a la página adecuada.

Post lanzamiento

Paso 5. Monitoreo

El paso final es el monitoreo del buen funcionamiento del sitio web. El monitoreo sirve para encontrar cualquier falla y poder resolverlo

¿Qué necesito monitorear?

  • Las métricas que se definieron en el prelanzamiento.
  • Que no existan páginas duplicadas
  • Posibles errores en las redirecciones
  • Que todo el sitio funcione correctamente

Puedes emplear Google Analytics y Screaming Frog. Y si tienes acceso a alguna herramienta como AHREFS, también te será de suma utilidad.

¿Por qué un rediseño afecta el SEO?

Toma en cuenta que hacer todo esto, podría ocasionar inconvenientes a corto plazo si no analizas y planeas bien el proceso.

Lo que comúnmente sufre “daños” con los cambios es:

  1. Enlazado interno. El cambio de arquitectura se basa en brindar una mejor experiencia del usuario. En ocasiones, cuando la arquitectura cambia, las url también. Hay que tener cuidado para evitar enlaces rotos sea internos o externos. Los enlaces rotos pueden afectar tu posicionamiento.
  2. Las redirecciones afectan el tiempo de carga. Es común que debas usar redirecciones tras cambiar la arquitectura web. A veces, puedes haber dejado tantas redirecciones que afecte la carga del sitio. Según Google, mientras más rápido cargue el sitio, mejor para el posicionamiento.
  3. Problemas con las palabras claves. Al revisar el contenido, puede que haya algún post que no sea relevante. En estos casos, es mejor modificarlo y darle una mano de gato que redireccionar el link de ese post a otro.

Checklist para conservar y mejorar tu SEO tras el rediseño

Aunque ya vimos los puntos de cada etapa, nunca está de más contar con un checklist:

  1. Evalúa tu estrategia de SEO. Esta parte la vimos en el plan de rediseño. Evalúa las fortalezas y debilidades de tu estrategia actual de SEO. Analiza donde hay oportunidades.
  2. Modifica tu contenido eficazmente. Crea o modifica los títulos de tu contenido y el texto, pero solo cuando sea necesario y valga la pena. Sobretodo en contenido de páginas que ya estaban bien posicionadas.
  3. Cuida el cambio de URLs. Probablemente se tenga que modificar o agregar alguna URL en tu sitio web. En caso de que necesites eliminar URLs, cuida que no sean de valor -en cuestión SEO- y si se necesita, utiliza las redirecciones.
  4. Comprueba tus links externos. Si tuviste que eliminar alguna URL de tu sitio web, evalúa si algún sitio web enlazaba a ella. Si encuentras páginas que han enlazado, recuerda aplicar la redirección 301.
  5. También tus links internos. Utiliza alguna de las herramientas que existen para buscar en tu sitio enlaces a la página que hayas eliminado, es decir links rotos.
  6. Evita cambiar tu web radicalmente. Realizar todos los cambios sobre tu sitio en un solo día podría ser arma de doble filo cuando nos referimos a Google. Trata de mejorar tu sitio de manera paulatina. A menos que tengas una arquitectura web actual muy mala, entonces sí, ¡destruye todo lo que encuentres!
  7. Primero lo importante. Existen casos donde el sitio web contiene muchas páginas en su estructura. Crea una lista de todas las páginas que hay en tu web y evalúa su relevancia. Elimina las que no sean necesarias y ordena tu contenido.
  8. Si utilizas robots.txt mientras rediseñas, no olvides configurarlo al final. Así Google podrá encontrar tu sitio web rediseñado sin problemas.
  9. Error 404. A cada paso que des en tu sitio, revisa que cada enlace y página exista. No quieras “echar a toda máquina” un sitio web con errores 404.
  10. Después del rediseño, sigue el monitoreo. No importa si los cambios que realizaste en el sitio fueron grandes o pequeños, monitorea el funcionamiento de cada página, el tráfico, búsquedas, así como el comportamiento de tus enlaces.

Al momento de actuar, verás que, siguiendo cada recomendación, el rediseño tendrá efecto positivo, generará más tráfico y conseguirá mejor posicionamiento.

Si no estás seguro, contrata a un experto en diseño web

Probablemente es el consejo menos acertado porque nadie conoce mejor tu web que tú mismo. Sin embargo, hay factores que pueden llevarte a tomar esa decisión.

Algunos de los factores más comunes por lo que los dueños de sitios web recurren a los expertos en diseño web es la falta de conocimientos en programación, poco conocimiento y manejo de herramientas SEO y no conocen los principios de usabilidad y experiencia del usuario.

Si deseas aventurarte a realizarlo, utiliza esta sencilla guía y verás cómo el proceso se vuelve más sencillo.

Autor:

Irene Calcáneo

Especialista en marketing on line, yogui fase 0, creyente y activista de un mundo mejor para todos 🙂

1 Comentario
0 FacebookTwitterGoogle +Pinterest
Guía de pruebas de usabilidad web A/B y multivariables: qué son, beneficios de usarlas, casos de éxito + video

Las pruebas A/B, también llamadas A/B testing,  y las pruebas multivariables le permiten a las empresas probar con los visitantes reales diferentes propuestas de diseño para identificar cuál de ellas genera más conversión o ventas para la empresa. Estas herramientas le permiten establecer de manera objetiva el mejor diseño para su sitio Web.

Las empresas con presencia en Internet siempre quieren saber cuál es el mejor diseño de su sitio Web de acuerdo a sus de clientes, productos, mercados, etc.

En muchas ocasiones identificar el mejor diseño del sitio Web de una empresa no es fácil, ya que el diseño Web tiene un importante componente subjetivo por estar basado en gustos, sentires y modas. Algunas empresas recurren a costosas pruebas de campo (focus group por ejemplo) que en muchas ocasiones tienen resultados limitados por el tamaño y selección de la muestra.

1. Pruebas A/B y multivariables

Las pruebas A/B y pruebas multivariables son una técnicas de usabilidad que permiten realizar evaluaciones con los visitantes reales del sitio Web para medir de manera objetiva el mejor diseño Web entre varias alternativas. Las pruebas A/B permiten medir entre dos alternativas y las multivariables cuando son más de dos alternativas. En estas pruebas se puede evaluar:

  • Entre dos o más páginas de inicio, cuál genera más ventas.
  • Cuál diseño de botón de acción (color, tamaño, forma, etc) genera más clics.
  • Cuál disposición de espacio en su sitio Web genera más usuarios registrados.
  • Cuál diseño de boletín generó más negocios.
  • Cuál diseño disminuye los porcentajes de rebote de los usuarios.
  • Cuál disposición permite incrementar el tiempo dedicado en su sitio.

En otras palabras las pruebas A/B le permite eliminar las suposiciones del diseño del sitio Web. Además, estas pruebas permiten a las organizaciones mejorar continuamente su sitio Web, optimizando los elementos que son susceptibles a mejora.

2. Ventajas de Optimizar el diseño de su Sitio Web con pruebas A/B

Los beneficios de optimizar el diseño de su sitio Web son:

  • Algunas plataformas que permiten realizar esta labor son gratis.
  • Se pueden realizar pruebas continuas.
  • Establece, a través de métricas, la mejor opción de todas las evaluadas.
  • Permite probar todo, desde bloques de contenido e imágenes individuales hasta diseños de página completos.
  • Permite mejorar el porcentaje de conversión.
  • Permite reducir el porcentaje de abandono de una página.
  • Permite aumentar los tiempos de permanencia de los visitantes.

3. Experimentos de Google Analytics

Desde agosto de 2012 existe una nueva opción de Google Analytics llamada experimentos. Esta herramienta permite realizar pruebas A/B y multivariables de forma gratuita. Antes de agosto Google permitía optimizar el diseño de los sitios Web a través de un servicio independiente llamado Optimizador de Sitios Web (Website Optimizer).

Esta plataforma de optimización permite probar con los visitantes actuales el sitio Web de forma rápida y sencilla, lo que permite que sea utilizado por expertos o personas nuevas en el marketing digital.

4. Tutorial de Experimentos de Google Analytics

Encontré un video tutorial en Internet que muestra como configurar una prueba multivariable con la opción experimentos de Google Analytics.

5. Caso de éxito de las pruebas A/B

Un caso de éxito que muestra la efectividad de las pruebas A/B y multivariables en la usabilidad y conversión es  Newegg.com que es una de los sitios Web más importantes de ventas de electrónicos en el mundo. Este sitio Web aumentó sus ventas anuales en un 30% (US$1300 millones) realizando pruebas A/B y multivariable, optimizando siete aspectos:

1. Tamaño de las fuentes.
2. Incluir la lista de deseos (wish list).
3. Abrir a los motores de búsqueda las calificaciones de clientes.
4. Evaluar varios anchos del sitio Web.
5. Adicionar contenido de proveedores
6. Evaluar cuatro páginas de inicio
7. Evaluar 12 botones para adicionar al carro de compras

Fuente: http://www.marketingsherpa.com/article.php?ident=27178

Los  dejo con una pregunta:

¿Su empresa ha utilizado pruebas A/B y multivariables para optimizar el diseño de su sitio Web?

Quedo atento a sus respuestas.

6 Comentarios
0 FacebookTwitterGoogle +Pinterest
Qué es una Landing Page

¿Quiere entender qué es una landing page y si realmente debería crear una para su estrategia digital?, si la respuesta es sí este artículo es para usted.

En el mundo digital existe una larga lista de herramientas y tácticas con la cual puedes jugar y experimentar; las landing pages hacen parte de esta gran lista. Cuando están acompañadas de una estrategia digital integral, las landing pages te pueden ofrecer muchos beneficios.

Aun así, es importante saber cómo hacer una landing page, cuándo implementarla y dónde ubicarla en tu flujo de acciones. Del mismo modo, las landing pages, cómo cualquier otra acción, necesitan objetivos concretos y específicos, esto debe quedar claro antes de diseñar y lanzar la página.

 

Sigue leyendo para aprender qué es una landing page y cómo usarla en tu estrategia digital.

¿Qué es una landing page?

El objetivo de una landing page es que tus visitantes realicen alguna acción específica, en otras palabras, una conversión, ya sea descargando un e-book, llenando un formulario, inscribiéndose a un evento o webinar, agendando una cita, entre otros.

En lugar de dirigir a tus visitantes a tu sitio web (probablemente se distraigan entre todas las opciones de navegación), la idea es dirigirlos a una sola página especialmente diseñada para que los guíe hacia la acción que tú quieres.

Por ejemplo: Decides lanzar un webinar y lo promocionas a través de una campaña de Google Ads, en vez de llevar a esas personas a tu sitio web y rezar que encuentren la página con el formulario para el webinar, es mejor crear una landing page especialmente diseñada para que las personas se inscriban.

Dependiendo de tus objetivos, las landing pages son una excelente forma de captar leads y aumentar las posibilidades de tus ventas o reconocimiento de marca. Vale mencionar que es importante que en la landing page especifiques cuál es el valor que las personas van a obtener después de dejar sus datos de información, ya que muchas personas no están dispuestos a entregar esta información tan fácilmente.

En la siguiente imagen puedes ver un ejemplo de cómo se ve una landing page. Es una página con un diseño sencillo, un copy claro y persuasivo, un call-to-action visible y un formulario corto.

Ejemplo Landing Page

Las 4 formas de usar landing pages en tu estrategia digital

1.Campañas de publicidad digital

Google Ads, Facebook Ads, Instagram Ads o LinkedIn Ads, cuando se trata de campañas de publicidad digital, es imprescindible que tengas una landing page. Si ya estás invirtiendo dinero en una campaña PPC, ¿por qué no hacer todo lo posible para asegurar que le estás sacando el mayor provecho a tu inversión?

Por esto es importante que en tu flujo de acciones te asegures de llevar a las personas a una landing page después de que hagan clic en tu anuncio. Ten en cuenta además de crear una página de agradecimiento después de que las personas hagan la conversión para instalar un código de seguimiento, con esto puedes medir el número de conversiones en Analytics.

Por ejemplo: Supongamos que tienes un negocio de lavado de carros a domicilio y decides que este mes quieres entregar un descuento del 10% a clientes nuevos. Lanzas una campaña en Facebook Ads para promocionar el descuento, cuando las personas hagan clic, los llevas a una landing page en donde explicas los beneficios de tu lavado de carros a domicilio, algunos testimonios y un breve formulario para que las personas dejen sus datos y puedan recibir su descuento.

2. Suscripciones a tu blog

Una forma de promocionar tu blog es a través de suscripciones en donde los lectores puedan estar al día de tus últimas publicaciones. En este caso, puedes crear una landing page para aumentar la cantidad de inscripciones. Cuando la gente haga clic en el call-to-action o llamada a la acción como “Quiero enterarme de las últimas noticias”, puedes dirigirlos a una landing page que explique qué significa suscribirse a tu blog, la información que va a recibir, la periodicidad de los correos y cómo se pueden beneficiar de la información que le estás enviando.

Tip: Cuando las personas llenen el formulario en el landing page, vale la pena incluir un campo que les pregunte sobre qué temas les gustaría leer o qué les interesa más, esto con el fin de segmentar tu audiencia y ser coherente con la información que le envías a tus suscriptores.

3. Inscripciones a un evento

Organizar un evento, ya sea presencial u online como un webinar, requiere de mucho tiempo y recursos. Es muy desalentador invertir tanto trabajo y esfuerzo en un evento solo para que te des cuenta que tienes muy pocos asistentes. No hay mejor herramienta que una landing page bien diseñada para decirle a tu audiencia exactamente por qué deberían asistir a tu evento y qué beneficios obtendrán.

El contenido que incluyas en el landing page de tu evento es muy importante. Es recomendable seguir una línea de diseño sencillo, pero rico en contenido, así que no olvides poner cosas como una galería de fotos, video promocional, información de los conferencistas, beneficios de asistir al evento, información sobre precios, testimonios (si has tenido versiones anteriores), un cronograma de las charlas y actividades, un temporizador de tiempo para generar sentido de urgencia y por supuesto, el formulario de inscripción.

¿Cómo logras que las personas lleguen al landing page de tu evento? Todo depende de tu presupuesto, el perfil de tus asistentes y los canales de comunicación que manejas. Puedes lanzar una campaña en Facebook Ads e Instagram Ads, al igual que anuncios en Google Ads. De igual manera es recomendable promocionar el evento en la página principal de tu sitio web, publicar banners en tu blog y posts en tus redes sociales. Por otro lado, puedes lanzar una estrategia de email marketing usando la base de datos de tus clientes actuales para invitarlos a asistir al evento.

Tip: Mira este ejemplo de una landing page para promocionar un evento.

4. Promocionar el lanzamiento de un producto

¿Estás trabajando en el lanzamiento de una aplicación? ¿Vas a lanzar un nuevo libro de recetas de comida? Una buena táctica de promoción es crear una landing page de pre-lanzamiento para tu nuevo producto. En otras palabras, es como una página de “próximamente” que genera expectativa alrededor de tu marca. Esto te puede ayudar a recopilar una lista inicial de personas que están interesadas en tu producto.

La idea es que la landing page les ofrezca a las personas que se inscriban o dejen su correo (ya depende de tu call-to-action) una oferta especial solo disponible en el periodo antes del lanzamiento. Esto podría ser un descuento, contenido exclusivo o acceso a la comunidad.

Tip: Incluye un temporizador de cuenta regresiva para aumentar el sentido de urgencia y las conversiones. Asegúrate que el temporizador esté programado para que las personas entiendan cuándo se va a lanzar el nuevo producto.

Conclusión

Como pueden ver, hay muchas formas de usar una landing page en tu estrategia digital, siempre y cuando sepas cuáles son tus objetivos, tu presupuesto y el perfil de tu cliente potencial para saber qué canales de promoción usar.

Si has usado landing pages para impulsar tu estrategia digital, deja un comentario contando tu experiencia, ya sea si alcanzaste los resultados que deseabas o si aprendiste algo nuevo.

Autor:

Johanna Hernández

Comunicadora social y periodista. Creyente de la frase, “No es lo que uno dice, sino cómo lo dice”. Cuando no está aprendiendo sobre el mundo digital, está descubriendo nuevas recetas para cocinar o jugando con su perro, Lucas.

3 Comentarios
0 FacebookTwitterGoogle +Pinterest
Importancia del marketing de contenido


El marketing de contenido es fundamental ya que “En el Marketing Digital el contenido es el Rey”. El contenido en Internet es importante para muchos temas del Marketing Digital: Posicionamiento en buscadores (SEO), para mejorar la usabilidad, para las estrategias de Redes Sociales, el éxito en comercio electrónico y las campañas Pago por Clic (PPC), en resumidas cuentas “para todo”.

Revisaré algunos beneficios del contenido de calidad en la estrategia de Marketing Digital:

1. Beneficios del Marketing de contenido para el posicionamiento en buscadores (SEO)

Google favorece el contenido de calidad en los resultados de las búsquedas y especialmente después de las últimas actualizaciones de su algoritmo. La creación de contenido original para un sitio web de forma constante, es una forma efectiva de crear tráfico de calidad hacia su sitio web desde motores de búsqueda.

Un blog es una excelente opción para crear el contenido fresco y de valor agregado para la audiencia. La importancia del blog es que se convertirá en el centro de la estrategia de marketing de contenido. Recomiendo publicar mínimo un artículo por semana, el cual puede ser creado por la empresa o por una agencia de contenidos.

Para complementar los aspectos mencionados antes, los invito a ver un video de Matt Cutts (uno de los voceros técnico de Google) sobre la importancia del contenido en el Posicionamiento en buscadores – SEO (se debe activar el closed caption en Español).

2. Beneficios del Marketing de contenido para la usabilidad y conversión

El contenido de calidad también es fundamental para mejorar la usabilidad y conversión en un sitio Web. Algunos motivos por los que el contenido es importante en este tema son:

2.1 Propuesta única de Valor (UVP)

Utilizar buen contenido para comunicar la propuesta única de valor (UVP) de la empresa es muy importante para mejorar la conversión en el sitio web. Se debe expresar de forma clara por qué los visitantes deberían comprar los productos o servicios de la empresa, mostrando de manera contundente en qué se diferencia la empresa de la competencia.

2.2. La Comunicación debe llevar a la acción

Es muy importante utilizar expresiones con llamado a la acción para convertir el visitante en cliente. Esto permite aumentar la conversión ya que el cliente controla la interacción (está a un clic de distancia de la competencia).

2.3. Entregue “montañas” de información

Muchos expertos en usabilidad afirman que se deben entregar montañas de información ya que trae múltiples beneficios: genera confianza, facilita la decisión de compra y aumenta la conversión.

3. Beneficios del Marketing de contenido para las campañas de SEM (Search Engine Marketing)

El contenido tiene dos aspectos muy importantes relacionados con las campañas de Marketing en Motores de Búsqueda:

3.1. El copy de los anuncios de las campañas

El Copy de los anuncios de las campañas de PPC es uno de los aspectos más importantes para garantizar el éxito. Si se crea un buen copy (que incluyan las palabras claves de interés) los anuncios aumentarán la tasa de clic (CTR) y por tanto, disminuirá el valor por clic.

3.2. El contenido en las páginas de arribo

El contenido de calidad en la página de arribo (también llamada landing page) permitirá convertir mayor cantidad de visitantes en clientes en las estrategias de pago por clic. Las páginas de arribo deben tener un contenido adecuado y de calidad que les permita cumplir con la expectativa del visitante.

Contenido en redes sociales4. Beneficios del Marketing de contenido para la estrategia de Redes Sociales

Con la importancia cada vez mayor de las redes sociales, hace que el contenido tome más valor ya que este es la principal herramienta para crear y desarrollar una comunidad en social media.

Es por esto que una empresa que quiera realizar una estrategia en redes sociales debe contratar un Community Manager, que sería el responsable de generar el contenido de calidad que se requiere en este canal. Es importante anotar que el Community Manager tiene más responsabilidades que la de generación y adecuación del contenido para las redes sociales, sin embargo es una de sus actividades más importantes.

Para terminar quisiera conocer su opinión sobre lo siguiente:

¿Cuáles otros beneficios le brinda el CONTENIDO al Marketing Digital?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.

Imagen destacada tomada de DepositPhotos.com

18 Comentarios
0 FacebookTwitterGoogle +Pinterest
Usabilidad Web UX

El mercado competitivo de hoy en día, exige cada vez más de los responsables de las áreas de marketing y diseño de las empresas. Las marcas buscan diferenciarse de la competencia y para fortalecer su presencia en internet, es necesario encontrar las mejores experiencias de usuario. Una opción viable para determinar el modelo a seguir pueden ser los sitios con reseñas de usuarios wix, que permiten conocer en detalle lo que gusta y lo que no.

La Experiencia de Usuario o UX (del inglés User Experience) es un término que comienza a tomar fuerzas. Se trata del uso de técnicas para mejorar la experiencia que el consumidor tiene con los productos o servicios ofrecidos por las empresas. En el caso de un sitio web, básicamente garantiza que el usuario disfrute de una experiencia adecuada al acceder al mismo. Esto es, que cada elemento elegido sea fácil de usar, útil en su función y eficiente en su objetivo final.

Aunque esto parezca algo sencillo de resolver, muchos desarrolladores cometen ciertos errores, ya que se trata de un camino muy subjetivo el que hay que recorrer.

1. No tener en cuenta el comportamiento del usuario

La usabilidad no siempre se consigue por el solo hecho de insertar botones o funcionalidades convenientes. La base del proyecto debe ser sobre el comportamiento del usuario, sobre aquello que cubre sus expectativas. Diferentes estudios demuestran que favorecer la usabilidad del sitio, interfiere no solo con los resultados de conversión sino también en la relación que se establece con el consumidor. Hay que recordar siempre que, en ocasiones, menos, es más.

2. No considerar el contexto en UX

Crear buenas experiencias de usuario va mucho más allá de una tecnología increíble que permita que el sitio sea leve y se cargue en una fracción de segundo. Entender el contexto completo en que ese uso será hecho, se vuelve un diferencial competitivo muy importante. Tener una vasta idea de las motivaciones, necesidades y reacciones de las personas ante las funcionalidades del producto en cuestión permite un desarrollo más completo.

Usabilidad Web movil3. No tener en cuenta la experiencia web en móvil

El usuario de dispositivos móviles no solo tiene menos superficie para disfrutar del diseño, sino que también, posee una conexión a internet más limitada, debido a esto, busca concluir sus tareas de forma rápida. En este caso, la velocidad y adaptabilidad del sitio web serán fundamentales. Cualquier confusión puede significar la pérdida de su atención. En el caso de que el sitio solo posea una versión web, hay que pensar en llevar la experiencia al móvil.

4. Excederse en las notificaciones

Las notificaciones suelen ser una excelente manera de interactuar con los usuarios, pero bombardearlos con ellas puede volverse algo irritante. Cuando una persona accede a un sitio web, con seguridad no espera visualizar una decena de ventanas abriéndose en secuencia, esta situación lo aleja de lo que realmente fue a buscar. Es fundamental saber encontrar el mejor momento para pedir, por ejemplo, el acceso a su localización, contactos o cámara. De esta forma, el usuario consigue entender el beneficio de dicha autorización.

5. Falta de foco en el diseño web

Finalmente (y no por menos importante), la falta de foco en el contenido brindado por el sitio puede ser un error que a la larga resultará perjudicial. Focalizar solo en la estética del diseño es algo que muchos hacen y aunque esto lo vuelva visualmente atractivo, necesita casi obligatoriamente de contenido de calidad para volverse interesante.

3 Comentarios
0 FacebookTwitterGoogle +Pinterest
La importancia del responsive design: olvidarse de los dispositivos móviles, gran error de algunas empresas

Silvia González Poncelas, responsable de comunicación de la empresa Sarbacán Software, envió un artículo que muestra la importancia del responsive web design. Los dejo con el artículo:

Parece mentira que, pese a las numerosas estadísticas que muestran el cambio de hábitos de los consumidores a la hora de consultar sus correos electrónicos, todavía haya empresas que no presten atención a las dos palabras más de moda del momento: responsive design o diseño responsivo.

Sin ir más lejos, los españoles lideran la estadística europea en cuanto al número de dispositivos conectados a Internet. PC, portátil, tableta, Smartphone… Son tantas las posibilidades tecnológicas actuales que nos permiten realizar una acción tan simple como consultar un correo electrónico… Pero, ¿qué haces cuando no visualizas correctamente un email? Lo borras. O lo mantienes en la bandeja de entrada hasta que llegues a casa para verlo bien. Aunque la gran mayoría optamos por la primera opción y a otra cosa. Tampoco hay tiempo que perder.

Ese es el gran error de muchísimas empresas que, por desconocimiento o por ahorrar recursos, no optimizan sus plantillas de email para que sus newsletters se vean correctamente en cualquier aparato electrónico.

Existen una serie de factores que deben animar a cualquier dueño de una página web o negocio a dar el salto definitivo al siglo XXI:

  • Fidelizar clientes: hay pocas cosas más molestas que no poder visualizar al completo el contenido de un email sin ampliar la imagen, reducirla y deslizar los dedos cientos de veces por la pantalla para leer una frase completa. ¿Resultado? Clic en ‘Eliminar’.
  • Aumentar ventas: los mails bien trabajados permiten comprar y adquirir productos y servicios desde un teléfono móvil en pocos pasos. La consecuencia directa del diseño responsivo es un incremento de las ventas y, por lo tanto, de los ingresos finales.
  • Evitar envíos absurdos: si se utiliza un servicio profesional de envío masivo de emails en el que se paga por mail enviado, nada más rentable que evitar a toda costa la papelera del servidor de correo por una mala visualización.
  • Disminuir las bajas: para mantener nuestra base de datos, y para que nuestros envíos no sean mal vistos por los filtros anti-spam, es interesante que los suscriptores no se den de baja de nuestro boletín ni eliminen nuestros mensajes directamente.
  • Ganar imagen de marca: un email que se visualiza correctamente en cualquier dispositivo electrónico transmite modernidad y confianza a los suscriptores, además de facilitarles las cosas y evitar que rehúyan de nuestros servicios.

Por lo tanto, y a modo de resumen, nada más efectivo que contratar a un diseñador gráfico (si es que no sabemos hacerlo nosotros mismos) para que nos ayude a adaptar nuestras comunicaciones informativas o comerciales a los tiempos que corren.

Obviamente no todos tenemos por qué conocer el poco agradable lenguaje HTML; sin embargo, y gracias a él, nuestros emails estarán optimizados para ser vistos en cualquier dispositivo sin necesidad de crear ni mantener aplicaciones específicas para cada uno de ellos –en función del sistema operativo que utilicen-. Y es que el gran error que puede cometer un principiante a día de hoy es proporcionar un ancho fijo que margine a la mayoría de la población cuando, en realidad, el marginado debería ser él.

Autora:

Silvia González PoncelasSilvia González Poncelas
Responsable de comunicación de la empresa Sarbacán Software

Blog: blog.sarbacan.es
Sitio web: www.sarbacan.es

12 Comentarios
0 FacebookTwitterGoogle +Pinterest
Los mejores 16 sitios con fotos e imágenes gratis para usar en el blog, Facebook, Google+ y otros

Les presento una lista priorizada de los mejores 16 sitios web con fotos e imágenes gratis (libre distribución) con sus principales características, para ser usadas en el blog y las redes sociales de manera legal.

Cuando utilizamos la opción de imágenes de Google u otro buscador de imágenes para encontrar fotos para amenizar nuestros artículos del blog y posts de Facebook y Google+, en la mayoría de las ocasiones las imágenes que encontramos estarán protegidas por copyright lo que volvería ilegal usarlas en nuestros canales.

Por otro lado el uso de la fotografías se hace cada día más importante, ya estas permiten que el contenido que creemos para estos el blog y las redes sociales se vuelve mas atractivo. Se ha probado en múltiples estudios que Facebook y Google+ son muy visuales y esto hace que un contenido con una buena imagen origina mucho más atención e interacción, que el mismo contenido sin imagen o con una imagen pequeña.

Los sitios recomendados son los siguientes:

 

1. MorgueFile 

El sitio Web tiene una sección de fotos gratis para nuestros proyectos digitales.

MorgueFile - JuanCMejia.com

 

2. Woophy

Más de 1.000.000 de fotos de excelente calidad. Se pueden realizar búsquedas por tema y por ciudad.

Whoopy - JuanCMejia.com2.

 

3. FreePhotosBank 

Importante de grupo de fotos gratis distribuidas por categorías.

 

FreePhotosBank - JuanCMejia.com

 

4. Free Pixels 

Fotos agrupadas por categorías. No tiene muchas fotos del tema de negocios.

FeePixels - JuanCMejia.com

 

5. Free Images 

Contiene 6.000 fotos gratis profesionales y con buena resolución.

FreeImages - JuanCMejia.com

 

6. Flickr Creative Commons Service

Muchos usuarios de Flickr han elegido ofrecer su obra con una licencia de Creative Commons, y puedes explorar o buscar contenido con cada tipo de licencia.

Flickr - JuanCMejia.com

 

7. EveryStockPhoto 

Gran cantidad de fotos. Permite agrupar las fotos por tipo de licencia (Free Licenses, Public Domain y Creative Commons). Requiere registro gratuito para descargar las fotos en alta resolución.

EveryStockPhoto - JuanCMejia.com

 

8. Stock.Xchang 

Gran cantidad de fotos e imágenes para el Community Manager de excelente calidad. Se requiere registro gratuito para descargar las fotos. Requiere registro gratuito para descargar las fotos en alta resolución.

Stock.Xchang - JuanCMejia.com

 

 

9. Studio 25 

No tiene tantas fotos pero el sitio Web permite hallar la que necesitamos rápidamente. Requiere registro gratuito para descargar las fotos en alta resolución.

Studio 25 - JuanCMejia.com

 

10. Image Base 

No tiene tantas fotos como otros sitios pero las que tiene son de muy buena calidad

Imagebase - JuanCMejia.com

 

11. CJO Photo

Tiene buenas fotos pero solo se pueden encontrar navegando las categorías ya que no tiene buscador.

CJO Photo - JuanCMejia.com

 

12. FindIcons

Más de 410,000 íconosy figuras con resolución limitada (máximo 512 pixeles). Tiene una opción de filtrado muy poderosa, similar a las opciones pagas.

FindIcons - JuanCMejia.com

13. Image After 

No es un sitio tan profesional como los anteriores pero hay buenas imágenes para nuestros proyectos.

Image After - JuanCMejia

 

14. Open Photo 

Tiene fotos por categoría, no es fácil de buscar un tema determinado pero hay algunas fotos muy buenas. La foto tiene una marca pequeña en la parte inferior izquierda

OpenPhoto - JuanCMejia.com

15. FreeFoto 

También tiene miles de fotos con un buscador muy efectivo. Los filtros laterales ayudan a afinar la búsqueda. Las imagenes tienen una marca con el sitio Web en la parte inferior derecha.

FreeFoto - JuanCMejia.com

 

16. Free Digital Photos 

Tiene miles de fotos de profesionales y de excelente calidad. Las gratuitas son de muy baja calidad.

Freedigitalphotos - JuanCMejia.com

Si conoces otros sitios con imágenes gratis cuéntame y los publicaré en este artículo con los créditos.

Quedo atento a tus sugerencias.

25 Comentarios
0 FacebookTwitterGoogle +Pinterest

Send this to a friend