• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Taller de Arquitectura de Informacion
 

Taller de Arquitectura de Informacion

on

  • 7,866 views

Taller presentado en mexico durante

Taller presentado en mexico durante

Statistics

Views

Total Views
7,866
Views on SlideShare
7,497
Embed Views
369

Actions

Likes
16
Downloads
0
Comments
0

10 Embeds 369

http://www.uaweb.org.mx 335
http://www.slideshare.net 20
http://uaweb.org.mx 4
http://presentacion.org 2
http://www.linkedin.com 2
http://www.rodrigoronda.com 2
http://uaweb.com.mx 1
http://perfeccionate.urp.edu.pe 1
http://oraclesam1mkt.tumblr.com 1
http://cursos.itesm.mx 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taller de Arquitectura de Informacion Taller de Arquitectura de Informacion Presentation Transcript

  • Javier Velasco M. [email_address] Taller de Arquitectura de Informaci ón Monterrey, Guadalajara, Cd. México Febrero 2008 Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
    • ‘ 97 : Comunicador Social m. Diseño Gráfico, Escuela de Comunicación MH. Stgo. “ El Impacto de Internet en sus Usuarios ”
    • ’ 98 : cofundador - evolt.org
    • ‘ 96 - ’99 : propietario – mantruc comunicación, Stgo.
      • ’ 98 : mantruc.com – Web personal
      • ’ 01 : mantruc.com/blog – primer blog de Chile
    • ’ 99 - ’02 : MSM Interactive – nurun Chile.
    Mi carrera en dos pantallas 1/2
    • ’ 01 : AI Chile
    • ’ 02 : IA Institute
    • ’ 02 - ’03 : Copesa
    • ’ 03 * : Centro de Investigación de la Web, DCC, UChile
    • ’ 04 * : Comité de Programa, IA Summit
    • ’ 04 * : Boxes and Arrows
    • ’ 04 : New Media, University of Maine, ME, EEUU.
    • ’ 04 - ’05 : mantruc communication, EEUU.
    • ’ 06 * : Yahoo! Research
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Mi carrera en dos pantallas 2/2
  • Temario
    • Módulo 1, am
      • Conceptos Generales
      • Evaluaciones de Usabilidad
      • Estrategia
      • Arquitectura de Información
        • Ejercicio: Card Sorting
    • Módulo 2, am
      • Sistemas de Navegación
      • Diseño de Interacción
        • Ejercicio: Mapa de Arquitectura
    • Módulo 3, pm
      • Diseño de Información
        • Ejercicio: Wireframes
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Módulo 1: Conceptos Generales y Arquitectura de Información 2 Horas Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Experiencia de Usuario Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Problema Tecnología - Persona Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 “ 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)
  • Diseño de la Experiencia de Usuario 1
    • Ejemplo industria automotriz
    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
  • Elementos de la Experiencia de Usuario
    • Jesse James Garrett 2000, 2002
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Web como Interfaz de Software Web como Sistema de Hipertexto
  • Diseño de Experiencia de Usuario Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Peter Morville 2004
  • Estudio de Compra Entusiasta Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Jared Spool – UIE 2005
    • Cuando la gente está confiada, actúa con mayor entusiasmo.
    • La Arquitectura de Información afecta el nivel de confianza, en ambas direcciones.
  • Arquitectura de Información
    • ¿Qué es?
      • 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.
    • Instituto para la Aquitectura de Información www.iainstitute.org
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
    • Louis Rosenfeld y
    • Peter Morville (2002)
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Investigación Investigación antecedentes Reuniones y presentaciones Reuniones directorio Evaluación tecnología Evaluación heurística Análisis contenido y meta data Mapeo de contenido Análisis competencia Análisis de Logs Casos de uso y personas Investigación contextual Entrevistas y pruebas a usuarios Contexto Contenido Usuarios
  • Accesibilidad
    • Facilita lectura universal
    • P ermite lectura maquinas
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Foto: David Foster Nass
  • 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íficos pueden 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
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008   
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Copyright 2004 Steve Krug God is My [VCR] Co-pilot
  • Arquitectura de Información y Usabilidad, un modelo c íclico Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Baeza-Yates & Velasco 2004
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Jess McMullin + Lou Rosenfeld
  • Proceso de Diseño de la Experiencia de Usuario Evaluaciones de Usabilidad Herramientas iterativas que se utilizan desde el inicio del proyecto. Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Evaluaciones Heurísticas
    • Un grupo de evaluadores experimentados evalúa el sistema bajo una lista de reglas heurísticas, las que a su vez fueron creadas por expertos en base a su experiencia.
    • Como resultado, se detecta una serie de problemas, los que son priorizados.
    • Para cada problema se sugiere un método para su solución.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Pruebas con usuarios
    • Se presenta la interfaz, en forma individual, a un pequeño grupo de usuarios para que la utilicen y comenten las dificultades que encuentran a su paso.
    • Las principales variantes son navegación libre o tareas específicas. Estas últimas representan tareas importantes del sistema, o problemas específicos a evaluar.
    • Los usuarios encuentran una serie de problemas, y la interfaz debe ser probada nuevamente, cuando generalmente aparecen problemas nuevos.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Estrategia Proceso de Diseño de la Experiencia de Usuario Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Dise ño Centrado en el Usuario
    • Adivinar lo que quieren las personas y construir un sitio para ellos es caro ; si adivinas mal, hay que volver a hacerlo todo .
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke 2002
  • Dise ño Centrado en el Usuario
    • Los pasos básicos son:
      • Averigua para quién es el sitio.
      • Habla con esas personas.
      • Diseña el sitio para ellos.
      • Prueba un prototipo del sitio con ellos.
      • Cambia el diseño de acuerdo a lo aprendido.
      • Prueba el sitio final con ellos.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke
  • Dos fuentes de necesidades
    • Accionistas
      • Deben satisfacer sus necesidades organizacionales
        • Potenciar el negocio
        • Conocer a sus clientes
    • Usuarios
      • Debe satisfacer sus necesidades
        • Cumplir su meta
        • No sentirse tonto
        • Resguardar su privacidad
    • El diseñador debe lograr el balance
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Estrategia
    • Necesidades de Accionistas
      • Buscamos
        • Metas
        • Motivaciones
        • Mecanismos de evaluación
      • Métodos de Investigación
        • Entrevistas
        • Entrevista contextual
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Entrevistando Accionistas
    • Hay que llegar a quien toma las decisiones, y hacerlo participar.
    • Descubrir las razones para el nuevo proyecto.
          • “ Quiero lucirme con el directorio”
    • Cuál es el problema a resolver.
          • ¿Cuáles son tus 5 mayores problemas?
    • Cómo será evaluado.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Estrategia
    • Necesidades de Usuarios
      • Buscamos
        • Metas
        • Lenguaje
        • Hábitos
      • Métodos de Investigación
        • Entrevistas
        • Focus Group
        • Entrevista contextual
        • Estudio etnográfico
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Entrevistando
    • Pregunta tus preguntas
      • Se neutral.
      • Ten preguntas de seguimiento listas.
        • Recuerda que no eres un científico.
        • Estás acá como diseñador, tratando de averiguar el modelo mental que tiene la gente para el mundo que vas a diseñar.
    • Escribe lo que aprendiste
      • Busca patrones.
      • Piensa en forma crítica.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Entrevistas Efectivas
    • Si le preguntas a alguien “¿Es este sitio fácil de usar?” hay una gran probabilidad que te responda:
      • “ Seguro”, y luego habrás diseñado un sitio que funciona de la misma forma que tu competidor.
    • 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 describirías este sitio?” estás escondiendo tu opinión y además los haces pensar un poco antes de responder.
      • “ Bueno… yo creo que un tres. Siempre puedo encontrar lo que busco, pero cada vez que compro tengo que llenar los formularios nuevamente, es una lata.”
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Entrevistas Efectivas
    • Neutral
    • Sondeo
    • Precisión
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Entrevista Neutral
    • Pretende ser un siquiatra.
      • Sé cortes e interesado, no social y hablador.
    • Otros consejos:
      • No reveles tu opinión.
      • No te pongas impaciente.
      • Pierde la importancia.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Sondeo Efectivo
    • La clave para una entrevista efectiva es mantener a la persona hablando del tema.
      • Haz sonidos motivantes pero neutros.
        • Usa sonidos tipo “aha”, “hmm” ó “oh”
      • Usa tus preguntas de seguimiento.
        • Por ejemplo, pregunta: “¿Me puedes contar más sobre eso?”
      • Usa frases incompletas.
        • “ Entonces, lo que querías lograr era…”
      • Recupera a la gente cuando derivan del tema.
        • “ Sí, eso puede ser muy frustrante, pero en realidad lo que quiero es que me hables sobre este producto”.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Entrevistas Precisas
    • La meta de estas entrevistas es obtener la mayor cantidad posible de información sobre el entrevistado – no lo que piensan de ellos mismos , sino lo que realmente necesitan y hacen.
      • No hagas preguntas de diseño.
      • Haz que la gente te muestre en vez de contarte lo más posible.
      • Graba lo que oyes y ves.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • 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?
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002) Christina Wodtke (2002)
  • Investigación Contextual
    • Entrevista se desarrolla en ambiente natural del sujeto
    • Permite observar las sutilezas del ambiente y actividad cotidiana
      • Ej.: Frecuencia de llamados por telefono
    • Ver c ómo la persona ejecuta las tareas y cuáles son sus dificultades
    • Cómo alterna el software con elementos físicos
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Personajes Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Javier Tu Mike Will Peter - - - - - - Lou - - - - - - Claudia - - - - - - http://www.iawiki.net/action=browse&id=PersonaDesign&oldid=PersonasDesign
  • Diseñando tus personajes
    • Los personajes 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
    • Los personajes representan patrones de conducta , no cargos de trabajo
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Kim Goodwin (2001)
    • Personaje: Claudia escribe comunicados de prensa y los organiza para su distribución en forma impresa. También adapta comunicados de prensa para publicación en el sitio de la compañía, pero alguien más los publica.
    • 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.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Adaptado de Dona Maurer (2002) “ Me gustaría poder publicar todo yo misma, pero no sé cómo hacerlo” Claudia Silva Relacionadora Pública 36 Años Vive en Ñuñoa con su hija de 5 años Trabaja hace 4 años en una oficina ministerial, encargada de eventos y difusión.
  • Análisis Comparativo Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Programacion Contacto Blog Directorio Mi Radio x x x x Radio 1 x x x Radio 2 x x x Radio 3 x x Radio 4 x x x
  • Análisis FODA
    • Herramienta del Márketing
      • Mi producto, organización, o marca
        • Fortalezas
        • Debilidades
      • Mi mercado
        • Oportunidades
        • Amenazas
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Mapa de Posicionamiento Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 www.marketingteacher.com
  • Diseña un sitio para la gente
    • Ahora, analiza las entrevistas, buscando temas recurrentes . Busca especialmente problemas que surgen repetidamente, el lenguaje que la gente usa para describir el contenido y las acciones , y pistas acerca de cómo piensan sobre el tema en cuestión .
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Y luego, pruébalo:
    • Prueba un prototipo del sitio con los usuarios potenciales:
      • Preparar la prueba del prototipo…
      • Evaluar el prototipo…
      • Realizar la prueba con el prototipo…
      • Analizar los resultados de la prueba…
    • Probar el sitio final con los usuarios.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Elementos en una Estrategia de Proyecto Web
    • Definición de Objetivos
      • Generales
      • Específicos
    • Análisis
      • Benchmarking
      • Posicionamiento
      • Foda
    • Audiencia
      • Segmentación por tipos
      • Descripción de los tipos de audiencia en relación con el proyecto
    • Estrategia
      • Desarrollar y publciar estrategia explícita
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Arquitectura de Información Proceso de Diseño de la Experiencia de Usuario 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
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Rosenfeld y Morville
  • Esquemas de Clasificación
    • Exactos
      • Alfabético
      • Cronológico
      • Geográfico
    • Ambiguos
      • Tema o materia
      • Tarea
      • Audiencia
      • Metáfora
    • Híbridos
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 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
  • Esquemas de Clasificación
    • Clasificación temática
      • Vocabularios Controlados
      • Taxonomías
      • Tesauros
      • Clasificación Facetada
      • Ontologías
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Esquemas de Clasificació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
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Tesauros Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 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
  • Clasificación Facetada
    • Epicurious.com
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 www.epicurious.com
  • Metadatos
    • 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?
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Metadatos Cómo obtenerlos
    • Expertos
      • Tradicionalmente los metadatos son generados por un equipo de catalogadores expertos usando un vocabulario controlado.
      • Alta calidad, alto costo: problemas de crecimiento.
      • No hay conocimiento de los usuarios.
    • Autores
      • Facilita el proceso de creación.
      • No es tan riguroso en el uso del lenguaje.
      • No hay conocimiento de los usuarios.
    • Usuarios : Folksonomies
      • Facilidad de creación.
      • Bajo costo, posibilidades de crecimiento.
      • Ambigüedad en el lenguaje.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Folksonomía
    • “ Colección de metadatos creados por los usuarios”
      • D. Keith Robinson
    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://www.flickr.com/photos/tags/fun/clusters/
  • Comparación
    • Taxonomía
      • Control
      • Autoridad
      • Precisión
      • Jerarquía, clasificación
      • Búsqueda
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
    • Folksonomía
      • Flexibilidad
      • Simpleza, popularidad
      • Utilidad
      • Plano, categorización
      • Exploración, serendipity
  • Folksonomies Algunas Ventajas
    • Las folksonomies entregan información acerca de la gente que las crea, invitando a la participación.
    • Tienen el potencial de nutrir una Web 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
  • Folksonomies Algunas Debilidades
    • Polisemia
      • Palabras con múltiples significados
    • Sinonimia
      • Conceptos descritos con diferentes términos
    • Plurales
      • Gato vs gatos
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Sistemas de Tagging
    • Incentivos a los usuarios
      • Future retrieval
      • Contribution and sharing
      • Attract attention
      • Play and competition
      • Self presentation
      • Opinion expression
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Marlow et al. (2006)
  • 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
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Inventarios de Contenido
    • ID
    • Nombre
    • URL
    • Tipo
    • Tema
    • Propietario
    • Estado
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Ejercicio: Card Sorting
    • Hoy organizaremos los contenidos de Volkswagen México
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Módulo 2: Sistemas de Navegaci ón y Diseño de Interacción 2 Horas 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 Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Sistemas de Navegación Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Navegación Global Navegación Local Navegación contextual ¿Dónde estoy? ¿Qué hay cerca? ¿Qué se relaciona con lo que hay aquí? ¿Dónde puedo ir? ¿Dónde puedo ir? ¿Dónde puedo ir? Louis Rosenfeld y Peter Morville (2002)
  • Tipos de Sistemas de Navegación
    • Browser
    • Principales
      • Global
      • Local
      • Contextual
      • Paginación
    • Suplementarios
      • Mapas de sitio
      • Indices
      • Guías
    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, Jennifer Flemming Designing Navigable Information Spaces, Mark A. Flotz Navegación que funciona debiera: Principios de diseño para Wayfinding Principios de diseño para un medio computacional - Ser fácilmente aprendida - Crea una identidad para cada locación, diferente de todas las otras - Usa un modo apropiado de presentación - Permanecer consistente - Usa hitos para entregar pistas de orientación y locaciones memorables - Permite diferentes velocidades de movimiento a 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 navegación - Personaliza el espacio - Requerir una economía de acción y tiempo - Usa vistas amplias (entrega a los visitantes mapas) - Usa el espacio como un repositorio de conocimiento en evolución - Usar rótulos claros y entendibles - Entrega signos en los puntos de decisión para ayudar a las decisiones de encontrar el camino (wayfinding) - Entrega capas de información en el mapa - Ser apropiada al propósito del sitio - Usa las líneas de visión para mostrar lo que hay adelante - Apoyar las metas y conductas de los usuarios
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Navegación Global Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Breadcrumbs – Migas Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Footer – Pie de página Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Paginación Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Navegación Contextual Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Mapa de Sitio Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Indice Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Interacción Proceso de Diseño de la Experiencia de Usuario Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Interacción:
    • interacción. 1. f. Acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc. Real Academia Española ©
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Interfaz:
    • interfaz. (Del ingl. interface, superficie de contacto). 1. f. Inform. Conexión física y funcional entre dos aparatos o sistemas independientes. Real Academia Española ©
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Dise ño de Interacción
    • 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.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Alan Cooper, 2003
  • Diseño de Interacción Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Interacción Humano-Computador Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Computadores Increíblemente rápidos Libres de error Determinísticos Apáticos Literales Secuenciales Predecibles Amorales Estúpidos Humanos Increíblemente lentos Tienden al error Irracionales Emocionales Inferenciales Aleatorios Inpredecibles Éticos Inteligentes Alan Cooper, 1999
  • Metodologías Populares
    • Contextual Design
      • http://www.incent.com/
    • Rational Unified Process
      • http://en.wikipedia.org/wiki/Rational_Unified_Process
    • Interaction Design (Personas-Scenarios)
      • http://www.evolt.org/article/Practical_Persona_Creation/
    • IconProcess
      • http://www.iconprocess.com/iconProcess/iconProcess.php
    • eXtreme Programming
      • http://www.extremeprogramming.org/
    • Usability Engineering Lifecycle
      • http://drdeb.vineyard.net//index.php?loc=11&nloc=1
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Interacción Des aplicado Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Interacción Des aplicado Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Grabar Imprimir Cerrar
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Prototipos de Papel
  • Prototipos de Papel Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
    • Computador
    • Facilitador
    • Usuario
    • Observador
    www.paperprototyping.com 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.
  • Casos de Uso
    • Un Título
    • Los Actores
    • El Propósito
    • La condición inicial
    • La condición terminal
    • Los pasos principales
    • Alternativas
    • Otros casos de uso
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Análisis de Tareas
    • Convertir metas en tareas
      • Enviar mensaje a Pedro
        • Componer mensaje
        • Enviar mensaje
    • Convertir tareas en pasos
      • Componer mensaje
        • Ingresar dirección de Pedro
        • Ingresar título del mensaje
        • Escribir texto del mensaje
    • 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
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Más en http://www.usabilitynet.org/tools/taskanalysis.htm
  • Análisis de Tareas Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Peter Van Dijck
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Peter Van Dijck
  • Mapa de Arquitectura Documentació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 Rosenfeld y Morville
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Peter Van Dijck
  • Vocabulario visual de Jesse James Garrett Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Jesse James Garrett
  • Documentación: Vocabulario Visual JJG Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 http://www.jjg.net/ia/visvocab/spanish.html Jesse James Garrett
  • Ejercicio: Mapa de Arquitectura
    • A continuación, documentaremos la organización nueva que hemos creado para el Web de Volkswagen México
    • Para esto, utilizaremos la nomenclatura elaborada por Jesse James Garrett
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Módulo 3: Diseño de Información 4 Horas 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 Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Información
    • Es un campo y un enfoque que intenta diseñar comunicaciones claras y entendibles mediante el 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 Nathan Shedroff
  • Regla #1: La Web tiene resolución pobre Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Carteles Carreteros
    • Crea una jerarquía visual en cada página
    • Aprovecha las convenciones
    • Descompone las páginas en áreas claramente definidas
    • Haz obvio lo clickeable
    • Minimiza el ruido
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Steve Krug
  • 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.
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Diseño de Interfaces
    • El Tao de la Pagina
      • Principio #1: Simplicidad y Elegancia
      • Principio #2: Proximidad y Relevancia
      • Principio #3: Foco y retroalimentación
      • Principio #4: Una Jerarquía de Importancia, una Jerarquía de Tareas
      • Principio #5: La herramienta Correcta para el Trabajo Correcto
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke (2002)
  • Diseño de Información Aplicado Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 http://evolt.org/article/Web_Site_Architecture_101/
  • Wireframes ó esquemas de página, y documentación para RIAs. Documentació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 Jesse James Garrett
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Rosenfeld y Morville
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Rosenfeld y Morville
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Rosenfeld y Morville
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke / Noel Franus – Carbon IQ
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Christina Wodtke / Dan Brown
  • RIAs
    • Diagramación
    • Prioridad
    • Comportamiento
    • Contenido
    • Funcionalidad
    • Manejo de excepciones
    • Especificaciones técnicas
    • Micro estados
    • Tiempo
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • C ómo Documentar RIAs
    • Cuadro por cuadro
    • Animaciones de baja fidelidad
    • Wireframes con cuadros clave
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Ryan Freitas – Adaptive Path, 2007
  • 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
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Ryan Freitas – Adaptive Path, 2007
  • Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Bill Scott – Yahoo!
  • Animaciones de Baja Fidelidad
    • Ventajas
      • Evita el uso de una maqueta
      • Buen retorno de inversión (resultado/costo)
      • Fácil de comprender
      • Puede reforzar a otros documentos
    • Desventajas
      • Carece de detalle
      • Sin pasos discretos
      • Sin notas técnicas
      • Entregable no estándar
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Ryan Freitas – Adaptive Path, 2007
  • Wireframes con cuadros clave
    • Ventajas
      • Entregable conocido
      • Visión holística
      • Permite mostrar cambios de pantalla completa
      • Buen retorno de inversión
    • Desventajas
      • Complejo con muchos microestados
      • Wireframes quedan repletos
      • Se pierde el sentido del tiempo
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Ryan Freitas – Adaptive Path, 2007
  • Wifreframes guiados Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Andres Zapata
  • Ejercicio: Wireframes
    • Finalmente, diagramaremos algunas de las páginas principales de nuestro nuevo Web para Volkswagen México.
    • Trabajaremos sobre:
      • Sistemas globales de navegación
      • Página de producto
      • Página de noticia corporativa
      • Formulario de Registro
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Temario
    • Módulo 1, am
      • Conceptos Generales
      • Evaluaciones de Usabilidad
      • Estrategia
      • Arquitectura de Información
        • Ejercicio: Card Sorting
    • Módulo 2, am
      • Sistemas de Navegación
      • Diseño de Interacción
        • Ejercicio: Mapa de Arquitectura
    • Módulo 3, pm
      • Diseño de Información
        • Ejercicio: Wireframes
    Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008
  • Javier Velasco M. [email_address] Gracias Taller de Arquitectura de Informaci ón Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008