innovación, creatividad & pronoia

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”?

 

Comments (9)

  • Marta . 17 septiembre, 2015 . Responder

    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.

  • CELIA . 15 septiembre, 2015 . Responder

    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.

  • Silvia Gómez . 13 septiembre, 2015 . Responder

    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 🙂

  • Dr. T . 30 agosto, 2015 . Responder

    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

1 2

Deja un comentario

Kopy Theme . Proudly powered by WordPress . Created by IshYoBoy.com

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies