Mejores prácticas de diseño web SaaS: estándares y tendencias de diseño que vale la pena conocer

¿Cuáles son las mejores prácticas para el diseño web SaaS?

Esa es la pregunta que me propuse responder después de tropezarme con un sitio de SaaS, después de un sitio de SaaS, después de un sitio de SaaS... Se veían más o menos iguales:

Comprender las mejores prácticas puede ser una excelente manera para que los diseñadores web (y los fundadores de SaaS) piensen en la presencia de su propia marca. Es un enfoque que Andy Crestodina tomó hace algunos años cuando analizó los estándares web para los 50 principales sitios de marketing . También puede ayudar a los diseñadores, estrategas y fundadores a planificar sus iniciativas de diseño utilizando esquemas e identificando qué elementos de diseño clave deben estar en su página de inicio.

El grupo Nielsen/Norman publicó una de las primeras piezas de documentación sobre los estándares de diseño web y definió tres niveles de estandarización:

• Estándar: más del 80 % de los sitios utilizan el mismo enfoque
• Convención: 50 - 79% de los sitios web utilizan el mismo enfoque
• Confusión: el 49 % o menos de los sitios web utilizan un enfoque

Si bien originalmente tenía mucha frustración con las marcas SaaS similares, cuanto más analizaba el razonamiento para seguir los estándares de diseño y las mejores prácticas, más entendía el beneficio de la consistencia. Algunos de los beneficios que vienen con los siguientes estándares web de diseño incluyen:

• Una sensación de seguridad y confianza al ver elementos de diseño comunes
• Saber exactamente adónde ir cuando necesite algo (es decir, Inicio a través de clic en el logotipo)
• No hay incertidumbre en torno a nuevos iconos, botones y elementos de diseño. No se perdió ningún elemento clave (es decir, Obtener una demostración)

Todas estas cosas pueden hacer que la experiencia del usuario sea más fluida e intuitiva.

Pero hay muchas cosas en el espacio SaaS que parecen replicarse sin ninguna buena razón.

Entonces, para comprender mejor los estándares de diseño web de SaaS, tomamos los 250 sitios principales de SaaS 1000 para crear un conjunto de datos que nos mostrara qué cosas se habían convertido en estándares, qué eran convencionales y qué era un lanzamiento de moneda.

Aquí hay una mirada más cercana a las mejores prácticas de diseño de SaaS que suceden en 2022:

Los logotipos de las marcas siempre están en el lado izquierdo

Entonces, ha decidido crear un logotipo (o actualizar el que ya tiene) y se pregunta en qué parte de su sitio web colocarlo. La colocación de su logotipo en la parte superior izquierda de un sitio web es una buena práctica de diseño común. ¡Incluso hemos visto un aumento del 1% en los logotipos a la izquierda de la navegación desde 2019! Es un enfoque que la mayoría de los diseñadores aprovechan dentro y fuera de SaaS. Es una opción lógica reconocer que la mayoría de las personas en América del Norte ven un sitio de izquierda a derecha.

Pero a veces (en nuestra investigación, una vez), un diseñador decide colocar el logotipo en otro lugar. Si bien no vimos que ningún sitio colocara su logotipo a la derecha; encontramos a DataDog que colocó su logotipo directamente en el medio de su sitio:

En un estudio de investigación de logotipos , la gente de Venngage descubrió que el 35 % de las personas preferían los logotipos con texto predominante y de estilo horizontal para las empresas de tecnología.

La mayoría de los sitios web de SaaS son móviles

Vivimos en un mundo móvil.

Los sitios con capacidad de respuesta móvil son una excelente manera de asegurarse de no ofrecer experiencias rotas para las personas en una computadora de escritorio o que visitan desde un dispositivo móvil.

En 2018, el 52,2% de todo el tráfico online mundial se generó a través de teléfonos móviles. Es por eso que es tan bueno ver que casi todas las empresas de SaaS están invirtiendo en mejores prácticas de diseño receptivo y página de destino móvil en lugar de construir únicamente para computadoras de escritorio.

El video se puede encontrar en un tercio de los sitios

Aunque el video ha tomado por asalto los canales de las redes sociales, no es tan popular en los sitios web de SaaS. De los sitios web que presentaban un video en su página de inicio, la mayoría de los videos requerían que los usuarios hicieran clic para iniciar el video. Estos videos solían ser clips cortos, la mayoría de menos de 5 minutos, que brindaban contexto sobre la historia, la propuesta de valor o la demostración del producto de la empresa.

Nos sorprendió mucho descubrir que la mayoría de los sitios web no tienen videos en sus páginas de inicio y nos sorprendió aún más ver una disminución del 13 % desde nuestro estudio anterior en 2019.

Las expectativas de costos heredados que conlleva la producción de un video de alta calidad aún pueden estar frenando a las marcas de esta inversión. Los explicadores de productos ilustrados aumentaron en popularidad hace unos años y se convirtieron en un servicio popular comprado a través de sitios como Fiverr y Upwork.

Hoy en día, la demanda de este tipo de videos sigue siendo bastante alta (más de 14.800 búsquedas de videos explicativos por mes), sin embargo, solo un poco más de la mitad de las empresas SaaS los utilizan.

Siempre hay una llamada a la acción principal en la parte superior de la página

Existe una práctica recomendada clara en la comunidad SaaS de que su llamado a la acción que impulsa a las personas a hacer algo debe estar en la mitad superior de la página. Más del 90 % de todos los sitios que se incluyeron en esta investigación de SaaS Design tenían un botón o llamada a la acción en la parte superior de la página.

La ubicación de la CTA generalmente se puede encontrar en la parte superior del pliegue

La mayoría de los sitios web de SaaS van al grano cuando se trata de colocar el CTA. La mayoría de los sitios web ponen su CTA en la mitad superior de la página. Esta es una buena práctica a seguir porque garantiza que los usuarios vean su CTA incluso si no se desplazan hacia abajo en la página.

Blue Pass Green como la nueva opción para botones SaaS

Al analizar los diversos colores de las llamadas a la acción, hubo una clara tendencia hacia el azul, con las CTA verdes en segundo lugar y las naranjas en tercero.

La popularidad de los botones CTA azules ha crecido significativamente desde 2019, superando al verde en aproximadamente un 3 % (que fue el color CTA más popular en 2019). Hay una buena razón para esto: el color azul se usa más comúnmente para los hipervínculos y es un color llamativo.

La prueba gratuita supera a Get Started como la llamada a la acción más popular en SaaS

La mayoría de las marcas de SaaS están utilizando una jerga de llamada a la acción que es música para sus billeteras: gratis .

La mayoría de los sitios que revisamos optaron por la frase "Prueba gratuita" para su llamado a la acción. Otro CTA finalista fue un lenguaje orientado a la acción que atraía al visitante a hacer algo que lo empujaba más lejos en el embudo. Algunas variaciones incluyen:

• Empezar

• Solicite una demostración

• Programe una demostración

• Inscribirse

• Obtenga una demostración gratuita

• Obtenga X gratis

Las palabras + frases más comunes dentro de la llamada a la acción tienden a ser: Gratis, Demostración, Empezar, Prueba X y Solicitar... Algunas de estas palabras aparecían juntas (es decir, Demostración gratuita o Prueba X gratis), pero usando un La combinación de estas palabras tiende a aparecer más en las llamadas a la acción principales de SaaS.

Usar un fondo claro es la mejor práctica

No es común ver un sitio que tiene un fondo negro en SaaS:

La mayoría de los sitios (92 % de ellos) utilizaron colores blancos o claros como fondo principal para sus sitios.

El uso de personas reales es utilizado por el 80% de SaaS

La ubicación de personas reales en la página de inicio fue la opción favorable para la mayoría de las marcas de SaaS. La ubicación de personas reales en la página de inicio generalmente se encontraba en secciones combinadas con testimonios y activos de contenido. Ocasionalmente, aparecían directamente encima del pliegue del encabezado, como en el ejemplo a continuación, pero la mayoría de las veces, las imágenes de personas reales aparecían más abajo en la página.

Este es un GRAN salto con respecto al mismo estudio que realizamos en 2019 . Hace solo 3 años, solo el 56 % de los sitios web usaban personas reales en sus páginas de inicio, lo que representa un enorme aumento del 24 %.

También fue genial ver un poco de diversidad en la selección de imágenes. Lo único que faltaba era ver un nivel similar de diversidad en esas páginas de "Nuestro equipo", pero ese es un tema para otro momento.

Las ilustraciones personalizadas son muy comunes (70%)

El auge de las ilustraciones personalizadas ha arrasado en la comunidad SaaS. Durante los últimos 3 años, es algo que ha estado apareciendo en un sitio tras otro. Nuestra opinión profesional es que esta es una tendencia, pero está a solo unos pocos puntos porcentuales de convertirse en una buena práctica.

Aquí hay una instantánea de algunos de los sitios y sus ilustraciones:

Esta es una tendencia interesante.

¿Qué piensas? ¿Este enfoque de diseño ayuda a que las empresas emergentes se destaquen o hace que se mezclen? ¿Importa? ¿Da una sensación de confianza?

La mitad de las marcas de SaaS utilizan una herramienta de chat en vivo

El auge del chat en vivo y el marketing conversacional ha sido una tendencia fascinante de observar. Los usuarios quieren respuestas y las quieren rápidamente. A medida que esta idea de adoptar conversaciones en tiempo real con prospectos (o usar bots) continúa cobrando fuerza, claramente se está volviendo popular entre las empresas B2B SaaS.

Nuestra investigación encontró que un poco más del 5% de los sitios SaaS tienen un cuadro de chat en la esquina listo para interactuar. En la mayoría de estos sitios, los servicios que se usaban eran Intercom o Drift.

Entonces, ¿debe seguir los estándares?

Eso depende.

Experimentar con el diseño es una excelente manera de descubrir algo antes que el resto de la industria. Dicho esto, el riesgo de la experimentación con el diseño es que los usuarios pueden encontrar toda la experiencia rota y mal creada. Por otro lado, si cumple con los estándares que ya están en uso en los sitios web SaaS de todo el mundo, podría integrarse fácilmente.

Aquí hay una lista de consejos de diseño de sitios web si desea un sitio que no sea como todos los demás:

• No uses ilustraciones planas como una representación abstracta de tu marca
• No uses botones de color naranja oscuro o amarillo en tu página de inicio
• No alinee a la izquierda su propuesta de valor en el sitio
• Coloca tu logo en el medio o a la derecha
• Usa un fondo oscuro para tu sitio

¿Cumple actualmente su sitio con estos estándares? ¿Algo aquí te sorprendió?