Taller de arquitectura de información para web

2,712 views

Published on

De Javier Velasco.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,712
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Taller de arquitectura de información para web

  1. 1. 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 Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008 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
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  14. 14. 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 © 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 Interacción 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. Alan Cooper, 2003 Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008 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 Taller de Arquitectura de Información UA Web, México, Febrero 2008 Taller de Arquitectura de Información UA Web, México, Febrero 2008 14
  15. 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. 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. 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. 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. 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. 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. 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

×