Agenda

Usabilidad de WWW
Los sitios web usables resultan de una combinacin de arte e ingeniera. Cmo disear un sitio de WWW?.

Principales propsitos de los sitios WWW

Conocer a los usuarios.

Diseo de WWW
Criterios locales. Criterios globales.

Criterios de diseo 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

Informacin
Gran tamao Generados o mantenidos automticamente Requieren facilidades de navegacin

Promocin

Comercio

Procesamiento de rdenes Generacin de pginas en forma dinmica, a partir de una base de datos

Generalmente tienen un diseo muy cuidadoso Participacin de diseadores grficos Es conveniente asegurar que los usuarios retornen al sitio (concursos, discusiones, etc)

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
Velocidad Tiempo respuesta (segs) 1 10. 2 kb 4 kb 125 kb 34 kb 67 kb 2.4 kb

28.8 kbit 56 kbit 2 Mbit

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