Diseñando una interfaz de usuario

Al hilo de mi post acerca de la interfaz de usuario de la página de Turismo de Vigo, voy a escribir un pequeño texto acerca de cómo se debe diseñar una.

Lo primero que debo decir es que no existe una receta mágica que nos lleve a conseguir la interfaz perfecta, sólo unos principios que podrán ayudarnos y que en muchas ocasiones no deben ser tomados como universalmente válidos. Es decir, que no todos son aplicables en todos los casos.

Flash

Cuidadín con el Flash... mira que lo repito. Pero no, la gente no hace caso y luego pasa lo que pasa: la gente abusa de las intros y hay una para cada sección, con la consiguiente pérdida de tiempo; no sabe manejar sus eventos y hay que dar más clicks que en un matamarcianos para hacer una mierda de scroll (de lo poquito que sé hacer en Flash: scrolls que no necesitan dar clicks); te meten animaciones cutre-salchicheras que no tienen sentido alguno, pero que como están en Flash hay que meterlas, porque mola; y por último consiguen que su página tenga secciones inaccesibles o falsos links

Si vas a meter flash en tu página, asegúrate de que sea pertinente y úsalo para cosas complejas que no se puedan hacer en CSS, Javascript y HTML (o sea demasiado lento y difícil hacerlo). No lo uses para menús: mezclar HTML y Flash no es pecado... lo que sí lo es es hacer una página en HTML plano y meterle botones en Flash.

Tampoco lo uses para animaciones estúpidas que no aportan nada y se quedan como objetos permanentemente en movimiento que causen estrés visual a los lectores ya que además de que cansa más el ojo, una animación de este tipo les distrae, a lo que se responde aumentando la concentración, con lo que consigues cansar al usuario.

Y sobre todo, no abuses de las intros: muchos usuarios no las soportan, o no la ven más que una vez así que permíteles hacer un "skip intro" antes de cargar la película para ahorrarles la tortura; si el navegador que usan no tiene el plugin es posible que no puedan entrar en tus contenidos, así que recuerda dejar un camino alternativo para entrar; si no usas flash en tu página, usarlo para meter los botones del menú es pecado (pero pecado que te cagas).

Y lo más importante: asegúrate de usar sólo películas ligeras, ya que a nadie le gusta estar esperando varios segundos a que se carguen los contenidos de una página

Color

Bueno, no existe una gama cromática que nos asegure una buena interfaz, pero si gamas que nos aseguran espantos sin límite. Por ejemplo, si tú tienes una página con fondo rojo vivo y letras en amarillo, lo más seguro es que mates del susto a tus lectores y se vayan con los clicks a otra parte en cuanto logren sobreponerse.

Últimamente suele usarse bastante el fondo de color blanco y colores cálidos que resulten agradables al ojo. Hace unos años el color blanco estaba proscrito en muchas páginas, pero desde que empezó el auge de las TFT que no deslumbran tanto como las CRT, se ha popularizado. No creas que por usarlo tu página será demasiado sobria: la elegancia es el arte de usar el menor número de elementos posible que necesitas para resaltar algo... superar este número puede dar lugar o a arte barroco o a auténticas horteradas.

Coherencia

Un sitio debería tener un aspecto y un manejo más o menos estandarizado en todas sus partes, para que el usuario no tenga que estar descubriendo cómo usar las cosas a cada momento. A veces elementos diferentes requieren manejos diferentes, pero hay que apañárselas para que el usuario no se sienta demasiado extraño o tenga que estar haciendo rompecabezas a cada instante.

Una de las páginas más incoherentes que he visto es esta, de Disco Fifties (Ourense), que tiene una mezcla chunga de elementos, como esa tabla anunciando las fiestas antes de la página en sí (¿costaba mucho meterla en una sección?) o las fotos de las go-go que no son ampliables y esos Flash tocapelotas que no se pueden parar. En las fotos de la galería incluso aparece insertada la fecha en que fueron tomadas en plan turista, de los de llevar camisa hawaiana. Me da la impresión de que dejaron de trabajar con Toclama (vaya rebaño de "profesionales" que tienen) y comenzaron a hacer actualizaciones por su cuenta

Elementos en pantalla

La palabra es minimalismo. Se debe procurar conseguir una interfaz con un número adecuado de elementos de forma que no resulte recargada pero tampoco parezca desierta. Lo ideal sería tener entre cinco y nueve elementos en la página, aunque a veces esto se deba superar como en el caso de los menús. Superar este principio sólo apto para cracks que sepan muy bien lo que hacen, sino te esperan cosas visualmente puñeteras

Enlaces

Hay que tener muy bien revisaditos los enlaces que se ofrecen en una página: los enlaces rotos dan muy mala imagen. Además, deben ser pertinentes (es decir, que enlazar a la web del bar de tu cuñado, cuando tu lo que tienes es un criadero de caracoles... malo)

Imágenes

Las imágenes y los colores "visten" a una web. Así que procura tener fotos atractivas, pertinentes, con unos colores agradables y vistosos (pero que no rompan la imagen del sitio) y un buen ajuste de brillo y contraste.

El tema del tamaño es una cosa seria: si son demasiado grandes, a ver dónde las metemos, ya que el espacio en pantalla es finito. En Adegas Gándara lo solventé metiendo miniaturas que se despliegan en una ventana flotante al situar el ratón encima de la miniatura. Esta solución la vi por primera vez, y usada con auténtica maestría en Mundo Plus

Sobre el tamaño físico, recordar que cada vez que entras en una página tienes que descargarte sus elementos, así que procura que no se pasen de largo: para imágenes pequeñas (400x300, por ejemplo) la calidad visual es casi la misma tanto si pesa 400kb como si pesa 40. Además existen optimizadores estupendos para estas cosas.

El texto alternativo es obligatorio: ayuda a los invidentes a saber qué es lo que muestras a aquellos que si tienen visión

Menús

Los menús son otro tema peliagudo: no pueden tener demasiadas opciones, pero tampoco deben obligar a dar clicks y clicks para llegar a cada sección (entre dos y tres clicks es lo máximo que se debería invertir en llegar a una información cualquiera). Así que si tu menú se pasa de grande, piensa en cómo reordenar tus contenidos.

Si ves que necesitas meter tus menús en ventanas flotantes, procura poner caminos alternativos: los usuarios invidentes y los que usen navegadores con problemas de capas te lo agradecerán, ya que en caso contrario se quedarán sin poder acceder a contenidos.

Textos

Asegúrate de meter puntos y coma: los chorros de texto no se los lee nadie. El tipo de letra que sea estándar (es decir, que lo tenga todo el mundo) y su tamaño que no sea excesivo: los periódicos llevan siglos con letras pequeñas y ahí están. Si el usuario quiere ver las letras más grandes recuerda que puede hacerlo y si sabes como impedir que hagan esta clase de cosas, que sea sólo cultura general: hay que facilitar la vida al lector.

Los textos no deben tener paja: para eso están las novelas. Procura que tus textos sean tan cortos como sea posible para contar lo que tienes que contar, y si es preciso, añade enlaces donde se pueda ampliar la información que ofreces. Esto no molestará a los que no demandan tanta información, pero será apreciado por aquellos que quieren más.

Navegadores

Cada navegador interpreta los CSS como le da la gana. Es por eso que tengo los problemas que tengo con el diseño de este blog (pero no tengo tiempo de rediseñar mi plantilla... alún día conseguiré que se vea bien en Explorer).

Ante esta clase de problemas, lo mejor es tener hojas de estilo distintas según navegador y seleccionar dinámicamente qué hoja de estilos cargar una vez detectado el navegador del cliente. En blogger, por desgracia, esto no parece tan sencillo (pero algo se me ocurrirá)

...

Bueno, espero que os haya parecido interesante. De momento no es más que un esbozo, así que cualquier observación, omisión o ejemplos, en los comentarios.

Como dijo pjorge una vez, "mis usuarios saben más que yo"

Technorati tags: cagadas, web, diseño, flash, web