SlideShare a Scribd company logo
1 of 149
Download to read offline
Conceptos y
Herramientas de Diseño
en Sistemas Interactivos
Conceptos y
Herramientas de Diseño
en Sistemas Interactivos
Mtro. Omar Sosa Tzec
3er Taller Mexicano de Interacción Humano-Computadora.
Noviembre de 2010. San Luis Potosí, S.L.P., México.
Diseño.
Diseño.
Veamos qué dicen del diseño…
Diseño:
1. Traza o delineación de un edificio o de una figura.
2. Proyecto, plan.
3. Concepción original de un objeto u obra destinados a
la producción en serie.
4. Forma de cada uno de estos objetos.
5. Descripción o bosquejo verbal de algo.
6. Disposición de manchas, colores o dibujos que
caracterizan exteriormente a diversos animales y plantas.
RAE, 2010.
Entender el significado del diseño es no
sólo entender el papel que desempeña la
forma y el contenido, sino descubrir que
el diseño es también un comentario, una
opinión, un punto de vista y un
responsabilidad social. Diseñar es
mucho más que simplemente ensamblar,
ordenar, incluso editar: es añadir valor
y significado, iluminar, simplificar,
aclarar, modificar, teatrilizar, persuadir
y quizá, incluso entender.
Diseño es sustantivo y una forma verbal.
Es el principio, el fin, el proceso y el
producto de la imaginación.
Paul Rand. “Design, Form, and Chaos”, Yale University Press,
New Heaven, 1993.
“Entender el significado del diseño es no sólo entender el papel
que desempeña la forma y el contenido…”
“…el diseño es también un comentario, una opinión, un punto
de vista y un responsabilidad social”.
Imagen tomada de http://alt1040.com/2010/10/banksy-los-simpson-intro
Video en YouTube: http://www.youtube.com/watch?v=DX1iplQQJTo
“… es añadir valor y significado…”
“… iluminar, simplificar, aclarar,…”
El diseño de información es la definición,
planeación y dar forma a los contenidos
de un mensaje y los ambientes en los que
es presentado con la intención de alcanzar
objetivos particulares en relación a las
necesidades de usuarios.
IIID, 2009.
¿Está lleno o vacío?
¿Qué cantidad es
mayor? ¿1000 ml o 32
onzas?
Dado un líquido en el
recipiente, al ser tomado
¿aumenta o disminuye
su volumen?
¿Y si se evapora? ¿Cómo
podrías comprobarlo
visualmente?
Exportación entre Dinamarca e Inglaterra por William Playfair, 1780.
http://en.wikipedia.org/wiki/William_Playfair
“…definición, planeación y dar forma a los contenidos de un
mensaje…”
Henry Beck, 1933.
http://britton.disted.camosun.bc.ca/beck_map.jpg
“… con la intención de alcanzar objetivos particulares en
relación a las necesidades de usuarios…”
Diseño de Interacción es la creación de
un diálogo entre una persona y un
producto, servicio o sistema. Este
diálogo se encuentra usualmente en el
mundo del comportamiento…
Para diseñar comportamiento se requiere
un entendimiento de la fluidez de un
diálogo natural…
… A través de un lenguaje visual y
semántico, un diseñador de crear un
diseño que apoye al observador no sólo
en experimentar una emoción en
particular sino también un verdadero
entendimiento del contenido.
Jon Kolko. “Thoughts on Interaction Design”.
Morgan Kaufmann, 2010.
“ la creación de un diálogo entre una persona y un producto,
servicio o sistema. Este diálogo se encuentra usualmente en el
mundo del comportamiento…”
Designing for Interaction:
Creating Innovative
Applications and Devices,
Second Edition.
Dan Saffer.
New Riders, 2009.
Diseño de
Experiencia de
Usuario.
Arq. de
Información.
Arquitectura.
Contenido.
Diseño
visual.
Diseño
industrial.
Factores
humanos.
Diseño
de sonido.
Interacción
humano-computadora.
Diseño de
Interacción.
Los diseñadores de interacción
trabajan en una variedad de productos:
todo desde sitios web a aplicaciones de
escritorio, de electrónica de consumo
hasta robótica, de dispositivos móbiles y
médicos hasta ambientes interactivos.
Estos productos pueden ser solamente
digitales (software) o mayormente
análogos (robots) o incorpóreos (una
interfaz por gestos), o una combinación
de todo.
Designing for Interaction: Creating Innovative Applications
and Devices, Second Edition.
Dan Saffer. New Riders, 2009.
Affordances, usabilidad
y experiencia de uso.
http://tzek-design.com/blog/
2009/05/08/affordances-
everywhere/
Persona.
Necesidad.
Necesidad.
Contexto.
Ver el diseño como un proceso cognitivo
que conlleva a una solución proyectual
para un problema que satisface las
necesidades de ciertos usuarios en cierto
contexto.
Omar Sosa Tzec, 2009.
Síntesis y Análisis
Problema.
Problema.
Análisis.
Método.
¿Deducción?
Método.
Solución.
Método.
Problema.
Problema.
Problema.
¿Abducción?
Síntesis.
Solución.
Retórica y diseño
Retórica.
1. Arte de bien decir, de dar al lenguaje
escrito o hablado eficacia bastante para
deleitar, persuadir o conmover.
2. Teoría de la composición literaria y de
la expresión hablada.
RAE, 2010.
Es un vocablo el cual describe el uso
efectivo y persuasivo del discurso…
Describe la función social y viva del
lenguaje, no su gramática abstracta.
La retórica no es un conjunto de reglas
estilísticas fijas sino una descripción
abierta de patrones y procesos de
comunicación.
El orador retórico escoge un estilo, un
modo de apelación, el cual será poderoso
o apropiado par una situación dada.
Hanno Ehses. Rhetorical Handbook.
Nova Scotia College of Art and Design. 1996.
Modos de apelación
de la retórica
Hanno Ehses. Rhetorical
Handbook.
Nova Scotia College of Art
and Design. 1996.
Logos:
Apela a la razón, busca instruir.
Emplea signos de autoridad intelectual.
fáctico. plano. lógico.
Hanno Ehses. Rhetorical
Handbook.
Nova Scotia College of Art
and Design. 1996.
Ethos:
Busca deleitar o convencer.
Se enfoca en la decoración y cualidades
estéticas de un diseño, aborda con
frecuencia los valores tradicionales y
tendencias morales de una audiencia.
moralmente
apropiado.
bello. ornato.
buen gusto. agradable.
Hanno Ehses. Rhetorical
Handbook.
Nova Scotia College of Art
and Design. 1996.
Pathos:
Apela a las emociones, busca conmover.
Provoca respuestas no racionales, más o
menos esperadas, en la audiencia.
Involucra sentimientos del estilo del
amor, odio y venganza. Es decir,
sentimientos fuertes, no una sensibilidad
al gusto como en el ethos.
apasionado. impulsivo. discordante.
Modelo retórico para el
diseño de interfaces
Logos.
Ethos. Pathos.
Design process.
Design
phase.
Designing a user interface based in
the Calm Technology Paradigm and
Schematic Visualization, and its
evaluation from a communicability
and rhetoric stand point of view.
Omar Sosa Tzec, 2009.
Logos:
Relacionado con los datos que
conformarán los diferentes nichos
informativos en el contenido del sitio.
Estructura
y jerarquías de la información.
Enfoque funcional. Flujos de trabajo.
Interfaz de usuario basada en estándares.
Designing a user interface
based in the Calm
Technology Paradigm and
Schematic Visualization, and
its evaluation from a
communicability and rhetoric
stand point of view.
Omar Sosa Tzec, 2009.
Arquitectura
de
Información.
Funcional. API.
Designing a user interface
based in the Calm
Technology Paradigm and
Schematic Visualization, and
its evaluation from a
communicability and rhetoric
stand point of view.
Omar Sosa Tzec, 2009.
Ethos:
Pondera la perspectiva basada en diseño,
tanto en lo visual como en todos los
demás sentidos para enriquecer la
experiencia de uso (no desde el punto de
vista emocional).
Está supeditada a las destrezas y
experiencia del diseñador para solucionar
un problema.
Diseño de
Experiencia.
Pensamiento
orientado a
diseño.
Affordances.
Designing a user interface
based in the Calm
Technology Paradigm and
Schematic Visualization, and
its evaluation from a
communicability and rhetoric
stand point of view.
Omar Sosa Tzec, 2009.
Pathos:
Está relacionado con los elementos que
brindan un carácter emocional a la
interfaz.
Se manifiesta cuando el usuario puede
apropiarse del producto a través de la
interfaz, creando un vínculo emocional
más allá de la utilidad de dicho producto.
Lo anterior está fuertemente ligado con la
capacidad de personalización y
manipulación del usuario.
Diseño
emocional.
Personalización
de la interfaz.
Apropiación.
Actividad:
Elaborar un mapa “retórico”
Escenario.
Gerardo García es un chavo de 22 años
que le encanta el rock, salir de mochilero
a conocer lugares con historia y todo lo
que tiene que ver con deportes extremos.
También es consumidor de noticias, casi
siempre digitalmente a través de su iPad.
Le comentaron que en San Luis Potosí
hay lugares donde puede salir “al campo”
a practicar kite land boarding. Está decido
a ir a probar pero necesita tener mayor
información para tomar una decisión.
Necesita saber si existe una app para
móviles, iPhone o iPad que le ayude con
su objetivo.
Por equipos:
* Realiza una lluvia de ideas de todo,
cualquier cosa, sin importar si podría
parecer tonto o irrelevante, que esté
relacionado con el deporte que practica
Gerardo, asuntos relacionados con su
forma de ser (lo que gusta, aspira o
sueña), cuestiones relacionadas con San
Luis Potosí (cultura, geografía, clima, etc.)
y todo lo que se te venga a la mente dado
este escenario.
* Cada idea por separado será escrita en
un post-it.
* Lo importante es hacerlo rápido, no
divagar mucho en lo que se escribe en
cada papelito.
¡Tienen 20 minutos para
realizar la actividad!
* Van a dividir primero sus post-it según
crean que es un feature o asunto de
ethos, pathos o logos.
* Vale complementar con más ideas,
nuevas o equivalentes, conforme se va
haciendo el arreglo.
* Luego van a tratar de acomodar o
yuxtaponer los post-it de ser necesario de
forma que vayan encontrando grupos de
información similar, eliminar
redundancias o incluso asociar ideas que
parecen disjuntas.
* Es válido “nombrar” grupos bien
definidos según convenga.
¡Tienen 20 minutos para
realizar la actividad!
Feedback de
esta parte del
ejercicio
Actividad:
Bocetar
Actividad:
Ideación
Resulta que dado que el perfil de Gerardo
resulta muy capitalizable según los
estudios de mercado, tu empresa de TIC a
decidido no sólo lanzar una aplicación de
software que satisfaga a gente como
Gerardo, sino que van a lanzar un
producto nuevo desde cero.
¡Un nuevo gadget!
Con tu equipo:
* El punto de partida será el mapa generado
previamente.
* Tienen que hacer una lluvia de bocetos e
idear, idear, idear e idear posibles
productos que cubrirán las necesidades de
usuarios como Gerardo.
* Deberán hacer una especie comic donde
se explique el funcionamiento del producto.
¡Tienen 30 minutos para
realizar la actividad!
Exposición
Introducción al concepto de
Arquitectura de Información
Sistemas de
Navegación
Sistemas de
Navegación
Sistemas de
Etiquetado
Sistemas de
Navegación
Sistemas de
Etiquetado
Sistemas de
Organización
Sistemas de
Navegación
Sistemas de
Etiquetado
Sistemas de
Organización
Sistemas de
Búsqueda
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
Conceptos básicos de
diseño visual
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).
El espacio mismo
Ocupación del espacio (composición).
Ocupación del espacio (composición).
Ocupación del espacio (composición).
Ocupación del espacio (composición).
Ocupación del espacio (composición).
Ocupación del espacio (composición).
Establecimiento de jerarquías.
Establecimiento de jerarquías.
Aislamiento de elementos legibilidad.
Aislamiento de elementos.
Sentido de lectura del mensaje.
Síntesis e iconicidad.
Síntesis e iconicidad.
Uso del color y contraste cromático.
Uso del color y contraste cromático.
Uso del color y contraste cromático.
Ritmo y tensión.
Ritmo y tensión.
Ritmo y tensión.
Ritmo y tensión.
Ritmo y tensión.
Estética (básica a la cultura).
Estética (básica a la cultura).
Variables visuales de Jaques Bertin.
http://www.infovis-wiki.net/index.php?title=Visual_Variables
Arial
Trebuchet
Georgia
Arial
Helvetica
Helvetica
Helvetica
futura
baskerville
isótopo
isótopo
fíjate
fíjate
Contraste
Contraste
Contraste
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum. Phasellus dolor
magna, iaculis eu tincidunt id, ornare at massa.
Etiam interdum nisl ac nunc suscipit rutrum.
Quisque vestibulum fermentum neque sit amet
tempor. Aenean id sapien arcu. Curabitur non
erat vitae nisl consequat fermentum. Aliquam
vel velit aliquam ligula molestie dignissim at at
risus.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum. Phasellus dolor
magna, iaculis eu tincidunt id, ornare at massa.
Etiam interdum nisl ac nunc suscipit rutrum.
Quisque vestibulum fermentum neque sit amet
tempor. Aenean id sapien arcu. Curabitur non
erat vitae nisl consequat fermentum. Aliquam
vel velit aliquam ligula molestie dignissim at at
risus.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum. Vestibulum aliquet
diam id lacus fringilla rutrum. Suspendisse
nibh nisi, dapibus non tincidunt posuere, porta
nec massa. Nunc vel faucibus nisl. Curabitur in
ipsum et tellus dapibus ultricies. Nam felis elit,
lobortis et venenatis et, varius ut velit.
Pellentesque in tellus sed nulla laoreet sagittis
sit amet at mauris. Aenean suscipit ullamcorper
leo, eu adipiscing nibh fermentum ac. Ut
sollicitudin euismod sapien non rhoncus.
Maecenas magna tortor, rhoncus a mollis sit
amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla id nisi et felis vestibulum
consequat at id lectus. Maecenas vitae magna in
libero euismod semper. Integer a dui vitae
lorem ornare bibendum. Integer at quam nisl,
convallis tempor ipsum.
Vestibulum aliquet diam id lacus fringilla
rutrum. Suspendisse nibh nisi, dapibus non
tincidunt posuere, porta nec massa. Nunc vel
faucibus nisl. Curabitur in ipsum et tellus
dapibus ultricies. Nam felis elit, lobortis et
venenatis et, varius ut velit. Pellentesque in
tellus sed nulla laoreet sagittis sit amet at
mauris.
Aenean suscipit ullamcorper leo, eu adipiscing
nibh fermentum ac. Ut sollicitudin euismod
sapien non rhoncus. Maecenas magna tortor,
rhoncus a mollis sit amet, sollicitudin id ipsum.
Chunking
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
* Saber organizar visualmente
* Saber jearquizar visualmente
* Saber crear identificadores visuales
Última dinámica:
Elaboración de un wireframe
Aplicando lo discutido sobre la
arquitectura de información y el
diseño visual, boceta dos pantallas
significativas de la aplicación ya
sea para web, iPhone o iPad que
necesita Gerardo García o incluso,
de la misma GUI del nuevo gadget.
¡15 minutos máximo para
dibujar las pantallas!
Exposición y
cierre de este
tutorial…
¿Qué te llevas?
¡Gracias!¡Gracias!
http://tzek-design.com
http://tzek-design.com/blog
http://twitter.com/tzek
http://facebook.com/omitzek
http://slideshare.net/tzek
Porfafolio de Diseño:
Blog de Diseño:
Redes Sociales:

More Related Content

Viewers also liked

Tutorenfortbildung EPG
Tutorenfortbildung EPGTutorenfortbildung EPG
Tutorenfortbildung EPGEva Birger
 
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwald
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwaldVortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwald
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwaldWerner Drizhal
 
La restauración
La restauraciónLa restauración
La restauraciónjesus ortiz
 
Emc Multilanguage Commented
Emc Multilanguage CommentedEmc Multilanguage Commented
Emc Multilanguage CommentedMichael Hafner
 
PräSentation Edeka(1)
PräSentation Edeka(1)PräSentation Edeka(1)
PräSentation Edeka(1)BerndKoester
 
USO DE LA TECNOLOGÍA
USO DE LA TECNOLOGÍAUSO DE LA TECNOLOGÍA
USO DE LA TECNOLOGÍAguestc380a8
 
2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best PracticesJohannes Waibel
 
Frauen haben es schwer
Frauen haben es schwerFrauen haben es schwer
Frauen haben es schwersandwater
 
Einführungspräsentation Prof. Kutsch
Einführungspräsentation Prof. KutschEinführungspräsentation Prof. Kutsch
Einführungspräsentation Prof. KutschFarakMW
 
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...Atlas VPM
 
Erfolgreiche Online Public Relations im Nachhaltigen Tourismus
Erfolgreiche Online Public Relations im Nachhaltigen TourismusErfolgreiche Online Public Relations im Nachhaltigen Tourismus
Erfolgreiche Online Public Relations im Nachhaltigen TourismusNomad Earth
 

Viewers also liked (13)

Micro relato
Micro relatoMicro relato
Micro relato
 
Tutorenfortbildung EPG
Tutorenfortbildung EPGTutorenfortbildung EPG
Tutorenfortbildung EPG
 
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwald
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwaldVortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwald
Vortrag unfallheilbehandlung & rehabilitation in der auva 2013 seiwald
 
La restauración
La restauraciónLa restauración
La restauración
 
Emc Multilanguage Commented
Emc Multilanguage CommentedEmc Multilanguage Commented
Emc Multilanguage Commented
 
PräSentation Edeka(1)
PräSentation Edeka(1)PräSentation Edeka(1)
PräSentation Edeka(1)
 
USO DE LA TECNOLOGÍA
USO DE LA TECNOLOGÍAUSO DE LA TECNOLOGÍA
USO DE LA TECNOLOGÍA
 
2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices2013 - (All) about Mobile - Status Quo & Best Practices
2013 - (All) about Mobile - Status Quo & Best Practices
 
Frauen haben es schwer
Frauen haben es schwerFrauen haben es schwer
Frauen haben es schwer
 
Einführungspräsentation Prof. Kutsch
Einführungspräsentation Prof. KutschEinführungspräsentation Prof. Kutsch
Einführungspräsentation Prof. Kutsch
 
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...
EVOLUCIÓN DE LA ATENCIÓN A LA ENFERMEDAD CRÓNICA EN ESPAÑA EN EL PERÍODO 2002...
 
Sinopsis
SinopsisSinopsis
Sinopsis
 
Erfolgreiche Online Public Relations im Nachhaltigen Tourismus
Erfolgreiche Online Public Relations im Nachhaltigen TourismusErfolgreiche Online Public Relations im Nachhaltigen Tourismus
Erfolgreiche Online Public Relations im Nachhaltigen Tourismus
 

Similar to Diseño Interacciones Sistemas

Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileDesarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileWorköholics
 
Componentes filosóficos del Diseño Industrial
Componentes filosóficos del Diseño IndustrialComponentes filosóficos del Diseño Industrial
Componentes filosóficos del Diseño IndustrialFelipe Bernal Cortes
 
Unidad 4
Unidad 4Unidad 4
Unidad 4Carlos
 
Unidad 4 Diseño de interfaces hombre máquina Brenda Estupiñán
Unidad 4 Diseño de interfaces hombre máquina Brenda EstupiñánUnidad 4 Diseño de interfaces hombre máquina Brenda Estupiñán
Unidad 4 Diseño de interfaces hombre máquina Brenda EstupiñánStarlas Ps
 
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docx
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docxMATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docx
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docxJoaqunChvezSurez
 
Retórica en la construcción de interfaces web - gil sanjuan
Retórica en la construcción de interfaces web - gil sanjuanRetórica en la construcción de interfaces web - gil sanjuan
Retórica en la construcción de interfaces web - gil sanjuangil
 
Sc ii ia
Sc ii iaSc ii ia
Sc ii iaAsuntos
 
200328 clase 11 elaboracion de mensajes
200328 clase 11 elaboracion de mensajes200328 clase 11 elaboracion de mensajes
200328 clase 11 elaboracion de mensajesRicardo Díaz Araux
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativasYasbeth Chávez
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativasYasbeth Chávez
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativasYasbeth Chávez
 

Similar to Diseño Interacciones Sistemas (20)

Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileDesarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
 
Componentes filosóficos del Diseño Industrial
Componentes filosóficos del Diseño IndustrialComponentes filosóficos del Diseño Industrial
Componentes filosóficos del Diseño Industrial
 
Retorica y diseño
Retorica y diseñoRetorica y diseño
Retorica y diseño
 
Retórica
RetóricaRetórica
Retórica
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Unidad 4 Diseño de interfaces hombre máquina Brenda Estupiñán
Unidad 4 Diseño de interfaces hombre máquina Brenda EstupiñánUnidad 4 Diseño de interfaces hombre máquina Brenda Estupiñán
Unidad 4 Diseño de interfaces hombre máquina Brenda Estupiñán
 
Slideshare
SlideshareSlideshare
Slideshare
 
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docx
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docxMATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docx
MATERIAL INFORMATIVO GUÍA PRÁCTICA 04 - 2021 I.docx
 
Retórica en la construcción de interfaces web - gil sanjuan
Retórica en la construcción de interfaces web - gil sanjuanRetórica en la construcción de interfaces web - gil sanjuan
Retórica en la construcción de interfaces web - gil sanjuan
 
Sc ii ia
Sc ii iaSc ii ia
Sc ii ia
 
Manual de word by paola
Manual de word by paolaManual de word by paola
Manual de word by paola
 
Unidad4
Unidad4Unidad4
Unidad4
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
200328 clase 11 elaboracion de mensajes
200328 clase 11 elaboracion de mensajes200328 clase 11 elaboracion de mensajes
200328 clase 11 elaboracion de mensajes
 
elaboracion de mensajes
elaboracion de mensajeselaboracion de mensajes
elaboracion de mensajes
 
Antologia Semiotica
Antologia SemioticaAntologia Semiotica
Antologia Semiotica
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativas
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativas
 
Técnicas argumentativas
Técnicas argumentativasTécnicas argumentativas
Técnicas argumentativas
 

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

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

Recently uploaded

INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfautomatechcv
 
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdfyolandavalencia19
 
Arquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñoArquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñosindyaldana1
 
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
 
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
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDElenitaIriarte1
 
Diapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarloDiapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarlojefeer060122
 
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
 
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
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...UNACH - Facultad de Arquitectura.
 
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptx
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptxDISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptx
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptxPercyTineoPongo1
 
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
 
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
 
exposuturas.pptxffffffffffffffffffffffffffffff
exposuturas.pptxffffffffffffffffffffffffffffffexposuturas.pptxffffffffffffffffffffffffffffff
exposuturas.pptxffffffffffffffffffffffffffffffCesarQuiroz35
 
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 añosMilagrosMnstx
 
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 árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxPlantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxYasmilia
 
elracismoati-131016234518-phpapp01.jjjpptx
elracismoati-131016234518-phpapp01.jjjpptxelracismoati-131016234518-phpapp01.jjjpptx
elracismoati-131016234518-phpapp01.jjjpptxFAngelChaupisGarcia
 
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
 
Tarjetas de cumpleaños para imprimir.pdf
Tarjetas de cumpleaños para imprimir.pdfTarjetas de cumpleaños para imprimir.pdf
Tarjetas de cumpleaños para imprimir.pdfLigiaItzelPerez
 

Recently uploaded (20)

INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdfINSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
INSTRUCTIVO PARA RIESGOS DE TRABAJO SART2 iess.pdf
 
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
669852196-Manejo-de-Las-Principales-Cuentas-Contables-pptx.pdf
 
Arquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseñoArquetipos de Jung ejemplos en el diseño
Arquetipos de Jung ejemplos en el diseño
 
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
 
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
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
 
Diapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarloDiapositiva de la ansiedad...para poder enfrentarlo
Diapositiva de la ansiedad...para poder enfrentarlo
 
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
 
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
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
 
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptx
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptxDISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptx
DISIPADORES-DE-ENERGIA-DIAPOSITIVAS.pptx
 
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
 
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
 
exposuturas.pptxffffffffffffffffffffffffffffff
exposuturas.pptxffffffffffffffffffffffffffffffexposuturas.pptxffffffffffffffffffffffffffffff
exposuturas.pptxffffffffffffffffffffffffffffff
 
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
2DA SEMANA ABRIL proyecto nivel inicial 3 y 4 años
 
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 árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxPlantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptx
 
elracismoati-131016234518-phpapp01.jjjpptx
elracismoati-131016234518-phpapp01.jjjpptxelracismoati-131016234518-phpapp01.jjjpptx
elracismoati-131016234518-phpapp01.jjjpptx
 
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
 
Tarjetas de cumpleaños para imprimir.pdf
Tarjetas de cumpleaños para imprimir.pdfTarjetas de cumpleaños para imprimir.pdf
Tarjetas de cumpleaños para imprimir.pdf
 

Diseño Interacciones Sistemas

  • 1. Conceptos y Herramientas de Diseño en Sistemas Interactivos Conceptos y Herramientas de Diseño en Sistemas Interactivos Mtro. Omar Sosa Tzec 3er Taller Mexicano de Interacción Humano-Computadora. Noviembre de 2010. San Luis Potosí, S.L.P., México.
  • 3. Diseño. Veamos qué dicen del diseño…
  • 4. Diseño: 1. Traza o delineación de un edificio o de una figura. 2. Proyecto, plan. 3. Concepción original de un objeto u obra destinados a la producción en serie. 4. Forma de cada uno de estos objetos. 5. Descripción o bosquejo verbal de algo. 6. Disposición de manchas, colores o dibujos que caracterizan exteriormente a diversos animales y plantas. RAE, 2010.
  • 5. Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido, sino descubrir que el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social. Diseñar es mucho más que simplemente ensamblar, ordenar, incluso editar: es añadir valor y significado, iluminar, simplificar, aclarar, modificar, teatrilizar, persuadir y quizá, incluso entender. Diseño es sustantivo y una forma verbal. Es el principio, el fin, el proceso y el producto de la imaginación. Paul Rand. “Design, Form, and Chaos”, Yale University Press, New Heaven, 1993.
  • 6. “Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido…”
  • 7. “…el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social”. Imagen tomada de http://alt1040.com/2010/10/banksy-los-simpson-intro Video en YouTube: http://www.youtube.com/watch?v=DX1iplQQJTo
  • 8. “… es añadir valor y significado…”
  • 10. El diseño de información es la definición, planeación y dar forma a los contenidos de un mensaje y los ambientes en los que es presentado con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios. IIID, 2009.
  • 11.
  • 12.
  • 13. ¿Está lleno o vacío? ¿Qué cantidad es mayor? ¿1000 ml o 32 onzas? Dado un líquido en el recipiente, al ser tomado ¿aumenta o disminuye su volumen? ¿Y si se evapora? ¿Cómo podrías comprobarlo visualmente?
  • 14. Exportación entre Dinamarca e Inglaterra por William Playfair, 1780. http://en.wikipedia.org/wiki/William_Playfair “…definición, planeación y dar forma a los contenidos de un mensaje…”
  • 15. Henry Beck, 1933. http://britton.disted.camosun.bc.ca/beck_map.jpg “… con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios…”
  • 16. Diseño de Interacción es la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento… Para diseñar comportamiento se requiere un entendimiento de la fluidez de un diálogo natural… … A través de un lenguaje visual y semántico, un diseñador de crear un diseño que apoye al observador no sólo en experimentar una emoción en particular sino también un verdadero entendimiento del contenido. Jon Kolko. “Thoughts on Interaction Design”. Morgan Kaufmann, 2010.
  • 17. “ la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento…”
  • 18. Designing for Interaction: Creating Innovative Applications and Devices, Second Edition. Dan Saffer. New Riders, 2009. Diseño de Experiencia de Usuario. Arq. de Información. Arquitectura. Contenido. Diseño visual. Diseño industrial. Factores humanos. Diseño de sonido. Interacción humano-computadora. Diseño de Interacción.
  • 19. Los diseñadores de interacción trabajan en una variedad de productos: todo desde sitios web a aplicaciones de escritorio, de electrónica de consumo hasta robótica, de dispositivos móbiles y médicos hasta ambientes interactivos. Estos productos pueden ser solamente digitales (software) o mayormente análogos (robots) o incorpóreos (una interfaz por gestos), o una combinación de todo. Designing for Interaction: Creating Innovative Applications and Devices, Second Edition. Dan Saffer. New Riders, 2009.
  • 20. Affordances, usabilidad y experiencia de uso. http://tzek-design.com/blog/ 2009/05/08/affordances- everywhere/
  • 21.
  • 25. Ver el diseño como un proceso cognitivo que conlleva a una solución proyectual para un problema que satisface las necesidades de ciertos usuarios en cierto contexto. Omar Sosa Tzec, 2009.
  • 36.
  • 37.
  • 39.
  • 41.
  • 42.
  • 45. Retórica. 1. Arte de bien decir, de dar al lenguaje escrito o hablado eficacia bastante para deleitar, persuadir o conmover. 2. Teoría de la composición literaria y de la expresión hablada. RAE, 2010.
  • 46. Es un vocablo el cual describe el uso efectivo y persuasivo del discurso… Describe la función social y viva del lenguaje, no su gramática abstracta. La retórica no es un conjunto de reglas estilísticas fijas sino una descripción abierta de patrones y procesos de comunicación. El orador retórico escoge un estilo, un modo de apelación, el cual será poderoso o apropiado par una situación dada. Hanno Ehses. Rhetorical Handbook. Nova Scotia College of Art and Design. 1996.
  • 47. Modos de apelación de la retórica
  • 48. Hanno Ehses. Rhetorical Handbook. Nova Scotia College of Art and Design. 1996. Logos: Apela a la razón, busca instruir. Emplea signos de autoridad intelectual. fáctico. plano. lógico.
  • 49. Hanno Ehses. Rhetorical Handbook. Nova Scotia College of Art and Design. 1996. Ethos: Busca deleitar o convencer. Se enfoca en la decoración y cualidades estéticas de un diseño, aborda con frecuencia los valores tradicionales y tendencias morales de una audiencia. moralmente apropiado. bello. ornato. buen gusto. agradable.
  • 50. Hanno Ehses. Rhetorical Handbook. Nova Scotia College of Art and Design. 1996. Pathos: Apela a las emociones, busca conmover. Provoca respuestas no racionales, más o menos esperadas, en la audiencia. Involucra sentimientos del estilo del amor, odio y venganza. Es decir, sentimientos fuertes, no una sensibilidad al gusto como en el ethos. apasionado. impulsivo. discordante.
  • 51. Modelo retórico para el diseño de interfaces
  • 52. Logos. Ethos. Pathos. Design process. Design phase. Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view. Omar Sosa Tzec, 2009.
  • 53. Logos: Relacionado con los datos que conformarán los diferentes nichos informativos en el contenido del sitio. Estructura y jerarquías de la información. Enfoque funcional. Flujos de trabajo. Interfaz de usuario basada en estándares. Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view. Omar Sosa Tzec, 2009. Arquitectura de Información. Funcional. API.
  • 54. Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view. Omar Sosa Tzec, 2009. Ethos: Pondera la perspectiva basada en diseño, tanto en lo visual como en todos los demás sentidos para enriquecer la experiencia de uso (no desde el punto de vista emocional). Está supeditada a las destrezas y experiencia del diseñador para solucionar un problema. Diseño de Experiencia. Pensamiento orientado a diseño. Affordances.
  • 55. Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view. Omar Sosa Tzec, 2009. Pathos: Está relacionado con los elementos que brindan un carácter emocional a la interfaz. Se manifiesta cuando el usuario puede apropiarse del producto a través de la interfaz, creando un vínculo emocional más allá de la utilidad de dicho producto. Lo anterior está fuertemente ligado con la capacidad de personalización y manipulación del usuario. Diseño emocional. Personalización de la interfaz. Apropiación.
  • 56. Actividad: Elaborar un mapa “retórico”
  • 57. Escenario. Gerardo García es un chavo de 22 años que le encanta el rock, salir de mochilero a conocer lugares con historia y todo lo que tiene que ver con deportes extremos. También es consumidor de noticias, casi siempre digitalmente a través de su iPad. Le comentaron que en San Luis Potosí hay lugares donde puede salir “al campo” a practicar kite land boarding. Está decido a ir a probar pero necesita tener mayor información para tomar una decisión. Necesita saber si existe una app para móviles, iPhone o iPad que le ayude con su objetivo.
  • 58. Por equipos: * Realiza una lluvia de ideas de todo, cualquier cosa, sin importar si podría parecer tonto o irrelevante, que esté relacionado con el deporte que practica Gerardo, asuntos relacionados con su forma de ser (lo que gusta, aspira o sueña), cuestiones relacionadas con San Luis Potosí (cultura, geografía, clima, etc.) y todo lo que se te venga a la mente dado este escenario. * Cada idea por separado será escrita en un post-it. * Lo importante es hacerlo rápido, no divagar mucho en lo que se escribe en cada papelito. ¡Tienen 20 minutos para realizar la actividad!
  • 59. * Van a dividir primero sus post-it según crean que es un feature o asunto de ethos, pathos o logos. * Vale complementar con más ideas, nuevas o equivalentes, conforme se va haciendo el arreglo. * Luego van a tratar de acomodar o yuxtaponer los post-it de ser necesario de forma que vayan encontrando grupos de información similar, eliminar redundancias o incluso asociar ideas que parecen disjuntas. * Es válido “nombrar” grupos bien definidos según convenga. ¡Tienen 20 minutos para realizar la actividad!
  • 60. Feedback de esta parte del ejercicio
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 80. Resulta que dado que el perfil de Gerardo resulta muy capitalizable según los estudios de mercado, tu empresa de TIC a decidido no sólo lanzar una aplicación de software que satisfaga a gente como Gerardo, sino que van a lanzar un producto nuevo desde cero. ¡Un nuevo gadget!
  • 81. Con tu equipo: * El punto de partida será el mapa generado previamente. * Tienen que hacer una lluvia de bocetos e idear, idear, idear e idear posibles productos que cubrirán las necesidades de usuarios como Gerardo. * Deberán hacer una especie comic donde se explique el funcionamiento del producto. ¡Tienen 30 minutos para realizar la actividad!
  • 83. Introducción al concepto de Arquitectura de Información
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 93. Sistemas de Navegación Sistemas de Etiquetado Sistemas de Organización Sistemas de Búsqueda
  • 94. * Saber organizar * Saber jerarquizar * Saber etiquetar o nombrar
  • 96. 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).
  • 98. Ocupación del espacio (composición).
  • 99. Ocupación del espacio (composición).
  • 100. Ocupación del espacio (composición).
  • 101. Ocupación del espacio (composición).
  • 102. Ocupación del espacio (composición).
  • 103. Ocupación del espacio (composición).
  • 106. Aislamiento de elementos legibilidad.
  • 108. Sentido de lectura del mensaje.
  • 111. Uso del color y contraste cromático.
  • 112. Uso del color y contraste cromático.
  • 113. Uso del color y contraste cromático.
  • 119. Estética (básica a la cultura).
  • 120. Estética (básica a la cultura).
  • 121. Variables visuales de Jaques Bertin. http://www.infovis-wiki.net/index.php?title=Visual_Variables
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130. Arial
  • 139. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus.
  • 140. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Jerarquía Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Jerarquía
  • 141. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Jerarquía Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Jerarquía
  • 142. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Chunking
  • 143.
  • 144. * Saber organizar * Saber jerarquizar * Saber etiquetar o nombrar
  • 145. * Saber organizar * Saber jerarquizar * Saber etiquetar o nombrar * Saber organizar visualmente * Saber jearquizar visualmente * Saber crear identificadores visuales
  • 147. Aplicando lo discutido sobre la arquitectura de información y el diseño visual, boceta dos pantallas significativas de la aplicación ya sea para web, iPhone o iPad que necesita Gerardo García o incluso, de la misma GUI del nuevo gadget. ¡15 minutos máximo para dibujar las pantallas!
  • 148. Exposición y cierre de este tutorial… ¿Qué te llevas?