usabilidad de www. los sitios web usables resultan de una combinación de arte e ingeniería el buen...
TRANSCRIPT
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