Usabilidad de WWW

Usabilidad de WWW Los sitios web usables resultan de una

combinación de arte e ingeniería

El buen diseño gráfico provee mayor claridad a las páginas individuales, y puede facilitar la experiencia del visitante en el sitio

Las estructuras de información bien diseñadas facilitan a los visitantes la navegación del sitio

Diseñar Páginas vs. Diseñar sitios.

Usabilidad de WWW Cómo diseñar un sitio de WWW?

Determinar objetivo del sitio Información, promoción, comercio

Conocer los potenciales usuarios Edad, género, tecnología usada, experiencia, etc.

Aplicar alguna metodología de diseño iterativo Prototipos en papel Principios de diseño específicos para WWW Evaluación con usuarios reales

Principales propósitos de los sitios WWW

PromociónInformación

Comercio

•Gran tamaño•Generados o mantenidos automáticamente•Requieren facilidades de navegación

•Generalmente tienen un diseño muy cuidadoso•Participación de diseñadores gráficos•Es conveniente asegurar que los usuarios retornen al sitio (concursos, discusiones, etc)•Procesamiento de órdenes

•Generación de páginas en forma dinámica, a partir de una base de datos

Diseño 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 gráfica de tamaño grande: 78% Pantalla gráfica pequeña: 13% Conexión rápida: 82 % Módem: 9% Acceso en sólo texto: 8%

Criterios de diseño de WWW Criterios locales

Layout Navegación Links Gráficos Calidad Subjetividad

Criterios globales Navegación Calidad Subjetividad

Criterios de diseño de WWW Criterios locales: layout

Largo de página Los usuarios no desean efectuar scrolling

El largo de cada página no debe exceder 1½ pantallas

La Home Page no debe superar el largo de una pantalla

Colocar elementos de navegación al comienzo de cada página

Barras de scroll horizontales Su uso dificulta la interacción a los usuarios

Criterios de diseño de WWW Criterios Locales: layout

Porcentaje de texto Por claridad, el % de texto de una página no

debiera superar el 30% (resto: imágenes, blancos, etc.)

Párrafos cortos El usuario prefiere escanear la página, no leer Deben utilizarse párrafos cortos

La longitud de los párrafos debiera ser menor a 80/120 palabras

Criterios de diseño de WWW Criterios locales: navegación

Cantidad de links en una página La cantidad de links de un párrafo depende de la

longitud del párrafo 10 % (párrafos cortos) 5 % (párrafos largos)

Links textuales En lo posible, todos los links debieran tener una

representación textual Los links gráficos (imágenes) deben tener un link

textual alternativo

Criterios de diseño de WWW Criterios locales: navegación

Links inadecuados En lo posible debe evitarse la presencia de links

tales como “volver”, “regresar”, “adelante”, “atrás”

El texto debe ser más significativo La navegación del sitio por el visitante no

necesariamente sigue la estructura del sitio

Tabla de links (barras de navegación) La presencia de los links de navegación en una

barra o tabla facilita la navegación del visitante

Links al comienzo de la página La presencia de un link al comienzo de la página

es importante, especialmente en páginas largas

Criterios de diseño 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 rápida Hasta 3/4 palabras

Link “click here” No proporciona información acerca de la página

destino

Criterios de diseño de WWW Criterios locales: gráficos

Imágenes con texto alternativo El usuario puede desactivar la carga de imágenes

(por motivos de performance) Tamaño de las imágenes en una página

Debe acotarse el tamaño total destinado a imágenes en una página

Mayor cantidad de imágenes producen mayor tiempo de descarga

La Home Page puede tener una mayor cantidad de imágenes

Criterios de diseño de WWW Criterios locales: gráficos

Utilizar recursos para reducir el tiempo de descarga de imágenes

Ej. Imágenes interlazadas Indicador del tamaño de la imagen

La provisión del tamaño de la imagen permite al browser determinar exactamente su localización

El texto de la página aparece rápidamente en su posición final

El usuario puede leer el texto mientras se carga la página

Criterios de diseño de WWW Criterios locales: calidad

Link a la Home Page Permite al visitante regresar al comienzo del sitio

Intenta evitar la desorientación Nunca se conoce de donde proceden los visitantes

Dirección del sitio al cual pertenece la página Similar al criterio anterior:

Desorientación Desconocimiento del origen de los visitantes

Criterios de diseño de WWW Dirección del Webmaster

Recolección de comentarios, quejas, sugerencias, etc. de los visitantes

Copyright Indicar a los visitantes los derechos de propiedad

de las páginas

Fecha de última actualización Indicador de la actualidad y calidad de los datos

contenidos

Criterios de diseño de WWW Tamaño de la página

La velocidad es el problema más importante en el diseño de páginas

Conocer la tecnología disponible por los usuarios potenciales

Determinar el tamaño de las páginas de acuerdo a dicha tecnología

Tiempo respuesta(segs)

Velocidad

1 10.28.8 kbit 2 kb 34 kb

56 kbit 4 kb 67 kb2 Mbit 125 kb 2.4 kb

Criterios de diseño de WWW Criterios locales: subjetividad

Home Page representativa del contenido del sitio El visitante debe obtener una idea rápida del

objetivo y contenido del sitio

Claridad en los conceptos contenidos en la página Facilitar la comprensión del visitante

Distribución de los elementos visuales y textuales Balance entre los elementos contenidos en la

página

Criterios de diseño de WWW Criterios locales: subjetividad

Combinación adecuada de caracteres No producir fatiga visual al visitante No dificultar la comprensión de la información

Tipo y forma de los caracteres Utilizar caracteres fáciles de leer

Ej. las letras cursivas son más dificiles de leer

Animaciones Evitar la presencia de animaciones que distraigan

al visitante

Criterios de diseño de WWW Criterios locales: subjetividad

Estilo de escritura de “pirámide invertida” (Sitios de Información)

Forma tradicional: Enunciado del problema, trabajo relacionado, metodología, resultados, conclusiones

Los reporteros utilizan un estilo de “pirámide invertida”, comenzando con la conclusión principal y tornándose más detallado progresivamente

Conclusión, Información base, ‘background’ Debido a que los usuarios de WWW no desean

realizar scroll, es importante colocar el punto principal primero

Criterios de diseño de WWW Criterios globales: navegación

Numero promedio de links desde la Home Page a cada página

2 a 4 Links

Links desactualizados Evitar la presencia de links “cortados”

Páginas sueltas Evitar la existencia de páginas aisladas (o semi-

aisladas)

Criterios de diseño de WWW Criterios globales: navegación

Consistencia en los links principales Asegurar la misma colocación y presentación de

los links de navegación, en todas las páginas del sitio

Indicador del camino Es conveniente mostrar al usuario el camino

desde la home page a su página actual Evitar desorientación

Criterios de diseño 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 navegación del sitio

Motor de búsqueda interno Facilita la localización de información específica

Fecha de ultima actualización del sitio Permite al visitante determinar si la información

es de su interés o no

Criterios de diseño de WWW Criterios globales: calidad

Formulario de cuestiones y/o sugerencias Comunicación con los visitantes del sitio

Provisión de FAQs Ayuda de importancia para los visitantes

Criterios de diseño de WWW Criterios globales: subjetividad

Arquitectura lógica de la información Proveer una organización clara de los contenidos

del sitio Facilita la elaboración del modelo mental del

visitante No un “baúl” de datos

Información no relacionada con el sitio Evitar la presencia de este tipo de información

Da menor cohesión al sitio Desorienta al usuario acerca de la información

contenida

Criterios de diseño de WWW Criterios globales: subjetividad

Proveer un diseño gráfico unificado Utilizar metáforas adecuadas El diseño gráfico puede dar guías al visitante

acerca de su ubicación actual en el sitio

Garantizar calidad de la información Los usuarios buscan información! La información debe ser confiable e interesante

Una alta calidad facilita la lealtad de los visitantes

Criterios de diseño de WWW La estructura de los sitios promocionales

debería basarse en la metáfora de un restaurant

Página de entrada: puerta de entrada, para indicar a los visitantes donde están

Túnel de entrada: ofrece la posibilidad de un pequeño recorrido del sitio, para obtener una comprensión global

Página principal. Guia a los visitantes a través del contenido

Túnel de salida: muestra a los visitantes la salida Página de salida: el lugar para hacerles preguntas

a los visitantes