Las páginas de visitas son uno de los componentes más importantes para los sitios web que publicitan aplicaciones y / o servicios. La página del recorrido es a menudo donde los usuarios interesados toman la decisión firme de inscribirse o pasar a otra cosa.
No hace falta decir que, como diseñador, hay mucha presión para hacer esto bien. Sin embargo, no teman, muchos diseñadores talentosos lo han precedido y podemos aprender mucho mirando sus ejemplos. Nos sumergiremos en páginas de tour de gigantes como Mozilla, 37Signals y Mint.com y veremos qué trucos comunes usan todos ellos para ganar conversiones.
Es más difícil de lo que parece
Lo has hecho, has arrastrado esa página de inicio cada vez más difícil de hacer clic fuera del usuario. Están interesados en su sitio y quieren aprender más. Crees que estás en claro, pero te espera un nuevo desafío. Ahora tiene una oportunidad para convencerlos de que puede cumplir con las promesas de la página de inicio, que su aplicación hace lo que usted dijo que haría y mucho más de una manera que es mejor que lo que hacen los demás.
Estás diseñando una página de tour. Es una tarea engañosamente simple. Lo harás bien si no lo ejecutas a medias, sino que dedicas un tiempo sólido a que sea la mejor página que puedas. Aquí es donde los usuarios potenciales realmente comenzarán a emitir juicios sobre su servicio y no querrá arruinar esa primera impresión tan importante. Echemos un vistazo a algunos ejemplos en vivo de diseñadores que han ido antes que usted para ver qué podemos aprender.
Mint.com
La menta es uno de mis servicios favoritos en la web. No solo es inmensamente útil para rastrear cada centavo que gasta, sino que también resulta súper atractivo desde la perspectiva del diseño. Dado que sus diseñadores son tan talentosos, pensé que probablemente podrían enseñarnos una o dos cosas sobre el tema de hoy. Aquí hay un complemento de la página del tour:
Organización de contenidos
Lo primero que noté de esta página es que tiene un tonelada de contenido. No querrá sobrecargar a sus visitantes con información si tiene un servicio bastante sencillo, pero algo financiero como Mint genera muchas señales de alerta con las personas que son legítimamente prudentes sobre el acceso de un sitio web a su cuenta bancaria. A la luz de esto, Mint es muy transparente en todos los aspectos del servicio antes de que te registres.
Este es un concepto importante. Si su servicio tiene alguna razón que podría hacer que los visitantes hagan una pausa al pensar en registrarse, la página del tour es su oportunidad de abordar esos problemas en detalle al ser abierto, honesto y tranquilizador acerca de su producto.
Otra gran cosa que Mint hace bien es la organización del contenido en fragmentos pequeños, digeribles y perfectamente organizados. En lugar de tirar todo en una página de una milla, han implementado una especie de conmutador de contenido AJAX que actualiza la columna correcta al elegir un tema.
Presentación de contenido fuerte
Otra cosa que la menta realmente clava es la presentación de su contenido. Tome nota de esto porque muchas personas se equivocan: titulares breves, sencillos y directos, junto con capturas de pantalla claras y atractivas y un breve pero descriptivo texto de apoyo. Esto es lo que se ve en acción:
Observe la copia aquí, es breve y conciso, mientras le dice lo que necesita saber. También puedes ver cómo la captura de pantalla se centra en la parte importante, este truco de lupa es muy común en el diseño web en este momento.
Mint tiene otro truco bajo la manga también. Cuando las capturas de pantalla pueden no ser suficientes, lanzan algunas señales visuales adicionales. En la captura de pantalla a continuación, el titular de un presupuesto se ve reforzado por la lectura instantánea de una alcancía con un cinturón alrededor para indicar los presupuestos:
La captura de pantalla podría haber hecho esto por sí misma, pero los gráficos son un poco vagos y, por lo tanto, no fueron una lectura instantánea, el cerdo puede ser cursi y predecible, pero ayuda a llevar este diseño justo donde debe estar.
Campamento base
Dejemos atrás a Mint y veamos otra página de tour bien diseñada. La gente de 37signals es conocida por su estilo de diseño simple y limpio que ofrece todo lo que necesitas y nada más. Aquí hay una foto de la página del tour para su aplicación Basecamp.
Diferente, pero el mismo
Observe dos aspectos importantes de esta página a la luz del ejemplo anterior. Primero, el estilo de diseño es muy diferente del de Mint. Sin embargo, las páginas son increíblemente similares. Observe los breves fragmentos de contenido organizados por un selector de contenido a la izquierda, capturas de pantalla, titulares fuertes, señales visuales adicionales para ayudar a las capturas de pantalla, incluso el estilo de diseño de ida y vuelta es casi exactamente lo que vimos en Mint.
Esto es algo muy importante para aprender como diseñador: Los patrones de diseño existen independientemente del estilo de diseño.. La menta tiene un aspecto muy brillante y acabado con mucho brillo y reflexión, mientras que Basecamp es muy plano en su simplicidad de Google. Sin embargo, esto no es más que el revestimiento de caramelo, bajo este marco crítico de un diseño sólido, que hace que el contenido sea más fácil de asimilar.
Cavar más profundo
Una vez que haya revisado la descripción general de las funciones de Basecamp, tendrá la oportunidad de verlas en acción haciendo clic en los pequeños enlaces de video repartidos por toda la página. Me gusta mucho un buen video de producto y creo que estos realmente ayudan a mantener su contenido breve y conciso, mientras que aún ofrecen la mirada profunda que algunos visitantes necesitan.
Tenga en cuenta que Basecamp se enorgullece de lo sencillo y sencillo que es su conjunto de características, por lo que si Basecamp no es demasiado básico para los videos de demostración del producto, tampoco lo es su sitio. Las aplicaciones de video de captura de pantalla son muy asequibles y fáciles de usar, por lo que no importa cuál sea su presupuesto, no es difícil reunir algunas visitas de video de aspecto profesional.
Mozilla replantea la página del tour
El formato básico que hemos visto en las dos últimas páginas del recorrido es bastante común.Puede ver tácticas casi idénticas que se utilizan en docenas de sitios de aplicaciones web. Revise las páginas de la visita de Checkout App y Campaign Monitor y encontrará el mismo conmutador de contenido alineado a la izquierda que se usa junto con las breves listas de características junto con capturas de pantalla e íconos.
Hay una razón por la que este formato es tan usado: funciona. Cada una de estas páginas puede mantener su propia identidad única al tiempo que comparte técnicas probadas con sus hermanos. Sin embargo, esto no significa necesariamente que las reglas de la página del tour estén escritas en piedra o que hayamos encontrado la mejor solución posible para todos los sitios.
Un ejemplo de una empresa que a menudo decide pensar fuera de la caja es Mozilla. Su talentoso equipo de diseño decidió abandonar el formato de página de la gira común y abrir su propio camino. El resultado es una visión general divertida, interactiva e increíblemente sencilla del navegador:
Aquí vemos una captura de pantalla del navegador con un montón de marcadores colocados por todos lados. Las instrucciones son simples y se pueden leer en un segundo: "Desplácese por los marcadores a continuación para obtener información sobre las características". Seguir estos consejos le da una mirada más cercana a las características importantes.
Me encanta lo directo que es este método, explica las características de la aplicación no a través de íconos genéricos abstractos y párrafos hinchados, sino con una captura de pantalla simple que señala todo lo que necesita saber.
Un desastre organizado
Este método de marcar una captura de pantalla lo convierte en un diseño bastante orgánico. En lugar de un flujo lógico y predecible, los marcadores están dispersos por todo el lugar. Hay un truco de diseño muy sutil que te ayuda a ver el orden en el caos, ¿puedes verlo?
Ese pequeño camino de puntos es uno de esos pequeños toques de diseño que realmente pueden unir una página. Sin ella, hay un montón de enlaces, con ella, hay una clara progresión a seguir. Por supuesto, no tiene que seguirlo perfectamente y apostaría a que pocos usuarios lo hacen, sin embargo, su mera presencia le da a la página un impulso de usabilidad leve pero importante a la vez que ofrece una apariencia de orden.
Mostrar el proceso
Nuestro último truco de diseño de la página de la gira que debes saber proviene de Big Cartel. Aquí hay una foto recortada de su página de la gira:
Hay algo súper simple pero increíblemente efectivo en la parte superior de esta página, un proceso de tres pasos. A veces, una página de recorrido debe ser más que un simple escaparate de características. Por ejemplo, cuando afirma que su servicio simplifica algo complicado, como configurar una tienda en línea, es fundamental que demuestre cómo funciona esto de alguna manera.
Tres es un número mágico, de modo que cuando sea posible, intente dividir los procesos en tres pasos simples y sencillos que cualquiera pueda comprender. Se trata de hacer que el usuario se sienta con más poder, necesitan ver esto y decir: “¡Puedo hacer esto!”, Especialmente si han buscado en otro lado y solo han encontrado soluciones desalentadoras y complicadas.
Conclusión
Los ejemplos de arriba tienen sus propias lecciones únicas para enseñarnos y juntos dibujan una imagen de algunas prácticas de diseño de páginas de tour muy comunes que puede implementar en sus próximos proyectos.
Al embarcarse en su aventura en la página del tour, recuerde que la web le brinda una libertad extraordinaria para experimentar y ver qué funciona mejor. Intente crear algunos diseños diferentes y luego ejecute algunas pruebas A / B para ver a qué usuarios responden mejor.
Si ha diseñado una página de visitas recientemente, deje un comentario con un enlace a continuación. ¿Qué técnicas utilizaste para asegurar el éxito? ¿Has aprendido algo al experimentar con diferentes diseños y diseños?