Top
Usabilidad en Diseño Web

Principios sobre la Usabilidad Web

El nivel de Usabilidad (facilidad de uso) es uno de los indicadores más importantes en el éxito o fracaso de un sitio web.

En este artículo dirigido principalmente a propietarios de un Sitio Web, trataremos los principios fundamentales sobre Usuabilidad: Qué es, cómo se mide, cómo se mejora, qué tan importante es y demás consideraciones que te ayudarán a aumentar las conversiones de tu Sitio Web.

El nivel de Usabilidad (facilidad de uso) es uno de los indicadores más importantes en el éxito o fracaso de un sitio web.

Primero… ¿Qué es la Usabilidad?

Jackob Nielsen (el aclamado Gurú de la Usabilidad) define la Usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web. La usabilidad se refiere a la claridad y la elegancia con que se diseña la interacción con un programa de ordenador o un sitio web.

 

Principios básicos de la Usabilidad en Diseño Web

Para empezar a analizar estos principios adecuadamente primero tenemos que entender cómo los usuarios interactuan con los Sitios Web, cómo piensan y cuáles son los parámetros más importantes de su comportamiento.

¿Cómo Piensa el Usuario?

Básicamente, los visitantes de una web no poseen hábitos muy distintos a los que posee en una tienda real. Visitan algunas páginas de la web, escanean algunos textos, y hacen clic en el primer enlace que les llame la atención o que vagamente se parezca a lo que están buscando. De hecho, hay una gran parte de la página que ni siquiera miran.

La gran mayoría buscan algo interesante (o funcional) y cliqueable, de un simple vistazo crean mentalmente los candidatos para esto, y rápidamente cliquean su mejor opción. Si esta nueva página no cumple con sus expectativas, cliquean el botón ATRÁS del navegador y continúan su búsqueda.

Los usaros aprecian la calidad y la credibilidad

Si una página web provee a sus usuarios contenido de alta calidad, los usuarios se comprometerán con el contenido, avisos y diseño del sitio. Por esta razón es que los sitios no tan bien diseñados pero con contenidos de mucha calidad obtienen muchísimo tráfico con el pasar de los años. Para los usuarios el contenido es más importante que el diseño visual que lo entrega.

Los usuarios no leen, solo escanean

Analizando una página web, los usuarios, inconscientemente, buscan algunos puntos claves que los guíe a través del contenido de la página.
1-escaneo

Los usuarios no leen, solo escanean. Mira cómo las áreas calientes se enfrían a la mitad de las sentencias. Típico del proceso de escaneo.

Los usuarios Web son impacientes y buscan gratificaciones instantáneas

Un principio muy simple: Si un sitio web no es capaz de cumplir las expectativas de sus usuarios, los diseñadores no lograron su trabajo y la compañía está perdiendo dinero. Mientras más complicada es la comunicación y menos intuitiva su navegación, los usuarios estarán más propensos a abandonar el sitio web y buscar otras alternativas a este.

Los usuarios no toman decisiones óptimas

Los usuarios no van a buscar la forma más rápida para encontrar la información que están buscando. Tampoco van a escanear la página de una forma lineal o formal, yendo secuencialmente de una sección a otra. En su lugar, ellos optan por tomar su primer opción más razonable. Tan rápido como encuentren un link que parezca que los llevará al lugar deseado, ellos lo cliquean, simple.

Nota: Estos gráficos de calor son tomados con herramientas como esta: video siguiendo el foco del ojo a un determinado grupo de personas.

Flujo de lectura de Yahoo

Flujo de lectura EyeTools
Las dos imágenes muestran cómo el flujo de lectura “normal” no funciona en la Web. La imagen de la derecha describe la parte escaneada de esa página.

Los usuarios siguen su intuición

En la mayoría de los casos el usuario nunca se detendrá a entender el ordenamiento del contenido del sitio web. Según Steve Krug, la razón de esto es que al usuario no le importa. Si encontramos algo que funciona, lo seguimos usando. No nos importa cómo es que funciona, mientras que nos siga dando resultados

Los usuarios quieren tener el control

Los usuarios quieren tener el control total de su navegación y mantener la información importante del sitio web. Por ejemplo, un usuario nunca va a querer nuevas ventanas que se abren inexperadamente sin que ellos cliquen, y quieren poder siempre volver a la página anterior con el botón ATRÁS del navegador.

1. No hagas pensar a tus usuarios

Según la primer ley de Krug’s first sobre usabilidad, todo sitio web debe ser Obvio y Auto Explicativo. Un punto crucial del trabajo de los diseñadores es anticiparse a las dudas de tus visitantes, las decisiones que los usuarios tomen deben ser lo más conscientemente posible.

Si la navegación y la arquitectura no es intuitiva, crecerá el número de dudas de los usuarios acerca de cómo funciona tu sistema y cómo llegar del punto A al punto B. Una clara estructura con buenos indicadores visuales y enlaces claramente entendibles ayudarán a tus usuarios a navegar comodamente en tu web.

Home de Beyondis

Veamos un ejemplo. Beyondis.co.uk dice estar beyond channels, beyond products, beyond distribution (más allá de los canales, de los productos, de la distribución). ¿Y eso qué significa? Los visitantes deben continuar explorando el sitio para darle un sentido a esa frase, y se le crea la primer incomodidad de entrada.

Si bien el diseño es simple e intuitivo, el visitante necesita continuar buscando su respuesta por la página web. Esa es una duda innecesaria que se le plantea al visitante, un tema bastante delicado en sitios web corporativos.

Expression Engine

ExpressionEngine, en cambio, utiliza la misma estructura que Beyondis, pero evita dudas innecesarias. Incluso el eslogan es funcional ya que presenta el servicio explicándolo.

Reduciendo la carga cognitiva se hace más simple a los usuarios captar la idea detrás del sistema. Una vez que esto es logrado, ya se puede comunicar por qué el sistema es útil y cómo el usuario se beneficiará de el. Nadie usará tu Web si no se enteran rápidamente qué ventaja obtendrán de usarla.

2. No pongas a prueba la paciencia de tus usuarios

En cualquier parte de tu sitio web donde requieras información de tus visitantes, siempre mantén los requisitos al mínimo. Mientras menos pasos les pidas que hagan, más propensos estarán a darlos. Más aún si necesitás brindar algún tipo de servicio online, permitíles a tus visitantes que exploren y descubran tu servicio sin forzarlos a darte información privada, no es muy razonable obligar a tus usuarios a darte ni siquiera su dirección de email para probar tu servicio.

Los usuarios estarán mucho más propensos a darte su email si se lo pides luego de que estén conformes con tu servicio, y tengan una idea de lo que recibirán por eso.

Formulario de registro de Stikkit

Stikkit es un perfecto ejemplo sobre formularios user-friendly (Diseño centrado en el usuario), pidiéndole prácticamente nada a sus usuarios.

Formulario de registro de Mite

Aparentemente, Mite requiere más datos. Sin embargo el registro se puede hacer en menos de 30 segundos, e incluso como el formulario es horizontal, el visitante ni siquiera debe bajar la página.

Lo ideal es no poner barreras de ningún tipo, tampoco le pidas el registro de tus usuarios al principio. El formulario de registro por sí solo ya es motivo suficiente para que tus visitantes abandonen tu Web al solo verla.

3. Maneja el foco de atención del visitante

En todo Sitio Web hay contenido estático y contenido dinámico, a su vez, hay cosas que llaman más la atención que otras. Obviamente, las imágenes son más atrapantes que el texto, así como el texto bold atrae más la atención que el texto plano.

El ojo humano no sigue patrones lineales, instantáneamente reconoce formas, patrones, movimientos, es por esto que los avisos animados son extremadamente molestos y distrayentes, aunque desde su perspectiva de marketing cumplen su función a la perfección, al robar la atención de los visitantes.

Landing Page de Enso

Humanized.com utiliza a la perfección este principio del foco. El único elemento que es verdaderamente visible es la palabra gratis (free) la cual es atractiva y apeladora, y aún así es puramente informativa. Luego se incluye la información necesaria para saber más acerca de este producto gratis.

Un uso adecuado del foco de los usuarios ayudará a guiarlos a través de los contenidos de tu sitio, permitiendo una comunicación efectiva. Mientras menos elementos visuales halla, mejor orientados estará el usuario y mejor será la perspectiva que tendrá acerca de la compañía.

4. Enfócate en la claridad

Independientemente del Concepto de Diseño, la claridad de la estructura visual y de la información siempre deben ser prioridad en el proceso de diseño. Si surge alguna posibilidad de malas interpretaciones, el diseño debe ser replanteado. Para conseguir esta meta nuestro diseño no necesariamente debe poseer una estructura estandar, ya que incluso las estructuras menos comunes pueden ser las ideales para organizar nuestros contenidos. Mientas más organizada estén tus categorías, más simple de encontrar serán los contenidos de tu Web.

Estructura de Hovie

Hovie.com muestra una estructura muy poco común, empero muy clara solución organizativa. Este Sitio Web consiste en 5 columnas, la primer columna posee el menú principal, la segunda columna posee el sub-menú relativo a la categoría principal, la tercera columna es el área de contenidos, la cuarta ofrece datos relativos y la quinta es estética. El resultado es super innovador, y aún así es simple, claro y efectivo.

Normalmente el diseño web moderno es acusado y criticado por sus estructuras del tipo paso 1, paso 2, paso 3, sus grandes botones, sus descripciones, guías visuales, etc. Pero estas características no son para nada malas, por el contrario. Estas guías visuales son extremadamente efectivas, ya que guian al usuario de la forma más simple, clara y rápida posible.

Permite que el usuario se entere rápidamente cuales funciones están disponibles, esto es un principio fundamental en todo diseño de interfaces. No importa como se logre, lo que importa es que el contenido sea bien entendido y los usuarios se sientan cómodos en la forma en que interactúan con el sistema.

5. Utiliza un lenguaje efectivo

Ya que el Diseño Web es diferente al Diseño Impreso, es necesario ajustar el estilo de escritura al público adecuado. La escritura promocional será pasada por alto y pocos la leerán, lo mismo pasará con los textos largos sin imágenes. A su vez el lenguaje exagerado es muy propenso a ser ignorado.

Es esencial la elección del estilo de redacción adecuado. Nota: Este artículo trata sobre Usabilidad, cuando se habla de lenguaje efectivo en términos de Usabilidad, se hace referencia (básicamente) a que nuestro público lo entienda. Muy distinto es el lenguaje persuasivo, así también el estilo de escritura o comunicación que tratan los principios en Conexión Emocional.

Landing Page de Eleven

Eleven2.com va directo al punto. No solo es una buena estrategia de marketing, sino que emiten su mensaje rápida y claramente.

Una buena solución para muchos casos podría ser:

  • Usar frases cortas y concisas (ir al punto lo más rápido posible)
  • Usar estructuras escaneables (categorizar el contenido, usar encabezados con distintas jerarquías, elementos visuales y listas que rompan el flujo de los bloques de textos)
  • Una buena opción es utilizar textos objetivos (una promoción no necesariamente debe sonar como una promoción, intenta comunicarle a tus usuarios de una forma objetiva porqué deben usar tu servicio o permanecer en tu web)

6. Mientras más Simple, mejor

Esta es una de las reglas primarias del Diseño. Las mejores respuestas siempre son las más simples, si creés que algo tendría que ser más simple, entonces le falta optimización.

Diseño web de CRC

Crcbus ayuda al visitante con un diseño claro y simple. Quizas no sepamos de qué trata este sitio (ya que es italiano), empero aún así se distingue claramente su navegación, la cabecera, el área de contenido y el pié de página. De un simple vistazo el visitante sabe como funciona el sistema.

Desde el punto de vista del visitante, el mejor diseño es en el que las cosas están donde el creería que tienen que estar, y no más que eso. La información prevista debe ser la que el considere necesaria, ni más ni menos, y no hay nada que lo moleste o lo confunda.

Diseño web de Finch

Finch presenta claramente la información del sitio y otorga al visitante algunas opciones sin abrumarlo con contenidos innecesarios.

7. No le temas al espacio en blanco

El espacio en blanco es uno de las herramientas más sub valoradas de la actualidad. No solo ayuda a reducir el tiempo de carga cognitiva del visitante, sino que también simplifica la información presentada. Lo primero que hace un usuario al ingresar a una web es escanear el contenido y subdividir mentalmente el contenido en distintas áreas e ir centrándose paso a paso en las que le interesan.

Las estructuras complejas son difíciles de leer, escanear, analizar y trabajar con ellas. Por el contrario las estructuras jerárquicas reducen la complejidad visual, haciendo el contenido más simple de percibir.

Estructura de Cameron

Cameron.io utiliza el espacio en blanco como herramienta primaria de diseño. El resultado es una estructura muy escaneable que destaca la presentación del contenido.

8. Utiliza un Lenguaje Visible

Aaron Marcus destaca los three fundamental principles involucrados en lo que denomina “lenguaje visible”, básicamente es lo que el usuario ve en una pantalla.

  • Organización: Provee al usuario una clara y consistente estructura conceptual. Consistencia, estructura visual, relaciones y navegabilidad son conceptos importantes de la Organización. Las mismas convenciones y reglas deben ser aplicadas en el sistema.
  • Economía: Realiza lo más posible con la menor cantidad de elementos visuales. Para esto hay cuatro puntos básicos: Simplicidad, claridad, carácter distintivo y énfasis. Simplicidad: incluye sólo los elementos que son más importantes para la comunicación. Claridad: Todos los componentes deben distinguirse claramente y su significado no debe ser ambiguo. Carácter distintivo: Las partes de la página con funciones distintas deben ser percibidas diferentemente. Énfasis: Los elementos más importantes deben ser claramente percibidos como tales.
  • Comunicación: Cuando hablamos de Comunicación en Usabilidad, se trata de una comunicación objetiva (los conceptos de comunicación persuasiva no son abordados en la Usabilidad), aquí nos estamos refiriendo a, por ejemplo, la interface de un software. Toda interface debe poseer un buen balance de legibilidad, redacción, tipografía, simbolismo, jerarquías, y color / textura para comunicar efectivamente.

9. Utiliza bien las convenciones

Las convenciones son las Normas o prácticas admitidas tácitamente, que responden a precedentes o a la costumbre, por ejemplo, si la gente ve una importante lista de enlaces, inmediatamente va a reconocerla como el menú de navegación principal del sitio web, simplemente porque este es el caso de la mayoría de los sitios que ya ha visitado. Las convenciones son extremadamente útiles para reducir la carga cognitiva del usuario, nuestros visitantes se darán cuenta más rápidamente de cómo funcionan las cosas en nuestra web.

Amazon.com
Ejemplo de una buena utilización de las convenciones, Amazon.com en idioma Ruso.

Un típico ejemplo para probar la Usabilidad de un Sitio Web, es realizar un testeo cambiando el idioma de tu sitio a otro idioma extraño (por ejemplo con Babelfish) y pedirles a tus usuarios de prueba que encuentren una determinada cosa, o realicen una determinada tarea. Si todas las convenciones están bien aplicadas, estos usuarios de prueba podrán lograrlo, aún cuando no puedan entender ni una sola palabra.

Steve Krug sugiere que es mejor innovar solamente cuando se está seguro que se tiene una mejor idea, pero se debe seguir las convenciones de no ser así.

10. Realiza pruebas de rendimiento

Las pruebas de Usabilidad son las pruebas más sencillas de realizar, y también las más importantes, ya que nos ofrecen insignias cruciales sobre los problemas fundamentales de nuestro sitio web.

Lamentablemente en Argentina muy pocas PyMEs conocen los beneficios generados a través de unas acordes pruebas de rendimiento. Una de las grandes ventajas de las interfaces digitales es que son medibles, cuantificables, fáciles de analizar y de optimizar. Cómo llevar a cabo un buen test de rendimiento y optimización no es un tema simple de tratar, para mayor información podés visitar otro artículo escrito por nosotros acerca de las pruebas A/B.

Algunos puntos claves a considerar:

  • Testar un usuario es 100% mejor que no testar ninguno, y testear un solo usuario al inicio del proyecto es mejor que testar 50 usuarios al final. Esto se debe a que los errores son más frecuentes durante la etapa conceptual, que durante la etapa de desarrollo, y lógicamente mientras más tarde son detectados más complicados son de resolver.
  • Según Jackob Nielsen, los problemas de Usabilidad más importantes de nuestro Sitio Web son detectados al analizar los primeros 5 usuarios.
  • Testar es un proceso interactivo. Esto significa que al diseñar algo, esto debe ser testado, optimizado, y luego ser testeado de nuevo. Es importante destacar que luego de la primer optimización pueden emerger problemas que antes eran bloqueados por otros problemas anteriores.
  • Los test de Usabilidad siempre producen resultados utilizables.
  • Según la ley de Weinberg, un desarrollador / programador nunca debería testear su propio trabajo (este podría crear el test, pero nunca testearlo por si mismo). Lógicamente lo mismo se aplica a un diseñador. Esto es debido a que después de trabajar en un sitio web, ya conocés como es su estructura, su navegación y demás, ya sabés exactamente como funciona el sistema.

Conclusión:

El nivel de Usabilidad es uno de los tantos factores que indicarán el éxito o fracaso de todo sitio web, como también es uno de los más simples de cuidar. Si te has dado cuenta que tu web no cumple con algunos de estos 10 principios, es muy probable que estés perdiendo dinero (directa o indirectamente) ya que gran parte de tus usuarios están teniendo problemas en tu web, aumentando su frustración y/o incomodidad, percibiendo tu empresa de una forma indeseada.

 

¿Tienes alguna pregunta al respecto?
Te responderemos al instante.

 

 

gaston acevedoEscrito por Gaston Acevedo

4 Comments

Deja un comentario

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

CUENTANOS TU SITUACIÓN, PODEMOS AYUDARTE