Taller de Arquitectura de Informacion

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

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

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.

¿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

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   

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.

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.

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

Estrategia

Necesidades de Accionistas

Buscamos

Metas

Motivaciones

Mecanismos de evaluación

Métodos de Investigación

Entrevistas

Entrevista contextual

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.

Estrategia

Necesidades de Usuarios

Buscamos

Metas

Lenguaje

Hábitos

Métodos de Investigación

Entrevistas

Focus Group

Entrevista contextual

Estudio etnográfico

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

Entrevistas Efectivas

Neutral

Sondeo

Precisión

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.

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

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.

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

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

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 .

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.

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

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

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

Clasificación temática

Vocabularios Controlados

Taxonomías

Tesauros

Clasificación Facetada

Ontologías

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

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?

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.

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 http://www.flickr.com/photos/tags/fun/clusters/

Comparación

Taxonomía

Control

Autoridad

Precisión

Jerarquía, clasificación

Búsqueda

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.

Folksonomies Algunas Debilidades

Polisemia

Palabras con múltiples significados

Sinonimia

Conceptos descritos con diferentes términos

Plurales

Gato vs gatos

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

Inventarios de Contenido

ID

Nombre

URL

Tipo

Tema

Propietario

Estado

Hoy organizaremos los contenidos de Volkswagen México

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

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 ©

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 ©

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

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

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

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

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

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

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

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

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

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

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

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

Wifreframes guiados Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008 Andres Zapata

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

Temario

Módulo 1, am

Conceptos Generales

Evaluaciones de Usabilidad

Estrategia

Módulo 2, am

Sistemas de Navegación

Diseño de Interacción

Módulo 3, pm

Javier Velasco M. [email_address] Gracias Taller de Arquitectura de Informaci ón Taller de Arquitectura de Informaci ón UA Web, México, Febrero 2008

Taller de Arquitectura de Informacion

0 comments

Notes on slide 1

6 Favorites