Las tendencias de diseño se propagan como la pólvora por Internet. Incluso si no los ha estado buscando activamente, apostamos a que ha visto cientos de menús de hamburguesas y fondos de paralaje en la naturaleza durante los últimos años. Este efecto se agrava un poco en los sitios web basados en WordPress, ya que una gran parte de ellos usa temas premium que incorporan estas tendencias para aprovecharlas como puntos de venta.
Dicho esto, no hay nada «malo» en mantenerse al día con los últimos avances en diseño web. El verdadero problema surge cuando sus diseños comienzan a sacrificar las mejores prácticas para incorporar innecesariamente las últimas tendencias, lo que resulta en una peor experiencia para sus usuarios.
Compilar una lista de las mejores prácticas de diseño web es una tarea bastante desalentadora, pero estamos dispuestos a intentarlo con una lista concisa de seis factores que no debe (nunca) sacrificar en favor de la moda.
Una de las trampas más fáciles en las que se puede caer en cuanto a sacrificar las mejores prácticas por ir de moda es no diseñar teniendo en cuenta las conversiones. Para decirlo en otras palabras, casi todos los proyectos de WordPress comparten un objetivo, que es ponerse ante tantos pares de ojos como sea posible y engancharlos, ya sea como visitantes que regresan o como clientes. Para lograr esto, los diseñadores web deben utilizar todas las herramientas a su disposición para optimizar las conversiones. Incluso si está enamorado de un nuevo diseño, aún debe realizar pruebas para ver cómo funciona cuando se compara con opciones alternativas.
Las pruebas A/B son una herramienta crucial para determinar cuál de sus diseños funciona mejor, y hay muchas herramientas disponibles para ayudarlo a realizar estas pruebas en WordPress. Divi , por ejemplo, incluye una completa herramienta de prueba A/B llamada Divi Leads , y existen otras alternativas poderosas, como los siempre populares Google Analytics Experiments y Optimizely .
Este simple consejo es aplicable no solo a las grandes revisiones de diseño, sino también a las pequeñas partes que conforman la apariencia completa de su sitio de WordPress: qué imágenes usar, qué paleta de colores aplicar, qué fuentes usar. a lo largo de sus páginas, el diseño de navegación de su sitio, etc. Puede parecer bastante triste moldear sus diseños en torno a números y estadísticas, pero tenga la seguridad de que los visitantes (generalmente) recompensarán un gran diseño con mayores tasas de participación.
Si está interesado en profundizar en los aspectos prácticos del diseño centrado en la conversión, consulte la Guía definitiva para el diseño centrado en la conversión de Unbounce .
2. Llamadas a la acción claras
El uso de llamadas a la acción (CTA) claras y concisas es una de las formas más simples y efectivas de maximizar los retornos en su sitio web de WordPress. Ya sea que esté buscando más correos electrónicos para su boletín informativo, ventas adicionales o simplemente suscripciones antiguas, a veces la respuesta a sus problemas es tan simple como pedirles directamente a las personas que le den estas cosas.
En lo que respecta a las llamadas a la acción, debe evitar cualquier cambio de diseño que haga que el suyo sea menos visible. Después de todo, para que sean efectivos, sus CTA deben verse y, para que se vean, deben colocarse en lugares clave de su sitio. Considere hacia dónde suelen ir sus ojos cuando está analizando un nuevo sitio web: tiene la barra de navegación (que generalmente se encuentra en la parte superior o lateral), la parte superior de la pantalla (donde es probable que vea una galería de desplazamiento hoy en día, o un encabezado de ancho completo), etc. Todos estos son excelentes lugares para colocar un CTA y, como tal, debe tener cuidado con las tendencias que requieren que sacrifique el espacio principal del sitio web.
Además de las preocupaciones basadas en la ubicación, también debe tener en cuenta el color, el tamaño y la forma de sus CTA, y cómo la implementación de una nueva tendencia de diseño podría requerir que modifique estos factores clave, que idealmente se habrían sometido a pruebas divididas intensivas. para encontrar las combinaciones más efectivas. Por ejemplo, un fondo animado podría crear un contraste poco atractivo con uno de sus CTA y reducir su tasa de clics.
El sitio web anterior aborda este problema de manera elegante mediante el uso de un fondo de video oscuro con un CTA transparente en la parte superior (tendrá que hacer clic en la captura de pantalla anterior para verla en acción), con líneas blancas contrastantes. Además, tenga en cuenta cuán fuertemente contrasta su título con el fondo, lo cual es necesario para atraer la atención hacia él, considerando cuán molestos pueden ser los fondos animados.
3. Cuadros de búsqueda utilizables
En algún momento, su sitio crecerá lo suficiente como para que un simple menú de navegación no sea suficiente para que los usuarios se desplacen y encuentren contenido anterior con facilidad, y ahí es donde entran los cuadros de búsqueda. Independientemente de cómo haya elegido implemente esta función en su sitio web de WordPress, ya sea a través de uno de los principales complementos de búsqueda de WordPress , la Búsqueda de Google, etc., estos cuadros deben permanecer visibles, fácilmente identificables y utilizables.
Antes de sumergirnos en los detalles de lo que hace exactamente un cuadro de búsqueda ‘bueno’, comencemos con una declaración un tanto impopular: no todos los sitios web requieren uno. Hoy en día se ha convertido en una de esas funciones que son bastante esperadas sin importar el alcance o la función de cualquier proyecto web, pero en ciertos casos, es superflua. Por ejemplo, si está diseñando un sitio web de folleto simple que no se actualizará regularmente y cuyos propietarios se comunican principalmente a través de las redes sociales, ¿cuál es el punto? Dicho esto, si espera que su sitio crezca con el tiempo, la función sin duda será útil en algún momento.
Ahora, un cuadro de búsqueda simple abarca dos componentes simples: un campo de entrada y una función de envío. No es necesario que sea ostentoso o único, ya que debe considerarse como una de las funciones principales de su sitio. Entonces, si te encuentras evaluando si modificar su diseño, debes considerar las siguientes preguntas:
- ¿Cambiará la forma en que el cuadro de búsqueda encaja en su diseño general?
- ¿Afectará su facilidad de uso?
- ¿Afectará su ubicación, haciéndolo difícil de encontrar?
Tomemos un momento para examinar un ejemplo de lo que consideramos una mala implementación de un cuadro de búsqueda, debido a cómo interactúa mal con el resto del sitio web, así como a su dificultad de uso.
Arriba verá un ejemplo de una función de cuadro de búsqueda que ocupa toda la página cuando se selecciona y que no se puede cerrar, por lo que requiere que los usuarios regresen a la última página manualmente si deciden que no necesitan realizar una búsqueda. Si se considera solo, la barra de búsqueda de ancho completo se ve bastante elegante, pero cuando considera la falla mencionada anteriormente, así como el hecho de que no se ve un botón de envío, obtiene una implementación terrible de la función de búsqueda.
4. Carritos de compras fáciles de usar
Al igual que los cuadros de búsqueda, los carros de la compra a menudo se pasan por alto desde el punto de vista del diseño, ya que se consideran puramente funcionales. Sin embargo, si estás trabajando en el diseño de un sitio de comercio electrónico, debes prestar especial atención a estos, ya que son una de las principales vías a través de las cuales los clientes interactuarán con tu proyecto.
Los mejores tipos de carritos de compras servirán como un recordatorio amigable constante para los usuarios de que aún no han pagado, o cuántos artículos han agregado en total, para que puedan realizar un seguimiento de sus compras mientras navegan por sus productos. Además, una vez abiertos, deben proporcionar un resumen sucinto de los elementos que se han agregado (junto con fotos de dichos elementos) y mostrar un total estimado.
Desde el punto de vista del diseño, sus carritos de compras deben encajar en el aspecto general de su sitio y ser fácilmente identificables. El gigante de las compras Walmart aborda este problema de una manera simple que nos gusta bastante: su carrito de compras se identifica con un ícono reconocible, y una vez que le agrega un artículo, aparecerá un círculo naranja brillante que muestra cuántos productos hay en tu carro
Esto hace que el carrito de compras sea discreto mientras compra y reconocible una vez que esté listo para pasar por caja. Además, también somos fanáticos de su cuadro de búsqueda sensato, que cumple con los criterios que cubrimos en el punto número tres.
5. Mantenimiento Informativo y Páginas de Error
Muchos diseñadores eligen divertirse con sus páginas de mantenimiento y error, lo cual es bastante comprensible teniendo en cuenta que si todo va bien, deberían verse lo menos posible. El problema aquí surge cuando te olvidas de incorporar información en estas páginas como parte de tus diseños.
Tome la página de error 404 de Airbnb, por ejemplo.
Es un diseño bastante simple con un titular que lo dice todo; sin embargo, también se toma el tiempo para informarle exactamente lo que sucedió y brindarle una pequeña guía adicional para que regrese al sitio principal. No solo es bastante informativo, también se ve bien, aunque no hay mucho que hacer allí.
Ahora, comparémoslo con la página 404 que se encuentra en otro sitio.
Eso es prácticamente todo: una animación que muestra un enorme 404. Si bien la animación en sí se ve muy bien y muestra las habilidades de diseño de los equipos, sirve como un buen ejemplo de tendencia sobre las mejores prácticas.
6. Tipografía legible
La tipografía es un área de diseño que a menudo se pasa por alto en detrimento de muchos sitios web de WordPress, ya que la fuente (o alfombra) correcta realmente puede unir un diseño.
Cuando se trata de elegir el candidato adecuado para sus diseños, hay un solo factor que debería eclipsar a todos los demás: ¿es legible? Si está diseñando un logotipo o un título, es posible que se salga con la suya con una fuente más llamativa, pero eso no funciona cuando se trata de algo que requiere que los lectores presten atención por un tiempo.
Hay un par de trucos simples que puede agregar a su arsenal cuando se trata de elegir la fuente correcta; por ejemplo, mantener las líneas en una longitud constante permite a los lectores leer un texto con menos esfuerzo. También puede tener en cuenta que las fuentes sans-serif tienden a funcionar mejor como encabezados , mientras que se dice que las fuentes serif aumentan la legibilidad .
Conclusión
A menudo es fácil caer en la trampa de sopesar el atractivo visual sobre la sustancia, lo que es especialmente dañino cuando se trata de sitios web (como pueden atestiguar los veteranos de la generación de sitios web Flash) considerando que deben diseñarse teniendo en cuenta la usabilidad.
Entonces, si alguna vez se siente seducido por la última tendencia en diseño web, revise la siguiente lista de verificación para determinar si es una moda pasajera o un éxito:
- ¿Tiene un impacto negativo en mis conversiones?
- ¿Hace que mis llamadas a la acción sean menos claras?
- ¿Hace que mi función de búsqueda sea inutilizable?
- ¿Afecta la funcionalidad de mis carritos de compras?
- ¿Hace que mis páginas de error sean menos informativas?
- ¿Hace que mi sitio sea menos legible?
¿Cuál es tu regla de oro personal en lo que respecta a los proyectos de diseño web? ¡Suscríbete y compártelo con nosotros en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Toni Art / shutterstock.com