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

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 Navegacin Calidad Subjetividad

Criterios globales

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 34 kb 4 kb 67 kb 125 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