SlideShare una empresa de Scribd logo
1 de 40
Descargar para leer sin conexión
Diseño de un
documento informativo.
Método de diseño de diseño de información basado en Personas.

Otoño 2009.


Mtro. Omar Sosa Tzec
http://www.tzek-design.com/blog
¿Qué conforma un
documento informativo?
Niveles de contenido en un
documento informativo:

* datos crudos.
* unidades de información.
* información compuesta.
Datos crudos.

Unidades que conforman la información, como
lo pueden ser:

* caracteres o letras (a…z, A…Z),

* números (0…9),

* componentes gráficos (línea, punto, forma) y

* otras variables visuales (color, saturación).
Unidades de información.

Es la entidad mínima derivada de la
combinación de datos que tiene significado para
el usuario:

* palabras,

* grafos o gráficas, e

* imágenes (con cierto nivel de iconicidad).
Información compuesta.

Las unidades informativas se complementan
unas a otras de forma que el usuario identifica
una entidad de información mayor referente a
una idea general.

Responde a preguntas del tipo:

* ¿qué es esto?,

* ¿qué quiere decir esta parte?
¿Cuál es el alcance de la información en
un documento de esta naturaleza?
Pertinencia del contenido:

* Para informar.
* Para la toma de decisiones (dentro del contexto).
* Para la generación de conocimiento.
Para informar.

En el documento las entidades de información
compuesta sólo expresan la idea que conllevan
para dar por enterado al usuario del documento.
Para la toma de decisiones.

El siguiente paso en el flujo de acción al tener a la mano un
documento informativo.

El usuario utiliza la información, dentro del contexto para el
cual el documento fue diseño, para ejecutar una tarea.

Por ejemplo:

* saber cuánto debe pagar en una tarjeta de crédito,
* saber qué medicina fue prescrita, o bien
* llenar los campos de un formulario.
Generación de conocimiento.

El usuario interioriza las consecuencias de las acciones
tomadas con la ayuda de la información brindada y puede
inferir, inducir o reflexionar sobre situaciones en el futuro.

Por ejemplo:

* Comprender su relación de gastos en una tarjeta de crédito
y razonar cómo crecerán los intereses moratorios.

* Determinar cuál es la relación del cobro en el recibo de la
luz en relación con otros gastos fijos en el hogar.
El método.
Personas es un método para modelar
a los usuarios de nuestros proyectos
de diseño...

Su inventor es Alan Cooper.



Página web: http://www.cooper.com

Libro de Cooper sobre Diseño de Interaccción:
About the Face.
Sarah Williams: Nueva cliente.                                                      “No tengo que estar checando la privacidad
                                                                                                                    de la información. Quiero que el sitio lo deje claro.”


                                    Demografía                             Confort Tecnológico            Background personal

                                    Grupo de Edad: 21-34.                  PC: Medio.                     Sarah es una mujer soltera que trabaja largas horas en una
                                    Años en línea: 0-2.                    Web: bajo.                     consultoría de procesos. Tiene que viajar mucho y rara vez
                                    Ingreso: $10k.                                                        tiene tiempo de terminar pendientes. Además, es desconfiada
                                                                                                          en hacer transacciones en línea debido a los fraudes y robo
                                                                                                          de identidad potenciales. La conveniencia y ahorro de usar
                                    Necesidades
                                                                                                          un banco en línea suena atractivo, pero quiere asegurarse de
                                                                                                          que su información está segura y su dinero a salvo.
                                    * Asegurarse de su seguridad y privacidad.
                                    * Recibir un mensaje claro de lo que espera.
                                    * Fácil acceso a alguien “de verdad” (una persona).

Motivaciones                                  Escenarios                                     Características                           Comportamientos

Aprender acerca de los diferentes             * Comparar las cuentas bancarias               * Gráfica de comparación                 * Sarah da clic en “comparar” que la lleva
tipos de cuentas bancarias en línea.          a través de diferentes sitios.                  por producto.                           a una lista de productos donde puede
                                                                                             * Gráfica de comparación de              comparar.
                                                                                             competidores para diferentes
                                                                                             productos.


                                              * Buscar información de contacto               * Preguntas frecuentes
                                              de un representante para preguntas             * Chat en línea con un representante.    * En la página de un producto, Sarah hace
                                              específicas.                                                                            clic en un link que dice “Preguntar a un
                                                                                                                                      representante”  .



Aplicar para una cuenta bancaria.             * Investigación ya terminada y lista           * Proceso de aplicación paso a           * En la página de un producto, Sarah hace
                                              para aplicar.                                  paso.                                    clic en “Aplicar”
                                                                                                                                                      .


                                              * Quiere sentirse confortable con              * Demo del proceso de aplicación.        * En la página de un producto, Sarah hace
                                              el proceso de aplicación en línea                                                       clic en “Aprender más sobre el proceso
                                              que está haciendo.                                                                      de aplicación”.
Para efectos del ejercicio las personas
deben ser simples, requerirán la definición
de:

* nombre,
* rostro,
* contexto de vida,
* objetivo de uso y
* dudas relacionadas con el uso del documento.
El factor clave es “ponerse en los zapatos”
de la o las personas inventadas.

En un sentido práctico, se tomará en cuenta
sólo una persona, la llamada “persona
primaria” y será un arquetipo lo más
general al tipo de usuario del documento.
El objetivo de uso corresponde a la tarea
más general que la persona debe cumplir
y por lo cual se ha diseñado el documento.

En primera instancia podría considerarse
un nivel informativo, pero el objetivo es
diseñar la información para lograr la
generación de conocimiento.
Relacionadas con este objetivo, al
usuario le surgen un número
considerable de dudas asociadas.

Sin embargo, en el proceso el diseñador
debe considerar “ir más allá” y “exprimir
el cerebro” del arquetipo de forma que
se haga preguntas “fuera de lo normal”.
Objetivo de uso
Objetivo de uso


               Preguntas



Preguntas                     Preguntas



               Preguntas
Para cada pregunta, se realiza una lluvia
de ideas.

* Hay que tomar en cuenta que esta lluvia de
ideas es la ideación de las entidades
informativas plausibles para el documento.

* Dicha ideación debe impulsar no sólo la
proliferación de entidades informativas
compuestas cuyo propósito sea informar,
sino también de aquellas que induzcan a la
generación de conocimiento.
Objetivo de uso


Ideas
Lo siguiente es conformar un flujo informativo
para el documento.

Primero hay que determinar las tareas que el
usuario debe realizar y que están o podrían
estar asociadas al problema, dentro del
contexto considerado.

* Las tareas involucran la agrupación de ideas
propuestas.
Una vez formados los grupos, uno para cada
tarea identificada (con sus respectivas ideas
de diseño), el siguiente paso es jerarquizarlas.

* Determinar cuál de las tareas está más
vinculada con el objetivo general.

* Después la segunda tarea más vinculada,
tercera y así sucesivamente…
Ejecución.
El flujo informativo está directamente
relacionada con la jerarquía de la tareas.

* El layout del documento debe ser congruente
con los estándares de lectura en la cultura del
usuario y demostrará este flujo informativo.
Ya habíamos platicado antes que los factores de
ejecución siempre a considerar en la
construcción de mensajes visuales:

* El espacio mismo.
* Ocupación del espacio (composición).
* Establecimiento de jerarquías.
* Aislamiento de elementos y legibilidad.
* Sentido de la lectura del mensaje.
* Síntesis e iconicidad.
* Uso del color y contraste cromático.
* Tensión y ritmo.
* Estética (básica a la cultura).
* En este ejercicio se asumirá el documento
impreso a negro y escala de grises.

* El color tipográfico deberá ser cuidadosamente
seleccionado pensando en el usuario en relación
con la lectura del documento.

* Los “chunks” de información deberán ser
claramente identificados.

* El layout del documento deberá considerar una
retícula que brinde estructura y facilite la lectura
del documento.
Gracias.

* El ejemplo de persona fue tomado de “Communicating Design” de Dan Brown con fines
educativos/ilustrativos.

* Método de diseño de información planteado por Omar Sosa Tzec. Octubre, 2009.

Más contenido relacionado

Destacado

Destacado (8)

Cap6
Cap6Cap6
Cap6
 
Proyecto Comenius Covarrubias
Proyecto Comenius CovarrubiasProyecto Comenius Covarrubias
Proyecto Comenius Covarrubias
 
Pressemitteilung victor Konferenz: Die Referenten
Pressemitteilung victor Konferenz: Die ReferentenPressemitteilung victor Konferenz: Die Referenten
Pressemitteilung victor Konferenz: Die Referenten
 
AIHK Mitteilungen 04 2012
AIHK Mitteilungen 04 2012AIHK Mitteilungen 04 2012
AIHK Mitteilungen 04 2012
 
Hansel y gretel
Hansel y gretelHansel y gretel
Hansel y gretel
 
Tema 1. el antiguo régimen
Tema 1.  el antiguo régimenTema 1.  el antiguo régimen
Tema 1. el antiguo régimen
 
Stress
StressStress
Stress
 
Dirk Engel (Universal McCann): Digitale Dandys: Social-Media-Typologie
Dirk Engel (Universal McCann): Digitale Dandys: Social-Media-TypologieDirk Engel (Universal McCann): Digitale Dandys: Social-Media-Typologie
Dirk Engel (Universal McCann): Digitale Dandys: Social-Media-Typologie
 

Similar a Método de diseño de información para un documento

Otra infor exploratorio
Otra infor exploratorioOtra infor exploratorio
Otra infor exploratoriozuleikanicole
 
Tu negocio turístico online, paso a paso
Tu negocio turístico online, paso a paso Tu negocio turístico online, paso a paso
Tu negocio turístico online, paso a paso Yolanda Hernández
 
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocio
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocioCómo crear una estrategia efectiva de presencia en internet para ti o tu negocio
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocioTalanton S.C.
 
Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Rodrigo Vera
 
Las tics:nube,plagio,redes y reglas netiqueta
Las tics:nube,plagio,redes y reglas netiquetaLas tics:nube,plagio,redes y reglas netiqueta
Las tics:nube,plagio,redes y reglas netiquetajohant107
 
Caso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero idealCaso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero idealDiga33!
 
LabTaller Sevilla. Analítica Web: Adrián Segovia
LabTaller Sevilla. Analítica Web: Adrián SegoviaLabTaller Sevilla. Analítica Web: Adrián Segovia
LabTaller Sevilla. Analítica Web: Adrián Segoviaandalucialab
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica WireframesRodrigo Vera
 
Root Secure Information Disclosure
Root Secure Information DisclosureRoot Secure Information Disclosure
Root Secure Information DisclosureCristian Borghello
 
Usabilidad, accesibilidad y planificación en el diseño
Usabilidad, accesibilidad y planificación en el diseñoUsabilidad, accesibilidad y planificación en el diseño
Usabilidad, accesibilidad y planificación en el diseñoSebastián Unda Endara
 
TAREA ECOMMERCE
TAREA ECOMMERCETAREA ECOMMERCE
TAREA ECOMMERCEmexh17
 
Usabilidad en práctica caso ISAGEN - Ana María Echeverri
Usabilidad en práctica caso ISAGEN - Ana María EcheverriUsabilidad en práctica caso ISAGEN - Ana María Echeverri
Usabilidad en práctica caso ISAGEN - Ana María Echeverriwww.usarte.co
 
Identidad digital y empresas 2.0
Identidad digital y empresas 2.0Identidad digital y empresas 2.0
Identidad digital y empresas 2.0enMarcate
 
Web 2.0 para buscar empleo y Face to Face para conseguirlo
Web 2.0 para buscar empleo y Face to Face para conseguirloWeb 2.0 para buscar empleo y Face to Face para conseguirlo
Web 2.0 para buscar empleo y Face to Face para conseguirloEva Herrero
 
Internet
InternetInternet
Internetreynate
 
Identidad Digital y Web 2.0 en la Era post PC
Identidad Digital y Web 2.0 en la Era post PCIdentidad Digital y Web 2.0 en la Era post PC
Identidad Digital y Web 2.0 en la Era post PCCRISEL BY AEFOL
 

Similar a Método de diseño de información para un documento (20)

Otra infor exploratorio
Otra infor exploratorioOtra infor exploratorio
Otra infor exploratorio
 
Tu negocio turístico online, paso a paso
Tu negocio turístico online, paso a paso Tu negocio turístico online, paso a paso
Tu negocio turístico online, paso a paso
 
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocio
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocioCómo crear una estrategia efectiva de presencia en internet para ti o tu negocio
Cómo crear una estrategia efectiva de presencia en internet para ti o tu negocio
 
Publicar una web en el móvil
Publicar una web en el móvilPublicar una web en el móvil
Publicar una web en el móvil
 
Agregador financiero ideal
Agregador financiero idealAgregador financiero ideal
Agregador financiero ideal
 
Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02
 
Las tics:nube,plagio,redes y reglas netiqueta
Las tics:nube,plagio,redes y reglas netiquetaLas tics:nube,plagio,redes y reglas netiqueta
Las tics:nube,plagio,redes y reglas netiqueta
 
Caso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero idealCaso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero ideal
 
LabTaller Sevilla. Analítica Web: Adrián Segovia
LabTaller Sevilla. Analítica Web: Adrián SegoviaLabTaller Sevilla. Analítica Web: Adrián Segovia
LabTaller Sevilla. Analítica Web: Adrián Segovia
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
 
Root Secure Information Disclosure
Root Secure Information DisclosureRoot Secure Information Disclosure
Root Secure Information Disclosure
 
Usabilidad, accesibilidad y planificación en el diseño
Usabilidad, accesibilidad y planificación en el diseñoUsabilidad, accesibilidad y planificación en el diseño
Usabilidad, accesibilidad y planificación en el diseño
 
TAREA ECOMMERCE
TAREA ECOMMERCETAREA ECOMMERCE
TAREA ECOMMERCE
 
Usabilidad en práctica caso ISAGEN - Ana María Echeverri
Usabilidad en práctica caso ISAGEN - Ana María EcheverriUsabilidad en práctica caso ISAGEN - Ana María Echeverri
Usabilidad en práctica caso ISAGEN - Ana María Echeverri
 
Rds perryellis
Rds perryellisRds perryellis
Rds perryellis
 
las redes fh red de 2008
las redes fh red de 2008las redes fh red de 2008
las redes fh red de 2008
 
Identidad digital y empresas 2.0
Identidad digital y empresas 2.0Identidad digital y empresas 2.0
Identidad digital y empresas 2.0
 
Web 2.0 para buscar empleo y Face to Face para conseguirlo
Web 2.0 para buscar empleo y Face to Face para conseguirloWeb 2.0 para buscar empleo y Face to Face para conseguirlo
Web 2.0 para buscar empleo y Face to Face para conseguirlo
 
Internet
InternetInternet
Internet
 
Identidad Digital y Web 2.0 en la Era post PC
Identidad Digital y Web 2.0 en la Era post PCIdentidad Digital y Web 2.0 en la Era post PC
Identidad Digital y Web 2.0 en la Era post PC
 

Más de Omar Sosa-Tzec

Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...
Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...
Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...Omar Sosa-Tzec
 
Delight in the User Experience: Form and Place
Delight in the User Experience: Form and PlaceDelight in the User Experience: Form and Place
Delight in the User Experience: Form and PlaceOmar Sosa-Tzec
 
Delight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsDelight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsOmar Sosa-Tzec
 
Critical Design Research and Constructive Research Outcomes as Arguments
Critical Design Research and Constructive Research Outcomes as ArgumentsCritical Design Research and Constructive Research Outcomes as Arguments
Critical Design Research and Constructive Research Outcomes as ArgumentsOmar Sosa-Tzec
 
Creative Data and Information Visualization: Reflections on Two Pedagogical A...
Creative Data and Information Visualization: Reflections on Two Pedagogical A...Creative Data and Information Visualization: Reflections on Two Pedagogical A...
Creative Data and Information Visualization: Reflections on Two Pedagogical A...Omar Sosa-Tzec
 
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...Teaching Design, Information, and Interaction: Reflections, Foundations, and ...
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...Omar Sosa-Tzec
 
Visualizing Data Trails: Metaphors and a Symbolic Language for Interfaces
Visualizing Data Trails: Metaphors and a Symbolic Language for InterfacesVisualizing Data Trails: Metaphors and a Symbolic Language for Interfaces
Visualizing Data Trails: Metaphors and a Symbolic Language for InterfacesOmar Sosa-Tzec
 
Communicating design-related intellectual influence: towards visual references
 Communicating design-related intellectual influence: towards visual references Communicating design-related intellectual influence: towards visual references
Communicating design-related intellectual influence: towards visual referencesOmar Sosa-Tzec
 
Design tensions: Interaction Criticism on Instagram’s Mobile Interface
Design tensions: Interaction Criticism on Instagram’s Mobile InterfaceDesign tensions: Interaction Criticism on Instagram’s Mobile Interface
Design tensions: Interaction Criticism on Instagram’s Mobile InterfaceOmar Sosa-Tzec
 
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...Omar Sosa-Tzec
 
My fascination with the visual: meaning, persuasion, and delight
My fascination with the visual: meaning, persuasion, and delightMy fascination with the visual: meaning, persuasion, and delight
My fascination with the visual: meaning, persuasion, and delightOmar Sosa-Tzec
 
Visual Design for Interface and Experience Design
Visual Design for Interface and Experience DesignVisual Design for Interface and Experience Design
Visual Design for Interface and Experience DesignOmar Sosa-Tzec
 
Affordances, Constraints, and Feedback in User Experience Design
Affordances, Constraints, and Feedback in User Experience DesignAffordances, Constraints, and Feedback in User Experience Design
Affordances, Constraints, and Feedback in User Experience DesignOmar Sosa-Tzec
 
User Experience Design, Navigation, and Interaction Flows
User Experience Design, Navigation, and Interaction FlowsUser Experience Design, Navigation, and Interaction Flows
User Experience Design, Navigation, and Interaction FlowsOmar Sosa-Tzec
 
Introduction to Human-Computer Interaction and Interaction Design
Introduction to Human-Computer Interaction and Interaction DesignIntroduction to Human-Computer Interaction and Interaction Design
Introduction to Human-Computer Interaction and Interaction DesignOmar Sosa-Tzec
 
Takeaways from the course Visual Design for User Experience
Takeaways from the course Visual Design for User ExperienceTakeaways from the course Visual Design for User Experience
Takeaways from the course Visual Design for User ExperienceOmar Sosa-Tzec
 
Introduction to Visual Design for User Experience
Introduction to Visual Design for User ExperienceIntroduction to Visual Design for User Experience
Introduction to Visual Design for User ExperienceOmar Sosa-Tzec
 
Sometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figureSometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figureOmar Sosa-Tzec
 
Principios de Diseño Visual para Interacción Humano-Computadora
Principios de Diseño Visual para Interacción Humano-ComputadoraPrincipios de Diseño Visual para Interacción Humano-Computadora
Principios de Diseño Visual para Interacción Humano-ComputadoraOmar Sosa-Tzec
 

Más de Omar Sosa-Tzec (20)

Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...
Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...
Digital Wellbeing Technology through a Social Semiotic Multimodal Lens: A Cas...
 
Delight in the User Experience: Form and Place
Delight in the User Experience: Form and PlaceDelight in the User Experience: Form and Place
Delight in the User Experience: Form and Place
 
Delight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in MicrointeractionsDelight by Motion: Investigating the Role of Animation in Microinteractions
Delight by Motion: Investigating the Role of Animation in Microinteractions
 
Critical Design Research and Constructive Research Outcomes as Arguments
Critical Design Research and Constructive Research Outcomes as ArgumentsCritical Design Research and Constructive Research Outcomes as Arguments
Critical Design Research and Constructive Research Outcomes as Arguments
 
Creative Data and Information Visualization: Reflections on Two Pedagogical A...
Creative Data and Information Visualization: Reflections on Two Pedagogical A...Creative Data and Information Visualization: Reflections on Two Pedagogical A...
Creative Data and Information Visualization: Reflections on Two Pedagogical A...
 
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...Teaching Design, Information, and Interaction: Reflections, Foundations, and ...
Teaching Design, Information, and Interaction: Reflections, Foundations, and ...
 
Visualizing Data Trails: Metaphors and a Symbolic Language for Interfaces
Visualizing Data Trails: Metaphors and a Symbolic Language for InterfacesVisualizing Data Trails: Metaphors and a Symbolic Language for Interfaces
Visualizing Data Trails: Metaphors and a Symbolic Language for Interfaces
 
Communicating design-related intellectual influence: towards visual references
 Communicating design-related intellectual influence: towards visual references Communicating design-related intellectual influence: towards visual references
Communicating design-related intellectual influence: towards visual references
 
Design tensions: Interaction Criticism on Instagram’s Mobile Interface
Design tensions: Interaction Criticism on Instagram’s Mobile InterfaceDesign tensions: Interaction Criticism on Instagram’s Mobile Interface
Design tensions: Interaction Criticism on Instagram’s Mobile Interface
 
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...
Interacciones Encantadoras: Interfaces de Usuario desde una Perspectiva Semió...
 
My fascination with the visual: meaning, persuasion, and delight
My fascination with the visual: meaning, persuasion, and delightMy fascination with the visual: meaning, persuasion, and delight
My fascination with the visual: meaning, persuasion, and delight
 
Visual Design for Interface and Experience Design
Visual Design for Interface and Experience DesignVisual Design for Interface and Experience Design
Visual Design for Interface and Experience Design
 
Affordances, Constraints, and Feedback in User Experience Design
Affordances, Constraints, and Feedback in User Experience DesignAffordances, Constraints, and Feedback in User Experience Design
Affordances, Constraints, and Feedback in User Experience Design
 
User Experience Design, Navigation, and Interaction Flows
User Experience Design, Navigation, and Interaction FlowsUser Experience Design, Navigation, and Interaction Flows
User Experience Design, Navigation, and Interaction Flows
 
Introduction to Human-Computer Interaction and Interaction Design
Introduction to Human-Computer Interaction and Interaction DesignIntroduction to Human-Computer Interaction and Interaction Design
Introduction to Human-Computer Interaction and Interaction Design
 
Takeaways from the course Visual Design for User Experience
Takeaways from the course Visual Design for User ExperienceTakeaways from the course Visual Design for User Experience
Takeaways from the course Visual Design for User Experience
 
Introduction to Visual Design for User Experience
Introduction to Visual Design for User ExperienceIntroduction to Visual Design for User Experience
Introduction to Visual Design for User Experience
 
Sometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figureSometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figure
 
Principios de Diseño Visual para Interacción Humano-Computadora
Principios de Diseño Visual para Interacción Humano-ComputadoraPrincipios de Diseño Visual para Interacción Humano-Computadora
Principios de Diseño Visual para Interacción Humano-Computadora
 
HCI Seminar Fall 2015
HCI Seminar Fall 2015HCI Seminar Fall 2015
HCI Seminar Fall 2015
 

Último

El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...mariaclaramb
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizingagbhuizinga2000
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfitssmalexa
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
presentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentistapresentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentista30898575
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929FiorellaLaura2
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaratc070603hmcmrha7
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabrielaMarcano12
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadDiosymarSuarez
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxVanessaPobletePoblet
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfandrea Varela
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfAsol7
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basicoJOSE645741
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 

Último (20)

El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizinga
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
presentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentistapresentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentista
 
Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929Anatomia.pfd29382819292829191929292929292929
Anatomia.pfd29382819292829191929292929292929
 
Hospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyendaHospital croquis de modulo 3 con leyenda
Hospital croquis de modulo 3 con leyenda
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimiento
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
Afiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la ModernidadAfiche Didáctico-Temático de la Modernidad
Afiche Didáctico-Temático de la Modernidad
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptx
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdf
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 

Método de diseño de información para un documento

  • 1. Diseño de un documento informativo. Método de diseño de diseño de información basado en Personas. Otoño 2009. Mtro. Omar Sosa Tzec http://www.tzek-design.com/blog
  • 3. Niveles de contenido en un documento informativo: * datos crudos. * unidades de información. * información compuesta.
  • 4. Datos crudos. Unidades que conforman la información, como lo pueden ser: * caracteres o letras (a…z, A…Z), * números (0…9), * componentes gráficos (línea, punto, forma) y * otras variables visuales (color, saturación).
  • 5. Unidades de información. Es la entidad mínima derivada de la combinación de datos que tiene significado para el usuario: * palabras, * grafos o gráficas, e * imágenes (con cierto nivel de iconicidad).
  • 6. Información compuesta. Las unidades informativas se complementan unas a otras de forma que el usuario identifica una entidad de información mayor referente a una idea general. Responde a preguntas del tipo: * ¿qué es esto?, * ¿qué quiere decir esta parte?
  • 7. ¿Cuál es el alcance de la información en un documento de esta naturaleza?
  • 8. Pertinencia del contenido: * Para informar. * Para la toma de decisiones (dentro del contexto). * Para la generación de conocimiento.
  • 9. Para informar. En el documento las entidades de información compuesta sólo expresan la idea que conllevan para dar por enterado al usuario del documento.
  • 10. Para la toma de decisiones. El siguiente paso en el flujo de acción al tener a la mano un documento informativo. El usuario utiliza la información, dentro del contexto para el cual el documento fue diseño, para ejecutar una tarea. Por ejemplo: * saber cuánto debe pagar en una tarjeta de crédito, * saber qué medicina fue prescrita, o bien * llenar los campos de un formulario.
  • 11. Generación de conocimiento. El usuario interioriza las consecuencias de las acciones tomadas con la ayuda de la información brindada y puede inferir, inducir o reflexionar sobre situaciones en el futuro. Por ejemplo: * Comprender su relación de gastos en una tarjeta de crédito y razonar cómo crecerán los intereses moratorios. * Determinar cuál es la relación del cobro en el recibo de la luz en relación con otros gastos fijos en el hogar.
  • 13. Personas es un método para modelar a los usuarios de nuestros proyectos de diseño... Su inventor es Alan Cooper. Página web: http://www.cooper.com Libro de Cooper sobre Diseño de Interaccción: About the Face.
  • 14. Sarah Williams: Nueva cliente. “No tengo que estar checando la privacidad de la información. Quiero que el sitio lo deje claro.” Demografía Confort Tecnológico Background personal Grupo de Edad: 21-34. PC: Medio. Sarah es una mujer soltera que trabaja largas horas en una Años en línea: 0-2. Web: bajo. consultoría de procesos. Tiene que viajar mucho y rara vez Ingreso: $10k. tiene tiempo de terminar pendientes. Además, es desconfiada en hacer transacciones en línea debido a los fraudes y robo de identidad potenciales. La conveniencia y ahorro de usar Necesidades un banco en línea suena atractivo, pero quiere asegurarse de que su información está segura y su dinero a salvo. * Asegurarse de su seguridad y privacidad. * Recibir un mensaje claro de lo que espera. * Fácil acceso a alguien “de verdad” (una persona). Motivaciones Escenarios Características Comportamientos Aprender acerca de los diferentes * Comparar las cuentas bancarias * Gráfica de comparación * Sarah da clic en “comparar” que la lleva tipos de cuentas bancarias en línea. a través de diferentes sitios. por producto. a una lista de productos donde puede * Gráfica de comparación de comparar. competidores para diferentes productos. * Buscar información de contacto * Preguntas frecuentes de un representante para preguntas * Chat en línea con un representante. * En la página de un producto, Sarah hace específicas. clic en un link que dice “Preguntar a un representante” . Aplicar para una cuenta bancaria. * Investigación ya terminada y lista * Proceso de aplicación paso a * En la página de un producto, Sarah hace para aplicar. paso. clic en “Aplicar” . * Quiere sentirse confortable con * Demo del proceso de aplicación. * En la página de un producto, Sarah hace el proceso de aplicación en línea clic en “Aprender más sobre el proceso que está haciendo. de aplicación”.
  • 15. Para efectos del ejercicio las personas deben ser simples, requerirán la definición de: * nombre, * rostro, * contexto de vida, * objetivo de uso y * dudas relacionadas con el uso del documento.
  • 16. El factor clave es “ponerse en los zapatos” de la o las personas inventadas. En un sentido práctico, se tomará en cuenta sólo una persona, la llamada “persona primaria” y será un arquetipo lo más general al tipo de usuario del documento.
  • 17. El objetivo de uso corresponde a la tarea más general que la persona debe cumplir y por lo cual se ha diseñado el documento. En primera instancia podría considerarse un nivel informativo, pero el objetivo es diseñar la información para lograr la generación de conocimiento.
  • 18. Relacionadas con este objetivo, al usuario le surgen un número considerable de dudas asociadas. Sin embargo, en el proceso el diseñador debe considerar “ir más allá” y “exprimir el cerebro” del arquetipo de forma que se haga preguntas “fuera de lo normal”.
  • 20. Objetivo de uso Preguntas Preguntas Preguntas Preguntas
  • 21. Para cada pregunta, se realiza una lluvia de ideas. * Hay que tomar en cuenta que esta lluvia de ideas es la ideación de las entidades informativas plausibles para el documento. * Dicha ideación debe impulsar no sólo la proliferación de entidades informativas compuestas cuyo propósito sea informar, sino también de aquellas que induzcan a la generación de conocimiento.
  • 23.
  • 24.
  • 25. Lo siguiente es conformar un flujo informativo para el documento. Primero hay que determinar las tareas que el usuario debe realizar y que están o podrían estar asociadas al problema, dentro del contexto considerado. * Las tareas involucran la agrupación de ideas propuestas.
  • 26.
  • 27. Una vez formados los grupos, uno para cada tarea identificada (con sus respectivas ideas de diseño), el siguiente paso es jerarquizarlas. * Determinar cuál de las tareas está más vinculada con el objetivo general. * Después la segunda tarea más vinculada, tercera y así sucesivamente…
  • 28.
  • 30. El flujo informativo está directamente relacionada con la jerarquía de la tareas. * El layout del documento debe ser congruente con los estándares de lectura en la cultura del usuario y demostrará este flujo informativo.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38. Ya habíamos platicado antes que los factores de ejecución siempre a considerar en la construcción de mensajes visuales: * El espacio mismo. * Ocupación del espacio (composición). * Establecimiento de jerarquías. * Aislamiento de elementos y legibilidad. * Sentido de la lectura del mensaje. * Síntesis e iconicidad. * Uso del color y contraste cromático. * Tensión y ritmo. * Estética (básica a la cultura).
  • 39. * En este ejercicio se asumirá el documento impreso a negro y escala de grises. * El color tipográfico deberá ser cuidadosamente seleccionado pensando en el usuario en relación con la lectura del documento. * Los “chunks” de información deberán ser claramente identificados. * El layout del documento deberá considerar una retícula que brinde estructura y facilite la lectura del documento.
  • 40. Gracias. * El ejemplo de persona fue tomado de “Communicating Design” de Dan Brown con fines educativos/ilustrativos. * Método de diseño de información planteado por Omar Sosa Tzec. Octubre, 2009.