Saltar al contenido

Frente y fondo

Para interactuar con el mundo que nos rodea, nuestro cerebro separa lo que percibe en frente y fondo. Le presta atención al frente y descarta lo que está en el fondo. El diseño debe tomar en cuenta este mecanismo cognitivo.

Animación Frente y Fondo

Nuestro cerebro separa lo que percibimos en dos: por un lado la información relevante, que trae al frente y por otro la información irrelevante, que envía al fondo. Cuando un usuario se enfrenta a una interfaz, su aparato cognitivo va a realizar automáticamente, de forma inconsciente, la tarea de separar frente y fondo con cada pantalla, cada cuadro, cada diálogo.

El buen diseño toma en cuenta este fenómeno y genera las pistas visuales que le permitan al usuario realizar esta tarea sin complicaciones, garantizando que la información que queda en el frente es la relevante. Describiremos a continuación cómo funciona el mecanismo cognitivo que separa el frente y el fondo, para luego enumerar las pautas de diseño que esto implica.

 

El uso del azul para texto, viñetas, decoración, fondo, recuadros y decoración impide al cerebro determinar qué está en el frente y qué está en el fondo. A partir de 2017, el problema fue corregido.

Cómo separamos el frente del fondo

Cuando un usuario se enfrenta a una pantalla, o para ser más exactos a un conjunto de estímulos, lo primero que hace su cerebro es separar en frente y fondo lo que está viendo. Este es un fenómeno inconsciente y casi instantáneo, que demora en el entorno de una décima de segundo.

En el momento en que el usuario percibe conscientemente la interfaz, una o dos décimas de segundo después de haber recibido en sus sensores el impacto de los estímulos, en lo que percibe ya está definido qué está en el frente y qué está en el fondo. Lo que quedó en el frente va a recibir la atención y lo que quedó en el fondo en su mayoría absoluta va a ser descartado sin más trámite.

El proceso mental por el que el usuario separa lo que percibe en frente y fondo no se puede ni detener ni evitar, es un mecanismo que se generó en la evolución que nos permite a los humanos lidiar eficientemente con el entorno complejo que nos rodea. En la naturaleza de hace 25.000 años, el mecanismo funcionaba a la perfección: lo grande, lo ruidoso, lo que se mueve, lo estridente en cualquier forma va al frente. Por eso nuestros depredadores intentan siempre ser silenciosos y mimetizarse con los colores del fondo.

En las interfaces que diseñamos no ocurre lo mismo que en la naturaleza, nosotros tenemos que crear artificialmente la jerarquía para que lo más relevante quede en el frente y lo intrascendente en el fondo.

 

Chileatiende 2020

Durante años la página principal de chileatiende.gob.cl utilizó un hermoso fondo de la cordillera chilena, tan potente que hacía extremadamente difícil entender qué está en el frente y qué está en el fondo. En setiembre de 2020 el problema está resuelto.

Recomendaciones de diseño

Las recomendaciones de diseño para separar correctamente el frente y el fondo son muy sencillas.

  1. Utilice colores (o espacios cromáticos) bien separados para el frente y el fondo. Dicho sencillo: elija un fondo claro y un frente oscuro o al revés, pero nunca mezcle los colores de uno y otro.
  2. Mantenga muy baja la jerarquía visual de los elementos del fondo. Muchas veces el fondo incluye imágenes, guardas, tramas y otros elementos decorativos. Tenga un cuidado especial en que estos elementos no destaquen por sí solos, de modo de que nunca pasen al frente y mantengan su rol decorativo.

En el sitio del ministerio de Desarrollo Social y Familia de Chile, las imágenes de fondo compiten con las del frente en jerarquía, impidiendo generar un frente y un fondo a nivel miro y entiendo (se mantiene igual a setiembre de 2020).

  1. Agrupe los elementos del frente en pocos grupos: recuerde que los humanos podemos percibir y atender hasta 4 grupos a nivel miro y entiendo. Preocúpese de que los elementos que integran el frente estén nítidamente agrupados en una cantidad de grupos pequeña, si fuera posible uno solo.
  2. No aplique texto sobre imágenes, salvo que las diseñe especialmente. La legibilidad es una de las víctimas más comunes de los problemas entre frente y fondo, en particular cuando el texto se encuentra sobre imágenes. En este caso debe haber un cuidado caso a caso de que el texto se mantiene legible, evitando los textos que se muestran automáticamente sobre imágenes de fondo.

___

Curso OnLine de Psicología Cognitiva y Experiencia de Usuario

Clases en vivo, videos grabados, bibliografía, guías de lectura, foros de discusión y clases especiales en vivo con solo 5 participantes.

Próximo comienzo: 22 de octubre
Consultas: capacitacion@concreta.com.uy

Inscripciones abiertas.