Profa. Livia C.

Borjas M
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 2 / 74
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 3 / 74
FUNDAMENTOS.
USABILIDAD,
ACCESIBILIDAD, UX
Grau en Enginyeria Informàtica
Interacció Persona-Ordinador
Toni Granollers
El Curso de Interacción Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.
Evolución de las TICs

Evolución del
Ordenador 2001
Personal (PC) 1990

1984
1981
1975

1822

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 5 / 74

Evolución de las Tecnologías de la
Información y de la Comunicación

PERSONAS

DISPOSITIVOS

INFORMACIÓN

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 6 / 74

Evolución de las Tecnologías de la
Información y de la Comunicación
DISPOSITIVOS

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 7 / 74

Evolución de las Tecnologías de la
Información y de la Comunicación

INFORMACIÓN

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 8 / 74

Evolución de las Tecnologías de la
Información y de la Comunicación
PERSONAS

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 9 / 74

Evolución (rápida) de la Web

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 10 / 74

Evolución de las TICs
… junto a la evolución en la tecnología
• A finales de los 60 empieza la preocupación por
la relación persona-ordenador (Shakel, Licklider,
Clark, Shneiderman, Hansen y otros)
• Durante los 70 se crean HUSAT y el Palo Alto
Research Center de Xerox, dedicados a la IPO.
• y ya se trabaja en aspectos como:

Interfaces de Usuario
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 11 / 74
Usabilidad en Objetos cotidianos
Los objetos bien diseñados son Los objetos mal diseñados
fáciles de interpretar y de pueden ser difíciles de utilitzar y
comprender. frustran al usuario

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 12 / 74

 http://www.grihotools.udl.cat/
Usabilidad mpiua/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”

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 13 / 74

 Usabilidad

EFECTIVIDAD

USABILIDAD

SATISFACCIÓN EFICIENCIA

direct & indirect mapping

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 14 / 74
¿Qué es la usabilidad?

Volvo S80 versus Citroën C6

53 botones!!
http://www.uselog.com/2006/10/dashb 38 para navegación y
oard-usability-comparing-volvo.html radioCD

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 15 / 74

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
medida en 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

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 16 / 74

 Usability 101: Introduction to Usability
by JAKOB NIELSEN (January 4, 2012)
http://www.nngroup.com/articles/usability-101-introduction-to-usability

• Qué: La usabilidad es un atributo de calidad que evalúa la

facilidad de uso de las interfaces de usuario. La palabra
"usabilidad" también se refiere a métodos para mejorar la
facilidad de uso durante el proceso de diseño.
• La usabilidad se define por 5 componentes de calidad:
• Capacidad de aprendizaje: ¿Qué tan fácil es para los usuarios
realizar tareas básicas la primera vez que encuentran el diseño?
• Eficiencia: una vez que los usuarios han aprendido el diseño, ¿con
qué rapidez pueden realizar las tareas?
• Memorabilidad: cuando los usuarios regresan al diseño después de
un período de no usarlo, ¿con qué facilidad pueden restablecer la
competencia?
• Errores: ¿Cuántos errores cometen los usuarios, qué tan graves son
estos errores y con qué facilidad pueden recuperarse de los errores?
• Satisfacción: ¿Qué tan agradable es usar el diseño?

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 17 / 74

 Ejemplos de MALA usabilidad
Tornos metro BCN Pulsadores
monitor

Etiquetas que
parecen botones

Confusión entre controles similares

Otros ejemplos:
http://hadonejob.com
www.baddesigns.com

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 18 / 74

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.

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 19 / 74

 Ejemplos de MALA usabilidad:
“el diablo está en los detalles” !!
 

NAAE 1 733114 05 5 or NAAE1733114055

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 20 / 74

Ejemplos MALA usabilidad:
http://www.radiotower.com

El menú no
indica
dónde
estamos !!

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 21 / 74

Usabilidad en términos de
calidad del software

[ISO/IEC 9126-1:2001(E)]

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 22 / 74

Usabilidad en términos de
calidad del software: ISO/IEC 25010:2011
Quality Model
System/Software
Quality In Use Product Quality

Freedom from
Effectiveness Efficiency Satisfaction Context coverage
risk

• Usefulness • Economic risk • Context

• Trust mitigation completeness
• Pleasure • Health and safety • Flexibility
• Comfort risk mitigation
• Environmental
risk mitigation

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.

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 23 / 74

Usabilidad en términos de
calidad del software: ISO/IEC 25010:2011
Quality Model
Quality In
Use System/Software Product Quality
Functional Performance
Compatibility Usability Reliability Security Maintainability Portability
Suitability efficiency

• 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).

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 24 / 74

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

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 25 / 74

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

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 26 / 74

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

https://www.interaction-
design.org/members/ima
gelibrary/zoom.html?g=L
21lbWJlcnMvaW1hZ2Vs
aWJyYXJ5L2ltYWdlcy93
aGF0X2lzX3VzYWJpbGl
0eS5qcGc~

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 27 / 74

Experiencia de usuario
User eXperience (UX)

“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

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 28 / 74

UX - Facetas
• No hay un consenso en cuanto a las facetas a considerar
en la experiencia de usuario
ADAPTABILIDAD

MULTICULTURALIDAD

ACCESIBILIDAD

USABILIDAD

COMUNICABILIDAD
EMOCIONES…

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 29 / 74

UX - Tipos de facetas
• Facetas transversales: son aquellas que deben ser aplicadas cuando
se aplique cualquier otro aspecto de cualquier otra faceta.
• Facetas paralelas: aquellas que pueden aplicarse de forma individual a
un sistema interactivo.

Facetas de la User eXperience

Multiculturalidad

Accesibilidad

Encontrable
Jugabilidad

Emotividad
Plasticidad
Usabilidad
Fiabilidad

Deseable

Útil
Comunicabilidad

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 30 / 74

Car UX
http://www.teslamotors.com/models/photo-gallery

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 31 / 74

 UX = UI ???

http://agbeat.com/tech-news/visualizing-the-differences-between-ux-and-ui
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 32 / 74
 UX is NOT UI

http://www.uxisnotui.com/downloads
/8x11.pdf

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 33 / 74

 The 4 legs of
Interaction (UI/UX) Design

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 34 / 74

 http://www.grihotools.udl.cat/
Accesibilidad mpiua/accessibilidad

• 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.

38 millones de europeos tienen alguna discapacidad

14.5% (10% moderada y 4,5% severa)

Fuente: EUROSTAT. Panel de hogares de la Unión
Europea

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 35 / 74

Accessibilidad en les TICs
http://www.youtube.com/watch?v=rLpRotz1Yck

http://www.vilaweb.tv/?video=4380 http://www.youtube.com/watch?v=2BhHwk9qSvI

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 36 / 74

Accesibilidad
• Las personas son diferentes entre sí
• Existen grupos de población con
limitaciones de distintos niveles
 Físicas  Permanentes
 Cognitivas  Temporales

• 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

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 37 / 74

Accesibilidad
• Regulado por las leyes
• Norma UNE EX 139802, eEurope, Plan de Acción InfoXXI,
Declaración de Madrid, ….
• Ley 34/2002, de 11 de julio, de servicios de la sociedad de la
información y de comercio electrónico (LSSICE)
• Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba
el Reglamento sobre las condiciones básicas para el acceso de
las personas con discapacidad a las tecnologías, productos y
servicios relacionados con la sociedad de la información y
medios de comunicación social.

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 38 / 74

Estándares http://www.w3.org

• Los estándares WEB son un conjunto de

recomendaciones ofrecidas por el W3C (World Wide Web
Consortium) y respaldado por otros organismos y
empresas internacionales sobre como crear e interpretar
la información web
• Más información: http://www.w3.org/standards

• Misión del W3C:

• encaminar la web hacia su máximo potencial, desarrollando
protocolos y pautes que aseguren su crecimiento futuro

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 39 / 74

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, ...)

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 40 / 74

W3C - Información de interés
• W3C Internacional: http://www.w3.org/
• Delegación española: http://www.w3c.es/

• Guía Breve de Accesibilidad Web:

http://www.w3c.es/Divulgacion/GuiasBreves/Accesibilidad

• Creando un Sitio Web Accesible:

http://www.w3.org/WAI/gettingstarted/Overview.html.es
• http://www.w3.org/WAI/References/QuickTips/qt.ca.htm

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO 41 / 74