El diseño web orientado a los usuarios

Desde hace unos días estoy leyendo mucho sobre diseño de interacción, arquitectura de la información, y orientación al usuario. He leído artículos de aquí y de allá, pero todos vienen a definir unos patrones muy concretos.

Sencillez. Aparece absolutamente en todos los artículos que he leído. La sencillez debe estar presente empezando por el maquetado de la página, el lenguaje utilizado, visibilidad sobre lo que intenta hacer el usuario -mensajes de error, etc- y facilidad de acceso a las distintas partes de la aplicación. Todo debe ser sencillo.

Visibilidad de la información. Los usuarios pasan por encima de las páginas, no las escudriñan concienzudamente -en la mayoría de casos- y por esto, si queremos captar su atención, debemos dejar la información más importante bien visible -siempre sin romper el diseño del resto de la página-.

La herramienta es un medio, no un fin. Algo que ya estamos muy acostumbrados a oír, es eso de…

Form follows function.

Si algo no tiene un sentido, una obligación en nuestro diseño, no debe estar ahí. Sin embargo, la estética es importante, genera confianza e imagen, y la imagen, por mucho que queramos creer que no, es importante. Por todo esto, forma y función deben ir de la mano, y como todo en este artículo, tiene que ver con el primer punto, la Sencillez.

Diseño a 3 columnas con 100% de altura

Hace poco un colega me encargó el diseño para su web de fotografía. Quería algo a tres columnas bastante concreto, e incluía columnas con alturas del 100%.

Por lo visto, en CSS los div no funcionan correctamente con la propiedad height:100%. Sin embargo, si asignamos a height un valor fijo, este se respeta.

Así que se me ocurrió que lo más sencillo era hacer que este valor fuera muy grande, le asigné 100em. Entonces se presenta otro problema: La barra de desplazamiento. Si te desplazas hacia abajo, se ve claramente el engaño. ¿Cómo solucionar este problema?

Existe una propiedad en CSS llamada overflow. Esta propiedad controla el comportamiento de los elementos que se salen del elemento al que están asignado.

Los valores que puede tomar son:

• Visible: Los elementos que salen de nuestra “caja” pueden verse fuera de ella.
• Hidden: Lo que salga de la caja no se verá.
• Scroll: Si algo sale de la caja, aparecerá en ella una barra de desplazamiento para ver el contenido completo. Si nada sale de la caja la barra aparecerá deshabilitada.
• Auto: La barra de desplazamiento aparecerá sólo si hay elementos que salen de la “caja”.

Si en nuestro CSS asignamos la siguiente propiedad a body:
body {
height:100%;
overflow:hidden;
}

Conseguiremos que nunca salga la barra de desplazamiento en nuestra página. No importa si es horizontal o vertical. Pero esto presenta un problema: ¿Qué pasa si necesitamos una imagen que es demasiado ancha para la página?

Además de overflow, se puede afinar más esta propiedad estableciendo distintos comportamientos para segun qué barras de desplazamiento. Así, overflow-x concretará el comportamiento de los elemenos que sobresalgan horizontalmente y overflow-y los que sobresalgan verticalmente. De esta forma podemos controlar que si las imágenes sobresalen horizontalmente las podamos ver desplazándonos por la página, pero no se vea el truco utilizado para el div.