Diseño web

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

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: , , , ,

Probablemente muchos de los que leais este post ya conoceis perfectamente lo que es un test multivariante en Google Website Optimizer. Para los que no, aquí un pequeño resumen: Optimizer es una herramienta que te permite testear diseños alternativos de una landing page para ver si mejoras la conversión o cambia el comportamiento del usuario (esto es un test A/B) o bien puedes, dentro de un diseño, testear diferentes versiones de uno o varios elementos del diseño (botones, colores, fotos, etc.) para ver si mejoras la conversión, etc.

Un test multivariante nos permite comprobar el rendimiento de varias alternativas de un elemento en un diseño web. Para mejorar la conversión es una muy buena herramienta.

Dicho esto, en el caso práctico y real del que voy a hablar aquí, tenemos una web de comercio electrónico, y queríamos comprobar, tras leer un artículo, si la posibilidad de que un usuario haga clic sobre el botón de compra de un producto varia en función del color de éste. Es decir, si tengo un botón de “Iniciar compra” de un producto, ¿el color de este botón influye en la decisión del usuario de hacer clic en él, y por tanto comprar?.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

Por supuesto, yo tengo claro que sí, que influye y mucho, y hay montones de estudios, posts y artículos hablando de ello, porque los colores tienen una asociación inconsciente con el comportamiento del usuario. Pero con creerlo o intuirlo no vale, así que decidí hacer un test multivariante para determinar si el color del botón de “Iniciar compra” influía en el CTR, el índice de clics, en ese botón de compra de los usuarios, en qué medida y qué margen de mejora teníamos en la web. Sigue leyendo »

Tags: , , ,

El diseño web es una actividad que día a día, conforme el uso de internet es más general, va cobrando cada vez más importancia, ya que ante la demanda de creación y mantenimiento de sitios web cada vez más profesionalizados se hace necesario contar con buenos diseñadores web.

Lo malo es que la profesión de diseñador web alberga a muchos perfiles, algunos muy profesionales y conscientes de lo que supone el diseño de web y otros que simplemente se apuntan al carro porque saben manejar Dreamweaver un poco por encima y consideran que con eso ya son diseñadores web.

diseno-web-profesional-01

Aquí tenemos un diseño web reciente, de 2008 o 2009, aunque no lo parezca, ¿os atreveis a llamar profesional del diseño web a su autor?

La principal característica del diseño web y la que lo diferencia de otros tipos de diseño, es que requiere un buen conocimiento de conceptos como navegadores, usabilidad, arquitectura de la información, resoluciones, código HTML y demás zarandajas técnicas y no técnicas directamente relacionadas con el medio en el que trabaja el diseñador web: internet. En resumen, puedes ser un gran diseñador gráfico, pero eso no te convierte en un buen diseñador web, y la fórmula también se aplica a la inversa.

Después de conocer a muchos y trabajar yo mismo como diseñador web unos cuantos años, participar en procesos de selección e incluso hacerlos, os incluyo unas listas de mínimos que SI y que NO debe cumplir un diseñador web para poder considerarlo como tal. La lista podría ampliarse mucho en ambos sentidos, pero se trata de ver lo básico que debe tener y no tener un diseñador web.

Lo que SÍ debe saber o tener un diseñador web que sabe diseñar webs:

  1. En su portafolio deben aparecer varias direcciones web diseñadas por él mismo. Si un diseñador web no tiene URLs en su portafolio solo hay dos posibilidades: no sabe hacer webs o las que ha hecho le averguenzan y no las pone en su curriculum. En cualquier caso nada bueno.
  2. Debe conocer y utilizar CSS. Hoy en día, por muchísimos factores, el uso de CSS es imprescindible en el diseño web. Si un diseñador web no utiliza CSS generalmente es porque no se ha molestado en aprender y estar actualizado o porque sigue diseñando webs basadas en el uso de flash o en tablas y recorte de imágenes. Sigue leyendo »

Tags: , , ,

La analítica web puede sernos muy util a nivel de diseño web y puede ser una herramienta importante para conocer a nuestros usuarios y orientar correctamente nuestros diseños web hacia ellos. En el caso de que utilicemos Google Analytics hay una serie de datos que resultan fundamentales para el diseño web, así que ya sabes, si eres diseñador y te da repelús usar Google Analytics, no tengas tanto miramiento porque es una herramienta de medición que te va a ser fundamental para hacer un diseño web mucho mejor.

Google Analytics puede ayudarte con el diseño web en lo referente a los navegadores empleados por los usuarios.

A nivel de diseño web uno de los valores más importantes que nos ofrece Google Analytics es la posibilidad de ver los navegadores web que utilizan los usuarios que usan nuestro sitio web. En los ejemplos voy a utilizar los datos de un sitio web de comercio electrónico orientado fundamentalmente a España pero con usuarios y clientes en algunos paises como Venezuela, Chile o Uruguay. Si por ejemplo, analizo la información del mes de septiembre de 2009 veo la lista de los navegadores más utilizados y los porcentajes de tráfico correspondientes a cada uno (en Google Analytics se ve esta información en Usuarios/Navegadores). Esta información lógicamente me es muy util porque me dice que navegadores usan los usuarios de mi sitio web. En este caso los navegadores que se usan son estos:

Google Analytics nos muestra el porcentaje de visitas de nuestro sitio web que corresponde a cada navegador.

Google Analytics nos muestra el porcentaje de visitas de nuestro sitio web que corresponde a cada navegador.

Como podemos ver haciendo una rápida suma los usuarios que emplean Internet Explorer y Firefox suponen el 94,5% de las visitas al sitio web, con lo que ya tenemos una primera conclusión, por muy obvia que sea: nuestro sitio web debe funcionar perfectamente y estar correctamente diseñado para ser usado con Internet Explorer y Firefox como mínimo. Sigue leyendo »

Tags: , , , , ,

« Older entries § Newer entries »