Entradas etiquetadas ‘Ergonomía’

He trabajado varios días poniendo a punto un plugin para jQuery que me facilite las cosas en cuanto a incrementar la accesibilidad de las web. Así que pongo a disposición de todos un archivo javascript que crea un recuadro dinámicamente con -a a a+ para cambiar el tamaño de fuente en pantalla. En la primera visita calcula el tamaño de fuente inicial de acuerdo a la resolución para presentar el texto en la misma proporción en relación al tamaño de pantalla. Así en resoluciones mayores la fuente se muestra adecuadamente.

Una de las cosas que me preocupan cuando diseñas una web es que no sabes en que resolución de pantalla la van a ver. Al final unos terminan con un tamaño de letra grandísimo y otros, por el contrario, diminuto. Con este plugin estableces un tamaño de letra proporcional a la pantalla, un tamaño mínimo y uno máximo, y puedes cambiar el diseño del contenedor de las -a a a+ y de estos enlaces.

Como esto se crea dinámicamente no se muestra a aquellos que no tienen javascript activado. Basado en el font-resize de text-resizing-with-jquery, funciona con jQuery (yo lo he probado con la 1.2.6 pero creo que funcionará con anteriores) y con el plugin de cookies Cookie de Klaus Hartl.

Además almacena en una cookie el tamaño escogido para mantenerlo en la navegación y futuras visitas.

INSTALACIÓN: Antes del final del head poner estas líneas:

  1. <script src="jquery-1.3.1.js" type="text/javascript"></script>
  2. <script src="jquery.cookie.js" type="text/javascript"></script>
  3. <script src="fontReSizer.js" type="text/javascript"></script>

Podeis bajarlo desde aquí:
fontresizer

Para los que lo quereis en inglés:
fontresizer_en

Podeis encontrarlo también en la dirección del proyecto:
jQuery plugins fontReSizer

Aquí podeis verlo en acción:
www.jhmorales.es
www.axiscentreclinic.com
www.centrecapi.es
www.laranda.es

Hala, a disfrutar. Ya me contareis que os parece y si hay que arreglar algo.

Esa es una pregunta que tiene respuesta positiva, pero que desgraciadamente es algo a lo que se le da poca importancia.

“La Ergonomía es definida como la disciplina científica que estudia el diseño de los sistemas donde las personas realizan su trabajo. A estos sistemas se les llama ‘sistemas de trabajo’ y son definidos de una forma amplia como ‘ el sector del ambiente sobre el que el trabajo humano tiene efecto y del que el ser humano extrae la información que necesita para trabajar ‘. El objetivo que tiene el ergónomo es describir la relación entre el ser humano y todos los elementos del sistema de trabajo.”

Con la metáfora del escritorio se genera un “espacio físico-virtual”, es decir, un espacio virtual que imita al físico cada vez con más perfección. En el cual tendemos a crear la tridimensionalidad y esperamos la usabilidad del espacio físico, y como se ve en muchos casos sin atender a la ergonomía necesaria para poder interactuar comodamente en él.

John Maeda en su libro Las leyes de la Simplicidad expone claramente como esta imitación de lo físico es acertada o no según el diseño creado.

Los mejores diseñadores aunan forma y función para crear experiencias intuitivas que comprendemos de forma inmediata, sin necesidad de lecciones (o de cursillos). Un buen diseño depende, de alguna manera, de la capacidad de incluir un sentido de familiaridad instantáneo.

Mientras el arte … nos incita a cuestionarnos. El diseño … aclara las cosas.

Y me pregunto ¿Es posible seguir los Criterios ergonómicos sin limitar por ello la creatividad y variedad de los elementos que componen la interfaz? Por supuesto que es posible, y hay que conocerlos para poder aplicarlos en su justa medida, pero cuando sean necesarios y sin coartar la imaginación.

En el diseño web es necesario simplificar la interfaz para mantener un orden visual y operativo de esta, sin olvidar el uso apropiado del espacio vacío como elemento organizador. Si, ese espacio sin nada al que muchos temen. Volviendo a John Maeda:

… hacer todo lo posible por preservar el espacio vacío debido a su perspectiva de que nada es algo importante. La oportunidad perdida por el incremento de la cantidad de espacio en blanco se recupera mediante la mejor calidad de la atención en aquello que permanece.

Por todo ello cabe aclarar que la ergonomía en este caso tiene mucho que ver con el espacio vacío que rodea al texto y llega hasta los bordes del botón, al espacio entre los botones, a la separación entre menú y contenido, titulares y párrafos, secciones e imágenes, etc.

La interfaz mas usada siempre tiene una cabeza y un pie. Su cuerpo se divide en dos o tres columnas teniendo una de ellas mayor ancho que las demás, siendo ésta la que alberga el contenido con mas profundidad. Como veis el ser humano en principio crea todo a su imagen y semejanza. El diseñador tiende basicamente a representar la interfaz como un reflejo de lo humano para hacerla mas asequible.

Luego con el tiempo y experiencia se desarrollan otros modelos de presentación que conllevan mas creatividad, que diluyen ese reflejo en narraciones visuales mas elaboradas y que mantienen, en lo posible, los elementos básicos necesarios para el adecuado funcionamiento de la interfaz.

En un principio la interfaz de escritorio de Apple HyperCard de los Macintosh dió el primer paso al imitar el Rolodex, siguió luego el diseño de los Macintosh 128 con una interfaz para el ordenador como metáfora del escritorio, buscando así un entorno de trabajo que imitara al que el usuario ya estaba acostumbrado.

Hay una necesidad imperante del usuario de manejar cosas que conoce, papel, reglas, lápices, botones, cajas, etc. El ordenador es una prótesis que nos permite la manipulación directa de los objetos virtuales que tenemos en la interfaz imitando la realidad. Esta misma concepción se extendió a los programas usados para la creación de documentos, presentaciones, gráficos y, por supuesto, las páginas web.

En Diseño de nuevos medios de comunicaciónTom Elsner, de la asesoría de diseño británica Bureau for Visual Affairs, afrima:

“Hacer un sitio web es como fabricar un objeto real”…

Objeto que tiene sus mecanismos, botones, pestañas, secciones, etc. que se espera que el usuario controle según sus necesidades. Por ello además de crear una estructura en función del contenido, es necesario tener en cuenta la ergonomía de los objetos que allí funcionan y de todo el objeto en sí.

Vemos en el tiempo como se ha evolucionado de una interfaz simple, a imagen de un texto impreso, hasta la tendencia actual a mostrar tres dimensiones. Ahora encontramos botones que se presionan, pestañas y fotografías que hacen sombra, efectos que imitan el paso de hojas de revista (pageflip), gráficos en 3D, uso de css para dar sensación de profundidad, etc.

Somos animalitos de costumbres y si queremos que nuestras webs funcionen debidamente hay que implementar objetos usables que por su forma y mensaje indiquen la acción que se espera de ellos, la jerarquía que tienen en el conjunto y los posibles caminos que hay disponibles.

En cualquier caso hay que mantener una estructura que permita diferenciar las diferentes partes y una forma en ellas que indique su función. La falta de estructura es una ausencia de significados. El usuario no soporta el caos, busca un orden que conecte las diferentes partes para tener una unidad espacial. Y si no lo encuentran se buscan otro camino ya que hay millones posibles a un solo clic.

Ya hablaremos de estructuras y jerarquías mas adelante, que este bullir de ideas en la cabeza hace que el mensaje sea mas largo de lo que debiera.