SlideShare ist ein Scribd-Unternehmen logo
1 von 40
Downloaden Sie, um offline zu lesen
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.

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

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

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

Kürzlich hochgeladen

Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxYeissonRINCONRIVERA
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfjuandavidbello432
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDElenitaIriarte1
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfSharonSmis
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdfSSIETETO
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfsolidalilaalvaradoro
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfkevinramirezd069bps
 
Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 20242024 GCA
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECESTADISTICAHDIVINAPR
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdfcpachecot
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfTpicoAcerosArequipa
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................RebecaVera12
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfpaulmaqueda395
 
Caza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegioCaza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegiosilvias47
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.JimenaPozo3
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...collagedesign18
 
Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfSharonSmis
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfFlorMezones
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfYesiRoh
 

Kürzlich hochgeladen (20)

Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptx
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdf
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
 
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
Miriam Tello / Interdisciplinariedad en el diseño / tfm uned 2015
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
 
Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
 
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdftrabajo de Texto Escrito y Cómo Aplicarlas.pdf
trabajo de Texto Escrito y Cómo Aplicarlas.pdf
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
 
Caza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegioCaza y Pesca Indiscriminada tríptico para el colegio
Caza y Pesca Indiscriminada tríptico para el colegio
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
 
Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdf
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.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.