Usabilidad en el diseño web

Diseño e Implementación de Aplicaciones Distribuidas

Universidad de Las Palmas de Gran Canaria

Curso 2010/2011

Alumno:

Carmelo Cascone

-1 -
1. Introducción

El término usabilidad es relativamente reciente. Se puede decir que surgió poco

después de la expansión de Internet, a finales de los años 90. Pero, realmente, la
idea que quiere expresar es bastante anterior, aunque se conocía con otros nom-
bres como por ejemplo el Diseño Centrado en el Usuario o Human-Computer In-
teraction (HCI).

La usabilidad se puede considerar como la capacidad del producto software para

permitir que usuarios específicos logren realizar tareas específicas con productivi-
dad, efectividad, seguridad y satisfacción en determinados casos de uso. El objeti-
vo de un producto es que posea la calidad necesaria y suficiente para que satisfaga
las necesidades de usuario explícitas e implícitas.

Según Jakob Nielsen, experto de usabilidad en el web, existen 8 reglas básicas so-
bre la usabilidad en la Web, a saber:

1. En Internet el usuario es el que manda.

2. En Internet la calidad se basa en la rapidez y la fiabilidad. En Internet cuenta

que tu pagina sea más rápida que bonita, fiable que moderna, sencilla que
compleja, directa.

3. Seguridad.

4. La confianza es algo que cuesta mucho ganar y se pierde con un mal

enlace.

5. Si quieres hacer una página decente, simplifica, reduce, optimiza. La gente no

se va a aprender tu sitio por mucho que insistas, así que por lo menos hazlo
sencillo, reutiliza todos los elementos que puedas, para que de este modo los
usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar
algo en tu sitio.

6. Pon las conclusiones al principio. El usuario se sentirá más cómodo si ve las

metas al principio. De esta forma no tendrá que buscar lo que necesita y per-

-2 -
 derá menos tiempo en completar su tarea. Si completa su tarea en menos tiem-
po se sentirá cómodo y quizás se dedique a explorar tu sitio o quizás se lo re-
comiende a un amigo.

7. No hagas perder el tiempo a la gente con cosas que no necesitan. Cuidado con
cruzar promociones, si lo haces por lo menos hazlo con cuidado. Procura que la
selección de productos a cruzar sea consecuente y no lo quieras "vender todo"
en todas las páginas. Según avance el usuario en su navegación procura dejarle
mas espacio libre. Puede ocurrir que cuando este punto de comprar algo vea
una oferta que le distraiga y pierdas esa venta.

8. Buenos contenidos. Escribir bien para Internet es todo un arte. Pero siguiendo
las reglas básicas de poner las conclusiones al principio y escribir como un 25%
de lo que pondrías en un papel, se puede llegar muy lejos. Leer en pantalla cue-
sta mucho, por lo que, en el caso de textos para Internet, reduce y simplifica
todo lo que puedas.

A continuación se van a tratar los factores más importantes que influyen en la

usabilidad de un sitio Web, es importante pero siempre tener en mente que no
existe una verdad absoluta acerca de la usabilidad y que según sea el caso que se
está tratando se tendrán que adoptar unas medidas u otras.

-3 -
2. Diseño de pagina

La moderna concepción del término usabilidad deriva de la expansión de Internet

y las páginas Web. Este ha sido el autentico campo de pruebas sobre casi todas
las teorías de la usabilidad. Debido a este crecimiento de Internet, la usabilidad de
páginas web será el tema que vamos a tratar en este primero capitulo. Sobre este
tema se ha dicho y escrito mucho, y se puede encontrar mucha información bu-
scando en Internet y en los múltiples libros escritos acerca de este tema. Nosotros
sólo daremos un esbozo de las principales características a tener en cuenta, ya que
existen innumerables pequeños detalles que aportan un poco más de usabilidad a
la página y sería prácticamente imposible numerarlos uno a uno.

2.1. Independencia resolución

Una de las preguntas más habituales de las personas que comienzan a realizar
páginas web es cual serà la dimension de la pantalla del usuario. Claramente no es
posible conocer la resolución de la pantalla utilizadas por cada usuario, por esto
es necesario realizar paginas que se adaptan a las diferentes dimensiones de pan-
talla. Para obtener estas características de independencia de la resolución es fun-
damental no usar tamaños fijos al realizar páginas Web, es mejor que use porcen-
tajes para definir tamaños, con esto se consigue que las páginas se visualicen cor-
rectamente en cualquier resolución. De esta manera no perjudicamos la navega-
ción en resoluciones de monitor bajas (640x480) y si aprovechamos el uso de mo-
nitores con mayor resolución al ofrecer mas información en la parte superior (me-
nos scroll).

2.2. Código estándar

La organización Word Wide Web Consortium (W3C) es el organismo que estable-
ce los estándares en la red. Asegúrese de que sus páginas cumplen con estos

-4 -
estándares. Es fundamental utilizar HTML estándar aprobado por el W3C evi-
tando las extensiones propietarias como por ejemplo texto deslizante (marquee) y
texto parpadeante (blink) que en principio sólo son interpretadas correctamente
por algunos navegador. De la misma manera se conseja utilizar hojas de estilo en
cascada (CSS) que cumplen los estándares del W3C evitando las reglas propieta-
rias de algunos navegadores como Mozilla y WebKit.

2.3. Separar contenido de presentación

Según las propias palabras de Tim Berners-Lee, inventor del primer navegador y
el primer servidor Web del mundo, el espíritu de la red consiste en que cualquier
persona pueda leer las páginas Web con cualquier software que funcione en cual-
quier hardware. Por este motivo en el 1996 apareció CSS (Cascading Style
Sheets), un lenguaje de estilo en cascada que se puede utilizar conjuntamente con
HTML para definir el formato visual de una página Web, sin forzar el código para
adaptar los documentos al diseño de presentación y sin colocar elementos en la
página que no favorecen el contenido.

Las hojas de estilo en cascada (CSS) se utilizan para aplicar el formato a las
páginas Web de manera consistente a lo largo de todo el sitio, separando de este
modo el contenido del formato de la página. Sin duda los beneficios más impor-
tantes gracias a la utilización de las hojas de estilo externas, son el aumento en la
accesibilidad y la disminución del trabajo de producción, así como la fácil labor de
mantenimiento de los sitios, evitando la búsqueda entre líneas de código. Asimi-
smo, al proporcionar un nivel de abstracción, las CSS incorporadas en la cabecera
de un documento mejoran el código del mismo, el tiempo de respuesta y la veloci-
dad de presentación de la página, siendo posible declarar una regla de estilo una
sola vez y hacer que las condiciones de presentación se apliquen a todos los ele-
mentos de ese tipo.

Estilos por tipos de dispositivos

Otro ventaja muy importante en el utilizo de CSS es la posibilidad de obtener di-
ferentes tipos de presentación por la misma pagina según del tipo de dispositivo.
En el importar las hojas de estilo en la cabecera de un documento HTML es pos-
sible especificar el atributo media que describe el tipo de dispositivo por el qual es

-5 -
definita la hoja de estilo, haciendo de manera que la pagina esté disponible para
una multitud de diferentes dispositivos, sin cambiar el código de la página. El
W3C define los siguientes tipos de dispositivos (media):
‣ all - Apto para todos los dispositivos.

‣ braille - Destinados a dispositivos táctiles.

‣ embossed - Destinados a paginado impresoras braille.

‣ handheld - Destinados a dispositivos de mano (por lo general pequeña panta-

lla, ancho de banda limitado).

‣ print - Destinados para el material imprimido y para documentos vistos en

pantalla en modo de vista “print preview”.

‣ projection - Destinados a presentaciones proyectadas, por ejemplo, los proyec-

tores.

‣ screen - Destinado principalmente para pantallas de ordenador de color.

‣ speech - Destinados a sintetizadores de voz.

‣ tty - Destinados a los medios de comunicación utilizando una cuadrícula de

caracteres de paso fijo (como teletipos, terminales, o dispositivos portátiles
con capacidades de visualización limitada).

‣ tv - Propuesto para dispositivos de tipo televisión (baja resolución, color,

pantallas limitada desplazamiento, de sonido disponibles).

2.4. Tiempos de respuesta

El objetivo mínimo a alcanzar en la actualidad es un tiempo de respuesta de no
más de 10 segundos, dado que este es el tiempo límite que las personas pueden
prestar atención mientras esperan.

Según los expertos, los tiempos recomendados son los siguientes:

‣ Una décima de segundo (0.1 sec) es el tiempo normal de respuesta para que
el usuario sienta que el sistema esta reaccionando instantáneamente. En este

-6 -
 punto no es necesario informar al usuario que algo esta siendo procesado o
actualizado.

‣ Un segundo (1 sec) es el tiempo limite para que el usuario se de cuenta de

que hay una demora y que la misma no es una interrupción.
En demoras de más de una décima y menos de un segundo no es necesario
mostrar ningún mensaje especial, pero el usuario siente que ya no esta traba-
jando directamente sobre los datos.
Mostrar una página en menos de un segundo le da al usuario la sensación de
que esta accediendo a la información sin demoras.

‣ Diez segundos (10 sec) es el tiempo máximo que un usuario puede permane-
cer atento a una tarea. Si el tiempo de respuesta es mayor, los usuarios tien-
den a ocupar su tiempo en otras cosas por lo que ya no están atentos a lo que
la computadora esta haciendo.

Descargar y mostrar una página en menos de diez segundos permite que el usua-
rio pueda concentrarse en reconocer la manera de desplazarse por el sitio.

Debido al dinamismo con el que son desarrolladas las páginas hoy en día, el tiem-
po de descarga de las mismas debe ser calculado sobre la marcha. Por lo que la
demora de visualización no depende solamente del tiempo de descarga sino tam-
bién del rendimiento del servidor o servidores involucrados. En la actualidad, es
muy común que los sitios Web interactúen con bases de datos, lo que hace que el
proceso de descarga sea aún más lento. Todas estas cuestiones técnicas no le inte-
resan al usuario ya que a él no le interesa por que los tiempos de respuesta son
lentos. Lo único que ven y perciben los usuarios es que el sitio que están visitando
no les esta dando un buen servicio. Los tiempos de respuesta lentos se traducen
directamente en un nivel de confianza menor.

Los factores que influyen en la velocidad de carga de una página son:

‣ Rendimiento del Servidor

‣ Conexión del Servidor con Internet

‣ Internet

‣ Conexión del Usuario con Internet

-7 -
‣ Velocidad del Navegador y de la Computadora del Usuario

Esto significa que cada uno de estos factores aporta su propia cuota de demora, y
como las demoras son acumulativas, no se podrán conseguir buenos tiempos de
respuesta mejorando solamente algunas de las partes.

2.5. Uso de los gráficos

Es claro como las imágenes son mucho más impactantes y pueden transmitir un
mensaje mejor y de una forma más clara y rápida que el texto. Introducir gráficos
en las páginas incrementa de una manera notable la presentación de las mismas,
pero hay que tener en cuenta que mientras 1KB de texto puede llenar toda la
pantalla, en media un pequeño gráfico ocupa 12KB. Existen recomendaciones pa-
ra el correcto uso de los gráficos que harán que una página Web sea más usable.

Atributo alt = "descripción"

Piense que no todas las personas poseen un navegador gráfico o que aún poseyén-
dolo, no tienen activada la opción de carga automática de imágenes. Para estas
personas es de vital importancia que ponga una descripción de la imagen. Incluso
los navegadores gráficos visualizan dicho texto hasta que la imagen es cargada.

Indique el tamaño de la imagen enlazada

Hay que indicar el tamaño de la imagen en el propio código HTML (atributos
height y width). De esta forma el navegador podrá empezar a disponer en pantalla
cada elemento de la página desde un principio, sin esperar a que los recursos estén
totalmente descargados.

Imágenes de fondo
Evite en lo posible usar imágenes de fondo en sus páginas Web, pero si desea usar
imágenes de fondo elija unas que contengan poca información visual, de manera
que el texto se pueda leer con facilidad. Cuando use imágenes de fondo use el
formato JPEG con alta compresión, aunque la pérdida de calidad es notable, ten-
ga en cuenta que al ser una imagen de fondo, la persona no presta prácticamente
ninguna atención a la imagen.

-8 -
Formato de las imágenes
Respecto a los formatos de imagen, en la actualidad existen tres posibles eleccio-
nes: JPEG, GIF o PNG. Este último es el recomendado por el W3C, aunque su
uso no está muy extendido. Para las imágenes fotográficas el formato más reco-
mendado es el JPEG porque consigue una gran compresión con una mínima per-
dida de calidad. Para las imágenes sencillas con pocos colores y con formas muy
delimitadas, el formato más recomendado es el GIF, ya que se puede adaptar al
número de colores de una imagen. Por último, para las imágenes renderizadas,
que se caracterizan por degradados suaves y líneas muy bien definidas es reco-
mendable usar el formato PNG. Este formato intenta tomar lo mejor de los dos
anteriores, incluyendo la capacidad de transparencias y es de esperar que su uso
se estandarice en el futuro.

Hay que aprovechar las opciones de carga progresiva que disponen los formatos
gráficos. Esto permite que se pueda visualizar una imagen incompleta del gráfico
mientras este todavía se está cargando. Esta característica en los formatos GIF y
PNG se llama entrelazado y en el formato JPEG se llama progresivo.

Reutilizar las imágenes

Un último consejo es el de usar la misma imagen tantas veces como sea posible.
De esta manera se aprovecha la característica de que disponen la mayoría de na-
vegadores de almacenar en la caché las imágenes ya cargadas. Por consiguiente se
acelerará notablemente la carga de las páginas.

2.6. Diseño de vínculos

Por lo que regarda el diseño de los vínculos en una pagina web la regla general es
escribir como si no hubiese enlaces, integrándolos así en el propio texto.

Por ejemplo, es preferible escribir :

Disponible el nuevo calendario académico por el año 2010/11.

..en lugar de:

Està disponible el nuevo calendario académico por el año 2010/11, clique aquí.

-9 -
De esta forma, eligiendo frases o palabras significativas para el enlace, se da una
idea de donde se llegará si se pulsa en el, de manera que no sea necesario leer to-
do el párrafo para comprender el significado del enlace. Si bien el enlace ha de ser
suficientemente significativo, un enlace demasiado largo también es perjudicial ya
que dificulta la lectura del texto. Tampoco suele ser de ayuda que el enlace tenga
como texto la propia dirección a la que se va acceder, ya que esta información no
suele ser de ayuda para saber con que nos vamos a encontrar.

Cuando se realizan enlaces consecutivos similares, conviene resaltar la información

que diferencia unos enlaces de otros.

Por ejemplo, es mejor utilizar:

Libros sobre Economía.

Libros sobre Medicina.
Libros sobre Historia.
Libros sobre Educación.

..en lugar de:

Libros sobre Economía.

Libros sobre Medicina.
Libros sobre Historia.
Libros sobre Educación.

Incluso se puede mejorar si se quita el texto redundante:

Libros sobre:
Economía.
Medicina.
Historia.
Educación.

En ningún caso se ha de saturar la página con enlaces. Cuando un visitante llega

a la página, si lo primero que ve son numerosos enlaces distintos no sabrá donde
ir primero, aún estando muy bien organizados. En palabras de Jakob Nielsen,
“Cuantos más botones y opciones se pongan en la página de inicio, menos usua-
rios serán capaces de localizar rápidamente la información que necesitan”.

Otro consejo para mejorar la usabilidad es diferenciar claramente los enlaces con-
secutivos en la misma línea mediante un carácter de separación como "|".

- 10 -
Por último, hay que señalar que nunca conviene cambiar el color de los enlaces.
Aunque está permitido, se evitará confundir al lector si no se cambian los colores
por defecto de los enlaces, puesto que el usuario está acostumbrado a ellos y aso-
cia cada color a su significado: los tonos azules con los sitios no visitados y los
rojos o morados con los que si han visto anteriormente.

2.7. Marcos
Hace unos años se aconsejaba evitar las páginas con marcos pues no eran accesi-
bles para algunos navegadores antiguos. La realidad es que hoy en día es muy
difícil que alguien siga usando un navegador incompatible con los marcos, por lo
que, si es necesario, se puede optar por utilizar los marcos en una página, aunque
la recomendación es decir no. Las razones principales son:
‣ Se presupone que el usuario tiene una pantalla grande.

‣ Muchos navegadores no pueden imprimir adecuadamente páginas con marcos.

‣ Los marcos son muy difíciles de aprender.

‣ Los motores de búsqueda tienen problemas con los marcos.

‣ Algunos navegadores hacen que sea muy difícil detectar marcos.

‣ Muchos usuarios prefieren diseños exentos de marcos.

- 11 -
3. Diseño del contenido

En el diseño de contenidos hipermedia se debe realizar de forma diferente a la

tradicional. El nuevo medio y sus características obligan a ser concisos, precisos,
creativos y estructurados a la hora de redactar. Debemos conocer a quién nos di-
rigimos y adaptar el lenguaje, tono y vocabulario utilizado al usuario objetivo.

Algunos consejos a seguir en el diseño y redacción de contenidos son:

‣ Seguir una estructura piramidal: La parte más importante del mensaje, el nú-
cleo, debe ir al principio.

‣ Permitir una fácil exploración del contenido: El lector en entornos Web, antes
de empezar a leer, suele explorar visualmente el contenido para comprobar si
le interesa.

‣ Un párrafo = una idea: Cada párrafo es un objeto informativo. Se deben

trasmitir ideas, mensajes... evitando párrafos vacíos o varios mensajes en un
mismo párrafo.

‣ Ser conciso y preciso: Al lector no le gusta leer en pantalla.

‣ Vocabulario y lenguaje: Se debe utilizar el mismo lenguaje del usuario, no el

de la empresa o institución. El vocabulario debe ser sencillo y fácilmente
comprensible.

‣ Tono: Cuanto más familiar y cercano (sin llegar a ser irrespetuoso) sea el to-
no empleado, más fácil será que el lector preste atención.

‣ Confianza: La mejor forma de ganarse la confianza del lector es permitiéndole

el diálogo, así como conocer cuanta más información posible acerca del autor.

- 12 -
3.1. Escritura en la web
Escribir para la red no es como escribir para un soporte impreso. La lectura en un
monitor de ordenador es más cansada, incómoda y lenta que en un buen texto
impreso. En la red el lector no es como en el mundo impreso. El internauta es im-
paciente, voraz, inconstante. Realiza mucho menos esfuerzo sobre cada texto, pues
tiene a su disposición, rápida y fácilmente, millones de alternativas. Si un texto le
resulta complejo, le aburre o le abruma, hay mucha probabilidad de que abandone
y busque otro más digerible. El internauta no lee, escanea rápidamente la pantalla
en busca de algo que le interese.

De forma concreta es importante seguir de las siguientes reglas.

Estilo de pirámide invertida

La idea principal o conclusión del texto debe escribirse al principio del mismo pa-
ra lograr interesar al usuario en la lectura de éste. Después se debe continuar con
los razonamientos generales que sustentan el argumento. Para terminar se pueden
ofrecer enlaces a otras páginas donde se ofrecen más detalles como tablas de da-
tos, resultados concretos o informaciones previas.

Este tipo de redacción, característica de los textos periodísticos informativos, se

conoce como el ‘estilo de pirámide invertida’. Se trata de una secuenciación com-
pletamente opuesta a la utilizada tradicionalmente en los artículos científicos y
académicos. De esta manera se asegura que el lector retiene lo más importante de
la argumentación aunque no llegue a leer hasta el final del artículo o de la página.

Títulos y subtítulos
Si el sitio web ha de contener piezas informativas, que será lo más normal, estará
bien emplear subtítulos que complementen al título de cada pieza. Por un lado,
aportan más información con muy pocas palabras y, por otro, si segmentamos el
bloque de texto en otros menores, y a cada subtítulo le hacemos corresponder un
enlace con una parte de la pieza, ayudan a estructurar esa unidad informativa en
varios segmentos menores.

Resúmenes y tablas de contenido.

Los contenidos se deben estructurar mediante resúmenes y tablas de contenidos

- 13 -
Captar el interés.
Emplear sorpresas y ganchos ayuda a mantener el interés del lector. Es bueno que
los hipervínculos sean informativos, explicativos, atractivos y que ofrezcan una
buena idea de lo que va a encontrar el lector al seguir el enlace. También está bien
aportar explicaciones a enlaces o partes que pudieran resultar confusas a determi-
nados usuarios (explicaciones junto al enlace hacia una sección).

Emplear listas
Cada vez que sea posible debemos presentar una enumeración en forma de listas
y, a ser posible, con apartados y subapartados. Se leen mejor y ayudan a ofrecer
enlaces relacionados.

Frases sencillas
Sujeto, verbo, predicado. No complicar innecesariamente las frases. Un párrafo,
una idea. Pensemos si podemos dividir en dos un párrafo de 6-8 líneas. Nielsen
recomienda usar menos del 50% del texto usado habitualmente en una publicación
escrita.

Lenguaje simple e informal

Es más adecuado que el elegante o formal, ya que la lectura es más rápida en el
primero.

Mejor verbos fuertes que débiles

Debemos emplear antes el verbo que la perífrasis verbal construida con él:

Tomar una decisión vs. decidir, Hacer uso de vs. usar, Sirve para explicar vs.
explica, Efectuar una prueba vs. probar..

Ser precisos
Ciertas expresiones, que emplean palabras con marcada polisemia, pueden con-
fundir al lector, especialmente si se descontextualizan (un titular recopilado en
otro lugar distinto del original). Por ejemplo, si nos referimos a cuestiones meteo-
rolólgicas es mejor hablar de “clima” que de “tiempo”.

- 14 -
Utilizar la negrita y el destacado
Las partes más importantes deben sobresalir. Los textos en negrita o destacados
(cursiva) deben contener la esencia del total.

Usar encabezados para organizar el texto

Ayudan a estructurar mejor los textos, otorgan tamaños de letra proporcionales a
la importancia de cada parte, mejoran la lectura en dispositivos adaptados y la
presencia en los buscadores.

3.2. Ojear
La información de la pagina debe estructurarse de forma clara, que permita cono-
cer rapidamente el orden y la distribución de lo que se va a encontrar. El visitante
no tiene tiempo para aprender las características de un sitio, por lo que hay que
ponerselo facil.
El lenguaje debe ser simple y conciso, ademas de objetivo. La forma de leer una
pagina web es diferente, los usuarios no leen todo el texto al completo, sino que lo
ojean para captar frases que le demuestren que ese texto le interesa. Si le interesa
ya lo imprimira para leerlo con mas tranquilidad. Por ello es preferible no escribir
bloques continuos de texto, sino párrafos cortos, destacando palabras importantes
en negrita o con colores y empleando números o viñetas. Todo ello pensado para
que el lector capte de un vistazo la tematica del texto. Ademas ofrezcámosle al
visitante la posibilidad de imprimir el texto facilmente.

3.3. Títulos
Si bien su uso es generalmente poco valorado, el título es parte del contenido y
como tal condiciona el futuro de nuestro sitio. No es un secreto que los usuarios
comienzan a navegar en internet la mayor parte de las veces a partir de un busca-
dor, y el único atisbo que poseen sobre lo que será nuestro sitio web es un bien
elaborado título. Es decir, sin importar cuán eficiente, eficaz y productivo sea

- 15 -
nuestro sitio web, todo se reduce al título de cada página como la primera y deci-
siva impresión.

Además del posicionamiento al que pueda optar nuestro sitio web con respecto a
las búsquedas, nuestras visitas enlazadas desde buscadores siempre van a estar
condicionadas de acuerdo al título por el cual los usuarios nos distinguen.

Segun las palabras de Jakob Nielsen: “Un título de página es microcontenido, y

necesita ser una perla de claridad“, 40 a 60 caracteres es lo óptimo para titular y
explicar lo que la gente encontrará dentro de la página, suficiente para dejar en
claro los objetivos propuestos.

Además del factor buscador web y para describir un fenómeno particular: cuando
utilizamos la barra de marcadores del navegador para marcar los sitios que de-
seamos visitar en otra ocasión qué sucede? A menos que el título sea evidente-
mente conocido como por ejemplo ‘Google’, dentro del menú de favoritos es sólo
un título: debe funcionar por sí mismo y no carecer de sentido cuando no se en-
cuentra soportado por el contexto del sitio.

Los navegadores web actuales cuentan con la capacidad de acceder a un sitio de-
terminado escribiendo en la barra de navegación los títulos y subtítulos (h1 – h6
en HTML) que contengan, dejando al título como uno de los puntos principales a
considerar a la hora de desarrollar cada página de un sitio.

Qué sucede con el historial de navegación? Exactamente lo mismo, si el título de

nuestras páginas no actúa por sí solo, sólo lograría aumentar la dificultad del
usuario para encontrarnos. Para este caso en particular es imperativo diferenciar
las diferentes páginas con diferentes títulos: es nefasto tener varias páginas dentro
del historial con idéntico nombre pero diferente título y tener que buscar una por
una; y poniendo el caso de títulos poco originales el riesgo de tener igual título a
otras páginas es preocupante, una total falta de usabilidad.

Para estos puntos, es óptimo contar con títulos de dos a seis palabras, incluso es
posible titular a la página de inicio con una sola palabra.

Otro consejo indispensable a tomar en cuenta al momento de la búsqueda por

título, es que es posible optimizar los mismos para acelerar el proceso de búsque-
da haciéndolos tender a la naturaleza de un eslogan. Para optimizar un título
pueden tomarse en cuenta los siguientes consejos:

- 16 -
‣ Comenzar con una palabra que coincida con las necesidades de los usuarios al
buscar un menú.

‣ Mover los términos que representen información al comienzo.

‣ Dejar de lado los artículos. (Algunos listados están ordenados de manera al-
fabética)

3.4. Recursos audio visuales

Animaciones, sonido y gráficos pueden conseguir que el contenido de de la pagina
tome vida propia y consiga influir en nuestro estado de animo o en nuestras emo-
ciones. Es difícil imaginar un juego o una película sin musica. Pero es fundamen-
tal tener en cuenta que una mala musica resulta mas antipatico a la gente que
unos pobres gráficos. Ademas, muchos usuarios de Internet navegan con la opción
de sonido desconectada. Es bien tener especial cuidado cuando hay que coordinar
audio y video.

El utilizo de recursos audio visuales requiere una buena disciplina de diseño, el

uso no restringido de multimedia confunde a los usuarios y dificulta la compren-
sión de la información. Hay algunas reglas que permiten mejorar el uso de mul-
timedia en un sitio web.

Audio
No repetir las presentaciones en audio o video a los usuarios que repitan su visi-
ta. Las partituras musicales que se repiten constantemente molestan a los visi-
tantes. Utiliza variaciones en el repertorio. Cuando el audio y el video compiten
para conseguir la atención del espectador, facilítale pistas que le indiquen hacia
donde debe dirigir su atención.

Cuando es bueno utilizar audio? algunos ejemplos:

‣ Cuando hay que probar una pieza de musica. (venta de musica, archivos mu-
sicales...)

‣ Para enseñar en la pronunciación de palabras (formación en idiomas...)

‣ En escenas de video que lo requieran (trailers, films...)

- 17 -
‣ Para ofrecer comentarios o ayuda sin entorpecer la información ofrecida en la
pantalla.

Animaciones
Las animaciones que permanentemente están en movimiento no deberían incluirse
(salvo en raras ocasiones) en una pagina Web, debido a que dificultan que la au-
diencia pueda concentrarse en el contenido de la pagina. Las investigaciones reve-
lan que el movimiento capta nuestra vision periferica y puede dominar nuestra
atención. Tambien es aconsejable evitar el texto en movimiento ya que dificulta su
lectura y posterior comprensión.

Cuando es bueno utilizar animaciones? algunos ejemplos:

‣ Para captar la atención de la audiencia sobre un elemento en concreto sobre

los demás, o para avisar a la gente sobre información actualizada.

‣ Para realizar la función de marcador (Ej: Para localizar un punto dentro de

un mapa...)

‣ Para crear iconos que no puedan expresarse con una imagen estatica para que
sean comprensibles.

Video
Cuando es bueno utilizar videos? algunos ejemplos:

‣ Utilizar video para promocionar espacios televisivos, peliculas o cualquier

otro medio que necesite de trailers para promocionarse.

‣ Utilizar video para mostrar cosas que se muevan, por ejemplo deportes, de-
mostraciones de cualquier indole, etc...

- 18 -
4. Diseño de sitio

El contenido de calidad es uno de los determinantes más importantes de la usabi-

lidad y el otro es si los usuarios pueden encontrar la página deseada.

Desde el punto de vista de la usabilidad el diseño de sitio es más importante que

el diseño de página. El diseño de los sitios debe orientarse ante todo a la simplici-
dad, con pocas distracciones y con una arquitectura de la información muy clara
con herramientas de navegación adecuadas.

4.1. Página de inicio

Las páginas de inicio constituyen la parte más importante de un sitio web y re-
presentan el punto de contacto de una empresa o institución con sus usuarios y a
diferencia de las páginas de menor nivel, la página principal tiene que atraer a
cualquier usuario que visite el sitio, sin importar su perfil e intereses. Este hecho
motiva que reciba más visitas que cualquier otra página del sitio.

Según Nielsen “las páginas de inicio constituyen el espacio inmobiliario más va-
lioso del mundo”.

De todos estos comentarios se deduce la importancia de analizar esta página de

una manera diferenciada respecto de las otras páginas del sitio.

‣ Su diseño debe variar del resto de las páginas dentro del sitio.

‣ Debe responder inmediatamente a las preguntas: ¿En dónde estoy? Y ¿Qué

hace este sitio?

‣ Lo anterior puede ser la función más importante de una página de inicio.

‣ Es el lugar ideal para presentar, noticias, promociones o novedades dentro del

sitio.

‣ Indispensable una opción de búsqueda, mejor situarla en la esquina superior

derecha.

- 19 -
Tres características básicas de la página de inicio:

1. Directorio de páginas del sitio

2. Resumen, noticias, novedades, promociones etc.

3. Opción de búsqueda.

No hay que diseñar para ningún ancho estándar, es mejor crear diseños que fun-
cionen para una gama de tamaños de ventana. En caso de tener que hacerlo es
aconsejable el uso de un ancho de 600 pixels.

La mayoría están en 600 pixels. Las pagina de bienvenida no van utilizadas por-
que ralentizan al usuario en su intento de llegar a la página de inicio..

4.2. Páginas interiores

Ofrecer una bienvenida general o panorámica del sitio es tarea de la página prin-
cipal mientras que las interiores se centran en el contenido específico. Para mejo-
rar la usabilidad de un sitio web es fundamental seguir algunas reglas en el diseño
de las paginas interiores:

Fomentar el uso de la vinculación profunda que permite que otros sitios señalen a
los usuarios el punto exacto de su sitio que sea de interés para ellos en lugar de
colocarles en la página de inicio.
‣ Vinculación profunda entre páginas: permite que otros sitios señalen a los
usuarios el punto exacto de su sitio que sea de interés para ellos en lugar de
colocarles en la página de inicio.

‣ Ser literal para describir los elementos del sitio: Es mejor tratar de ser muy
literal y describir cada elemento del interfaz por lo que es y por lo que hace.

‣ Debe tener todos los elementos necesarios para llegar a la página principal:
tenemos en cuenta que muchos usuarios acceden al sitio por las páginas inte-
riores. Por esto la página de inicio siempre debe estar a un clic de distancia,
así como el logo siempre debe tener un vínculo a la página de inicio.

- 20 -
4.3. Navegación
Las interfaces de navegación tienen que ayudar a los usuarios en las siguientes
preguntas:

¿Dónde estoy?
La ubicación actual debe mostrarse a dos niveles diferentes: en relación con la
Web como un todo y en relación con la estructura del sitio. La primera regla de la
navegación consiste en incluir el logotipo en cada página, con una colocación co-
herente y deberá convertirse en un vínculo de hipertexto con la página de inicio.
La ubicación relativa se da mostrando estructuras del sitio y resaltando el área
donde se encuentra la página.

¿Dónde he estado?
Existen varios mecanismos que facilitan esta información: el botón Atrás, la lista
de historial y los vínculos de hipertexto aparecen en un color diferente si señalan
a páginas ya visitadas.

¿Dónde puedo ir?

Existen tres tipos de vínculos de hipertexto que indican posibles destinos:
‣ vínculos incrustados: texto subrayado, indican “más cosas”

‣ vínculos estructurales: señalan sistemáticamente a otros niveles de la estructura

del sitio, a los iguales y a los secundarios de una jerarquía.

‣ vínculos asociativos: ofrecen pistas a los usuarios “véase también”

Las recomendaciones sobre vínculos son representarlos como texto subrayado de

color azul para páginas no visitadas y rojo o morado para páginas visitadas. Cui-
dado con los menús desplegables y los gráficos.

Característica fundamental que influye sobre la navegación es tambien la estructu-

ra del sitio, por esto hay que cumplir algunas caracteristicas:
‣ Tiene que visualizar la ubicación actual del usuario y sus movimientos alterna-
tivos. Una arquitectura deficiente de la información siempre llevará a una defi-
ciente usabilidad.

- 21 -
‣ Las dos reglas más importantes son: tener una estructura y hacer que ésta re-
fleje el punto de vista del usuario sobre el sitio, de la información o de los ser-
vicios. La estructura de un sitio debe estar determinada por las tareas que los
usuarios van a llevar a cabo en su sitio. La mayor parte de los sitios poseen una
estructura jerárquica.
‣ Anchura frente a profundidad: El diseño de navegación más habitual enumera
todos los niveles superiores del sitio, normalmente con una banda en la parte
izquierda de la página. Este diseño acentúa la anchura. Existe un segundo di-
seño que acentúa la profundidad mostrando la ruta jerárquica completa desde
la página de inicio hasta los niveles de la página actual.

4.4. Búsquedas
La búsqueda debe resultar de fácil acceso desde cada una de las páginas del sitio.
No es recomendable ofrecer búsquedas dirigidas que estén limitadas a buscar en
un subsitio1 , en caso de ser necesario se tiene que declarar explícitamente en qué
ámbito se está buscando e incluir un vínculo con la página que busque en todo el
sitio. Este vínculo también tiene que estar en la página de consulta y en la página
de los resultados de búsqueda.

Búsqueda avanzada
Evitar la búsqueda booleana. Utilizar la búsqueda avanzada cuando si se ofrece en
una página que no sea la de las búsquedas sencillas. Sistema de búsqueda bien
diseñado que lleve a cabo comprobaciones ortográficas y que ofrezca gran número
de sinónimos.

Página de resultados de búsqueda

Situar los más importantes primero. Eliminar coincidencias duplicadas de la mi-
sma página. Los sistemas de búsqueda deben reconocer la calidad situando una

1
Subsitio: mecanismo de estructura adicional que se usa en los espacios de información que no
se pueden estructurar jerárquicamente y consiste en una serie de páginas web en un sitio más
grande a las que se ha dotado de un estilo común y de un mecanismo de navegación compartido.
El subsitio deberá tener una sola página considerada página de inicio del subsitio, cada una de
las páginas del subsitio debe tener un vínculo a esta página de inicio además de a la página de
inicio del sitio. También debe tener opciones de navegación globales y locales.

- 22 -
página FAQ en las primeras posiciones. Estructurar los resultados de la búsqueda
con arreglo a la estructura del sitio.

Descripción de página y palabras clave

Abstracciones breves de la página Añadir una serie de palabras clave en una eti-
queta meta que vaya dentro del encabezado de página. La lista de palabras clave
debe incluir términos simples y términos compuestos. Utilizar caja de búsquedas
ancha.

Diseño del destino de la búsqueda

La página destino de una lista de resultados de una búsqueda debe presentarse en
el contexto de la búsqueda del usuario. Normalmente se destaca la página de de-
stino de una búsqueda resaltando todas las ocurrencias de los términos que bu-
scaba el usuario. Se necesita un método estandarizado de codificar las preguntas
de usuarios en los motores de búsqueda principales.

4.5. Diseño de URL

Existe otra cuestión relacionada con la usabilidad de un sitio Web que muchas
veces es ignorada: la dirección URL de la página. Esta dirección es la identifica-
ción dentro de todos los contenidos de Internet de nuestra página. Por ello se ha
de elegir una denominación fácil de recordar y que tenga relación con los conteni-
dos que ofrece.

La elección del dominio de primer nivel (.com, .net, .org, .es, etc.) dependerá de
cuales son las características de nuestra página.

Respecto al resto de nombre de dominio solo se pueden dar un par de consejos.

En primer lugar, que no sea demasiado largo ya que dificultará que sea recordado
y complicará su escritura en el navegador, lo que puede producir una mala sensa-
ción en el usuario. El segundo consejo es para los dominios con múltiples pala-
bras. Existen diversas opciones para estos casos: escribirlas todas juntas
(usabilidadweb.com), abreviarlas (usaweb.com) o separarlas por un guión
(usabilidad-web.com). Parece ser que la opción más aceptada en la actualidad es
la primera, siendo el uso de un guión la práctica más desaconsejable ya que difi-
culta la transmisión oral de la dirección. Menos recomendable es aún el uso de la

- 23 -
tilde ~ en la dirección URL, ya que muchos usuarios ni siquiera sabrán como in-
troducirla con el teclado.

De forma mas concreta hay otra reglas para que un URL sea fácil de escribir, y
son:

‣ Corto

‣ Palabras comunes

‣ Letras minúsculas

‣ Evitar caracteres especiales

‣ Utilizar exclusivamente letras y dígitos (cuidado con las oes y con los
ceros)

Otros consejos sobre el diseño de URL para mejor la usabilidad son:

‣ URL de archivado: construir el sitio para facilitar la atracción de vínculos en-

trantes.

‣ Mantener las páginas en el mismo URL: siempre que se reorganiza un sitio o

se mueven archivos por otros motivos, hay que asegurarse de que los URL
sigan funcionando.

‣ Soportar URL antiguos: los URL antiguos deben permanecer funcionales du-
rante al menos medio año, y preferiblemente durar dos años o más. En ellos
se redirigirá desde el servidor al usuario al nuevo URL. El protocolo http in-
dica dos códigos: el 301 que indica que la página se ha movido de forma per-
manente, y el 302 que indica que es un traslado temporal.

- 24 -