agenda · 2 encuentro nacional de computación 2003 tlaxcala, méxico sobre los creadores del...

1

Encuentro Nacional de Computación 2003

Tlaxcala, México

Usabilidad, Ubicuidad y Arquitectura de la

Información en la Web

8 de septiembre de 2003

Ricardo Baeza-Yates([email protected])

Cuauhtémoc Rivera Loaiza([email protected])Javier Velasco Martín([email protected])


Tlaxcala, México

Agenda

• Introducción• Arquitectura de la Información• Ubicuidad• Minería de la Web• Usabilidad

2


Tlaxcala, México

Sobre los creadores del tutorial• Dr. Ricardo Baeza-Yates ([email protected]) es

autoridad mundial en Sistemas de Búsqueda, su libro Modern Information Retrieval es usado en más de 100 universidades en el mundo. Es pionero en el campo de la Usabilidad en Chile. Actualmente es Profesor Titular y Director del Departamento de Ciencias de la Computación en la Escuela de Ingeniería de la Universidad de Chile.

• Cuauhtémoc Rivera Loaiza ([email protected]) se especializa en el campo de la Interacción Humano-Computador y Usabilidad. Participa en forma activa en la comunidad de HCI Latinoamericana. Es Magíster en Ciencias de la Computación de la Universidad Michoacana (Mexico). Actualmente es estudiante de Doctorado en el Departamento de Ciencias de la Computación de la Universidad de Chile.


Tlaxcala, México

Sobre los creadores del tutorial• Javier Velasco Martín ([email protected]) es uno

de los profesionales con mayor experiencia en Chile en el área de la Arquitectura de la Información. Ha liderado el diseño de diversos sitios Web e Intranet para grandes empresas chilenas, incluyendo exitosos sitios de comercio electrónico. Forma parte del Consejo de Líderes del Instituto Asilomar para la Arquitectura de Información y es Investigador Asociado del Centro de Investigación de la Web en la Universidad de Chile.

3


Tlaxcala, México

Este Curso


Tlaxcala, México

Usando el Sentido Común

Los cinco pasos causales en un sitio Web: • Buscabilidad• Visibilidad y accesibilidad• Contenido• Estética• Fidelidad

Encuéntrame, descárgame y úsame. Déjate luego seducir y vuelve a mí una y otra vez. Yo por mi parte usaré mucho, mucho sentido común y trataré de sorprenderte cada día.

Ubicuidad

UsabilidadArquitectura

4


Tlaxcala, México

Arquitectura: SerUbicuidad: Estar

Usabilidad: ServirBuscabilidad

Visibilidad

Contenido

Estética

Fidelidad


Tlaxcala, México

Buscabilidad

Un gran porcentaje de las visitas a un sitio proviene de buscadores, entonces:

• ¿Encontrará mi sitio un buscador? • Esto depende de aspectos computacionales y

de contenido

5


Tlaxcala, México

Visibilidad

• No sirve de nada encontrar un sitio si no puedo acceder a él y verlo

• Aspectos computacionales y estéticos• Accesibilidad


Tlaxcala, México

Contenido

• Su sitio debe tener algún interés si la persona ha llegado hasta aquí– elementos legibles y comprensibles– coherencia de la navegación y – de la funcionalidad en todas las páginas.

• La semántica del contenido debe responder a la pregunta ¿cuál es mi audiencia objetivo?

6


Tlaxcala, México

Estética

• Su diseño gráfico debe ser bonito pero sin sacrificar los puntos anteriores– Esto significa cosas obvias como no usar fondos

que afecten la legibilidad o recargar la página con elementos distractivos

• El diseño gráfico debe ser elegante y simple, como Google, pero también puede ser feo y funcional como Yahoo!


Tlaxcala, México

Fidelidad• Su sitio ha sido usado, ¿pero volverá esta

persona a él?– contenido o servicio que se necesite en forma

periódica– que sea adictivo en el buen sentido de la palabra – que genere una comunidad virtual de personas con

intereses comunes • Es el desafío más difícil:

el de la seducción permanente

7


Tlaxcala, México

La Web Mundial

• Alrededor de 40 millones de servidores Web (1 de cada 4 computadores en Internet)

• Más de 4 mil millones de páginas• Más de 600 mil millones de archivos• Inglés es el idioma de más de la mitad de ellas• Muy heterogénea, redundante y desorganizada


Tlaxcala, México

La Web Crece …. y Muere

8


Tlaxcala, México

“No es Ciencia Aeroespacial, es Ciencia Social”

Clement MokDiseñador,

(Interfaz Macintosh)


Tlaxcala, México

Diseño

Diseño Accidente

“Los detalles no son los detalles.Éstos hacen el diseño”

Charles Eames

9


Tlaxcala, México

Experiencia de Usuario

“Te ganó la tecnología”Dicho popular


Tlaxcala, México

Diseño de la Experiencia de Usuarioen la Industria Automotriz

Estudios de mercadoEntrevistas a UsuariosIngenieríaErgonomíaInterfazDiseño VisualPruebasGran Lanzamiento

10


Tlaxcala, México

Experiencia de Usuario en la Web

• Sistemas de Auto-atención• Competencia a

a 1 click de distancia

“Los productos tecnológicos que no funcionan de la manera que las personas esperan las hace sentir estúpidas – aun cuando efectivamente hayan logrado lo que se propusieron.”

Jesse James Garett (2002)


Tlaxcala, MéxicoSteve Krug (2000)

11


Tlaxcala, México

Los elementos de la Experiencia de Usuario

Jesee James Garrett (2002)

Superficie une todo de manera visual: ¿Cómo se verá el producto visual?

Esqueleto hace concreta la estructura: ¿Qué componentes permitirán a la gente usar si sitio?

Estructura da forma al alcance: Cómo se unirán y comportarán las piezas del sitio?

Alcance transforma la estrategia en requerimientos: ¿Qué elementos deberá incluir el sitio?

Estrategia es donde todo comienza: ¿Qué queremos lograr con el sitio? ¿Qué quieren nuestros usuarios?


Tlaxcala, México

Los elementos de la Experiencia de UsuarioJesee James Garrett

12


Tlaxcala, México

Cómo evaluar la Experiencia de Usuario

Usabilidad (de una aplicación) se refiere a la efectividad, eficiencia y satisfacción con la cual usuarios específicospueden alcanzar metas específicas en ambientes particulares.

Efectividad: La medida en la cual los usuarios pueden alcanzar sus metas de tareas.

Eficiencia: Mide los recursos usados para realizar la tarea.

Satisfacción: Mide la reacción afectiva de los usuarios respecto a la aplicación.

ISO

☺


Tlaxcala, México

El Valor

• Fidelidad de usuarios – tasa de conversión• Reducción de costos – autoservicio• “Sitios de comercio electrónico con arquitectura pobre

están perdiendo tanto como un 50% de sus ventas”– Forrester Research “Why Most Web Sites Fail”

• “40% de los usuarios corporativos no pueden encontrar la información que necesitan”– Working Council for Chief Information Officers “Basic Principles of

Information Architecture”

13


Tlaxcala, México

Profesiones y habilidades

Jess McMullin + Lou Rosenfeld


Tlaxcala, MéxicoNathan Shedroff (1994)

14


Tlaxcala, MéxicoRicardo Baeza-YatesMiguel Nussbaum (1997)


Tlaxcala, México

Estrategia

15


Tlaxcala, México

Estrategia

• Objetivos del Proyecto–Entrevistas a líderes de opinión–Analizar el discurso–Cultura organizacional–Contexto

Definir y explicitar los objetivos del proyecto es básico para su éxito


Tlaxcala, MéxicoLouis Rosenfeld y Peter Morville (2002)

Investigación

Investigaciónantecedentes

Reuniones y presentaciones

Reunionesdirectorio

Evaluacióntecnología

Evaluaciónheuristica

Analisis contenido

y metadata

Mapeo decontenido

Análisiscompetencia

Análisis de Logs

Casos de usoy personas

Investigacióncontextual

Entrevistasy pruebas a

usuarios

Contexto

Contenido

Usuarios

16


Tlaxcala, México

Estrategia

• Necesidades de Usuarios– Buscamos

• Metas• Lenguaje• Hábitos

– Métodos de Investigación• Entrevistas• Focus Group• Entrevista contextual• Estudio etnográfico


Tlaxcala, México

Necesidades Usuarios: Pasos Básicos

1. Averigua para quién es el sitio2. Habla con esa gente3. Diseña el sitio para ellos4. Prueba un prototipo del sitio con

ellos5. Cambia el diseño en base a lo

aprendido6. Prueba el sitio final con ellos

Christina Wodtke (2002)

17


Tlaxcala, México

Necesidades Usuarios: Entrevistar Efectivamente

• Entrevistar neutralmente– No reveles tus opiniones– No te pongas impaciente– Eres irrelevante

• Investigando efectivamente– Da pistas motivadoras, pero neutrales– Haz preguntas de seguimiento– Usa frases incompletas– Corrige cuando la gente deriva fuera del tema

• Entrevistando con precisión– No hagas preguntas de diseño– Haz que la gente muestre más que decir, cuanto puedas– Graba lo que oyes y ves



Tlaxcala, México

Necesidades Usuarios: Entrevista Tipo

• ¿Qué otros sitios visitas?• ¿Cómo usas este tipo de producto?• ¿Usas productos de la competencia?• ¿Te interesa algún tipo de herramienta

en particular?• ¿Usas la versión no-web del producto?


18


Tlaxcala, México

Alcance


Tlaxcala, México

Alcance: Requerimientos de Contenido

– Revisión contenido actual– Entrevistas– Preguntas Frecuentes– Tabla de Contenidos

• ID: único (página o trozo)• Tipo: categoría, subcategoría, detalle, resumen• Contenidos: breve descripción• Notas: cualquier dato relevante que no quepa

en las otras categorías• ROT: marcar ítems para revisión o eliminación• Autor

19


Tlaxcala, México

Alcance: Requerimientos Funcionales

– Investigación– Análisis– Brainstorming

“Recolectar requeriemientos es muchas veces cuestión de eliminar

impedimentos”

Jesse James Garrett (2002)


Tlaxcala, México

Alcance: Especificaciones funcionales

Elemento Tipo Rótulo Evento Resultado

Item carro de compras Texto Nombre

productoClick Link a

páginainfo. producto

Cantidad carrode compras

Input-text

Prepopular=1 Tipear Ninguno

Botón finalizarcompra

Botonsubmit

Completar lacompra

Click Ir a pagina2.3.Enviar datos

20


Tlaxcala, México

Personas

Javier

Tú

Ricardo Cuauhtémoc

Felipe- - -- - -

Diego- - -- - - Claudia

- - -- - -


Tlaxcala, México

Diseñando tus personas• Las personas son arquetipos de usuario

usados para guiar las decisiones de funcionalidades, navegación, interacción e incluso diseño visual

• Se documentan en descripciones de 1-2 páginas que incluyen patrones de conducta, metas, habilidades, actitudes y ambiente con algunos detalles personales para darle vida

• Las personas representan patrones de conducta, no cargos de trabajo

Kim Goodwin (2001)

21


Tlaxcala, México

Modelo Conceptual


Tlaxcala, México

Estructura

22


Tlaxcala, México

Arquitectura de la Información

1. El diseño estructural de ambientes de información compartidos.

2. El arte y ciencia de organizar y rotular sitios web, intranets, comunidades en-línea y software para soportar la usabilidad y la encontrabilidad.

3. Una emergente comunidad de práctica enfocada en traer principios del diseño y la arquitectura al paisaje digital.

AIfIA.org – Asilomar Institute for Infromation Architecture


Tlaxcala, México

Sistemas de Rotulado

• Un rótulo es un término que representa un trozo mayor de información

• Textuales / Icónicos / Mixtos• Variedades de rótulos

• Links contextuales• Titulares• Opciones del Sistema de Navegación• Botones de las Aplicaciones• Términos de Indexación

• Sistemas de Rotulado consistentes

23


Tlaxcala, México

Evolución de sistemas de organización

Louis RosenfeldPeter Morville (2000)


Tlaxcala, México

Esquemas de organización

• Exactos– Alfabético– Cronológico– Geográfico

• Ambiguos– Tema o materia– Tarea– Audiencia– Metáfora

• Híbridos

Audiencia de hoy

Estudiantes

Informáticos

Bibliotecólogos

Diseñadores

Periodistas

Profesionales

Informáticos

Bibliotecólogos

Diseñadores

Periodistas

Audiencia de hoy

Informáticos

Bibliotecólogos

Diseñadores

Periodistas

Estudiantes

Profesionales

Estudiantes

Profesionales

Estudiantes

Profesionales

Estudiantes

Profesionales

24


Tlaxcala, México

Ejercicio de Card Sorting

La silla musical


Tlaxcala, México

Esquemas de organización

• Taxonomía–Organización Jerárquica de conceptos

• Origen en la biología

–Construyendo una taxonomía• Revisión del contenido o elementos a

organizar• Explorar expectativas de crecimiento• Elaborar cada tema con su especialista

25


Tlaxcala, México

1,656,824CombinacionesTotales

824Términos Totales

6Ratings

6Price

750Winery

16Region

46Type

# Términos en Vocab.Faceta

Esquemas de organización• Poli jerarquía

– Ciencias – Física – Física Teórica – Nicanor Parra– Artes – Literatura – Poesía – Nicanor Parra

• Clasificación facetada

Peter Morville


Tlaxcala, México

Vocabularios controlados, taxonomía y tesauros

Louis Rosenfeld y Peter Morville

“Al incorporar sinónimos, la recuperación de resultados pasó de 20% a 80%”

“La mayoría de las quejas que recibimos se debe a la manera enla que las personas buscan; usan las palabras equivocadas.”

Furnas et al, 1987

Forrester Research

26


Tlaxcala, México

Relaciones Semánticas

• Equivalencia• Jerárquica• Asociativa

(Relacionado)Pehuenche

(Específico)Piñón

(Genérico)Arboles Nativos

De Chile

(Variante)Araucaria araucana

(Relacionado)Parque Nacional

Conguillío

(Variante)Pehuén

(Preferido)Araucaria

Tesauros


Tlaxcala, México

Metadata• Descriptiva: Metadata acerca de la naturaleza del objeto. Es

la más importante para nuestros propósitos y las más usada en la web.

– ¿es ficción o un hecho?– ¿es un artículo?– ¿cuál es el tema?– ¿cuáles son los temas relacionados?

• Intrínseca: Metadata acerca de la composición del objeto.– ¿es un documento de Word?– ¿es de 20KB?– ¿es un archivo zip?– ¿nombre de archivo?

• Administrativa: Metadata acerca de la forma en la cual el objeto debe ser manipulado.

– ¿es una cosa temporal?– ¿debe ser archivado?– ¿quién es el editor?– ¿ha sido aprobado para su publicación?


27


Tlaxcala, México

Metadata Aplicada


Tlaxcala, México

Documentación: Vocabulario Visual JJG

http://www.jjg.net/ia/visvocab/spanish.htmlJesee James Garrett

28


Tlaxcala, México

Mapa de Sitio

© Dynamic Diagrams, Inc.


Tlaxcala, México

Diseño de Interacción

FM/AM(POWER)

CD(POWER)

TAPE(POWER)

AUX(POWER)POWER

Funciónanterior

FUNCTION(FM)

POWER

FUNCTION(DISC)

FUNCTION(TAPE)

FUNCTION(AUX)

Funciónanterior

29


Tlaxcala, México

Interacción Humano-ComputadorComputadores

Increíblemente rápidos

Libres de error

Determinísticos

Apáticos

Literales

Secuenciales

Predecibles

Amorales

Estúpidos

HumanosIncreíblemente lentos

Tienden al error

Irracionales

Emocionales

Inferenciales

Aleatorios

Inpredecibles

Éticos

Inteligentes

Alan Cooper (1999)


Tlaxcala, México

Metodologías

• Contextual Design• Rational Unified Process • Interaction Design• IconProcess• eXtreme Programming• Usability Engineering Lifecycle

30


Tlaxcala, México

Escenarios

• Persona: Claudia escribe comunicados de prensa y los organiza para su distribución en forma impresa. Ha estado haciendo este trabajo por 4 años. También adapta comunicados de prensa para publicación en el sitio de la compañía, pero alguien más los publica. A ella le gustaría poder hacerlo por sí misma para ganar tiempo, pero no sabe cómo preparar contenido para la web (no sabe HTML)

• Parte del Escenario: Claudia pega un texto desde un documento Word, y escribe un párrafo adicional. Agrega algunos titulares y lo lee. Quiere estar segura de que sea preciso, así que revisa la ortografía. Cuando el documento está listo, lo envía a su jefe para aprobación.

Dona M (2002)


Tlaxcala, México

Diagrama de Interacción

31


Tlaxcala, México

UML – Casos de Uso


Tlaxcala, México

Diseño de Interacción Desaplicado

32


Tlaxcala, México

Esqueleto


Tlaxcala, México

Diseño de Información

• ¿Qué?– El tema central o propósito de la página debe ser lo

más claro

• ¿Quién?– Reclamar la propiedad de una página es básico

• ¿Dónde?– Nunca olvidar la naturaleza internacional del medio

• ¿Cuándo?– Indicar la fecha de publicación, las páginas

envejecen luego.

33


Tlaxcala, México

Diseño de InformaciónAplicado

http://evolt.org/article/Web_Site_Architecture_101/


Tlaxcala, México

Diseño de Interfaces

• El Tao de la PaginaPrincipio #1: Simplicidad y EleganciaPrincipio #2: Proximidad y RelevanciaPrincipio #3: Foco y RetroalimentaciónPrincipio #4: Una Jerarquía de Importancia, una Jerarquía de TareasPrincipio #5: La herramienta Correcta para el Trabajo Correcto

Chritina Wodtke (2002)

34


Tlaxcala, México

Sistemas de Navegación

Navegación Global

Nav

egaci

ón L

oca

l

Navegacióncontextual

¿Dónde estoy?

¿Qué

hay

cer

ca?

¿Qué se relacionacon lo que hay aquí?

¿Dónde puedo ir?

¿Dónde

pued

o ir?

¿Dónde puedo ir?

Louis Rosenfeld y Peter Morville (2002)


Tlaxcala, México

Tipos de Sistemas de Navegación

• Browser• Principales

– Global– Local– Contextual– Paginación

• Suplementarios– Mapas de sitio– Indices– Guías

35


Tlaxcala, México

Guías para el diseño de sistemas de navegación

- Apoyar las metas y conductas de los usuarios

- Usa las líneas de visión para mostrar lo que hay adelante

- Ser apropiada al propósito del sitio

- Entrega capas de información en el mapa- Entrega signos en los puntos de decisión para ayudar a las decisiones de encontrar el camino (wayfinding)

- Usar rótulos claros y entendibles

- Usa el espacio como un repositorio de conocimiento en evolución

- Usa vistas amplias (entrega a los visitantes mapas)

- Requerir una economía de acción y tiempo

- Personaliza el espacio- No entregues al usuario demasiadas opciones de navegación

- Ofrecer alternativas

- Cuando en inmersión, usa un mapa tipo “usted está aquí”

- Crea regiones de distinto carácter visual- Aparecer en contexto

- Usa data de ruta para visualización, dinamismo y corrección de errores

- Crea caminos bien estructurados- Entregar feedback

- Permite diferentes velocidades de movimiento a través del espacio

- Usa hitos para entregar pistas de orientación y locaciones memorables

- Permanecer consistente

- Usa un modo apropiado de presentación- Crea una identidad para cada locación, diferente de todas las otras

- Ser fácilmente aprendida

Principios de diseño para un medio computacionalPrincipios de diseño para WayfindingNavegación que funciona debiera:

Designing Navigable Information Spaces, Mark A. FlotzWeb Navigation, Jennifer Flemming


Tlaxcala, México

Diseño: Prototipos de Papel

36


Tlaxcala, México

Documentación: Wireframes


Tlaxcala, México

Caso: Asistencia

• Sistema de Control de Asistencia– Serie de informes de diferentes variables

• Generar informes por fecha y personas– Empresa completa– Grupo de empleados– Empleados Individuales

• Indicar selección en uso– Administración de Solicitudes

• Ingresar• Aprobar

– Administración de Empleados• Solución

37


Tlaxcala, México

Superficie


Tlaxcala, México

Resolución

38


Tlaxcala, México

Color

Valor

Intensidad

Tono


Tlaxcala, México

Tipografía

Sin Serif

SerifTimes

Garamond

Georgia

ArialHelveticaVerdana

39


Tlaxcala, México

El lenguaje de la Web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“><html><head><title>Conoce tus Herramientas</title><meta http-equiv="Content-Type" content=text/html; charset=iso-8859-1“></head>

<body><h1>Conoce tus Herramientas: HTML</h1><p>Es básico que un AI conozca el lenguaje de la Web</p><p>Lo bueno es que es mucho <strong>más fácil de lo que

parece</strong></p></body></html>


Tlaxcala, México

Optimización de ImágenesColores Planos Fotografía

JPEGGIF

40


Tlaxcala, México

Diseño Visual Aplicado

Isaac Forman


Tlaxcala, México

Sistemas de Búsqueda

Navegación Búsqueda

Foto

: British

Blin

d S

port

41


Tlaxcala, México

Cuando Necesitamosun Sistema de Búsqueda

• Hay mucho contenido• Podemos invertir en búsqueda• Tenemos el conocimiento necesario• No hay alternativas mejores• Nuestros usuarios saben buscar


Tlaxcala, México

Opciones

• Hacerlo uno mismo– software público o propietario

• Outsourcing– Modalidad ASP– Sin imagen propia

• Beneficio adicional: – minería para decisiones comerciales

42


Tlaxcala, México

Arquitectura

Louis Rosenfeld y Peter Morville (2002)


Tlaxcala, México

¿Qué Queremos Buscar?

• En todo o subconjuntos especiales• Componentes mínimos• Formatos: XML, HTML, PDF, Word, etc.• ¿Usamos la estructura?• Decidir vista lógica del texto• Tipos de acceso

43


Tlaxcala, México

Interfaz de Búsqueda

• Simple o avanzada• Ubicación de la caja de búsqueda es

importante• Integrar a la navegación• Proveer ayuda• Explicar el contexto• Explicar el contenido


Tlaxcala, México

¿Qué Queremos Mostrar?

• Resultados para navegar o para leer• Que partes mostramos y cuanto• Vista previa• Destacar lo nuevo• Orden: por relevancia, lexicográfico, temporal• Orden: popularidad, por uso, por dinero• Herramientas de visualización

44


Tlaxcala, México

Manejo de los Resultados

• Imprimir• Enviar a otra persona• Guardar• Seleccionar un subconjunto• Documentos similares• Agrupación de resultados• Clasificación por tema


Tlaxcala, México

AI y Comunicación

• Comunicación como transmisión de mensajes• Estrategia• Investigación: Mercado y Usuarios• Rotulado• Revisión de Textos• Organización de la Información• Diseño de Interacción • Comunidades electrónicas• Sistemas de CRM

45


Tlaxcala, México

“Hoy en día, la gente espera ser capaz de encontrar la información en un instante, una suposición que hubiera sido impensable antes de que la Web se convirtiera en un medio masivo”.Mike Yamamoto. CNET.com, Abril 2003


Tlaxcala, México

Buscabilidad

• ¿Encontrará mi sitio un buscador? – La respuesta es no, si no ha registrado su sitio o

si no posee un enlace desde un sitio conocido

• ¿Pongo trabas a los buscadores? – La respuesta es sí, si usa mapas de imágenes,

Flash u otros mecanismos que no permiten extraer los enlaces hacia páginas internas

46


Tlaxcala, México

Sitios Impenetrables

• Estos sitios son aquellos en que la estética es prioritaria, la cual por ignorancia esconde su contenido

• En Chile hay más de 2500 sitios impenetrables• Estos incluye más de mil sitios que usan Flash

y otros mil que son o hacen una llamada a un programa


Tlaxcala, México

Sitios ImpenetrablesSe puede esgrimir la excusa de la ignorancia,

pero hay casos en que esto es imperdonable: • Las empresas de tecnologías de la información

no pueden apelar a la excusa de ser ignorantes• Sitios de gobierno• Las empresas donde la información es uno de

sus valores fundamentales.

¡Y sin mencionar las empresas de información que no tienen sitio Web!

47


Tlaxcala, México

Buscabilidad

• ¿Tengo el texto correcto en mi página principal? ¿Puedo encontrar mi sitio imaginando que palabras usarán mis clientes?

• ¿Queda mi sitio bien ubicado en una búsqueda? – Si la respuesta es no, consiga enlaces desde otros

sitios y mejore sus metadatos (para cuando se usen).


Tlaxcala, México

Visibilidad

• Aspectos de hardware y conectividad– desempeño y compatibilidad computacional

de un sitio – calidad del enlace Internet

48


Tlaxcala, México

Visibilidad

• ¿Es su diseño compatible con todos los navegadores o usted supone que todo el mundo usa Explorer y Windows?– Entonces las personas que usan Linux o

Macintosh no visitarán su sitio.


Tlaxcala, México

Accesibilidad

• ¿Considera su sitio alternativas para personas con discapacidades visuales o le da lo mismo?

• Existen normativas, fáciles de seguir, que permiten la creación de páginas web accesibles para todos

• WAI, Web Accessibility Initiative, http://w3c.org/WAI/

49


Tlaxcala, México

Contenido

• ¿Es su prosa asequible a todo el mundo?• ¿Es el idioma usado una barrera para sus

clientes? • Esencia de la información• Sea humilde: nadie sabe que quieren sus

clientes (además cambia en el tiempo)


Tlaxcala, México

Diseño Dirigido por el Usuario

• User-driven design– Ejemplo: Yahoo!

• Análisis de logs de navegación– Reorganización del sitio

• Análisis de consultas del buscador del sitio– Esencia de la información– Palabras que faltan en un sitio

50


Tlaxcala, México


Tlaxcala, México

Esencia de la Información

51


Tlaxcala, México

Usabilidad en la Web


Tlaxcala, México

Interfaz de Usuario• El “lenguaje” a través el cual la aplicación se comunica

con el usuario:– Estructura navigacional– Diseño del display y controles– Salida audiovisual

• El “lenguaje” a través con el que el usuario se comunica con la aplicación:– Interacción entre dispositivos de entrada y elementos gráficos

(botones, imágenes, etc.)– Via oral

52


Tlaxcala, México

Interfaz de Usuario

• La parte de la aplicación de software que el usuario ve, escucha y con la cual interactúa directamente


Tlaxcala, México

Para el usuario la interfaz de usuario ES

la aplicación (el computador, de hecho)

53


Tlaxcala, México

¿Qué es Usabilidad?

• Responde a la pregunta si un sitio es suficientemente bueno para satisfacer las necesidades del usuario

• Es una medida para evaluar la calidad de la experiencia del usuario al interactuar con el sistema


Tlaxcala, México

Usabilidad

• Este proceso es aplicado a todos los elementos con los cuales el usuario pueda interactuar

• Se incluyen también aspectos de instalación y mantenimiento del sistema

54


Tlaxcala, México

Usabilidad

• Una cualidad medible de una interfaz de usuario (de software), que está presente en mayor o menor grado

• Dos grandes dimensiones de usabilidad:– Facilidad de aprendizaje/retención (para

novatos y visitantes ocasionales)– Facilidad de uso (para visitantes frecuentes y

avanzados)


Tlaxcala, México

Usabilidad• Se basa en:

– Las capacidades (y limitantes) motoras, cognitivas y preceptúales de la gente

– Las características especiales y únicas de la población de usuarios target

– Las características únicas del ambiente físico, técnico y corporativo de los usuarios

– Las características únicas y requerimientos de las tareas de los usuarios, las cuales son apoyadas por el sitio o aplicación

55


Tlaxcala, México

Ingeniería de Usabilidad

• Es una disciplina que provee de técnicas estructuradas para lograr un nivel deusabilidad óptimo en el diseño de una interfaz de usuario durante el proceso de desarrollo


Tlaxcala, México


• Utiliza técnicas y conocimiento de otras disciplinas:– Ingeniería de software (métodos para el diseño y

desarrollo de software)– Etnografía (técnicas para estudiar otras culturas)– Psicología cognitiva (conocimiento sobre el

procesamiento de la información por parte de los humanos)

– Psicología experimental (técnicas para el diseño experimental)

56


Tlaxcala, México


• Ha desarrollado su propia base de conocimiento sobre principios de diseño y técnicas de ingeniería desde hace 20 años


Tlaxcala, México

Boston Consulting Group, 2000

http://www.bcg.com/media_center/CanadianRetail.ppt

57


Tlaxcala, México

Beneficios de invertir en usabilidaden la web

• La usabilidad de un sitio es equivalente a un buen –o excelente- servicio a clientes:– Considere el nivel de inversión de un cliente en

los canales tradicionales de servicio a clientes– Facilita que los posibles clientes hallen lo que

quieren comprar –pre-requisito para hacer una compra


Tlaxcala, México


– Reduce los errores en las transacciones de negocios – y los costos asociados en arreglarlos

– Motiva a los clientes a elegir el sitio por sobre los métodos tradicionales para hacer negocios

– Ayuda a que los clientes regresen repetidamente al sitio

58


Tlaxcala, México


– La usabilidad implementada desde las primeras etapas del proceso de desarrollo es siempre más barato que arreglar los problemas que se identifiquen una vez que el sitio ha sido lanzado


Tlaxcala, México

Riesgos de no invertir en usabilidaden la web

• La falta de usabilidad en un sitio de e-business es equivalente a un pobre servicio a clientes:– SC: Buenas tardes..bla bla bla– Cliente: Hola, me gustaría hacer una orden– SC: Me puede dar la clave del producto– Cliente:¿clave del producto? No la sé, ¿dónde

está?....

59


Tlaxcala, México


• Clientes insatisfechos con la calidad del servicio a clientes – daña la lealtad del cliente– Curva de aprendizaje inaceptable para

completar metas deseadas– Dedicación de tiempo de trabajo inaceptable

para lograr las metas deseadas– Errores inaceptables durante la completitud de

una tarea


Tlaxcala, México


• Pérdida de ventas porque los clientes no pueden encontrar lo que quieren comprar

• Los clientes cometen errores en las transacciones de negocios, los cuales cuestan tiempo y esfuerzo en ser rectificados; y crean una insatisfacción del cliente

60


Tlaxcala, México


• Los clientes se rehusan a utilizar el sitio y regresan a los métodos tradicionales para hacer negocios

• Los clientes huyen hacia compañías competidoras cuyos sitios web son más fáciles de utilizar

• Costos altos para reparar el sitio después de haber sido lanzado (para remediar problemas)


Tlaxcala, México

Usabilidad de un Sistema

• Facilidad de aprendizaje• Eficiencia en su uso• Capacidad de memorización• Frecuencia y severidad de los errores• Satisfacción subjetiva

61


Tlaxcala, México

Usabilidad de sitios web

• Para hacer Utilizable un sitio web, es necesario saber:– ¿Cuáles son los objetivos de la compañía u

organización con respecto al sitio?– ¿Quiénes serán los usuarios del sitio?– ¿Cuáles son sus metas?


Tlaxcala, México

Cómo probar un sitio web existente

62


Tlaxcala, México

Probar la interfaz con usuarios reales

• Entre 5 y 12 usuarios por cada prueba• Pueden hacerse las pruebas tanto en

ambientes controlados como en el lugar mismo donde se va a usar el sistema


Tlaxcala, México

Probar la interfaz con usuarios reales

• Método de Thinking Aloud, grabación de acciones por parte del usuario, uso de encuestas, etc.

• Utilización de encuestas on-line

63


Tlaxcala, México

Exploración: Prueba de usabilidad

• Una persona es el usuario– Lea el primer punto en la hoja de tareas– Piense en voz alta conforme trabaja

• Otras dos personas observan en silencio y toman notas– No se trata de un ejercicio grupal

• Tiene ocho minutos para completar la prueba


Tlaxcala, México

Cuando Usted es el usuario

• Se está probando al sitio web, no a Usted• La respuesta se encuentra en algún lugar dentro

del sitio web• Esta bien si no encuentra la respuesta

– No es su falta– Usted le está ayudando a los observadores a identificar

problemas del sitio– Tiene permitido abandonar la prueba si así lo desea

64


Tlaxcala, México

Cuando Usted es el Observador

• Tome notas conforme el usuario trabaja– ¿Tuvo éxito el usuario?– ¿Cuál fue el camino que siguió el usuario para

buscar la respuesta?• Ponga atención en los links seguidos por el usuario,

opciones de búsqueda, etc.

– ¿Con qué obstáculos se encontró?


Tlaxcala, México

Cuando Usted es el Observador

– ¿Qué lo confundió?– Destaque las características del sitio que hayan

funcionado bien

65


Tlaxcala, México

Ejercicio, Servicio de impuestos internos de Chile


Tlaxcala, México

Diseñando pautas de tareas

• Tareas basadas en verbos• Tareas basadas en cacería de datos

66


Tlaxcala, México

Tareas basadas en verbos

• Pida a sus usuarios que hagan algo específico

• Recabe información sobre la funcionalidad del producto

• Métodos tradicionales para probar software• Probablemente este tipo de tareas sea la más

recomendable para aplicaciones web, y menos para los sitios web ricos en contenido


Tlaxcala, México

Ejemplos de tareas basadas en verbos

• Haga un forward a Juan Pérez de el correo electrónico que acaba de recibir. Agregue un texto introductorio

• Copie el texto de esta página a otro documento

67


Tlaxcala, México

Puntos positivos/negativos

• Positivos:– Prueban la funcionalidad– Miden como distintos usuarios realizan

exactamente la misma tarea


Tlaxcala, México


• Negativos– No es necesariamente realidad

• ¿Es algo que los usuarios realmente harán?

– No se considera el contexto completo sobre cuándo y por qué los usuarios realizarán estas tareas por voluntad propia

68


Tlaxcala, México

Tareas de cacería de datos

• Desafían a los usuarios a encontrar información específica

• Prueba el nivel de comprensión de la información por parte de los usuarios

• ES la forma más común de las tareas empleadas para probar los sitios web ricos en contenido


Tlaxcala, México

Tareas de cacería de datos

• Ejemplo:– Usted estaba en un asado el domingo pasado.

De repente surgió una discusión sobre el mantenimiento de autos y hubo una diferencia de opinión sobre la frecuencia con que se deben cambiar llantas. Vaya al sitio TodoSobreAutos.cl y encuentre información sobre que tan frecuente hay que cambiar las llantas de los autos.

69


Tlaxcala, México


• Positivos:– Prueban que tan bien pueden los usuarios hallar

y entender cierta información– Miden que tan fácil/difícil es para diferentes

usuarios en encontrar la misma información


Tlaxcala, México


• Negativos– Asume que se está probando con los usuarios

correctos haciendo tareas reales, pero esta pudiera ser una suposición incorrecta

70


Tlaxcala, México

Creación de Tareas Basadas en Verbos

• Haga una lista de las cosas que el producto le permite hacer a los usuarios

• Identifique los verbos más críticos de esa lista

• Quizás sea necesario ordenarlos de manera “lógica”

• Cree tareas para cada verbo• La tarea es exitosa si el usuario completa la

prueba


Tlaxcala, México

¿Cuáles son los verbos de Hotmail?

71


Tlaxcala, México

¿Cuáles son los verbos de Hotmail?

• Abra una nueva cuenta• Mandar un correo a

[email protected]• Adjuntar un archivo de excel a un mensaje• Agregar la dirección de Juan Pérez a mi

libreta de direcciones• Abrir un correo


Tlaxcala, México

Creación de Tareas de Cacería de Datos

• Navegue por el sitio– Comience por las áreas de mayor interés

• Encuentre un tema que sea interesante• Cree escenarios y preguntas que vayan de

acuerdo con el tema– Evite dar demasiadas pistas

72


Tlaxcala, México

Creación de Tareas de Cacería de Datos

• El éxito se da cuando se encuentra el tema pedido

• Las tareas de cacería de datos son tareas basadas en verbos donde el verbo es “encontrar”


Tlaxcala, México

Elabore una pauta para emol.com

73


Tlaxcala, México

Comprendiendo las metas del usuario

• Variaciones de pruebas de usabilidad– Pruebas de usabilidad con tareas definidas– Observar a los usuarios como realizan sus

tareas– En un laboratorio de usabilidad– En su propio hogar u oficina– Prototipos de nuevos diseños

• En papel o electrónicos


Tlaxcala, México

Comprendiendo las metas del usuario

•Variaciones de pruebas de usabilidad– Sitios de la competencia– Sitios con buenas ideas– Probar el sitio web con usuarios reales– Evaluación por parte de usuarios expertos– Encuestas– Verificar las bitácoras de los servidores– Estudios de campo

74


Tlaxcala, México

El proceso…

• Probar el sitio actual• Utilice datos recabados para decidir en que

enfocarse• Realice una maqueta del sitio• Pruebe la maqueta• Utilice los datos para:

– Corregir la maqueta– Cambie las partes del sitio que no probará

Repetir hasta estar satisfecho


Tlaxcala, México

Revisión por usuarios expertos

• Evaluación heurística• Revisión de guidelines• Inspección de consistencia• Caminata cognitiva• Inspección formal de usabilidad

75


Tlaxcala, México

Heurísticas de Usabilidad para la Web

• Visibilidad del estado del sistema• Similitud entre el sistema y el mundo real• Control por parte del usuario y libertad• Consistencia y cumplimiento de

estándares• Prevención de errores


Tlaxcala, México

Heurísticas de Usabilidad para la Web

• Preferencia al reconocimiento frente a la memorización

• Flexibilidad y eficiencia de uso• Estética y diseño minimalista• Ayuda para que el usuario reconozca,

diagnostique y se recupere de los errores• Ayuda y documentación

76


Tlaxcala, México

1. Visibilidad del estado del sistema

• El usuario siempre debe de saber exactamente que es lo que el sistema está haciendo

• En sitios web esto se puede lograr informándole al usuario dónde se encuentra.

• Retroalimentación en la web puede ser tan sutil como un botón presionado, o tan complejo como algún applet de java con instrucciones


Tlaxcala, México

1. Visibilidad del estado del sistema

• Ejemplo: Bread crumbs

77


Tlaxcala, México

2. Similitud entre el sistema y el mundo real• El sistema debe de hablar el lenguaje del

usuario,• Las frases, palabras y conceptos deben de

ser familiares para el usuario• Siga convenciones del mundo real,

haciendo que la información aparezca en un orden lógico y natural


Tlaxcala, México

3. Control por parte del usuario y libertad• Los usuarios frecuentemente eligen

funciones por error y necesitarán de “salidas de emergencia” claramente marcadas

• Permita el deshacer y rehacer

78


Tlaxcala, México

4. Consistencia y cumplimiento de estándares• Los usuarios no tienen porque preguntarse

si distintas palabras, situaciones o acciones significan lo mismo

• Siga las convenciones de las plataformas• Sea cuidadoso cuando desarrolle sitios con

múltiples páginas (especialmente aquellos desarrollados por múltiples personas)


Tlaxcala, México

4. Consistencia y cumplimiento de estándares• Use de manera consistente el fraseo,

imágenes y fuentes a través del sitio• Aprenda y use hojas de estilo para mantener

la consistencia• Desarrolle un plan claro y un layout para

sus sitio para definir exactamente el estilo del mismo

79


Tlaxcala, México

5. Prevención de errores

• Aún mejor que el desarrollar buenos mensajes de error es tener un diseño cuidadoso que eviten la ocurrencia de errores

• Asegúrese que sus usuarios sepan exactamente que se requiere

• Si están llenando una forma, no sólo marque los campos requeridos, hágalos destacar

• Utilice javascript para validar las formas


Tlaxcala, México

6. Preferencia al reconocimiento frente a la memorización• Haga que los objetos, acciones y opciones sean

visibles• El usuario no tiene porque recordar información

de una parte de un diálogo a otra parte• Las instrucciones de uso del sistema deben de ser

visibles y recuperables cuando sea necesario

80


Tlaxcala, México

6. Preferencia al reconocimiento frente a la memorización• Los seres humanos son primordialmente visuales• Recordamos mejor las cosas al ver algo familiar• Un usuario que este a 10 páginas de profundidad

dentro de su sitio debe de saber exactamente en donde esta

• Utilice botones o vínculos que sean iguales en cada página. Sea uniforme


Tlaxcala, México

7. Flexibilidad y eficiencia de uso

• Los aceleradores –invisibles para el usuario novato – pueden hacer más rápida la interacción para el usuario experto.

• El sistema debe de tratar eficientemente tanto a los usuarios expertos como inexpertos

81


Tlaxcala, México

7. Flexibilidad y eficiencia de uso

• Permita que los usuarios personalicen ciertas acciones frecuentes

• Haga que el sitio se cargue rápidamente• Cuando una página mande información elija

get en lugar de post ya que el url con la consulta es fácil de agregar a los bookmarks


Tlaxcala, México

8. Estética y diseño minimalista

• Los diálogos no deben de contener información que sea irrelevante o que rara vez sea de utilidad

• Cada información extra en un diálogo compite con unidades relevantes de información y disminuye su visibilidad relativa

82


Tlaxcala, México

8. Estética y diseño minimalista

• El contenido es la información más importante de un sitio web (por lo general)

• Y el usuario lo que quiere es hallar esa información

• Reduzca el número de imágenes al mínimo• Coloque la información más importante en

la parte superior de la página


Tlaxcala, México

9. Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores

• Los mensajes de error deben de ser expresados en un lenguaje claro (no críptico), indicando exactamente el problema, y proveyendo constructivamente de una solución

• Tómese el tiempo de crear mensajes de error, bien hechos

83


Tlaxcala, México

9. Ayuda para que el usuario reconozca, diagnostique y se recupere de los errores

• Los mensajes de error pueden ayudar a restablecer la confianza en su sitio

• Haga uso del mensaje default de error que ofrecen los servidores web, el cual usted puede personalizar

• Un usuario no debe de ver nunca el mensaje 404


Tlaxcala, México

10. Ayuda y documentación

• Lo más probable es que lo mejor sería que un sistema no requiriera de documentación

• Pero generalmente se requiere de documentación y una opción de ayuda en línea

• Cualquier información debe de ser fácil de buscar, y debe de estar orientada a las acciones del usuario

84


Tlaxcala, México

10. Ayuda y documentación

• En cuanto un sitio web ofrezca alguna característica fuera de la norma, o ligeramente complicada, será necesario prestar ayuda y dar documentación a los usuarios

• Tómese el tiempo de desarrollar un sistema de ayuda que dé auxilio relevante cuando el usuario lo requiera


Tlaxcala, México

Diseñando un sitio web… pensando en el usuario

85


Tlaxcala, México

Antes de diseñar un sitio web...

Responda las siguientes preguntas:• ¿Por qué quiero usar la internet?• ¿Quién es mi audiencia?• ¿Qué tratan de lograr mis usuarios?• ¿Cuáles son las mejores tecnologías?


Tlaxcala, México

Antes de diseñar un sitio web...

Responda las siguientes preguntas:• ¿De qué manera puedo beneficiarme de

la tecnología?• ¿Qué está haciendo mi competencia?• ¿Cuáles son mis metas a largo plazo?

86


Tlaxcala, México

¿Cómo diseñar un sitio web pensando en el usuario?

• Compatibilidad del navegador• Diseñar para la diversidad• Optimizar para una descarga rápida• Diseñar para diversos tamaños de monitor• Controlar la cantidad de scrolling


Tlaxcala, México

1. Compatibilidad del navegador

• ¿Qué están utilizando los usuarios?• Maximizando el alcance de usuarios• Diseñe para el denominador menos común• Cree diferentes versiones y emplee

detección del tipo de navegador

87


Tlaxcala, México

Porcentaje del mercado de navegadores

1995 1996 1997 1998 1999 2000 2001 2002 200380.1 73 57.6 54 30.7 17.7 9.8 7.2 3.72.9 20 39.4 39 67.5 82.2 89.9 91.5 95.917 7 3 7 1.8 0.1 0.3 1.3 0.4

Netscape Microsoft Otros

•Fuentes: 1995-97 Dataquest; 1999-2003 WebSideStory; 1998 ZD Market Intelligence•Publicado originalmente en CNET News.com, 15 de abril del 2003


Tlaxcala, México

2. Diseñar para la diversidad

• Cuidado con los agnósticos al color, en el texto y los enlaces (links)

• Procurar utilizar lineamientos sobre accesibilidad

• Características individuales• País / cultura• Hardware / software, velocidad de

conexión.

88


Tlaxcala, México

3. Optimizar para una descarga rápida• Los usuarios aprecian las descargas rápidas• Estadísticas de población actualizadas• Utilice HTML lo más que pueda• Gráficos

– Cada gráfico requiere de una descarga– Hágalos lo más pequeños posibles


Tlaxcala, México

4. Diseñe para múltiples monitores• Pruebe su trabajo con distintos monitores,

distintas resoluciones• Utilice el espacio de la ventana del

navegador eficientemente y use las dos dimensiones

• Considere fijar los tamaños de las tablas

89


Tlaxcala, México

5. Controlar la cantidad de scrolling• ¿Hacen scrolling los usuarios o no?• Coloque los items más importantes en la

parte superior de la pantalla• Los usuarios eligen de las opciones visibles


Tlaxcala, México

Usabilidad en el proceso de desarrollo• Usability Engineering Lifecycle (Ciclo de

Vida de la Ingeniería de Usabilidad)• La usabilidad es incluida y evaluada en cada

etapa del proceso de producción de un sistema de software

• Desde su planeación hasta el proceso de mantención

90


Tlaxcala, México

Ciclo de vida de Ing. De Usabilidad• Básicamente, UIL está dividido en tres

fases:– Análisis de requerimientos– Diseño/Realización de pruebas/Desarrollo– Instalación


Tlaxcala, México

Ciclo de vida de Ing. De Usabilidad• Análisis de requerimientos:

– Perfil del usuario– Análisis contextual de tareas– Capacidades y limitaciones de la plataforma– Principios de diseño generales– Establecimiento de metas de usabilidad

91


Tlaxcala, México

Ciclo de vida de Ing. De Usabilidad• Diseño/Realización de pruebas/Desarrollo

– Reingeniería del trabajo– Diseño de un modelo conceptual– Maquetas del modelo conceptual– Evaluación iterativa del modelo conceptual– Estándares del diseño de pantalla


Tlaxcala, México

Ciclo de vida de Ing. De Usabilidad• Prototipos con los estándares de diseño de

pantalla• Evaluación iterativa de los estándares de

diseño de pantalla• Desarrollo de la Guía de Estilo• Diseño detallado de la Interfaz de Usuario• Evaluación iterativa en detalle del diseño de la

IU

92


Tlaxcala, México

Ciclo de vida de Ing. De Usabilidad• Instalación

– Retroalimentación de los usuarios


Tlaxcala, México

Diseño de la información

• Mantenga la consistencia de su sitio• Diseño gráfico para ayudar al usuario• Le permite al usuario identificar fácilmente

dónde se encuentra• Evite el amontonamiento visual

93


Tlaxcala, México

Consejos de diseño

• Usabilidad en primer lugar• El diseño es un trabajo de equipo• Diseñe para la diversidad• El diseño requiere hacer concesiones• El diseño es un proceso iterativo• Diseñe para evolucionar


Tlaxcala, México

Consejos de diseño

• Diseñe para producir en serie• Diseñe una solución completa• Ponga metas verificables de usabilidad

94


Tlaxcala, México

Caso de estudio


Tlaxcala, México

• Sitio de la Presidencia de la República (México)

• http://www.presidencia.gob.mx

95


Tlaxcala, México


Tlaxcala, México

Para recordar...

• Su sitio web siempre será probado minuciosamente– Cada vez que llegue un usuario

96


Tlaxcala, México

Referencias• http://www.usability.gov• Useit, http://www.useit.com• Jakob Nielsen, “Designing web usability”• Ben Shneiderman, “Designing the user

interface”• User testing,

http://builder.cnet.com/webbuilding/pages/Graphics/Evaluation/


Tlaxcala, México

Referencias• Jared Spool et al, “Websites that work, designing

with your eyes open”• Deborah Mayhew, “The Usability Engineering

Lifecycle”• Nota: Existe una excelente bibliografía sobre

usabilidad elaborada (y actualizada) por Chauncey Wilson de WilDesign Consulting. Es posible descargar el PDF en: http://www.humanfactors.com/downloads/bibliography.asp

agenda · 2 encuentro nacional de computación 2003 tlaxcala, méxico sobre los creadores del...

Documents