egs-bioshockthecollection-massmediagames-s3-2560x1440-ac3cc1945d89

Narrativa ambiental: Lo que el diseño web puede aprender de BioShock

Cualquiera que haya interactuado conmigo fuera del horario laboral sabe de mi debilidad por los videojuegos que cuentan buenas historias. Y si hablamos de narrativa, es imposible no mencionar la ciudad submarina de Rapture en BioShock.

Lo fascinante de BioShock no son los diálogos directos, sino cómo la ciudad te cuenta su decadencia a través de su entorno. Una pintada en la pared, una luz de neón parpadeante, la disposición de las maletas en una estación. A esto se le llama narrativa ambiental (environmental storytelling). ¿Y adivina qué? Nuestras páginas web deberían hacer exactamente lo mismo.

Muestra, no lo digas

Imagina que entras a un sitio web y lees un bloque de texto gigante que dice: «Somos una empresa moderna, rápida y confiable.» Eso es exposición barata.

Ahora imagina entrar a un sitio con mucho espacio en blanco, una tipografía Sans-Serif nítida, animaciones que cargan a 60 frames por segundo y un proceso de compra de dos clics. Nadie tuvo que decirte que son rápidos y modernos; el entorno te lo gritó a la cara.

Guiando el ojo del usuario

En videojuegos como BioShock o Silent Hill, los diseñadores usan luces para guiar sutilmente al jugador hacia la salida o hacia objetos importantes, sin poner flechas gigantes.

En desarrollo web y UI/UX, usamos color, peso tipográfico y el espacio negativo. El botón de «Comprar» debe ser esa luz cálida en una habitación oscura que invita al usuario a hacer clic. Si todo en tu interfaz brilla (si todo es texto en negrita, colores chillones, banners parpadeantes), el usuario se sentirá abrumado y se irá.

«Un buen diseño web no requiere un manual de instrucciones. El usuario navega por él de forma instintiva, guiado por pistas visuales cuidadosamente colocadas.»

La próxima vez que construyas una landing page, pregúntate: ¿Qué historia está contando esta interfaz antes de que el usuario lea una sola palabra? Haz que el diseño trabaje para ti.

Add a Comment

Your email address will not be published. Required fields are marked *