Usabilidad de una página web

¿Qué entendemos por un diseño web usable?.

La usabilidad es un valor empírico, ya que sus resultados son obtenidos a través de unos test realizados a una muestra de usuarios. Estos valores obtenidos no son ni buenos ni malos, sino que dependen del propósito que nos hayamos marcado o de con qué lo estemos comparando. Se trata pues de evaluar si el diseño web es válido para el propósito para el que ha sido construido.

¿Es usable tu diseño web?, para contestar a esta pregunta hay que evaluar varios factores, por separado y en conjunto, ya que todos y cada uno de ellos han de tenerse en cuenta si verdaderamente queremos que nuestra página web sea usable. Para evaluar la usabilidad de una web, deberemos de verificar la accesibilidad, la identidad, navegabilidad y contenido.

ACCESIBILIDAD

La accesibilidad es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas o físicas.

Cuando medimos la accesibilidad de una página web, medimos:

• Tiempo de carga de la página web: evidentemente, no todos tenemos las mismas velocidades de conexión, una web muy pesada puede hacer interminable la carga, con el correspondiente abandono del usuario.
  El peso de una página está compuesto por las imágenes, el código html y los archivos a los que llama, como son la CSS o los JS.
  Intentemos pues optimizar al máximo el tamaño de nuestras imágenes (gif y jpg cuando proceda), usar un buen código XHTML, optimizar al máximo la CSS y usar sólo los JS que sean necesarios para la página.
  Lo ideal es acercar el peso a los 100kb, de todos modos depende también del tipo de web que estemos diseñando. El tiempo de carga ha de ser razonable al tipo de contenido que estemos mostrando, y en todo caso, no superar los 10 segundos.
  También es muy importante en el caso de las páginas en flash, utilizar buenas precargas para no hacer padecer al usuario y sobre todo para no perderlo.
• Hacer una página web legible: el contraste es muy importante a la hora de hacer legible una página. No se trata de hacer sólo un diseño elegante, tiene que ser funcional. Puedo usar un menor contraste para un titular, pero lo que no puedo hacer es meter un bajo contraste para un texto, porque esto supondrá incluso que en algunos monitores, el usuario no pueda leerlo, y que en general cause fatiga su lectura.
  El tamaño de la fuente y el interlineado son también igual de importantes. Lo ideal además es poder ofrecer la posibilidad de escalar el tamaño de la fuente, aunque si está bien diseñado, no es imprescindible.
  Los espacios en blanco nos favorecen, nos ayudan a dirigir el rumbo de la lectura y nos permiten dar «aire» a la página para así favorecer su lectura y consulta.
  Y por supuesto, nada de «ferias«, no hay nada más agobiante que intentar leer una web en la que todo quiere destacar sobre el resto.
• Plug-in, mal asunto: no podemos obligar a nuestro usuario a que se descargue una aplicación para poder ver nuestro contenido, primero, porque en numerosas ocasiones no se fiará, y segundo porque eso le hará perder mucho tiempo. A no ser que se trate de algo muy específico y deseado por el usuario, la gran mayoría opta por marcharse del sitio.
  Si no queda más remedio, al menos debemos de dar la opción de saltar ese elemento y poder seguir navegando.
  
  
• Tags en las imágenes: todas las imágenes de nuestra web deben de llevar la etiqueta «Alt«, con un texto descriptivo de lo que representan. Además de ayudar al usuario, estaremos ayudando a Google para que nos localice mejor.
• Usemos una 404: cuando una página no existe, el servidor nos muestra una página del tipo «404 Not Found», esta es una manera rápida de perder a un usuario. Lo ideal es diseñar una buena y atractiva página 404 en la que invitaremos al usuario a navegar por nuestra web.
• Nada de pop-ups ni ventanas nuevas: está más que probado que el uso de ventanas emergentes horroriza al usuario, existen muchas formas de sacar esos contenidos sin la necesidad de tener el escritorio plagado de ventanas abiertas. El usuario utiliza el «atrás o back» para navegar, abrir nuevas ventanas lo único que provoca es que queden ocultas unas sobre otras. No te preocupes, si le gusta tu contenido volverá hacia atrás.

IDENTIDAD

En todo momento es necesario que el usuario sepa quienes somos. Esto facilita la confianza en nuestros contenidos.

• El logo: la marca que dirá quienes somos, siempre en un lugar predominante y visible.
• Describir el sitio: con frases concisas, ¿qué es esto y qué puedes hacer y encontrar aquí?
• Home en un clic: la home es un referente para el usuario, en cualquier momento y de forma rápida, debe de poder acceder a ella.
• Contacto: el usuario en ocasiones querrá poder ponerse en contacto contigo, facilítaselo al máximo.

NAVEGABILIDAD

A menudo pensamos que todo está bien claro, y luego nos sorprende que cuando enseñamos la web, nuestro amig@ no es capaz de llegar al sitio que queremos que vea, esto es debido a que la web no está bien diseñada. No se trata de tener un resultado final bonito, espectacular, un buen diseño es el que además y sobre todo, es capaz de hacer que los contenidos de la web sean fácilmente vistos por el usuario, es decir, que sea capaz de navegar sin problemas por la web para descubrirla. A esto podríamos llamarle también la arquitectura de la información.
No es posible dar un manual de navegabilidad, cada web es un mundo, lo que si que podemos es intentar seguir estas pautas:

• Logotipo con link a la homepage: el usuario por lo general siempre busca la home como lugar de partida.
• Menú de navegación en lugar visible: por lo general el mejor lugar es la barra horizontal en la parte superior de la web. Si nos damos cuenta este es el lugar en el que hemos aprendido a utilizar cualquier programa (Word,…) y es donde más fácil se nos hace navegar.
  Si el menú tiene submenús, que sea fácil distinguirlos.
• Mensajes claros: los titulares de los menús han de ser claros y concisos. En general además se recomienda no poner más de 7 enlaces principales en un menú, número en principio más que suficiente para cualquier web.
• Enlaces fáciles de identificar: no olvidemos que la función de un enlace es que lo pulsen, procuremos que siempre se vea claro, underline para texto y texto alternativo al botón.

CONTENIDO

Evidentemente la parte más importante de la web es la que más debemos mimar. La forma de mostrarla ya la hemos visto en los puntos anteriores, pero en lo que se refiere a su composición no debemos de olvidar:

• Utilizar las etiquetas correctas: para definir los títulos, subtítulos,  párrafos… Además de ayudar a la lectura, estaremos definiendo a la vez toda la labor SEO.
• Utilizar la CSS para jerarquizar: mediante colores, tamaños de fuente, fondos de capas, deberemos de hacer que todo sea más legible. Si jerarquizamos bien un contenido, facilitaremos mucho la labor del usuario a la hora de elegir los textos que quiere consultar. Un uso no muy frecuente pero muy útil es el de poner pie a las imágenes.
  Utilizar la negrita, el énfasis, todas estas figuras ayudan a la buena lectura de un contenido.
• Utilizar url’s «amigables»: fáciles de recordar y descriptivas del contenido.

Bueno, en definitiva estos son los puntos que como diseñador he de tener en cuenta a la hora de hacer mis diseños web, como siempre digo, el mejor aliado es el sentido común, y algo que suele venir muy bien, es coger a tus amig@s y enseñarles la web. Observa cómo se mueven por ella y te dará la respuesta a si tu web es usable o no.

Os dejo enlaces a algunos post que pueden servir de complemento a toda esta explicación.

• 10 Consejos para mejorar la legibilidad
• Herramientas para evaluar un buen diseño web
• Abrir en una nueva ventana
• La tipografía en el diseño web
• ¿cómo saber si una web es buena o mala?
• Los botones de un formulario
  
• ¿Cómo hacer un formulario usable?
• Usabilidad, los textos
• …. Ver todos los post relacionados con la Usabilidad