Trucos Optimización » Diseño

¿Cómo conseguir más usuarios registrados en mi web? Imitando a Pinterest

Daniel Rodríguez — Thu, 02 Feb 2012 08:15:00 +0000

Hace un par de semanas Business Insider explicaba que el éxito de la red social Pinterest se debía a su proceso de registro de usuarios. Este post es una revisión del artículo original de Busines Insider, poniendo mayor émfasis en aquellos puntos que hacen especial el proceso de registro de Pinterest y justificando por que es un buen ejemplo a poner en práctica.

Pinterest es una novedosa red social donde organizar y compartir imágenes que nos vamos encontrando por Internet y que nos parecen interesantes.
Según Hitwise, el crecimiento de Pinterest tiene cifras de vértigo y a día de hoy recibe alrededor de 40 millones de visitas cada mes. Según comScore, Pinterest ya cuenta con más de 5 millones de usuarios. Y ha generado según Shareaholic un 3,60% de visitas referencia en enero, prácticamente igual que el 3,61% que ha generado Twitter.
Unas cifras para tener un ojo puesto en esta red social recién salida del horno.

Registrarse en Pinterest

Seguro que el servicio que ofrece Pinterest es un factor importante para el crecimiento de esta red social, como también lo serán el cuidado estético y funcional de esta web. Pero seguro que otro de los factores determinantes para el éxito de Pinterest es lo bien resuelto que tienen el proceso de registro de usuarios.

Estos son los pasos a seguir y los aspectos positivos de cada uno de ellos:

Solicitar invitación: el primer paso consiste en dar nuestro email, quedando a la espera de recibir una invitación para formar parte de Pinterest. Tener que esperar una invitación y no poder registrarnos en el momento puede ser visto como una lacra, pero también el sistema basado en invitación puede ser positivo si está dando a Pinterest una imagen de “comunidad VIP” que despierta mayor interés o curiosidad para formar parte.
Email de invitación: pasados un par de días recibimos en nuestro buzón de entrada un email de Pinterest en el que nos informan que para ser usuarios basta con utilizar Facebook connect o incluso Twitter. Siguiendo el enlace que se incluye en el mismo email vamos hasta una pantalla en la que se nos felicita por la invitación y ya podemos registrarnos con Facebook Connect.
Confirmación de Facebook: tras pulsar el botón de FB Connect vemos un mensaje de información sobre Pinterest, pero lo más relevante y útil para convencernos es ver cuantos de nuestros amigos ya utilizan Pinterest.
Nombre de usuario de Pinterest: finalmente debemos introducir el nombre de usuario que queremos tener en Pinterest, pero prácticamente es como si ya formásemos parte de la red social puesto que gracias a FB Connect Pinterest ya muestra nuestra imagen de perfil. El único punto débil aquí es que este último formulario podría recordar el email del que venimos y con el que ya pedimos la invitación.

Conclusión

Si Facebook es la mayor base de datos de usuarios de Internet con más de 800 millones de usuarios registrados ¿por qué tenemos que crearnos nuevas cuentas de usuario allí donde vamos?
Parece lógico que FB Connect sea una opción que no sólo pero siempre debería estar disponible en cualquier proceso de registro de usuarios. Y esto no tiene nada que ver con el hecho de que Facebook nos guste más o menos, sólo tiene que ver con la utilidad real de este servicio. Además, esta integración también ayuda a persuadir a nuevos usuarios si estos ven que algunos de sus amigos ya utilizan cierta web, sea una red social como Pinterest o un nuevo ecommerce que requiere de créditos para ganar confianza y credibilidad en sus primeros días.

¿Cómo optimizar los errores?

Barbara Posila — Thu, 26 Jan 2012 09:15:52 +0000

Errores 404, errores de formularios, resultados no encontrados, avisos de no disponibilidad del producto. Son algunos de los mensajes que nos pueden aparecer en un sitio web para informarnos que ha habido un error. ¿Cómo tratarlos? ¿Cómo no perder al usuario y sacar provecho de ello? En este artículo os voy a hablar de los trucos que he aprendido leyendo Defensive Design for the Web del equipo de 37signals.

Errores 404

Primero hay que tener control sobre cuántas y cuáles de las páginas nos dan error 404. Lo podemos ver fácilmente desde Google Webmaster Tools, entrando en Diagnóstico y Errores de rastreo. Además de un listado de páginas no encontradas, vemos también dónde se encuentran los enlaces a ellas.

Si en cambio queremos tener información sobre las páginas 404 en Google Analytics, os recomiendo 3 métodos: a través de una URL única, a través de pagename personalizado o implementando un evento. Todo muy bien explicado en trucosgoogleanalytics.com en el post Controlar los errores 404 con Google Analytics. Una vez lo tengamos en Google Analytics, os sugiero también crear alarmas para que no se nos escape este tema.

Pues bien, tenemos todo configurado, tenemos toda la información que necesitamos sobre este tipo de errores y ahora toca aplicar algunas buenas prácticas para optimizar las páginas de error 404:

Reducir el número y corregir los enlaces rotos tanto en nuestra web como en las fuentes externas. Puede parecer muy obvio, pero no hay que olvidarlo!
Crear páginas graciosas. No hay nada mejor que utilizar el humor para dispersar la irritación del usuario. Aquí os pongo un ejemplo de la web Fryewiles.com que a mi me gusta particularmente.

Mantener el mismo diseño que en el resto del site para no despistar al usuario.
Incluir el logo de la empresa.
Explicar por qué el usuario está viendo esta página. Poner ejemplo de errores más comunes.
Dar posibilidades de seguir navegando. Proponer enlaces a la home, a una página relevante, incluir el buscador, emails o otras vías de contacto con la empresa.
Y por último, redireccionar las URLs mal deletreadas. Por ejemplo cuando un usuario pone un “w” más (wwww.ejemplo.com) o uno menos (ww.ejemplo.com).

Errores en formularios

Para mi los errores en los formularios son unos de los puntos más críticos en la web. Sobre todo si el objetivo principal de un site se consigue rellenando un formulario (ecommerce, leads, suscripciones). Mi compañero Dani Rodríguez en su artículo 12 Trucos para el diseño de formularios web habla de cómo diseñar un buen formulario. Es vital para evitar que los usuarios no obtengan demasiados avisos de errores. Aquí os dejo unas reglas para seguir:

Destacar los campos con errores y/o poner el mensaje de error justo al lado de ellos. Este es un ejemplo de mensajes de error desvinculados de los campos a los cuales se refieren.

Marcar campos obligatorios u opcionales con asterisco, texto o negrita.
Validar los campos automaticamente para no obligar al usuario a volver a repasar todo el formulario.
Aceptar diferentes formatos de datos, por ejemplo, el formato del código postal, fechas, tarjetas de crédito, etc. O indicar claramente que formato se requiere.
Eliminar botones “Reset”.
Ofrecer texto de ayuda para los campos más complicados o un desplegable para sugerir opciones

Búsquedas sin resultados

Jakob Nielsen en su artículo Search: Visible and Simple dice que si un usuario no encuentra lo que busca en la primera búsqueda, las probabilidades de que logre encontrarlo con las siguientes búsquedas está disminuyendo. La conclusión: mejorar el motor de búsqueda y la página de resultados. ¿Cómo?

Explicar por qué no hay resultados. En el libro Defensive Design for the Web se presenta un caso de Sears. Buscando la palabra “Nike” aparece la información que los calzados no están disponibles en la tienda online.
Anticipar errores comunes y ofrecer sugerencias tanto para las búsquedas mal deletreadas como para los sinónimos.
Incluir el campo de búsqueda para facilitar al usuario hacer los cambios en los términos que busca o en el alcance de la búsqueda.
Ofrecer filtros para refinar los resultados.

No disponibilidad del producto

¿Os ha pasado alguna vez que estabais a punto de comprar un producto, pero sólo después de añadirlo al carrito resultaba que no estaba disponible? A mi sí. Y no ha sido una experiencia agradable. Además siempre me estaba preguntando: “¿Y cuándo podré comprarlo?”. En estos momentos me gustaría que todos los site siguieran estas reglas:

Dejar claro que el producto no está disponible ahora mismo. Y mejor si lo marcamos ya en el listado de los productos.
Informar cuándo estará disponible de nuevo
Aceptar pedidos anticipados
Ofrecer notificaciones por correo electrónico
Ofrecer alternativas / productos similares

¿Necesitas ayuda con la usabilidad de tu web?

En web-analytics.es tenemos expertos en usabilidad web que estarían encantados de revisar tu web y darte las recomendaciones sobre cómo se pueden resolver las incidencias. ¡Contáctanos para obtener más detalles!

Posts relacionados

6 trucos para incrementar las conversiones web en un 300%

Daniel Rodríguez — Thu, 08 Dec 2011 08:05:25 +0000

Los siguientes 6 trucos estan basados en las conclusiones de estudios realizados sobre sitios web reales.
Los incrementos en conversiones y ventas proporcionados pueden variar en función de cada sitio web pero, a grandes rasgos, las propuestas enumeradas a continuación garantizan una mejora en el ratio de conversión de tu web.
En el fondo, cada una de las sugerencias satisface necesidades básicas de los usuarios como son: la confianza, inmediatez o accesibilidad.

Trucos para incrementar el ratio de conversión

Incluye vídeos
La introducción de un video en la home o la landing page de tu producto puede llegar a incrementar las conversiones hasta un 200%.
En el caso de Buy Real Twitter Followers, el hecho de añadir un vídeo en la home explicando en que consiste el servicio, significó un incremento de ventas del 216% (Sales increased by 216% after adding introductory video).
Por otra parte, la gente de SixPackAbsExcercise se enteró de que sus competidores habían logrado duplicar las ventas gracias a un video explicativo en la web. Así que decidieron probar con un test A/B en el que se incluyó un video de demostración del producto. El video generó un incremento del 46,15% en usuarios que mostraron interés en el producto, y que luego se traduciría en compras potenciales (Video converts and here is the proof: 46% increase in conversion rate).
Un tercer ejemplo, muestra como un par de e-commerce consiguen incrementar las ventas en hasta un 46% gracias a haber insertado vídeos de producto. Lo llamativo de este caso es que el ratio de conversión se ve incrementado simplemente por el hecho de añadir un video, independientemente de que todos los usuarios hayan reproducido sus contenidos (Videos Sell Products – Even If Users Don’t Actually Watch Them)
Evita el CAPTCHA
El uso del CAPTCHA reduce en un 3,2% el ratio de conversión.
Un interesante estudio demuestra la efectividad del CAPTCHA en términos de elemento que sirve como filtro anti SPAM, pero también de elemento que obstaculiza la accesibilidad y la conversión. Como resultado del test, se deduce que utilizar CAPTCHA se traduce en una pérdida del 3,2% de conversiones. Si bien es cierto que reduce un 88% el SPAM, habría que preguntarse si realmente compensa cuando valoramos la gestión e ingresos asociados (CAPTCHAs’ Effect on Conversion Rates).
Reduce la velocidad de carga
Las conversiones descienden un 1% por cada 0.1 segundos de disminución en el tiempo de respuesta.
Un 18% de compradores online aseguran que abandonaron el commerce donde intentaban comprar debido a tiempos de carga lentos. Sin embargo, el siguiente estudio demuestra como la optimización del tiempo de carga puede llegar a incrementar las conversiones en un 66% (Slow Shopping Cart Pages Are Killing Conversions. An Optimized Page Got a 66% Conversion Lift!)
Otra cifra referencia es la que sugiere Amazon, cuando asegura que las conversiones desciende un 1% por cada 0,1 segundos de disminución en el tiempo de carga de una web (Why a Fast Website Kills Two Conversion Birds With One Stone).
Otra de las ventajas de reducir el tiempo de carga de tu página web es que Google lo tendrá en cuenta a la hora de posicionarte en sus resultados de búsqueda. Mientras más rápido cargue una página web, más fácil es que esta ocupe primeras posiciones en los resultados de búsqueda de Google.
Puedes optimizar el tiempo de carga de tu página web con PageSpeed.
Incluye un live chat
El uso de un live chat supone incrementar las conversiones en un 31%.
Ez Texting, un servicio web de mensajería de texto, probó con un test A/B para averiguar si añadir la opción de chat en la página de suscripción incrementaría el número de registros. La versión de página de suscripción con chat consiguió un 31% más de registros que la versión sin la opción de chat (Live Chat widget increases signups by 31%).
Utiliza fotos de personas
El uso de fotos de caras humanas incrementa el ratio de conversión cerca de un 50%.
El componente humano influye positivamente en la toma de decisiones de los usuarios. Reemplazar la imagen de un teléfono por la imagen de la persona con la que vamos a contactar se tradujo en un incremento de las llamadas del 48%. Del mismo modo, en una web de venta de obras de arte, reemplazar una imagen de ejemplo con la una pintura de un artista por la fotografía del propio artista suposo un incremento del 95% de clics (Do human photos on a landing page increase sales and conversions?).
Añade opiniones
Añadir credenciales del tipo opinión de usuarios y testimonios incrementa el ratio de conversión en más de un 30%.
WikiJobs logró un incremento en ventas del 34% por el mero hecho de añadir 3 opiniones de usuarios en su home (How WikiJob increased sales by 34% by A/B testing customer testimonials). Una muestra más de que el social proof es importante para incrementar las conversiones.

Posts relacionados

Qué es realmente una landing page

Barbara Posila — Thu, 20 Oct 2011 08:15:19 +0000

Mientras escribía el último post sobre cómo reducir el ratio de rebote de las landing pages, me di cuenta que hay pocos materiales sobre qué es una landing, qué la hace única, qué tipos de páginas de aterrizaje existen. Con este post quiero que lo tengamos más claro y más presente a la hora de optimizar las landing pages.

Tipos de landing page

Existen dos tipos de páginas de aterrizaje:

Página dentro del site principal: es una página que forma parte de la web principal. Tiene la misma navegación y el mismo diseño que las demás páginas. Puede ser una de las páginas dentro de la estructura de la web o la home misma. Un ejemplo para las campañas de Adwords de una web de calzado: para palabra clave “zapatos” el anuncio redirige a la home, para “zapatos de mujer” redirige a la sección del calzado para mujeres, para “zapatillas deportivas” redirige a la sección de esta categoría, para “zapatillas Nike” redirige a una landing con zapatos de esta marca y por último, para “zapatillas Nike Free Run 2″ redirige a una página con detalles sobre este producto en concreto.
Microsite: la langing page puede formar parte de un microsite diseñado para un público específico o con un propósito específico. Los microsites suelen tener una call-to-action única, por ejemplo para hacer una compra o para solicitar información. Contienen varias páginas con información adicional para ayudar al usuario a tomar la decisión y realizar la acción deseada. Los microsites pueden estar bajo de la marca de la empresa, o tener una marca diferente (en este caso se habla de una landing Stand-alone). Los microsites son una manera perfecta para presentar un producto o servicio de manera exhaustiva o para lanzar una campaña de marketing. Un ejemplo de la última sería www.mevoydegira.com, una web de El Corte Inglés que se lanzó para un sorteo de viajes.

Cuatro preguntas críticas

Para crear una buena landing page tenemos que hacernos por lo menos estas cuatro preguntas que os planteo más abajo.

¿Cuál es el público objetivo de esta landing page? ¿Es para un comprador potencial, un cliente, un partner de nuestro negocio, un competidor, un empleador, un inversor?
¿Cuál es la acción que queremos que el usuario realice? No siempre tiene que ser una macro conversión. Las micro conversiones son también muy importantes y acercan el usuario a la macro conversión. Lo importante es que estas acciones se pueda medir y que tengan un valor concreto.
¿Nuestro negocio se colapsará si borramos este contenido de la web? Esta pregunta está vinculada con el enfoque de una landing. Hay que eliminar cualquier ruido, es decir contenido innecesario, que impida al usuario realizar la acción. Less is more! Esto quiere decir que menos contenido, diseño más limpio y con más espacios, conseguimos más importancia a los copy, botones y enlaces que contiene una página. No es lo mismo si tenemos 3 botones y 10 enlaces, que 1 botón y 2 enlaces.
¿El contenido de la landing está creando un vínculo con el usuario? ¿Estámos creando más confianza? Una métrica que nos puede decirlo es el tiempo de visita, sobre todo en las páginas con mayor importancia para el negocio. Pero no sólo. Las interacciones como por ejemplo, las descargas, una solicitud de información, un envío del formulario de contacto o la inscripción a una demo de programa o servicio, nos puede dar pistas de si los usuarios se sienten más vinculados con nuestra empresa.

Valor de una landing page

El valor de una landing page se puede medir utilizando el valor de la acción que está incluida en ella. Si es una landing para solicitar información, entonces el valor de esta landing sería cuántos usuarios realizan esta acción y cuántos acaban comprando el producto. Es una visión bastante simplificada.

Sin embargo, si queremos profundizar la idea del valor de una landing, os propongo contemplar el valor del tiempo de vida del usuario. Es un valor monetario que obtendrá nuestra empresa durante el tiempo de la relación con el cliente empezando por la interacción con la landing y durante todas las interacciones futuras. En algunos casos es muy fácil para calcular. Cuando una conversión es una compra de un producto muy durable y hay poca probabilidad que el usuario vuelva a comprarlo en nuestra empresa el valor del tiempo de vida del usuario o de una landing en concreto es nuestra comisión sobre este producto.

Sin embargo, en mayoría de los casos, el cálculo no es tan simple. Hay que tener en cuenta variables como por ejemplo:

Longitud de la relación que estamos creando con el usuario. ¿Cuánto va a durar en promedio? ¿Cuántas transacciones pueden realizarse durante este tiempo?
Ratio de compras repetidas. ¿Cuál es el ratio de los usuario que vuelven a comprar en nuestra empresa? ¿Cuántos de los clientes nuevos se convertirán en clientes recurrentes?
Valor de compra repetidas. ¿Cuál es el valor promedio de las compras repetidas? ¿Qué productos se venden en cross-sell o up-sell?
Economía de escala. ¿Podemos negociar un precio más bajo con los proveedores si hacemos pedidos más grandes?

Antes de crear una landing…

Os pongo unas pautas que pueden resultar bastante útiles a la hora de crear y optimizar una landing page:

Pensar qué tipo de landing page es la más adecuada a su propósito
Crear contenido acorde con los intereses del público objetivo
Tener el objetivo de la landing muy claro. Definir la acción, el método de medirla y su valor
Reducir el ruido, el contenido que distrae al usuario
Eliminar o minimalizar el contenido que no está creando un vínculo con el usuario
Calcular el valor del tiempo de vida del usuario. Para comparar las landings y para poder evaluar la eficiencia de cada una.

Al final os quería pedir un favor. ¿Tenéis alguna landing page preferida? ¿Alguna que para vosotros está hecha muy bien y cumple con su objetivo? Nos gustaría conocerlas, analizarlas y discutirlas con vosotros en los futuros artículos. ¡Gracias de antemano!

Posts relacionados

¿Cómo incrementar el CTR de los anuncios de tu web?

Daniel Rodríguez — Thu, 13 Oct 2011 07:10:57 +0000

¿Tienes publicidad en tu web y tu modelo de atribución es CPC? Aprende a incrementar el CTR.

Si queremos que la publicidad que se muestra en nuestra web se convierta en una fuente de ingresos importante más que anecdótica, no basta con poner AdSense o confiar en un par o tres de banners. Hace falta un trabajo metodológico, técnico, creativo y de sentido común para tener una publicidad que funcione.
Pero más importante aún, hace falta un cambio en la mentalidad de nosotros mismos como anunciantes que ayude a cambiar la percepción que nosotros mismos tenemos como usuarios alrededor de la publicidad. Hay que dejar de ver la publicidad como un elemento superfluo que genera ceguera allí donde se sitúa y hay que empezar a ver la publicidad como algo realmente útil y relevante para el usuario. Los primeros que nos tenemos que aplicar el cuento somos los anunciantes, y sólo así cambiará el estigma o percepción negativa asociada a la publicidad. ¿Cómo? Relevancia y apariencia.

Relevancia

¿Qué sentido tiene un banner de un portal de compra y venta de vehículos de ocasión al pie de un artículo de opinión política? Ninguno.
¿Qué sentido tiene un banner de una oferta de vuelos a Roma al pie de una notícia sobre una avería en una central hidroeléctrica? Ninguno.

Aunque sólo son un par de ejemplos reales, la web está llena de casos como los anteriores. No podemos esperar que alguien haga clic en estos anuncios. Dicho de otra manera, el clic en anuncios como estos será una causalidad. Y precisamente en Internet, nos estamos limitando mucho si dejamos que las cosas sucedan por simple casualidad. Internet es precisamente el medio donde tenemos un elevado control sobre todas las variables, lo que facilita mucho dar en el clavo con lo que anunciamos y donde lo anunciamos. Internet facilita ser relevantes y encajar las cosas en su mejor contexto.

En televisión nos muestran publicidad teniendo en cuenta franjas horarias y programación. Por ejemplo, anuncios de coche en las pausas publicitarias de la Fórmula 1. O por ejemplo, hornos de inducción en las pausas publicitarias de programas de cocina. Hay cierta relevancia, dejando a un lado las madrugadas y la teletienda. ¿Queremos que nuestra web sea la teletienda de Internet? No.

Más allá de franjas horarias y programación, en la web podemos ser relevantes con la publicidad que mostramos si tenemos en cuenta lo siguiente:

Contenidos concretos de la página donde mostramos el anuncio.
Categoría de contenidos a la que pertenece la página.
Contenidos previos que cierto usuario haya podido ver en nuestra web.
Sitios web que el usuario frecuenta, además de nuestra web.
Target que visita nuestra web: edad, sexo, poder adquisitivo.
Día de la semana de la visita.
Hora del día de la visita.
Periodo estacional de la visita (vacaciones Navidad, vacaciones de verano, etc.).

Con la combinación de estos segmentos podemos mostrar anuncios hechos a medida. Por ejemplo, un coche deportivo descapotable con un conductor joven conduciendo cerca de la playa y con un copy mencionando un descuento para menores de 30 años. O por ejemplo, un monovolumen siendo cargado por una joven pareja con 2 hijos, abrigados ya que es Navidad, y con un copy mencionando un descuento para parejas con al menos 1 hijo.

Estos dos casos pueden rozar la utopía, pero las posibilidades que ofrece un medio como Internet están para explotarlas. Internet, como ningún otro medio, permite avanzar en esta dirección. Hay que dejar de apostar por anuncios genéricos que no aportan nada, ni a anunciantes ni a usuarios.

Apariencia

Un ejemplo.

Las siguientes 2 capturas de pantalla corresponden a SERPs para dos portales inmobiliarios diferentes. El primero de ellos opta por mostrar un banner relacionado con el sector y lo intercala entre las entradas de la SERP.

El segundo opta por introducir anuncios de Google con apariencia similar a las propias entradas de la SERP.

¿Qué opción es mejor? Ambas opciones muestran anuncios relevantes, pero en términos de apariencia son claramente distintas. La primera tiene un formato tipo banner al que estamos acostumbrados y la segunda tiene una apariencia similar al contenido de la propia web, camaleonico ¿Intenta confundirnos? Ambas opciones son lícitas. Y si el destino al que nos lleva es relevante y útil para mi como usuario, ¿Qué más da la apariencia?

Lo que si tienen en común ambas opciones es que introducen la publicidad a lo largo del propio contenido. Es decir, prescinden de dedicar una zona a contenidos y otra zona a banners. Y esto es una muy buena práctica.
Además, tener las espaldas cubiertas en cuanto a relevancia justificará según que apariencias. Por ejemplo, podemos introducir la publicidad de forma explícita y persuasiva. A lo largo del contenido principal podemos introducir publicidad con textos cómo “Quizá te interesa…”, “Anuncios interesantes…” o directamente “Publicidad útil…”.

En resumen, si la publicidad es contextual no hay motivos por los que ubicarla en zonas de pantalla secundarias, lejos del foco, como si nos diese vergüenza. Es óptimo dar a la publicidad la visibilidad y apariencia que merece. Ya no estamos tratando con contenedores suprefluos y fuera de contexto, sino que tratamos con contenedores que muestran información útil al usuario y que enriquecen la propia web.

Por cierto, nada de pop-ups

¿Qué opinas?

Posts relacionados

Volando con atrapalo.com y su proceso de compra

Barbara Posila — Thu, 15 Sep 2011 14:38:04 +0000

El proceso de compra o más general, el embudo de conversión, es algo que obsesiona a los departamentos de marketing y ventas, y muy a menudos a los expertos de optimización. Una de las primeras candidatas para hacer experimento en la web, es la página de checkout. Es allí donde el usuario está más cerca de la compra. Sin embargo, antes de lanzarse a preparar wireframes y diseñar alternativas, mejor mirar algunas métricas. Cruzando datos de analítica web, con conocimiento sobre la usabilidad, la persuabilidad y unos testeos de usuarios, podemos llegar a unas conclusiones muy interesantes, que, una vez implementadas en la web, nos aportarán mejor rendimiento. El post sobre la metodología de optimización os podría ser de ayuda.

Este artículo sólo va a analizar aspectos de usabilidad y orientación al cumplimiento de tarea (call to action, indicaciones visuales, pasos del proceso de compra) en caso de la web www.atrapalo.com. Claro, no tenemos acceso a sus datos de analítica
¿Preparados? ¡Ahi vamos!

Aterrizaje en la home

Creo que pocos tienen problemas en identificar el próposito de la web de Atrápalo. “Ocio al mejor precio” es una pista suficiente para darnos cuenta a donde nos hemos metido. Vale, ¿y ahora qué? A mi me tienta “un millón de vuelos desde 29 euros”. (¿Acaso no son todos los que pueden ofrecerme porque no tienen ninguno más barato?)

Pero antes de seguir, nos paramos un momento para cotemplar la home www.atrapalo.com. Los señores / las señoras que trabajan en esta empresa seguro que hayan hecho mucho esfuerzo para conducir el usuario a la acción desde el primer momento.

Lo que vemos encima del pliegue (above the fold) es el buscador, ofertas destacadas y suscripción al newsletter. Si bajas por debajo del pliegue, tu vida va a cambiar para siempre. Te encontrarás en medio de enlaces, promociones y destacados, te volverás loco y huirás al polo norte para vivir con osos polares y nunca jamás navegar por la página de Atrápalo.

La home, encima del pliegue, es bastante enfocada para los usuarios que buscan vuelos (el buscador + algunos destacados). Se podría equilibrar el peso entre la venta de los vuelos y otras ofertas:

reorganizando o quitando el menú horizontal
utilizando el espacio vacío ocupado por la caja roja arriba de la página

Escala en SEO-polis

Nos encontramos en la página de la oferta. Y sinceramente, parece más una página orientada a SEO que a la compra.

¿Dónde está call to action?
¿Por qué la imagen ocupa toda la parte superior?
¿Las condiciones de la oferta son tan importantes como para ponerlas antes de los precios y destinos?

Acabamos haciendo scroll hasta el infinito y a los tigres no les gusta hacer scroll! Aghrr! Pero seguimos. Dirección Mallorca

Escape del tráfico

Llegamos a una página con calendario y buscador a la derecha. Y otra vez, si bajamos un poco en la misma página, encontraremos una multitud de ofertas relacionadas, por suerte, con el destino o con el lugar de salida del vuelo. ¿No es demasiado temprano para una venta cruzada? ¿No se irán los usuarios olvidando por qué han llegado a este paso? Nosotros seguimos, ¡sobre todo porque hay vuelos por 6€!

Letra pequeña

Ya que se trata de un vuelo a Mallorca, nos preguntan si somos residentes o no. No creo que para esto haga falta abrir una página nueva. Quizá una ventana tipo pop-up sería suficiente o un radio button. Pero por el camino se ha perdido la llamada a acción. El botón “continuar” queda por debajo de un texto bastante amplio y sin ninguna indicación visual para clicarlo. Curiosamente, en el siguiente paso, lo que antes era 12€ de ida y vuelta, se convierte en 28,98€. Y ni el desglose de precio te ayudará a entender por qué. Además, en ningún momento podemos ver en qué paso estamos y si nos queda mucho para ~~llegar a Mallorca~~ finalizar la compra.

Lo mejor para el final

En las dos últimas páginas, “Tus datos y pago”, se puede ver que el equipo de Atrapalo ha hecho los deberes. Para recuperar tus datos personales iniciando tu sesión del usuario registrado no te rediregen a otra página. Ponen textos explicativos por qué necesitan tu número de teléfono. Te facilitan rellenar los datos para el vuelo con un sólo clic en el enlace “Usar mis datos”.

Sin embargo, los campos obligatorios y opcionales están mal marcados. Algunos, sin asterisco, si se quedan vacíos te dan error y no puedes avanzar.

¿Vamos a llegar a tiempo?

¿Cuánto hemos tardado en hacer la reserva? Yo menos de 7 minutos. ¿Y vosotros? Os recomiendo esta infografía que se basa en un estudio de las webs de varias compañías aereas para ver cuanto los usuarios suelen tardar en reservar el vuelo. El factor del tiempo también hay que tener presente a la hora de diseñar el proceso de compra. Por eso es muy importante incluir funciones que ayuden al usuario, como rellenar los campos automaticamente, indicar errores o formatos en qué se debe introducir información.

Resumiendo… ¿Qué hace bien atrapalo.com y qué podría mejorar?

+ Ofrece un calendario de precios de vuelos – una manera más visual para escoger las fechas y comparar los precios

+ Ayuda rellenar los datos personales a los usuarios registrados

+ Explica por qué necesita tu número de teléfono

- La landing page de la oferta carece de una llamada a acción

- Lo mismo aplica a la página donde se escoge la opción de residentes y no residentes

- El precio final de vuelo difiere del que se muestra al principio del proceso y no se explica por qué

- Los campos opcionales están mal marcados

- El proceso que he analizado conlleva 6 pasos. ¿No es excesivo?

Y al final os recomiendo otro recurso – tal vez os va a servir a analizar vuestros sites. Es una serie de reglas de usabilidad y pesuabilidad preparadas por Userfocus. Incluso podéis descargar un fichero excel con todas estas reglas y poner nota a cada item que se irán sumando para dar una nota general del sitio. Pero primero, adaptadlo a vuestro caso eliminando reglas que no aplican. ¡Espero vuestros comentarios sobre este fichero y el artículo por supuesto!

Posts relacionados

La importancia del diseño centrado en el usuario

Barbara Posila — Tue, 16 Aug 2011 08:39:23 +0000

Antes de escribir este artículo me puse a buscar información sobre el proceso de creación de una página web. Encontré un montón de informaciones, diagramas, esquemas y descripciones de cada fase. Sin embargo, lo que más me chocó, y de hecho de esto tratará mi post, es que la mayoría de estas fuentes no hablaban del user-centered design. Eso quiere decir que el usuario final no participaba en ninguna fase del proceso. En algunos casos sí que aparecían sugerencias para hacer test antes de lanzar la web, pero eran excepciones.

Desvelando el verdadero proceso del diseño web

Lo que suele pasar en caso de los proyectos de la creación de las páginas web es un escenario parecido a lo que presentó The Oatmeal en su gráfica How a web design goes straight to hell.

Al principio reinan el entusiasmo y la excitación.
La antigua web está condenada a pena de muerte por ser la encarnación de todo el mal del mundo.
El diseñador recibe el briefing del cliente.
Presenta su propuesta.
El cliente pide que cambie algunas “cositas” (hasta que el diseño final ya no se parece nada al que presentó el diseñador).
Todo el proyecto acaba desesperando a ambas partes.
Al fin y al cabo, la única cosa que el diseñador y el cliente tienen en común es lanzar la web YA.

He encontrado otro gráfico y cualquiera que alguna vez haya participado en un proyecto de este tipo puede confirmar que en realidad los proyectos se hacen un poco así. Existen dos flujos paralelos – el teórico y el real. Aunque no es una representación de un proyecto de diseño web, se puede encontrar referencias al mismo muy fácilmente. Y fijaros, al final es verdad lo de quejarse tomando copas y los bocetos en una servilleta

El producto final (una web) es a veces el resultado de lo mejor que se ocurre al diseñador. Si tienes suerte, el diseñador se ha basado en tu briefing, la información sobre la compañía, sus clientes y el entorno. Puede ser que se haya mirado las webs de la competencia, que al final se han diseñado también intentando adivinar el mejor diseño para este caso.

Todo esto es para reírse un poco de cómo se realizan los proyectos de desarrollo web, pero el hecho es que las empresas al final reciben una página web que no rinde. Una web que tenía que aumentar tus conversiones y ingresos, pero no lo hace. ¿Es lo que pasó en el caso de tu web también? ¿Por qué? Puede ser por los factores relacionados con la gestión de proyectos, falta de comunicación o directamente mala comunicación. Pero para mi la respuesta es clarísima – falta un actor: el usuario que va a navegar por este site. ¡Piensa en tus usuarios antes de diseñar tu web y antes de lanzarla!

El diseño centrado en el usuario salva el mundo

Seguro que ya te suena este término. Puede referirse a una filosofía y a un proceso. En el centro de la atención está el usuario, en vez del producto / la web. El proceso se centra en factores cognitivos (como la percepción, memoria, aprendizaje, etc.) que entran en juego cuando interactuamos con objetos.

Fíjate en este diagrama del proceso del diseño web en el cual el usuario está presente en cada etapa. Hay un actor adicional, un especialista de usabilidad, que se encarga de incluir la opinión de los usuarios durante el proceso de la creación de una web. No digo que tienes que contratarlo ahora mismo. Quizás alguien de tu equipo puede asumir algunas de sus responsabilidades. Lo importante es involucrar a los usuarios desde el principio.

Te propongo que empieces con dos herramientas para testear wireframes: Navflow y FiveSecondTest. Te ayudarán a detectar problemas del diseño antes de lanzar la web. Y todo el mundo vivirá feliz para siempre.

¿Dónde está el usuario cuando se lo necesita?

Decir que hay que hacer pruebas con los usuarios ya no es nada nuevo. Todos lo saben, pero pocos lo hacen Por lo que me gustaría una y otra vez recordar porque estos test valen la pena.

Las investigaciones acerca de la usabilidad web se centran en 3 niveles:

Comportamiento general del usuario a través de la mayoría de los sitios
Descubrimientos especializados sobre géneros específicos de sitios
Descubrimientos detallados sobre un sitio específico y sus clientes

Quiero que te quedes con una conclusión muy clara: el diseño centrado en el usuario disminuye los costes, aumenta la satisfacción del usuario y el rendimiento del sitio web. Por mucho que leas y apliques las buenas prácticas de los primeros 2 niveles, no podrás identificar los problemas del último nivel sin la participación de los usuarios.

Posts relacionados

3 comportamientos típicos del usuario en la web y cómo testearlos

Barbara Posila — Thu, 28 Jul 2011 14:30:35 +0000

En mi último artículo hablé de las webs de tus competidores. Si has hecho tus deberes, ya conoces el entorno donde se encuentra tu web y qué compañía tiene. Ahora toca conocer mejor tu site y a tus usuarios. ¿Te aparece una bombilla que dice “Usabilidad”? ¡Eso es! La optimización web y la usabilidad son como un matrimonio – no puede existir uno sin otro

Entonces, ¿cómo se comportan los usuarios? ¿Son totalmente imprevisibles? ¿O hay algunos matices que se pueden distinguir? La famosa cantante islandesa Björk en su Human Behaviour sostiene que

“there is no map
to human behaviour (…)
they’re terribly moody
then all of a sudden turn happy
but, oh, to get involved in the exchange
of human emotions is ever so satisfying”

¿Es así de verdad? El experto en la usabilidad web, Steve Krug, sí que nos explica algunos principios del comportamiento de usuarios en su libro No me hagas pensar. ¿Son ciertos? No queda nada más que familiarizarte con ellos y comprobar si reflejan la realidad. Y por supuesto, leer el libro de Steve Krug que es una lectura obligatoria para todos interesados en la usabilidad web.

Ojear, Satisfacer, Arreglárselas

Existe una gran diferencia entre cómo pensamos que se usa las páginas web y cómo los usuarios lo hacen realmente. Para nivelar esta disonancia hay que asimilar 3 hechos.

Los usuarios no leen. Hojean.

Esto seguro que ya te suena. Los usuarios (=nosotros) son vagos y no les gusta leer. Optimizan su tiempo en una web escaneándola y buscando frases o palabras que corresponden con el objetivo de su visita en el site (o que les interesan). Por que tienen prisa, por que saben que no tienen que leerlo todo para encontrar lo relevante. Además, hojeamos también en el mundo real, leyendo libros, revistas o diarios, y estámos acostumbrados a hacerlo.

Los usuarios suelen enfocarse en palabras o frases que corresponden con la tarea que han venido a realizar en tu sitio web. Si es para comprar entradas al cine, van a buscar y centrarse en palabras como “comprar”, “venta de entradas”, “seleccionar pelicula”. Es poco probable que lean tu blog o que comenten tus videos. Steve Krug dice además que hay algunas palabras que especialmente atraen nuestra atención: nuestro nombre, “gratis”, “rebajas” y “sexo”. Me queda una duda sin funcionan igual para hombres y mujeres
Para profundizar más en el tema de cómo los usuarios leen las webs, os recomiendo algunos estudios de eyetracking realizados por Jakob Nielsen que descubren esquemas muy interesantes.

Las elecciones no son óptimas. Son suficientes.

Navegando por una web, los usuarios no evaluan todas las opciones posibles. Hacen clic escogiendo la primera opción que les parece razonable y relevante, y que les puede acercar al finalización de la tarea. Se guían más por impulsos. Otra vez, puede ser que lo hacen por que no tienen tiempo (o por impaciencia). Si hacen un error, no pasa nada. Siempre pueden volver atrás. No hay ninguna penalización. Además, evaluación de todas las opciones posibles puede resultar poco gratificante, sobre todo en las webs mal diseñadas. ¿No es más divertido ir adivinando?
Por supuesto, no es una regla fija. Todo depende del estado de ánimo del usuario, de cuánto tiempo dispone y de nivel de confianza que transmite una página web.

No averiguan cómo las cosas funcionan. Se las arreglan.

Este principio aplica no sólo al entorno web. Un ejemplo clásico son los electrodomésticos. ¿Quién lee las instrucciones? La gente suele apoyarse en los modelos mentales que ya han elaborado antes (usando otro electrodoméstico parecido), o simplemente basándose en la lógica. Aunque algunos usuarios crean así habitos totalmente equivocados, o por lo menos que no corresponden con las intenciones de los diseñadores.

Datos, datos, y más datos

Aquí, en Webanalytics somos un poco frikis con los datos. Pues te pongo algunos para contextualizar lo que acabo de describir hablando de los principios de Steve Krug.
Primero, miraremos los resultados del estudio de Econsultancy realizado sobre una muestra de 500 profesionales que trabajan para compañías e-commerce o e-business en los Estados Unidos. La conclusión más impactante de esta investigación es el hecho que las empresas americanas pierden alrededor de 23% de sus ingresos anuales por ofrecer servicios de poca calidad a los clientes online. ¿Cuánto sería en caso de las empresas españolas?
El resto de los resultados del estudio tampoco es optimista. He incluido algunos en la tabla abajo.

¿Dan miedo no? Jakob Nielsen y Hoa Loranger en Usabilidad. Prioridad en el diseño Web nos asustan aún más. Algunos datos de sus estudios están más abajo (excepto el último).

Tanto la velocidad de tu web como la relevancia del contenido y tu USP (unique selling proposition) entran en el juego. Pero, tranquilo, hay mucho que puedes hacer. Y ahora mismo te doy algunas pistas.

¡Atrapa 3 usuarios (si son promedios mejor) y testéalos!

También 3 usuarios no-promedios te pueden ser muy útiles. ¿Por qué tres? Porque no te hace falta más. Por lo menos según el libro de Steve Krug. El otro gurú de usabilidad, Nielsen, recomienda testear con 5 usuarios. Depende de tus recursos y posibilidades. Ten en cuenta que aquí sólo se trata de un testeo de usabilidad con una tarea fijada por un moderador y el participante debe llevarla a cabo. El test puede realizarse en laboratorio o a través de Loop11 o Userlytics. No pretendo sugerir que 3 usuarios son suficientes para pruebas con las herramientas como CrazyEgg o ClickTale.
Dicho esto, te propongo que sigas este plan de acción:

Haz pruebas presenciales con 3 usuarios. Te darás cuenta de qué funciona y qué no funciona en tu web. Puedes testear también los sitios de tu competencia para comprobar si realmente son buenas las funcionalidades que querías copiar
Habilita los informes de velocidad del sitio. Tendrás control sobre el tiempo de carga de tu web. Si utilizas Google Analytics, echa un vistazo al artículo de Oriol Farré en Trucos Google Analytics. O también, puedes descargarte un complemento de Firefox, YSlow.
Juega con las herramientas de usabilidad y optimización para conocer mejor a tus usuarios y saber cómo se comportan y por qué. Te recomiendo un excelente post de Ara Perez sobre 10+1 Super Herramientas de Usabilidad y Optimización Web.

Y por fin, ¿a quién vamos a creer? ¿A una cantante o a un gurú de usabilidad? No sé tú, pero yo escucharé a Björk mientras aplico los consejos de Krug.

Posts relacionados

12 Trucos para el diseño de formularios web

Daniel Rodríguez — Wed, 30 Mar 2011 08:00:28 +0000

El diseño de formularios es crucial en toda página web. Prácticamente cualquier conversión está ligada a la compleción de un formulario, y por ello se convierten en uno de los factores más determinantes si queremos lograr tasas de compleción elevadas.
Si el usuario dispone del tiempo, de la información necesaria y el precio de lo que vendemos o los valores de lo que ofrecemos satisfacen; no dejemos de lado el diseño del formulario puesto que esto sólo conducirá a la decepción. Contrariamente, si el usuario no tiene tiempo, dispone de poca información o el precio de lo que ofrecemos es poco convincente; un cuidado diseño de formulario podria incluso cambiar la percepción del tiempo, la información y el precio, motivando al usuario a convertirse en cliente. Esos misterios de la experiencia de usuario, que nos hacen ser irracionales en un momento dado.

Hay que sacar provecho. Aquí algunos trucos…

Trucos para diseñar formularios web

Alinear los campos de texto a la izquierda y las etiquetas arriba y a la izquierda.
Según ciertos estudios de usabilidad se ha notado un beneficio al uso de formularios situando las etiquetas inmediatamente encima de las cajas de texto y alineadas a la izquierda.
El tamaño de la fuente y cajas de texto debe ser generosos.
El tamaño de las tipografías para las etiquetas de cada campo debe ser prominente, sobretodo el alto de las cajas de texto. No tener miedo en esto, puesto que las cajas son el elemento objetivo de todo formulario, deben verse suficiente y ser “visualmente espaciosas”.
Fijar un repertorio finito de anchuras estándar para las cajas de texto a rellenar.
Es interesante definir un mínimo de, por ejemplo, 3 anchuras de caja de texto base, y utilizar estas según sea el campo a rellenar.
Utiliza radio button o desplegables adecuadamente.
Si cabe completar cierto campo en el que se ofrece más de una opción predefinida, utilizar radio button cuando se trate de menos de 3 opciones (por ejemplo “Sexo”) y un desplegable cuando se trate de más de 3 opciones.
Utilizar una llamada a la acción prominente y que cumpla las buenas prácticas del diseño de botones para la web.
También, si situamos etiquetas y campos a rellenar alineados a la izquierda, también situar el botón alineado a la izquierda y dentro del flujo de escaneo del conjunto de elementos del formulario. También es oportuno añadir un enlace “<< Paso anterior” sin que este tenga apariencia de botón.
Incluir menú de proceso. Resaltando la etapa actual y siendo los textos enlazables.
En formularios con más de una página conviene añadir indicadores sobre el proceso que notifiquen el paso o página en la que nos encontramos. Estos indicadores de proceso también deberían ser enlaces que permitan saltar a pasos anteriores.
Utilizar sistema de autocompletado para ciertos campos.
La idea aquí es que mientras el usuario escribe se presenten de manera dinámica un listado de opciones acordes con el texto introducido. Esto resulta práctico en campos como “ciudad”, “país”, “estudios”, “oficio”, etc. Esta es una idea alternativa al desplegable que agilizará la introducción de datos.
El sistema deberá formatear campos de tipo fecha, no el usuario.
Por ejemplo “Fecha de nacimiento”, deberá ser formateado por el propio sistema a la sintaxis deseada (dd/mm/aaaa) y nunca esta labor debería recaer en el usuario. Dejar esta labor en manos del usuario es engorroso y fomentará errores. La solución óptima para este tipo de campos pasa por utilizar 3 desplegables para: día, mes y año.
Utilizar un sistema de validación de campos dinámico.
La propuesta de validación de corrección de campos debe ser dinámica, mostrándose está conexa a la caja de texto y validando la correcteza o no de cada campo a medida que estos sean rellenados por el usuario. La información se deberá mostrar de forma clara y descriptiva haciendo uso de texto, colores e iconografía.
Campos de difícil interpretación deberán mostrar ayuda auxiliar.
La ayuda auxiliar para ciertos campos se hace visible con iconografía situada a la derecha del campo, y mostrando caja flotante cuando se sitúa el cursor encima. Utilizar colores acorde con el carácter informativo del elemento.
Incluir información de soporte a lo largo del formulario.
Por ejemplo, en una columna latera paralela al formulario se puede incluir información contextual sobre el propósito de cada uno de los bloques en los que está dividido el formulario: datos personales, datos de pago, etc. Dar a este texto auxiliar un tono informativo, de soporte de confianza y de persuasión.
Sólo mostrar “(opcional)” o “(obligatorio)” cuando estos campos son una minoría.
Como norma, cuando más de la mitad de los campos son obligatorios, deberán identificarse como “(opcional)” aquellos que sean opcionales y prescindir de cualquier recurso para identificar aquellos obligatorios. Viceversa cuando la mayoría sean opcionales.

Posts relacionados

2 sencillas formas de inspirarse para diseñar

Eduard Barredo — Fri, 01 Oct 2010 10:56:36 +0000

¿Quién debe diseñar una página web? Esa es la pregunta de la que nació un artículo que publicamos en febrero del 2009 y al que le siguió un bonito y vivo debate sobre las figuras y roles que aparecen en esta fase.

¿Debe ser sólo tarea del diseñador? ¿Mejor quizá un equipo en la que los departamentos clave están representados? ¿Decide el jefe y fin de la cuestión?

Independientemente de esta esencial reflexión, hoy os propongo un par de sencillos ejercicios para replantearse y cuestionar el diseño de una web.

“La norma de los 5 segundos”

Tenemos 5 segundos para captar la atención del usuario… Si no le gusta o interesa lo que ve, no dudará ni un momento en pulsar este botoncito:

Al diseñar una web o una interfície gráfica en general, lo primero que hay que hacer es ponerse en la piel del usuario. Pregúntate lo siguiente:

¿Consigues transmitir quién eres en menos de 5 segundos?
¿Eres de fiar y tu discurso es creible? ¿Generas seguridad?
¿Das información relevante y bien dirigida?
¿Es tu publicidad (si la tienes) buena o influye negativamente?
¿Realmente destaca aquello que quieres destacar?

Seguro que con estas preguntas ya tienes un bonito brainstorming con el que empezar… Pero presentarse en el despacho del jefe con tus ideas y reflexiones no suele funcionar si no aportamos algo más.

¿Qué genera alto impacto visual?

Por una bonita suma de dinero podríamos realizar un eye-tracking, pero si nuestro presupuesto es limitado podemos optar por algo Feng-Gui o AttentionWizard para conseguir algo como esto:

Lo que nos muestran estas herramientas son las zonas que supuestamente generan más atención visual y según parece mi colega Daniel Rordíguez se lleva la palma. No es de extrañar… y no es porque Dani sea un sex symbol (que también…) sino por que las personas al ver una cara se nos va la vista allí… Haz la prueba en tu web con y sin nadie. ¿Habrá alguna diferencia si modificamos la foto de Dani por la de Scarlett Johansson?

Lo que esta claro es que quizá esa foto está captando toda la atención y debemos evaluar si es eso lo que pretendemos. ¿Queremos potenciar la lectura? ¿Queremos ganar followers en twitter? Yo salgo más allá del pliegue!! Mmmmmm

Escucha al usuario

En TrucosOptimizacion siempre insistimos en esto… La fuente de datos más valiosa que existe es aquella que proviene de las propias opiniones de los usuarios. No hacen falta grandes inversiones para conseguirla, simplemente vayamos al departamento comercial o call center y preguntemos a nuestros colegas que se comenta al llamar. También podemos realizar encuestas o realizar sencillos tests de usabilidad como este:

Como Clue, existen otras herramientas que nos permiten testear aquello que comentábamos de los 5 segundos. Un sencillo ejercicio para comprender cual es la primera impresión que nuestra web despierta.

Segun parece la barra lateral y el primer artículo se visualizan bien pero por contra sólo 4 de las 17 respuestas han vinculado el blog con la analítica web… ¿Quizá rediseñar el logo?

Ya podemos ir al despacho del jefe con algo más sólido… y a los colegas de IT ni los he molestado!