Nunca me he planteado no externalizar el desarrollo de la tienda online. En tiempos de WordPress, Shopify y Prestashop ya se necesitan cada vez menos conocimientos técnicos para llevar esta tarea a cabo.

programar webDerechos de foto de Adobe Stock

Nunca he montado una web desde cero

Siempre he estado convencido de que mi tiempo estaría mejor invertido en otras cosas. Ahora que estoy de vacaciones me suelo poner con mejoras de la nueva web del proyecto de coleccionismo cada noche. Está quedando cada vez mejor.

Para serte sincero esta web no la he montado yo tampoco. El 80% ya me lo han entregado hecho pero el curro realmente está en ese último 20%. Normalmente suelo tirar de nuestro desarrollador para esta tarea. Ahora mismo no tengo ninguno a mano por lo que me he buscado la vida por mi parte. Estoy disfrutando haciéndolo. No tengo la sensación que esté perdiendo el tiempo porque hay cosas que descubres antes cuando lo haces tú mismo.

¿Para quién y cuándo tiene sentido montar una web desde cero?

Y no. La respuesta a esto no es para todos aquellos que no dispongan del dinero para pagar a alguien. No me refiero a todos aquellas que no tengan otra alternativa. Vayamos al grano.

Tiene sentido si tienes algunos conocimientos en manejar un CMS tipo WordPress, Prestashop o Shopify. Magento lo descarto desde ya porque requiere un nivel técnico mucho más elevado que todas las demás plataformas. Si realmente partes desde cero igual el esfuerzo teniendo la alternativa de externalizar sería demasiado elevado.

Te sirve para saber lo que quieres. Cuando pones a un desarrollador a hacer algo no sueles saber desde ya lo que necesitas. Muchas veces cuando ves el resultado sabes lo que no quieres. Esto te puede costar bastante dinero que puedes evitar si retocas “gilipolleces” tú mismo hasta tenerlo en el punto que lo necesitas.

Si acortas el tiempo de desarrollo. No sé si te ocurre lo mismo pero muchas veces cuando un desarrollador te dice que tarde al menos 1 semana para llevar a cabo algo no suelo tener ni idea si es cierto o está exagerando. ¡Nos pueden vender la moto si quisieran! Lo cierto es que si es urgente te pones ya. No tienes que esperar tu hueco en la cola. Se hace y punto.

Ya están siendo las 10 de la noche y probablemente me dejo la configuración de los gastos de envío por peso para otro día. Lo bueno es que ya sé lo que tengo que hacer. Algo es algo… Te iré contando.

Stay tuned.

Mucho habrás leído sobre los tips de Usabilidad que puedes utilizar en tus diseños web y landings.

Puedes hacer muchas cosas para optimizar tus páginas. Y no es que un tipo de optimización sea más importante que otro, sino que los pequeños detalles pueden aumentar las CONVERSIONES de tus páginas.

Según un estudio de la Universidad de Stanford, el 46,1% de los usuarios reconoce que se deja llevar por el diseño de una web para confiar o no en la empresa que está consultando. De hecho, entre estas 10 Directrices de Credibilidad en la Red que propone el Laboratorio de Tecnología Persuasiva de Stanford, se encuentra la siguiente:

 

Directriz #6. Diseña tu sitio para que parezca profesional

Hemos detectado que la gente evalúa un sitio web rápidamente solo a partir del diseño visual. Cuando diseñes tu sitio, presta atención a la disposición, la tipografía, las imágenes, los errores de coherencia y más cosas. Por supuesto no todos los sitios adquieren credibilidad por parecerse a IBM. El diseño visual debe ajustarse al propósito del sitio.

animacion home

Porque aunque las mejoras de experiencia de usuario pueden ser diversas dentro del diseño (colores, estructura, tiempo de carga, tipografías, imágenes…), en este post quiero centrarme en el recurso de las animaciones web.

Las animaciones web y la interacción son dos de las Principales Tendencias Web de 2018.

 

¿Qué son las Animaciones Web?

Son textos o imágenes que tienen efectos de movimiento. Se emplean, principalmente, como toques de atención visual para que los usuarios se fijen en aquellos contenidos que son importantes:

  • Ayudan a centrar la atención del usuario cuando ve destacado lo fundamental
  • Sirven para dar relevancia a una frase o apartado del copy que no se pueden perder (botón de compra)
  • Contribuyen a otorgar un aspecto profesional a la página (por ejemplo, la iluminación sutil de un botón cuando se pasa el cursor por encima otorga elegancia y confianza)

imagen animación

8 Razones para Utilizar Animaciones en Tus Páginas

#1. Tiempo de carga

Cuando un usuario llega a tu página, dispones de 5 segundos para captar su atención y que no se vaya. El tiempo de carga de las webs -debido muchas veces a la gran cantidad de plugins que utilizamos, a los servidores contratados o a la conexión a Internet del usuario- suele ser uno de los factores determinantes para que los usuarios decidan quedarse en una página o abandonarla.

Con lo que ello supone en la inversión que has hecho para atraerlos…

Pues bien, ¿por qué en vez de dejar la típica página en blanco con el círculo que muestra que se está cargando no muestras de inmediato el contenido que ya se ha cargado?

Y ¿por qué no haces que parte de ese contenido sea dinámico? De esta forma llamarás la atención del usuario mientras “espera” a que terminen de cargarse todos los elementos.

 

#2. Da  dinamismo al Scrolling

Cuando el usuario ve que hay ciertos elementos de la web que se mueven, eso lo incita a hacer scrolling.

Los beneficios del scrolling son 2:

  1. Aumenta el tiempo de permanencia en la página
  2. Permite que el usuario descubra nuevo contenido que puede ser de su interés

Si lo utilizas en una página de ventas, sin duda las imágenes y textos en movimiento acercarán al usuario mucho más fácilmente hacia tu oferta.

stripe animation

 

#3. Destaca contenido: no distraer sino orientar

Puedes utilizar las animaciones para destacar contenido importante que sabes que lo ayudará a tomar una decisión.

Seguro que has visto más de una página web en la que te lanzan lo que se conoce como bump offer en inglés, es decir, una oferta destacada que solo se hace una vez. Normalmente esas ofertas llevan algún tipo de movimiento continuo porque llaman la atención del usuario y hacen que multiplique el valor de la compra en tu landing de ventas o en tu eCommerce.

También se puede utilizar este tip para avanzar cuál es el orden lógico al que te derivará la web.

#4. Muestra  que la página no se ha quedado congelada

Esto es especialmente importante en el momento del pago, en el carrito de la compra. Pero también para páginas que apuntan hacia una oferta.

#5. Aumenta Conversiones

Es la consecuencia lógica de todo lo que te he comentado más arriba. Y en realidad funciona porque lo que buscas, una vez has captado la atención del usuario para que permanezca en tu página, es que compre el producto o servicio que propones, o que realice la acción que esperas.

Poner animaciones en las llamadas a la acción hará que sepa dónde tiene que pulsar

O si pones movimiento por ejemplo en un contador de urgencia le harás dar cuenta al usuario de la necesidad de actuar deprisa.

#6. Muestra Confianza y Profesionalidad

Te lo comentaba al principio: los usuarios evalúan una web por su diseño visual.

Un buen diseño, con animaciones sutiles, aumenta la confianza y demuestra profesionalidad.

Fíjate en las webs de Apple: no solo tienen un diseño limpio sino que también introducen dinamismo de forma sutil en determinados elementos.

 

La buena noticia es que hasta ahora este tipo de optimizaciones te las tenía que hacer un desarrollador porque tenía que tocar código, pero hay una forma muy interesante de introducirlas fácilmente sin necesidad de conocimientos técnicos.

 

¿Qué herramienta puedo utilizar para crear estas animaciones web?

En Socialancer te recomendamos ClickAnimate porque es la herramienta que en cuestión de segundos te permitirá crear animaciones sobre cualquier página web que ya tengas creada.

ClickAnimate

Además, en su Versión Básica podrás conseguir todo esto por un precio muy bajo:

  • Más de 50 animaciones dinámicas de entrada, arrastre y looping que funcionan con cualquier elemento de tu página
  • Plugin de ClickAnimate que funciona tanto en Mac como en Windows
  • Controles de tiempo, retrasos y engagement
  • Píxel de activación en cualquier página que administres
  • Funciona con cualquier creador de páginas web o landings – no es necesario que cambies de herramienta (LeadPages, Wix, Clickfunnel, OptimizePress, Shopify…)
  • 100% Responsive para móviles
  • No es necesario saber de desarrollo ni tocar código
  • En la Versión Básica UNLIMITED podrás utilizarlo para tantas páginas web propias como quieras
  • Tutoriales en español para instalarlo y utilizarlo
  • Con posibilidad de añadir 80 animaciones adicionales y licencia de Agencia con la Versión PRO

Mira este ejemplo y demo en español para que veas cómo funciona:

Como verás, antes estas animaciones eran un tip creativo y original, pero ahora ya se han convertido en algo que los usuarios esperan y que marcan una diferencia entre los sitios web más profesionales y acordes con las tendencias en diseño web y en conversión de aquellos que siguen mostrando elementos estáticos.

¿Utilizas alguna herramienta para animar tus sitios web?

Cuando no me escucha nadie me gusta decir “la gente es muy idiota”. No me entiendas mal. No es una falta de respeto en general sino una observación basada en los hechos de los últimos 10 años en mis negocios online.

usuario pezDerechos de foto de Adobe Stock

  • ¿Dónde se puede comprar?
  • ¿Cuánto cuesta?
  • ¿Me lo puedes regalar?
  • Etc.

Esto es una pequeña selección de preguntas frecuentes que llegan a través de Facebook o el formulario de contacto de mis tiendas online. El tema es que en cada momento se específica precio, lugar de compra, tiempo de entrega, etc. Por mucho que quiera dejar las cosas claras, seguirán entrando este tipo de preguntas.

Conclusión: la gente es muy pez, antes de mirar preguntan o simplemente ignoran información disponible para volver a preguntártelo porque sí.

¿Qué puedes sacar de esto?

En ocasiones por mucho que optimices no vas a poder reducir incidencias al 0. No puedes cambiar la naturaleza del ser humano.

Esto no significa que si algo no sale como previsto que les puedas echar la culpa a los demás. Tienes que seguir en la línea de buscar si no es el 100% por lo menos el 90%.

Pero si hay una cosa que puedes hacer y consiste en crear duplicidades. ¿A qué me refiero con esto?

  • Poner los gastos de envío en la portada en el banner y junto a cada precio de producto en la web.
  • Incluir un enlace en una newsletter al principio, en el medio y al final para aumentar la probabilidad de que se detecte el link.
  • En general repetir información que se pregunta con frecuencia en varias partes en la web, p.ej. preguntas frecuentes, ficha de producto, banners, etc.

Así que no hay que desesperar. Algunas dudas no van desaparecer nunca porque en general el usuario no se esfuerza en leer la información disponible. Lo único que puedes hacer para compensar un poco es crear duplicidades. Se puede reducir pero nunca evitar del todo. El usuario medio es muy pez. Es lo que hay.

 

Si he contado bien es el cuarto lavado de cara de Quondos desde que lanzamos el proyecto. Cambiar la web siempre supone un esfuerzo más grande de lo que uno se imagina aunque hay que diferenciar.

Nuevo Quondos 2017

Los diferentes niveles de cambio en los últimos 4 años en Quondos

  • Re-lanzamiento: es lo que hicimos del primer al segundo lavado de cara. Con el nuevo diseño iba una nueva plataforma de la mano. Y con ello una serie de nuevas funcionalidades. Es lo más duro a nivel de cambio por errores que surgen y recursos que tienes que invertir para llevar a cabo esta tarea.
  • Lanzamiento mejora y optimización: del segundo al tercer lavado de cara arreglamos un montón de fallos sobre todo de usabilidad. Se añadieron nuevas funcionalidades de gamificación para seguir mejorando la experiencia del usuario.
  • Rediseño: del tercer al cuarto cambio simplemente hicimos un rediseño sin apenas tocar las funcionalidades. Eso sí, se hizo desde la primera hasta la última página. Fue un rediseño completo.
  • Lavado de cara: esto ha sido el cambio más reciente y más ligero. No se ha tocado la web entera sino únicamente las partes más visibles.

Un nuevo diseño permite conectar de nuevo con tus usuarios

Un cambio visual en un proyecto online simboliza movimiento. Esto en general es una señal positiva porque demuestra que tu negocio te preocupa y que quieres seguir mejorándolo.

Además también es un punto de contacto con tus clientes existentes y potenciales para recoger su feedback. Inviertes recursos sin recibir de forma inmediata algo a cambio. Demuestras que lo que te preocupa es una mejor experiencia de tus usuarios.

Resumiendo: un lavado de cara no te va a ayudar a facturar más de forma milagrosa. Es una de muchas cosas que tienes que ir haciendo. Te sirve tanto para fidelizar a los que ya están como para darle el último empujoncito a los que ya estaban casi convencidos de comprarte. O eso por lo menos es lo que me gusta pensar… ;)

Si quieres ver las diferentes portadas incluyendo la primera landing que se lanzó (más fea imposible), pincha en la publicación que sacamos ayer en Facebook.

Después de varios meses de retraso por fin lo que he conseguido. He lanzado la web de mi recién estrenada agencia Beguerrilla.es. Aparte de las típicas excusas he tardado tanto porque tenía claro que no quería sacar la típica página de empresa.

beguerrilla-home

Al final tienes que marcarte fechas concretas y deadlines donde sabes que no hay marcha atrás y lo sacas sí o sí. Ya estoy llevando una cartera de clientes desde hace casi un año y no me hace realmente falta la web lograr trabajo. Aún así tenía ganas de tener por fin un lugar oficial donde me puedes contactar para contratar mis servicios.

Cómo se diferencia Beguerrilla.es de otras webs de agencia

Después de varios meses de reflexión indirecta tenía claro que quería diferenciarme. Ya sabes: o eres el más barato o te presentas de forma diferente a los demás. Lo mío no es competir por precio por lo que única iba a tener una opción.

  • Aspecto visual: iba a ser de lo más minimalista posible. Sin fotos, vídeos y haciendo uso únicamente de colores en caso de los logos. Básicamente iba a ser letra gris sobre fondo blanco. Esto me aporta la ventaja de tener un coste de producción más bajo y siendo más clásico no pasará tan rápidamente de moda (o eso es la esperanza).
  • Tono: los textos iban a ser “habladores”. Quería a toda costa evitar las típicas descripciones frías de servicios. Cuando lo lees quiero que tengas la sensación que estoy al lado con una taza de café sentado en el sofá vendiéndote la mota, perdona explicándote los servicios quería decir.
  • Transparencia: los que nos movemos hace años en el sector del marketing online sabemos el bullshit que puede leer muchas veces en las webs. Todos somos los mejores, referentes de nuestro campo, influencers, más innovadores, etc. Tocaba haber algo más honesto que parodiaba a este tipo de eslóganes utilizados por muchas empresas. Otro factor es poner de forma transparente lo que son mis fees.

Estructura y contenidos de la web

De forma global es fácil tener una visión de cómo uno quiere hacer las cosas. Se hace ya más complicado cuando tienes que ponerlo en práctica. Esto es lo que he hecho yo.

El menú de Beguerrilla.es, adivina lo que se esconde detrás de "Humo" ;)

El menú de Beguerrilla.es, adivina lo que se esconde detrás de “Humo” ;)

Navegación de menú y en el footer

Las páginas de empresas (o de agencias en mi caso) suelen tener prácticamente una navegación similar. Aquí puedes encontrar típicamente estas secciones:

  • Productos/servicios
  • Sobre nosotros
  • Precios
  • Blog

En Beguerrilla.es también encuentras esas secciones lo que pasa es que tienen nombres diferentes:

Todavía tengo pendiente añadir dos secciones más:

  • Spam: aquí irá la newsletter
  • Fracasos: aquí hablaré de mis proyectos fracasados como contraste a casos de éxito que puedes encontrar en muchas webs de empresa

Contenidos y diseño de las páginas

El propio nombre bullshit es un poco arriesgado porque el termino se podría asociar de forma literal con mis servicios. Pienso que si quieres destacar hay que arriesgar por lo que habrá gente le gustará este estilo por ser diferente y otros que pensarán que se me ha ido la olla (que no digo que no tengan algo de razón). En cada página encuentras estos elementos.

Estructura y diseño de las páginas

Estructura y diseño de las páginas

  • Transcripción fonética: es la forma universal de pronunciar cualquier palabra independientemente del idioma. Es un elemento de diseño que situado debajo del título crea una separación al resto.
  • Cita: es otro elemento de diseño que resume mi filosofía sobre cada apartado pero con las palabras de un tercero. Además me gusta como queda en la web.
  • Contenido: mi objetivo ha sido describir de forma más cercana y transparente lo que hago. Igual me he pasado de raya en algunas frases pero ya conoces mi filosofía. Para dejar indiferente no invierto tiempo y esfuerzo.

Redes sociales de Beguerrilla

Te lo resumo. No hay. ¿Por qué he prescindido de ellas? Básicamente considero que para una pequeña agencia como Beguerrilla es una pérdida de tiempo. Antes de hacer autopromo aunque sea de forma indirecta prefiero invertir este tiempo para los clientes (esto acaba de sonar un poco a bullshit, lo admito). Otra razón es que todo el mundo tiene redes sociales. No tenerlas es una forma de diferenciarse. Tengo un perfil en Twitter donde me puedes contactar y además la web tiene un formulario de contacto. Considero que es un buen filtro no ponerlo demasiado fácil para un cliente potencial ponerse en contacto conmigo. Si realmente te interesa hacerlo, encontrarás formas y vías de comunicación porque existen de sobra.

Lo hecho, hecho está. La web de Beguerrilla.es representa mi forma de trabajo, filosofía de vida y forma de ser:

No bullshit, centrarse en lo esencial y no malgastar recursos. No sé si he acertado o no. El tiempo lo dirá… ;)

Stay tuned.

PD: quedan muchas cosas por retocar pero ya sabes lo que dicen. Si sacas un proyecto (o una web en este caso) y no te da un poco de vergüenza es que has tardado demasiado en lanzar…