Saturación en diseño web
Con los años, los diseños y diseños web han aumentado en complejidad. Sin embargo, mientras nuestro trabajo se vuelve cada vez más pulido e interactivo, alejándose de los diseños estáticos en forma de caja que dominaron los años 90, el objetivo central no ha cambiado.
La visibilidad es tan importante para los diseñadores hoy como siempre. Se trata de nuestra capacidad para centrar la atención del usuario en el contenido significativo que ayuda a vender productos y alentar a los suscriptores, y ayuda a los sitios web a obtener lectores regulares.
Dado que las personas aprovechan cada vez más las soluciones preconstruidas, es importante otorgarles a los sitios web la distinción y personalidad suficientes para cultivar el interés del usuario.
Después de todo, el objetivo de un sitio web es ser único, no seguir a los demás o ofrecer un diseño utilizable pero genérico y sin vida. Con esto en mente, examinemos cómo la compulsión de abusar de ciertas convenciones y patrones de diseño podría afectar favorable o negativamente a los usuarios.
Saturación y sensibilización
Para comenzar, repasemos las dos variables centrales en el trabajo. La saturación, que no debe confundirse con el término relacionado con el color, se refiere a la ubicuidad de ciertas herramientas, técnicas o implementaciones de diseño en la web. Por ejemplo, considere qué tan extendidos están los anuncios de Google en la actualidad y cómo algunos diseñadores los incluyen en sus páginas web.
La sensibilización, por otro lado, se refiere al grado en que un usuario se ve afectado por la exposición a una herramienta, técnica o implementación. Podría decirse que nos hemos acostumbrado tanto a ver anuncios en línea que nos hemos adaptado para filtrarlos como ruido de fondo irrelevante y, a veces, filtrarlos físicamente.
Estamos viendo anuncios cada vez más intrusivos que usan animación, sonido y colores vivos.
Aunque se podría decir que algunas implementaciones, como la publicidad, restan valor al contenido, otras pueden ser de gran beneficio si se usan repetidas y consistentemente, como las miniaturas de imágenes en las carteras. Debido a que tanto la saturación como la desensibilización pueden ser tanto buenas como malas, el problema esencial al que se enfrentan los diseñadores es descubrir cómo y cuándo seguir las convenciones.
Nuestra industria depende en gran medida de las convenciones. Si no estamos usando un CMS o una plantilla, estamos usando marcos y sitios web de inspiración. Confiar en las convenciones de diseño podría deberse al temor de que si uno no sigue los cambios y tendencias culturales, se considerará que están desactualizados o se pondrá en duda su comprensión de la usabilidad. Pero esto está lejos de la verdad.
Si bien la duplicación de diseños o el uso de convenciones genéricas puede ser más fácil, limita el potencial de uno para conectarse con los usuarios en un nivel emocional, que no debe tomarse a la ligera.
Con tantos frameworks y motores CMS, es una maravilla que necesitemos construir cualquier cosa.
Veamos algunos de los beneficios que las convenciones pueden brindarle a una página web y analice algunas de las principales dificultades que podrían llevarlo a decidir sobre un diseño en particular o a repensar una característica.
También exploraremos un par de soluciones viables para ayudarlo a evitar que su sitio web se vea y se sienta como los millones de diseños que no tienen una propuesta de venta única (USP) o relevancia.
El lado bueno de la saturación
Una justificación principal para usar elementos saturados en un diseño es el reconocimiento que brinda a los usuarios. Las tendencias y los patrones no solo proporcionan soluciones simples para las características que queremos implementar (como los menús de navegación), sino que tienen claros beneficios de usabilidad porque aseguran a los usuarios puntos de referencia familiares en la página.
Los sistemas de navegación son cada vez más complejos, pero también pueden ser bastante elegantes.
La saturación puede aportar valor educativo a una experiencia. Al proporcionar convenciones para los usuarios, la saturación reduce la curva de aprendizaje de un sitio web a lo largo del tiempo.
Considera cómo nos hemos acostumbrado al menú desplegable; si nunca ha visto esta herramienta, es posible que no se haya dado cuenta de que al pasar sobre ella se desplegará una lista secundaria de elementos. Esos componentes comunes pueden tener menos valor empático o singularidad, pero ayudan a los usuarios a realizar sus tareas rápidamente.
La navegación de carne misteriosa plantea problemas para los usuarios. La familiaridad debe preceder a la estética.
Tendemos a dar por hecho cosas que vemos todos los días. ¿Con qué frecuencia, por ejemplo, considera la tecnología detrás de los semáforos? Este fenómeno también se puede aplicar al diseño web.
A medida que aumenta el nivel de saturación de una tendencia, nos familiarizamos con su función y cómo nos afecta. En consecuencia, podemos ignorarlo mentalmente hasta que necesitemos usarlo. El peligro de esto es la "navegación zombie", que veremos más adelante.
Los usuarios tienden a centrarse exclusivamente en el contenido y pueden perderse el mensaje del diseño.
La estabilidad es otro efecto común de las convenciones de diseño. Cuando algo se ha implementado una y otra vez, es probable que haya pasado por varias iteraciones de prueba, análisis y mejora y, como tal, aumente de valor.
Además, debido a que la efectividad de las convenciones, como el menú desplegable, se ha investigado exhaustivamente, podemos crear escenarios de uso para determinar si y cómo serían apropiados para un diseño particular.
Sabemos que los usuarios esperan ser redirigidos a una página de inicio cuando hacen clic en un logotipo.
El lado malo de la saturación
Si bien todos estos puntos muestran que la saturación puede ser beneficiosa, como ocurre con todos los aspectos del diseño, hay una otra cara que debería hacer pensar dos veces antes de subirse al carro. El primero de estos problemas es el abuso.
Para aquellos de ustedes que pueden recordar la era del diseño Web 2.0, cuando todo estaba brillante y biselado, la web estaba llena de diseños inútiles, tanto profesionales como personales. Todo el mundo copió lo que pensaban que era popular, por lo que la tendencia se volvió tan común que su valor se perdió en un mar de clones.
La era del diseño Web 2.0 se salió de control, y la innovación en el diseño sufrió como resultado.
Más allá del simple abuso de la saturación, otro obstáculo es la falta de consideración que a veces rodea la saturación. Cuando implementamos una característica como un menú de navegación, los visitantes deben reconocer los muchos elementos de la misma en la página.
Pero, ¿qué sucede si la herramienta no funciona como se esperaba? Puede parecer trivial al principio, pero las tendencias limitan nuestra capacidad de innovación, y las suposiciones de los usuarios pueden obstaculizar el avance de la web.
Los usuarios esperan una acción al hacer clic en un botón, por lo que la función debe ser reactiva.
Además de estos factores, uno de los mayores argumentos en contra de las plantillas y las características saturadas es que no se dirigen a las necesidades de un público específico.
Una de las características definitorias de un sitio web hecho a mano es que ha sido construido (con suerte) con los requisitos del visitante en el núcleo. Si bien los sitios web pueden salirse con la suya con un diseño de aspecto genérico, los diseños que están bellamente diseñados mejorarán el valor del sitio web y enriquecerán o complementarán el contenido.
Puede decir claramente que este sitio web fue creado para su público objetivo: niños.
El último problema es la influencia que la saturación tiene en los visitantes. Cuando los diseños se vuelven rutinarios, los usuarios pueden perder fácilmente nuevos componentes que, según suponen, existían durante su visita anterior.
Este estado psicológico, conocido como "navegación zombie", se manifiesta cuando los usuarios no se dan cuenta de los objetos que inconscientemente o conscientemente consideran irrelevantes. Esto es especialmente problemático en publicidad; muchos usuarios bloquean anuncios con extensiones de navegador o evitan mirarlos, incluso si los anuncios pueden ser útiles.
Si bien las opciones de filtrado pueden ser útiles para los usuarios, también pueden dificultar su detección.
Soluciones para diseñadores
La primera solución, que parece bastante obvia, es innovar, en lugar de copiar lo que existe.
Sin embargo, en algunos casos, el mejor curso de acción será simplemente no reinventar la rueda; la disponibilidad de galerías de inspiración, secuencias de comandos de cortar y pegar, motores CMS y plantillas de diseño tienden a fomentar una preferencia por un diseño de entrega rápido, en lugar de mano de obra original y artesanal.
Incluso si usa una solución preconstruida, puede mejorarla o personalizarla para su público.
WordPress puede (y debe ser) ser altamente personalizado para que coincida con la identidad de la persona o empresa.
La segunda solución es determinar si una característica genérica realmente sirve para un objetivo particular. La idea de diseñar con un propósito ha existido por muchos años, y si bien los usuarios continúan exigiendo mayores niveles de interactividad y control en un sitio web (muy lejos de la era del diseño estático), debemos incluir un elemento en un sitio web solo si la utilidad supera los costos de estar allí; no debería, por ejemplo, robar la atención de otro contenido. Cada objeto debe servir para un propósito útil, incluso elementos menores como enlaces "Omitir", que ayudan a los lectores de pantalla.
Eliminar las características innecesarias sigue siendo popular ya que todos amamos una interfaz limpia.
La simplicidad y el objetivo de dirigir la mirada del visitante a un contenido útil es el núcleo del buen diseño. Para evitar la sobresaturación, debemos tener precaución al agregar objetos a la página (y especialmente no hacerlo repetidamente) y no entusiasmarnos demasiado con la "carga de características".
Sabemos que la sobrecarga de usuarios les obligará a trabajar más duro para avanzar a través de la página; y cuantas más distracciones existan, mayor será el riesgo de que se pierda contenido importante. Los diseñadores deben ser sensibles a las necesidades del usuario, reducir la curva de aprendizaje y maximizar la visibilidad del contenido.
Buenos y malos ejemplos
En el primer ejemplo a continuación, se ha invertido mucha energía en equilibrar la convención y la originalidad. Observe cómo el diseño de ancho fijo, el logotipo centrado y altamente visible y los elementos familiares se unen en la página sin sobrecargar al usuario. Si bien se requiere desplazamiento, la interfaz ofrece un giro único, con sutiles floraciones, opciones tipográficas y fotografías de perfil cuidadosamente organizadas.
El único inconveniente real es que los usuarios no expertos podrían no ser capaces de identificar fácilmente los iconos visuales. La navegación de carne misteriosa es siempre un gran riesgo.
El diseño de este segundo ejemplo es quizás menos único que el primero. Sin embargo, sigue siendo una buena experiencia como resultado de la corta curva de aprendizaje para la interacción del usuario: el logotipo y el menú de navegación están donde usted espera que estén; el sitio web sigue los términos convencionales para los elementos de la cartera (aunque, en este caso, el espacio de la pantalla se desperdicia); y las llamativas infografías empujan a los usuarios a desplazarse hacia abajo en la página.
La barra de desplazamiento alternativa es bastante interesante. Muchos diseñadores parecen adoptar uno en un intento por tomar más control sobre la estética del sitio web. Pero debido a la región más pequeña que se puede hacer clic aquí, este diseño podría ser muy inaccesible para los usuarios con deficiencias motoras, y va en contra de la tendencia común de usar el valor predeterminado del navegador. Equivale a un antipatrón y es un buen ejemplo de una elección de diseño inapropiada.
Este sitio web final es un ejemplo real de "qué no hacer". Como puede ver, mientras intenta tranquilizar a los usuarios, la página de inicio de MSN no es original y no presenta su contenido con claridad.
El logotipo, el cuadro de búsqueda y los enlaces de los iconos se representan de forma aceptable, pero a medida que el usuario se desplaza hacia abajo, la página se vuelve cada vez más desordenada como resultado de las convenciones de diseño estrechamente empaquetadas.
Hay demasiadas opciones de menú de navegación, lo que genera confusión; tal vez un menú desplegable hubiera sido suficiente. Además, la publicidad ocupa una sexta parte de la página, lo que desvía la atención del usuario. Además, a medida que avanzamos, la página está repleta de presentaciones de diapositivas, bloques de contenido con pestañas y cientos de enlaces superpoblados. Esto es sobresaturación en su mejor momento: se está proporcionando demasiada poca originalidad o propósito.
La saturación y el equilibrio entre la convención y la originalidad siempre se reflejarán principalmente en el diseño.
A medida que la web continúe evolucionando, se presentarán nuevos estándares y convenciones. Si bien queremos evitar la creación de diseños que son tan diferentes que confunden a los usuarios, debemos mantener un elemento de singularidad en nuestro trabajo para evitar encasillar a nuestros visitantes.
Cada sitio web tendrá sus propios desafíos y necesidades, y la responsabilidad del diseñador será retroceder contra la "anti- experiencia" genérica de las plantillas y devolver algo de innovación a su trabajo.
Escrito exclusivamente para WDD por Alexander Dawson. Es diseñador web independiente, autor y desarrollador de software recreativo especializado en estándares web, accesibilidad y diseño UX. Además de dirigir un negocio llamado HiTechy y escribiendo, él pasa tiempo en Gorjeo , Foros de SitePoint y otros lugares, ayudando a los necesitados ".]
¿Qué piensas de la saturación en el diseño web y cómo enfrentas estos desafíos en tus propios sitios web? Por favor comparte tus pensamientos abajo…