Taller Arquitectura Información UA Web México Febrero 2008

Temario
Taller de • Módulo 1, am • Módulo 2, am
Arquitectura de Información – Conceptos Generales – Sistemas de
– Evaluaciones de Navegación
Usabilidad – Diseño de Interacción
Monterrey, Guadalajara, Cd. México
– Estrategia • Ejercicio: Mapa de
Febrero 2008
Arquitectura
– Arquitectura de
Información • Módulo 3, pm
Javier Velasco M. • Ejercicio: Card Sorting – Diseño de Información
jvelasco@dcc.uchile.cl • Ejercicio: Wireframes

Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008

Experiencia de Usuario
Módulo 1:
Conceptos Generales y
Arquitectura de
Información
2 Horas


Problema Tecnología - Persona Diseño de la Experiencia de
Usuario 1
“Los productos
tecnológicos que no • Ejemplo industria
funcionan de la
manera que las automotriz
personas esperan las
hace sentir estúpidas –
aun cuando
efectivamente hayan
logrado lo que se
propusieron.”

Jesse James Garett
(2002)

Taller de Arquitectura de Información UA Web, México, Febrero 2008 ©Porsche A.G. 2002
Taller de Arquitectura de Información UA Web, México, Febrero 2008

1

Elementos de la Experiencia de Usuario
Web como Web como Jesse James Garrett 2000, 2002
Interfaz de Software Sistema de Hipertexto


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


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


2

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


Arquitectura de Información y Usabilidad,
God is My [VCR] Co-pilot un modelo cíclico

Copyright 2004 Steve Krug

Baeza-Yates & Velasco 2004


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

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.


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.


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


4

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.


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


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


5

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)


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.


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”.


6

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)


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)


“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)


7

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



Proceso de Diseño
Arquitectura de Información

Rosenfeld y Morville

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


8

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


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


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.



9

Folksonomía

• “Colección de metadatos creados por los
usuarios”
– D. Keith Robinson

http://www.flickr.com/photos/tags/fun/clusters/

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.

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)


10

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

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


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)


11

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


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


Navegación Global
Breadcrumbs – Migas


12

Footer – Pie de página Paginación


Navegación Contextual Mapa de Sitio


Indice

Proceso de Diseño


13

Interacción: Interfaz:
• interacción. 1. • interfaz. (Del ingl. interface, superficie
f. Acción que se ejerce recíprocamente de contacto).
entre dos o más objetos, agentes, 1. f. Inform. Conexión física y funcional
fuerzas, funciones, etc. entre dos aparatos o sistemas
Real Academia Española ©
independientes.
Real Academia Española ©


• En términos simples, diseño de
interacción es la definición y diseño del
comportamiento de artefactos,
ambientes y sistemas, así como los
elementos formales que comunican ese
comportamiento.

Alan Cooper, 2003


Interacción Humano-Computador Metodologías Populares
Computadores Humanos • Contextual Design
Increíblemente rápidos Increíblemente lentos – http://www.incent.com/
Libres de error Tienden al error • Rational Unified Process
– http://en.wikipedia.org/wiki/Rational_Unified_Process
Determinísticos Irracionales
• Interaction Design (Personas-Scenarios)
Apáticos Emocionales – http://www.evolt.org/article/Practical_Persona_Creation/
Literales Inferenciales • IconProcess
– http://www.iconprocess.com/iconProcess/iconProcess.php
Secuenciales Aleatorios
• eXtreme Programming
Predecibles Inpredecibles
– http://www.extremeprogramming.org/
Amorales Éticos • Usability Engineering Lifecycle
Estúpidos Inteligentes – http://drdeb.vineyard.net//index.php?loc=11&nloc=1
Alan Cooper, 1999


14

Diseño de Interacción Desaplicado Diseño de Interacción Desaplicado

Grabar

Imprimir

Cerrar


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


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


15

Análisis de Tareas

Christina Wodtke

Peter Van Dijck


Documentación

Mapa de Arquitectura

Peter Van Dijck


Rosenfeld y Morville Peter Van Dijck


16

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


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.


17

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


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)


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.


18

Jesse James Garrett Rosenfeld y Morville


Rosenfeld y Morville Rosenfeld y Morville


Christina Wodtke / Noel Franus – Carbon IQ Christina Wodtke / Dan Brown


19

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

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

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

20

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


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


21

Taller Arquitectura Información UA Web México Febrero 2008

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Taller Arquitectura Información UA Web México Febrero 2008

Similar a Taller Arquitectura Información UA Web México Febrero 2008 (15)

Más de UA WEB, A.C.

Más de UA WEB, A.C. (7)

Último

Último (20)

Taller Arquitectura Información UA Web México Febrero 2008