usabilidad en la web

USABILIDAD EN EL DISEÑODE SITIOS WEB

Basado en:

• Web Usability Understanding the User in your Web Site Audience. Keith Instone

• Los Elementos de la Experiencia de Usuario. Jesse James Garrett

• Information Architecture: blueprints for the web. C. Wodtke & T. Wailes, Yahoo! Inc.

• Usabilidad, Diseño de sitios web. Jakob Nielsen

Por Héctor Castelblanco Mendieta/DISEÑADOR

TEMAS

• La experiencia de usuario.

• Errores comunes en el desarrollo de proyectos web.

• Análisis de Usuarios y Tareas

•

• ¿Que es Usabilidad?

• Navegación: Diseño de interfases de usuario

• ¿Qué es la arquitectura de información?

• Diseño de información aplicado a proyectos web?

USABILIDAD EN EL DISEÑO DE SITIOS WEB - 1

Aspectos visuales:Estética, entradas y respuestas.

Técnicas de interacciónOrganización del menú, organización de botones...

ProgramaciónElementos necesarios para cumplir tareas, sus propiedades, comportamientos y relaciones.

Experiencia del usuario


¿Qué es la experiencia de usuario?The elements of user experienceJ.J. Garrett 2002

La web fue originalmente concebida cono un espacio de información hipertextual.

El desarrollo de tecnologías cada vez más sofisticadas la han convertido a nivel del uso, en una interfaz remota de software.

La ESTRATEGIA es donde todo comienza.¿Cuales son los objetivos del sitio web?¿Cuáles son las necesidades de nuestros usuarios?

El ALCANCE convierte la estrategia en requerimientos.¿Qué elementos funcionales y de contenido se requieren para satisfacer a los usuarios?

La ESTRUCTURA da forma al alcance.¿Cómo están articuladas y se comportan entre sí las diferentes piezas del sitio web?

El ESQUELETO hace la estructura concreta.¿Que componentes permiten a los usuarios interactuar con el sitio web?

La SUPERFICIE reúne todo junto visualmente.¿Cómo se ve y se siente el producto terminado?


Experiencia del usuario

Arquitectura de información aplicada al desarrollo de proyectos web

• Enfocado a la “encontrabilidad”: la

organización del contenido debe

responder a las expectativas de los

usuarios.

• Mejor definicion de los usuarios e

identificacion de sus tareas.

• Inventariar y organizar el contenido.

• Fundamentar un esquema de diseño

visual consistente y estructurado.

• Desarrollar un plan de control de

acceso.

• Crear una estructura lógica y

escalable para proyectos web.


Se indican las areas tematicas, los derechos de acceso. Las paginas que contienen enlaces globales y tiras publicitarias estan señaladas.


Arquitectura de información aplicada al desarrollo de proyectos web

Una

deficiente

usabilidad

equivale a

que no haya

clientes.


Errores comunes en el desarrollo de proyectos web

• Modelo de Negocios. La Web como folleto.

• Gestión de Proyectos. Debe ser gestionado como

proyecto específico de interfaz de cliente.

• Arquitectura de la información. Debe reflejar las

tareas de los usuariosa y sus puntos de vista en el

espacio informativo, no la estructura de la empresa.

• Diseño de paginas. El usuario de be tener un

aexperiencia optima en circunstancias reales.

• Creacion de contenido. Escribir para la web: textos

para “escanear” con la mirada, no para “leer”. Explotar

el hipertexto.

• Estrategia de vinculación. Vinculación a otros sitios y

puntos de entrada para que otros coloquen sus

vínculos.


"Análisis de Usuarios y Tareas para el Diseño de Interfaces", Jo Ann Hackos y Janice (Ginny) Redish

Análisis de Usuarios y Tareas

Se centran en la comprensión de:

•Cuales son los objetivos de los usuarios; Qué están intentando conseguir: Información, diversión …•Qué hacen los usuarios en la actualidad para conseguir estos objetivos.•Su manera de pensar en la información, de agruparla y de organizarla.•Las expectativas que tienen sobre su sitio.•Qué características personales, sociales y culturales aportan a las tareas.•Cómo están influenciados los usuarios por su entorno físico.•Cómo sus conocimientos y práctica previos influyen en cómo viven su experiencia y los pasos que siguen para realizar sus tareas.


¿Cuáles son los beneficios del análisis de tareas?

Un análisis de tareas permite:

•Descubrir que tareas debe admitir el sitio web.

•Determinar el alcance apropiado del contenido del sitio web.

•Decidir qué aplicaciones debe incluir el sitio web.

•Refinar o redefinir la navegación o la búsqueda en el sitio web

para servir mejor a los objetivos de los usuarios - para asegurarse

de que el sitio es eficiente, efectivo y satisfactorio para los

usuarios.

•Construir páginas y aplicaciones web que coincidan con los

objetivos, tareas y pasos de los usuarios.


10

Un ejemplo de análisis de tareaDesde la pagina de búsqueda el usuario envia una pregunta.

El sistema revisa si la pregunta es valida, y si no, devuelve al usuario a la pagina de busqueda.

Si la pregunta es válida se le presenta al usuario una serie paginas de resultados.

Desde estas paginas el usuario puede ingresar a una o mas paginas que contengan la respuesta buscada o retornar a la pagina de busqueda para refinar su busqueda.

Pregunta de busqueda

invalido

valido

Resultados

Paginas decontenido

buscar

Refinarbusqueda




Diseño de página

Espacio de pantalla. Sistema operativo y Navegador

Publicidad

Navegacion interna y externaHASTA 20%

ContenidoMINIMO 50%


Diseño de página

RECOMENDACIONES

• Compatibilidad con todos los navegadores.

• Separar contenido de la presentación.

• Codificación semántica. La codificación de texto debe estar

separada de la presentación.

• Tiempo de respuesta. 1 seg. 10 seg.

• Carga de la primera pantalla: La parte superior debe tener

sentido aunque no haya cargado el resto. Atributos ALT.

SIMPLICIDAD ES MEJOR QUE COMPLEJIDAD:Eliminar elementos superfluos de navegacion.


Diseño de página

Vinculación

• Vínculos de navegación estructural:

estructuran el espacio de información.

• Vínculos asociativos de contenido de la pagina:

textos o mapas de imágenes que señalan a

paginas con información relacionada.

• Vínculos de referencia adicionales:

para ayudar a encontrar lo que se busca si el

contenido no es adecuado.


Diseño de página

Marcos• Evitarlos al maximo:

Por problemas de indexacion, impresión y visualizacion.

Impresión• Maximice la portabilidad:

Asegurese que la mas amplia audiencia posible pueda…

• Distribuir.

• Abrir

• Leer

• Imprimir

• Usar

Los documentos que usted produce.


Diseño del Sitio

La página de inicio• ¿Dónde estoy? ¿Qué hace este sitio?

Directorio del sitio, resumen de los contenidos mas

importantes y opción de búsqueda.

Navegación¿Dónde estoy, donde he estado y adonde puedo ir?

Estructura del sitioDebe tenerla y responder a las expectativas de los usuarios.

Diseño de la URL• ¿Como se vera el nombre del sitio?

Metadatos

16

Cabecera

Vínculo Globales

Carpetas

Herramientas

Anuncios

Navegación global

Promoción

Busqueda en la Web

Servicios relacionados

Trucos

Buzón de entrada

Anuncios

Anuncios

Servicios relacionados

Herramientas

Salir

Buzón de entrada

Escribir



MUCHAS GRACIASHector Castelblanco Mendieta/Diseñador

[email protected]

MUCHAS GRACIASHector Castelblanco Mendieta/Diseñador

[email protected]

usabilidad en la web

Technology