Ayer Microsoft hizo pública la versión beta de su apuesta en el mercado de los buscadores: MSN Search. Desde hace ya un tiempo he observado que MSNBot indexa las páginas de este sitio según el testimonio de los logs del servidor. Los planes de MS de lanzar su propia oferta de buscador eran conocidos, pero ya está aquí y merece una mirada con atención.

Estándares

Como es un ejercicio común en estos casos, procedí a validar el HTML y grande ha sido mi sorpresa al encontrar sólo un error, referido por lo demás a una cuestión bastante trivial, un atributo inexistente en HTML.

La portada y las páginas interiores están construídas utilizando XHTML 1.0 estricto y la estructura de los documento está de lujo, ni una sola tabla para diagramar y un uso muy apropiado de los elementos semánticos de HTML.

Finalmente Microsoft está utilizando CSS para diagramar y presentar los contenidos, ya era hora. Y en honor a la verdad, lo está haciendo de un modo elegante y atractivo.

Un detalle notable es el hecho de que la portada se ve muy similar en Internet Explorer y en Mozilla. No puedo ocultar que estoy embobado.

Buscador

Los resultados de búsqueda se presentan de un modo muy similar a Google, con el título de cada documento encontrado con un vínculo, luego un resumen o extracto del contenido y finalmente la URI con un vínculo a una versión en caché. La propia presentación de la cache es bastente similar a la de Google.

Una funcionalidad interesante es el Generador de Búsquedas, una herramienta que facilita la refinación de la búsqueda con opciones avanzadas. Si bien en primer momento no es evidente, lo que hace es agregar criterios adicionales al campo de búsqueda de modo dinámico. El modo en que opera puede resultar algo confuso porque no hay un feedback visual claro de que se hayan agregado los nuevos criterios.

En fin, una primera evaluación rápida indica que se ha considerado lo mejor de la experiencia en el área de los buscadores, la similitud de muchas cosas con Google es notoria, y a eso se han agregado otras características que indican claramente un progreso. Espero tener el tiempo de revisarlo con más detalle para poder enfocarme más a los detalles de la interfaz y el diseño de interacción.

Actualización: el punto más importante en el que me concentré fue el uso de estándares, sin embargo hay otros aspectos relativos al diseño que Paul Scrivens describe perfectamente en MSN Search Home Page.

¿Alguien más notó el cambio en Amazon.com? Aparentemente desde el 22 de Octubre se publicó un nuevo sistema de navegación global diferente del clásico sistema de pestañas. Parece ser que los cambios están siendo presentados a los clientes (he comprado varios libros en Amazon.com) y los usuarios nuevos ven la interfaz tradicional.

Jugando un poco con los parámetros he comprobado que se puede forzar la vista de categorías con esta URI.

Actualización: Aparentemente el mecanismo de despliegue es aleatorio, es decir, se presenta la interfaz nueva a un grupo de usuarios seleccionados al azar, por lo que la URI del párrafo anterior puede no funcionar.

El nuevo sistema presenta sólo dos pestañas, una con la etiqueta Welcome y la otra All Categories. La primera contiene opciones de navegación relacionadas con elementos globales como las tiendas internacionales, productos destacados, etc., en suma, un criterio transversal de contenidos. La segunda no tiene opciones secundarias, pero nos conduce a lo que puede ser el cambio más interesante: un sistema de categorías como el directorio de Yahoo! o Google con todas las áreas de Amazon.com.

El cambio me parece positivo hasta ahora, se observa un sitio más organizado y limpio. La estética del sitio continúa siendo la misma: la paleta de colores y los elementos secundarios son los mismos, el cambio es más bien en la navegación global.

Cabe señalar que el nuevo encabezado de Amazon.com incorporaba hace unos días una interfaz de búsqueda del recientemente lanzado producto de Amazon, A9.com, pero mientras reviso el sitio no puedo encontrarlo, es posible que haya sido removido.

Si te interesa revisar el sitio antiguo para constatar las diferencias, está disponible vía Internet Archive Wayback Machine.

En un Alertbox reciente, Nielsen evidencia la importancia de los estándares en el diseño web:

Users expect 77% of the simpler Web design elements to behave in a certain way. Unfortunately, confusion reigns for many higher-level design issues.

Los estándares se refieren a elementos o funcionalidades comunes utilizados frecuentemente y que por la exposición, uso y finalmente acostumbramiento, los usuarios terminan identificando y utilizando de modo espontáneo, asumiendo naturalmente sus características. Por el contrario, cuando un usuario espera que algo opere de un modo específico y esto no ocurre, se genera confusión y pérdida de confianza.

Estos estándares y convenciones constituyen patrones de diseño, que contribuyen a la generación de modelos mentales respecto a elementos específicos o incluso a tipos de sitios en general. La importancia de los patrones radica en la automatización del uso de las interfaces e interacciones, lo que simplica la realización de tareas y permite que el usuario se concentre en los aspectos más importantes, más que en resolver cómo resolver los problemas más básicos, como lograr completar correctamente una tarea específica.

Como indica Nielsen en el artículo antes citado, el uso de estándares o patrones garantiza que los usuarios se sentirán en control, sabrán qué esperar de una tarea particular, se sentirán cómodos y utilizarán de un modo más apropiado un sitio web.

La lógica detrás de un patrón de interacción está dada por la construcción de modelos mentales, que nos permiten identificar y reconocer fácilmente aquellos elementos que hemos aprendido y asociado a través de la experiencia. En la medida que este proceso se concreta, se eliminan una serie de factores innecesarios, asociados a procesos congnitivos que se traducen en que nos enfrentamos a esquemas similares, conocidos, de resolver un problema. Este proceso nos permite pasar de un mecanismo que podría tomas algunos segundos, a un reconocimiento que ocurre en fracciones de segundos. Esto no es irrelevente si pensamos en que estos segundos de diferencia, y la calidad de la experiencia que ellos constituyen, tienen una relación directa con el éxito de una venta en linea, el envío correcto de un mensaje de contacto para un potencial negocio, la venta de una suscripción para un medio de noticias, etc.

Los patrones en el diseño web son precisamente uno de los aspectos que me interesa cubrir y explorar en EFH. Si el tiempo me acompaña, espero pronto comenzar a publicar temas relacionados con estos patrones. Mientran eso ocurre, los dejo con un conjunto interesante de sitios dedicados a la exploración de patrones en el web:

• Web Design patterns, colección de patrones de Martijn van Welie.
• the Diemen Repository of Interaction Design Patterns, Wiki sobre patrones de interacción.
• UI Patterns and Techniques, colección de patrones de Jenifer Tidwell.
• Widgetopia, proyecto de Christina Wodtke, que aunque no está orientado específicamente a patrones, ofrece interesantes muestras de uso de elementos de interfaz.

En una nota anterior comenté sobre las unidades de medida para fuentes en CSS. En esta oportunidad profundizaremos el tema refiriéndonos particularmente a una unidad, tal vez la menos conocida del grupo: ems.

Cuando se plantea el tema de cómo definir los tamaños del texto usando CSS varias cosas entran en juego. En primer lugar las consideraciones de usabilidad, en relación a la legibilidad del texto y la posibilidad de los usuarios de controlar el tamaño de despliegue para ajustarlo a sus necesidades. Por otro lado, el control sobre el diseño y presentación del sitio, normalmente defendido a dentelladas por los diseñadores.

Poniendo las cosas en perspectiva, lo primero que debemos entender, es que las necesidades del usuario son un requerimiento y no un elemento optativo en el desarrollo de un sitio. La usabilidad y accesibilidad son demandas del usuario y nosotros debemos oirlas.

El diseño debe estar al servicio de estos requerimientos. Punto.

Estas dos perspectivas no son necesariamente contradictorias, y es posible crear sitios accesibles, usables y estéticamente agradables. En esto el control y conocimiento de las herramientas disponibles ayuda mucho, y CSS juega una parte importante.

Con CSS podemos lograr textos con tamaños relativos, es decir, no fijos, modificables por los usuarios utilizando los controles normales del browser (las opciones Text Zoom o Text Size dependiendo del browser). Para ello contamos con tres unidades de medida definidas como relativas:

em

En la práctica, el tamaño por omisión definido en las preferencias del browser. La definición real de un em es el ancho del caracter m según el tamaño de texto actualmente en uso (activo). Esto normalmente se refiere al tamaño del elemento padre, el que contiene a aquél al que nos estamos refiriendo.

ex

ex se refiere a la altura del caracter x respecto al tamaño de texto activo.

px

Para sorpresa de muchos, se considera al píxel como una unidad de medida relativa, esto respecto a diversos dispositivos de visualización. Por ejemplo, un píxel en un PC de escritorio no será del mismo tamaño que en una Palm. Incluso será de tamaño diverso en distintos tipos de monitores.

%

Pese a no estar directamente asociado a los elementos anteriores como unidad de medida, el porcentaje se relaciona siempre con otros valores, como por ejemplo, píxeles. Al definir un porcentaje, se necesita conocer un valor de referencia, por ejemplo, el 10% de 125 píxeles.

Lo que hace especial a em lo podemos resumir en la siguiente lista:

• se trata de una unidad relativa, que se escala proporcionalmente
• que no depende directamente de otros elementos, como los porcentajes
• que no es exclusivo para uso en un medio particular, como pt o px
• que permite un total control al usuario

El problema sobre el control del diseño persistirá si insistimos en desarrollar diseños que requieran de precisión absoluta. La solución es diseñar tomando en cuenta estos factores, y teniendo consciencia de que finalmente y en condiciones más o menos extremas, para un usuario (y para nosotros como responsables de un sitio) es preferible ser capaces de acceder a un contenido, que de ver un diseño agradable, pero quedar impedido de leer la información a la que supuestamente sirve.

Hace unos días comenté el rediseño de Microsoft.com, hoy es el momento de Mozilla.org. No pretendo comparar en iguales categorías al sitio de Microsoft con Mozilla, están en categorías evidentemente diferentes, pero para estos efectos todo juega en contra para Mozilla. Los presupuestos del desarrollador de software más exitoso del planeta y sus alrededores y de una fundación sin fines de lucro no tienen parangón. Sin embargo en Mozilla han logrado lanzar un sitio destacable:

• HTML 4.01 válido
• Las hojas de estilo presentan 1 error y algunas advertencias, algo razonable para un sitio lanzado hace unos minutos.
• El sitio está construído con criterios de accesibilidad, sin sacrificar por ello funcionalidad o diseño
• La imagen de la fundación y los productos, Mozilla Suite, Firefox, Thunderbird presentan ahora un diseño más apropiado y pensado en función de los usuarios en lugar de los desarrolladores, como es frecuente en los proyectos open source.

Todo indica que se está preparando apropiadamente todo para recibir a los visitantes cuando se lance oficialmente la versión 1 de Firefox.