Professional Documents
Culture Documents
Usabilidad en El Diseño Web
Usabilidad en El Diseño Web
Usabilidad en El Diseño Web
Curso 2010/2011
Alumno:
Carmelo Cascone
-1 -
1. Introducción
Según Jakob Nielsen, experto de usabilidad en el web, existen 8 reglas básicas so-
bre la usabilidad en la Web, a saber:
3. Seguridad.
enlace.
-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.
-3 -
2. Diseño de pagina
-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.
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.
-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.
‣ 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.
‣ 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.
‣ 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.
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.
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.
Libros sobre:
Economía.
Medicina.
Historia.
Educación.
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.
- 11 -
3. Diseño del contenido
‣ 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.
‣ 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.
- 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.
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.
- 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.
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.
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.
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.
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.
- 16 -
‣ Comenzar con una palabra que coincida con las necesidades de los usuarios al
buscar un menú.
‣ Dejar de lado los artículos. (Algunos listados están ordenados de manera al-
fabética)
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 hay que probar una pieza de musica. (venta de musica, archivos mu-
sicales...)
- 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.
‣ 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 mostrar cosas que se muevan, por ejemplo deportes, de-
mostraciones de cualquier indole, etc...
- 18 -
4. Diseño de sitio
Según Nielsen “las páginas de inicio constituyen el espacio inmobiliario más va-
lioso del mundo”.
‣ Su diseño debe variar del resto de las páginas dentro del sitio.
- 19 -
Tres características básicas de la página de inicio:
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..
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.
- 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.
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.
La elección del dominio de primer nivel (.com, .net, .org, .es, etc.) dependerá de
cuales son las características de nuestra página.
- 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
‣ Utilizar exclusivamente letras y dígitos (cuidado con las oes y con los
ceros)
‣ 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 -