Archivo | Marketing Digital RSS for this section

“We are no longer living in a mobile-first world, we are in a mobile-only world.” Larry Page

“We are no longer living in a mobile-first world, we are in a mobile-only world.” Larry Page

Wireframes, estructurando las bases proyectos

Hoy hablaré sobre una de las cosas que más realizo en mi día a día y que se van volviendo tanto una rutina, que muchas veces le vamos restando su importancia … Los wireframes

Primero comenzaré definiendo que un wireframe  y complementando con Nielsen, es una técnica de bajo costo que consiste en realizar un prototipo rápido de poca calidad gráfica (puede realizarse en papel o en algún software), que brinda insights tempranos en usabilidad y diseño.

Dicho de otra forma más sencilla de entender, un wireframe es una aproximación a lo que queremos que sea el resultado final del proyecto, sin entrar mucho en detalles gráficos.

En el desarrollo de cualquier proyecto como una aplicación móvil, un sitio web, un aplicativo multimedia, entre otros, los wireframes se convierten en la solución ideal para lograr un punto estratégico de comunicación entre el arquitecto de información o ux que es quien organiza la estructura del proyecto, con los ingenieros, estrategas y diseñadores que son quienes desarrollarán las siguientes etapas del mismo.

Son elementos fundamentales en etapas previas de los proyectos digitales, pueden evitar cambios o reprocesos que implican costos y retrasos en etapas futuras. Sirven además para realizar pruebas con usuarios internos o finales y realizar mejoras antes de comenzar la implementación.

Algunos puntos fundamentales a tener en cuenta en la realización de los wireframes:

  • Deben realizarse a mano o si se desarrollan de forma digital deben ser en escala de grises, con el fin de no desviar la atención ni sesgar el concepto gráfico del diseñador.
  • Acompañar las pantallas con notas que indiquen elementos destacados a tener en cuenta.
  • Son el resultado final luego de un proceso largo de levantamiento de requisitos con el cliente e investigación de referentes y competencia en el mercado.
  • Para llegar a él debemos haber pasado por un largo proceso de estructuración y estrategia con el cliente.
  • Debemos evitar elementos gráficos que puedan distraer el objetivo puntual del mismo que es distribuir contenido. Evitar usar diseños, imágenes reales y demás.
  • Se recomienda siempre comenzar los bosquejos o mockups a mano para luego pasar a hacerlos más detalladamente en algún programa.
  • Se recomienda incluir notas explicativas para facilitar la labor del ingeniero y diseñador.
  • Representar cada zona, botón, formulario y demás de la forma más detallada como hipervínculos y demás
  • Normalmente siempre se comienza con el home del sitio web, siendo la página más relevante en sitios tradicionales. En caso que sea un ecommerce, se recomienda entregar WF de home + página de producto o categoría

Tipos de Wireframes

  • Para sitios web: existen de alta y baja calidad y depende de la etapa del proceso del sitio donde nos encontremos.
  • Para APPS: no se basan tanto en páginas como tal, sino en procesos dentro de la app, se diseña por pantalla y se debe especificar muy bien que hace cada elemento. Debemos tener en cuenta sistema operativo, será nativa? para qué sistema operativoo va?
  • Sitio móvil: si es únicamente para versión m.sitioweb, debemos acomodar nuevamente pensando en tamaños de pantallas desde la más pequeña de Android hasta la más grande del mercado.
  • Responsive: fundamental categorizar de mayor a menor importancia elementos a ser mostrados, se debe acomodar todo dentro de contenedores que se vayan moviendo de acuerdo a la necesidad de la pantalla.

Realizan wireframes para sus proyectos? Qué tipo de proyectos y qué herramientas usan? Recibo sus comentarios!

Kit de herramientas para el trabajo en digital!

Excelente infografía con las mejores herramientas para diferentes áreas del mundo digital.

Mejores herramientas digitales

Y … ¿Cómo funciona Google?

En este corto pero interesante video, veremos cómo funciona Google por dentro, cómo arroja los resultados y algunos trucos que debemos seguir para nuestro posicionamiento en la web.

A pesar que el algoritmo ha cambiado un poco últimamente, el video sigue siendo útil, pues refleja los aspectos fundamentales a tener en cuenta.

Building the Web Together

Excelente resumen de la evolución de la web realizado por Google. Muy recomendado!

Optimizando nuestra Landing Page

Como dice la frase popular “todo entra por los ojos”, es por esto que nuestra página de entrada o landing page debe ser la vitrina perfecta para enganchar a nuestros visitantes a que hagan la acción deseada, cumplan nuestros objetivos o logren conversiones de manera óptima.

Cuando hablamos de páginas de entrada nos referimos al primer contacto que tienen los visitantes con mi marca a través de anuncios pagados (como Adwords), publicaciones en redes sociales, banners, campañas de correo masivo, blogs especializados y más.

Es importante en este punto quitar ese mito popular que únicamente se debe optimizar el home del sitio, pues es claro que el primer contacto de nuestro posible cliente con mi marca, pocas veces se da de esta forma.

¿Qué debe tener una página de entrada efectiva?

Ya sea el home de nuestro sitio web o una página de entrada creada para una campaña específica con un objetivo concreto, debemos tener en cuenta ciertos aspectos:

  • Debemos ser coherentes entre lo que el usuario espera al dar clic en un anuncio con lo que se ofrece en la página de entrada, tanto en imagen como en contenido.
  • Debe ser concreta, no por mucha información que brindemos seremos más convincentes. Debemos únicamente brindar lo necesario y ofrecer algo muy interesante que impulse la conversión.
  • Tener muy claros y visibles los objetivos de la página de aterrizaje, que el usuario sepa de inmediato dónde deber dar clic o que campos debe diligenciar para acceder al beneficio que brindemos.
  • Tener en cuenta la distribución de los elementos y la redacción para la web, que siempre se invite a la acción.

Ejemplo de página de entrada

A continuación les comparto un ejemplo realizado por mí, de una página de entrada con formulario. Este tipo de páginas de entrada es muy utilizada por sitios enfocados en captación de leads y normalmente son las que encontramos al ingresar a través de campañas de correo masivo y pautas en internet.

Imagen

Normalmente se pide algunos datos personales no muy largos, a cambio de acceder a un contenido exclusivo y se caracterizan por:

  • No pedir muchos datos, siempre se pide lo más básico con el fin que el usuario lo diligencia y acceda a un beneficio.
  • Pedir datos que se tengan a mano como nombre y correo electrónico, no pedir datos complicados que se deban consultar en otro documento, esto genera un alto rebote.
  • Tener un botón claro y llamativo al final del formulario, que muestre claramente una acción a seguir.
  • Tener de forma visible ayudas gráficas o datos de soporte para evitar que se vayan por falta de información.

Te ha resultado interesante ese post? compártelo!

Experimentando con Google Analytics

¿Por qué estamos teniendo tantos rebotes en nuestro sitio? ¿Qué podemos hacer para mejorar las conversiones sin invertir mucho?

Seguramente esas son algunas de las preguntas que gerentes de mercado administradores de sitios web se hacen a diario, mucho más en pequeñas y medianas empresas que no cuentan con una gran agencia digital o con un presupuesto y personal muy calificado para optimizar a diario sus sitios web.

Es por esto que quise escribir este artículo con el fin de explicar, cómo con poco esfuerzo y sin una inversión significativa podemos realizar test de mejora a nuestro sitio para encontrar la versión más ganadora, tanto en diseño como en conversiones, implementando Test A/B de forma sencilla.

 ¿Qué podemos hacer con Google Content Experiments?

Experimentos de comercio electrónico

Permite realizar cambios que midan una variación importante sobre las transacciones o los ingresos del sitio.

Experimentos de objetivos

Se realizan cuando queremos medir una acción puntual en una página de nuestro sitio como lo es visitar la página como tal o presionar un botón de la página específica.

Experimentos de uso

Se busca medir el comportamiento de un usuario respecto a los elementos presentados en el sitio web, es decir si usan bien una herramienta, si les parece atractiva y si la herramienta o sección tiene el comportamiento esperado por nosotros.

Configurando nuestro experimento

  1. Decidir cuál de las opciones de experimento vistos anteriormente es el que necesitamos para nuestro sitio web. (comercio electrónico, objetivos o uso del sitio).
  2. Tener acceso al código fuente de la página que vamos a realizar el experimento para poder ingresar el código que genera Google Analytics.
  3. Crear una variación de la página original con cambios significativos que nos permitan evaluar su desempeño y asegurarnos que esa nueva página tenga una url pública.

Una vez tengamos estos 3 elementos listos ingresaremos a nuestra cuenta de Google Analytics y pondremos en marcha el experimento:

Paso 1 – Accedemos a expermientos

Imagen

Paso 2

Imagen

Paso 3 – Configuramos experimentos

Imagen

Paso 4 – Analizamos resultados

Imagen

Consideraciones finales

  • Los experimentos se cierran automáticamente a los 3 meses, en muchos casos y dependiendo nuestro volumen de visitas las conclusiones las podemos tener antes.
  • Cada experimento está limitado a 5 variaciones y máximo podemos tener 12 test o experimentos activos al tiempo.

¿Has probado esta herramienta? deja tus comentarios!