El documento presenta el temario de un taller de arquitectura de información que se llevará a cabo en varias ciudades de México en febrero de 2008. El taller consta de tres módulos que abordan conceptos generales, sistemas de navegación y diseño de información e interacción. Cada módulo incluye ejercicios prácticos relacionados con la temática.
2. Elementos de la Experiencia de Usuario
Web como Web como Jesse James Garrett 2000, 2002
Interfaz de Software Sistema de Hipertexto
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Diseño de Experiencia de Estudio de Compra Entusiasta
Usuario • Cuando la gente
está confiada,
actúa con mayor
entusiasmo.
• La Arquitectura
de Información
afecta el nivel de
Peter Morville
confianza, en
2004 ambas direcciones.
Jared Spool – UIE
2005
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Louis Rosenfeld y
Peter Morville (2002)
Arquitectura de Información
• ¿Qué es? Investigació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 Investigación Reuniones y Reuniones Evaluación
traer principios del diseño y la arquitectura al paisaje Contexto antecedentes presentaciones directorio tecnología
digital.
Análisis
Evaluación Mapeo de Análisis
Contenido contenido
heurística contenido competencia
y meta data
Instituto para la Aquitectura de Información
www.iainstitute.org Análisis Casos de uso Investigación
Entrevistas
Usuarios y pruebas a
de Logs y personas contextual
usuarios
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
2
3. Cómo evaluar la Experiencia de
Accesibilidad Usuario
Usabilidad (de una aplicación) se refiere a la efectividad, eficiencia
y satisfacción con la cual usuarios específicos pueden alcanzar
metas específicas en ambientes particulares.
• Facilita lectura universal
• Permite lectura maquinas 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
Foto: David Foster Nass
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Arquitectura de Información y Usabilidad,
God is My [VCR] Co-pilot un modelo cíclico
Copyright 2004 Steve Krug
Baeza-Yates & Velasco 2004
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Proceso de Diseño
de la Experiencia de Usuario
Evaluaciones de Usabilidad
Herramientas iterativas que se utilizan desde el inicio del
proyecto.
Taller McMullin + LouInformación UA Web, México, Febrero 2008
Jess de Arquitectura de Rosenfeld Taller de Arquitectura de Información UA Web, México, Febrero 2008
3
4. Evaluaciones Heurísticas Pruebas con usuarios
• Un grupo de evaluadores experimentados • Se presenta la interfaz, en forma individual, a un
pequeño grupo de usuarios para que la utilicen y
evalúa el sistema bajo una lista de reglas comenten las dificultades que encuentran a su paso.
heurísticas, las que a su vez fueron creadas por • Las principales variantes son navegación libre o tareas
expertos en base a su experiencia. específicas. Estas últimas representan tareas
importantes del sistema, o problemas específicos a
• Como resultado, se detecta una serie de evaluar.
problemas, los que son priorizados. • Los usuarios encuentran una serie de problemas, y la
• Para cada problema se sugiere un método para interfaz debe ser probada nuevamente, cuando
su solución. generalmente aparecen problemas nuevos.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Diseño Centrado en el Usuario
Proceso de Diseño
de la Experiencia de Usuario • Adivinar lo que quieren las
personas y construir un sitio
Estrategia para ellos es caro; si adivinas Christina Wodtke
2002
mal, hay que volver a hacerlo
todo.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Diseño Centrado en el Usuario
Dos fuentes de necesidades
• Los pasos básicos son:
1. Averigua para quién es el • Accionistas
sitio. – Deben satisfacer sus necesidades
2. Habla con esas personas. organizacionales
• Potenciar el negocio
3. Diseña el sitio para ellos.
• Conocer a sus clientes
4. Prueba un prototipo del
• Usuarios
sitio con ellos.
– Debe satisfacer sus necesidades
5. Cambia el diseño de • Cumplir su meta
acuerdo a lo aprendido. • No sentirse tonto
• Resguardar su privacidad
6. Prueba el sitio final con Christina Wodtke
ellos. El diseñador debe lograr el balance
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
4
5. Estrategia Entrevistando Accionistas
• Necesidades de Accionistas • Hay que llegar a quien toma las
– Buscamos decisiones, y hacerlo participar.
• Metas • Descubrir las razones para el nuevo
• Motivaciones proyecto.
• Mecanismos de evaluación – “Quiero lucirme con el directorio”
– Métodos de Investigación • Cuál es el problema a resolver.
– ¿Cuáles son tus 5 mayores problemas?
• Entrevistas
• Entrevista contextual • Cómo será evaluado.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Análisis Comparativo Análisis FODA
• Herramienta del Márketing
Programacion Contacto Blog Directorio – Mi producto, organización, o marca
Mi Radio x x x x • Fortalezas
Radio 1 x x x
• Debilidades
Radio 2 x x x
Radio 3 x x
– Mi mercado
Radio 4 x x x • Oportunidades
• Amenazas
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Estrategia
Mapa de Posicionamiento
• Necesidades de Usuarios
– Buscamos
• Metas
• Lenguaje
• Hábitos
– Métodos de Investigación
• Entrevistas
• Focus Group
• Entrevista contextual
• Estudio etnográfico
www.marketingteacher.com
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
5
6. Entrevistando
Entrevistas Efectivas
• Pregunta tus preguntas
• Si le preguntas a alguien “¿Es este sitio fácil de usar?” hay
– Se neutral. una gran probabilidad que te responda:
– Ten preguntas de seguimiento listas. – “Seguro”, y luego habrás diseñado un sitio que funciona de la
misma forma que tu competidor.
• Recuerda que no eres un científico.
• Estás acá como diseñador, tratando de • Si les preguntas “En una escala del uno al cinco, en la que
uno es fácil de usar y cinco es difícil de usar, ¿Cómo
averiguar el modelo mental que tiene la describirías este sitio?” estás escondiendo tu opinión y
gente para el mundo que vas a diseñar. además los haces pensar un poco antes de responder.
– “Bueno… yo creo que un tres. Siempre puedo encontrar lo que
• Escribe lo que aprendiste busco, pero cada vez que compro tengo que llenar los
formularios nuevamente, es una lata.”
– Busca patrones.
– Piensa en forma crítica.
Christina Wodtke (2002) Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Entrevistas Efectivas Entrevista Neutral
• Pretende ser un siquiatra.
– Sé cortes e interesado, no social y
•Neutral hablador.
•Sondeo • Otros consejos:
– No reveles tu opinión.
•Precisión – No te pongas impaciente.
– Pierde la importancia.
Christina Wodtke (2002) Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Sondeo Efectivo Entrevistas Precisas
• La clave para una entrevista efectiva es
mantener a la persona hablando del tema. • La meta de estas entrevistas es obtener la
– Haz sonidos motivantes pero neutros. mayor cantidad posible de información
• Usa sonidos tipo “aha”, “hmm” ó “oh” sobre el entrevistado – no lo que piensan
– Usa tus preguntas de seguimiento. de ellos mismos, sino lo que realmente
• Por ejemplo, pregunta: “¿Me puedes contar más
sobre eso?”
necesitan y hacen.
– Usa frases incompletas. – No hagas preguntas de diseño.
• “Entonces, lo que querías lograr era…” – Haz que la gente te muestre en vez de
– Recupera a la gente cuando derivan del tema. contarte lo más posible.
• “Sí, eso puede ser muy frustrante, pero en realidad lo – Graba lo que oyes y ves.
que quiero es que me hables sobre este producto”.
Christina Wodtke (2002) Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
6
7. Necesidades Usuarios: Entrevista Tipo Investigación Contextual
• Entrevista se desarrolla en ambiente
natural del sujeto
• ¿Qué otros sitios visitas?
• Permite observar las sutilezas del
• ¿Cómo usas este tipo de producto? ambiente y actividad cotidiana
• ¿Usas productos de la competencia? – Ej.: Frecuencia de llamados por
telefono
• ¿Te interesa algún tipo de herramienta
en particular? • Ver cómo la persona ejecuta las
tareas y cuáles son sus dificultades
• ¿Usas la versión no-web del producto?
• Cómo alterna el software con
elementos físicos
Christina Wodtke (2002)
Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Personajes Diseñando tus personajes
Tu
• Los personajes son arquetipos de usuario
usados para guiar las decisiones de
Lou funcionalidades, navegación, interacción e
Javier ---
incluso diseño visual
--- Claudia
--- • Se documentan en descripciones de 1-2
--- páginas que incluyen patrones de
conducta, metas, habilidades, actitudes y
Peter ambiente con algunos detalles personales
--- para darle vida
---
Will
• Los personajes representan patrones de
Mike conducta, no cargos de trabajo
http://www.iawiki.net/action=browse&id=PersonaDesign&oldid=PersonasDesign Kim Goodwin (2001)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
“Me gustaría poder publicar todo yo misma,
pero no sé cómo hacerlo” Diseña un sitio para la gente
• Personaje: Claudia escribe comunicados de prensa
Claudia Silva
Relacionadora Pública
y los organiza para su distribución en forma • Ahora, analiza las entrevistas,
36 Años impresa. También adapta comunicados de prensa
para publicación en el sitio de la compañía, pero
buscando temas recurrentes. Busca
Vive en Ñuñoa con su
hija de 5 años
alguien más los publica. especialmente problemas que surgen
Trabaja hace 4 años en
• Parte del Escenario: Claudia pega un texto desde repetidamente, el lenguaje que la
una oficina ministerial,
encargada de eventos y
difusión.
un documento Word, y escribe un párrafo adicional.
Agrega algunos titulares y lo lee. Quiere estar
gente usa para describir el contenido
segura de que sea preciso, así que revisa la y las acciones, y pistas acerca de
ortografía. Cuando el documento está listo, lo envía
a su jefe para aprobación. cómo piensan sobre el tema en
cuestión.
Adaptado de Dona Maurer (2002) Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
7
8. Y luego, pruébalo: Elementos en una Estrategia de
Proyecto Web
• Prueba un prototipo del sitio con los
usuarios potenciales: • Definición de Objetivos
– Generales
– Preparar la prueba del prototipo… – Específicos
• Análisis
– Evaluar el prototipo… – Benchmarking
– Posicionamiento
– Realizar la prueba con el prototipo… – Foda
• Audiencia
– Analizar los resultados de la prueba… – Segmentación por tipos
– Descripción de los tipos de audiencia en relación con el proyecto
• Probar el sitio final con los usuarios. • Estrategia
– Desarrollar y publciar estrategia explícita
Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Proceso de Diseño
de la Experiencia de Usuario
Arquitectura de Información
Rosenfeld y Morville
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Esquemas de Clasificación
Audiencia de hoy
• Exactos Audiencia de hoy
Informáticos
Estudiantes
– Alfabético Estudiantes
Profesionales
Informáticos
– Cronológico
Bibliotecólogos Bibliotecólogos
– Geográfico Diseñadores
Estudiantes
• Ambiguos Periodistas
Profesionales
– Tema o materia Profesionales
Diseñadores
– Tarea Informáticos
Estudiantes
– Audiencia Bibliotecólogos Profesionales
Rosenfeld y Morville
Diseñadores
– Metáfora Periodistas Periodistas
• Híbridos Estudiantes
Profesionales
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
8
9. Esquemas de Clasificación Esquemas de Clasificación
• Clasificación temática • Taxonomía
– Vocabularios Controlados – Organización Jerárquica de conceptos
– Taxonomías • Origen en la biología
– Tesauros – Construyendo una taxonomía
• Revisión del contenido o elementos a
– Clasificación Facetada organizar
– Ontologías • Explorar expectativas de crecimiento
• Elaborar cada tema con su especialista
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Tesauros Clasificación Facetada
Relaciones Semánticas
• Epicurious.com
• Equivalencia
• Jerárquica (Genérico)
Arboles Nativos
• Asociativa
De Chile
(Preferido) (Variante)
(Variante)
Araucaria Araucaria
Pehuén
araucana
(Relacionado)
(Relacionado) (Específico)
Parque Nacional
Pehuenche Piñón
Conguillío
www.epicurious.com
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Metadatos
Metadatos Cómo obtenerlos
• Descriptiva: Metadata acerca de la naturaleza del objeto. Es la más • Expertos
importante para nuestros propósitos y las más usada en la web.
– ¿es ficción o un hecho?
– Tradicionalmente los metadatos son generados por un equipo de
– ¿es un artículo? catalogadores expertos usando un vocabulario controlado.
– ¿cuál es el tema? – Alta calidad, alto costo: problemas de crecimiento.
– ¿cuáles son los temas relacionados?
• Intrínseca: Metadata acerca de la composición del objeto. – No hay conocimiento de los usuarios.
– ¿es un documento de Word? • Autores
– ¿es de 20KB?
– ¿es un archivo zip? – Facilita el proceso de creación.
– ¿nombre de archivo? – No es tan riguroso en el uso del lenguaje.
• Administrativa: Metadata acerca de la forma en la cual el objeto debe – No hay conocimiento de los usuarios.
ser manipulado.
– ¿es una cosa temporal? • Usuarios : Folksonomies
– ¿debe ser archivado?
– ¿quién es el editor?
– Facilidad de creación.
– ¿ha sido aprobado para su publicación? – Bajo costo, posibilidades de crecimiento.
– Ambigüedad en el lenguaje.
Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
9
10. Folksonomía
• “Colección de metadatos creados por los
usuarios”
– D. Keith Robinson
http://www.flickr.com/photos/tags/fun/clusters/
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Folksonomies
Comparación Algunas Ventajas
• Folksonomía • Las folksonomies entregan información acerca
• Taxonomía
– Control – Flexibilidad de la gente que las crea, invitando a la
– Autoridad – Simpleza, popularidad participación.
– Precisión – Utilidad
– Jerarquía, clasificación – Plano, categorización • Tienen el potencial de nutrir una Web
– Búsqueda – Exploración, serendipity Semántica.
• A nivel de empresa tienen el potencial de
mejorar la categorización de documentos.
• Refleja directamente el lenguaje de los
usuarios.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Folksonomies
Algunas Debilidades
Sistemas de Tagging
• Polisemia • Incentivos a los usuarios
– Palabras con múltiples significados – Future retrieval
• Sinonimia – Contribution and sharing
– Conceptos descritos con diferentes términos – Attract attention
• Plurales – Play and competition
– Gato vs gatos – Self presentation
– Opinion expression
Marlow et al. (2006)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
10
11. Sistemas de Rotulado Inventarios de Contenido
• Un rótulo es un término que representa un • ID
trozo mayor de información
• Nombre
• Textuales / Icónicos / Mixtos
• URL
• Variedades de rótulos
• Links contextuales • Tipo
• Titulares
• Opciones del Sistema de Navegación
• Tema
• Botones de las Aplicaciones • Propietario
• Términos de Indexación
• Estado
• Sistemas de Rotulado consistentes
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Ejercicio: Card Sorting
• Hoy organizaremos los contenidos de Módulo 2:
Volkswagen México Sistemas de Navegación y
Diseño de Interacción
2 Horas
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Sistemas de Navegación
Proceso de Diseño
de la Experiencia de Usuario Navegación Global ¿Dónde estoy? ¿Dónde puedo ir?
¿Dónde puedo ir?
Navegación Local
¿Qué hay cerca?
¿Qué se
Sistemas de Navegación Navegación relaciona ¿Dónde
contextual con lo que puedo ir?
hay aquí?
Louis Rosenfeld y Peter Morville (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
11
12. Tipos de Sistemas de Navegación Guías para el diseño de sistemas
de navegación
• Browser • Navegación que funciona debiera:
• Principales
– Global - Ser fácilmente aprendida
– Local - Permanecer consistente
– Contextual - Entregar feedback
– Paginación - Aparecer en contexto
- Ofrecer alternativas
• Suplementarios - Requerir una economía de acción y tiempo
– Mapas de sitio - Usar rótulos claros y entendibles
– Indices - Ser apropiada al propósito del sitio
- Apoyar las metas y conductas de los usuarios
– Guías
Jennifer Flemming, 1998
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Guías para el diseño de sistemas de navegación
Web Navigation, Designing Navigable Information Spaces,
Jennifer Flemming Mark A. Flotz
Navegación que funciona Principios de diseño para Wayfinding Principios de diseño para un medio
debiera: computacional
- Ser fácilmente aprendida - Crea una identidad para cada locación, diferente - Usa un modo apropiado de presentación
de todas las otras
- Permanecer consistente - Usa hitos para entregar pistas de orientación y - Permite diferentes velocidades de movimiento a
locaciones memorables través del espacio
- Entregar feedback - Crea caminos bien estructurados - Usa data de ruta para visualización, dinamismo
y corrección de errores
- Aparecer en contexto - Crea regiones de distinto carácter visual - Cuando en inmersión, usa un mapa tipo “usted
está aquí”
- Ofrecer alternativas - No entregues al usuario demasiadas opciones de - Personaliza el espacio
navegación
- Requerir una economía de - Usa vistas amplias (entrega a los visitantes - Usa el espacio como un repositorio de
acción y tiempo mapas) conocimiento en evolución
- Usar rótulos claros y - Entrega signos en los puntos de decisión para - Entrega capas de información en el mapa
entendibles ayudar a las decisiones de encontrar el camino
(wayfinding)
- Ser apropiada al - Usa las líneas de visión para mostrar lo que hay
propósito del sitio adelante
- Apoyar las metas y
conductas de los usuarios
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Navegación Global
Breadcrumbs – Migas
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
12
13. Footer – Pie de página Paginación
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Navegación Contextual Mapa de Sitio
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Indice
Proceso de Diseño
de la Experiencia de Usuario
Diseño de Interacción
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
13
15. Diseño de Interacción Desaplicado Diseño de Interacción Desaplicado
Grabar
Imprimir
Cerrar
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Prototipos de Papel Prototipos de Papel
El “computador” resalta el item
que el usuario ha seleccionado.
Un miembro del equipo de
desarrollo observa y toma notas.
El facilitador (fuera de imagen)
está sentado a la derecha del
usuario.
• Computador
• Facilitador
• Usuario
www.paperprototyping.com • Observador
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Casos de Uso Análisis de Tareas
• Convertir metas en tareas
– Enviar mensaje a Pedro
• Un Título • Los pasos principales • Componer mensaje
• Enviar mensaje
• Los Actores • Alternativas • Convertir tareas en pasos
• El Propósito • Otros casos de uso – Componer mensaje
• Ingresar dirección de Pedro
• La condición inicial • Ingresar título del mensaje
• Escribir texto del mensaje
• La condición terminal • Tareas primarias y secundarias
– Buscar dirección de Pedro en Libreta de Direcciones
– Corregir ortografía del texto
• Diseñar flujos para la tarea
– Pantallas Más en
http://www.usabilitynet.org/tools/taskanalysis.htm
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
15
16. Análisis de Tareas
Christina Wodtke
Peter Van Dijck
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Documentación
Mapa de Arquitectura
Peter Van Dijck
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Rosenfeld y Morville Peter Van Dijck
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
16
17. Vocabulario visual de Jesse James Garrett Documentación: Vocabulario Visual JJG
Jesse James Garrett
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Jesse James Garrett http://www.jjg.net/ia/visvocab/spanish.html
Taller de Arquitectura de Información UA Web, México, Febrero 2008
Ejercicio: Mapa de Arquitectura
• A continuación, documentaremos la
organización nueva que hemos creado Módulo 3:
para el Web de Volkswagen México Diseño de Información
• Para esto, utilizaremos la nomenclatura 4 Horas
elaborada por Jesse James Garrett
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Diseño de Información
Proceso de Diseño
de la Experiencia de Usuario Es un campo y un enfoque que
intenta diseñar comunicaciones
Nathan Shedroff
claras y entendibles mediante el
Diseño de Información
cuidado de la estructura, el
contexto y la presentación de
los datos y la información.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
17
18. Regla #1: La Web tiene Diseño de Carteles Carreteros
resolución pobre
• Crea una jerarquía visual en
cada página
• Aprovecha las convenciones
• Descompone las páginas en Steve Krug
áreas claramente definidas
• Haz obvio lo clickeable
• Minimiza el ruido
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Diseño de Información Diseño de Interfaces
• ¿Qué? • El Tao de la Pagina
– El tema central o propósito de la página Principio #1: Simplicidad y Elegancia
debe ser lo más claro Principio #2: Proximidad y Relevancia
• ¿Quién?
Principio #3: Foco y retroalimentación
– Reclamar la propiedad de una página es
básico Principio #4: Una Jerarquía de Importancia, una
• ¿Dónde? Jerarquía de Tareas
– Nunca olvidar la naturaleza internacional del Principio #5: La herramienta Correcta para el
medio
Trabajo Correcto
• ¿Cuándo?
– Indicar la fecha de publicación, las páginas
envejecen luego. Christina Wodtke (2002)
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
http://evolt.org/article/Web_Site_Architecture_101/
Diseño de Documentación
Información
Aplicado
Wireframes ó esquemas de
página, y documentación para
RIAs.
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
18
19. Jesse James Garrett Rosenfeld y Morville
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Rosenfeld y Morville Rosenfeld y Morville
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Christina Wodtke / Noel Franus – Carbon IQ Christina Wodtke / Dan Brown
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
19
20. RIAs Cómo Documentar RIAs
• Diagramación • Cuadro por cuadro
• Prioridad
• Comportamiento • Animaciones de baja fidelidad
• Contenido • Wireframes con cuadros clave
• Funcionalidad
• Manejo de excepciones
• Especificaciones técnicas
• Micro estados
• Tiempo
Ryan Freitas – Adaptive Path, 2007
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Bill Scott – Yahoo!
Cuadro por Cuadro
• Ventajas
– Claro y conciso
– Secuencia de Interacción
– Gran nivel de detalle
• Desventajas
– Carece de Contexto
– No da cuenta del tiempo
– Toma mucho tiempo
Ryan Freitas – Adaptive Path, 2007
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Animaciones de Baja Fidelidad Wireframes con cuadros clave
• Ventajas • Ventajas
– Evita el uso de una maqueta – Entregable conocido
– Buen retorno de inversión (resultado/costo) – Visión holística
– Fácil de comprender – Permite mostrar cambios de pantalla completa
– Puede reforzar a otros documentos
– Buen retorno de inversión
• Desventajas
– Carece de detalle
• Desventajas
– Sin pasos discretos – Complejo con muchos microestados
– Sin notas técnicas – Wireframes quedan repletos
– Entregable no estándar – Se pierde el sentido del tiempo
Ryan Freitas – Adaptive Path, 2007 Ryan Freitas – Adaptive Path, 2007
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
20
21. Wifreframes guiados
Ejercicio: Wireframes
• Finalmente, diagramaremos algunas de
las páginas principales de nuestro nuevo
Web para Volkswagen México.
• Trabajaremos sobre:
1. Sistemas globales de navegación
2. Página de producto
Andres Zapata
3. Página de noticia corporativa
4. Formulario de Registro
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
Temario
• Módulo 1, am • Módulo 2, am
Gracias
– Conceptos Generales – Sistemas de
– Evaluaciones de Navegación Taller de
Usabilidad – Diseño de Interacción
– Estrategia • Ejercicio: Mapa de Arquitectura de Información
Arquitectura
– Arquitectura de
Información • Módulo 3, pm
• Ejercicio: Card Sorting – Diseño de Información Javier Velasco M.
• Ejercicio: Wireframes jvelasco@dcc.uchile.cl
Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008
21