domingo, 28 de enero de 2007

Usabilidad y cartografía medieval

El pasado día 18 de enero, asistí al laboratorio sobre cartografía medieval que impartió Javier Mendívil en Cadius Zaragoza. Mi visión particular de aquel acto, va a consistir en ver algunos problemas de usabilidad comunes entre mapas y páginas web, y mencionar directrices de cómo solucionarlos. Eso sí, quisiera agradecer a Javier, tanto los magníficos contenidos impartidos en el laboratorio, como los complementarios que iban como regalo para los asistentes.

Contenido denso

La apariencia de una página llena de texto y de imágenes sugiere que será difícil obtener la información que se está buscando. No es posible rastrear bien el contenido.

En un sitio web, esto es aún más problemático que en un mapa, puesto que el usuario simplemente decidirá que no merece la pena invertir esfuerzo en la búsqueda, y se irá a otra página.

Habrá que redactar contenidos más cortos, que vayan al grano, que hablen el mismo idioma que la clientela a la que está dirigido el contenido, y saber jugar con el espacio en blanco en el diseño para que los usuarios puedan centrar su atención en el rastreo de la información.

Diseño relleno

Muchas páginas web comenten el error de abrumar a los usuarios con elementos móviles, luces parpadeantes y enlaces mal estructurados.

No hay necesidad de poner más gráficos que los necesarios y a un tamaño manejable. No hace falta perder el tiempo y el espacio en decorar, sino en comunicar. Los sitios web deberían ir directos al negocio, que es lo que buscan los clientes.

Artilugios de interfaz gráfica de usuario de diseño propio

Algunos diseñadores de interfaz, prefieren no seguir las convenciones existentes para ciertos elementos de diseño, como campos de introducción de datos (cajas de texto, botones de radio, casillas de verificación) o las barras de desplazamiento. En muchas ocasiones por ser sitios construidos en Flash o por intentar diferenciar el diseño del sitio web.

Si algo no parece lo que es, seguramente no se percibirá como tal y no se usará correctamente. Esto se traduce en que si se están pidiendo datos al usuario, tal vez este no logre enviarlos, o que si se está cambiando la forma de una barra de desplazamiento, al no reconocerse como tal, no se utilice y se pierda contenido importante.

No mostrar quién está detrás de la información

Al igual que para dar credibilidad de una obra vale con una firma, para dar credibilidad y confianza a los usuarios de un sitio web, es conveniente añadir información sobre la compañía (o las personas) que están detrás.

Es muy común facilitar esta información en páginas tituladas Acerca de nosotros o Quiénes somos. En ellas debe figurar claramente como contactar y encontrar la compañía, la filosofía de la organización y, como información auxiliar, no estaría mal añadir algunos hechos relevantes en la historia de la empresa.

Legibilidad

La tipografía ofrece una idea sobre el sitio web y transmite información acerca de lo que el usuario puede hacer en él. Las distintas fuentes de letra pueden significar capricho o seriedad y el tamaño y el color pueden destacar el contenido.

Pero si el tamaño no es legible, ya sea por el tamaño o por la grafía, se convierte en incómodo y molesto, y el usuario desistirá de leer el contenido aunque le pueda resultar de interés.

Para contenidos en pantalla, es mejor utilizar letras sin serifa. Para titulares, puede utilizarse tanto letras con serifa como sin ella porque el tamaño será mayor y habrá menos problemas con la resolución. En tamaños pequeños, las letras con serifa se vuelven borrosas por el suavizado de los bordes dentados.

Si, por cuestiones de diseño, se ha elegido un tamaño menor al recomendable (12 puntos), siempre hay que dar la posibilidad de que el usuario pueda aumentar el tamaño, ya sea mediante alguna herramienta del navegador o proporcionando enlaces (o botones) en la página para agrandar el texto. Para que desde el navegador siempre se pueda cambiar el tamaño del texto, es mejor usar tamaños relativos.

Contraste entre texto y fondo

Leer en pantalla es mucho más costoso que leer en papel porque existe menos resolución para pintar las letras. En un libro podemos tener unos 3000 puntos por pulgada (dpi), mientras que en un monitor podemos haber 100 dpi como mucho (lo normal suele ser 72 dpi).

Los contrastes altos entre texto y fondo pueden hacer la lectura más fácil. Aunque lo mejor sigue siendo texto negro sobre fondo blanco, la norma a seguir es evitar el uso de colores similares, ya que el bajo contraste cansa la vista causa molestias. Tampoco es recomendable utilizar combinaciones de colores brillantes porque causan un efecto vibrante en los textos (como usar texto rojo sobre fondo azul).

Palabras clave resaltadas

Resaltar las palabras importantes de un texto atraen la atención del lector hacia áreas específicas. Sin embargo, resaltar frases completas o demasiado largas, ralentiza la lectura, porque enfatizar demasiados elementos, causa el efecto contrario: nada destaca, todo parece igual de importante.


El extracto del listado de problemas de usabilidad ha sido obtenido del libro Prioritizing Web Usability, escrito por Jakob Nielsen y Hoa Loranger, disponible en español en la colección de Anaya Multimedia.

miércoles, 3 de enero de 2007

Los elementos perdidos de HTML

Soy una de esas personas que, cuando miran una nueva página web, no se fijan tanto en lo que se ve a simple vista como en el esqueleto que le da forma: el código fuente. Ahí es donde se puede apreciar la verdadera estructura del contenido y la semántica que se ha utilizado (la que se encontrarán los motores que indexen esa página web).

Bien es verdad que HTML tiene algunas carencias para marcar el contenido, que se están intentando solucionar con la redacción de XHTML 2.0 o HTML 5.0 (que todavía está más en pañales que XHTML 2.0). Pero también es cierto que, algunos elementos que sí posee, no son utilizados (en los casos en los que se deberían utilizar). Tal vez sea por desconocimiento o por usar algunos editores WYSIWYG (bien sean de escritorio como DreamWeaver o bien estén hechos en JavaScript como TinyMCE), pero no debemos olvidar que para darle un correcto significado al contenido, hay que marcarlo de la forma adecuada.

No debemos caer en la tentación de marcar en función de la presentación que luego los navegadores dan a esos elementos. Hay que recordar que siempre podemos cambiar la presentación gracias a las hojas de estilo en cascada (CSS).

Marcado de edición de textos

ins y del
Cuando estamos desarrollando un documento, hay cosas que no siempre se escriben bien a la primera, o bien luego hay que hacer algún ajuste o actualización. HTML nos permite marcar los cambios, ya sean añadidos o borrados, con las etiquetas ins y del. De esta forma, al igual que en otros editores de texto, de un vistazo, se pueden descubrir los cambios en el documento.

Además, estas etiquetas tienen 2 atributos que sirven para saber las razones del cambio (cite) y cuándo se realizó dicho cambio (datetime). El formato de este último atributo es un poco especial y riguroso. Está basado en esta plantilla: YYYY-MM-DDThh:mm:ssTZD
  • YYYY: año con 4 dígitos
  • MM: mes con 2 dígitos (01-12)
  • DD: día con 2 dígitos (01-31)
  • T: caracter separador entre fecha y hora
  • hh: hora con 2 dígitos (00-23)
  • mm: minutos con 2 dígitos (00-59); es información opcional
  • ss: segundos con 2 dígitos (00-59); es información opcional
  • TZD: zona horaria, Z para hora Zulú (la del meridiano de Greenwich) o desfase en horas y minutos (positivo o negativo) del huso horario correspondiente


Más información sobre la plantilla de datetime en ISO 8601 de la Wikipedia.

Ejemplo de uso de los elementos ins y del:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit<ins cite="lorem ipsum..." datetime="2007-01-05T13:24+01:00">, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</ins>. Ut wisi enim ad minim veniam<del cite="lorem ipsum..." datetime="2007-01-04T08:21:34-05:00">, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat</del>. Duis autem vel eum iriure dolor in hendrerit in ...</p>

bdo

Otro desconocido elemento para la edición de textos es bdo. En inglés, bdo es la abreviatura de bidirectional override, y si nos atenemos a esta definición, podemos adivinar su función: sobreescribir el tratamiento direccional del texto para el contenido que se encierre dentro del elemento.

Por si no ha quedado claro, intentaré explicarlo mejor. Uno de los atributos de la etiqueta html es dir, que sirve para indicar cómo se debe escribir (el navegador) el texto que contiene el documento, es decir, si se escribe de izquierda a derecha (ltr) o de derecha a izquierda (rtl).

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr" lang="es">
...

Como se puede ver en el ejemplo, con el atributo dir se define la legibilidad de todo el documento pero, ¿qué ocurre si dentro de un texto que se lee de izquierda a derecha, necesitamos incrustar algo de contenido que está en otro idioma y además se lee al revés? Para eso existe el elemento bdo. Veámoslo con otro ejemplo:

...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr" lang="es">
...
<p>Contenido en idioma español. Se escribe de izquierda a derecha.</p>
<p><bdo lang="zh-TW" dir="rtl">Contenido en otro idioma (chino tradicional) que se redacta de derecha a izquierda.</bdo><p>
...

Como se puede ver en el ejemplo, se ha definido un idioma y una dirección de escritura general para el documento (en la etiqueta html) y luego se ha marcado el texto en otro idioma (que si supiera chino, estaría correctamente escrito ;-) ) gracias a la etiqueta bdo.

Etiquetas de estilo basado en contenido


cite

cite sirve para indicar que el texto que contiene es una referencia bibliográfica. Junto con el elemento para enlaces (a), puede servir para hacer referencia a otro documento donde se encuentra la fuente que hemos citado.

<blockquote lang="en-GB">You can't always get what you want; but if you try sometimes, you just might find, you get what you need.</blockquote>

<p><cite><a href="http://en.wikipedia.org/wiki/You_Can't_Always_Get_What_You_Want">Rolling Stones</a></cite></p>

code

La etiqueta code indica que el texto que encierra es código fuente de programación. Esto hace que los navegadores utilicen (por defecto y a no ser que establezcamos lo contrario con CSS) una fuente monoespaciada (todos los caracteres tienen la misma anchura) para visualizar el texto.

<pre><code lang="en-US">
/**
* string numberToAlphabet(int $number)
*
* Converts an integer in an alphabetical string (1 <= $number <= 702)
*
* @author PHP manual, user contributes notes for chr() function
* @param int $number integer to convert
* @return string alphabetical string
* @access public
*/
function numberToAlphabet($number)
{
return ($number-- > 26 ? chr(($number / 26 + 25) % 26 + ord('A')) : '') . chr($number % 26 + ord('A'));
}
</code></pre>

En el ejemplo, se ha encerrado el contenido de code dentro de la etiqueta pre por 2 razones:
  • code es una etiqueta para texto en línea (es decir, tiene [o debe] ir dentro de otra etiqueta de bloque distinta de body, que sólo debería contener otros elementos de bloque)
  • con el uso de pre se preservan los espacios y líneas en blanco del texto, necesarios para dar formato al código fuente

dfn

La etiqueta dfn se utiliza para marcar los términos (y no las definiciones) nuevos (o especiales) de un documento que necesitan la atención del lector. Como regla de buen estilo, sólo se delimita la primera aparición del término en el texto.

<p>El software libre es también llamado software de código abierto. La razón por la que se llama así es que, junto con el <dfn>programa objeto</dfn>, se distribuye el <dfn>código fuente</dfn> del mismo.</p>


Para definir los conceptos (como cuando se escribe un glosario de términos) existe otro conjunto de etiquetas:
  • dl: lista de definiciones
  • dt: término a definir
  • dd: definición del término


<dl>
<dt>Programa objeto</dt>

<dd>Instrucciones que se ejecutan directamente contra la máquina y que no son comprensibles por las personas.</dd>

<dt>Código fuente</dt>

<dd>Instrucciones escritas en un lenguaje de programación que el ser humano puede leer pero que no comprende directamente la máquina.</dd>
</dl>

kbd

kbd es la forma más indicada de indicar que un determinado texto es introducido desde el teclado (keyboard). Es muy útil para el caso de redactar manuales o cualquier otro tipo de documentación técnica.

<pre><samp>
C:\><kbd>c:\mysql\bin\mysql -uadmin -p mysql</kbd>
Enter password: <kbd>*********</kbd>
</samp></pre>

samp

Como se ha podido ver en el ejemplo anterior, en el que hemos hecho uso ya de la etiqueta samp (sample), esta sirve para mostrar la salida de algunos programas o ejemplos de código fuente (como los que estoy utilizando en este artículo).
var

La etiqueta var se utiliza para marcar texto que sirve de plantilla, es decir, para texto que no se debe introducir tal cual, sino que debe reemplazarse por otro a la hora de teclearlo. Como ejemplo, puede servir este extracto donde se combinan además otras etiquetas vistas anteriormente.

<p>Verifique su base de datos y usuario accediendo a la nueva base de datos con el nuevo usuario.</p>

<pre><samp>
C:\><kbd>C:\mysql\bin\mysql -u <var>new_user</var> -p<var>new_password</var> <var>new_database</var></kbd>
</samp></pre>

Notas finales


Para la redacción de este artículo he utilizado algunas deficiones y ejemplos que aparecen en el libro HTML y XHTML: La Guía Definitiva, original de la editorial O'Reilly pero traducido al español por Anaya Multimedia.

En los ejemplos expuestos se ha usado el punto de vista de quien codifica la página, por eso se muestra el código fuente necesario para marcar el contenido. Queda a disposición del lector la prueba de dichos ejemplos en su propio navegador para ver cómo se visualizan. Se ha optado por hacerlo de este modo porque no existen reglas fijas de presentación y estas pueden diferir entre diferentes agentes de usuario (navegadores web).

Actualización (2007-01-04):
Sólo un día después de la publicación de este artículo, me encuentro con esta guía de marcado semántico. Para quienes deseen completar esta lectura, se lo recomiendo encarecidamente: se habla también del correcto uso de los elementos más habituales (encabezados, párrafos, listas, ...) y hay más ejemplos sobre la adecuada utilización de las etiquetas de HTML.