SlideShare una empresa de Scribd logo
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

Cap6
Cap6Cap6
Cap6
CJAO
 
Pressemitteilung victor Konferenz: Die Referenten
Pressemitteilung victor Konferenz: Die ReferentenPressemitteilung victor Konferenz: Die Referenten
Pressemitteilung victor Konferenz: Die Referentenemotion banking
 
AIHK Mitteilungen 04 2012
AIHK Mitteilungen 04 2012AIHK Mitteilungen 04 2012
AIHK Mitteilungen 04 2012aihkch
 
Tema 1. el antiguo régimen
Tema 1.  el antiguo régimenTema 1.  el antiguo régimen
Tema 1. el antiguo régimenjesus ortiz
 
Stress
StressStress
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
Börsenverein des Deutschen Buchhandels
 

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.
 
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
OMExpo Online Marketing Expo
 
Agregador financiero ideal
Agregador financiero idealAgregador financiero ideal
Agregador financiero ideal
Maria Velasco Gómez
 
Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02Taller de Prototipos #DAIEU15 - Clase 02
Taller de Prototipos #DAIEU15 - Clase 02
Rodrigo 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 netiqueta
johant107
 
Caso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero idealCaso FINTECH: el Agregador financiero ideal
Caso FINTECH: el Agregador financiero ideal
Diga33!
 
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
andalucialab
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
Rodrigo Vera
 
Root Secure Information Disclosure
Root Secure Information DisclosureRoot Secure Information Disclosure
Root Secure Information Disclosure
Cristian 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ño
Sebastián Unda Endara
 
TAREA ECOMMERCE
TAREA ECOMMERCETAREA ECOMMERCE
TAREA ECOMMERCE
mexh17
 
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
www.usarte.co
 
las redes fh red de 2008
las redes fh red de 2008las redes fh red de 2008
las redes fh red de 2008
Carlos Vargas H.
 
Identidad digital y empresas 2.0
Identidad digital y empresas 2.0Identidad digital y empresas 2.0
Identidad digital y empresas 2.0
enMarcate
 
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
Eva Herrero
 
Internet
InternetInternet
Internet
reynate
 
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
CRISEL 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 Place
Omar 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 Microinteractions
Omar 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 Arguments
Omar 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 Interfaces
Omar 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 references
Omar 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 Interface
Omar 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 delight
Omar 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 Design
Omar 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 Design
Omar 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 Flows
Omar 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 Design
Omar 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 Experience
Omar 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 Experience
Omar Sosa-Tzec
 
Sometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figureSometimes a sign, sometimes a figure
Sometimes a sign, sometimes a figure
Omar 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-Computadora
Omar Sosa-Tzec
 
HCI Seminar Fall 2015
HCI Seminar Fall 2015HCI Seminar Fall 2015
HCI Seminar Fall 2015
Omar 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

MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICOMAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MarianellaMalaveCazo
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
ProfesorCiencias2
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
imariagsg
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
albujarluisl
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
paulacoux1
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
DianaArtemizaCP
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
paulacoux1
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
JosueJuanez1
 
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
62946377
 
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
Sarai747172
 
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdfProyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
RicardoArayaLobo
 
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docxMapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
Linner ortiz
 
Arquitecto Cerro Larraín - Cerro Barón - Valparaíso
Arquitecto Cerro Larraín - Cerro Barón  - ValparaísoArquitecto Cerro Larraín - Cerro Barón  - Valparaíso
Arquitecto Cerro Larraín - Cerro Barón - Valparaíso
ArquitecturaClculoCe
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
Lectura. Reseña ilustrada, novela Albert Camus
Lectura.  Reseña ilustrada, novela Albert CamusLectura.  Reseña ilustrada, novela Albert Camus
Lectura. Reseña ilustrada, novela Albert Camus
RenataGrecia
 
mapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdfmapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdf
andreakathe12
 
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdfMuseo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
MarianaVillenaAyala
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
EduarRamos7
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
ValentinaBalmaceda2
 

Último (20)

MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICOMAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
 
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
 
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdfProyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
Proyecto_individulal_entre_pares_Ricardo_Aray_Lobo.pdf
 
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docxMapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
Mapa-coHUIOIUHYGFDFGHYUInceptual-de-la-Noticia.docx
 
Arquitecto Cerro Larraín - Cerro Barón - Valparaíso
Arquitecto Cerro Larraín - Cerro Barón  - ValparaísoArquitecto Cerro Larraín - Cerro Barón  - Valparaíso
Arquitecto Cerro Larraín - Cerro Barón - Valparaíso
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
Lectura. Reseña ilustrada, novela Albert Camus
Lectura.  Reseña ilustrada, novela Albert CamusLectura.  Reseña ilustrada, novela Albert Camus
Lectura. Reseña ilustrada, novela Albert Camus
 
mapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdfmapa mental gestion del capital humano.pdf
mapa mental gestion del capital humano.pdf
 
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdfMuseo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
 

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.