Diseño web

You are currently browsing the archive for the Diseño web category.

Tras hablar en anteriores posts sobre lo que es un test A/B y definir una metodología básica para realizar un test A/B con ciertas garantías, ahora le toca el turno a las herramientas a las que podemos optar para realizar un test A/B y/o un multivariante.

El mercado esta lleno de herramientas para realizar test A/B. Aunque lo más importante es pensarlo bien, el para que, no el como.

Las herramientas pueden variar, pero lo realmente importante es siempre la claridad de ideas y que un test sea algo que realmente tenga utilidad, no un divertimento. Sí, me repito y digo esto mucho, pero es necesario que eso quede muy claro. La herramienta es siempre secundaria, lo otro no.

Y dicho esto, hoy día la oferta de herramientas para testing web es extensísima, pero, bien por conocimiento directo, bien por referencias de garantía o por sus características, aquí teneis las principales herramientas de testing A/B y también multivariente del mercado, entre otras, a las que puede merecer echarle un vistazo en condiciones:

Google Website Optimizer

Google Website Optimizer

Sin lugar a dudas, Google Website Optimizer el la herramienta de A/B testing y multivariante más popular. Ideal para comenzar en este mundillo del testing por muchas razones, su uso es realmente sencillo, mediante la inclusión de un pequeño fragmento de código javascript en la página original y en aquellas que conforman el test. Además, al ser validado todo el proceso paso a paso, en caso de que hagas algo mal el mismo Optimizer te pone sobre aviso. Permite ofrecer diferentes alternativas de diseño de una landing page (A/B test) u ofrecer variantes del contenido (imágenes, copys, etiquetas h, etc) dentro de una landing page (multivariante). Puede utilizarse tanto para A/B testing como para multivariantes y permite, entre otras cosas, distribuir tráfico entre versiones de página a testear. No tiene coste y además hay una guía avanzada de uso de Optimizer muy recomendable si ya tienes exigencias de medio-alto nivel.

Visual Website Optimizer

Visual Website Optimizer

Visual Website Optimizer, a diferencia de Google Website Optimizer, ya es una herramienta que ofrece una serie de características más extensas (a su precio, es de pago en función de las visitas a testear y la versión gratis permite testaera sobre 1.000 visitantes). El funcionamiento es similar, como en todas, con el uso del consabido javascript que se debe incluir en las versiones originales y alternativas. Lo que Visual Website Optimizer si ofrece diferente, entre otras cosas, es: segmentación por keyword (muy interesante, según la keyword de entrada enviar a una u otra landing), mapas de calor y clicks de los tests, capacidad para hacer test sin saber nada de código y muchas otras características. Sigue leyendo »

Tags: , , , , , ,

En los últimos 6 o 7 años me ha tocado participar en bastantes procesos de selección de perfiles de diseño web, y mira que ha pasado tiempo, y sigo viendo a día de hoy en los curriculums que recibimos de diseñadores web cosas que para nada son recomendables si pretendes convencer a alguien de tu valor como profesional en el campo del diseño web.

Por supuesto, no soy para nada una autoridad en el tema, no trabajo en un departamento de recursos humanos ni soy la persona que más entrevistas ha hecho a diseñadores web, pero después de trabajar más de 10 años en diseño web, de ver muuuuuchos curriculums de diseño web y hacer muuuuchas entrevistas a diseñadores para contratar, si que creo que puedo aportar algo tan sencillo como deciros en que debeis centrar vuestro curriculum, en que nos fijamos aquellos que queremos contratar diseñadores web… porque la verdad es que a veces recibes cada cosa…

¿Eres diseñador web?, ¿buscas trabajo? Pues entonces presta atención a estos puntos, que son críticos para que se te valore como tal y se te quiera contratar.

¿Eres diseñador web? Es básico incluir direcciones de tus trabajos

Aunque no tengas muchos trabajos web, de verdad, lo más importante es incluir las URLs en tu curriculum

Lo primero, no, lo primerísimo. Si realmente eres un diseñador web, enseña tu trabajo lo primero, que tu trabajo hable de ti. Leer montones de curriculums de diseñadores web en los que no aparece ni una sola URL, ni una triste dirección web es muy frustrante. Si de verdad has trabajado como diseñador web o aunque sea como gráfico, ENSEÑA TU TRABAJO, por pequeño que sea. Es muy dificil que te llame la atención un diseñador web que no tiene nada que enseñar porque eso generalmente significa: A. No tengo webs que enseñar o B. Tengo webs que he hecho pero que no quiero enseñar. Y no se que es peor. Sigue leyendo »

Tags: , , , , , ,

Hace ya un par de meses escribí un post explicando algo tan sencillo y básico como que es un A/B test y para que sirve, como inicio de una serie de post temáticos sobre la optimización web en general, y el A/B testing en particular y como primer tema dentro de la optimización.

Tras ese primer post, ahora le toca el turno a este, en el que trataré el tema de como planificar un test A/B y como utilizar una metodología básica, una guía que sirva para que este tipo de test nos de los mejores resultados e información posibles, independientemente de las herramientas con que se realice.

Lo más importante de un test A/B está en su planificación, en su metodología en como hacerlo y, sobre todo, para que.

Este tipo de test son una herramienta de mejora de gran valor, pero deben realizarse en un marco concreto, siguiendo unos mínimos pasos y, sobre todo, por una razón de peso y buscando precisamente esa mejora, pero no como una acción de entretenimiento o de prueba porque sí.

 

Gráfica de un test A/B con Google Website Optimizer

Como puede verse en esta gráfica de Optimizer, un test A/B puede comenzar con una versión dando muy buenos resultados para luego cambiar radicalmente. De ahí la importancia de tener un método, una guía, que de consistencia a la prueba

Dicho esto, los pasos principales, el método básico, la guía para conseguir realizar un test A/B que sea un éxito y nos de información relevante sobre nuestro sitio web se basa en:

  1. Tener claros los objetivos o valores del sitio web. Lógicamente, por obvio que parezca, este es el punto de partida. Si no sabemos cual es el objetivo a alcanzar, los valores que marcan el horizonte de a donde queremos llegar, va a ser muy dificil que busquemos una mejora, porque no tenemos referencia de si estamos mejor o peor, y la intuición no sirve.
  2. Reconocer claramente indicadores que nos digan de manera inequívoca que debemos realizar un test A/B. Si, por ejemplo, queremos tener 500 leads al mes generados por una página que recibe 10.000 visitas en el mismo periodo de tiempo, ya sabemos que eso implica un 5% de conversión, así que configura ese objetivo en Analytics y observa. Si no llegas a ese porcentaje de conversión, un test A/B sobre esa página puede ser una de las herramientas que te ayuden a conseguirlo, pero no debe hacerse porque sí. Esa observación de indicadores es la “palanca”, el gatillo que dispara las acciones de mejora y aquí el testing cobra todo el sentido. Sigue leyendo »

Tags: , , ,

El test A/B o A/B testing lleva de moda unos cuantos años, y la verdad es que con razones más que fundadas, porque es una excelente y buenísima herramienta/proceso para optimizar un sitio web, no solo en lo relativo a conversión, lo más evidente, sino en todas las facetas que implican la interacción del usuario.

Dicho esto me he propuesto escribir una serie de post que compongan una especie de guia básica de optimización web, en la que el test A/B es una buena parte, porque todos tenemos muy claro que es, para que sirve y como hacer un test A/B, ¿o no? La mejor opción es siempre empezar por el principio, un “back to basics”, porque no conviene presuponer que todos sabemos lo que son las cosas por muy populares que se hayan vuelto.

Y el principio aquí es ¿qué es un test A/B?

Un test A/B, hablando del entorno web,  es un método que permite ofrecer al usuario, sin que éste lo sepa, dos o más versiones de una misma página de un sitio web, de forma que el mismo producto, servicio o contenido de una página puede ser ofrecido a diferentes usuarios bajo diferentes layouts o diseños. La herramienta que hayamos escogido para ejecutar el test A/B recogerá la información relativa al rendimiento de cada uno de los diseños en función de la conversión a objetivo que cada uno coseche, y de esta forma dispondremos de una información 100% empírica (basada en datos) sobre la capacidad de cada diseño para generar mejores resultados, sean estos los que sean.

Explicado de una manera más pausada, un test A/B nos permite, en primer lugar, comprobar que modelo de presentación o interacción funciona mejor para una página web, por ejemplo:

Test web A/B

Ejemplo de un test A/B real, comparando dos modelos de presentación e interacción muy diferentes del mismo producto

Sigue leyendo »

Tags: , , ,

Dieter Rams es un diseñador industrial alemán, que aparte de su trabajo, sobre todo para la marca Braun, es muy conocido por haber elaborado 10 principios básicos o mandamientos sobre el diseño. Y digo diseño así, a secas, porque supongo que originalmente Dieter Rams los pensó para su propio escenario de trabajo, el diseño industrial, pero la verdad es que los pensó tan bien, que son aplicables en su práctica totalidad a cualquier tipo de diseño o escenario estético.

Los 10 mandamientos del buen diseño de Dieter Rams pueden aplicarse perfectamente a la web

Dieter Rams pensando en sus cosas

Dieter Rams, probablemente pensando en sus principios de diseño

Y de hecho, estos principios o mandamientos, aplicados a un sitio web, son, por lo menos en mi opinión, un buen termómetro de la calidad y utilidad de su diseño.

Estos famosos 1o mandamientos o principios son:

  1. El buen diseño es innovador.
  2. El buen diseño hace un producto útil.
  3. El buen diseño es estético.
  4. El buen diseño ayuda a un producto a ser entendido.
  5. El buen diseño es discreto.
  6. El buen diseño es honesto.
  7. El buen diseño es duradero.
  8. El buen diseño es constante hasta el último detalle.
  9. El buen diseño está concienciado con el medio ambiente.
  10. El buen diseño es tan poco diseño como sea posible.

Vale que no todos son 100% aplicables al diseño web si los interpretamos literalmente, pero desde luego un buen número sí lo son, y de hecho suponen una ayuda en la definición de un diseño web como un elemento de real utilidad y correctamente orientado. Es fácil comprobarlo de la siguiente forma, aplicando estos principios al diseño web: Sigue leyendo »

Tags: , ,

Siempre hablamos de la optimización como algo fundamental para conseguir rendimiento, eficacia y rentabilidad en cualquier proyecto web. En un ecommerce, orientado a facturar, esto ni siquiera es una opción, es una obligación, así de claro.

La optimización generalmente se plantea tras el lanzamiento de un proyecto y cuando éste lleva un recorrido inicial que permite obtener una serie de datos (ventas, tiempos de visita, rebotes, fuentes de tráfico, etc) que a su vez hacen posible el analizar su rendimiento y, a partir de ahí, empezar a proponer acciones de mejora en el sitio web siempre buscando un mejor rendimiento en función del objetivo principal del sitio web.

Sobre estos temas, y en concreto de optimización de un ecommerce de servicios, hablamos largo y tendido en el Conversion Thursday de Madrid el pasado 17 de febrero

En concreto, en función del análisis de un proyecto de ecommerce de servicios durante un periodo de 18 meses se encontraron 10 puntos clave de optimización web, cuya mejora y el encontrar un modelo óptimo es necesario para alcanzar umbrales de rentabilidad.

Antes de detallar los 10 puntos de mejora claves en un ecommerce os dejo el vídeo de la exposición de este tema en el Conversion Thursday de Madrid:

Sobre los 10 puntos clave de optimización y mejora de un ecommerce, en este caso de servicios, que tratamos esa tarde, éstos son:

  1. El TPV. La pasarela de pago que empleemos es determinante en el éxito de las operaciones de venta. Hay TPVs con sistema CES (3D Secure), que son la mayoría, y que tienen sentido en el marco de la venta de bienes físicos. Quizás en el sector servicios tengan menos sentido, y, en general, debes tener un TPV adecuado a lo que vas a vender y que, en la medida de lo posible, permita integración con tus sistemas financieros, de pedidos y logística, etc. Sigue leyendo »

Tags: , , , , ,

Escribo este post por una pregunta que me han hecho ya unas cuantas veces y que no es otra que “¿qué es eso del snippet de Google?”. Muchos hablamos del “snippet de google” con la mayor naturalidad del mundo, porque es parte de nuestro día a día, pero hay mucha gente que se pregunta ¿snippet?, ¿de google?, ¿qué es eso?, ¿cómo funciona?, ¿va con diesel o gasolina?. Pues como suele ser lo mejor, empecemos por el principio, ¿qué es el snippet de Google? Pues es ni más ni menos el conjunto de elementos (enlace + texto + URL) que forman un resultado en la página de resultados de google. Esto es un snippet (lo que hay bajo la caja de búsqueda):

Snippet de Google

El snippet es el resumen y enlace al sitio web que aparece en la página de resultados de Google, o SERP

Una vez que ya tenemos claro lo que es un snippet en Google, ya sabemos que una búsqueda en Google aparecen varios en una página de resultados, y la siguiente pregunta suele ser, ¿cómo se forma el snippet de Google, de donde salen esos textos? Esta es la anatomía de un snippet normal a día de hoy, con una búsqueda hecha sin login en Google y una sesión limpia:

Snippet de Google. Anatomia

Todo lo que aparece en negrita es porque coincide con los términos de búsqueda que hemos introducido al hacer la búsqueda, en este caso “peliculas de los 80″.

Ahora bien, la gracia está en saber de donde saca Google la información para construir el snippet, he aquí las directrices principales, aunque no son las únicas ni esto es una ciencia exacta: Sigue leyendo »

Tags: , , ,

Una de las principales ventajas de la analítica web es que podemos conocer datos muy importantes sobre como navegan los usuarios por nuestros sitios web, y eso nos permite orientar las mejoras que queramos hacer hacia nuestros usuarios y pensando en el uso real que hacen de nuestro sistio web.

Desde el punto de vista del diseño web siempre me ha parecido fundamental controlar y medir que navegadores de internet utilizan los usuarios en los sitios web en los que trabajo y que resoluciones de pantalla, además de otros indicadores igualmente importantes.

La evolución de uso de los navegadores de internet en tan solo un año ha sido lo bastante significativa como para tenerla en cuenta a nivel de diseño web.

Es un dato muy importante sobre todo por asegurarnos de que el CSS va a funcionar igual en todos los navegadores empleados y también asegurarnos de que el sitio web se va a visualizar igual en cualquier navegador, sin hacer cosas raras si vemos la web en Firefox, Opera, Chrome o en Internet Explorer.

Estudiando recientemente la evolución del uso de navegadores de internet por parte de los usuarios en varios perfiles de Google Analytics que mido, en los que hay sitios web de temátcias muy diferentes, se aprecian cambios muy importantes en el uso de navegadores web por parte de los usuarios. Como muestra, esta comparación tipo (una media entre 5 sitios web de temáticas distintas) entre el uso de navegadores en el primer trimestre de 2009 y en el primer trimestre de 2010:

Comparativa de uso de navegadores de internet entre el primer trimestre de 2009 y el primer trimestre de 2010.

Comparativa de uso de navegadores de internet entre el primer trimestre de 2009 y el primer trimestre de 2010.

Podemos observar cosas bastante interesantes: Sigue leyendo »

Tags: , , , , , ,

Hoy me he percatado al abrir en un navegador (Chrome) una sesión nueva en google.es que el aspecto de la página de resultados había cambiado y mucho. Habituado a ver todos los días las páginas de resultados de google.es, como otros tantos miles de mortales, el cambio me ha llamado la atención, y mucho.

La página de resultados de google.es (o SERP) que me he encontrado es muy muy parecida a la SERP de Bing

Pagina de resultados nueva de Google.es para la búsuqeda "alquilar coche"

Pagina de resultados nueva de Google.es para la búsqueda "alquilar coche" - Clic sobre la imagen para verla grande.

Por comparar y entrender el porque llama la atencion tanto este cambio, aquí podeis ver una página de resultados del buscador Bing:

Pagina de resultados del buscador Bing

Pagina de resultados del buscador Bing para la búsqueda "rent a car" - Clic sobre la imagen para verla grande.

Como puede verse a simple vista, la disposición de los elementos de la nueva página de resultados de Google es muy similar a la de Bing, sobre todo en lo referente al menú vertical de la parte izquierda, algo nuevo en google y que fue una apuesta de Bing. ¿Es este el futuro de la página de resultados de Google?

Sigue leyendo »

Tags: , , , , ,

Bueno, pues el pasado día 23 estuve en Walqa, en la V Feria de Tiendas Virtuales, en el que era el día dedicado al vendedor, y la agenda venía potente: a primera hora, de 9:30 a 13:30, tenía plaza en el taller “Optimización y consejos para tiendas virtuales de éxito” de Jordi Oller. Y luego por la tarde, de 16:00 a 18:00 el seminario “e-commerce en las redes sociales“, también con Jordi Oller, y luego de 18:00 a 20:00 el seminario “Como mejorar la usabilidad de mi tienda virtual”, del consultor de usabilidad Daniel Torres Burriel, al que me apetecía muchísimo ver, por lo mucho que le leo en twitter y en su blog.

El día del vendedor de comercio electrónico en la V Feria de Tiendas Virtuales, en Walqa, pintaba muy bien, con ponentes de mucho nivel y prestigio a nivel nacional.

Web de la V Feria de Tiendas Virtuales, en Walqa.

En la web de la V Feria de Tiendas Virtuales puede consultarse mucha informacion sobre el evento.

Como elegí esos tres eventos me perdí a Fernando Maciá y a Javier Gosende, y aunque me hubiera encantado, la verdad es que como ya le he visto 4 o 5 veces, y siempre con un enorme nivel, preferí ir a ver a ponentes que aún no había visto en eventos de este tipo.

Con 8 horitas de traca por delante me presenté en Walqa a eso de las 9:15, y tengo que decir que como no había indicaciones de hacia donde ir tuve que entrar hasta en dos edificios y preguntar donde eran los talleres varias veces hasta que supieron orientarme. De hecho llegaron a decirme que no había nada ese día y que me había equivocado, pero bueno, dejemoslo como anécdota.

Taller “Optimización y consejos para tiendas virtuales de éxito”, con Jordi Oller.

Esperaba mucho de este taller, lo primero por su título, muy goloso, con palabras clave para el negocio en internet como pueden ser optimización y éxito, y también por el ponente, Jordi Oller. Sigue leyendo »

Tags: , , , ,

« Older entries