7.2 Usabilidad Web

La usabilidad es el valor que mide que la experiencia del usuario que accede a una web sea satisfactoria. O en otras palabras, la facilidad de uso de una web.

Los principios son muchos y variados, muchos de ellos tienen que ver con la lógica y otros tantos con las costumbres, mientras otros son fruto de numerosos y variados tests realizados a usuarios. Veamos algunos de ellos:

  • Correspondencia entre web y realidad. Ej. Esta web introduce formas de bombas a la hora de realizar un voto contra la venta de armas, lo cual hace un llamamiento a la acción.
  • Coherencia y estándares: Seguir una serie de convenciones implícitas como el encontrarnos simepre el logo en la esquina superior izquierda.

  • Estética cuidada y simple.

ejemplo de web usabilidad estética cuidada y simple

•    Descarga rápida de las páginas: se considera que si una web tarda más de 5-10 segundos en cargar, el usuario la abandona. Esta página, a pesar de haber ganado un premio de diseño, tarda demasiado en cargarse http://www.2015quilt.com/?t=red26 (muchos os habréis sentido impacientes y en condiciones normales la hubierais abandonado antes de su carga total).

Existen una serie de convenciones web que dicen que:

  • Los enlaces deben ir en color azul y subrayados. Los ya visitados en morado.
  • Entendemos mejor las cosas si se las llama por su nombre más común.
  • Acostumbramos a leer de izquierda a derecha y de arriba abajo, con lo cual, el contenido más importante tendrá que ir a la izquierda.
  • El logotipo suele estar en la esquina superior izquierda de la home y será visible en todas las paginas que componen la web.
  • El buscador tiende a figurar arriba a la derecha de la home y será visible igualmente en todas las páginas de la web. El tamaño de la caja será amplio, permitiendo que entren varias palabras.
  • El menú de navegación se suele basar en colocar los links en la zona superior.
  • En la parte inferior también habrá un resumen con los links de todas las páginas que componen la web. Normalmente suele coincidir con el menú principal que se encuentra en la parte superior.

Aspectos a tener en cuenta de la lectura en pantalla

  • Debemos tener en cuenta que la distancia entre ojos y pantalla es más grande en que en un libro, lo cual provoca una distracción mayor.
  • Leemos en espacios cortos de tiempo debido al área hipertextual de internet, por tanto, el texto ha de ser más corto que el impreso.
  • Leemos a saltos, más lento y realizamos barrido visual al entrar en una web.
  • Utilizamos un patrón F de lectura: Más atención al comienzo, por tanto debemos poner lo más importante primero.
  • En una pantalla se leen mejor los tipos de letra sans-serif que los serif.
  • Los tipos de letra demasiado pequeños se ven y leen mal.
  • El contraste entre texto y fondo influye en la legibilidad (negro sobre blanco, amarillo sobre negro…).
  • Con el tiempo se ha creado una ceguera a los banners hace que ahora casi nadie fije en algo que parezca banner  (simplemente lo ignoramos)

Navegación

•  Creación en cada página  de migas de pan (P.e. Inicio > Artículos > Usabilidad )
•  Correcta rotulación de los enlaces (deben identificar claramente el destino. Nunca usar “pinche aquí”)

Organización de las páginas:

•    A los usuarios no les gusta hacer scroll, sobre todo en horizontal ¿cómo os sentiríais en esta web?

•  Los mensajes de error deben ser constructivos. El de la biblioteca de Chelmsford sería un buen ejemplo.

Para llevar todo esto acabo tenemos que seguir un proceso:

1. Dibujar en un papel el diseño de nuestra web.
2. Construir con programas como Fireworks, Axure o Balsamiq el boceto con ese diseño y las acciones de cada uno de los elementos de nuestra web
3. Pasárselo a los diseñadores/desarrolladores

Este vídeo explica muy bien el proceso de creación de una web usable:

La experiencia de usuario también se encarga de realizar estudios a los usuarios

Estudio sobre las donaciones online

En un estudio realizado por Jacok Nielsen un grupo de usuarios probaron 60 web de ONGs, concluyendo que hacer donaciones online es un 7% más difícil que gastar dinero en compras convencionales online. Además, encontrar la opción de ofrecerse como voluntario a través de la web, es aún más difícil.

El estudió concluyó que lo que echa atrás la intención de los usuarios de realizar donaciones online es:

  • Un 47% son problemas de usabilidad relacionados con la página y su diseño, incluyendo una nada intuitiva arquitectura de la información. páginas desordenadas y confusión de elementos dentro de una página.
  • En el 17% de las webs, los usuarios no podían encontrar dónde hacer una donación. En muchos casos los usuarios confundieron el botón de donar con un banner publicitario además de que encontraron palabras excesivamente parecidas a las que escuchamos cuando alguien nos quiere vender algo. Esos matices causaron que la gente pasara por alto los botones de donación.
  • Un 53% fueron problemas de contenido relativos a la escritura para la web, incluyendo contenido nada claro o información perdida y términos confusos.
  • Para llegar a quintuplicar el potencial de recaudación de fondos en línea durante la próxima década, las ONG deben abordar el gran problema: presentar unos contenidos claros.

El tema de hoy ha sido creado por Silvia Pérez Felipe experta en Accesibilidad y Usabilidad digital. Las preguntas de hoy son muy sencillas.
1. ¿Qué haría de disenosocial.org una web con mayor usabilidad?.
2. ¿Qué ong consideras que tiene la web con mayor “usabilidad”?

 

9 comments

  1. Marta dice:

    Cuando hago clic en algún otro enlace de la página, me gustaría que estos siempre se abriesen en otra pestaña, para no perder la página original. En algún vídeo en inglés no he conseguido poner los subtítulos en castellano. Me encanta que cuando abro un tema en la página que contiene “el índice” se me abra en otra pestaña.

  2. CELIA dice:

    Pondría el logo de diseño social a la izquierda. Haría que el menú se inmovilice en la franja superior cuando bajamos en la página para tener acceso a él en todo momento. Quizás añadiría algo más de contenido visual para hacerla más atractiva. Por lo demás me parece que es una estructura simple y que el contenido se encuentra facilmente.

  3. Silvia Gómez dice:

    Hola:

    >> 1. ¿Qué haría de disenosocial.org una web con mayor usabilidad?.

    Se me ocurre que quizás reubicaría el logotipo y nombre de la página trasladándolos a la banda horizontal superior, dejando libre la columna de la derecha para referencias a otros contenidos.

    >> 2. ¿Qué ong consideras que tiene la web con mayor “usabilidad”?

    He aprovechado para visitar varias páginas web de ONGs y me ha parecido que Amnistía Internacional, Unicef y Manos Unidas tienen unas webs bastante ordenadas, coherentes y en las que se distingue claramente su identidad corporativa.

    Saludos 🙂

  4. Dr. T dice:

    Hola!
    Yo para mejorar la página de Diseño EN+ trataría de hacer mejor uso del espacio para aumentar contenidos:
    – Añadiría banners horizontales arriba de la página (por ejemplo con acceso a los libros o las donaciones o las opciones de afiliación)
    – El contenido de la derecha podrían ser cuadros más pequeños para tener más contenido
    Gracias por pedir mi opinión!
    No puedo señalar una web de ONG con la mejor usabilidad porque no navego lo suficiente en esa “burbuja” como para emutir una opinión informada

  5. Andrea Iglesias Iglesias dice:

    La web disenosocial.org me parece bastante buena con respecto a su usabilidad, tiene más o menos todos los requisitos presentes en este texto. Tal vez lo que yo mejoraría como opinión personal,y por decir algo, sería la forma de acceder al curso virtual, ya que tienes que seleccionar el mes en el que comenzaste, y me acuerdo que al principio me equivocaba de mes y no podía entrar en el “aula virtual”.

    No conozco muchas páginas de ONG, pero una que me gusta mucho y que creo que está bien organizada y estructurada seria la de loquedeverdadimporta.org

  6. Vega dice:

    Creo que la página tiene bastantes características de usabilidad de las que hemos visto en esta tema. Como aportación personal, al entrar únicamente ves una entrada. La introducción de cada entrada podría ser menos extensa y así poder tener más entradas a primera vista, al menos dos para ver que la página tiene más contenido sin tener que bajar el cursor.
    No es que tenga una página referente en cuanto a usabilidad pero me suele gustar mucho Amnistía Internacional porque tiene mucho contenido pero diferenciado por apartados en la página principal.

  7. Andrea dice:

    La web disenosocial.org es bastante intuitiva, clara y sencilla. A mi me ha pasado alguna vez de volver a meterme en el mismo contenido pensando, ya que todas las paginas están unidas entre link. Alguna vez me he sentido un poco perdida con esto, pero la verdad que es una maravilla como el un contenido hace referencia a otro y lo fácil que es encontrar lo que estás buscando.
    La tipología de la letra, redonda y agradable resulta mas apetecible de leer, además en contenido siempre va acompañado de elementos gráficos que hacen que la lectura sea mucho mas amena.

    A mi una pagína web que me gusta mucho es http://www.savethechildren.es/. Me parece que esta todo muy claro que ademas de ser intuitiva, de ayudarte en tu visita por la web, es limpia y clara. Tienes todo a mano. El diseño es agradable, incita a seguir navegando, se carga super rápido y las fotos son de buena calidad. Además la letra se lee perfectamente, se utilizan los colores corporativos y el contraste con el fondo es del todo acertado.

  8. popih dice:

    La web de diseño social me transmite de una manera clara y nítida los contenidos. Tampoco está saturada de enlaces ajenos así que la navegabilidad me resulta sencilla y eficaz.
    En cuanto a las anotaciones teóricas de este tema me choca que el logotipo no esté en la parte izquierda…también hecho de menos el menú al final de la página que suele integrar las opciones que inicialmente se muestran. Los contenidos están claramente centralizados y resulta muy fácil encontrarlos. En la parte derecha aparecen los enlaces y la distribución me resulta muy manejable. Sin embargo, y siendo un poco crítico, me gustaría que fuera más dinámica, para que la navegación sea más atractiva, e incluso que guíe la visita en la página.

    Una ong’s que me resulta muy atractiva es https://www.charitywater.org/ porque ofrece mucho dinamismo sin perder de vista la importancia del contenido. Me parece un ejemplo a seguir

  9. jaime núñez de castro dice:

    La web http://www.disenosocial.org me parece bastante buena. Además de cumplir con los requisitos que hemos visto en este tema como coherencia, estética cuidada, orden, letra legible, sin sobrecarga de información, también cumple con mis propias exigencias, que son sobre todo relativas a simpleza.
    Por poner un par de pegas, cambiaría el fondo blanco por otro color. Esto es sólo por un gusto personal, y es que no me gustan mucho las web “muy blancas”. También he tenido problemas de acceso en algunas ocasiones, pero desconozco si ha sido por error del servidor de la web o más bien por una deficiencia de mi acceso a internet.

    La web http://www.survival.es me resulta bastante accesible. Los contenidos están perfectamente ordenados, no existe sobrecarga de información y en cada momento el usuario sabe donde se encuentra. Además, la navegación es bastante simple y la lectura se hace fácil y amena, ya que aparte de usar un tipo de letra muy legible, es normal encontrar abundantes fotografías que ilustran las informaciones y reportajes. A pesar de todo añadiría el cambio de color en aquellas noticias ya leídas, ya que a veces, debido a que la información que ofrece la web está basada en una temática muy concreta, existe cierta confusión con lo que ya se ha visto o no.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *