Primero fueron las páginas blancas llenas de texto. Luego llegaron iconos, botones e imágenes de fondo. Vino más tarde el tiempo de Flash y las webs de alto impacto. Alguien pensó que era mejor ordenar esta ensalada y entonces hicieron su entrada la arquitectura de la información y la usabilidad. El uso de ajax explotó recientemente y se popularizaron los frameworsk como jQuery para usar javascript con un criterio claramente funcional.
¿Que se viene ahora?
La web está evolucionando hacia un medio donde por fin podemos diseñar con más libertad. La principal tarea del diseñador web siempre ha sido luchar contra las limitaciones del medio: colores limitados, tipografías limitadas, posicionamiento de elementos limitados, multimedia limitado. Los diseñadores web fueron muchas veces recopiladores de trucos y recetas para hacer que la web no ignorara la larga tradición de la humanidad en diseñar objetos agradables.
La popularización del CSS y la adpoción de estándares resolvieron muchos problemas. Pero no todos. La extrema preocupación por recrear un ambiente familiar al usuario hizo que muchas páginas web fuesen diferentes variaciones del hiperclásico esquema cabecera-menu-contenido-pie de página. Pero la dirección está cambiando.
Hace unos días el reconocido diseñador Paul Boag escribió Stop designing websites, start designing posters. En pocas palabras, Boag nos dice que el excesivo apego por las convenciones nos llevó a diseñar páginas web con un mismo molde que sea fáciles de comprender para el usuario. Sí, puede que sean fáciles pero resultan terriblemente aburridas.
La metáfora propuesta para renovar el diseño web es no pensar en páginas. Merjo, pensar en carteles. Atractivo visual, fáciles de ojear y con más información para el lector interesado. En un contexto de saturación y sobrepoblación de sitios y páginas la premisa básica del cartel vuelve a tener sentido. Ya no se trata de llenar la página de información para que el usaurio pueda «verlo todo», hay que escoger una o dos ideas sencillas, jerarquizarlas y presentarlas para salir a la captura de un usuario sobre saturado de mensajes.
Atractivo
Aun conservando los elementos estructurales básicos de una página es posible ser creativos y llamar la atención del usuario. En lugar de un listado interminable de características MailChimp optó por gráficos, colores y texto en gran tamaño para decirnos claramente que…
- Son un servicio para hacer marketing por e-mail
- Hay dos acciones destacadas: registrarnos o ver una demo de 2 minutos
- Una persona de un medio muy importante lo probó y habla bien de él.
- Nos dicen que incluye la versión gratuita y podemos ver la tabla de precios.
- Información extra: Principales características, una nueva funcionalidad destacada, clientes importantes que poseen y un pie de página con acciones, opciones y datos secundarios.
Usable
La creatividad no está reñida con la usabilidad. Diseñamos para que se entienda el mensaje y la web -salvo páginas artísticas/experimentales- no es la excepción. Podemos ser tremendamente innovadores en la gráfica, emplear una disposición transgresora de los elementos en el plano, o definir la comunicación con el usuario desde un enfoque novedoso pero siempre tenemos el mismo objetivo: hacer comprensible nuestro mensaje fácilmente.
Este es el eje de la usabilidad: crear objetos con los cuales resulte fácil y agradable interactuar. En pocos palabras, el usuario debe saber donde está, donde tiene que hacer clic y cómo moverse a lo largo del sitio.
En Pixelcraft hay un buen ejemplo con un interesante uso del blanco.
- Al abrir la página centramos la atención en este apartado donde vemos algunos elementos clave que quiere promocionar el sitio. Luego de unos segundos la imagen cambia y completada la serie se reinicia. Un recurso sencillo, efectivo y fácilmente comprensible por el usuario.
- Luego de fijar la atención si bajamos encontramos vemos dos elementos que son centrales en una empresa del rubro: mostrarnos el portfolio de trabajos y decirnos qué áreas cubren. Un listado que recuerda a los planes de hosting comunica en poco espacio mucha información.
- Si no hacemos scroll tenemos el tercer elementos en importancia dentro de la página: el logotipo y la barra de navegación. Al saber que la mayoría de los usuarios conoce la ubicación de estos elementos no hay un énfasis innecesario en estos elementos que son claramente visibles y accesibles a lo largo de todo el sitio.
- Una vez obtenida la información básica (quienes son, qué hacen, qué los diferencia) bajamos para encontrarnos con texto que refuerza y amplia la información anterior. La información detallada está detrás de los enlaces.
En síntesis, un diseño claro, sencillo y elegante.
De un vistazo
En inglés scannable es la capacidad de un texto para ser recorrido fácilmente con la vista. Podría traducirse como «escudriñeable» pero no es una palabra que refleje el carácter apropiado. Cada vez más los usuarios se acostumbran a recorrer las pantalla buscando títulos y gráficos que permitan tener una idea del contenido en pocos segundos sin necesidad de detenerse a leer.
Esta es la tendencia y nada indica que se vaya a revertir. Un buen sitio nos tiene que transmitir rápidamente qué podemos esperar de él. Si hasta las citas personales se reducen a pocos minutos no hay razón para otorgarle más de unos segundos a una web.
La webde Firefox es un excelente ejemplo ¿Por qué atormentarnos con datos si la principal razón por la cual llegan los usuarios es hacer clic en el botón de descarga? Es el primer elemento donde ponemos nuestros ojos y rápidamente podemos saber lo que obtendremos: la última versión de Firefox. Hacia la derecha tenemos un menú con opciones muy fáciles de entender para entrar en detalles.
Si no estamos desesperados por saber algo podemos bajar un poco y nos encontramos con el principal argumento por el cual debemos actualizar Firefox: es más rápido. Además vemos otro menú con las principales características del nuevo navegador.
Recién más abajo encontramos la información complementaria como la visita guiada, los premios o consejos para usar el programa. Y en un espacio totalmente marginal están los enlaces información que casi nadie lee: la política de privacidad.
Información claramente jerarquizada
Cuando hay mucha información hay que jerarquizar, escoger qué es importante y qué secundario. El cartel lleva este principio del diseño a su máxima expresión y generalmente está domininado por una única idea expresada a través de un título, una fotografía, una ilustración o una mezcla de todo.
No es necesario llegar a este punto en la web, pero un buen diseño nos debería permitir diferenciar lo importante de lo accesorio. Kanchi.org es un buen ejemplo. Desde la página inicial podemos ver que hay una clara jerarquía donde un titular que es una declaración de principios de esta organización domina la página. Un buen modo de identificar a qué se dedica esta organización sin necesidad de ir a la página de «Sobre nosotros».
Más abajo un video acompañado de un pequeño texto captar nuestra atención por el contraste de la imagen sobre el fondo negro. Y luego aparecen tres recuadros de idéntico tamaño con más información. Parece bastante claro por donde comenzar a navegar el sitio.
Conclusión
Con las limitaciones que tenían los primeros diseñadores web algunos hacían auténticas maravillas para acercarnos una web original, agradable y bonita. En ese entusiasmo inicial algunos se pasaron de la raya y terminaron por crear sitios intendentibles con las nuevas tecnologías que iban apareciendo.
Hoy, con la usabilidad como una disciplina indispensable para pensar la web y la progresiva asimilación de la web como un medio por parte de los usuarios asistimos a un escenario donde el diseño gráfico recobra su valor: tipografía, planos, fotografías, luces, colores… desde un minimalismo extremo hasta la ornamentación barroca el abanico de posibilidades es mucho mayor.
La metáfora de la web como un cartel nos permite salir del molde con el cual se crean muchas páginas y proyectar algo diferente. Sin caer en propuestas estrambóticas, el diseño web es hoy mucho más que acomodar un encabezado, menú y pie de página para que rodeen el contenido.
