USABILIDAD WEB O EXPERIENCIA DE USUARIO.

PRINCIPIOS BÁSICOS Y BENEFICIOS

Resumen: Cosas que hay que tener en cuenta para hacer una web más fácil de usar por todos y atraer
más visitantes.

Una de nuestras principales funciones como creadores de sitios web, es buscar siempre que nuestros
sitios tengan la mayor facilidad de uso posible. Una facilidad adecuada, para que la mayor parte de los
visitantes que hagan uso de su contenido, lo hagan de manera apropiada.
Esta constante necesidad de lograr que el usuario obtenga las mayores facilidades, dan como resultado
que en la actualidad, el término usabilidad (o experiencia de usuario) sea uno de los más sobresalgan al
momento de estructurar y diseñar los elementos que componen las páginas de internet.

Su grado de importancia ha llegado a un nivel crítico, gracias al incremento de competitividad que se

ha venido generado en el mercado de los sitios web.
La usabilidad parte de los principios del diseño universal o diseño para todos. La buena usabilidad
puede lograrse mediante el diseño centrado en el usuario (que no necesariamente dirigido por él), aunque
se emplean diversas técnicas.
El diseñador de experiencia de usuario (UX) proporciona un punto de vista independiente de las metas
de la programación porque el papel del diseñador es actuar como defensor del usuario. Por ejemplo, tras
interactuar con los usuarios, el diseñador de usabilidad puede identificar necesidades funcionales o errores
de diseño que no hayan sido anticipados.

ÍNDICE DE CONTENIDOS
1. ¿Qué es la usabilidad web?
2. ¿Qué implica hacer una web más usable?
3. Principios básicos en los que se basa la usabilidad
4. Beneficios de mejorar la experiencia de usuario en tu web
5. Consejos prácticos para hacer tu web más fácil de usar
6. Responder a la intención del usuario
7. Errores de usabilidad que debemos evitar
7.1. Demasiado contenido sin división
7.2. Contenido difícil de escanear a simple vista
7.3. Áreas clicables muy pequeñas
7.4. Abuso de la paginación

¿Qué es la usabilidad web?

La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad:

1
 ISO/IEC 9241:
“Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos
a usuarios específicos en un contexto de uso específico”.

La distinción entre usabilidad – facilidad de uso – y accesibilidad, es difícil y en muchos casos

innecesaria. Además, la accesibilidad debe ser entendida como parte de y al mismo tiempo requisito para la
usabilidad, puesto que la accesibilidad no sólo implica la necesidad de facilitar acceso, sino también la de
facilitar el uso. No obstante, no está de más dar unas indicaciones generales sobre usabilidad en particular.
En informática, la experiencia de usuario está muy relacionada con la accesibilidad, hasta el punto de
que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos es Jakob
Nielsen, el cual definió la usabilidad en el 2003 como “un atributo de calidad que mide lo fáciles de usar que
son las interfaces web”.
Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que
los usuarios sean capaces de “encontrar lo que necesitan, entender lo que encuentran y actuar
apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea”.

¿Qué implica hacer una web más usable?

La usabilidad supone hacerse preguntas como las siguientes, que pueden responderse realizando
análisis de usuarios / visitantes y tareas al planificar un proyecto web:
• ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?
• ¿Qué quieren o necesitan hacer los visitantes?
• ¿Cuál es la formación general de los usuarios?
• ¿Cuál es el contexto en el que el visitante está trabajando?
• ¿Qué debe dejarse a la máquina? ¿Qué al usuario?
Otras consideraciones incluyen:
• ¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las tareas previstas
a la velocidad esperada?
• ¿Cuánta preparación necesitan los visitantes?
• ¿Qué documentación u otro material de apoyo están disponible para ayudar al usuario? ¿Puede éste
hallar las respuestas que buscan en estos medios?
• ¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto?
• ¿Puede el visitante recuperarse de los errores? ¿Qué ha de hacer para ello? ¿Ayuda el producto a
recuperarse de los errores? Por ejemplo, ¿muestra el software mensajes de error, informativos y no
amenazantes?
• ¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con
discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)
Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus visitantes vuelvan
una y otra vez, puesto que al ponerles fácil la navegación por tu sitio mejorarás mucho la imagen de tu web.
Y como consecuencia de todo esto, te ayudará a mejorar tu SEO, ya que el SEO moderno se basa
entre otras cosas en la respuesta que dé el usuario a lo que le ofreces. Si es buena (mucho tiempo en el sitio,
páginas vistas, poco rebote, buen CTR en las SERP’s…), eso son puntos positivos muy importantes para
escalar posiciones en Google. Si es pobre, es una señal de que tu web no responde a las necesidades de los
usuarios, por tanto no merece estar tan bien posicionada.

2
Principios básicos en los que se basa la usabilidad
• Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva
con el sistema o producto. Está relacionada con la sintetización, familiaridad, la generalización de los
conocimientos previos y la consistencia.
• Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden
intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para
realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.
• Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está
relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste
de la tarea al usuario.

Beneficios de mejorar la experiencia de usuario en tu web

Son diversos son beneficios que aporta la usabilidad a la web, por eso hay que tenerla en cuenta desde
los primeros momentos del diseño y desarrollo web de un sitio.
En el momento de organizar los contenidos de la web es importante pensar en la usabilidad, te aportará
beneficios como:
• La experiencia de usuario permite mayor rapidez en la realización de tareas y reduce las pérdidas de
tiempo.
• El aprendizaje del manejo de la web es mucho más rápido e intuituvo, y el usuario enseguida se
familiariza con la página, haciendo nuestros productos o servicios más visibles.
• Los visitantes se sienten más seguros y necesitan menos ayuda por parte del soporte técnico de la
web, con la consiguiente reducción de costes y esfuerzos y una percepción más positiva de la
visitas.

Consejos prácticos para hacer tu web más fácil de usar

Una web útil debe anticiparse a las necesidades del usuario, el cual debe tener el control sobre el sitio
web en el sentido de poder navegar con soltura y realizar las acciones que desee sin dificultad.
Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados
máximos, lo que implica que desde el principio el visitante sea capaz de usar de forma intuitiva los recursos
que se le ofrecen.
El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente
grande. Los colores han de utilizarse con precaución de forma que el contenido sea legible. Aunque pueda
parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al
usuario el uso de un sitio. Revisa los enlaces periódicamente para evitar enlaces rotos o enlaces a webs que
ya no existen.
Ofrece de forma clara a los usuarios de tu web un medio de contacto con el administrador, esto mejora
la opinión sobre la web al no encontrarse sólo ante las posibles dificultades que puedan surgir y fomenta la
comunicación entre el diseñador y el potencial cliente.
Para ello es muy útil utilizar formularios implementados directamente en el sitio web, ya que evitas al
visitante tener que abrir su gestor de correo electrónico y le ahorras tiempo.

Además, algunos consejos concretos para diferentes partes de la web son:

• Cabeceras del sitio: incluir solo las opciones fundamentales, que estén bien definidas tanto en su
significado como en su representación. Evita imágenes grandes y pesadas (tamaño) pues te restan
espacio para poner contenidos y demoran la carga de la página.
• Registro de usuarios: permite que tus usuarios naveguen por la web sin necesidad de registrarse,
ofréceles información útil para que sepan qué ofreces en tu página. Por ejemplo, permite el libre
acceso a la consulta de las subastas antes de pujar, consulta de los catálogos de tus productos y
poder buscar en todo el sitio antes de registrarse. Puedes crear secciones exclusivas para usuarios
dándoles motivos para que se registren cuando quieran, por ejemplo, para adquirir un producto de tu

3
 catálogo o para la descarga de software. Simplifica el formulario de registro, solicita sólo la
información necesaria.
• Formularios: procura reducir al máximo el número de campos, no pidas información que no necesitas
sólo por tenerla. Tener que rellenar formularios de registro muy grandes puede hacer que algunos
visitantes cambien de opinión y dejen tu página. Piensa que cuanto más corto es, menos pereza da
rellenarlo.
• Enlaces: procura que la palabra enlazada indique claramente el destino.
• Color de fondo: si el texto es extenso, es recomendable usar un fondo claro (preferiblemente blanco)
y texto oscuro (preferiblemente negro).
• Velocidad de carga de la página: reduciendo el peso de la página podemos hacer que el usuario
visite más páginas en el mismo tiempo de conexión. En un sitio donde las páginas bajan con rapidez
no da pereza pinchar en los enlaces para seguir leyendo. Añadir demasiados elementos gráficos o
códigos muy complejos sólo genera páginas más lentas, por lo que nadie va a apreciar la mejora si
al final la web tarda mucho en cargar. Puedes analizar el tiempo de carga de tu página web con
PageSpeed y decidir si necesitas optimizar imágenes, código JavaScript, etc.
• Buscador: si tienes una web con muchas páginas (incluso si no) puedes ser muy útil proporcionar
un buscador interno para que tus visitantes puedan moverse con más facilidad y encontrar
rápidamente la información que están buscando.

Responder a la intención del usuario

Lo primero que debemos plantearnos es determinar si ofrecemos al usuario lo que él realmente está
esperando de nuestro sitio.

Definir bien la función de nuestro sitio Web y tener bien en claro cuál es su objetivo primordial una vez
que llega al usuario final, nos indicará que factores debemos tomar con más relevancia al momento de querer
alcanzar y evaluar el nivel de calidad.

Por otro lado, un sitio con alto grado de usabilidad pero poco atractivo visualmente no será correcto en
términos de marketing, ya que esto puede causar la partida o desconocimiento de nuestro sitio por parte un
gran grupo de visitantes potenciales, es por ello que el factor estética entra en escena para aumentar la
calidad de nuestro sitio.
Este factor es altamente relativo, todo va a variar en base al tipo de sitio que estamos manejando, una
serie de colores puede cambiar todo el significado de la página, le puede dar adjetivos de sobrio o divertido,
y todo esto va a depender de nosotros.
No podemos crear un sitio para una empresa de organización de fiestas infantiles donde la plantilla sea
en escala de grises, en cambio si la empresa es de organización de fiestas para bodas o graduaciones esta
paleta de colores si podría ser considerada.

Errores de usabilidad que debemos evitar

4
 Una vez que han aprendido a navegar por los niveles de tu sitio, lo siguiente en su mente, es realizar
las tareas de manera rápida. Aún cuando el usuario ya haya utilizado el sitio previamente, siempre existirá un
pequeño lapso de tiempo, donde deberá recordar cómo realizar ciertas acciones.
Todos estos pasos, marcan la experiencia del usuario en tu sitio, y durante este proceso pueden
encontrarse con algunos errores, los cuales pueden ser muy severos o muy frecuentes, dañando seriamente
dicha experiencia.
La usabilidad es un indicador de la calidad que el usuario obtuvo en su experiencia al navegar tu sitio
web, es por ello que debes evitar a toda costa, realizar alguno de estos errores.

Demasiado contenido sin división

Cuando el contenido es muy extenso se hace imprescindible proporcionar una estructura clara y
proporcionar divisiones dentro de ese contenido para que el usuario pueda entender más rápidamente de que
trata.
En caso de textos, es conveniente usar encabezados de distintos niveles para separar temas, usar
imágenes y recursos gráficos que ayuden a entender el contenido e incluso el uso de medios audio visuales
como videos o audios.
Se trata de hacer fácil de consumir la información.

Contenido difícil de escanear a simple vista

Este error viene de la mano del punto anterior, ya que aunque tengas una adecuada división de
contenido, si el texto no es fácil de explorarse a simple vista, de nada servirá.
Los visitantes de un sitio, sobre todo los primerizos, tienden a omitir la mayoría de la información que
presentas en tus páginas.

Un usuario va brincando de una parte a otra dentro del contenido, guiándose esencialmente en lo que
más rápidamente logre atraer su interés. Este comportamiento es producido por la cantidad de información
basura con la que el usuario es bombardeado al navegar de un sitio a otro, por lo que es difícil que ponga el
100% de su atención en lo que estamos exponiendo.
Como diseñador de páginas web, tu misión para evitar este error, es estructurar tus páginas de forma
que se adapten a este comportamiento frenético.

Áreas clicables muy pequeñas

Áreas clicables son los enlaces, botones y elementos interactivos de tu web.

Si no poseemos áreas de clic grandes, el usuario necesitará poner un esfuerzo extra para lograr el
evento, ya que los movimientos con el ratón serán menos precisos, causando lentitud en la navegación y
haciendo que la experiencia se vea afectada. En el caso de los dispositivos móviles, el usuario debe poder
interactuar sin dificultades con sus dedos.
Al tener zonas de clic más grandes, el usuario puede realizar las acciones de manera más cómoda.
Para lograr esto, se puede recurrir a utilizar elementos con más margen interno, conocido como padding.

Abuso de la paginación
La paginación es una de las mejores herramientas que se han logrado implementar para mejorar la
navegación de los usuarios en un sitio. Hace que el despliegue de contenido sea más conveniente, y permite
al usuario absorber de mejor manera la información que se presenta.

5
 Esta técnica, se utiliza principalmente para dividir el contenido en varias páginas, y es una característica
que suele verse en los sitios que presentan una larga lista de elementos.
No obstante, si esta funcionalidad es malinterpretada y mal utilizada, convierte a esta técnica en un
factor que contribuye en gran medida a inconvenientes de usabilidad, llegando incluso a irritar a los visitantes.

Lo que buscan estos sitios es mejorar sus ingresos, haciendo que el usuario visite más páginas dentro
de su mismo sitio, produce una mejora en las estadísticas de observación, lo que a su vez lleva que puedan
cobrar más por anuncios y publicidad.
Hacer esto no solo implica una falta de usabilidad, si no que afecta en gran medida al SEO de tu página,
ya que al dividir un artículo pequeño en varias páginas, los buscadores pueden guiar a los usuarios a una
parte distinta cada vez que busquen ciertas palabras claves. Además de esto, cada página por separado hace
que el artículo en general pierda cierto sentido.

6
 El equilibrio en el diseño web
Resumen: El equilibrio visual del diseño web es importante, tanto para aspectos estéticos como para que los
contenidos tengan la jerarquización que corresponde.

El diseño de una página web incluye el empleo de varias disciplinas, entre las que se encuentra el
diseño gráfico. La presentación visual de una página web es una representación gráfica y como tal sigue
los lineamientos generales del diseño gráfico. Los elementos componentes de una página web deben ser
combinados de forma tal que el objetivo con el que se diseña sea logrado. Cada componente de la página
web tiene una jerarquía respecto de los otros, por lo que es necesario buscar la combinación de elementos
que haga posible que esta jerarquía se vea resaltada. El diseñador debe lograr que la página tenga la máxima
eficiencia comunicativa que sea posible. Esto solo es posible mediante el impacto visual, logrado con la
correcta disposición de los elementos.
Para que el mensaje llegue al usuario, todos los elementos deben estar equilibrados. Este equilibrio
tiene una serie de reglas básicas que todo diseñador de páginas web y diseñador gráfico debe conocer. Sin
embargo, un error frecuente en el diseño es realizar el mismo para luego introducir los componentes, cuando
en realidad el diseño debe estar pensado para que los componentes se vean de tal forma que el mensaje
llegue en forma correcta al usuario.

Índice de contenidos
1. Equilibrio de las proporciones
2. Equilibrio de las escalas
3. Agrupación de elementos
4. Alineación del diseño
5. Equilibrio de contenidos
6. Jerarquía visual

Equilibrio de las proporciones

Cada componente de una página web tiene un peso visual, el cual depende de sus atributos, como
forma, color, tamaño, etc. Este peso visual, es la proporción. Lo primero que se nos ocurre al hablar de
proporción, es el tamaño relativo del objeto en cuestión. Un elemento más grande que otro, tiene una
atracción visual superior que el segundo. Pero además, la carga visual de un elemento también depende de
otros atributos, como el color. Un objeto de color saturado, tiene un peso visual superior que otro cuyo color
tiene una saturación menor. Las formas tienen también influencia en la proporción de los elementos. Así
pues, un elemento de forma irregular tiene mayor atracción visual que un objeto de forma regular.
Todos estos atributos deben guardar una proporción tal que los elementos que se desee resaltar sean
más visibles que otros, pero de forma tal que tampoco los elementos secundarios “desaparezcan”. Hay
muchas formas de conseguir que las proporciones de los diferentes objetos se adecúen al fin perseguido.

Equilibrio de las escalas

Las proporciones de los diferentes elementos de un diseño tienen una relación entre sí que
denominamos escala. Esta escala, que en principio pensamos exclusivamente en relación al tamaño de los
objetos, abarca a todos los atributos de los mismos. Esto quiere decir, que deben tenerse en cuenta las
escalas de tamaño, de forma, de color. Cada uno de los atributos de un objeto, tiene una dimensión, la cual

7
no es absoluta, sino relativa, ya que depende de los atributos de los demás objetos. Por ejemplo, un cuadrado
de 120 pixeles de lado es grande si se encuentra junto a otro de 60 pixeles, pero es chico si se le relaciona
con uno de 200 pixeles. Lo mismo sucede con los colores. Un objeto de color amarillo sobre fondo negro es
más llamativo que uno de color gris ubicado a su lado; sin embargo, el mismo elemento amarillo, sobre fondo
blanco es mucho menos llamativo que un objeto de color rojo ubicado también a su lado.

La escala, en definitiva, es muy importante para relacionar objetos de diferentes proporciones. Todo
diseño equilibrado debe estar integrado por elementos que mantienen una cierta relación entre sus
proporciones. Un ejemplo práctico lo vemos en el siguiente diseño, donde (solo por tomar la relación existente
entre algunos de sus elementos) la escala del encabezado y del menú, tienen una relación tal que la atención
fluye rápidamente hacia el primero, pero con una diferencia tal que hace posible que el menú sea visible para
los usuarios y dar una buena navegabilidad a la página. El equilibrio de las escalas, en este ejemplo, puede
apreciarse en el tamaño, en el color y en las formas.

Agrupación de elementos

Dentro de las reglas del equilibrio de un diseño, debe tenerse muy presente que una de las formas de
lograr un mejor equilibrio entre los diferentes elementos, es la agrupación de los mismos. La agrupación,
además, consigue otro factor importante en un diseño, que es el orden. La agrupación de elementos es
natural en el ser humano, que tiene la tendencia a colocar juntos a objetos afines. Esto, en el diseño de
páginas web, tiene como finalidad darle lógica y racionalidad a la ubicación de los diferentes elementos, de
forma tal que la comunicación del mensaje sea efectiva.
Los componentes de una página pueden agruparse de acuerdo a varios criterios:
• Por proximidad, la forma más elemental de agrupar los objetos, que consiste en agruparlos de
acuerdo a su cercanía física.
• Por semejanza, que consiste en agrupar objetos de acuerdo a su parecido visual.
• Por continuidad, es decir, de acuerdo al significado de los elementos.
• Por simetría, que es agrupar objetos de manera tal que den la sensación de conformar una figura
conocida o simétrica.
La agrupación es uno de los equilibrios más sencillos de ver en un diseño web. Es muy común, por
ejemplo, ver agrupaciones de imágenes, o que los textos se encuentren en un lugar determinado de la página,
los botones de navegación siempre están agrupados en un menú, etc.

Alineación del diseño

Para que la composición no aparezca como caótica, los diferentes elementos y grupos de elementos
deben aparecer ordenados de acuerdo al trazado de líneas imaginarias, tanto verticales como horizontales,
que se denominan reticulado. La alineación es importante, debido a que cuando se colocan muchos objetos
dentro de un diseño, la forma más sencilla de que los usuarios logren ubicarlos e identificarlos es que se
encuentren alineados. Esto se ve acentuado por el hecho de que la propia forma de los monitores es
rectangular, por lo que el ordenamiento según líneas rectas es algo natural. En la imagen siguiente, vemos
una página alineada, tanto vertical como horizontalmente y donde resulta muy sencillo trazar líneas
imaginarias sobre las que se encuentran los componentes:

8
 La alineación de los textos, es además, un aspecto importante en la comunicación. Lo usual, siguiendo
la tradición escrita, es que los mismos se encuentren alineados a la izquierda, aunque excepcionalmente y
debido a ciertas circunstancias, los textos pueden aparecer alineados a la derecha, centrados o justificados,
aunque lo recomendable, para facilitar la lectura, es que se emplee la primera de las alineaciones.

Equilibrio de contenidos

Toda página web está integrada por elementos textuales, gráficos y ocasionalmente con contenidos de
otros medios. Desde el punto de vista del diseño de una página web, y dado la relevancia de los dos
primeros, nos referiremos al equilibrio entre los elementos gráficos y textuales. Los elementos textuales son
indispensables, ya que aportan la mayor parte de la información que se desea transmitir. Los elementos
gráficos, además de también hacer aportes de información, suministran las sensaciones visuales necesarias
para acompasar y resaltar el sentido del mensaje de la web.
El abuso de cualquiera de los dos tipos de elementos es contraproducente, ya que los usuarios
necesitan la información por la que llegan a la página, pero también necesitan sentirse atraídos por el lenguaje
visual. Por consiguiente, el equilibrio entre estos tipos de componentes de una página, es fundamental.

Jerarquía visual

Una página web equilibrada debe mantener una cierta jerarquización de los contenidos, de forma
tal que la vista del usuario sea guiada en forma adecuada a través de los mismos. La jerarquización de los
componentes comienza con la ubicación de los mismos. Dado que el sistema de lectura empleado en
occidente es de izquierda a derecha y de arriba hacia abajo, existe una tendencia natural en los individuos a
recorrer los objetos gráficos en ese orden. Por consiguiente, es natural que el elemento más importante de
una página web (su logotipo) se encuentre ubicado en la esquina superior izquierda o muy cerca de ella,
seguido hacia la derecha por el título de la página.
La jerarquización de los elementos componentes de una web, puede realizarse también empleando
colores y contraste. Todo contenido de una página web debe tener establecida su jerarquía en la misma,
empleando para ello cualquier técnica de diseño.