UX en la era del IoT y la IA

Experiencia de Usuario en la era del
Internet de las Cosas y la IA
Dr. Toni Granollers
Escuela Politécnica Superior
Universidad de Lleida
Presentación realizada por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

PRESENTACIÓN
UX en la era del Iot y la IA [T.Granollers - Colombia, Noviembre 2018] 2/85

Grupo de Investigación en Interacción Persona
Ordenador e Integración de Datos (GRIHO)
• Fundado el 1991 por el Dr. Jesús Lorés
• Equipo:
– 6 doctores,
– 1 profesor titular no doctor
– 3 titulados superiores
• Grupo consolidado de la Universitat de Lleida (UdL)
• Grupo emergente de la Generalitat de Catalunya
• Miembro
– Fundador de la Asociación Interacción PersonaOrdenador
(AIPO)
– Instituto de investigación INSPIRES
– Red de InnovaciónTecnológica (Xarxa IT) de TECNIO
hace 27 años !!

Equipo
Roberto García
Director
Associate Professor
Rosa Gil
Associate Professor
Juan Manuel Gimeno
Assistant Professor
Toni Granollers
Associate Professor
Marta Oliva
Associate Professor
Montserrat Sendín
Associate Professor
Juan Enrique Garrido
Visiting Professor
Jordi Virgili
Researcher
PhD Student
Albert Berga
Researcher
MSc Student
Gerard Rovira
Researcher
BSc Student

Líneas de investigación
Human-
Computer
Interaction
User
Experience
Data
Integration
(Big Data)
Information
Architecture
Web 3.0
(Semantic)
Knowledge
Engineering
Interaction
Paradigms
Usability
and
Accessibility
Adaptative
User
Interfaces
User
Centred
Design

The Interface adapts the
System to the User
la parte más importante de la
tecnología es …. son las personas que
la usan
la parte más importante de la
tecnología es …. son las personas que
la usan

ESTILOS Y
PARADIGMAS DE
INTERACCIÓN
Perspectiva històrica de la interacción

¿Qué es la interacción?
• Todos los intercambios que suceden entre la persona y
el computador
(Baecher & Buxton, 87)
Bits Interfaz Usuario
UX en la era del Iot y la IA [T. Granollers - Colombia, Noviembre 2018] 12/85

Evolución de la interacción
Líneas de comandos
Menús de navegación
Manipulación Directa y
Asistida
Lenguaje Natural
Nuevos Paradigmas
Paradigma de ordenador de sobremesa
Realidad Virtual
Computación
Ubicua
Realidad
Aumentada

ESTILOS de interacción
Líneas de comandos
Asistida
Lenguaje Natural
Nuevos Paradigmas
Realidad Virtual
Computación
Ubicua
Realidad
Aumentada

ESTILOS de interacción
• Un término genérico para agrupar las diferentes
maneras en que los usuarios se comunican o
interaccionan con el ordenador.
(Preece J. Human–Computer Interaction,Cap. 13. Addison–Wesley,
1994)
• Los estilos de interacción predominantes son:
– La interfaz por Líneas de comandos (órdenes)
– Menús de Navegación
– Manipulación Directa y Interacción Asistida
– Lenguaje Natural

Estilos de Interacción
Interfaz por línea de comandos (órdenes)
• Primer estilo de interacción de
uso generalizado
• Todavía utilizado (habitualmente
como acceso complementario).
• Es una manera de dar órdenes
directamente al ordenador.
• Pueden tener la forma de teclas
de función, un carácter,
abreviaciones cortas, palabras
enteras o una combinación de las
dos primeras
 Potente y flexible
 difícil de aprender y recordar

Menús de Navegación
• Conjunto de opciones
visualizadas en la pantalla que se
se pueden seleccionar
• La selección de una (o varias) de
ellas supone la ejecución de una
orden subyacente y normalmente
normalmente un cambio en el
estado de la interfaz.
• Fácil de recordar.
– Si el texto es adecuado y
– Las opciones están agrupadas
significativamente
• Ocupan mucho espacio
– Solución: menús desplegables o
menús pop–up.

Manipulación Directa
• Representación continua de los
objetos y de las acciones.
• Sintaxis de comandos mediante
manipulación de objetos y
acciones.
• Acciones rápidas, incrementales y
reversibles que provocan un
efecto visible inmediatamente
en el objeto seleccionado.
• Los usuarios aprenden
rápidamente
• La interfaz WIMP: Windows,
Icons, Menus and Pointers.
% foo.bar
ABORT
dumby!!!
C…P… filename
dot star… or was
it R…M?
Move this file
here, and copy
this to there.
Direct manipulation
Source: HUMAN-COMPUTER INTERACTION, by Alan Dix, Janet Finlay, Gregory Abowd &
Russell Beale
Chapter 4. Paradigms (http://www.hcibook.com/e3/chapters/ch4)

Interacción asistida
• Utiliza la metáfora del asistente personal o agente que colabora
con el usuario en el mismo ambiente de trabajo y el usuario en vez
vez de dirigir la interacción
– Entorno cooperativo en que el usuario y los agentes o asistentes se
comunican, controlan eventos y realizan tareas
• No es considerado como una herramienta desde el punto de vista
de una interfaz de manipulación directa.
• El agente “observa” las interacciones del usuario y “decide” actuar
en consecuencia para ayudar al usuario.
– La interacción es (parcialmente) dirigida por el agente
– Reduce el esfuerzo al usuario
mediante
agentes o asistentes

Interacción asistida
mediante
agentes o asistentes

Lenguaje Natural
• Interacción mediante la
voz y movimiento.
• Necesario “conocer” un
determinado “lenguaje”
– Palabras/frases
– Gestos exactos
• Necesario “diálogos de
clarificación”
Natural user
interface

PARADIGMAS de interacción
Texto (comandos) +
teclado
Asistida
Lenguaje Natural
Nuevos Paradigmas
Realidad Virtual
Computación
Ubicua
Realidad
Aumentada

PARADIGMAS de interacción
• Son los ejemplos o modelos de los que se derivan todos los estilos de
interacción.
– Es una abstracción de todos los posibles estilos de interacción organizados en
grupos con características similares.
• Los paradigmas interactivos actuales son:
– El ordenador de sobremesa (metáfora del escritorio)
– La RealidadVirtual
– La Computación Ubicua
– La RealidadAumentada
(*) La palabra paradigma viene del latín paradigma y este del griego parádeigma que quiere
decir ejemplo, modelo. Es empleado para indicar un patrón, modelo, ejemplo o arquetipo.

Paradigmas de interacción.
Ordenador de sobremesa
• Durante muchos años ha sido
el paradigma dominante.
• La interacción se realiza
normalmente aislado del
entorno.
• El usuario interacciona sentado
en una mesa con un ordenador
de sobremesa de frente a
interfaces de manipulación
directa.

La Realidad Virtual
• Simulación por ordenador en la
que se emplea el grafismo 3D y el
entorno (sonido, movimiento, olor,
…) para crear un mundo que
parece realista.
– Este mundo es dinámico y
responde a las ordenes del usuario
(gestos, voces, etc…).
• Interactividad en tiempo real
– respuesta inmediata a la acción
– sentimiento de inmersión
• Costoso
• Multitud de aplicaciones:
– Medicina, juegos, arte, enseñanza,
campo militar y aeroespacial,
publicidad, diseño, arquitectura,
robótica.

La Realidad Virtual
Microsoft Research: Microsoft & Human Interact: Players control the narrative in Starship
Commander (https://youtu.be/nRZh7dkB_hs)

La Realidad Virtual
Facebook: Oculus Go, el visor de realidad virtual de bajo costo
https://elcomercio.pe/tecnologia/gadgets/facebook-oculus-go-visor-realidad-virtual-costo-noticia-464936
https://www.oculus.com/go

La Realidad Virtual
• These Gloves AllowYou to FeelVirtually Reality
https://vimeo.com/151670909

Computación Ubicua
• Extender la capacidad
computacional al entorno del
usuario.
• La capacidad de información está
presente en todas partes
– en forma de pequeños dispositivos
diversos que permiten interacciones
poca dificultad, conectados en red a
servidores de información.
• La computación deja de estar
localizada en un único punto para
pasar a diluirse en el entorno.
• No confundir la computación ubicua
con la realidad virtual
– la RV trata de crear un mundo virtual
existente en favor de uno imaginario,
– la CU parte del mundo real y lo mejora.
Mark Weiser (Xerox PARC) is the
father of Ubiquitous Computing (UC);
his web page contains links to many
papers on the topic.
(MUY) Interesante: Mark’s SLIDES
spoking about UC at the Nomadic '96
conference (March 1996 ).
Actualmente utilizamos el término
Internet-Of-Things (IOT)

Computación Ubicua
• Machines that fit the human environment, instead of forcing humans to enter theirs, will make
using a computer as refreshing as taking a walk in the woods
Mark Weiser, "The Computer for the Twenty-First Century," Scientific American, pp. 94-10, September 1991
http://www.ubiq.com/hypertext/weiser/SciAmDraft3.html

Computación Ubicua

Realidad Aumentada
• Reducción de las
interacciones con el
ordenador utilizando la
información del
como una entrada
implícita.
• Dos corrientes:
1.aplicar la RV en el
real,
2.usar dispositivos que
aumentan la realidad e
interaccionan con ella.
https://www.youtube.com/watch?v=aL4QOmgzvak

Realidad Aumentada
https://www.youtube.com/watch?v=3qpgMLzBi30

Realidad Virtual/Aumentada
https://www.leapmotion.com/showcase#111

Realidad Virtual/Aumentada
https://elpais.com/internacional/2018/02/07/mundo_global/1518007737_209089.html

Comparación de los paradigmas de
interacción
a)En un Ordenador de sobremesa
(utilizando una GUI) la interacción entre el
usuario y el ordenador está aislada de la
interacción entre el usuario y el mundo
real.
b)En la RealidadVirtual el ordenador cubre
totalmente el usuario y la interacción
entre el usuario y el mundo real
desaparece.
c) En la Computación Ubicua el usuario
interacciona con el mundo real pero
también puede interaccionar con los
ordenadores de los que dispone en el
mundo real.
d)La Realidad Aumentada soporta la
interacción entre el usuario y el mundo
real utilizando la información aumentada
del ordenador.
Image source: http://www.onlyaugmented.com/what-is-augmented-reality

Internet of Things
• Podemos ver una ciudad inteligente como un gran
ordenador que en vez de tener teclado, ratón y micrófono
como dispositivos de entrada, tiene sensores, y que en
vez de tener pantalla y altavoz como dispositivos de
salida tiene semáforos, estaciones de Bicing, farolas y
contenedores.
• En este modelo el usuario no se sienta en frente del
ordenador sino que “vive en él”, realizando la entrada
datos con sus acciones cotidianas que, al mismo tiempo
están condicionadas por las salidas de la ciudad-
ordenador.
Font: Via Empresa, Josep Mª Ganyet (17-11-2016)
http://www.viaempresa.cat/ca/notices/2016/11/des-de-dins-l-smart-city-22422.php
http://www.smartcityexpo.com/en

Internet of Things
https://youtu.be/P3REKYtI9J8
The vehicles of
2118 aren't as far
off as they seem.

IoT ... en 1986
• Commodore 64
• Posibilidad de programar
remotamente la
calefacción, las luces y los
electrodomésticos
mediante un teléfono
convencional
Advertisement for X10 Powerhouse for
the Commodore 64, from the January
1986 edition of Compute! Magazine
(image via commodore.ca)

Principios para IoT
• Establecer expectativas realistas
• Diferentes niveles de severidad en la
comunicación
– Evitar escenarios en los que el usuario tanga
“sensación de emergencia”
• Tipo de comunicación “humana”
• Previsión para los factores externos
http://uxpamagazine.org/iot-ux-challenges

¿Qué tiene de diferente el diseño de UX
para la IoT?
• HCI y UX nacen en un contexto de
ordenadores de sobremesa
• Pero la UX ha cambiado mucho en los
10-15 años
– Hoy en día, la mayoría de nuestras
ocurren en smartphones, tablets, e-readers,
Smart TVs, game consoles, …
• Las interacciones suceden en multitud de
contextos (y de dispositivos)

para la IoT?
• The IoT refers to the growing range of
everyday objects acquiring connectivity,
sensing abilities, and increased computing
power:
– Connected home tech
– Wearables
– medical/wellness devices
– Connected cars
– Urban systems
• Designing for IoT raises all that the challenges of
cross-platform design, and more

para la IoT?
• El diseño de tareas simples cambia
completamente
Even something as simple as
turning on a light involves
many connections.
http://uxpamagazine.org/understanding-user-motivation

Pero en
para la IoT?
IoT

para la IoT?
• Diseñar para la IoT conlleva ciertos retos:
– Madurez de la tecnología
– Contexto
– Expectativas
– La complejidad añadida al servicio (ejemplo
anterior)

para la IoT?
• Funcionalidad distribuida entre (muchos)
dispositivos con diferentes capacidades
• Interusabilidad: usabilidad/UX distribuida
entre multiples dispositivos

para la IoT?
– Tendemos a poner el foco en la tecnología PERO el
foco de la UX en IoT es el servicio
– Entre otras cosas porqué para dar el servicio este
suele dependes de factores externos
• La “nube”
• Los retrasos de las comunicaciones por Internet
• Los sistemas domóticos necesitas además un “home
center” para cada instalación
• Código y dispositivos distribuidos en el “mundo real”
• Ecosistemas difíciles de integrar
• x

para la IoT?
Domotic in-House
heating system
Smart City exemple
schema

para la IoT?
ADEMÁS ... IoT són DATOS
y aquí viene la Inteligencia Articifial !!!
• Tanta cantidad de dispositivos permite
enormes cantidades de datos del mundo real
• El verdadero valor del servicio no se consigue
solo integrando de dispositivos, éste depende
del valor añadido del tratamiento de los datos

Modelo de diseño para el IoT
• La parte más visible
es el diseño visual de
la IU y el diseño
físico del hardware

Modelo de diseño para el IoT. DCU
• Para el diseño visual de la IU utilizaremos
todo el bakcground de la HCI
MPIu+a
[Granollers, 2004]

Modelo de diseño para el IoT.
DCU. Prototipos
Nielsen Norman Group Training Video:
Paper Prototyping: A How-To Training Video
http://www.nngroup.com/reports/prototyping
http://mpiua.invid.udl.cat/recursos

DCU. Prototipos
http://www.grihotools.udl.cat/mpiua/mapastoryboard-navegacional-whiteboarding

DCU. Prototipos
http://www.grihotools.udl.cat/mpiua/wireframes

Prototipo de software. Ejemplo La
Arepería (UAO 2015)

Prototipado Iteratividad y Evolutivo
Fail soon, fail often,
fail cheap !!!

Interusability
• It refers to the additional considerations of designing
interactions than span multiple devices.
• The goal is to make the overall experience feel like a
coherent service, even when the devices involved may
have quite different form factors and i/o capabilities.
• It involves
– Specifying which functionality belongs to each device
– Creating design guidelines that span multiple device types
– Designing cross-Device user flows for key interactions
– Designing multiple Device UIs in parallel
– Design “consistently”

Diseño consistente
• se refiere a si los diferentes estados por los
que pasa la interfaz son coherentes y si se
respeta la jerarquía de información
establecida
The consistent approach: the same content offering is replicated across devices, with some
adjustments to accommodate each device’s character

Diseño consistente
• These adjustments address differences between
devices in facets like form factor, screen size,
interaction model (touch, keys, voice), and
sensors (GPS, accelerometer, gyroscope, and
others).
• They can be visual —adapting screen layouts,
grids, and user interface (UI) element size— but
they can also involve other experience layers,
like information architecture (IA).

Diseño consistente
• Mashable’s responsive web design for desktop, tablet, and smartphone.
– The three-column tiled layout on the desktop changes into two columns on
the tablet, and is then condensed into a single list column on the smartphone.
– Also, while on the bigger screens the main navigation bar is placed
horizontally at the top across the entire desktop site, on the smartphone it is
hidden behind a “hamburger” icon at the top-left.
The design
adjustments
between devices
highlight an
important principle
of the consistent
approach:
consistent doesn’t
mean identical.

• Google Search results screen
for “Abraham Lincoln” on
desktop/web (top), tablet
(bottom left), and smartphone
(bottom right).
• The page content and design
elements are consistent—yet
not identical—across devices:
– as the available screen real
estate gets smaller, fewer
details are surfaced by default
in the summary cards

http://foodsense.is

Diseño consistente
Source: https://www.interaction-
design.org/literature/book/the-encyclopedia-
of-human-computer-interaction-2nd-
ed/user-interface-design-adaptation

Modelo de diseño para el IoT. Diseño
industrial
• Prototipos hardware, ergonomía de uso,
colores/materiales/formas ….

Modelo de diseño para el IoT. Diseño
del servicio
• En las actividades debemos prototipar, diseñar,
evaluar todas las facetas del servicio.
• Puede incluir:
– Interacciones de soporte al usuario
– Guías de uso
– Marketing, ventas
– Experiencias “in-store”
– Comunicaciones
– ….
The service experience
is critical to the
success of an IoT
product.

Resumiendo
El diseño de la UX
en el IoT difiere
del UX
“tradicional” en …

UX en IoT
• La usabilidad/UX “convencional” se basa en la
interación entre el usuario y una interfaz
concreta
• La interusabilidad radica en interacciones
entre múltiples dispositivos
The aim is to create a coherent UX across
the whole system even when devices have
very different characteristics.

Retos para los diseñadores de UX en el
contexto de la IoT
Los usuarios deben
formarse un modelo
mental claro del
sistema en general,
aunque pueda
resultarles complicado
entender las
interconexiones entre
dispositivos.
Reto 1: diseñar las
IU’s acorde los
modelos mentales
de los usuarios en
un contexto al que
no están
habituados (y que
probablemente no
entienden)

Conducting Immersive Research to
Understand IoT Experiences
• Conducting immersive research studies in
users’ homes became the core way for us to
fill in the gaps of what was happening on
our IoT platform
Ho, L. (2017). Understanding User Motivation: Creating Compelling IoT Experiences.
User Experience Magazine, 17(5).
Retrieved from http://uxpamagazine.org/understanding-user-motivation
Reto 1

Conducting Immersive Research to
Understand IoT Experiences
• UX research looks at
– Environmental context.Where are the IoT products
placed and what are they surrounded by?
– Social context.Who else lives in the household?
– Motivational context.What was the reason for
having the IoT products put in place?
http://uxpamagazine.org/understanding-user-motivationReto 1

contexto de la IoT
Para adaptarse a las
capacidades de cada
dispositivo y a los
respectivos contexto
de uso, los diseñadores
necesitan distribuir la
funcionalidad entre
varios dispositivos
Reto 2composition
diseño situacional
(más complejo)
- Storyboards
- composition User
stories

Using Storyboards to
Communicate Context
• Presenting designs by sharing mockups or
isolated prototypes of the mobile screen is
not enough
• Instead …. depict experiences using detailed
storyboards showing the environmental,
social, and motivational context
Reto 2

contexto de la IoT
Los diseñadores tienen
que determinar qué
elementos de la
interfaz deben dar
consistencia
Reto 3 definir las reglas
que harán que esa
interfaz distribuida sea
consistente:
- Terminología
- Plataforma
- Convenciones
- Estilo estético
- Arquitectura de la
información
Reto 4 mayor dificultad
en la definición de las
metáforas

contexto de la IoT
• Los datos y el contenido a
veces no están
sincronizados con el
sistema,
• Provoca problemas de
continuidad y dudas en la
UX personal.
Reto 5 los diseñadores
necesitan encontrar
formas creativas de lidiar
con esta discontinuidad
en la interfaz de usuario.
- Cuando las
interacciones
comienzan en un
dispositivo y cambian a
otro, se necesita una
señalización clara

contexto de la IoT
Reto 6 hacer
buenos productos

“haciendo” Buenos productos !!
• Productization is the extent to which the supplier makes
the user value of the product explicit and easy to
understand.
• The product’s value proposition: the user’s
of what the product does for them and why they might
want it.
• Estos atributos o características no son retos exclusivos
la IoT … pero aquí estamos todavía en los inicios
– todavía nos exprimimos en ofrecer servicios de valor
– muchas iniciativas son complejas y poco claras
– fallan a l ahora de comunicar “para qué sirven”
Reto 2

IoT ... en 1986
• Aparte del precio, es X-10 fracasó
como producto porqué
• Requería de muchas habilidades
técnicas para mantenerlo
• Los consumidores no le vieron el
valor a los servicios ofrecidos
• … ahora, 2018, la gente empieza
a demandar este tipo de
soluciones …. MATURITY !!!
Advertisement for X10 Powerhouse for
the Commodore 64, from the January
1986 edition of Compute! Magazine
(image via commodore.ca)

Nunca subestime el poder
de una explicación simple, o
un producto que
se ve bien. Si la gente puede
entenderlo, pueden querer
uno para sí mismos.
No le tienen miedo. Deja de
ser una cosa rara que hacen
los geeks.
DeniseWilton, designer
Reto 2

• The bigger challenge is in creating products
and services that work for mass-market
consumers.
• For this audience ..,
the functionality
the underlying technology
the user
transparent
invisible
able to focus on getting the benefit
from the product that they were
promised
- not on configuring it and
maintaining it
Reto 2

Mercado
• En IoT, a menudo, el principal reto está en convencer a los usuarios
de “tu visión”
• ¿cómo puedes convencer a alguien al que le has solucionado un
problema que todavía no ha notado que tiene?
Producto
Low Cost
Nicho de
producto
Nuevo tipo de
producto
Producto
Nuevo
Mercado existente Mercado NUEVO
Steve Blank, 2005: “The Four Steps to the Epiphany: Successful
Strategies for Products that Win” (K&S Ranch Press)
Reto 2

Conclusiones
• IoT no puede entenderse (bien) sin conocer la
evolución de los distintos estilos y paradigmas de
interacción de las personas con los sistemas
interactivos
• IoT y la visión actual de la Inteligencia Artificial van “de
la mano”
• Debemos entender que el foco de la UX en IoT es el
servicio
• En IoT hablamos de interusabilidad (pero no de
interUX !!)
• Los 5 retos !!

Gracias por su
atención !!!
Toni Granollers
Escola Politècnica Superior
Universitat de Lleida (UdL)
C/ Jaume II, 69
25001 – Lleida (Catalonia)
(+34) 973 702750
antoni.granollers@udl.cat
@DCU_MPIUA
slideshare.net/DCU_MPIUA


@

UX en la era del IoT y la IA

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie UX en la era del IoT y la IA

Ähnlich wie UX en la era del IoT y la IA (20)

Mehr von DCU_MPIUA

Mehr von DCU_MPIUA (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

UX en la era del IoT y la IA

Hinweis der Redaktion