INTERACCIONES
ENCANTADORAS
INTERFACES DE USUARIO DESDE
UNA PERSPECTIVA SEMIÓTICA-RETÓRICA
Omar Sosa-Tzec
Contraste Colectivo
3er Congreso Internacional de Diseño Gráfico
Abril 5, 2019
Tampico, Tamaulipas, México

¡Hola!

formas,colores,ysabores.
SoyOmary…

Mi práctica de diseño

¿A qué me dedico ahora?
Professor de Arte y Diseño
Escuela Penny W. Stamps de Arte y Diseño,
Universidad de Michigan

¿En qué se enfoca mi investigación?
Interacción
Humano-
Computadora
Retórica y
Semiótica
Diseño de
Información
Visual

Sistemas
Interactivos como
Argumentos
Multimodales
+
Interfaces
Encantadoras
(Deleite en IHC)

Motivación

¿Qué opinas sobre estos anuncios?
Source: https://i0.wp.com/craphound.com/images/marlboro20mummy.jpg

¿Qué te dice este post?

Usabilidad y Experiencia de Usuario
Deslizar a la
derecha para
Me gusta
Deslizar a la
izquierda para No
me interesa

Denotación vs. Connotación
Bueno,
deseable,
correcto
Malo,
indeseable,
incorrecto

Source: https://commons.wikimedia.org

Mensaje
compuesto de
signos
Significado
Efecto en la conducta,
comportamiento,o creencias
RetóricaExperiencia de Usuario
Semiótica
Usuario
Contexto de uso

Componentes de Interfaz vistos como
signos dinámicos y estáticos

Interfaz
compuesta de
signos
Significado
Efecto en la conducta,
comportamiento,o creencias
RetóricaExperiencia de Usuario
Semiótica
Usuario
Contexto de uso

Los diseñadores debemos de estar
atentos de los significados y retórica
(discursos) que introducimos en la
vida diaria de las personas.

Pongamos atención a la semiótica y
retórica de las interfaces de usuario
y sistemas interactivos.
Los diseñadores debemos de estar
atentos de los significados y retórica
(discursos) que introducimos en la
vida diaria de las personas.

Semiótica e
Interacción
Humano-
Computadora

UsuarioDiseñador
IHC vista como meta-comunicación
Sistema
(Interfaz de
Usuario)
De Souza (2005)
Signos estáticos y
dinámicos
Semiosis
Mensaje

Retórica e
Interacción
Humano-
Computadora

Source: https://s3-us-west-2.amazonaws.com/courses-images-archive-read-only/wp-content/uploads/sites/224/2015/03/20114031/Maccari-Cicero.jpg
Orador
Situación
Audiencia

Source: https://s3-us-west-2.amazonaws.com/courses-images-archive-read-only/wp-content/uploads/sites/224/2015/03/20114031/Maccari-Cicero.jpg
¡Compañeros!
Este diseño es mi propuesta para abordar la
situación que nos está afectando
Diseñador
Usuarios

UsuarioDiseñador
IHC vista como meta-comunicación
Sistema
(Interfaz de
Usuario)
De Souza (2005)
Signos estáticos y
dinámicos
Semiosis
Mensaje

UsuarioDiseñador
Sistema
(Interfaz de
Usuario)
Buchanan (2001)
Signos estáticos y
dinámicos
Influencia
discursiva
Argumento
IHC vista como argumentación

Funciones retóricas de un sistema
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad
Sosa-Tzec (2017)

Source: https://www.makeuseof.com/tag/apple-watch-fitness-workout-apps/
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad
Activity App por Apple

Source: https://www.makeuseof.com/tag/apple-watch-fitness-workout-apps/
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad
Activity App por Apple

Source: https://www.makeuseof.com/tag/apple-watch-fitness-workout-apps/
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad
Activity App por Apple

• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad

• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y auto-conocimiento
• Darle forma a la realidad

Interfaces y los
Tres Modos de
Apelación en
Retórica

Sistema
(Interfaz de Usuario)
Sosa-Tzec (2015,2017)
Dimensiones retóricas de
la interfaz de usuario
Logos
Ethos
Pathos

Sistema
(Interfaz de Usuario)
Ehses (2008),Sosa-Tzec (2015)
Dimensiones retóricas de
la interfaz de usuario
Logos
Ethos
Pathos
• Logos apela a la razón o
lógica.
• Persuade al usuario a través
del poder del razonamiento.
• Se manifiesta en la interfaz a
través de datos,hechos,
información directamente
relacionada con la
funcionalidad del sistema.

Sistema
(Interfaz de Usuario)
Ehses (2008),Sosa-Tzec (2015)
Dimensiones retóricas de
la interfaz de usuario
Logos
Ethos
Pathos
• Ethos es apelar a través del
carácter del diseñador
implícito en el diseño.
• Persuade a través de dar
credibilidad,empatía,y
confiabilidad al usuario.
• Se manifiesta en la interfaz a
través de una correcta
implementación de diseño
(componentes de interfaz e
interacciones asociadas) y
como éste conecta con los
valores estéticos y morales
del usuario.

Sistema
(Interfaz de Usuario)
Ehses (2008),Sosa-Tzec (2015)
Dimensiones retóricas de
la interfaz de usuario
Logos
Ethos
Pathos
• Pathos apela a las emociones.
• Persuade a través de
la provocación de
sentimientos en el usuario.
• Las características y
necesidades del usuario
influyen en la selección de
signos de interfaz capaces de
provocar emociones.
• Pathos se relaciona muchas
veces con el movimiento
(animaciones)

Logos Ethos Pathos+ +
Yahoo! Weather App

Ethical
Appeal
Interface
tn
Interface
tn+1
Rational
Appeal
Ethical
Appeal
Rational
Appeal
Fluctuación en la Experiencia de Usuario

Entimema:
el usuario como
elemento activo de
una experiencia
persuasiva

Entimema: el argumento retórico
Covino & Jolliffe (1995,p.48)
Todos los humanos son mortales [premisa mayor]
Sócrates es humano [premisa menor]
Sócrates es mortal [conclusión]
“Sócrateseshumano,porlotantomortal.”

Source: https://www.makeuseof.com/tag/apple-watch-fitness-workout-apps/

Logos Ethos Pathos+ +
Gaza Everywhere por Ahmad Nassri (2014)

Logos Ethos Pathos+ +
Yahoo! Weather App

Sosa-Tzec (2015)
Experiencia persuasiva
centrada en el usuario
user
user
designer
i
j
k
user
user
UserExperience
Context of Use
appl.so tware
(visualenthymeme)
Discourse

Retórica,
Deleite, e
Interfaces

Sistemas Interactivos
como
Argumentos
Multimodales
+
Interfaces Encantadoras
(Deleite en IHC)

Sistemas Interactivos
como
Argumentos
Multimodales
+
Interfaces Encantadoras
(Deleite en IHC)
Logos
Ethos
Pathos
+
+
Entimema
(posiblemente)
Experiencia Persuasiva Centrada en el Usuario

Sistemas Interactivos
como
Argumentos
Multimodales
+
Interfaces Encantadoras
(Deleite en IHC)
Logos
Ethos
Pathos
+
+
Entimema
(posiblemente)
Experiencia Persuasiva Centrada en el Usuario

• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y
auto-conocimiento
• Darle forma a la realidad
Messages App por Apple
Logos Ethos Pathos+ +

Facebook para iOS
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y
auto-conocimiento
• Darle forma a la realidad
Logos Ethos Pathos+ +

Facebook para iOS
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y
auto-conocimiento
• Darle forma a la realidad
Logos Ethos Pathos+ +

Facebook para iOS
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y
auto-conocimiento
• Darle forma a la realidad
Logos Ethos Pathos+ +

Facebook para iOS
• Persuadir
• Identificar
• Invitar al entendimiento
• Ayudar al auto-descubrimiento y
auto-conocimiento
• Darle forma a la realidad
Logos Ethos Pathos+ +

Interacciones
Encantadoras
(Deleitosas)

Experiencia encantadora:
Galleta de la fortuna
Sosa-Tzec (2017)

Sosa-Tzec (2017)
Elementos de diseño
de una interfaz de usuario
Visual Verbal
Táctil
Olfativo
Auditivo
Temporal
Sistema
(Interfaz de Usuario)
Acto de diseñar un
componente de la
interfaz de usuario
Elementos básicos
Logos
Ethos
Pathos
+
+

De Souza et al.(2010),Saffer (2014),Sosa-Tzec (2017)
Unidad de análisis
•Componente de interfaz sencillo (signo de interfaz)
•Micro-interacción
•Flujo de interacción

Unidad de análisis
•Componente de interfaz sencillo (signo de interfaz)
•Micro-interacción
•Flujo de interacción
Visual Verbal
Táctil
Olfativo
Auditivo
Temporal

De Souza et al.(2010),Saffer (2014),Sosa-Tzec (2017)
Unidad de análisis
•Componente de interfaz sencillo (signo de interfaz)
•Micro-interacción
•Flujo de interacción
Visual Verbal
Táctil
Olfativo
Auditivo
Temporal

Sosa-Tzec (2017)
Elementos de
una interacción encantadora
•Punto inicial claro (estado inicial)
•Punto final claro (cierre)
•Ruptura en patrón (desviación moderada pero significativa)
•Atracción
•Vitalidad
•Conveniencia
•Serendipia

• Punto inicial claro (estado inicial)
• Punto final claro (cierre)
• Ruptura en patrón (desviación moderada
pero significativa)
Messages App por Apple
• Atracción
• Vitalidad
• Conveniencia
• Serendipia
Sosa-Tzec (2017)

• Punto inicial claro (estado inicial)
• Punto final claro (cierre)
• Ruptura en patrón (desviación moderada
pero significativa)
Text Delight por Facebook
• Atracción
• Vitalidad
• Conveniencia
• Serendipia
Sosa-Tzec (2017)

• Punto inicial claro (estado inicial)
• Punto final claro (cierre)
• Ruptura en patrón (desviación moderada
pero significativa)
Weather App por Yahoo!
• Atracción
• Vitalidad
• Conveniencia
• Serendipia
Sosa-Tzec (2017)

Para Terminar:
lo Bueno, lo Malo,
y lo Feo

Lo bueno
Nosotros los diseñadores tenemos la
oportunidad de intervenir positivamente en
el día a día de muchas personas a través de la
creación de argumentos multimodales que
sean capaces de provocar deleite.

Lo malo
Nuestra práctica de diseñar experiencias
encantadoras para toda la tecnología
involucrada en la vida diaria contribuye a la
adicción del usuario a la pantalla,inmediatez,
y gratificación constante.

Lo feo
No estar consciente y no ser responsable de
las implicaciones de nuestros diseños y su rol
argumentativo (retórico),especialmente
cuando pueden conducir a comportamientos,
actitudes,o creencias desfavorables.

¡Gracias!
¿Y tú qué opinas sobre
las interacciones y
experiencias de usuario
encantadoras?
tzec.com
@omitzec