JHMorales.es>blog » Ergonomía

Uso adecuado de las fuentes en la interface

JHMorales — Wed, 11 Feb 2009 17:19:22 +0000

Via CSSBlog he encontrado una pequeña guía sobre el uso de las fuentes en la web, la cual remite a información de webtaller.

Discrepo en algunas cosas basándome en mi experiencia y en mucha información que he encontrado en internet y libros sobre diseño gráfico y web.

Por un lado está el contraste, el cual para mí no debe ser demasiado fuerte. Lo primero que se viene a la cabeza en cuanto al contraste es el blanco y negro. Este queda bien en los libros, pero en el ordenador hay que sumarles el brillo que aporta la pantalla. Algo que no tiene el papel a no ser que sea así y en ese caso ya es un defecto de diseño, o un error del diseñador que lo escogió.

Basta con elegir un ligero tono pastel del color que se quiera, ya sea para el fondo o para el texto en caso de fondos muy oscuros. En cuyo caso habrá que aumentar un poco el tamaño de fuente o su espesor para que el fondo no se la coma.

Coincido en esto con los de CSSBlog, los colores deben tener una armonía. Pero esta debe ser preferiblemente análoga o monocroma, es decir, entre colores muy parecidos o el mismo color. Acercándose uno al negro y el otro al blanco, texto y fondo o viceversa. Evitando en lo posible las armonías complementarias que provocan vibración tonal. Como es el caso del naranja-violeta o magenta-verde, por ejemplo.

El interlineado y el interletrado deben ser algo que no se debería tocar a no ser que se quiera hacer algo especial. Ya quien diseñó la fuente estudió esas características para hacerlas adecuadas a la lectura. En cuanto al largo de los renglones diversas investigaciones han dado como resultado que un largo de 62-66 caracteres es el mas apropiado.

Salirse de estas bases es posible pero para casos puntuales, publicidad, logotipos, titulares impactantes, etc., pero no es recomendable para bloques de texto. Con efectos, contrastes extraños, interletrados e interlineados especiales, etc. en textos largos provocamos dificultad de lectura y cansancio visual. Lo que deriva en abandono de la web, lo primero que debemos evitar.

fontReSizer.js nuevo plugin de jQuery

JHMorales — Tue, 20 Jan 2009 12:39:16 +0000

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:

<script src="jquery-1.3.1.js" type="text/javascript">script>
<script src="jquery.cookie.js" type="text/javascript">script>
<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.

Resolucion de pantalla y tamaño de fuente

JHMorales — Fri, 09 Jan 2009 13:40:39 +0000

En los últimos años el ancho de la resolución de la pantalla se ha ido incremantando de 800 a 1024, a 1280, a 1440, a 1600px, y de repente ahora se hacen populares los ultraportátiles o netbooks con 800. Las webs usualmente se ven igual en todas las resoluciones, ya sea por tener un diseño estático o líquido, mas no así el tamaño de la fuente usada que va disminuyendo proporcionalmente a medida que aumenta la resolución y terminamos dejándonos los ojos.

Con esto en mente es conveniente usar un método que facilite el cambio del tamaño de fuente o texto, que sea visible en pantalla y que además también reaccione igual al efecto de cambio de tamaño que causa. En algunas de mis webs he usado un código de jQuery que encontré en text resizing with jquery, al que le hice algunos cambios para tener las características antes mencionadas. Una de las partes que hice fue la creación de un método que adapte el tamaño de fuente a la resolución de la pantalla del nuevo visitante de la web.

El código fontSize.js usa la librería de javascript jQuery, y el plugin de cookies jquery.cookie.js, que debemos llamarlos en el head así:

Luego dentro de la página debemos poner los enlaces:

-a
a
a+

En el css les damos el estilo que mejor se adapte al diseño de nuestra web. Lo he aplicado en un principio a dos de mis páginas (www.centrecapi.es y www.laranda.es). Ha sido probado con éxito en windowsXP ff3, ie7, opera9.65, safari3.1, chrome 1 y fennec; en windowsVista ie8b2; windows98 ie6, ff2 y opera9.1; macOsX 10.46 safari2; Ubuntu 8.04 ff3 y Konqueror. Las web tienen un tamaño de fuente de 62.5% en el css y a los diferentes elementos se les asigna el tamaño de fuente en ems.

El código lo que hace es crear una función que esté operativa al terminar de cargar la página e inmediatamente activar un botón invisible que usará el tamaño de fuente almacenado en la cookie, o el botón de tamaño inicial para nuevos visitantes.

Primero se añade un botón invisible para activarlo en usuarios que ya han visitado la web, a este no hay necesidad de darle estilo. Luego se encuentra el ancho de la resolución de pantalla y se calcula el tamaño de fuente base de acuerdo a él. Luego se verifica si existe una cookie del tamaño de fuente usado en visitas anteriores, si no existe se usa el tamaño antes calculado.

Se crean las funciones para el botón de decremento (x0.9), el de tamaño base (el calculado), el de incremento (x1.1) y el del botón invisible para usuarios antiguos al que se le da el tamaño almacenado en la cookie. Por último se comprueba si existe la cookie para activar el botón invisible o si no para activar el de tamaño base.
Le he traducido los comentarios para entenderlo mejor.

$(function(){
var sitefunctions = {
textresize: function(){
$("#changeFont p").append("");//creamos botón de usarios antiguos
$(".font").css("visibility","hidden").css("font-size",0);//lo hacemos invisible
// mostramos los enlaces para cambio de tamaño
$("#changeFont").show();
var $cookie_name = "sitename-FontSize";
var originalFontSize = $("html").css("font-size");//código original
var screenWidth = screen.availWidth;
if (screenWidth<850) {
originalFontSize = screenWidth / 48;//tamaño para pantalla pequeñas
}
if (screenWidth<1100) {
originalFontSize = screenWidth / 60;//tamaño para navegadores estandar con ancho de 1024
}
else {
originalFontSize = screenWidth / 72;//tamaño para navegadores estandar con ancho mayor de 1024
}
if ($.browser.msie) {
if (screenWidth<850) {
originalFontSize = screenWidth / 48;//tamaño para ie a 1024
}
else {
originalFontSize = screenWidth / 56;//tamaño para ie mas de 1024
}
}
if ($.browser.safari) {
originalFontSize = screenWidth / 52;//tamaño para safari
}
if ($.browser.opera) {
originalFontSize = screenWidth / 50;//tamaño para opera
}
// si existe la cookie cargamos el valor guardado, si no la creamos
if ($.cookie($cookie_name)) {
var $getSize = $.cookie($cookie_name);
$("html").css({fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px")}); // apaño para el error de doble "pxpx" en IE (siempre dando la nota)
}
else {
$.cookie($cookie_name, originalFontSize);
}
// boton tamaño base
$(".resetFont").bind("click", function(){
$("html").css("font-size", originalFontSize);
$.cookie($cookie_name, originalFontSize);
});
// boton incremento
$(".increaseFont").bind("click", function(){
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum * 1.1;
if (newFontSize<40) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
//boton decremento
$(".decreaseFont").bind("click", function(){
var currentFontSize = $("html").css("font-size");
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum * 0.9;
if (newFontSize>12) {
$("html").css("font-size", newFontSize);
$.cookie($cookie_name, newFontSize);
}
return false;
});
//boton usuarios antiguos
$(".font").bind("click", function(){
var $getSize = $.cookie($cookie_name);
var prevfontSize = $getSize + ($getSize.indexOf("px") != -1 ? "" : "px");// apaño para el error de doble "pxpx" en IE (siempre dando la nota)
$("html").css({fontSize: prevfontSize});
$.cookie($cookie_name, prevfontSize);
});
}
};
$(document).ready(function(){
sitefunctions.textresize();
if ($.cookie("sitename-FontSize")) {
$(".font").click();//usa el valor de tamaño de fuente almacenado en cookie
}
else {
$(".resetFont").click();//usa el tamaño calculado según ancho de resolución
}
});
});

En originalFontSize = screenWidth / xx estos valores van bien generalmente, pero el tamaño se puede cambiar según la web. Puede ser que haya que hacer varias pruebas para encontrar el punto preciso.

¿Puede la interfaz tener ergonomía?

JHMorales — Fri, 12 Dec 2008 12:08:44 +0000

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.