Está en la página 1de 30

Usabilidad de WWW

Usabilidad de WWW
Los sitios web usables resultan de una combinacin
de arte e ingeniera

El buen diseo grfico provee mayor claridad a las
pginas individuales, y puede facilitar la experiencia del
visitante en el sitio
Las estructuras de informacin bien diseadas facilitan a
los visitantes la navegacin del sitio

Disear Pginas vs. Disear sitios.

Usabilidad de WWW
Cmo disear un sitio de WWW?
Determinar objetivo del sitio
Informacin, promocin, comercio
Conocer los potenciales usuarios
Edad, gnero, tecnologa usada, experiencia, etc.
Aplicar alguna metodologa de diseo iterativo
Prototipos en papel
Principios de diseo especficos para WWW
Evaluacin con usuarios reales
Principales propsitos de los
sitios WWW

Promocin Informacin
Comercio
Gran tamao
Generados o mantenidos
automticamente
Requieren facilidades de
navegacin
Generalmente tienen un
diseo muy cuidadoso
Participacin de diseadores
grficos
Es conveniente asegurar que
los usuarios retornen al sitio
(concursos, discusiones, etc)

Procesamiento de rdenes
Generacin de pginas en
forma dinmica, a partir de una
base de datos
Diseo de WWW
Conocer a los usuarios
Usuarios de la Web en general
GVU Survey of WWW users
(http://www.gvu.gatech.edu/user_surveys/)
Usuarios del sitio particular
ej. Usuarios del sitio de Sun (www.sun.com)
Pantalla grfica de tamao grande: 78%
Pantalla grfica pequea: 13%
Conexin rpida: 82 %
Mdem: 9%
Acceso en slo texto: 8%
Criterios de diseo de WWW
Criterios locales
Layout
Navegacin
Links
Grficos
Calidad
Subjetividad
Criterios globales
Navegacin
Calidad
Subjetividad
Criterios de diseo de WWW
Criterios locales: layout
Largo de pgina
Los usuarios no desean efectuar scrolling
El largo de cada pgina no debe exceder 1 pantallas
La Home Page no debe superar el largo de una pantalla
Colocar elementos de navegacin al comienzo de cada
pgina

Barras de scroll horizontales
Su uso dificulta la interaccin a los usuarios
Criterios de diseo de WWW
Criterios Locales: layout
Porcentaje de texto
Por claridad, el % de texto de una pgina no debiera
superar el 30% (resto: imgenes, blancos, etc.)

Prrafos cortos
El usuario prefiere escanear la pgina, no leer
Deben utilizarse prrafos cortos
La longitud de los prrafos debiera ser menor a 80/120
palabras

Criterios de diseo de WWW
Criterios locales: navegacin
Cantidad de links en una pgina
La cantidad de links de un prrafo depende de la
longitud del prrafo
10 % (prrafos cortos)
5 % (prrafos largos)

Links textuales
En lo posible, todos los links debieran tener una
representacin textual
Los links grficos (imgenes) deben tener un link textual
alternativo
Criterios de diseo de WWW
Criterios locales: navegacin
Links inadecuados
En lo posible debe evitarse la presencia de links tales
como volver, regresar, adelante, atrs
El texto debe ser ms significativo
La navegacin del sitio por el visitante no necesariamente
sigue la estructura del sitio

Tabla de links (barras de navegacin)
La presencia de los links de navegacin en una barra o
tabla facilita la navegacin del visitante

Links al comienzo de la pgina
La presencia de un link al comienzo de la pgina es
importante, especialmente en pginas largas
Criterios de diseo de WWW
Criterios locales: links
Links con sustantivos
Los links deben contener al menos un sustantivo
(significativo)

Longitud de los links
Los links deben ser cortos para posibilitar la lectura
rpida
Hasta 3/4 palabras

Link click here
No proporciona informacin acerca de la pgina destino
Criterios de diseo de WWW
Criterios locales: grficos
Imgenes con texto alternativo
El usuario puede desactivar la carga de imgenes (por
motivos de performance)
Tamao de las imgenes en una pgina
Debe acotarse el tamao total destinado a imgenes en
una pgina
Mayor cantidad de imgenes producen mayor tiempo de
descarga
La Home Page puede tener una mayor cantidad de
imgenes
Criterios de diseo de WWW
Criterios locales: grficos
Utilizar recursos para reducir el tiempo de descarga de
imgenes
Ej. Imgenes interlazadas
Indicador del tamao de la imagen
La provisin del tamao de la imagen permite al browser
determinar exactamente su localizacin
El texto de la pgina aparece rpidamente en su posicin
final
El usuario puede leer el texto mientras se carga la pgina

Criterios de diseo de WWW
Criterios locales: calidad
Link a la Home Page
Permite al visitante regresar al comienzo del sitio
Intenta evitar la desorientacin
Nunca se conoce de donde proceden los visitantes

Direccin del sitio al cual pertenece la pgina
Similar al criterio anterior:
Desorientacin
Desconocimiento del origen de los visitantes
Criterios de diseo de WWW
Direccin del Webmaster
Recoleccin de comentarios, quejas, sugerencias, etc. de
los visitantes

Copyright
Indicar a los visitantes los derechos de propiedad de las
pginas

Fecha de ltima actualizacin
Indicador de la actualidad y calidad de los datos
contenidos
Criterios de diseo de WWW
Tamao de la pgina
La velocidad es el problema ms importante en el diseo
de pginas
Conocer la tecnologa disponible por los usuarios
potenciales
Determinar el tamao de las pginas de acuerdo a dicha
tecnologa



Tiempo respuesta
(segs)
Velocidad
1 10.
28.8 kbit 2 kb 34 kb
56 kbit 4 kb 67 kb
2 Mbit 125 kb 2.4 kb
Criterios de diseo de WWW
Criterios locales: subjetividad
Home Page representativa del contenido del sitio
El visitante debe obtener una idea rpida del objetivo y
contenido del sitio

Claridad en los conceptos contenidos en la pgina
Facilitar la comprensin del visitante

Distribucin de los elementos visuales y textuales
Balance entre los elementos contenidos en la pgina
Criterios de diseo de WWW
Criterios locales: subjetividad
Combinacin adecuada de caracteres
No producir fatiga visual al visitante
No dificultar la comprensin de la informacin

Tipo y forma de los caracteres
Utilizar caracteres fciles de leer
Ej. las letras cursivas son ms dificiles de leer

Animaciones
Evitar la presencia de animaciones que distraigan al
visitante

Criterios de diseo de WWW
Criterios locales: subjetividad
Estilo de escritura de pirmide invertida (Sitios de
Informacin)
Forma tradicional: Enunciado del problema, trabajo
relacionado, metodologa, resultados, conclusiones
Los reporteros utilizan un estilo de pirmide invertida,
comenzando con la conclusin principal y tornndose
ms detallado progresivamente
Conclusin, Informacin base, background
Debido a que los usuarios de WWW no desean realizar
scroll, es importante colocar el punto principal primero

Criterios de diseo de WWW
Criterios globales: navegacin
Numero promedio de links desde la Home Page a cada
pgina
2 a 4 Links

Links desactualizados
Evitar la presencia de links cortados

Pginas sueltas
Evitar la existencia de pginas aisladas (o semi-aisladas)

Criterios de diseo de WWW
Criterios globales: navegacin
Consistencia en los links principales
Asegurar la misma colocacin y presentacin de los links
de navegacin, en todas las pginas del sitio
Indicador del camino
Es conveniente mostrar al usuario el camino desde la
home page a su pgina actual
Evitar desorientacin

Criterios de diseo de WWW
Criterios globales: calidad
Mapa del sitio
Brinda un modelo mental muy claro al visitante acerca
de la estructura del sitio
Acelerador para la navegacin del sitio

Motor de bsqueda interno
Facilita la localizacin de informacin especfica

Fecha de ultima actualizacin del sitio
Permite al visitante determinar si la informacin es de
su inters o no

Criterios de diseo de WWW
Criterios globales: calidad
Formulario de cuestiones y/o sugerencias
Comunicacin con los visitantes del sitio

Provisin de FAQs
Ayuda de importancia para los visitantes

Criterios de diseo de WWW
Criterios globales: subjetividad
Arquitectura lgica de la informacin
Proveer una organizacin clara de los contenidos del sitio
Facilita la elaboracin del modelo mental del visitante
No un bal de datos

Informacin no relacionada con el sitio
Evitar la presencia de este tipo de informacin
Da menor cohesin al sitio
Desorienta al usuario acerca de la informacin contenida
Criterios de diseo de WWW
Criterios globales: subjetividad
Proveer un diseo grfico unificado
Utilizar metforas adecuadas
El diseo grfico puede dar guas al visitante acerca de
su ubicacin actual en el sitio

Garantizar calidad de la informacin
Los usuarios buscan informacin!
La informacin debe ser confiable e interesante
Una alta calidad facilita la lealtad de los visitantes
Criterios de diseo de WWW
La estructura de los sitios promocionales debera
basarse en la metfora de un restaurant
Pgina de entrada: puerta de entrada, para indicar a los
visitantes donde estn
Tnel de entrada: ofrece la posibilidad de un pequeo
recorrido del sitio, para obtener una comprensin global
Pgina principal. Guia a los visitantes a travs del
contenido
Tnel de salida: muestra a los visitantes la salida
Pgina de salida: el lugar para hacerles preguntas a los
visitantes
Criterios de diseo de WWW
Metfora de Restaurant