Diseño de una página web Página de inicio Ejemplos, consejos y ejemplos

La web está completamente saturada de aplicaciones que lo ayudan a conectarse con una red social, hacer listas de la compra, administrar grandes proyectos, decidir quién hará el té y cualquier otra tarea loca que pueda imaginar.

Con toda esta competencia, ¿cómo puedes convencer a los visitantes de que tu aplicación es la 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 invertido mucho tiempo, dinero y esfuerzo en crear una aplicación web. Es una empresa de primera categoría que está seguro de que tendrá éxito como un incendio forestal. Solo hay un problema, tienes que convencer a la gente para que lo intente.

No importa qué tan buena sea su aplicación web, todavía tiene que tener tácticas de ventas sólidas que, en última instancia, convenzan a las personas para que hagan clic en "Registrarse". botón. Incluso si el servicio es completamente gratuito y ofrece un montón de funciones, realmente tienes que trabajar para ganar esas conversiones.

Nunca asumas que solo porque un usuario haya llegado a 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á. Las probabilidades son que siguieron algún enlace con solo una vaga noción de dónde terminarían y se encuentran en una etapa delicada en la que es probable que se muevan a otro sitio en cuestión de segundos si no los incorporas.

La página de inicio de su aplicación web es una de sus herramientas de marketing más valiosas. Resista la tentación de simplemente improvisar algo rápidamente y, en cambio, 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 por encima del pliegue.

Hay muchas cosas que me gustan de esta página. En primer lugar, es muy sencillo y centrado. No te abruma con reclamos vacíos sobre cómo el servicio cambiará tu vida, ni tampoco anda por los alrededores sobre lo que es el sitio. No hay nada peor que una página que no se define bien. Si no puedo decir lo que hace tu aplicación en cinco segundos, seguiré adelante.

Kroud realmente se encarga de relacionar un servicio complejo en un mensaje claro que también sirve como un llamado a la acción: "Cree una página interactiva de preguntas frecuentes en segundos". Esa línea es una de las primeras cosas que veo cuando carga la página y transmite inmediatamente lo que hace el sitio.

El botón grande

Otra cosa que podemos aprender de Kroud es que los botones grandes e intrépidos de registro son una buena cosa. Aquí está el botón Kroud en tamaño real.

Este botón es enorme y muy claro acerca de lo que sucede cuando lo presionas: "Iniciar un Kroud", con el mensaje secundario, "¡Es gratis!". Observe cómo este botón atrae 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 tus ojos se sienten inmediatamente atraídos hacia él.

Consejo: ¡Las capturas de pantalla son una necesidad!

La página principal de la aplicación web tiene dos objetivos principales: educar a la gente sobre su producto y convencerlo de que lo intente. Estos son los mismos objetivos que ve en marketing y publicidad de casi todas las empresas del planeta.

Imagina 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 es probable que permanezca constante: verías el auto. Los corbetas tienen un legado de buen diseño y saben que la mejor manera de mostrar su última proeza es mostrarte 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 automóvil deportivo no fuera un Corvette, sino algo que nadie había escuchado.

Esto funciona como una metáfora para la página de inicio de su aplicación web. Las aplicaciones web son una moneda de diez centavos por docena y nadie ha oído hablar de la tuya. A menos que se avergüence de sus pobres habilidades de diseño, la gente querrá ver exactamente cómo se verá el servicio antes de tomarse el tiempo para inscribirse.

La gente de Freckle lo sabe bien y eligió encabezar su página con una serie de cinco capturas de pantalla.

A pesar de que se cubren grandes porciones de algunos de estos, la imagen en su conjunto realmente le da una visión 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 en 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 copias. Aquí hay un ejemplo de la facturación de Ballpark.

Aunque los iconos son mejores que el texto, en el caso de que realmente tengas una interfaz sólida, 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 íconos genéricos simplemente presentan una representación abstracta de lo que los usuarios pueden esperar ver. Echa un vistazo a cómo Freckle discute sus características.

¿Vea 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 cada vez más últimamente y creo que es una buena idea que realmente mejora la idea de iconos 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 menor idea de cómo se ve la aplicación.

Incluso si estas páginas son bastante atractivas, como Wordfaire a continuación, las probabilidades de que lo intente son mucho menos simplemente porque no puedo ver una vista previa.

¿El viejo adagio? ¿Una imagen vale más que mil palabras? Realmente se demuestra verdad en esta arena.Simplemente no hay forma de que lea los siete párrafos del 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, antes de comprar, inténtelo. Incluso se aplica a los servicios gratuitos! Esto parece confuso pero en realidad es bastante simple. Incluso un servicio gratuito se come mi tiempo, un recurso que encuentro bastante valioso y que no cambiaré por nada. Registrarse para un servicio web gratuito todavía se siente como un compromiso; una 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 empujar 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.

Una vez más, 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 ejemplo se ve reforzado por una vista previa.

Peeve: Tours Largos

Algunas aplicaciones web lo llevarán a una excursión de diez minutos que explica su servicio con gran detalle. No me malinterpretes, la información es buena y si pago por un servicio, lo querré. Pero, ¿debería un? Producto tour? ¿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 analizar en más de 2.000 palabras explicando cómo será cuando finalmente alcances el punto en el que se te permita probarlo. Algunos sitios incluso construyen un modificado? Inteligente? Ejemplo vivo que te guía por el proceso. Esta es una excelente manera de permitir que los usuarios prueben su servicio mientras se aseguran de que capten el punto y vean lo que quieren.

Una vez más, no es necesariamente malo hablar sobre sus características, pero recuerde que es importante permitir a los usuarios simplemente saltar y ver lo que piensan.

Incluir un video

Otra idea para mostrar su aplicación web en acción es incluir un video corto en la página de inicio. Si una imagen vale más que mil palabras, ¡entonces un minuto a 15-30 cuadros por segundo no tiene precio! Un video cumple 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 inicia el video 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 se puede hacer ahora es juntar uno de estos videos como una pequeña caricatura divertida. A menudo, esta es una gran idea, pero el problema que tengo es que después de dos minutos de una pequeña animación aburrida, ¡aún 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. Concedido, finalmente llegan a casi Mostrándole una versión ilustrada de la aplicación, pero solo al final e incluso entonces, es un pequeño y abstracto vistazo.

Pensamientos finales: una receta para el éxito

Todos los consejos en este artículo están dirigidos a los dos objetivos principales de 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 redúzcalo 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á más conversiones al identificar claramente a su 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 haya terminado su mensaje, es hora de centrarse en presentar su producto a su audiencia. Tres formas excelentes de hacer esto son capturas de pantalla (varias, si se puede usar), cuentas de ejemplo en vivo y recorridos en video (del tipo que realmente muestra el producto). El objetivo de ella es reducir la incertidumbre que rodea a su producto. Mientras menos incertidumbre haya, menos usuarios dudarán en inscribirse.

Todo esto, por supuesto, supone que tienes un producto de calidad. Si su interfaz es deficiente, entonces ocúltela del público y, en cambio, apéguese a descripciones aburridas y extensas.