Este es un repost de una serie de 3 artículos sobre usabilidad de sitios web publicados durante 2010, por la Dra Lioubov Dombrovskaia, pero que aún siguen vigentes.
Parte 1: Factores de éxito para un sitio web
Éxito del sitio
Ante tan vasta competencia, ¿qué determina que un sitio sea exitoso? Podríamos discutir de muchos factores, pero nos concentraremos en dos relacionados con la experiencia de los usuarios: la facilidad de uso y utilidad del sitio. Lo primero que usuarios evaluamos es la facilidad de uso, para luego después concentrarnos el producto o servicio ofrecido.
La facilidad de uso en primer lugar pasa por definir claramente 2 elementos:
Público objetivo
El contenido y su forma
Parte 2: Componentes de un sitio y como impactan en su usabilidad.
El contenido
Es muy probable que ustedes ni siquiera hayan leído el texto de la izquierda ¿verdad?.
La navegación
El diseño gráfico
Ejemplos de diseño de layout de la página siguiendo la regla de 7±2 lo pueden encontrar aquí, aunque el autor del blog lo confunde con 5.
Errores más frecuentes que afectan la usabilidad
Parte 1: Factores de éxito para un sitio web
No hay duda que desde sus inicios, la web ha estado en expansión, proceso que se vislumbra detenerse, habiendo incluso empresas que basan sus negocios exclusivamente en ella. A septiembre de 2012, existen más de 620 millones de sitios web. Sólo en Chile se han inscrito más de 393 mil dominios.
Éxito del sitio
Ante tan vasta competencia, ¿qué determina que un sitio sea exitoso? Podríamos discutir de muchos factores, pero nos concentraremos en dos relacionados con la experiencia de los usuarios: la facilidad de uso y utilidad del sitio. Lo primero que usuarios evaluamos es la facilidad de uso, para luego después concentrarnos el producto o servicio ofrecido.
La facilidad de uso en primer lugar pasa por definir claramente 2 elementos:
- Público objetivo: quiénes usarán el sitio: Por ejemplo, experiencia computacional, conocimiento del negocio, experiencia con sistemas similares, edad o género.
- El contenido y su forma: qué se quiere lograr con el sitio, cómo apoyar a la misión de la organización y qué harán los usuarios en el sitio Web.
Público objetivo
Los usuarios de Internet los podemos categorizar por ejemplo, según su experiencia, edad y género. Lo más probable es que la experiencia con sistemas similares sea diaria y amplia. Su edad fluctúa entre 15 y 40 años, siendo el 45,7% mujeres y 54,3% restante hombres. En regiones como Norteamérica, el porcentaje es más equilibrado, llegando las mujeres a un 50,4%. Por otro lado, las mujeres constituyen 57,9% de los compradores en Internet. En cuanto a los adultos jóvenes, ellos usan Internet por igual, pero para diferentes cosas.
Tomando en consideración lo anterior, al momento de diseñar el sitio se deben escoger como población objetivo uno varios segmentos específicos, dependiendo a donde se orienta su negocio
El contenido y su forma
Hace más de 12 años, probablemente “el” problema de los usuarios de Internet era encontrar lo que querían. Para suplir esta necesidad surgieron varios portales que comenzaron a indexar la Internet con un sistema tipo páginas amarillas que además incluía un sistema de búsqueda.
En 1998 apareció Google con un diseño extremadamente simple sólo centrado en la búsqueda, rápidamente desplazó a sus competidores (sólo basta que vean las páginas de esa época de Hotbot, Altavista y Yahoo). Dicha simplicidad logró una gran cantidad de visitas, que permitió cimentar un negocio basado en publicidad y la diversificación de servicios que hoy tiene utilidades por más de US$6.520 millones (2009). En este caso Google entendió cuál era la principal tarea de los usuarios, y presentó una solución simple y robusta para dicha necesidad.
Suena bastante obvio, sin embargo no es fácil de lograr porque los diseñadores muchas veces ignoran un elemento clave que son las expectativas de los usuarios. En la actualidad, es altamente improbable que no exista un sitio que al menos externamente tenga la funcionalidad que ustedes están empezando implementar. Por lo tanto, caer en la tentación de hacer algo para diferenciarse del resto es muy grande. Sin embargo ser demasiado creativo podría ser contraproducente. La amplia experiencia de navegación de los usuarios significa que estos ya tienen ciertas expectativas al respecto a la usabilidad y que no deberíamos cambiar. Por lo tanto, es realmente importante tomarlas en consideración a la hora de diseñar.
Steven Krug discute el problema en su libro “Don’t make me think” y menciona 4 formas de cómo las personas realmente usan la Web:
- No leemos las páginas, las escaneamos. El escaneo significa una mirada rápida para ver palabras o frases que atraen la atención. Las excepciones generalmente son las noticias, historias, o descripciones del producto, pero si son más largas que un par de pantallas, se imprimen.
¿Por qué lo hacemos?
- Estamos apurados
- Sabemos que no necesitamos leerlo todo
- Somos buenos escaneando, hemos escaneado diarios, revistas y libros toda la vida
- No buscamos el óptimo, sólo satisfacemos. Normalmente, los diseñadores asumen que vamos a leer la página completa, consideraremos todas las opciones disponibles y elegiremos la mejor. La realidad es otra: la gente selecciona la primera opción razonable y hace clic.
¿Por qué lo hacemos?
- Estamos apurados (¿les suena familiar?)
- El costo de adivinar mal no es mucho: a lo más un un click en “volver”, nada va explotar
- Sopesar las distintas opciones no mejora mucho nuestra suerte. Lamentablemente estamos acostumbrados a malos diseños y por lo tanto, como en el segundo punto lo peor que puede pasar es que haya que volver
- Adivinar es divertido: ¿cuántos de ustedes leen los manuales de las cosas?
- No necesitamos saber como las cosas funcionan, salimos del paso.
¿Por qué lo hacemos?
- No es importante para nosotros, pero si cómo usarlo
- Una vez que encontramos algo que funciona y no importa cuan mal, tendemos a no hacerlo otra manera
- Somos impacientes. Si esperamos más de 10 segundos por la página, se nos olvida que estamos haciendo. Sólo 28% de los sitios cumplen con esta recomendación y más del 26% de los sitios demoran más de 30 segundos. Si la página home es lenta, los usuarios concluyen que el resto del sitio también lo será y no están dispuestos a esperar.
Por lo tanto, debemos evitar —usando las convenciones ampliamente usadas— que los usuarios se hagan preguntas como por ejemplo: ¿por dónde empiezo? ¿por qué llamaron eso así? ¿Puedo hacer clic en eso? ¿Esto es un link? ¿Por qué eso está aquí? Estos links parecen iguales... ¿son lo mismo? entre muchas otras cosas.
Parte 2: Componentes de un sitio y como impactan en su usabilidad.
Todo sitio Web es la interacción de tres componentes: contenido, navegación y diseño gráfico. A continuación discutiremos brevemente cada uno de ellos.
El contenido
Los estudios de usabilidad señalan que se puede mejorar la facilidad de uso del sitio en 150% sólo re-escribiendo el contenido. Hay que tener en consideración que escribir para la Web es muy diferente de escribir para medios impresos, porque:
- El 79% de los usuarios escanean la página en vez de leerla
- La lectura desde la pantalla es 25% más lenta
En el sur de Chile la exuberante naturaleza protegida en parques nacionales no deja a nadie indiferente. Un paisaje acompañado por ríos para los que aman el deporte aventura, rodeados de volcanes y hermosos lagos. Belleza que se une a la isla de Chiloé, para muchos un paraíso en la tierra, hogar de un pueblo ante todo amistoso, autor de fantásticos mitos. Los fiordos y glaciares de la Patagonia impresionan por su majestuosidad, sumado a circuitos de trekking de fama internacional como el de Torres del Paine y lugares de gran atractivo, como los alrededores de la Carretera Austral y Tierra del Fuego. En la Antártica, los hielos eternos dan vida a un mágico escenario blanco. | En el sur de Chile la exuberante naturaleza no deja a nadie indiferente, encontrando distintas atracciones:
|
Es muy probable que ustedes ni siquiera hayan leído el texto de la izquierda ¿verdad?.
La navegación
La página principal (“home”) es la primera página que el usuario verá, por lo tanto se debe prestar especial atención a su diseño. Todas las páginas del sitio deben tener un enlace a ella, porque es posible que se llegue a una página más profunda que la inicial desde los resultados de una búsqueda, y por tanto debe ser posible acceder al home desde cualquier parte.
Los usuarios normalmente esperan que la barra de navegación general esté ubicada arriba debajo del encabezado de la página o al lado izquierdo. Esto no significa que todos los sitios tengan la misma estructura, pero si que la organización sea lo más explícita posible para el usuario. Como veremos en la siguiente sección, esto puede hacerse creativamente.
Los invito a revisar dos breves artículos sobre indicaciones de principios de diseño de navegación y algunas opciones que usar.
El diseño gráfico
Debe crear una lógica visual, un balance óptimo entre la sensación visual e información gráfica y textual porque:
- En su atractivo reside la motivación de leer
- Una continuidad visual y funcional de la organización, diseño gráfico y tipografía es esencial para convencer a los usuarios que encontrarán información actualizada, precisa y útil
Mucha gráfica puede aumentar el tiempo de descarga. No olvidemo que todos somos impacientes. Entonces el diseño gráfico debe ser atractivo, pero al mismo tiempo eficiente.
El diseño gráfico debe ser el punto de partida en vez del final del diseño orientado al usuario, porque es como los efectos especiales de una película, deben servir a la historia y no ser una excusa para el argumento. Y en este caso la gente después de breves segundos no verá su película.
Hay formas menos tradicionales de navegar por una página, pero que no rompen totalmente con lo ya conocido, gracias a un cuidado diseño gráfico. Un ejemplo es la página de Ingeniería del MIT. Otros ejemplos de navegación no convencional las podemos ver en el blog de SitePoint y en el de Onextrapixel.
 |  |
Ejemplos de diseño de layout de la página siguiendo la regla de 7±2 lo pueden encontrar aquí, aunque el autor del blog lo confunde con 5.
Errores más frecuentes que afectan la usabilidad
Finalizamos la serie de tips para el diseño de páginas webs usables, haciendo una breve reseña de los errores más frecuentes (basado en Useit.com 
).
).- Mala función de búsqueda. La experiencia de los usuarios con buscadores de alta calidad como Google significa que no podemos usar en nuestro sitio motores que simplemente:
- Hagan búsqueda literal - sin considerar errores ortográficos, de tipeo o de acentos.
- No prioricen los resultados por el número de coincidencias.
- No permitan una búsqueda simple, antes de la avanzada.
Si por ejemplo la búsqueda arroja que no hay resultados, cuando en una categoría si las hay, el usuario se pregunta naturalmente: ¿está o no lo que busco?. Muchos clientes abandonan tras los resultados de la búsqueda y no hacen el esfuerzo de navegar por el sitio hasta encontrar lo que buscan, lo que en el caso de sitios de e-commerce significa perder ventas.
- Texto y el tipo de fuente utilizada: el uso de los colores y tipo de letras debe facilitar la navegación. Algunos errores más comunes son:
- Mantener el mismo color de los enlaces visitados o no.
- Texto no escaneable: una pared de texto es una experiencia difícil para la lectura en línea.
- Tamaño fijo de fuente o usar textos dibujados: esto evita que los usuarios puedan agrandar el texto si lo desean, o hacen que el sitio se vea mal si el usuario tiene configuraciones predeterminadas de letra y tamaño con que desplegarlos. Además no permite que los textos sean traducidos.
- Títulos de la página con poca visibilidad para buscadores.
- No seguir las convenciones de diseño. Siempre debemos recordar que nuestros usuarios potenciales pasan más tiempo en otros sitios que en el que ustedes están diseñando. Por ejemplo, la navegación y los links deben mantener una familiaridad que permita usarlos.
- Todo lo que parece publicidad será ignorado. Cuando se le da a publicidad más importancia que a los contenidos del sitio o se usa animación para destacar algunos contenidos que se confunda con publicidad.
La siguiente imagen muestra la visualización de 3 páginas usando la técnica de seguimiento ocular. Las áreas más vistas están en rojo, mientras que las menos están en azul. Como puede advertirse, los anuncios publicitarios (enmarcardos en amarillo) fueron ignorados.
Pueden ver los tips de Nielsen en su artículo "Banner Blindness: Old and New Findings".
- Abrir nuevas ventanas como opción de navegación. Esto porque es un evento inesperado para el usuario y en segundo lugar muchos navegadores automáticamente bloquean esta acción, por lo tanto, puede pasar desapercibida lo que es no menor por ejemplo si se trata de la página de un banco que requiera algún tipo de confirmación para realizar una transacción.
Por ejemplo, el Servicio de Impuestos Internos chileno (www.sii.cl) abre nuevas ventanas para el pago en línea que son bloqueadas por los navegadores, causando problemas a los usuarios inexpertos o produciendo transacciones incompletas.
Normalmente la convención de abrir una ventana nueva se usa cuando se abre contenido externo al sitio, como una forma de decirle al usuario que está abandonando el contenido del sitio recientemente visitado. Algunas veces se denota con un icono ().
- “One size fits all”. El sitio debe funcionar en la mayor cantidad y diversidad de plataformas tecnológicas disponibles, ya no es una opción “imponer” el uso de un cierto navegador, para ello existen herramientas como Google Analytics que permiten identificar el sistema operativo, navegador y resolución del monitor de los usuarios que navegan el sitio.
No es lo mismo navegar en pantallas de gran tamaño que hacerlo en pantallas pequeñas o táctiles. El sitio web debiera ofrecer experiencias distintas según el usuario se conecte desde distintos dispositivos, sobre todo si el público objetivo tiene acceso a este tipo de aparatos.
Guías de diseño para plataformas móviles se pueden encontrar en Onextrapixel.
- No responder las preguntas o consultas de los usuarios. Frecuentemente, no existen teléfonos donde llamar, e-mails de contacto o esta se hace a través de formularios que nadie contesta después.
Esto está relacionado con la baja integración de la Internet como parte de la estrategia de comunicaciones de la empresa (es algo que debe tener, pero no es prioritario). En la era de la web 2.0, con el rápido desarrollo de las redes sociales la falta de presencia en medios como Facebook o Twitter es inexcusable. Pero todos ellos exigen eficacia y eficiencia de respuesta a los clientes.
Qué leer
DesignVitality (2007) 100 Unconventional Sources for Web Design Inspiration.
ILT (2008) A guide to web typography.
Krug, S. (2005) Don'T Make Me Think: a Common Sense Approach to the Web (2nd Edition). New Riders Publishing.
Nielsen J.(1993) Usability Engineering, Morgan Kauffmann Publishers.
Nielsen J. (2000) Designing Web usability: the practice of simplicity, New Riders Publishing, Indiana, USA.
Nielsen, J. (2003) Misconceptions About Usability.
Nielsen, J. (2007) Banner Blindness: Old and New Findings
Nielsen, J. (2010) Usability 101: Introduction to Usability.
Nielsen J. & Tahir M.(2005) Homepage usability: 50 websites deconstructed, New Riders Publishing, Virginia, USA.
OnextraPixel (2009)
- 10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
- 12 Navigation Options That Help Users Navigate Through Your Website Effectively.
- The Art Of Applying Rule Of Five(sic) Plus Or Minus Two For An Effective Wireframe
- The Characteristics of a Less Conventional Website with Examples.
- Importance of Great Web Typography & Excellent Examples
Shneiderman B. and Plaisant C.(2004) Designing the User Interface: Strategies for Effective Human-Computer Interaction, Cuarta Edición, Addison-Wesley.
Sitepoint (2009) Ten Examples Of Unconventional Site Navigation
Tidwell J.(2005) Designing Interfaces: Patterns for Effective Interaction Design, O’Reily.
U.S. Department of Health and Human Services (2006) Research-Based Web Design & Usability Guidelines.
WebMonkey (2010) Web Typography Tutorial.