Diseño de una página web de aplicación: ejemplos, consejos y molestias
La web está completamente saturada de aplicaciones que lo ayudan a conectarse con una red social, hacer listas de compras, administrar grandes proyectos, decidir quién preparará el té y cualquier otra tarea loca que pueda imaginar.
Con toda esta competencia, ¿cómo puede convencer a los visitantes de que su aplicación es una aguja proverbial entre el heno? Hoy veremos algunos ejemplos reales para ver si podemos aprender qué estrategias imitar y cuáles evitar.
La página de inicio de su aplicación es extremadamente importante
Has gastado toneladas de tiempo, dinero y esfuerzo creando una aplicación web. Es una empresa de primer nivel que seguro que atrapará como un incendio forestal. Solo hay una trampa, tienes que convencer a la gente para que lo pruebe.
No importa cuán buena sea su aplicación web, aún debe tener tácticas de venta sólidas que finalmente convenzan a las personas de hacer clic en el botón "registrarse". Incluso si el servicio es completamente gratuito y ofrece un montón de características, realmente tienes que trabajar para ganar esas conversiones.
Nunca asumas que solo porque un usuario ha aterrizado en tu página de inicio está realmente interesado en lo que tienes para ofrecer y, por lo tanto, solo necesitas un pequeño empujón para ir más allá. Lo más probable es que siguieron algún vínculo con solo una vaga noción de dónde terminarían y están en una etapa delicada en la que es probable que se trasladen a otro sitio en cuestión de segundos si no los atrae.
La página de inicio de su aplicación web es una de sus herramientas de marketing más valiosas. Resista el impulso de improvisar algo rápidamente y, en su lugar, haga su mejor esfuerzo. Veamos algunos ejemplos para ver qué podemos aprender.
Consejo: Mantenga el diseño simple y el mensaje fuerte
Nuestro primer ejemplo proviene de un nuevo servicio llamado Kroud. Echemos un vistazo a la parte del sitio sobre el pliegue.
Hay muchas cosas que me gustan de esta página. En primer lugar, es muy simple y enfocado. No lo abruma con afirmaciones vacías sobre cómo el servicio cambiará su vida, ni se burla de lo que es el sitio. No hay nada peor que una página que no se define bien. Si no puedo decir qué hace tu aplicación en cinco segundos, seguiré adelante.
Kroud realmente logra la tarea de relacionar un servicio complejo en un mensaje claro que también sirve como un fuerte llamado a la acción: "Crear una página de preguntas frecuentes interactiva en segundos". Esa línea es una de las primeras cosas que veo cuando cargo la página e inmediatamente transmite exactamente lo que hace el sitio.
El gran botón
Otra cosa que podemos aprender de Kroud es que los botones de registro grandes y audaces son algo bueno. Aquí está el botón Kroud en tamaño real.
Este botón es enorme y muy claro sobre lo que sucede cuando lo presiona: "Iniciar un Kroud", con el mensaje secundario, "¡Es gratis!". Observe cómo este botón llama su atención no solo con el tamaño, sino también con el color. Es mucho más brillante que el otro contenido que atrae tus ojos de inmediato.
Consejo: ¡las capturas de pantalla son imprescindibles!
La página de inicio de su aplicación web tiene dos objetivos principales: educar a las personas sobre su producto y convencerlos de que lo prueben. Estos son los mismos objetivos que ve en el marketing y la publicidad de casi todas las empresas del planeta.
Imagine un anuncio de revista o un sitio web para un nuevo Corvette. ¿Cómo crees que se vería esa página? Hay un millón de diseños posibles, pero una cosa probablemente se mantendrá constante: verías el auto. Los Corvettes tienen un legado de buen diseño y saben que la mejor manera de mostrar su última hazaña es mostrarle una fotografía en todo su esplendor. ¿Quién podría estar convencido de comprar un automóvil deportivo sin siquiera verlo? Este sería aún más el caso si el auto deportivo no fuera un Corvette, sino algo de lo que nadie había oído hablar.
Esto funciona como una metáfora de la página de inicio de su aplicación web. Las aplicaciones web cuestan un centavo por docena y nadie ha oído hablar de las tuyas. A menos que esté avergonzado de sus pobres habilidades de diseño, las personas querrán ver exactamente cómo se verá el servicio antes de tomarse el tiempo para registrarse.
La gente de Freckle lo sabe bien y eligió encabezar su página con una serie de cinco capturas de pantalla.
Aunque grandes porciones de algunos de estos están cubiertos, la imagen en su conjunto realmente le da una idea decente de cómo se ve el servicio.
Características como capturas de pantalla
La tendencia actual en el diseño de la página de inicio de la aplicación web es mostrar las características de su página de inicio con pequeños íconos. Esta es una gran idea que realmente aumenta el valor estético de la página y ayuda a romper grandes bloques de copia. Aquí hay un ejemplo de Ballpark Invoicing.
Aunque los iconos son mejores que el texto, en el caso de que realmente tenga una interfaz sólida, en realidad creo que las capturas de pantalla pueden ser un elemento visual mucho más fuerte. Las capturas de pantalla comunican directamente su servicio, mientras que los iconos genéricos simplemente presentan una representación abstracta de lo que los usuarios pueden esperar ver. Mira cómo Freckle discute sus características.
¿Ves cómo la mensajería aquí se ve reforzada por una imagen de cómo se verá exactamente en la aplicación? Esta es una tendencia que veo más y más últimamente y creo que es una buena que realmente mejora la idea de ícono de la generación anterior de aplicaciones web.
Como otro ejemplo, TodayPulse muestra tres de sus características principales en una tira horizontal de capturas de pantalla:
Peeve: No hay capturas de pantalla
Puede pensar que las capturas de pantalla son bastante básicas y que nadie necesita este recordatorio, pero la verdad es que hay innumerables páginas de inicio de aplicaciones web que no le dan la más mínima idea de cómo se ve realmente la aplicación.
Incluso si estas páginas son bastante atractivas, como Wordfaire a continuación, las probabilidades de que lo intente son mucho menores simplemente porque no puedo ver una vista previa.
El viejo adagio "una imagen vale más que mil palabras" realmente es cierto en este campo. Simplemente no hay forma de que lea los siete párrafos de texto en la página de inicio de Wordfaire. Cambiaría al menos cinco de ellos por una captura de pantalla sin pensarlo dos veces.
Consejo: Permita que los usuarios jueguen con un ejemplo en vivo
El concepto de "probar antes de comprar" ha existido desde los albores del vendedor. Es un concepto simple que persistirá mientras haya productos. Los compromisos apestan, especialmente cuando hay incertidumbre involucrada. Al permitir que un usuario pruebe su aplicación web primero, se elimina la incertidumbre.
¡Es extremadamente importante tener en cuenta que el "probar antes de comprar" se aplica incluso a los servicios gratuitos! Esto parece confuso pero es realmente bastante simple. Incluso un servicio gratuito consume mi tiempo, un recurso que encuentro bastante valioso y que no cambiaré por nada. Registrarse en un servicio web gratuito todavía se siente como un compromiso; uno que no quiero hacer a menos que esté realmente seguro de que me gustará el producto.
El concepto es simple, cree una forma en que los usuarios puedan hurgar y patear los neumáticos de su aplicación sin ingresar un solo bit de información. Vemos esto en acción a continuación para Pen.io. Esta es otra página sin capturas de pantalla, pero se mejora un poco al incluir un enlace a un ejemplo para que pueda ver lo que obtiene del servicio.
Nuevamente, es genial que Pen.io incluya esto, pero la ejecución es más fuerte en Kroud, donde el enlace a la página de examen se ve reforzado por una vista previa.
Peeve: viajes largos
Algunas aplicaciones web lo llevarán a una excursión de diez minutos que explica su servicio con gran detalle. No me malinterpreten, la información es buena y si estoy pagando por un servicio, lo voy a querer. Pero, ¿debería un "recorrido por el producto" realmente ser tan intensivo en trabajo?
Si hago clic en un enlace que dice "Hacer un recorrido", lo que realmente quiero hacer es ver la aplicación. Un ejemplo en vivo como el que acabamos de discutir en mucho más de 2, 000 palabras que explica cómo será cuando finalmente llegue al punto en el que se le permite probarlo. Algunos sitios incluso crean un ejemplo en vivo "inteligente" modificado que lo guía a través del proceso. Esta es una excelente manera de permitir que los usuarios prueben su servicio al tiempo que se asegura de que entiendan y vean lo que usted quiere.
Una vez más, no es necesariamente malo criticar sus características, pero recuerde que es importante permitir que los usuarios simplemente intervengan y vean lo que piensan.
Incluir un video
Otra idea para mostrar su aplicación web en acción es incluir un video corto directamente en la página de inicio. Si una imagen vale más que mil palabras, ¡un minuto a 15-30 cuadros por segundo no tiene precio! Un video logra el mismo objetivo que el ejemplo y las capturas de pantalla, solo que es más dinámico que las capturas de pantalla y una experiencia más estructurada que un campo de prueba de forma libre.
Aviary hace un buen trabajo al mostrar un lapso de tiempo de su editor de imágenes creando una compleja manipulación de fotos.
Una de mis implementaciones favoritas actuales de un video de la página de inicio de una aplicación web es Greplin. Aquí aparece un video cuando carga la página, pero si no lo inicia después de unos segundos, se convierte en una presentación de diapositivas de capturas de pantalla.
Peeve: dibujos animados que nunca muestran la aplicación
Por alguna razón, lo mejor que puedes hacer ahora es juntar uno de estos videos como una pequeña caricatura divertida. Esta es a menudo una gran idea, pero el problema que tengo es que después de dos minutos de una pequeña animación aburrida, ¡todavía tengo poca o ninguna idea de cómo es realmente la aplicación!
Los dos videos a continuación de Minus y Summify son buenos ejemplos de esto. Por supuesto, finalmente llegan a mostrarte casi una versión ilustrada de la aplicación, pero solo al final e incluso entonces, es un pequeño vistazo abstracto.
Pensamientos finales: una receta para el éxito
Todos los consejos en este artículo están dirigidos a los dos objetivos principales para la página de inicio de su aplicación web, que ya hemos discutido: educación y atracción. Primero, elimine todo el desorden de su diseño y reduzca a los elementos más importantes para que el visitante pueda concentrarse en la información vital sin distracciones.
En su mensaje, haga una declaración audaz sobre lo que hace la aplicación y para quién es. No discutimos mucho este último punto hoy, pero hay un fuerte argumento que sugiere que ganarás más conversiones al identificar claramente a tu público objetivo. Ejemplo: "MyCoolWebApp ayuda a los diseñadores y desarrolladores a organizar la información del cliente y del proyecto" es mejor que "MyCoolWebApp organiza la información del cliente y del proyecto". También asegúrese de señalar cualquier característica importante y por qué los visitantes deben usar la aplicación.
Una vez que tenga sus mensajes ajustados, es hora de centrarse en presentar su producto a su audiencia. Tres excelentes maneras de hacer esto son las capturas de pantalla (varias si puedes balancearlo), cuentas de ejemplo en vivo y recorridos en video (el tipo que realmente muestra el producto). El objetivo es reducir la incertidumbre que rodea su producto. Cuanta menos incertidumbre haya, menos usuarios dudarán en registrarse.
Todo esto, por supuesto, supone que tiene un producto de calidad. Si su interfaz es poco convincente, ¡por todos los medios, escóndela del público y adhiérase a descripciones largas y aburridas!
