Tips para el diseño de páginas web usables (2)


Continuando el tema del artículo anterior, discutiremos brevemente los 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
Por lo tanto, el contenido para Web debe ser alrededor de un 50% del contenido impreso. En el siguiente ejemplo, el contenido de la izquierda se percibe muy distinto que el de la derecha:

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:

  • Parques Nacionales
  • Isla de Chiloé
  • Fiordos y glaciares en Patagonía
  • Torres del Paine
  • Carretera Austral
  • Tierra del Fuego
  • Antártica

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.

Qué leer o mirar

DesignVitality (2007) 100 Unconventional Sources for Web Design Inspiration.

ILT (2008) A guide to web typography.

Nielsen, J. (2003) Misconceptions About Usability.

OnextraPixel(2009)

Sitepoint (2009) Ten Examples Of Unconventional Site Navigation

WebMonkey (2010) Web Typography Tutorial.

Dombrovskaia, L. (2010) Tips para el diseño de páginas web usables - primera parte. Disponible en http://www.intelectivo.com/2010/08/tips-para-el-diseno-de-paginas-web_26.html

Próximamente: los errores más frecuentes del diseño en web.

Tips para el diseño de páginas web usables (1)


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 agosto de 2010, existen más de 213 millones de sitios web. Sólo en Chile se han inscrito más de 290 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 usabilidady 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:

  1. 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
     
  2. 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?
  3. 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
  4. 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.

Qué leer

Cámara de Comercio de Santiago (2010) Economía digital en Chile 2010.

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. & Tahir M.(2005) Homepage usability: 50 websites deconstructed, New Riders Publishing, Virginia, USA.

Nielsen, J. (2010) Usability 101: Introduction to Usability.

Shneiderman B. and Plaisant C.(2004) Designing the User Interface: Strategies for Effective Human-Computer Interaction, Cuarta Edición, Addison-Wesley.

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.

Como citar este artículo:

Dombrovskaia, L. (2010) Tips para el diseño de páginas web usables - primera parte. Disponible en http://www.intelectivo.com/2010/08/tips-para-el-diseno-de-paginas-web.html

Próximamente: consideraciones de usabilidad contenido, navegación y diseño gráfico de un sitio web.