Diseñar tecnología para las personas (UTP - Panamá '17)

Diseñar tecnología para las
personas
Dr. Toni Granollers
Presentación realizada por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

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 26 años !!
Diseñar tecnología para las personas [T.Granollers - UTP Panamá, Agosto 2017] 2/83

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

La explosión de los ordenadores
Ordenadores por todas partes

Lo tienen/emos FÁCIL
las personas para utilizar
todos estos
dispositivos?
… y,
para encontrar la
INFORMACIÓN
que buscan/mos?
… y,
pueden hacerlo TODAS las
PERSONAS?

Interfaces de Usuario (IU)
• Todo en una IU debe ser considerado una
conversación
– Todos sus elementos proporcionan una
experiencia a base de intercambios en la
conversación entre personas, una marca, un
negocio, un servicio, y, cada vez más otra
máquina con “inteligencia”
– En este sentido, la conversación es la esencia que
los diseñadores de interfaces deben cubrir

Es esta una buena web?
Por qué?
http://www.mingob.gob.pa

Y esta?
http://hotelcaminoreal.com.co

Y esta?
http://www.les.es

Veamos otras IUs
http://www.check-6.com/gallery/heavies/B-2-Spirit-Cockpit-by-Chad-Slattery.php

Interfaces
futuras (?)
Minority Report
http://www.youtube.com/watch?v=0l29zW4_W5E
Some prophetic content
from the 2002
• Video conferencing
(before Skype and
similar become
popular)
• Gesture-based User
Interfaces
• Predictive crime
fighting (pre-crime)

Interfaces futuras o presentes?
http://xataka.co
m/2007/06/03-
especial-
microsoft-
surface-el-
ordenador-del-
futuro
http://www.microsoft.com/surface http://www.youtube.com/digalixhttp://www.digalix.com
Pizza Hut
muestra su
prototipo de
mesa
interactiva
para que
configures
la comida a
tu gusto
https://www.youtube.com/
watch?v=xvT0MCugb58

Interfaces futuras o presentes?
https://www.leapmotion.com

Whirlpool's Futuristic Stovetop Is
Basically A Giant Tablet You Can Cook
On
https://www.youtube.com/watch?v=QPG9Pk2bbuE&t=64

Information Visualization

IU no tan futuras ...
• Apple iPhone i MacBook Air…

IU no tan futuras ...
• Simuladores, museos virtuales, F1, …

http://www.sauberf1team.com/fileadmin/user_upload/redactors/documents/pdf/2014_SteeringWheel_EN_lr.pdf
http://youtu.be/snwH-qN0q8A?t=52s

Pero la realidad diaria ...
http://www.lingscars.com
Las 10 peores Webs del
[2005-2014]
http://www.webpagesthatsuck.com

Pero la realidad diaria ...
Top 10 Worst Websites Of 2017 And How To Avoid
The Embarrassment
http://www.onlinetechnologyworld.com/top-10-worst-websites-2017-avoid-embarrassment
http://irishwrecksonline.net
http://www.patimex.com
http://www.gatesnfences.com

Bueno, aunque
queda mucho por
mejorar
tampoco estamos
tan mal

Pero, por qué todavía sucede esto?
• Solo necesitamos
saber programar?
• Habitualmente
olvidamos la parte
más importante …

el USUARIO

y ..... YO
(como programador/ingeniero)
NO SOY MI USUARIO !!!!!!

“Clutter and confusion are
failures of design, not attributes
of information”
Edward Tufte
El desorden yla confusión son errores del diseño, no atributos dela información

Usabilidad
• Definición “coloquial” [J. Preece, 1994]
– Sistemas fáciles de usar y
de aprender
• Definición formal [ISO 9241-11]
– la medida en la que un producto se
puede usar por determinados usuarios
para conseguir objetivos específicos con
efectividad, eficiencia y satisfacción en
un contexto de uso especificado”
http://www.grihotools.udl.cat/mpiua/usabilidad

Usabilidad
USABILIDAD
EFECTIVIDAD
EFICIENCIASATISFACCIÓN
direct & indirect mapping

Usabilidad ¿qué es?
• Efectividad: la precisión y la plenitud con que los usuarios alcanzan
los objetivos especificados.
– A esta idea van asociadas la facilidad de aprendizaje (en la
que este sea lo más amplio y profundo posible),
– la tasa de errores del sistema y
– la facilidad del sistema para ser recordado (que no se olviden las
funcionalidades ni sus procedimientos).
• Eficiencia: los recursos empleados en relación con la precisión y
plenitud con que los usuarios alcanzan los objetivos especificados.
• Satisfacción: ausencia de incomodidad y la actitud positiva en el
uso del producto.
– Se trata, pues, de un factor subjetivo
– Por tanto, el más complicado de medir
Diseñar tecnología para las personas [T. Granollers - UTP Panamá, Agosto 2017] 37/83

Dimensiones de la usabilidad
EFECTIVIDAD
EFICIENCIASATISFACCIÓN
puede ser medida o
evaluada por
observación del usuario
mientras realiza tareas
de interacción y se
puede medir mediante
métodos tradicionales
indica la
usabilidad
percibida o
satisfacción de
uso, y es difícil
de entender y
de medir
Usabilidad objetiva o
inherente
Usabilidad subjetiva
o aparente

Otros atributos
a tener en cuenta
• Perceived Usefulness: “the degree to which
a person believes that using a particular
system would enhance his/her job
performance”
– a system which is characterized by high
Usefulness “is one for which a user believes in
existence of a positive use-performance
relationship”
Relacionados con la
SATISFACCIÓN

Otros atributos a tener en
cuenta
• Perceived Ease of Use: “the degree to which
a person believes that using a particular
system would be free of effort”
– where the term ease implies the “freedom from
difficulty or great effort”
Relacionados con la
SATISFACCIÓN

Usability 101: Introduction to Usability
by JAKOB NIELSEN (January 4, 2012)
• What: Usability is a quality attribute that assesses how easy user
interfaces are to use.The word "usability" also refers to methods
for improving ease-of-use during the design process.
• Usability is defined by 5 quality components:
– Learnability: How easy is it for users to accomplish basic tasks the
first time they encounter the design?
– Efficiency:Once users have learned the design, how quickly can they
they perform tasks?
– Memorability:When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
– Errors: How many errors do users make, how severe are these errors,
errors, and how easily can they recover from the errors?
– Satisfaction: How pleasant is it to use the design?
http://www.nngroup.com/articles/usability-101-introduction-to-usability

Usabilidad
fácil de aprender (learnability)

Usabilidad en Objetos cotidianos
Los objetos bien diseñados son
fáciles de interpretar y de
comprender.
Los objetos mal diseñados pueden
ser difíciles de utilitzar y frustran al
usuario

1
Ejemplos de MALA usabilidad

2

3
Escoje un fichero XML que cumpla
con la QTI del IMS de tu ordenador.

Ejemplos de MALA usabilidad: links
• Los links no sólo pasan
desapercibidos entre el resto del
texto si no que tienen
exactamente el mismo aspecto
que éste cuando se destaca algo
en negrita.
1. El usuario cree que no hay links
2.Si descubre uno, creerá que el resto
de negritas también son links
• Jakob Nielsen en sus Guías para
la visualización de links, indica
que estos deberían ser al menos
coloreados y/o subrayados para
ser facilmente identificables.

Ejemplos de MALA usabilidad:
“el diablo está en los detalles” !!
NAAE 1 733114 05 5 or NAAE1733114055


Ejemplos de MALA usabilidad:
“el diablo está en los detalles” !!
¿cuál es el
formato correcto?
Tras probar:
Q-7550001-G
Q-7550001G
Q7550001G
Q-7550001G
…
Tuve que enviar un
correo-e
Si mi interés no hubiese
sido MUY ELEVADO y
por no convencerme las
alternativas … la
empresa había perdido
esta venta l

Ejemplos MALA usabilidad:
http://www.radiotower.com
El menú no
indica
dónde
estamos !!

Usabilidad en términos de
calidad del software
[ISO/IEC 9126-1:2001(E)]

calidad del software: ISO/IEC 25010:2011
Quality Model
Quality In Use
Effectiveness Efficiency Satisfaction Freedom from risk Context coverage
System/Software
Product Quality
• Usefulness
• Trust
• Pleasure
• Comfort
• Economic risk
mitigation
• Health and safety
risk mitigation
• Environmental risk
mitigation
• Context
completeness
• Flexibility
Quality in use is the degree to which a product or system can be used by specific users
to meet their needs to achieve specific goals with effectiveness, efficiency, freedom from
risk and satisfaction in specific contexts of use.

Quality Model
Quality In
Use System/Software Product Quality
Functional
Suitability
Performance
efficiency
Compatibility Usability Reliability Security Maintainability Portability
• Appropriateness
recognisability
• Learnability
• Operability
• User error
• User interface aesthetics
• Accessibility
The product quality model categorizes product quality properties into eight
characteristics (functional suitability, reliability, performance efficiency, usability, security,
compatibility, maintainability and portability).
calidad del software: ISO/IEC 25010:2011

Interfaces de Usuario (IU)
ejemplo comercio-e / e-commerce
• A diferencia de los negocios tradicionales que
tienen vendedores/comerciales
en el canal de venda
online, quien influencia las
ventas es la INTERFAZ de la
tienda.

Énfasis en el comercio-e
• E-CommerceWeb site = electronic storefront
– Web site user interface = electronic clerk
– Online shoppers can afford to be less tolerant with an
inept electronic clerk
• E-CommerceWeb site = electronic catalog for direct
sales
– Catalogs are convenient for mail-ordering and large
inventory
– Too much focus on display and publicity
– Web site user interface = “read-ability/usefulness” of
catalog
– How many paper catalogs get thrown away?
[Bebo White Stanford Linear Accelerator Center]

Beneficios de la usabilidad
Beneficios para desarrolladores
• Reducción de los costes de producción
• Reducción del mantenimiento
• Mejora de la calidad del producto
• Menor soporte al
usuario/cliente

Beneficios de la usabilidad
Beneficios para los usuarios/clientes
• Mayor facilidad de aprendizaje
• Facilidad de uso
• Trabajo más rápido y eficiente
• Menos pérdida de tiempo
• Mayor confianza en el producto
• Mejor calidad de vida:
– menos estrés y más satisfacción

Every year
• +200 events
• +180 cities
• +43 countries
• +40,000 people
• Thousands of online
participants
• Extensive worldwide media
coverage
Dia Mundial de la Usabilidad
http://www.worldusabilityday.org
A single day of events occurring around the world that
brings together communities of professional, industrial,
educational, citizen, and government groups for our
common objective: to ensure that the
services and products important to life
are easier to access and simpler to use.

No confundir usabilidad con otros atributos de la
interfaz de usuario (UI)
http://www.awwwards.com
The awards for design, creativity and innovation on the Internet

Experiencia de usuario
User eXperience (UX)
http://www.grihotools.udl.cat/mpiua/user-experience

“La experiencia de usuario atiende a todos los factores,
tanto internos como externos del usuario y del sistema
interactivo, que causen alguna sensación a quien esté
utilizando un sistema interactivo concreto en un
determinado contexto de uso.”
• Is a “consequence of the presentation, functionality,
system performance, interactive behaviour, and assistive
capabilities of the interactive system”
• It includes aspects such as human factors, design,
ergonomics, HCI, accessibility, marketing as well as
usability
http://usabilitygeek.com/the-difference-between-usability-and-user-experience

Experiencia de Usuario y conceptos
relacionados
• Hoy en día, no se habla de usabilidad, esta se
incluye cómo parte de términos más amplios:
– User Experience (UX)
• que en el caso del e-commerce también suele
denominarse
– Customer Experience (CX) o
– Shopping Experience (SX).
• Estos conceptos tienen en cuenta los
aspectos emocionales del usuario

http://www.youtube.com/watch?v=RVOEyljI4mM

Usabilidad ≠UX
UI UX

Usabilidad ≠UX

Usabilidad ≠UX
User
eXperience
UX
usability

Usabilidad ≠UX
… pero está muy relacionado
submit
submit
vs
UI design
Function:
it works
submit
vs
Usbility design
Action: it works WELL
cancel
submit cancel
Yes, complete my order
UX design
Emotion: it works well and makes
me say Wow!
No, thanks

Usabilidad ≠UX
… pero está muy relacionado
https://www.theatlantic.com/technology/archive/
2017/07/toaster-a-bit-more-button/534312

Accesibilidad
• Capacidad de acceso y de interacción en un
sistema o aplicación para cualquier tipo de
usuario, independientemente de sus
discapacidades y contexto de uso.
http://www.grihotools.udl.cat/mpiua/accessibilidad

Accessibilidad en les TICs
http://www.vilaweb.tv/?video=4380
http://www.youtube.com/watch?v=rLpRotz1Yck
http://www.youtube.com/watch?v=2BhHwk9qSvI

Sitio web accesible

• Las personas son diferentes entre sí
• Existen grupos de población con
limitaciones de distintos niveles
• Una Necesidad General
– Personas de edad avanzada
– Personas muy jóvenes
– Personas con dispositivos lentos o antiguos
– Personas con dispositivos muy modernos
– Personas con discapacidades temporales
– Y … las personas discapacitadas
 Permanentes
 Temporales
 Físicas
 Cognitivas
Accesibilidad

Estándares
• Los estándares WEB son un conjunto de
recomendaciones ofrecidas por el W3C (WorldWide
Web Consortium) y respaldado por otros organismos y
organismos y empresas internacionales sobre como
crear e interpretar la información web
– Más información: http://www.w3.org/standards
• Misión delW3C:
– encaminar la web hacia su máximo potencial,
desarrollando protocolos y pautes que aseguren su
crecimiento futuro
http://www.w3.org

WAI (Web Accessibility Initiative)
• WAI – Web Accessible Initiative:
• Grupo de trabajo permanente del W3C cuyos objetivos
principales son:
• Facilitar el acceso a la WEB a las personas con discapacitat
• Desarrollar pautas de accessibilidad (WCAG)
• Desarrollar y mejorar las herramientas de evaluación y de
reparación de la accesibilidad Web
• Formación y concienciación en relación del diseño accessible
(design for all, ...)

WAI. Pautas WCAG
• WCAG (Web ContentAccessibility Guidelines)
• Pautas de accesibilidad que explican como hacer
el contenido Web accessible para personas con
discapacidades o de edad avanzada
• Tienen tres niveles de prioridad
Simple(Nivel A) Doble (Nivel AA) Triple (Nivel AAA)
http://www.w3.org/WAI/WCAG2-Conformance

Interacción Persona-Ordenador (IPO - HCI)

Interacción Persona-Ordenador (IPO - HCI)
• Disciplina relacionada con
el diseño,
implementación y
evaluación de sistemas
informáticos interactivos
para uso de humanos y
con el estudio de los
fenómenos más
importantes con los que
está relacionado
http://sigchi.org

CONCLUSIÓN
• Los usuarios utilizan la tecnología
mediante sus interfaces
• Perciben la calidad mediante
dichas IUs
• Las IUs deben ser usables,
accessibles y proporcionar una
buena UX
• La HCI es la disciplina que estudia
estas características
• No hagas a los demás lo que no
desees para ti

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


@

Design web sites that work:
Usability for the Web
[T. Brink et. al., 2002]
Human-Computer Interaction
[A. Dix et. al., 2003]
Prioritizing Web Usability
[J. Nielsen & H. Loranger, 2006]
Interaction Design
[J. Preece et al., 2007]
Don’t Make me Think
[Steve Krug, 2005 2nd ed.]
Bibliografía básica
Rocket Surgery Made Easy
The Do-It-Yourself Guide to Finding
and Fixing Usability Problems
[Steve Krug, ]
http://www.sensible.com/rsme.html
http://griho.blogs.udl.cat/2011/08/30/rocket-surgery-made-easy
http://www.hcibook.com/e3

Diseño de sistemas interactivos
centrados en el usuario
[T. Granollers, J. Lorés y J.J. Cañas,.
al., 2005]
La Interacción Persona-Ordinador
[J. Lorés et al., 2001]
Llibro virtual disponible en la web de
AIPO
Designing Interactions
[Bill Moggridge, 2007]
Designing Interfaces. Patterns for
Effective Interaction Design
[Jenifer Tidwell, 2005]
Homepage Usability:
50 Websites Deconstructed
[J. Nielsen & M. Tahir, 2001]
Designing the User Interface: Strategies for
Effective Human-Computer Interaction
[B. Shneiderman et al., 2004]
http://www.grihotools.udl.cat/mpiua
http://aipo.es/content/libro-aipo

Understanding Your Users: A
Practical Guide to User
Requirements Methods, Tools, and
Techniques
[C. Courage & K. Baxter, 2004]
http://www.interaction-design.org/encyclopedia
the Encyclopedia of Human-
Computer Interaction
[several authors, 2011]
Rapid Contextual Design: A
How-to Guide to Key
Techniques for User-
Centered Design
[J. Wendell, K. Holtzblatt,
S. Wood, 2004]
Living with Complexity
[D. Norman, 2011]
http://www.jnd.org/books.html

Diseñar tecnología para las personas (UTP - Panamá '17)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Diseñar tecnología para las personas (UTP - Panamá '17)

Similar a Diseñar tecnología para las personas (UTP - Panamá '17) (20)

Más de DCU_MPIUA

Más de DCU_MPIUA (18)

Último

Último (20)

Diseñar tecnología para las personas (UTP - Panamá '17)

Notas del editor