• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Usabilidad

Los 7 pecados capitales de la usabilidad web

Sebastián Thüer · 18.11.2009 ·

La usabilidad es un aspecto clave de una página o aplicación web que tiene que ver con la claridad y elegancia con la cual se diseña la interacción entre la persona y el sistema. Muchos veces los estudios de usabilidad son campo exclusivo de especialistas que realizan análisis heurísticos, paneles con usuarios y a partir de los resultados diagnostican problemas y sugieren mejoras a implementar.

Sin embargo, no hace falta nada de esto para desterrar algunas prácticas totalmente obsoletas que atentan contra la experiencia del usuario en una página web. Estos 7 pecados de la usabilidad web son una lista de estas prácticas e indican que tu sitio necesita urgentemente una revisión. El problema no es tanto cometer alguna de estas faltas, su presencia indica que con toda seguridad habrá muchas otras cuestiones a revisar.

1. Tener una introducción al sitio

usabilidad-1-intro

Cuando encargaste la página web probablemente te lo dijeron pero no le diste importancia. Por alguna misteriosa razón querías que tu sitio tuviera una bonita animación en Flash como primera página ¿Qué la gente la aburre? Entonces agregamos el botón para saltar la presentación.

Seguramente sea el botón que más presionan los usuarios en tu sitio. Y con toda certeza sea la página más odiada por aquellos que tienen que acceder a tu web repetidamente. Es como ver una película con publicidad cuando está la opción de verla sin interrupciones. Una animación puede ser bonita la primera o segunda vez, luego cansa y termina por fastidiar aunque merezca un Oscar por el trabajo que tiene.

Cuando la comunicación tiende a circular en tweets de 140 caracteres hacerle perder el tiempo a la gente mirando una página innencesaria es un anacronismo. Hasta Google ofrece la posibilidad de saltarla porque entiende que una introducción en Flash no representa un resultado de búsqueda relevante. Y tiene razón.

2. Poblar tu página de animaciones

usabilidad-2-animado

El diseño y la gráfica tiene sus leyes para que la interacción con un documento visual resulte agradable. La animación también cuenta con sus propias reglas y muchas las veces resulta difícil su convivencia. Hay que trabajar mucho para animar dos o más objetos en una página y hacer que el conjunto sea agradable para el usuario. Y como el tiempo cuesta dinero existe una alta probabilidad de que si tu página tiene más de un elemento animado se vea mal.

Comencemos por el principio ¿Animar para qué? Una transición de fotografías puede aportar valor porque permite visualizar información dentro de un mismo espacio de una manera sencilla. Pero si tu logo está fijo o animado en 3D me da exactamente lo mismo. Si hay un personaje saltarín, un puntero de mouse que suelta estrellas o el insufrible icono de correo que da vueltas a lo loco molestan, distraen y terminan por entorpecen la experiencia del usuario.

Un espacio prolijo y ordenado donde todos los elementos están bajo control y sin ser animados por un espíritu superior que les insulfa vida es un deleite para la vista y un relax para los sentidos.

3. Texto subrayado que no es enlace

usabilidad-3-subrayado

El texto subrayado es feo. Habiendo tantos recursos gráficos (color, tamaño, negrita, itálica) querer remarcar una palabra agregando el subrayado como si se tratara de un resumen para la escuela es volver a la época de la máquina de escribir.

Pero hay otro problema más grave: cuando se crearon las páginas web a alguien le pareció que era una forma interesante para señalar el hipertexto. Nada más que agregar. El subrayado es para los enlaces y punto.

4. Optimizado para…

usabilidad-4-optimizado

En una época el oficio de diseñador web era duro. Era una profesión nueva, había poca información y encima Microsoft y Netscape se peleaban para ver quién lograba imponer sus estándares. Crear una página bonita que se viese bien en todos lados era un poco más difícil que ahora por lo cual los sitios se poblaron de carteles anunciando que había unas condiciones óptimas para visualizarlo: con el navegador fulanito y la resolución de pantalla pepito.

Pero el mundo cambio, la industria y los desarrolladores se dieron cuenta de que era mejor  seguir los estándares del W3C antes que pelearse  y gracias a ello hoy vivimos en un ambiente un poco más ordenado. Por eso, las páginas web ya se hacen para todo el mundo y no para quienes tienen tal o cual requerimiento. Seguir manteniendo el cartel dichoso cartelito o (peor) hacer que el sitio funciona solo bajo ciertas condiciones es como colocar una letrero en una ruta que diga «Optimizada para el Ford Fiesta».

5. Tiempo de carga elevado

usabilidad-5-tiempo

La paciencia es una virtud, pero en la web es un milagro. La velocidad de respuesta de un sitio es un factor crítico en la experiencia del usuario. Más de 2 segundos con la pantalla en blanco es una invitación a retirarse del sitio o un preanuncio de las penurias que tendremos para navegar decentemente. Y por si fuera poco, próximamente Google tendrá en cuenta la velocidad de una web para mostrar sus resultados de búsqueda.

Hay muchos factores involucrados en la velocidad de la página pero hay dos sobre los que se pueden actuar. El primero no es más que tomar una buena decisión: contratar un hosting decente y no dejarte seducir por precios ridículos o películas de ciencia ficción como la banda ancha ilimitada. El segundo es trabajo para el diseñador o desarrollador que tiene que optimizar el rendimiento de la página web.

Hay veces en que por las características de la página es imposible ofrecer un tiempo de respuesta bajo como consultas complejas a una base de datos, accesos imágenes y archivos multimedia de gran tamaño o mucho javascript. En este caso, y sólamente cuando sea imposible mejorar la velocidad de la página, un simple cartel de «Cargando» nos da unos segundos extra de benevolencia por parte del usuario (siempre y cuando lo que viene después justifique el tiempo invertido).

6. Ir al inicio y volver

usabilidad-6-atras

Enredarse en un laberinto puede ser divertido, pero en una web es frustrante. Los usuarios saben de memoria la solución para ello: volver a atrás o ir al inicio. El botón volver del navegador es una salida de emergencia fácil, intuitiva y que resuelve la mayor parte de los problemas: si llego a un lugar que no me gusta siempre tengo la opción de regresar para elegir otro camino. Obstruir esta salida (con javascript, por ejemplo) es inadmisible.

El otro gran recurso que incorporan los usuarios cuando están confundidos es regresar al inicio de la página. A veces los usuarios llegan desde Google a una página en particular pero no logran hacerse una idea correcta de cómo está organizada la web. Suponen que la home mostrará lo más importante y les ayudará a entender cómo está organizada la información. Por eso es esencial tener a mano una manera clara e inconfundible de cargar la página principal del sitio. Y la manera más clara es tener un botón o texto que diga «Inicio».

7. Enlaces rotos

usabilidad-7-links

Los enlaces son la columna vertebral de un sitio. Conectan unidades de información mediante palabras clave, botones, imágenes o un menú. Una página huérfana que no enlaza con el sitio es una invitación sin fecha ni lugar. Igual un enlace que lleva a ninguna parte.

La mejor página de error es la que no existe, pero como a veces en sitios muy grandes no podemos asegurar que el 100% de los enlaces funciones hay algunos recursos para crear páginas de error personalizada. Si hay un mensaje de error, que al menos sea personalizado y fácil de comprender.

Buenas prácticas para mejorar la velocidad de tus sitios web

Sebastián Thüer · 19.10.2009 ·

speed
El tiempo de carga de un sitio es uno de los elementos más críticos para la experiencia de usuario. Y también uno de los temas técnicamente más complejos. Muchas veces los diseñadores web piensan que no se puede hacer mucho a respecto excepto contratar un hosting mejor o reducir el  tamaño de los elementos multimedia tanto como sea posible.

Error: Existen buenas prácticas que se pueden implementar para favorecer un mejor aprovechamiento de los recursos disponibles. No son complicadas de implementar y para hacerlo solo necesitamos conocerlas y hacernos con el hábito La mayor parte de los consejos han sido expuestos en Best Practices for Speeding Up Your Web Site, un excelente artículo del equipo de desarrollo de Yahoo donde analizan la forma de optimizar los tiempos de carga. Esta síntesis también incorpora mi experiencia profesional

1. Medir y analizar

La página web del periódico Clarín analizada con YSlow
La página web del periódico Clarín analizada con YSlow

Lo primero que tenemos que hacer para saber si podemos mejorar los tiempos de carga de nuestra página web es medir. Existen dos herramientas específicas para ello: YSlow de Yahoo y Page Speed de Google. Ambas funcionan sobre Firefox y requiern tener instalado Firebug, uno conocido plugin para Firefox que utilizan los desarrolladores para detectar errores y problemas en una página.

Al ejecutar cualquiera de estas herramientas en nuestra página obtendremos un informe donde nos indicarán aquellos aspectos que debemos mejorar para acelerar la carga de nuestras páginas.  Este es nuestro punto de partida para comenzar a mejorar.

2. Minimizar las peticiones al servidor

Foto por Whrelf Siemens (sxc.hu)
Foto por Whrelf Siemens (sxc.hu)

Es la clave para obtener sitios más rápidos. La mayor parte del tiempo los usuarios están esperando que se descargue contenido: la propia página web pero también los archivos que tiene vinculados como hojas de estilo, JavaScript, imágenes, animaciones en Flash. La especificación del protocolo HTTP 1.1 establece que cada navegador limite el número de descargas simultáneas a 2. Por lo tanto, es mejor unificar todas las hojas de estilo en un solo archivo y hacer lo mismo con JavaScript.

En cuanto a las imágenes, una técnica interesante es usar CSS Sprites que consiste básicamente en crear una única imagen con todos los gráficos y luego trabajar mediante CSS con el posicionamiento. Por ejemplo, puedo crear la siguiente imagen para un menú:

speed-file

Como vemos están todas las opciones y hay dos versiones: una normal y otra para cuando el usuario coloca el cursor encima. Mediante CSS simplemente podemos indicarle que desplace la imagen hacia arriba. Si te interesa esta técnica concer más sobre esta técnica de CSS Sprites te recomiendo leer “CSS Sprites: Image Slicing’s Kiss of Death” en A List Apart.

3. Optimizar el tamaño de tus archivos

ruler size
Seguramente el código que generás para una página web está hecho a tu medida para que puedas comprenderlo fácilmente. De esta forma el desarrollo y las actualizaciones son mucho más fáciles. Una idea interesante es crear una copia optimizada de estos archivos y utilizarla en lugar de los originales. Lo de optimizar tiene dos partes. Por un lado revisar el código para ver si no hay información redundante. Ejemplo: En lugar de esto:

H2 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.8em;
color: #cc0000;
}

H3 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.4em;
color: #cc0000;
}

H4 {
Font-family: Arial, Helvetica, sans-serif;
Font-weight: bold;
Font-size: 1.2em;
color: #00000;
}

¿Por qué no definir para las 3 etiquetas todo lo que tienen en común y luego modificar el tamaño y el color que es lo único que varía?

H2,H3,H4 {
font:bold  1.8em Arial, Helvetica, sans-serif;
color: #cc000;
}

H3 {
font-size: 1.4em
}

H4 {
font-size: 1.2em;
color: #000000;
}

La otra parte es comprimir el código eliminando comentarios, tabulaciones, espacios y otros elementos que el navegador no necesita par interpretar correctamente la página. Esto es especialmente importante para archivos externos como los JavaScript o CSS. Hay dos herramientas conocidas para hacer esto: YUI Compressor y JSMIN.

4. Emplear de forma inteligente la caché

idea

El protocolo HTTP 1.1 incorpora una serie de etiquetas que permiten especificar si el contenido de una página puede alojarse en la memoria caché o no.  Como sabemos, el contenido cacheado se lee más rápido porque se consulta una vez y luego queda alojado en la memoria que reserva el navegador.

Si tenemos una página estática que no se va a modificar, lo más lógico sería establecer que se pueda cachear el contenido de forma indeterminada. Lo hacemos con la siguiente etiqueta:


Si sabemos que el contenido se va a mantener sin cambios hasta una cierta fecha podemos especificar la “fecha de vencimiento” de la página:


Esto significa que el contenido de la página está vigente hasta las 10 de la mañana del 26 de octubre de 2009. Un dato importante: el día y hora se especifica en GMT, es decir habrá que ajustar el valor según la diferencia que tengamos en el uso horario con el meridiano de Greenwich. El tema del manejo de caché es muy interesante y realmente útil si tu web tiene usuarios que retornan a ella. Podés leer la especificación del HTTP 1.1 a respecto o visitar Web-Caching.com, donde hay un buen tutorial sobre cómo funciona el tema. Otro buen tutorial de caché lo encontrás Mnot.net.

5. Activar GZIP

Foto por Ale Paiva (sxc.hu)
Foto por Ale Paiva (sxc.hu)

Según las mediciones de Yahoo el 90% del tráfico de Internet se realiza a través de navegadores que soportan la compresión de datos. GZIP es el formato más conocido y extendido para ello. Este tema se maneja directamente en la configuración del servidor.

Es posible establecer qué tipo de archivos se enviarán comprimidos y para evitar problemas lo mejor es limitar GZIP solo a los archivos que contengan texto: HTML, CSS y Javascript, por ejemplo. Aplicar GZIP a una imagen JPG o un documento PDF puede producir dos efectos no deseados: incrementar el consumo de CPU del servidor y terminar incrementando el tamaño final del archivo.

6. Usar archivos externos (¡y ubicarlos bien!)

files

Lo primero es algo elemental: el código JavaScript y CSS de una página debe estar en archivos externos. Hay un mejor rendimiento porque el archivo se aloja en la caché y por lo tanto se descarga una sola vez. Además, es mucho más sencillo hacer un mantenimiento y modificamos los cambios en un solo lugar.

El otro tema es ubicarlos correctamente. Los desarrolladores de Yahoo han hecho una serie de test y el mejor rendimiento se obtiene ubicando el CSS al comienzo y el JavaScript al final. Siempre que sea posible hay que hacer esto. Al ubicar el CSS dentro del HEAD de la página permitimos que la página se pueda construir de forma progresiva a medida que se descarga el contenido. Es bastante desagradable comenzar a leer un texto y que cambie su formato porque el CSS que lo modifica está al final de la página.

Con JavaScript sucede al revés. Mientras se descarga un archivo JavaScript no se procesa otra petición, por lo cual lo más óptimo resulta ubicarlos al final una vez que se descargó el resto del contenido de la página. Esto no siempre es posible ya que muchas veces se requiere inicializar algunos elementos al inicio del documento, especialmente se va a escribir una parte de la página web utilizando document.write. Pero siempre que sea posible la opción de cargar el JavaScript al final es preferible. Y como vimos en el apartado sobre minimizar las peticiones al servidor, mejor unificar todo el código en un único archivo.

6. No recargar tu servidor

servidor

La elección de un hosting adecuado es una tarea que no debe desvalorarse. Hay que invertir tiempo, organizarse y tener algunos conocimientos técnicos para realizar una buena decisión. Pero a pesar de todo puede que tu servidor te esté quedando chico porque el tráfico siguió creciendo pero los recursos disponibles no.

Una alernativa más o menos rápida es aprovechar los diferentes servicios de hosting de imágenes y video que hay disponibles como Flickr, YouTube u otros. El video particularmente consume mucho ancho de banda y si nuestro hosting no es potente mejor alojarlo en otro lado.

Otra opción a considerar es utilizar la CDN de Google que incluye algunas librerías de uso frecuente como jQuery, Prototype o inclusive la Yahoo User Interface Library (YUI). Una Content Delivery Network o CDN es una red distribuida de computadoras con la misma información que es ofrecida por el servidor más cercano al usuario. Además, está la posibilidad el use algún servicio de Google con lo cual alguna de estas librerías estarán en la caché de su navegador.

Existen soluciones CDN profesionales como Amazon S3/Cloud Front, Akamai o EdgeCast Networks pero en general son muy costosas para un sitio web normal.

Otra técnica interesante para mejorar el rendimiento es usar subdominios para alojar algunas partes de tu sitio como lo explican en Maestros del Web. Como un servidor puede responder a un número limitado de peticiones al mismo tiempo una posibilidad es desviar parte del tráfico a otro servidor. La forma más sencilla es emplear un subdomino para el contenido estático como pueden ser imágenes o código JavaScript. Pero antes de meter mano esto lo mejor es hablar con la empresa que te proporciona el hosting y verificar que podés hacer esto.

Conclusión

Con el crecimiento de las conexiones de banda ancha también ha crecido la complejidad de los sitios web y el tamaño de las páginas. No hay que olvidar que la velocidad es un elemento fundamental en la experiencia del usuario y por lo tanto cualquier proceso de rediseño o mejora debe incluir mejoras en este apartado.

Más allá de contar con un buen servicio de hosting adecuado al tráfico y las necesidades del sitio hay algunos aspectos concretos sobre el cual los diseñadores web pueden trabajar para obtener un mejor rendimiento de sus páginas. El primer paso es medir el rendimiento de su sitio web con herramientas como YSpeed o PageSlow. Y a partir de allí implementar las técnicas apropiadas que te permitan aprovechar al máximo tu servidor como eliminar el número de conexiones simultáneas, reducir el tamaño de los archivos, implementar la compresión de datos, emplear con inteligencia la caché del navegador y aprovechar los recursos que ofrecen las grandes empresas especialmente para archivos de gran tamaño como videos.

Y si todo esto no alcanza es hora de estudiar más, contratar un hosting mejor o consultar con un especialista.

10 consejos prácticos de usabilidad para diseñadores web

Sebastián Thüer · 30.09.2009 ·

10 consejos prácticos de usabilidad para diseñadores web
10 consejos prácticos de usabilidad para diseñadores web.

Smashing Magazine ha publicado una lista increíblemente útil con 10 consejos prácticos de usabilidad para diseñadores web. Muchas veces he visto estudios de eyetracking o conclusiones de cuestionarios de usabilidad pero no siempre los resultados obtenidos son generalizables. Pero en este caso es diferente.

Dmitry Fadeyev, del excelente blog Usability Post, hace una lista donde propone una serie de acciones concretas para mejorar la usabilidad de cualquier página web. Aquí va el listado en cuestión con algunos breves comentarios:

1. Las etiquetas de los campos, mejor arriba.

Según un estudio de UX Matters el mejor lugar para colocar la etiqueta es arriba del propio campo. La mayoría de los formularios las sitúa a la izquierda, pero parece ser que el recorrido natural es leer un formulario de arriba hacia abajo.

2. Hacer foco en las caras.

Otro  estudio: los usuarios centran su atención sobre los rostros de las fotografías, según informa Usable World. Por eso es importante hacer que la dirección de la mirada se relacione con el contenido de la página y así desviar la mirada del usuario hacia el titular o texto que nos interesa.

3. La calidad del diseño es un indicador de credibilidad.

Simple, contundente y casi de sentido común: el diseño de calidad inspira confianza. Hay varios estudios que así lo indican y (1, 2 y 3). Recuerdo que hace bastante tiempo leí un estudio sobre la credibilidad de la prensa y afirmaban que errores aparentemente intrascendentes -como un error tipográfico, por ejemplo- terminan por afectar la credibilidad del medio. No hay razón para pensar algo distinto de la web: una empresa que comunica su producto o servicio con claridad está un paso por delante de quien conserva un diseño confuso.

4. Los usuarios no hacen scroll.

En el primer libro de usabilidad que leí uno de los aspectos que más se comentaba era aprovechar la parte superior de la página y colocar allí la información esencial del sitio ¿La razón? Muchos usuarios (cerca del 70%) no se molesta en hacer scroll para descubrir si debajo hay algo interesante. Algunos han malinterpretado esto y abarrotaron la parte superior de información. Sin embargo, la idea es ubicar aquí sólo lo indispensable de manera clara y legible. Fadeyev propone tres elementos: nombre del sitio, proposición de valor (value proposition) y enlaces para navegar las principales secciones.

5. El azul es el mejor color para los enlaces.

Siempre me pareció demasiado categórica esta afirmación pero tengo que aceptar que cualquier usuario que haya navegado un par de veces por la web reconoce fácilmente el texto azul y subrayado como un enlace. Google lo sigue haciendo y si no existe ningún criterio estético que justifique hacer lo contrario, mejor dejarlo así.

6. Cajas de búsqueda de 27 caracteres.

Tener un campo de búsqueda amplio ayuda visualizar nuestra consulta al buscador sin tener que desplazarnos. Según un estudio en promedio las cajas de búsqueda tienen 18 caracteres pero la longitud de la consulta es de 27. Recientemente también Google aumentó el tamaño de su caja de búsqueda.

7. Los espacios blanco mejoran la comprensión.

Todo diseñador conoce la importancia de un adecuado balance y contraste visual. Los blancos son zonas de descanso visual y constituyen el elemento visual más sencillo y claro para separar áreas.

8. El testing de usabilidad no necesita muchos usuarios.

Cuando pensamos en estudios de usabilidad tal vez tengamos en mente los criterios de la estadística para seleccionar una muestra de nuestro universo. Sin embargo, según un estudio de Nielsen el 85% de los problemas de usabilidad se pueden diagnosticar con un pequeño grupo de no más de 15 usuarios.

9. Las páginas de productos con información ayudan a destacarte.

Con la premisa de que los usuarios no leen en pantalla muchos sitios obvian información importante que es necesaria para la toma decisiones. Sin bombardear al usuario de datos técnicos o jerga específica, hay que procurar brindar toda la inforamación relevante sobre un producto o servicio de manera digerible. La página del iPod lo hace muy bien, por ejemplo.

10. Casi todos los usuarios son ciegos a los avisos.

La peor manera de promocionar algo en tu propia página es crear un banner. La mayoría de los usuarios ignora esta información y directamente no mira esta zonas de la página. Mejor emplear un formato diferente y usar recursos más creativos.

  • Si te gustó el listado y querés conocer más detalles te recomiendo el post original que además incluye un pequeño bonus:  10 Useful Usability Findings and Guidelines

¿Videoop, un reemplazo para el captcha?

Sebastián Thüer · 07.04.2009 ·

Siempre me ha parecido que el captcha es uno de los sistemas de seguridad más pobres que se han desarrollado. Básicamente, consiste en pedir al usuario que ingrese una combinación de caracteres -que muchas veces están distorsionados o sobre fondos confusos- para verificar que se trata de una persona y no de un sistema automático que intenta enviar spam.

Como sistema de seguridad, el captcha tienes dos problemas:

  1. Los robots de spam han aprendido a saltárselo.
  2. Molesta a los usuarios.

Videoop propone una interesante alternativa al sistema cambiando los caracteres por fotografías y pidiendo al usuario que señale aquella que cumpla determinada características. Por ejemplo algo así: [Leer más…] acerca de ¿Videoop, un reemplazo para el captcha?

21 recursos para tus páginas de error 404 personalizadas

Sebastián Thüer · 06.04.2009 ·

error 404

Hacer un par de días fue 4 de Abril o 4.04, una fecha curiosa para los desarrolladores web que recuerda el código de error 404 que devuelve un servidor al no encontrar un recurso. El error 404 es una de las páginas más odiadas por los usuarios porque significa que el webmaster ha puesto mal un enlace o algo ha fallado al intentar acceder a un recurso web.

Tiempo atrás había comentado la forma de crear páginas de error personalizadas con un widget de Google. Es una de las opciones posibles porque hoy existen muchas herramientas para hacerlo. Además de darle un toque profesional al diseño, una página de error personalizada puede ser una oportunidad interesante para generar algún tipo de complicidad con el usuario. Todo depende del público al que nos dirigimos y de las características del propio sitio.

Para estar a tono con la fecha, aquí dejo una lista con distintos recursos para tener una página de error más profesional, algunos ejemplos de inspiración y también un par de curiosidades. [Leer más…] acerca de 21 recursos para tus páginas de error 404 personalizadas

  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Páginas intermedias omitidas …
  • Página 7
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder