Un sitio bien diseñado

En la parte I de esta nota, hicimos hincapié en las características más importantes que hacen a un buen diseño. Fundamentalmente, el hecho de que el diseño es un problema que debe ser resuelto antes de generar la primera linea de código, y que el fin del diseño debe ser que la experiencia del usuario al interactuar con nuestro sitio sea óptima: es decir, que nuestros usuarios y clientes consigan sus objetivos con la mayor rapidez y el mayor grado de satisfacción posible.

Lamentablemente, el mundo real dista mucho del mundo ideal. Las posibilidades que brinda hoy Internet, y que brindará por algunos años más, son mucho más limitadas que las promesas que brinda Internet. A eso se suma que la base de hipertexto y las modalidades de despliegue y visualización de sitios Web generan modalidades de lectura e interacción del usuario con la información absolutamente particulares.

Las posibilidades que brinda hoy Internet, y que brindará por algunos años más, son mucho más limitadas que las promesas que brinda Internet.

Internet es a nivel de interacción del usuario un medio completamente nuevo y requiere un formato completamente nuevo.

Se insiste en compararlo con la televisión porque tiene pantalla y con la prensa porque publica textos con fotos. Son comparaciones extremadamente pobres. Si tomamos como ejemplo el cine y la televisión, ambos comparten una cantidad enorme de características que derivan de que ambos son la conjunción de imagen en movimiento y sonido. Sin embargo el formato de los productos cinematográficos es distinto que el de los productos televisivos. El cine tiende a generar productos más extensos que la televisión (del orden de las 2 horas), de un solo episodio en el que se completa el ciclo introducción-desarrollo-cierre. Los usuarios los consumen en un recinto cerrado, a oscuras, sin ningún otro foco de atención que la pantalla y el audio. La televisión produce productos más breves (del orden de los 45 minutos) que se separan en bloques entre los cuales se despliega publicidad. Si el tema se extiende, entonces el producto se puede dividir en episodios. Los usuarios los consumen en ambientes no dedicados, con otros focos de atención activos. Incluisve muchas veces la emisión televisiva es un foco de atención secundario y no primario. Ni hablamos todavía de informativos, video clips, etc. En resumen, dos medios aparentemente iguales presentan formatos completamente distintos. Es imprescindible diseñar sitios que respeten a la vez el formato de Internet y las limitaciones que la tecnología disponible impone a ese formato.

Los criterios de Usabilidad

Una vez que el sitio se pone al aire, podemos llamar Usabilidad a la facilidad con que los usuarios del sitio puedan cumplir con los objetivos que se proponen. El objetivo del diseño es entonces alcanzar el mayor grado de Usabilidad posible.

Podemos llamar Usabilidad a la facilidad con que los usuarios del sitio puedan cumplir con los objetivos que se proponen.

La Usabilidad es extremadamente importante y no es frecuente encontrar en los proyectos referencias a ella. No se trata de que sea fácil de usar, ni que el contenido sea atractivo, ni de que se puedan «hacer muchas cosas». Eso no alcanza: se trata de que los usuarios alcancen sus objetivos, que es mucho más importante.

Si su sitio Web no alcanza un grado suficiente de Usabilidad, sus usuarios no podrán alcanzar sus objetivos, es decir: sus clientes no podrán comprar los productos que necesitan, sus lectores no encontrarán las noticias que buscan y sus empleados no encontrarán la información que tienen que incluir en la propuesta.

Si los usuarios no pueden alcanzar sus objetivos, usted jamás será exitoso, independientemente de lo fascinante del look de su sitio y de lo relevante del contenido. Lo más triste, es que muchas veces, las fallas de Usabilidad pueden ser detectadas y corregidas con un costo bajísimo si se encara el problema del diseño de la forma adecuada.

El tiempo es tirano

El criterio de Usabilidad rey en Internet es el tiempo de descarga de las páginas. Internet es lenta. Por cada usuario VIP con una conexión realmente rápida, hay 100 que tienen anchos de banda lamentables. Esto conduce a la realidad de que Internet es lenta.

Ya en 1968 se estudiaba la relación de la Usabilidad con el tiempo en que reacciona un sistema, en aquel momento trabajando sobre los sistemas centrales con terminales y los tiempos de respuesta. Los resultados son los siguientes:

• Menos de 0.1 segundos: Por debajo de una décima de segundo el usuario percibe funcionamiento instantáneo. Es lo que sucede por ejemplo al digitar en un procesador de texto. La percepción es que la computadora responde instantáneamente cada vez que se presiona una tecla.
• Menos de 1 segundo: Por debajo de un segundo, el usuario percibe que la computadora trabaja o «piensa» para responder al estímulo, pero la interacción es fluida. El usuario percibe la demora, pero mantiene el 100% de atención en la tarea que estaba realizando.
• Menos de 10 segundos: Por debajo de los 10 segundos, la interacción sigue siendo fluida, pero el usuario abre un foco secundario de atención. La atención primaria sigue estando en la tarea que está haciendo, pero durante la espera es muy alta la probabilidad de que preste atención a otra cosa, generando un segundo foco.
• Menos de 1 minuto: A medida que nos alejamos de la marca de los diez segundos, se incrementa la posibilidad de que el usuario genere un nuevo foco de atención y que este se convierta en primario, relegando la tarea que estaba realizando a un segundo plano. Podemos decir que todavía existe un flujo de interacción, pero este es entrecortado con fuerte probabilidad de que se interrumpa definitivamente
• Más de 1 minuto: si los tiempos de respuesta superan el minuto, podemos decir que es imposible mantener un flujo de interacción.

De este estudio puede concluirse que para que un sitio tenga un gran flujo de navegación por parte de los usuarios, debería tener tiempos de respuesta inferiores al segundo. En nuestras latitudes, esto es sencillamente una Utopía. Es necesario entonces tener como norte el escalón siguiente: menos de 10 segundos. Cada página de su sitio debe estar concebida para descargarse en menos de 10 segundos, inclusive si el usuario tuviera una conexión lenta (por ejemplo un ancho de banda real entre 20kbps y 28kbps) Esto no es imposible: Yahoo! se descarga en menos de 8 segundos en una conexión de este tipo. Y esto es una gran herramienta: exija a sus técnicos y diseñadores a que cada página que construyen se descargue en un tiempo no mayor que el doble del que se descarga Yahoo! en cualquier equipo.

Cada página de su sitio debe estar concebida para descargarse en menos de 10 segundos, inclusive si el usuario tuviera una conexión lenta.

Me animo a afirmar que prácticamente cualquier concesión es válida si permite que una página se descargue en menos de 10 segundos. Eliminar un gráfico, bajar la cantidad de colores de un logotipo, cambiar dibujos por textos, eliminar animaciones, son todas decisiones que los diseñadores gráficos odian, pero que son imprescindibles en el mundo de hoy.

El resultado de no tomar en cuenta el problema del tiempo genera sitios Web no navegables. No importa cuanto contenido valioso tenga, cuanta publicidad se haga o cuanto dinero se gaste en hosting y sistemas. Si el sitio es no navegable, el fracaso está asegurado.

A la búsqueda de la obviedad

Usted no tendrá acceso a capacitar a sus usuarios, ni podrá pedirles que lean la ayuda. Probablemente tenga uno o dos minutos en los cuales el usuario decida si su sitio es o no útil para él, y si la decisión es negativa, jamás tenga chance de revertirla. A esto se suma el hecho de que su capacidad de comunicar es mínima y cara. La búsqueda de la obviedad, la capacidad de hacer que las cosas sean obvias cuando se puede, le ayudará a concentrar esa pequeña capacidad de comunicación y capacitación de los usuarios en los temas que realmente importan.

Los links

El comportamiento default de los links es: tener color azul y estar subrayados cuando no fueron visitados, cambiar el color a violeta cuando fueron visitados. Esto es lo obvio. Existirán en cada proyecto un millón de argumentos para eliminar el subrayado, para cambiar el color, o para hacer una enorme serie de modificaciones. Sin embargo, cualquier alteración a este criterio requerirá que el usuario deba darse cuenta del cambio y que gaste unos segundos de esos 2 minutos que dedicará para evaluar nuestro sitio a comprender que los links son blancos y los links visitados son verdes. Si yo tuviera que tomar la decisión, cambiaría todo lo demás, para conservar esos preciosos segundos y poder utilizarlos para un mejor fin que el de comprender un comportamiento no obvio.

En muchas actividades, lo obvio es cursi, o irrelevante, o contraproducen te. En Internet ocurre todo lo contrario.

Otra cosa importante relativa a los links es que el comportamiento obvio es que conduzcan a donde deben conducir. Un link de dice «Diseño: los usuarios al poder (II)» no debe conducir a ningún otro lado que no sea a la página que contiene el artículo. No es válido que conduzca a la home page del sitio, ni a la parte I del artículo, ni a ningún otro lado. Descargar una página lleva tiempo, y no es una gran idea defraudar al usuario alejándose de lo obvio.

Los títulos y titulares

En la prensa es necesario desarrollar titulares que atraigan a los clientes a comprar el periódico. En internet es distinto. Por ejemplo «La desaparición del Príncipe» puede ser un tratado de historia sobre la muerte de algún noble, una nota sobre Enzo Francescoli y el momento en que abandonó el fútbol profesional, o un cuento de hadas para niños. Si se trata de un link a una nota, el usuario no sabrá el contenido hasta que no clickee el link y descargue la página, y con un título tan ambiguo, muy pocos se formarán una expectativa acertada de lo que les espera.

En la prensa es necesario desarrollar titulares que atraigan a los clientes a comprar el periódico. En internet es distinto.

El usuario tiene que ser capaz de generarse una expectativa acertada con la información que dispone en la página actual, el resultado tiene que ser obvio. Si desea mantener el titular, agregue un acápite, un colgado o un subtítulo que incorpore la información necesaria para generar la obviedad. Hay muchos diseñadores que piensan que obligar a los usuarios a navegar mucho para obtener la información es un gran logro, porque generan muchos «page views». Para mí lo único que consiguen es frustrar a los usuarios y que estos no vuelvan nunca más al sitio.

El entorno y la navegación

Para el usuario tiene que ser obvio el entorno o contexto en que se encuentra la página con respecto al sitio y las opciones de navegación que de ella se desprenden. En un libro, la pagina 87 precede a la 88 y sigue a la 86, no hay otra opción. El libro, salvo casos excepcionales como Rayuela de Cortazar, se navega de principio a fin. En un sitio Web, por más definiciones que se hagan en cuanto a la navegación deseada, el camino de navegación lo definirá cada usuario en el momento. Esto se refuerza con los buscadores, tanto externos como internos.

En un sitio Web, por más definiciones que se hagan en cuanto a la navegación deseada, el camino de navegación lo definirá cada usuario en el momento.

Un buscador puede conducir a un usuario a una página muy profunda en el árbol del sitio y que esa sea la puerta de entrada al sitio. Es frecuente encontrar una pagina así, que ni siquiera indica a que sitio pertenece. Es un error. En cada pagina del sitio hay que dotar al usuario de las herramientas para que comprenda dónde está ubicado en ese instante y hacia dónde puede seguir navegando. Y estas herramientas tienen que ser obvias, no pueden requerir explicaciones.

Muchas veces es muy fácil mejorar enormemente la navegabilidad de un sitio, con soluciones extremadamente sencillas. Por ejemplo, la solución llamada Migas de Pan, en alusión a las migas que dejaban Hansel y Grettel en el cuento para recordar el camino sería algo así:

Home >> Productos >> Especificaciones >> Video 3248

En apenas un renglón de texto usted tiene una idea exacta de la profundidad de la página, de la rama del árbol del sitio en la que está inserta y una opción excelente de navegabilidad para ascender a los niveles superiores con un solo click. Complementando esta solución con menúes que den idea de la amplitud en cada nivel se puede dotar al usuario de un marco obvio de navegabilidad que genere una agradable Usabilidad de su sitio.

Los que no pueden

Dado que la renovación de navegadores es lenta, la migración de las tecnologías de comunicación hacia anchos de banda más elevados está lejos, la proliferación de versiones distintas de navegadores y plug-ins y otros factores generan un panorama extremadamente variado de opciones para los equipos de sus clientes, para toda solución siempre existirán «los que no pueden». Los que no pueden bajarlo, los que no pueden instalarlo, los que no pueden leerlo.

Revise las estadísticas de su sitio y verificará que los que no pueden, sumados representan un porcentaje muy importante de sus visitantes. Si suma los que ven la pantalla en 256 colores, a los que utilizan versiones 3.0 anteriores de navegador, a los que leen el correo en modo texto, a los que no tienen instalada una plug-in determinada, a los que no soportan JavaScript, a los que no soportan VisualBasicSript y sigue una larga lista de etcéteras, comprobará que los que no pueden son en general muchos más de los que usted imagina.

Revise las estadísticas de su sitio y verificará que «los que no pueden», representan un porcentaje muy importante de sus visitantes.

Las actividades de diseño gráfico requieren cantidades enormes de memoria y capacidad de procesamiento. En las máquinas de los diseñadores todo se ve perfecto y rápido. Es necesario desde el principio ver los diseños en el entorno en que serán utilizados, si fuera posible en el propio sitio. Y es necesario verlo también en las condiciones de los que no pueden. Vea el sitio con Netscape 3 y con Explorer 3 y descubrirá cuadros negros dónde debrían ir esos botones con un fantástico roll-over, interminables mensajes de error, textos corridos. Véalo desde un equipo Linux y descubrirá otros cambios. Cambie la resolución a 640 x 480 con 256 colores y terminará de horrorizarse

Sólo la utilización de un Font no disponible en el equipo del usuario, puede cambiar completamente el look and feel de la página y con ello estropear totalmente la Usabilidad y la capacidad del usuario de interactuar con el sitio. Un diseñador profesional debería estar más preocupado por estos temas que por el iconito de la búsqueda.

El mito de llamar la atención

Otra característica vinculada a la Usabilidad tiene que ver con la atención de los usuarios. Los publicistas gastan su vida tratando de atraer la atención de los posibles consumidores. Los grandes publicistas lo consiguen y lo hacen de una forma tan eficiente y agradable que recordamos por muchos años con mucho cariño sus piezas publicitarias.

En su sitio Web usted no tiene necesidad de llamar la atención de sus visitantes, tiene la necesidad de mantenerla. Quien está en su sitio es porque conscientemente puso la URL de su sitio o porque clickeó en un link en un buscador u otro sitio que lo condujo a su sitio. Ese usuario ya decidió prestarle atención a su sitio. No hay que llamar su atención, hay que darle lo que vino a buscar de la manera más rápida y eficiente y así hacer que valga para él la pena mantener la atención en nuestro sitio.

En Internet no hay vidriera, no hay zapping. No hay ningún menú de todos los sitios posibles donde llamar la atención, ni siquiera los buscadores. Porque inclusive el zapping recorre una serie limitada de opciones y en ese caso es válida la idea de llamar la atención. Internet es muy distinto. Y como lo más parecido a un comercial televisivo en Internet es una presentación animada, los malos publicistas insisten con incluir presentaciones animadas que «capturen la atención del usuario». Lo único que consiguen es alejar al usuario de su objetivo, y bajar fuertemente el grado de satisfacción que tendrá con el sitio.

En su sitio Web usted no tiene necesidad de llamar la atención de sus visitantes, tiene la necesidad de mantenerla.

Las animaciones en pantalla

Otro problema vinculado a la atención son las animaciones en la pantalla. El hombre desciende del mono, y desde aquellas instancias conserva en su instinto la reacción a lo que se mueve en un entorno estático. Eso le ayudaba a sobrevivir: si se movía una hoja en el arbusto, era que había alguien o algo atrás tratando de comérselo. Nada más básico e instintivo.

Es imposible leer atentamente si hay elementos de la pantalla en constante movimiento. Eso responde a la naturaleza del ser humano. Las animaciones deben ser utilizadas con prudencia, y cuando se utilizan, deben comenzar y terminar, para luego quedar estáticas.

Aprovechar las reglas no escritas

Existen algunas convenciones no escritas sobre navegabilidad. Una de ellas es por ejemplo que en la esquina superior izquierda va el logotipo de la empresa y que está linkeado a la home page. Otra de ellas es que abajo de la página va un menú principal en modo texto y en letra pequeña los créditos, Copyrights, sentencias de privacidad, etc.

Respetar estas reglas no escritas y utilizarlas a nuestro favor, agrega mucho a la Usabilidad del sitio.

Los buscadores

Una buena característica de Usabilidad es incluir un buscador en su sitio. Los hay gratuitos, tanto como servicio así como en la forma de programas o scripts para instalar. Los hay baratos y los hay caros. En general, no hay muchos argumentos para no tener buscador.

Pero no alcanza con poner un buscador. El buscador tiene que contribuir y no restar. Es tan común encontrar buscadores absolutamente impredecibles e incomprensibles en los sitios que asusta.

No busque en toda la Web. Existen sitios especializados y archiconocidos para eso, y sus usuarios seguramente tienen preferencias bien marcadas al respecto. Si quisieran buscar en la Web, seguramente no hubieran entrado en su sitio, hubieran ido directamente al buscador de su preferencia.

No busque en toda la Web. Existen sitios especializados y archiconocidos para eso, y sus usuarios seguramente tienen preferencias bien marcadas al respecto.

La lista de resultados debe ser autoexplicativa. El link no dice nada, es bueno que tenga el título de la página, una descripción corta del contenido, y si fuera posible la linea que contiene la palabra buscada.

Explique el orden de los resultados. Indique claramente como están ordenados los resultados y en caso de que se use un sistema de score combinado para el orden, deje que el usuario acceda a la información sobre como se calcula ese score.

Evite las opciones de lógica booleana y los operadores lógicos. Es bueno brindar opciones, pero lamentablemente, solo los programadores y los filósofos conocen en profundidad la lógica booleana. Unos por necesidad y otros porque la inventó el famoso Aristóteles. Los simples mortales son incapaces de utilizar los operadores and, not, nor, xor, etc. Utilice opciones de menú simples y autoexplicativas, obvias.

Por ejemplo en vez de and se puede utilizar un check box que diga «que contenga todas las palabras» y en vez de or uno que diga «que contenga al menos una de las palabras». Seguramente no es tan flexible como brindar la posibilidad de incluir operadores en el texto de búsqueda, pero tal vez eso al 99% de sus visitantes le tenga sin cuidado.

Permita refinar la búsqueda. Si fuera posible, permita volver a buscar sobre el resultado de una búsqueda. Es el camino más natural para llegar a un resultado. Por supuesto que (primera búsqueda) .and. (segunda búsqueda) provee el mismo resultado, pero la opción de refinar la búsqueda es más intuitiva y obvia.

Yahoo! un diseño contra sensus

Yahoo! como empresa de Internet tiene muchas particularidades. Una de ellas es que hace 3 años que es una empresa rentable. Otra de ellas es que se trata según varias estadísticas, del sitio de mayor tráfico del mundo. Y se podrían listar muchas otras. Resulta muy interesante analizar el diseño de Yahoo! Si usted junta 100 libros acerca de diseño para Internet, probablemente ninguno de ellos contenga recomendaciones que conduzcan a un diseño como el de Yahoo!. Pero la tozuda realidad muestra que el diseño de Yahoo! es excelente.

Yahoo! no llama la atención. La pagina principal es siempre idéntica o casi idéntica. Apenas cambian las noticias que se ven a la derecha de la página. Y desde el comienzo que es casi idéntica.

Yahoo! no tiene animaciones, ni gráficos vistosos, salvo en los avisos publicitarios, y los espacios en Yahoo! se cuentan entre los más caros de la Web. Prácticamente todo está hecho en base a texto y tablas, algunas ocultas y algunas visibles. Los gráficos son de no más de 64 colores en su mayoría. Los íconos son pequeños y de 2 o 4 colores. A veces parece que fueran tacaños en el diseño gráfico.

Yahoo! se ve igual en todos los navegadores. Salvo las pequeñas diferencias de despliegue de un navegador a otro, Yahoo! se ve exactamente igual en cualquier máquina, independientemente del sistema operativo, del navegador, de las plug-ins instaladas y de la versión de Java. Los diseñadores de Yahoo! sencillamente eliminaron todas las características que atentaran contra esta característica, sin piedad. Ninguna virtud o posibilidad los tentó a generar un sitio que interactuará con los usuarios de una forma distinta que la prevista en el diseño original.

Yahoo! es increíblemente rápido. Existen buscadores más rápidos, servicios de noticias más rápidos y en general sitios más rápidos que Yahoo!, pero con 20kbps de ancho de banda Yahoo! descarga cualquiera de sus páginas, en cualquier parte de su sitio en 8 segundos. Con una conexión de 56kbps, el tiempo baja a 5 segundos.

Yahoo! es un sitio extremadament e usable, o dicho de otra forma, con un diseño obsesionado por dar Usabilidad a sus navegantes.

En resumen, Yahoo! es un sitio extremadamente usable, o dicho de otra forma, con un diseño obsesionado por dar Usabilidad a sus navegantes. Sin duda, esa obsesión tiene responsabilidad fundamental a la hora de encontrar las causas del éxito.

Artículos anteriores de esta serie:

• Los objetivos del diseño
• Diseño, los usuarios al poder (I)