Esta semana en useit.com

Jackob Nielsen responde a una curiosa pregunta. Cuando llegamos a un punto en el que el programa (la web) nos pide confirmación o cancelación ¿En qué orden hemos de poner las opciones?

La pregunta parece un poco chorra a priori, y la explicación es bastante buena. Sin embargo si que me he planteado cosas similares en ocasiones. Sobre todo con la colocación de botones para aceptar/cancelar, guardar/descartar, etc. en las aplicaciones web que tratan con bases de datos.

Es una reflexión interesante.

"Páginas" y "Sitios" web.

Una pregunta frecuente de los alumnos es la diferencia entre sitio web y página web.

A pesar de que en alguna ocasión he entrado en discusiones que no llevan a ninguna parte sobre lo que es y lo que no es una página web, consideramos "página web" a un documento de texto interpretable por el navegador. No considero que un archivo TXT sea una página web, ni que un documento PDF sea una página web, ni que una imagen JPG (o PNG, o GIF o de cualquier otro formato que el navegado entienda) sea una página web. Las páginas web son archivos escritos en uno de los lenguajes destinados a ello: HTML, XHTML y similares. Puntualizaremos que cuando hablo de estos documentos hablo de la información final que le llega al navegador. Obviamente, un documento en cualquier lenguaje de programación con los que trabaje el servidor y que, en última instancia, envia al navegador un documento interpretable despues del procesado de un programa, podemos considerarlo una página web (dinámica, en este caso).

Un sitio web es un conjunto de páginas web que, normalmente, tiene una estructura de hipertexto. Es decir, que se puede navegar entre ellas mediante el uso de vinculos. Hace referencia a una ubicación concreta. El sitio en si

En resumen, una página web es un documento HTML (o cualquier cosa que termine en el envio de un archivo HTML, XHTML o similar al navegador) mientras que un sitio web hace referencia a la página o páginas web que se localizan en una ubicación concreta.

Centrado Vertical (I)

Hace unas semanas un alumno me enseñó un trabajo en el que se producía automáticamente el centrado vertical de un elemento enrelación al tamaño de la ventana. Un análisis detallado del documento (que no funcionaba exactamente igual en todos los navegadores en los que lo testeamos) indicaba que se utilizaba la propiedad de alto con valor porcentual para definir un elemento <TABLE>.
Lo primero que me pasó por la cabeza fue: "Si funciona... ¿porqué no lo estoy usando?". Y pensé en lo de siempre: "No es estandar". Pero el caso es que me mosqueó porque no fui capaz de encontrar ninguna referencia (tampoco busqué exhaustivamente) al asunto.
Luego me di cuenta de que el Dreamweaver no ofrece la posibilidad de cambiar directamente el alto de la tabla mediante la propiedad height...



A ver si tengo tiempo algún día de estos y hago un estudio más exhaustivo sobre el tema.

Esta semana en useit.com

Jakob Nielsen comenta los problemas que genera alinear los elementos de un menú a la derecha.

Realmente interesante. La lectura se realiza de izquierda a derecha, con lo que la alineación a la derecha hace que el seguimiento de los menús sea más dificil para el usuario. Por otra parte, y aplicando lo mismo, recomienda que las palabras más importantes (una o dos) sean las primeras de la línea, par facilitar la comprensión.

Personalmente podríamos plantearnos poner la alineación a la derecha y utilizar sólo una palabra en cada item para simplificar la lectura. Pero la palabra sequiría empezando en la parte izquierda y seguiría siendo molesto de leer.

Guardar archivo de hoja de estilos como...

En las últimas semanas he impartido algunas clases en las que hemos realizado algunos ejercicios paso a paso. Y una de las cosas curiosas que, si bien no me quitaba el sueño porque se me olvidaba al acabar la clase, me mosqueaba cada vez que ocurría era el hecho de encontrarse con que el archivo de estilos que acabamos de asociar resulta llamarse "Sin Título.css" en luar del nombre que hemos escrito. El misterio fue resuelto en cuando tuve un ratito y me puse a comprobarlo. El problema viene con esta ventana:


El tema es que si escribimos el nombre del archivo css que queremos crear en la zona verde, automáticamente se actualiza el campo rojo. Pero si realizamos la operación a la inversa no ocurre lo mismo. Con lo que si sólo establecemos el nombre del archivo CSS en la parte superior y hacemos click en "Guardar", nuestro archivo se llamará "Sin título.css".

No se si es un bug del Dreamweaver CS3 propiamente dicho o no, el caso es que ahí queda el aviso. :D

Posicionamiento de menús

Jakob Nielsen, si no me equivoco, comentaba en uno de sus libros que la mayoría de los usuarios esperan encontrarse en las webs unos esquemas bastante concretos en cuanto a la disposición de la información. Un título en la parte superior, un menú (en el lateral izquierdo si es vertical y en la parte superior si es horizontal) y un área principal en la que se introduzcan los contenidos.

Si bien la distribución habitual puede ser alterada en ocasiones concretas para dar un poco más de versatilidad a los diseños, los resultados pueden ser catastróficos.

¿Y a qué viene esto? El motivo principal es una conversación que tuve con uno de mis alumnos de diseño web en la que analizamos una web que su empresa había contratado. Siguiendo unas nociones básicas de usabilidad, se había planteado el layout de la web de forma que se esperaba que la página web se situara siempre en el centro de la pantalla. El problema era que al calcular el alto del área de visibilidad se había planteado partiendo de alguna suposición incorrecta, quien sabe porqué. Si miramos las recomendaciones de Dreamweaver relacionadas con el área visible en la pantalla con, pongamos, una resolución mínima de 800x600 (Si bien se supone que el 80% de los internautas disponen de resoluciones superiores, se sigue recomendando no olvidarse de esta resolución (http://www.w3schools.com/browsers/browsers_stats.asp)) vemos que el tamaño vertical recomendado es de 420 pixels. En este caso alguien había decidido que si 600 era el alto máximo, con 500 y poco bastaría para la correcta visualización. El resultado... uno de los clientes había llamado a la empresa preguntando por los accesos a la web, dado que el menú le desaparecía por la parte inferior de la pantalla.
La verdad es que cualquier persona con dos dedos de frente, ante la falta de menús, se habría planteado la existencia de contenido en la parte oculta inferior de la ventana, sobre todo porque la barra de desplazamiento de la izquierda nos indicaría que se existe más información. Pero en cuanto a diseño y usabilidad NUNCA debemos asumir nada. Sobre todo en lo que se refiere a sitios comerciales. En este caso un cliente había contactado con la empresa para preguntar por los menús desaparecidos... ¿Cuantos clientes o posibles clientes no habrán hecho la llamada?


A 27 de Abril de 2008 la web de la que hablo es esta:
http://www.vicentegandia.com/

Me consta que la empresa está avisada de este comportamiento y de que lo cambiarán. Y por cierto, también quieren deshacerse de la animación de introducción y la "portada". Una mala práctica de la que hablaremos otro día. :D

Anexo: Otra cosa que está fatal en esa web es el enorme globo rojo que aparece sobre la elección de idioma y sobre el que no se puede hacer click. ¡Terrible!