Estética, usabilidad y emoción en el diseño

Recursos estéticos poco usables

A la percepción humana le parecen estéticamente agradables las armonías y simetrías en las formas, los colores suaves, los bordes con transiciones suaves, los degradados, etc. Sin embargo en muchos casos estos recursos gráficos dificultan la usabilidad de los sitios web. Por otro lado los recursos exactamente contrarios (colores chillones, fuertes contrastes, etc.) aunque también pueden ser estéticamente agradables, son excesivamente llamativos y tras su utilización masiva en publicidad generan la llamada "ceguera a los banners" o insensibilización a este tipo de recursos.

Contraste en textos

Si el objetivo de un texto es ser leído, cuando no se lee bien existe un problema. Sin embargo es frecuente encontrar sitios web con insuficiente contraste de luminancia entre texto y fondo. Este escaso contraste puede ser estéticamente agradable, pero es un recurso del que no se puede abusar, ni para párrafos enteros que los hace muy incómodos de leer, ni para opciones principales del sitio web porque son menos visibles.

Se debería juzgar en cada caso cuáles son los objetivos prioritarios del sitio web si informar mediante textos o el disfrute estético y actuar en consecuencia.

La simetría y la armonía en las formas

Estos dos elementos son muy importantes en la percepción de la belleza e incluso hay matemáticas en ello. Los diseños que contienen el llamado "número de oro" son percibidos como más armoniosos y estéticamente agradables. Las dimensiones de una tarjeta de crédito o la espiral de una caracola contienen este número.

Sin embargo la simetría y la armonía en las formas tienen también graves inconvenientes. Si todo es excesivamente simétrico se reducen las posibilidades de jerarquizar, destacar o diferenciar un elemento del resto de los contenidos. Las leyes de la proximidad y la semejanza de la Gestalt (entre otras) actúan para que percibamos áreas y contenidos próximos y parecidos como relacionados o unidos.

Por ejemplo, si el rectángulo superior tiene aspecto de un bloque compacto y contiene en gran parte publicidad, los usuarios entienden que toda la parte superior es un área publicitaria de poco interés. Así pueden descartar información interesante simplemente porque se ha situado cerca de la publicidad.

Por ejemplo en eresmas.com (imagen 1) se perciben claramente dos áreas, una central de contenidos y otra que la enmarca, sin embargo por contenidos reales estas áreas no deberían existir.

– Imagen 1-

Terra.es (imagen 2) lo hace un poco mejor, incluye espacios en blanco entre áreas para separar en la columna de la izquierda. Además en la columna de la derecha introduce cierto desorden.

-Imagen 2-

Sin embargo no lo hace lo suficientemente bien. La ley del cierre hace que percibamos como una sola entidad elementos que tienen continuidad a pesar de estar un poco separados. En Terra, los elementos de los menús de la izquierda se perciben como una única entidad a pesar de tener pequeños huecos en blanco porque tienen el mismo color, posición y forma.

La única manera de hacer destacar un elemento cuando hay excesiva simetría es hacerlo especialmente llamativo, pero un elemento demasiado llamativo enseguida genera desensibilización y ceguera, por lo que esta no es la estrategia adecuada.

En realidad lo más adecuado es evitar simetrías en contenidos que deben ser percibidos como diferentes. Un ejemplo correcto es la home de Amazon (imagen 3). En ella casi todos los elementos se diferencian del resto y tienen entidad propia porque no son simétricos. Algunos contenidos destacan especialmente porque no están alineados, tienen fondos de diferente color y formas distintas. Aunque el elemento clave de su diseño es la existencia y buena gestión del espacio en blanco, algo que apenas se encuentra en Terra o Eresmas.

-Imagen 3-

La estética y los controles estándar de html

Los controles estándar html, botones, combos, radio-buttons y check-boxes, así como las barras de desplazamiento de Windows del navegador fueron cuidadosamente diseñados y testados para facilitar su usabilidad. Estos controles tienen apariencia de relieve para hacer más claro e intuitivo que han de ser apretados, marcados o desplegados. Su color claro permite un buen contraste del texto interior y sus formas se adaptan fácilmente al cambio en tamaño.

A pesar de estas bondades es frecuente encontrar sitios web que utilizan controles propios, más bonitos y de formas innovadoras, pero sin suficiente relieve, poco contraste en el texto y formas que no resisten bien el cambio en tamaño. Todos estos inconvenientes hacen que sean menos percibidos por los usuarios como tales y de más difícil manejo.

No se trata de vedar la innovación, pero si no se dispone de suficiente presupuesto para diseñar y testar controles, es mucho más sencillo utilizar los estándar de html. Un ejemplo de ello es Amazon.com que aunque ha innovado correctamente en el diseño de sus botones mantiene el resto de sus controles como estándar.

Una imagen no vale más que mil palabras

Es difícil encontrar imágenes que representen bien las ideas que se quieren transmitir y es muy fácil hacerlo con palabras (por algo los jeroglíficos fueron sustituidos hace mucho tiempo).

A pesar de ello muchos sitios web se inclinan por iconos de confusa interpretación o imágenes puramente decorativas que retrasan su descarga. El problema es serio porque muy pocos iconos son universalmente comprendidos y aún menos en un rápido escaneo visual de una página cargada de información.

Tampoco se deben entender las imágenes como única manera para generar emociones, las palabras son también capaces de hacerlo y de manera más eficiente por las limitaciones del ancho de banda. Esto es especialmente cierto en un medio donde los usuarios pasan la mayor parte del tiempo analizando información textual.

Hacer los sitios estéticamente más agradables también tiene efectos negativos en las emociones. Según estudios realizados cuando se produce una aumento en el tiempo de descarga los usuarios encuentran el contenido del sitio menos interesante (Ramsay, Barbesi y Preece, 1998) y de peor calidad (Jacko, Sears y Borrella, 2000).

La usabilidad genera emociones, no solo la estética

Los procesos de uso y la experiencia personal generan emociones más intensas y duraderas que los elementos estéticos que generan emociones más superficiales. Es normal que si se intenta comprar en un sitio web y no se consigue se genere un estado de frustración y enfado hacia el sitio.

No es posible separar los procesos cognitivos de uso, de los estados afectivos (emocionales), la influencia es mutua. Aunque hay estudios que afirman que los usuarios resuelven mejor las situaciones cuando están contentos, es obvio que si el coste de alegrarlos inicialmente es dificultar procesos posteriores, el usuario terminará con emociones negativas hacia el sitio.

Los especialistas en usabilidad y su relación con la estética

Existe muy poco conocimiento en usabilidad web y cuando existen dificultades para crear procesos usables sacrificar usabilidad en beneficio de una estética de la que no tenemos claro sus beneficios solo parece al alcance de un pequeño número de webs puramente artísticas.

En un entorno óptimo y a iguales condiciones de usabilidad, lo más bonito funcionará mejor. Sin embargo aún hay mucho margen de mejora de la usabilidad y en la mayoría de sitios será más efectivo mejorar la usabilidad que la estética.

Existe un número reducido de webs donde la estética y la emoción son la base, por ejemplo la web de un museo. Las obras de arte intentan fundamentalmente alterar nuestras emociones, o mejor dicho estados afectivos, por eso mismo la mayor parte de la interfaz de un museo debe ser también arte. Sin embargo este tipo de webs son muy específicos y estos diseños artísticos no se pueden generalizar.

Están a la orden del día las malinterpretaciones del último artículo del psicólogo cognitivo Don Norman sobre la importancia de la estética en el diseño. Sin embargo en su artículo lo dice muy claro:

"But also notice that I put it (gratuitous graphics) on the fun page, not on the substance page. I wanted you to enjoy them, but not for them to get n the way when you were trying to read. Appropriate graphics fine, in-the-way graphics, no."

La influencia de la emoción y la estética en la venta

Los profesionales con experiencia en marketing del mundo físico saben que los recursos estéticamente agradables venden más porque actúan sobre las emociones, pero esto no está claro que suceda de igual modo en Internet.

El marketing tradicionalmente se centra en explicar por qué se compra, pero no se interesa por cómo se usa lo que se compra. Sin embargo las razones por las que una persona compra un producto no tienen porque coincidir con el uso real del producto adquirido. La gente compra un 4×4 porque le atrae la idea de experimentar sensaciones al límite al volante de un coche potente y por ello la publicidad se centra en estos aspectos, aunque en realidad el 95% de los 4×4 no pise una pista de tierra nunca esto no preocupa, una vez el coche está vendido el objetivo está cumplido.

En Internet el modelo de negocio se basa en el uso repetido de los servicios o productos, no se trata de vender un único producto a toda costa utilizando recursos "emocionales" porque una sola visita no es suficiente. Lo determinante para que el usuario vuelva al sitio web será una experiencia de uso satisfactoria y para ello se han de generar emociones positivas a través de la experiencia de uso real del sitio. Esta experiencia de uso es determinada en gran parte por los procesos cognitivos de análisis de la información. Estos procesos son "más racionales y analíticos" y no es tan fuerte la influencia de procesos "básicos" donde suele atacar la publicidad del mundo físico: mayor estatus social, atraer al otro sexo, diferenciarse del resto, etc.

Nota: El concepto de "emoción" carece de una buena definición y es demasiado vago, los psicólogos prefieren el término "estado afectivo". Por razones de comunicación práctica se ha utilizado el término "emoción" en este artículo aunque el autor es consciente de su inexactitud.