FUNDAMENTOS. USABILIDAD, ACCESIBILIDAD, UX

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
Máquina analítica
de Charles Babbage
(concebida entre 1822
y 1871)
Función
• máquina de cálculo
de propósito general
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
2 / 74
1967 episode of the CBS
show "The 21st Century"
http://youtu.be/V6DSu3IfRlo
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
3 / 74
Evolución de las TICs
ENIAC
Electronic Numerical Integrator and Computer
1945
El primer computador
electrónico del mundo
totalmente digital.
Construido, mediante
tubos de vacío, para
calcular las trayectorias
del armamento.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
4 / 74
Evolución de las TICs
• 1950 – 1960 se sustituyen los tubos de vacío por
transistores.
• Principios de los 70: Intel Corporation desarrolló
el primer microprocesador, el 4004.
• Mediados de los 70: aparece el primer ordenador
personal el Altair 8800.
No disponía de:
• monitor
• teclado
• ratón
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
5 / 74
Evolución de las TICs
Evolución del
Ordenador
Personal (PC)
2001
1990
1984
1975
1981
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
6 / 74
Evolución de las TICs
• 1844 se inauguró la primera línea telegráfica.
• mediados 1850 – 1870 se construyen los
primeros aparatos de teléfono.
• …siguen creciendo las necesidades de
comunicación (radio, televisión, etc.)
• Finales 1960 principios 1970
emergen las redes de
computadoras.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
7 / 74
Evolución de las TICs
paralelamente:
• 1969 se construyó ARPANET.
• Durante los 70 y los 80 emergieron otras redes
como ARPANET que conectaban universidades y
mediante estas conexiones apareció Internet.
• Primeros de los 90
Internet empieza a estar
al alcance de todos.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
8 / 74
Evolución de las TICs
a la vez:
• 1990 Tim Berners-Lee desarrolló un método para
crear y visualizar documentos con hipervínculos.
 Así nació la
World Wide Web
i los navegadores.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
9 / 74
1983: 400 computers on the #internet.
Today: one billion + (plus smart phones!)
http://vimeo.com/album/3096607/video/110794988
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
10 / 74
Los últimos 35 – 40 años…
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
11 / 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
12 / 74
Evolución de las Tecnologías de la
Información y de la Comunicación
DISPOSITIVOS
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
13 / 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
14 / 74
Evolución de las Tecnologías de la
Información y de la Comunicación
PERSONAS
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
15 / 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
16 / 74
Evolución (rápida) de la Web
De las App Web…
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
17 / 74
Evolución (rápida) de la Web
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
18 / 74
Evolución (rápida) de la Web
Semántica de las conexiones de la información
Fuente: Radar Networks & Nova Spivack, 2007 – http://www.radarnetworks.com
Semántica de las conexiones sociales
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
19 / 74
Evolución (rápida) de la Web
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
20 / 74
Usabilidad
http://www.grihotools.udl.cat/
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
21 / 74
Usabilidad
EFECTIVIDAD
USABILIDAD
SATISFACCIÓN
EFICIENCIA
direct & indirect mapping
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
22 / 74
¿Qué es la usabilidad?
Volvo S80 versus Citroën C6
http://www.uselog.com/2006/10/dashb
oard-usability-comparing-volvo.html
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
53 botones!!
38 para navegación y radioCD
23 / 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
24 / 74
Usabilidad: fácil de aprender (learnability)
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
25 / 74
Dimensiones de la usabilidad
Usabilidad objetiva o
inherente
puede ser medida o
evaluada por
observación del
usuario mientras
realiza tareas de
interacción y se
puede medir
mediante métodos
tradicionales
EFECTIVIDAD
Usabilidad subjetiva
o aparente
indica la
usabilidad
percibida o
satisfacción de
uso, y es difícil
de entender y
de medir
SATISFACCIÓN
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
EFICIENCIA
26 / 74
Usability 101: Introduction to Usability
by JAKOB NIELSEN (January 4, 2012)
http://www.nngroup.com/articles/usability-101-introduction-to-usability
• 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 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, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
27 / 74
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
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
28 / 74
Ejemplos de MALA usabilidad
Tornos metro BCN
Pulsadores
monitor
Etiquetas que
parecen botones
Otros ejemplos:
http://hadonejob.com
www.baddesigns.com
Confusión entre controles similares
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
29 / 74
1
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
30 / 74
2
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
31 / 74
3
Escolliu un fitxer XML que compleixi
amb la QTI de l'IMS del vostre ordinador.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
32 / 74
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
33 / 74
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
34 / 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
35 / 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
36 / 74
Ejemplos MALA usabilidad:
http://www.radiotower.com
El menú no
indica
dónde
estamos !!
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
37 / 74
Ejemplos en otros contextos
Buscar-ne més
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
38 / 74
Usabilidad en términos de
calidad del software
[ISO/IEC 9126-1:2001(E)]
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
39 / 74
Usabilidad en términos de
calidad del software: ISO/IEC 25010:2011
Quality Model
Quality In Use
Effectiveness
Efficiency
Satisfaction
•
•
•
•
Usefulness
Trust
Pleasure
Comfort
Freedom from
risk
System/Software
Product Quality
Context coverage
• Economic risk
• Context
mitigation
completeness
• Health and safety • Flexibility
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
40 / 74
Usabilidad en términos de
calidad del software: ISO/IEC 25010:2011
Quality Model
System/Software Product Quality
Quality In
Use
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).
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
41 / 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
42 / 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
43 / 74
Dia Mundial de la Usabilidad
Every year
• +200 events
http://www.worldusabilityday.org
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
• +180 cities
• +43 countries
• +40,000 people
• Thousands of online participants
• Extensive worldwide media
coverage
44 / 74
Énfasis en el comercio-e
http://www.cdwow.com
“the conduct of commerce in goods
and services, with the assistance of
telecommunications and
telecommunications-based tools”
Roger Clarke
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
45 / 74
Énfasis en el comercio-e
• Primary interface to customers
• Users expect instant gratification
• Users experience usability before
they are committed to buying
• Expectations arise from best site
across industries
• Competitors are “just a mouse click away”
• Value of usability for the time-constrained information
seeker
• Usability as the critical success factor for Web projects
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
46 / 74
Énfasis en el comercio-e
• E-Commerce Web site = electronic storefront
• Web site user interface = electronic clerk
• Online shoppers can afford to be less tolerant with an inept
electronic clerk
• E-Commerce Web 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]
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
47 / 74
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
Fundamentos.
Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
l
48 / 74
No confundir usabilidad con otros
atributos de la interfaz de usuario (UI)
The awards for design, creativity and innovation on the Internet
http://www.awwwards.com
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
49 / 74
Experiencia de usuario
User eXperience (UX)
http://www.grihotools.udl.cat/
mpiua/user-experience
https://www.interactiondesign.org/members/ima
gelibrary/zoom.html?g=L
21lbWJlcnMvaW1hZ2Vs
aWJyYXJ5L2ltYWdlcy93
aGF0X2lzX3VzYWJpbGl
0eS5qcGc~
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
50 / 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
51 / 74
UX - Facetas
• No hay un consenso en cuanto a las facetas a considerar
en la experiencia de usuario
ADAPTABILIDAD
MULTICULTURALIDAD
ACCESIBILIDAD
USABILIDAD
COMUNICABILIDAD
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
EMOCIONES…
52 / 74
User Experience Honeycomb
Peter Morville
http://www.pageportfolio.net/2013/05/31/ux-services-i-provide
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
53 / 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
Útil
Encontrable
Deseable
Emotividad
Accesibilidad
Plasticidad
Jugabilidad
Usabilidad
Fiabilidad
Multiculturalidad
Comunicabilidad
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
54 / 74
Car UX
http://www.teslamotors.com/models/photo-gallery
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
55 / 74
UX = UI ???
http://agbeat.com/tech-news/visualizing-the-differences-between-ux-and-ui
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
56 / 74
UX is NOT UI
http://www.uxisnotui.com/downloads
/8x11.pdf
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
57 / 74
The 4 legs of
Interaction (UI/UX) Design
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
58 / 74
UX design is about usability
UI design
submit
Usbility design
vs
submit
Function:
it works
cancel
submit
UX design
Yes, complete my order
No, thanks
vs
submit
cancel
Action: it works WELL
Emotion: it works well and
makes me say Wow!
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
59 / 74
Accesibilidad
http://www.grihotools.udl.cat/
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
60 / 74
Accessibilidad en les TICs
http://www.youtube.com/watch?v=rLpRotz1Yck
http://www.vilaweb.tv/?video=4380
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
http://www.youtube.com/watch?v=2BhHwk9qSvI
61 / 74
Sitio web accesible
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
62 / 74
Discapacidades en Europa
38 Mill Europeos tiene alguna discapacidad  14,5% de la población (4,5% discapacidad SEVERA)
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
63 / 74
Accesibilidad
• Las personas son diferentes entre sí
• Existen grupos de población con
limitaciones de distintos niveles


Físicas
Cognitivas


Permanentes
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
64 / 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
65 / 74
Internet hoy
?
?
?
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
66 / 74
Sitio web accesible
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
67 / 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
68 / 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
69 / 74
WAI. Pautas WCAG
http://www.w3.org/WAI/WCAG2-Conformance
• WCAG
(Web Content Accessibility 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)
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
Triple (Nivel AAA)
70 / 74
Accesibilidad TIC.
(algunas) Entidades clave
https://ec.europa.eu/digital-agenda/en/web-accessibility
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
http://www.w3.org/WAI
71 / 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
72 / 74
Diari Segre, 27-2-2012
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
73 / 74
El Curso de Interacción Persona-Ordenador ha sido realizado por Toni
Granollers bajo la licencia Creative Commons ReconocimientoNoComercial 4.0 Internacional License.
Fundamentos. Usabilidad, Accesibilidad, UX - GEInformàtica, IPO
74 / 74