Cómo crear sitios web de éxito

Usabilidad Web
en la práctica

Javier Eguíluz Pérez

Miguel Sánchez Pérez

Usabilidad Web en la práctica Índice

2
Usabilidad Web en la práctica Índice

Índice
1 Introducción ......................................................................................... 4

2 Textos y tipografía ................................................................................ 6

3 Escribir para la web .............................................................................. 8

4 Enlaces................................................................................................ 10

5 Elementos multimedia......................................................................... 11

6 Navegación ......................................................................................... 13

7 Buscadores ......................................................................................... 17

8 La página principal.............................................................................. 19

9 Publicidad ........................................................................................... 21

10 Evaluar la usabilidad ........................................................................... 22

11 Libros recomendados .......................................................................... 24

12 Información de contacto ..................................................................... 25

3
Usabilidad Web en la práctica Introducción

1 Introducción

1.1 ¿Qué es la usabilidad?

Definición ofrecida por la ISO (Organización Internacional de Estandarización) en su
estándar ISO 9241-11:

“El grado hasta el que un producto puede ser utilizado por unos usuarios específicos
para realizar unos objetivos específicos de forma efectiva, eficiente y satisfactoria
dentro de un contexto de uso específico.”

Jakob Nielsen, uno de los más importantes expertos en este campo, relaciona la
usabilidad con los siguientes cinco conceptos: 1) eficiencia, 2) facilidad de aprendi-
zaje, 3) facilidad para recordar, 4) gestión de errores y 5) satisfacción.

1.2 ¿Qué es la usabilidad web?

Referida al software y a las páginas/aplicaciones web, la usabilidad “es la cualidad
que determina lo sencillo que es utilizar una interfaz de usuario”. La usabilidad
también se refiere a los métodos utilizados durante el proceso de diseño para mejo-
rar la facilidad de uso.

La importancia de la usabilidad web es cada vez mayor a medida que los navegado-
res se convierten en los clientes universales que permiten el acceso a todo tipo de
aplicaciones.

Además de la sencillez de uso, la usabilidad web también considera la facilidad de

aprendizaje y la rapidez y eficiencia al realizar las tareas mediante la interfaz dis-
ponible.

1.3 ¿Por qué es importante?

• Aumenta la productividad, reduce el coste de soporte y de aprendizaje, au-
menta las ventas y reduce el tiempo y coste de desarrollo.

• No sólo son factores económicos. Los usuarios aseguraron que el 60% de las
veces no son capaces de encontrar la información que buscan. El resultado
es una pérdida de tiempo y de productividad, una mayor frustración de los
usuarios y el abandono de los sitios web.

4
Usabilidad Web en la práctica Introducción

1.4 Glosario
La mayoría de las siguientes definiciones han sido adaptadas a partir de las que se
pueden encontrar en la Wikipedia:

Usabilidad (usability): grado hasta el que un producto puede ser utilizado por
unos usuarios específicos para realizar unos objetivos específicos de forma efectiva,
eficiente y satisfactoria dentro de un contexto de uso específico.

Experiencia de usuario (user experience): (normalmente se abrevia como UX)

se trata de un término que describe la experiencia completa y la satisfacción que
tiene un usuario después de utilizar un producto o servicio.

Diseño de interacción (interaction design): (normalmente se abrevia como IxD

o IaD) es la disciplina que define y diseña el comportamiento de los sistemas y su
respuesta a los usuarios a lo largo del tiempo. Su objetivo es facilitar el aprendizaje
del uso de los sistemas y aumentar la eficiencia con la que se realizan las tareas.
Arquitectura de la información (information architecture): (normalmente se
abrevia como IA) es la práctica de estructurar la información para un propósito. Se
considera como uno de los elementos que forman la experiencia de usuario. La ar-
quitectura del sistema se diseña en función de las necesidades y capacidades de los
usuarios potenciales.

5
Usabilidad Web en la práctica Textos y tipografía

2 Textos y tipografía
La legibilidad de los contenidos de un sitio web es, con mucha diferencia, el ele-
mento más importante de su diseño gráfico.

La finalidad de los sitios web es transmitir información, por lo que en el diseño grá-
fico relativo al texto debe primar lo práctico sobre lo estético.

El error más común de la mayoría de sitios web y el problema del que más se que-
jan siempre los usuarios es el tamaño de letra del texto de los contenidos. En la
última encuesta disponible de Jakob Nielsen, el 66% de los usuarios consideran que
el tamaño de letra pequeño es el principal problema de las páginas web.

El tamaño de letra mínimo adecuado para personas jóvenes sin dificultades de vi-
sión es de 10 o 12 puntos. El tamaño mínimo recomendado para niños, personas
mayores y el resto de personas con problemas de visión es de 12 a 14 puntos.

Las claves para elegir una tipografía correcta son las siguientes:

Utilizar solamente fuentes de uso común (Verdana, Arial, Georgia, Tahoma,

Trebuchet) para evitar el uso de fuentes de tipo “fantasía”, que normalmen-
te son muy difíciles de leer.

El tamaño de letra debe ser como mínimo de 10 puntos (no confundir con 10
píxel, que es diferente y en general, menor).

Siempre se debe elegir el color de letra que tenga más contraste con el fon-
do.

No utilizar efectos como el texto en mayúsculas, texto en movimiento y tex-

to mostrado con imágenes.

En los estudios de usabilidad llevados a cabo, el texto de color negro sobre fondo
blanco se lee un 32% más rápido que el texto de color blanco sobre fondo negro.

6
Usabilidad Web en la práctica Textos y tipografía

La elección de un color de letra con muy poco contraste con el color de fondo es el
segundo error más habitual del texto de los sitios web:

Otro aspecto fundamental relacionado con la legibilidad es la consistencia visual

entre páginas. Los usuarios cometen menos errores y encuentran la información
más fácilmente si todos los elementos que son del mismo tipo tienen un aspecto
similar.

La consistencia visual está formada por el tamaño y espaciado de los caracteres, el

tipo de letra y color del texto y el lugar en el que se muestra el texto y las imáge-
nes:

7
Usabilidad Web en la práctica Escribir para la web

3 Escribir para la web

Los usuarios no leen

• Escanean las páginas. Es necesario elaborar los contenidos de éstas para

que respondan adecuadamente a ese escaneo, atrapen la atención del usua-
rio en los puntos más importantes y le lleven a su objetivo.

• Según señala J. Nielsen en su último libro Prioritizing Web Usability, sólo se

consume el 28% de la información escrita en una web.

• El 30% de la población en EE.UU. y en el Reino Unido tiene niveles de lectu-

ra que bordean el analfabetismo. En España, el informe PISA también ofrece
datos alarmantes en este aspecto.

• Las pantallas de los ordenadores siguen siendo un soporte incómodo para la

lectura. Leer en pantalla es un 25% más lento que hacerlo en papel.

3C: claro, conciso y correcto

• Evitar la errónea costumbre de utilizar contenidos existentes en papel para

colocarlos íntegramente en Internet. Se recomienda una reducción de al
menos el 50%, eliminando palabras sobrantes y utilizando fórmulas de ex-
presión directas.

• Estructurar la información claramente: párrafos cortos, encabezados, listas

de elementos, etc.

• Cada párrafo debe ofrecer una idea única e intentar no superar las tres lí-
neas. La primera frase de los párrafos es la que atrapa al usuario.

• La narración de la página debe seguir un modelo de pirámide invertida, em-

pezando por las conclusiones más importantes y finalizando con los detalles
de menor relevancia.

• Evitar terminología difícil de entender para el usuario y lenguaje corporativo

que reduce su atención sin aportarle nada. El lenguaje sencillo e informal fa-
cilita la lectura.

• Cuidar la corrección mediante la revisión ortográfica y gramatical. Pueden

utilizarse herramientas gratuitas para consultas sobre el uso adecuado del
idioma. Fundéu Vademécum [www.fundeu.es/esurgente/Lenguaes].

8
Usabilidad Web en la práctica Escribir para la web

Titulares o encabezados

• Deben ser breves, únicos y descontextualizables.

• Permiten organizar adecuadamente la información. Cumplen la misma fun-

ción que los titulares en un periódico o revista.

• Ayudan a construir una jerarquía visual de los contenidos.

• Se construyen con las etiquetas <H1> a <H6> de HTML.

• Son muy importantes para el posicionamiento en buscadores (SEO: Search

Engine Optimization).

Títulos de página

• Deben ser breves, únicos y adecuados.

• Se construyen con la etiqueta <title> de HTML.

• Evitar errores comunes.

o No incluir ningún título o incluir el título por defecto de algunos edito-

res de páginas web: “Documento sin título”.

o Desaprovechar la importancia del título dando la bienvenida al sitio o

incluyendo un título muy genérico.

• Son muy importantes para el posicionamiento en buscadores (SEO: Search

Engine Optimization).

9
Usabilidad Web en la práctica Enlaces

4 Enlaces
Los enlaces deben ser claramente distinguibles respecto del texto normal, aunque
ya no es imprescindible que los enlaces sean de color azul y se muestren subraya-
dos.

Cuando se muestra una gran cantidad de enlaces seguidos (por ejemplo en un me-
nú de navegación grande) es mejor eliminar el subrayado para facilitar la lectura.

Si el enlace apunta a un recurso que no es de

tipo HTML, debe indicarlo de forma clara.
Además, se recomienda incluir el tamaño del
recurso enlazado en un formato de fácil com-
prensión (200 KB., 3.5 MB., etc.) Si el idioma
del recurso enlazado es diferente del idioma de la página, también se recomienda
indicarlo en el texto del enlace.

El texto de los enlaces debe indicar de forma clara y muy concisa a dónde irá el
usuario, qué podrá descargar o qué evento se producirá al pinchar sobre el enlace.
Se deben evitar a toda costa enlaces con textos vacíos de tipo “Pincha aquí”.

Los enlaces que el usuario ha visitado anteriormente se deben mostrar con un estilo
diferente al resto de los enlaces.

También es necesario cuidar la densidad de enlaces en la página, ya que una satu-

ración de éstos puede arruinar la experiencia de navegación del usuario agobiándo-
le y proponiéndole más rutas de las que desea para alcanzar su objetivo.

Por otra parte, el texto que muestra el enlace y el título de la página a la que enla-
za deberían coincidir totalmente, para evitar la confusión del usuario. Si por ejem-
plo un enlace muestra el texto “Ayuda”, el título de la página enlazada no debería
ser “Preguntas y Respuestas” o “Preguntas frecuentes”.

10
Usabilidad Web en la práctica Elementos multimedia

5 Elementos multimedia

5.1 Imágenes
Las imágenes de cualquier página web se dividen en imágenes de contenido e imá-
genes de adorno. El uso de las imágenes de adorno debe estar justificado y las
imágenes utilizadas deben ser adecuadas y de cierta utilidad.

No es recomendable cubrir el fondo de las páginas con imágenes, salvo que sean
muy sutiles y permitan visualizar de forma clara todos los elementos de la página.

Reducir al máximo el número de imágenes, su tamaño y su peso, de forma que las

páginas se carguen en el menor tiempo posible.

5.2 Flash
Más del 98% de los usuarios de todo el mundo tienen instalada alguna versión de
Flash, por lo que puede utilizarse de forma segura en los diseños web. Fuente:
http://www.adobe.com/products/player_census/flashplayer/version_penetration.ht
ml

La tecnología Flash no es intrínsecamente mala desde el punto de vista de la usabi-

lidad, pero el mal uso que han hecho de ella la mayoría de diseñadores durante los
últimos años ha arruinado su imagen.

El principal problema de Flash continúa siendo la creación de elementos estándar

del diseño web con un aspecto que no recuerda su funcionalidad:

Entre todos los elementos, las barras de desplazamiento o barras de scroll son las
más maltratadas por los malos diseñadores web. Intentar ser original en el diseño

11
Usabilidad Web en la práctica Elementos multimedia

de una barra de desplazamiento y obviar todas las convenciones establecidas du-

rante años, es un grave error que perjudica seriamente la usabilidad del sitio web.

Otro de los elementos que ha contribuido a la mala fama de Flash son las pantallas
de bienvenida a los sitios web con animaciones pesadas, largas y aburridas. Las
pantallas de bienvenida con animaciones Flash se olvidan por completo del usuario
y le entorpecen en la consecución de sus objetivos.

Por otra parte, Flash ha mejorado por completo la experiencia de visionar conteni-
dos audiovisuales. Gracias a Flash, se han eliminado la mayoría de problemas de
incompatibilidad entre formatos de vídeo y navegadores, sistemas operativos y los
CODEC.

Si se incluye un vídeo Flash, es recomendable que no comience a reproducirse de

forma automática. Además, es esencial que el sonido no esté activado por defecto.
En cualquier caso, debe ser muy fácil detener la reproducción y silenciar el sonido
del vídeo.

12
Usabilidad Web en la práctica Navegación

6 Navegación

6.1 Objetivos

Indicar al usuario dónde ha estado previamente. De dónde viene.

Indicarle su ubicación en todo momento. Dónde está.

Mostrarle claramente otros caminos desde esa ubicación. Dónde puede ir.

Hacer obvia la ruta o acción para conseguir algo.

Diferenciar claramente los enlaces de la navegación del resto de contenidos.

Indicar claramente la información y destino de los enlaces.

6.2 Sistemas
El sistema de navegación más básico presente en
miles de sitios web de todo el mundo. Es conocido
como global, local y contextual. Estos tres mó-
dulos acompañan al contenido de la página y
mantienen ubicado al usuario, además de ofrecer-
le un referente visual de la estructura del sitio. La
navegación global le indica dónde está, la local le
muestra otras opciones cercanas y la contextual le da acceso a informaciones aso-
ciadas a los contenidos de la página que está visitando.

En ocasiones, este sistema básico no es suficiente y necesita estar apoyado por

otros suplementarios. Los más importantes y conocidos son el índice, la guía y el
mapa del sitio.

Tampoco hay que olvidar la importancia del contexto. Una de las principales formas
de evitar que el usuario se sienta perdido es garantizarle en todo momento una
persistencia en el diseño que le permita siempre ver el nombre del sitio web, su
logotipo y los colores de su identidad.

13
Usabilidad Web en la práctica Navegación

6.2.1 Modelos

Listas de elementos

Las listas de elementos son uno de los modelos más sencillos y

eficaces para la navegación. Los usuarios prestan atención a esta
estructura ordenada y simple, siempre que el listado de elemen-
tos no sea excesivo. Además de ser un modelo organizado de re-
presentación de datos, puede usarse para navegaciones auxiliares
o contextuales, ya que su estética no resta importancia a la nave-
gación principal.

Migas de pan (breadcrumb trails)

Apenas requieren una línea en el diseño, pero ayuda al usuario indicándole:

dónde se encuentra dentro de la jerarquía/estructura del sitio web;

niveles anteriores a su ubicación para facilitarle regresar a ellos.

Normas básicas para su elaboración.

Construir en horizontal. En vertical se confundirían con una navegación se-

cundaria.

Mostrar claramente, con buen contraste y fácilmente accesibles.

Incluir siempre la ruta completa, desde la página principal hasta la página

en la que se encuentra el usuario.

El título de la página y su identificación en el breadcrumb deben ser iguales.

Evitar textos del tipo “Está usted aquí”. Sólo añaden ruido al diseño.

Evitar en la página principal del sitio web. No aportan ayuda.

Utilizar el símbolo “>” (mayor que) en la composición de la ruta.

14
Usabilidad Web en la práctica Navegación

Barra horizontal superior

Perfecta para construir en ella la navegación principal o global, dejando la secunda-

ria o local para los laterales de la página. Uno de los motivos es que generalmente
las páginas tienen orientación vertical.

El usuario tendrá acceso a la navegación general del sitio en la zona superior y, una
vez seleccionada una sección, la navegación local soportará mejor el scroll vertical
de la página. Además, la navegación global es más sólida y menos sometida a cam-
bios y ampliaciones que la local. Así que es más oportuno reservarle una zona don-
de el espacio es limitado y dejar el crecimiento vertical para los menús locales.

Solapas

Aporta buenos niveles de usabilidad, porque se sirve de un símil con el mundo real
(carpetas, bibliotecas, clasificadores, etc.).

Ventajas:

Muestran claramente al usuario la sección o categoría que ha seleccionado.

El diseño debe asociar el color de la solapa marcada con el de los conteni-
dos.

Modelo de jerarquía visual muy natural. Todos los usuarios entienden que
los contenidos están sometidos a la identificación de la solapa, como ocurre
en el mundo real.

Eliminan ambigüedad en la navegación. Sólo uno de los elementos puede

estar seleccionado cada vez.

Barra superior de dos niveles

Integración de la navegación global y local en una misma barra superior. El usuario

gana proximidad en su selección y el diseño libera uno de los laterales. El ancho es
limitado y no será recomendable para incluir navegación local extensa.

15
Usabilidad Web en la práctica Navegación

Las solapas también se pueden considerar una barra horizontal superior de navega-
ción. Esto da la oportunidad de usar sus ventajas, utilizándolas en la construcción
de dos niveles.

Menús desplegables (drop-down menus)

Esperan que el usuario haga click o sitúe el ratón sobre una de las opciones pro-
puestas. Ese evento despliega los submenús asociados. Jakob Nielsen recomienda
que se limite su uso (http://www.useit.com/alertbox/20001112.html).

Su principal ventaja es dar acceso a un numeroso bloque de opciones (todos los

submenús del sitio web) sin ocupar un espacio real en el diseño.

Sus desventajas son más numerosas.

El usuario no sabe lo que activa el menú hasta que hace clic o se sitúa en él.

No hay un patrón de comportamiento dominante.

Puede ser un obstáculo para la accesibilidad.

Navegación multi-nivel en árbol

Se considera un modelo de navegación complejo, ya que comprende múltiples nive-

les y jerarquías. Su mecanismo es más común en aplicaciones de escritorio.

Paginación

Fácilmente reconocible por todo tipo de usuarios. Es fácil imaginar un símil del
mundo físico, como acceder a las páginas de un libro.

Solucionado el problema principal de su uso, aparecen otras cuestiones como a qué

páginas se les dará acceso directo como enlaces, dónde se mostrará la página ac-
tual dentro de la secuencia, cómo mostrar el total de páginas, etc. La respuesta a
estas preguntas estará en la propia naturaleza del sitio web.

16
Usabilidad Web en la práctica Buscadores

7 Buscadores
Diseñar la interfaz y la interacción de un buscador es muy sencillo, pero crear un
buen buscador es una tarea realmente complicada.

La mayoría de usuarios no utiliza ninguna opción avanzada de los buscadores.

Además, cuando los usuarios utilizan un buscador de un sitio web, suponen que la
búsqueda se restringe a los contenidos del propio sitio web.

El cuadro de búsqueda debe ser lo suficientemente grande como para que puedan
verse completamente las búsquedas de una longitud igual a la media de las bús-
quedas realizadas:

Los usuarios suelen ser poco pacientes con los buscadores y muy raramente vuel-
ven a intentar una búsqueda que no ha producido los resultados esperados.

Otros estudios demuestran que de media, se utilizan dos palabras en cada búsque-
da. Cuando el cuadro de búsqueda es relativamente grande, el número medio de
palabras utilizadas sube hasta el doble. La razón es que a los usuarios les gusta ver
lo que escriben.

La mayoría de usuarios nunca mira más allá de la segunda página de resultados y

un gran porcentaje de los usuarios sólo se preocupa por los primeros resultados
mostrados en la primera página.

La interfaz de los buscadores está formada por dos elementos: formulario de bús-
queda y página de resultados.

Formulario de búsqueda

Se trata del formulario que utiliza el usuario para escribir las palabras con las que
va a realizar la búsqueda. Debería estar formado sólo por dos o tres elementos:
cuadro de texto en el que el usuario introduce su búsqueda, botón para realizar la
búsqueda y opcionalmente un título como “Buscar” para indicar de forma más clara
que se trata del formulario de búsqueda.

17
Usabilidad Web en la práctica Buscadores

Buscar
Buscar

Buscar

A pesar de lo sencillo que es diseñar un formulario de bús-

queda, muchos diseñadores se esfuerzan en reinventar la
rueda cada vez que diseñan un sitio web, empeorando casi
siempre los resultados.

Otros sitios siguen llamando “Ir” (del inglés “Go”) al botón de búsqueda:

Página de resultados de búsqueda

Los elementos principales son: formulario de búsqueda con el valor y/o opciones
seleccionadas para buscar, principales resultados de la búsqueda y navegación bá-
sica por los resultados. Cada resultado se debe mostrar su nombre en forma de
enlace directo al contenido y un breve resumen del contenido que incluya las pala-
bras utilizadas por el usuario en la búsqueda.

El principal problema de los buscadores realizados a medida es que sus resultados

de búsqueda son mediocres comparados con los resultados obtenidos por los bus-
cadores comerciales más importantes.

18
Usabilidad Web en la práctica La página principal

8 La página principal
Aunque resulte obvio, no hay que olvidar que la página principal o home es la pági-
na más importante del sitio web. Se trata del punto de entrada de la mayoría de
usuarios y de la página que va a causar la primera impresión al usuario. Algunos
estudios demuestran que el 50% de los usuarios juzga a cualquier sitio web sólo a
partir de su página principal.

El diseño de la página principal es muy diferente al resto de páginas del sitio, por-
que incluye contenidos y elementos únicos.

En los estudios de Jakob Nielsen, los usuarios más experimentados dedicaron una
media de 25 segundos a investigar lo que ofrece la página principal. Los usuarios
menos experimentados, dedican 35 segundos. En las sucesivas visitas a la página
principal, el tiempo dedicado disminuye todavía más.

La página principal debe identificar al propio sitio y mostrar su misión u objetivo.

Por tanto, debe responder a preguntas como ¿Qué es este sitio web? ¿Para qué
sirve? ¿Por qué tengo que estar en este sitio web y no en otro similar?

La página principal también se emplea para ofrecer una visión general de la jerar-
quía del sitio mediante los menús y elementos de navegación. Por tanto, también
debe responder a preguntas como ¿Qué puedo encontrar aquí? ¿Cómo está todo
organizado?

Por su propia naturaleza, la página principal se enfrenta a varios retos:

Todos los departamentos de una empresa u organismo público quieren que

sus contenidos aparezcan lo más destacados posible dentro de la home.

Se trata de la página sobre la que opina todo el mundo, desde el diseñador

hasta el programador pasando por el jefe de la empresa y todos los mandos
intermedios.

Es la página del sitio que más debe cumplir la regla de ser un contenido lo
más correcto posible para un amplio espectro de usuarios.

Para determinar si una página web principal está bien estructurada/diseñada cual-
quier usuario que la visite por primera vez debería poder responder correctamente
a las siguientes preguntas:

¿Qué es este sitio?

¿Qué tienen/venden/ofrecen en este sitio?

¿Qué puedo hacer aquí?

19
Usabilidad Web en la práctica La página principal

¿Por qué me tengo que quedar en este sitio y no irme a otro?

De todos los errores en el diseño de la página principal, el más común es el de no

explicar el objetivo del sitio web de forma clara, breve y sencilla.

Las excusas más habituales para no explicar la misión del sitio web suelen ser que
“es obvio”, “los usuarios no lo necesitan”, “después de verlo la primera vez, a los
usuarios no les gusta que se lo vuelvan a explicar”, “cualquier usuario que visita
nuestro sitio web ya sabe lo que es”.

La mejor forma de introducir el sitio web y mostrar de forma clara su objetivo es

mediante una frase o párrafo corto:

Los enlaces pueden servir para ampliar la información sobre cualquier aspecto de la
descripción del sitio. La descripción del sitio web no debería ser mucho más larga
que un breve párrafo:

La mayoría de sitios web incluyen descripciones demasiado largas y llenas de texto

superfluo:

Muchos usuarios acceden a la página principal cada vez que quieren buscar otro
contenido o quieren realizar otra tarea. Por este motivo, es muy importante propor-
cionar un mecanismo sencillo para volver a la página principal desde cualquier pun-
to del sitio web. La mayoría de sitios web permiten volver a la página principal pin-
chando sobre el logotipo que se muestra en la zona superior izquierda de la página.

20
Usabilidad Web en la práctica Publicidad

9 Publicidad
• Ceguera selectiva. Los usuarios se han adaptado al nuevo medio y la mayo-
ría son capaces de ignorar de forma inconsciente “cualquier cosa que parez-
ca un anuncio”.

• Los usuarios utilizan la Red para conseguir un objetivo: informarse, divertir-

se o comprar algo. Cualquier elemento que distraiga se considera lesivo para
sus intereses y es ignorado.

• La publicidad en forma de texto ha cambiado la experiencia de usuario.

Google, con sus servicios AdWords/AdSense, popularizó este modelo hacién-
dolo además contextual. La publicidad se alinea con el objetivo de los usua-
rios y a veces lo hace mejor que los propios contenidos de la página.

• La usabilidad de la publicidad puede ser medida por el éxito que tenga.

• No existe una solución genérica para su ubicación. Se recomienda probar

distintas localizaciones hasta que los resultados sean óptimos.

• Los formatos que son más anchos que altos son más eficientes que los for-
matos verticales altos y estrechos. Facilitan la lectura.

Interactive Advertising Bureau

Oficina cuyo objetivo es mejorar y hacer más eficiente la publicidad en los medios
electrónicos. Para ello, elabora una serie de recomendaciones que no son estánda-
res oficiales, pero que son seguidas por miles de sitios web.

21
Usabilidad Web en la práctica Evaluar la usabilidad

10 Evaluar la usabilidad
La mayoría de los autores especializados en usabilidad web aconsejan una evalua-
ción heurística seguida de un test con usuarios.

10.1 Evaluación automática

Consiste en el uso de herramienta de software que detecta problemas básicos y
comunes. Su análisis se centra en los siguientes puntos.

Tamaño de las páginas.

Tiempos de descarga.

Tamaños absolutos de fuentes y de tablas.

Formato de los textos.

Enlaces rotos.

Aunque se trata de un método rápido y sencillo, los parámetros registrados no

ofrecen resultados que garanticen la usabilidad de sitio. Sólo es útil para realizar
una corrección inicial que sea completada con métodos más complejos y eficaces.

Entre las herramientas disponibles destacan las siguientes:

WebMetrics: http://zing.ncsl.nist.gov/WebTools/tech.html

Firefox Web Developer: https://addons.mozilla.org/firefox/60/

Firefox Firebug: https://addons.mozilla.org/firefox/1843/

10.2 Evaluación heurística (o por expertos)

Comprobar la adecuación del sitio web a un listado de directrices de usabilidad.
Jakob Nielsen ofrece una lista de lista de diez puntos heurísticos
[http://www.useit.com/papers/heuristic/heuristic_list.html], aunque existen mode-
los más detallados, también llamados sub-heurísticos. Si también se pretende reali-
zar una evaluación con usuarios, la heurística debe completarse previamente.

10.3 Evaluación con usuarios

El mejor método de evaluación disponible. Es conveniente utilizar algún sistema
para grabar o registrar las acciones de los usuarios, avisando previamente a éstos y
contando con su conformidad. La sesión debe contar también con observadores que
dirijan los ejercicios mediante instrucciones concretas.

22
Usabilidad Web en la práctica Evaluar la usabilidad

Puntos de control importantes: 1) tiempo de la tarea, 2) memoria, 3) tiempo utili-

zado en recordar la estructura de la página y 4) satisfacción con la página web.

10.4 Elaboración de informes

Estudios detallados sobre los parámetros de uso de un sitio web, indicando defectos
y proponiendo soluciones. Un buen informe de usabilidad debe ser usable y concre-
to. Lo mejor es iniciarlo directamente con las conclusiones e incluir sólo el texto
necesario. Se agradecen los gráficos de errores, de evolución del diseño, de compa-
ración con la competencia, etc. Deben estar orientados a un objetivo y centrar sus
contenidos en la consecución de éste. Resulta muy interesante incluir propuestas
alternativas ante los problemas detectados.

10.5 Eye-tracking
El eye-tracking se fundamenta en el seguimiento de los movimientos oculares del
usuario sobre las diferentes zonas de la pantalla. Este método permite localizar los
puntos de mayor y menos actividad/reclamo de una página.

Conclusiones genéricas de una sesión de eye-tracking.

Las imágenes marcan el camino.

Los encabezados y negritas son importantes.

Evitar párrafos largos.

Los listados son atractivos.

Los menús son protagonistas.

23
Usabilidad Web en la práctica Libros recomendados

11 Libros recomendados
Krug, Steve (2001), No me hagas pensar (Una aproximación a la usabili-
dad): Pearson Educación, ISBN 84-205-3252-5

Nielsen, Jacob; Loranger, Hoa (2006). Prioritizing Web Usability. New

Raiders Press, ISBN-10: 0321350316.

Nielsen, Jakob (2000). Usabilidad: Diseño de sitios web. Madrid: Prentice

Hall, ISBN-10: 8420530085.

Rosenfeld, Louis; Morville, Peter (2000). Arquitectura de la información

para la WWW. Cambridge (etc.): O'Reillly, ISBN-10: 9701026284.

K. van Duyne, D.; Landay, J.A.; Hong, Jason I. (2002). The Design of
Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered
Web Experience. Addison-Wesley, ISBN-10: 020172149X.

Garrett, Jesse James (2002). The Elements of User Experience: User-

Centered Design for the Web. New Riders Press, ISBN-10: 0735712026.

Wodtke, Christina (2002). Information Architecture: Blueprints for the

Web. New Riders Press, ISBN-10: 0735712506.

Dep. of Health and Human Services (HHS), U.S. General Services

Administration (GSA) (2006), Research-Based Web Design & Usability
Guidelines, Health and Human Services Department, ISBN 0-16- 076270-7

24
Usabilidad Web en la práctica Información de contacto

12 Información de contacto

Miguel Sánchez Pérez

Correo electrónico [email protected]

Sitio web http://formacion.miguelsanchez.com

Red profesional http://www.linkedin.com/in/miguelsp

Javier Eguíluz Pérez

Correo electrónico [email protected]

Sitio web http://librosweb.es

Red profesional http://www.linkedin.com/in/javiereguiluz

25