La vida secreta de las ligas

Por estos días se llevó a cabo la conferencia An Event Apart que reúne a muchos de los mejores desarrolladores y diseñadores del mundo web para compartir sus experiencias, mejores prácticas y opiniones sobre hacia donde va todo esto.

Jeremy Keith ha estado blogueando en vivo varias de las pláticas, y esta que dio Jared Spool me ha parecido de las mejores opiniones que se han expresado en torno al web. Tanto, que voy a hacer algo que casi nunca hago: traducir. Sé que es la percepción de Jeremy de lo que se habló, pero me parece un documento imperdible para cualquiera que se dedique o se quiera dedicar seriamente a la web.

Puedes ver el original en el sitio de Jeremy, así como sus transcripciones de otras charlas.

La charla se llama “La vida secreta de las ligas”. Comienza hablando de una de las científicas más prometedoras de los Estados Unidos: Lisa Simpson. Un día se le cayó un diente, lo puso en un tazón y después, cuando lo examinó bajo el microscopio, descubrió a una civilización dedicada a lo suyo, todos los ciudadanos con sus vidas íntimas.

El web es así.

Justo antes de que el gobierno estuviera por cerrar por falta de fondos, Jared estaba viendo las noticias y la manera en que actualizaban sus ligas. Jared sugiere que la organización de CNN debería ser así:

  1. La noticia más importante.
  2. La segunda noticia más importante.
  3. La tercera noticia más importante.
  4. Una noticia irrelevante pero entretenida.
  5. La nota sobre Charlie Sheen.

    Pero las cosas no funcionan así. Es el contenido de las ligas lo que determina su importancia. La vida secreta de las ligas consiste en llevar los visitantes hacia su contenido.

    Comparen el viejo diseño de CNN con el nuevo. El diseño visual es diferente, pero la esencia subyacente es la misma. Las ligas funcionan de la misma manera.

    Todos los sitios de noticias reportaban sobre el inminente cierre del gobierno, con ligas que decían cosas diferentes pero hacían la misma cosa.

    Jared ha estado trabajando en la web desde 1995. Todo este tiempo se la ha pasado observando la manera en que los usuarios usan los sitios. El patrón que ha visto es que el contenido se comunica con el usuario a través de las ligas. Todo gira alrededor de las ligas. Son la esencia de la comunicación.

    Esto nos lleva hasta una teoría que se manejaba en el Xerox PARC: si hubiera que modelar el comportamiento de los usuarios cuando buscan información sería muy similar al de un zorro siguiendo un rastro. Los usuarion son informívaros.

    Esto lo podemos ver en sitios de educación. El contenido puede ser diferente pero las ligas son las mismas.

    Todos hemos sufrido la batalla del dueño del sitio, que quiere darle prioridad al contenido en que los usuarios no tienen interés.

    El sitio de Walgreens es un ejemplo interesante. Una quinta parte de los visitantes siguen la liga de Fotos, 16% se van a la búsqueda. La tercera liga más importante es la de reordenar prescripciones. La cuarta es la liga de la farmacia. La quinta es la de buscar tiendas físicas. Estas cinco ligas suman el 59% del tráfico total, pero sólo ocupan 3.8% de la página.

    Esto viola la Ley de Fitts:

    La velocidad a la que un usuario puede encontrar su objetivo es proporcional al tamaño del blanco e indirectamente proporcional a la distancia de ese blanco

    Básicamente, mientras más grande y más cerca esté, más fácil de atinarle. El sitio de Walgreens viola esto. Claro, se vería muy feo si la liga para Fotos ocupara la quinta parte de la página, pero el punto es este: hay un montón de cosas que el negocio le enjareta al usuario.

    Otro ejemplo de la Ley de Fitts son esos enormes anuncios que aparecen de repente con unos botones de “Cerrar” muy pequeños.

    Debes llevar a tus usuarios hacia su objetivo deseado. Dales ligas que comuniquen el rastro de lo que buscan de manera comprensible. Haz que la distribución de tu sitio refleje los deseos del usuario.

    Volvamos a un sitio educacional: La Estatal de Ohio. La gente llega a un sitio por una variedad de razones. Mucha gente no va simplemente a ver como luce (excepto nosotros). La gente va a al sitio de la Estatal de Ohio para informarse sobre cursos y horarios. El texto de estas ligas se llaman palabras detonantes: inician una acción del usuario. Cuando se hace correctamente, las palabras detonantes llevan al usuario a su meta deseada.

    Es difícil saber cuando has dejado un buen rastro de información. Pero es fácil saber cuando ese rastro es malo. El comportamiento de los usuarios te lo hará saber: usan el botón para regresar, saltan de página en página y usan la búsqueda.

    Jared ha visto los mismos patrones en cientos de sitios que ha visto como usa la gente. Tomaban todas las series de clics que tuvieron éxito y todas las que fallaron. Durante 15 años ha habido una tasa constante de 58% de fallas. Es muy impactante.

    Uno de los patrones que emergen de las series de clics que fallan es la presencia del botón para regresar. Si un usuario lo aprieta la tasa de fallas para esa serie de clics aumenta al 80%. Si el usuario lo usa dos veces, sube al 98%.

    El botón para regresar es el botón de la muerte.

    El usuario usa el botón para regresar cuando pierden el rastro, igual que un zorro volviendo sobre sus pasos. Pero los zorros tienen éxito porque los conejos son estúpidos y regresan a donde viven y comen. Así que el zorro puede regresar a ese lugar y esperarlo. Los usuarios regresan a la página anterior con la esperanza que haya cambiado de algún modo.

    Pon atención al botón de regresar. El usuario te está diciendo que ha perdido el rastro.

    Otro comportamiento es saltar, de atrás a adelante en una página de “galería” con una lista de ligas a esas páginas. Los saltos tienen una tasa de falla de 89%. Existe el mito que en sitios de catálogos que a los usuarios les gusta saltar para comparar productos, pero no es verdad. Mientras más saltos es menos probable que el usuario encuentre lo que busca y haga la compra.

    Los usuarios rastrean una página buscando las palabras detonantes. Si la encuentran le hacen clic pero si no comenzarán a buscar. Así funciona en 99% de los sitios, Amazon es una excepción. Y eso porque Amazon ha hecho un gran trabajo enseñando a los usuarios que en la página inicial no hay absolutamente nada útil.

    Algunos sitios tratan de imitar a Google y ponen nada más una caja de búsqueda. No hagas eso.

    Un nombre más adecuado para la caja de búsqueda sería ITPL: Inventa Tu Propia Liga. ¿Qué es lo que la gente escribe en esta caja? ¡Palabras detonantes!

    Consejo: Tus bitácoras de búsqueda están completamente llenos de palabras detonantes. ¿Los has revisado últimamente? Los usuarios te están diciendo cuales deberían ser esas palabras detonantes. Si sigues de donde vienen las búsquedas incluso sabrás en que páginas debes poner esas palabras detonantes.

    Lo más importante es entender que la gente no quiere hacer una búsqueda. Hay un mito que dice que a algunas personas les gusta buscar. Es el diseño del sitio lo que los obliga a buscar. La tasa de falla para una búsqueda es 70%.

    Jared imagina un experimento que se llama “experimento de la leche en el Super 7”. Imaginemos que a alguien se le acaba la leche. Los llevamos al Super 7 y les damos dinero para comprar leche. En el 100% de los casos debería haber un compra de leche.

    Eso es lo que Jared hacer con los sitios. Le da a la gente dinero para comprar un producto, los lleva al sitio y les pide que compren un producto. Idealmente la tasa de compra debe ser de 100%. Pero aún el sitio con mejor desempeño -The Gap- obtuvo apenas 66%. El peor nada más 6%.

    La variable más importante que contribuyó a este patrón fue el número de páginas visitadas por compra. En Gap.com se realizaron compras a razón de 11.9 páginas. Los peores sitios tuvieron 51 páginas por compra. ¿Y sabes qué patrones vieron en los peores? Uso del botón para regresar, saltos, y búsqueda.

    Dale a los usuarios lo que quieren. Páginas que nosotros diríamos que están abarrotadas, no lo están para un el usuario si ese es el contenido que quieren. El revoltijo es subjetivo dependiendo de cuanto te interesa el contenido.

    Es difícil mostrar buenos ejemplos del rastro de información porque no estmos buscando algo específico. El buen diseño es invisible. Uno no nota el aire acondicionado cuando está bien ajustado, sólo cuando está muy frío o muy caliente. No notamos el buen diseño.

    Las ligas viven en secreto para verse bien y seguirse viendo como ligas. Hace tiempo existía la creencia que las ligas debían ser azules y subrayadas. Nuestra elección no pudo haber sido peor. ¿Quién lo decidió? No fueron diseñadores. Fueron astrofísicos en el CERN. Sucede que el azul es el color más difícil de percibir. Los hombres comienzan a perder la habilidad para verlo alrededor de los 40 años. Las mujeres a los 55 porque son mejores. Y el subrayado altera la geometría de la palabra, haciendo la lectura más lenta.

    Afortunadamente hemos avanzado y ahora podemos tener “ligas de color”. Pero a veces vamos demasiado lejos, como el LA Times, en el que es muy difícil sabes que es una liga y que no. Los usuarios tienen que mover el ratón de un lado para otro para ver si el navegador les enseña el dedo.

    Usa un vocabulario consistente. Muestra claramente que ligas llevan a una página diferente y cuales producen una acción en la misma página.

    Confundimos a los usuarios con cosas que parecen ligas pero no lo son.

    Las ligas viven secretamente para hacer lo que el usuario espera.

    Crea tus ligas sabiamente. No pongas ligas a artículos relacionados en la mitad del artículo que alguien está leyendo.

    No uses la navegación de carne misteriosa. Los usuarios no mueven el ratón sino hasta que saben que quieren hacer clic en algo, así que no escondas las ligas detrás de un mouseover. Para cuando esas ligas se revelen será demasiado tarde: el usuario ya habrá decidido en lo que va a hacer clic. Los menús volantes son lo peor.

    Algunos de los ejemplos de ligas favoritas de Jeff son “Cosas que nuestros abogados nos obligaron a poner”, “Menos opciones” y “Todo lo demás”.

    En resumen, esto es lo que nuestras ligas quieren hacer en secreto:

    • Llevar al usuario a su objetivo deseado
    • Dejar el rastro correcto
    • Verse bien sin dejar de verse como liga
    • Hacer lo que el usuario espera

Thanks Jeremy for providing such a fabulous summary of the talk.

Degradados fáciles con CSS

Gracias a el Padrino del Web y sus constantes tweets de la conferencia An Event Apart que se está llevando a cabo en Boston, me entero de esta genial y utilísima herramienta para crear degradados usando CSS 3.

Todavía mejor es la que creó John Allsopp con el mismo fin.

Una de las promesas cumplidas por CSS 3 es el poder especificar degradados sin usar imágenes. Esto ayuda a tener un sitio mucho más fácil de mantener y más rápido de descargar. Lo malo es que calcular todos los valores para introducir en el código es una lata.

Gracias a estas herramientas puedes hacerlo fácilmente de forma visual, sin tener que hacer cálculos a ojo de buen cubero para después probar y ajusta unas cuarenta y cinco veces hasta que quede como quieres.

Nada más falta que la especificación quede fijada y los navegadores la soporten. Mientras, a usar -webkit y -moz.

Comparación de servicios de tipografía web

Esta excelente recopilación de los servicios de tipografía web creada por Sylvia Egger es una fantástica ayuda a la hora de elegir que proveedor de tipografías se ajusta mejor a nuestras necesidades.

Desde hace ya algún tiempo los principales navegadores soportan la inclusión de diversas tipografías en una página para no tener que usar las comunes que vienen con los sistemas operativos. El problema es que no es tan sencillo encontrar la que nos gusta y meterla sin problemas para que funcione en esos navegadores. Así que de un tiempo para acá han surgido algunos servicios que se encargan de todo el manejo de licencias, hospedar los archivos necesarios y manejar los scripts para que se muestren correctamente.

Como no son todos iguales y no había como comparar fácilmente, a Sylvia se lo ocurrió crear esta carta y lo hizo muy bien.

Bordes para pestañas con CSS

Un efecto muy vistoso que hecho completamente con css, sin usar imágenes ni marcado adicional en el html.

Ever wondered how to create an element that flares into another using only CSS? Here’s a quick tutorial using existing CSS attributes, in combination with CSS generated content, to produce the effect using no images at all, and no additional markup. And it falls back gracefully for older browsers. Flared Borders with CSS – Blog – Ordered List

Google Doodle alusivo a las elecciones canadienses

Hoy, 2 de mayo, es día de elecciones federales en Canadá. Tienen elecciones a cada rato, creo que es como la tercera en cinco años desde que Harper formó un gobierno minoritario después de la caída de los Liberales en medio de escándalos y alegatos de corrupción.

Google Canadá hizo un Doodle para la ocasión y recordar a quienes no lo hayan hecho que hay que ir a votar otra vez.

Google Doodle de la elección canadiense