|
Estética,
usabilidad y emoción
Resumen:
Con frecuencia se afirma que es difícil combinar
usabilidad y belleza estética, pero apenas se suele explicar
la razón. ¿Tienen los especialistas en usabilidad
tan mal gusto o son los diseñadores/artistas tan malos en
usabilidad?. La respuesta no es tan sencilla.
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.
Usabilidad
y emociones
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
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 4x4 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 4x4
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.
Un
caso real: el rediseño de Yahoo.com
Yahoo ha experimentado
con varios de sus sitios locales haciéndolos sutilmente más
bonitos (por ejemplo yahoo.es),
si bien aún mantiene su diseño tradicional en yahoo.com.
En todas las versiones la arquitectura de información y los
mecanismos de interacción son las mismas. En las locales
la fuente es más legible y los iconos se han mejorado. Se
ha introducido el icono de carpetas que intenta transmitir el concepto
de directorio como estructura jerárquica de contenidos por
similitud con las carpetas del Explorador de Windows. Aunque en
realidad el cambio más importante ha sido la reducción
en el número vínculos, el mayor espacio en blanco
y su mejor utilización.
Para la versión
Yahoo.com ya está preparada una versión
beta (noticia vía webugger.com)
que no es idéntica a las actuales versiones locales. En las
noticias
de CNET se comenta que el motivo del rediseño es aumentar
el espacio para publicidad, pero no es posible asegurar que sea
así.
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.
Referencias:
-
Hollins, Mark. Gestalt
aproach to perception. Más información sobre las
leyes de la percepción de la Gestalt.
-
Martin, C. Desarrollando
Iconos (PDF: 1,1Mb / 7 pág.). Ejemplos desarrollados
y comentarios de los usuarios a la hora crear iconos para una web.
Un buen diseño de iconos no solo requiere de creatividad,
han de ser evaluados y testados.
- Entrevista
a Don Norman sobre sus opiniones sobre emoción y estados
afectivos en el diseño.
-
Ramsay, J., Barbesi, A. y Preece, J. (1998): A psychological
investigation of long retrieval times on the World Wide Web. Interacting
with Computers, The Interdisciplinary Journal of Human-Computer
Interaction, 10: 77-86
-
Jacko, J. A., Sears, A. & Borella, M. S. (2000). The
Effect of network delay and media on user perceptions of web resources.
Behaviour and Information Technology, 19(6), 427-439
Agradecer a
Cesar Martín (Think
Tank) sus comentarios para enriquecer este artículo.
|
