1. fundamentos. usabilidad, accessibilitat, ux

Enginyeria del Software I

FUNDAMENTOS. UsabiliDAD, AccesibiliDAD, UX

Grau en Enginyeria Informtica

Interacci Persona-Ordinador

Toni Granollers

El Curso de Interaccin Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

IPO GEInformtica

1.- Fonaments. Usabilitat, Accessibilitat, UX

Toni Granollers.

1

Evolucin de las TICs

Mquina analtica

de Charles Babbage

(concebida entre 1822 y 1871)

Funcin

mquina de clculo de propsito general

Fundamentos. Usabilidad, Accesibilidad, UX - GEInformtica, IPO

2 / 74

IPO GEInformtica


Toni Granollers.

2

1967 episode of the CBS show "The 21st Century"

http://youtu.be/V6DSu3IfRlo


3 / 74

IPO GEInformtica


Toni Granollers.

3


ENIAC

Electronic Numerical Integrator and Computer

1945

El primer computador electrnico del mundo totalmente digital.

Construido, mediante tubos de vaco, para calcular las trayectorias del armamento.


4 / 74

IPO GEInformtica


Toni Granollers.

4


1950 1960 se sustituyen los tubos de vaco 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 dispona de:

monitor

teclado

ratn


5 / 74

IPO GEInformtica


Toni Granollers.

5

1975

1981

1984

1990

2001

Evolucin del Ordenador Personal (PC)



6 / 74

IPO GEInformtica

Formaci GFT. Introduccin general a la IPO [T. Granollers - 2012]

6



1844 se inaugur la primera lnea telegrfica.

mediados 1850 1870 se construyen los primeros aparatos de telfono.

siguen creciendo las necesidades de comunicacin (radio, televisin, etc.)

Finales 1960 principios 1970

emergen las redes de

computadoras.


7 / 74

IPO GEInformtica


Toni Granollers.

7


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.


8 / 74

IPO GEInformtica


Toni Granollers.

8


a la vez:

1990 Tim Berners-Lee desarroll un mtodo para crear y visualizar documentos con hipervnculos.

As naci la

World Wide Web

i los navegadores.


9 / 74

IPO GEInformtica


Toni Granollers.

9

1983: 400 computers on the #internet. Today: one billion + (plus smart phones!)

http://vimeo.com/album/3096607/video/110794988


10 / 74

IPO GEInformtica


Toni Granollers.

10

Los ltimos 35 40 aos


11 / 74

IPO GEInformtica


Toni Granollers.

11

Evolucin de las Tecnologas de la Informacin y de la Comunicacin


12 / 74

IPO GEInformtica


Toni Granollers.

12

INFORMACIN

DISPOSITIVOS

PERSONAS

DISPOSITIVOS



13 / 74

IPO GEInformtica


Toni Granollers.

13

INFORMACIN



14 / 74

IPO GEInformtica


Toni Granollers.

14


PERSONAS


15 / 74

IPO GEInformtica


Toni Granollers.

15


junto a la evolucin en la tecnologa

A finales de los 60 empieza la preocupacin por la relacin 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:

Usabilidad

Interaccin

Accesibilidad

Interfaces de Usuario

Factores Humanos


16 / 74

Evolucin (rpida) de la Web

De las App Web


17 / 74

17

IPO GEInformtica



18 / 74

18

IPO GEInformtica

Semntica de las conexiones de la informacin

Semntica de las conexiones sociales

Fuente: Radar Networks & Nova Spivack, 2007 http://www.radarnetworks.com



19 / 74



20 / 74

20

IPO GEInformtica

Usabilidad

Definicin coloquial [J. Preece, 1994]

Sistemas fciles de usar y

de aprender

Definicin formal [ISO 9241-11]

la medida en la que un producto se puede usar por determinados usuarios para conseguir objetivos especficos con efectividad, eficiencia y satisfaccin en un contexto de uso especificado

http://www.grihotools.udl.cat/mpiua/usabilidad


21 / 74



21

Provocacin.

Constantemente estamos utilizando sistemas que tienen el mismo problema que tiene esta caferea, y sin embargo NO NOS QUEJAMOS

IPO GEInformtica

Usabilidad

direct & indirect mapping


22 / 74

USABILIDAD

EFECTIVIDAD

EFICIENCIA

SATISFACCIN

Qu es la usabilidad?

Volvo S80 versus Citron C6

53 botones!!

38 para navegacin y radioCD

http://www.uselog.com/2006/10/dashboard-usability-comparing-volvo.html


23 / 74

23

Usabilidad qu es?

Efectividad: la precisin 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 ms 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 relacin con la precisin y plenitud con que los usuarios alcanzan los objetivos especificados.

Satisfaccin: ausencia de incomodidad y la actitud positiva en el uso del producto.

Se trata, pues, de un factor subjetivo

Por tanto, el ms complicado de medir


24 / 74

Usabilidad: fcil de aprender (learnability)


25 / 74

Dimensiones de la usabilidad

puede ser medida o evaluada por observacin del usuario mientras realiza tareas de interaccin y se puede medir mediante mtodos tradicionales

indica la usabilidad

percibida o satisfaccin de uso, y es difcil de entender y de medir

Usabilidad objetiva o inherente

Usabilidad subjetiva

o aparente


26 / 74

dos dimensiones de la usabilidad: usabilidad objetiva o inherente, y usabilidad subjetiva o aparente. La primera puede ser medida o evaluada por observacin del usuario mientras realiza tareas de interaccin (eficacia y eficiencia), y se puede medir mediante mtodos tradicionales. La usabilidad subjetiva, en cambio indica la usabilidad percibida o satisfaccin de uso, y es difcil de entender y de medir.

IPO GEInformtica


Toni Granollers.

26

EFECTIVIDAD

EFICIENCIA

SATISFACCIN

Usability 101: Introduction to Usabilityby JAKOB NIELSEN (January 4, 2012)

What: Usability is aquality attributethat 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 by5 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?

http://www.nngroup.com/articles/usability-101-introduction-to-usability


27 / 74

Usabilidad en Objetos cotidianos

Los objetos bien diseados son fciles de interpretar y de comprender.

Los objetos mal diseados pueden ser difciles de utilitzar y frustran al usuario

?


28 / 74

Ejemplos de MALA usabilidad

Otros ejemplos:

http://hadonejob.com

www.baddesigns.com

Etiquetas que parecen botones

Pulsadores monitor

Tornos metro BCN

Confusin entre controles similares


29 / 74

1


30 / 74

2


31 / 74

3

Escolliu un fitxer XML que compleixi

amb la QTI de l'IMS del vostre ordinador.


32 / 74


33 / 74

???


34 / 74

Ejemplos de MALA usabilidad: links

Los links no slo pasan desapercibidos entre el resto del texto si no que tienen exactamente el mismo aspecto que ste cuando se destaca algo en negrita.

El usuario cree que no hay links

Si descubre uno, creer que el resto de negritas tambin son links

Jakob Nielsen en sus Guas para la visualizacin de links, indica que estos deberan ser al menos coloreados y/o subrayados para ser facilmente identificables.


35 / 74

Ejemplos de MALA usabilidad: el diablo est en los detalles !!

NAAE 1 733114 05 5 or NAAE1733114055


36 / 74

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

El men no indica dnde estamos !!


37 / 74

Ejemplos en otros contextos

Buscar-ne ms


38 / 74

Usabilidad en trminos de calidad del software

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


39 / 74

Usabilidad en trminos de calidad del software: ISO/IEC 25010:2011

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.


40 / 74

Quality In Use

Satisfaction

Freedom from risk

Context coverage

Effectiveness

Efficiency

Quality Model

System/Software Product Quality

Usabilidad en trminos de calidad del software: ISO/IEC 25010:2011

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


41 / 74

Quality In Use

Quality Model

System/Software Product Quality

Functional Suitability

Performance efficiency

Compatibility

Usability

Reliability

Security

Maintainability

Portability

Beneficios de la usabilidad

Beneficios para desarrolladores

Reduccin de los costes de produccin

Reduccin del mantenimiento

Mejora de la calidad del producto

Menor soporte al

usuario/cliente


42 / 74

Beneficios de la usabilidad

Beneficios para los usuarios/clientes

Mayor facilidad de aprendizaje

Facilidad de uso

Trabajo ms rpido y eficiente

Menos prdida de tiempo

Mayor confianza en el producto

Mejor calidad de vida:

menos estrs y ms satisfaccin


43 / 74

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


44 / 74

nfasis en el comercio-e

the conduct of commerce in goods and services, with the assistance of telecommunications and telecommunications-based tools

Roger Clarke

http://www.cdwow.com


45 / 74


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


46 / 74


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]


47 / 74

Ejemplos de MALA usabilidad: el diablo est en los detalles !!

cul es el formato correcto?

Tras probar:

Q-7550001-G

Q-7550001G

Q7550001G

Q-7550001G

Tuve que enviar un correo-e

Si mi inters no hubiese sido MUY ELEVADO y por no convencerme las alternativas la empresa haba perdido esta venta l


48 / 74

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


49 / 74

Experiencia de usuario User eXperience (UX)

https://www.interaction-design.org/members/imagelibrary/zoom.html?g=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy93aGF0X2lzX3VzYWJpbGl0eS5qcGc~

http://www.grihotools.udl.cat/mpiua/user-experience


50 / 74

IPO GEInformtica


Toni Granollers.

50

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 sensacin 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


51 / 74

IPO GEInformtica


Toni Granollers.

51

UX - Facetas

No hay un consenso en cuanto a las facetas a considerar en la experiencia de usuario

Adaptabilidad

emociones

multiculturalidad

accesibilidad

usabilidad

comunicabilidad


52 / 74

52

Toni Granollers, Esteve Brugulat

User Experience HoneycombPeter Morville

UX

http://www.pageportfolio.net/2013/05/31/ux-services-i-provide


53 / 74

Imatge de: http://www.pageportfolio.net/2013/05/31/ux-services-i-provide/

IPO GEInformtica


Toni Granollers.

53

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

Fiabilidad

Usabilidad

Jugabilidad

Plasticidad

Accesibilidad

Emotividad

Deseable

Encontrable

til

Multiculturalidad

Comunicabilidad


54 / 74

DEPENDABILITY: In systems engineering, dependability is a measure of a system's availability, reliability, and its maintenance support.[1] This may also encompass mechanisms designed to increase and maintain the dependability of a system

la fiabilitats una mesura de la disponibilitat d'un sistema, fiabilitat, i el seu suport de manteniment

IPO GEInformtica


Toni Granollers, Esteve Brugulat

54

Car UX

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


55 / 74

IPO GEInformtica


Toni Granollers.

55

UX = UI ???

http://agbeat.com/tech-news/visualizing-the-differences-between-ux-and-ui


56 / 74

IPO GEInformtica


Toni Granollers.

56

UX is NOT UI

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


57 / 74

IPO GEInformtica


Toni Granollers.

57

The 4 legs of Interaction (UI/UX) Design


58 / 74

IPO GEInformtica


Toni Granollers.

58

UX design is about usability

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


59 / 74

De la T16 de http://www.slideshare.net/EvanSamek1/ux-design-myths?utm_source=slideshow&utm_content=Design&utm_medium=ssemail&utm_campaign=personalized_digest

IPO GEInformtica


Toni Granollers.

59

Accesibilidad

Capacidad de acceso y de interaccin en un sistema o aplicacin 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 Unin Europea

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


60 / 74

IPO GEInformtica


Toni Granollers.

60

Accessibilidad en les TICs

http://www.vilaweb.tv/?video=4380

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

http://www.youtube.com/watch?v=2BhHwk9qSvI


61 / 74

IPO GEInformtica


Toni Granollers.

61

Sitio web accesible


62 / 74

IPO GEInformtica


Toni Granollers.

62

Discapacidades en Europa

38 Mill Europeos tiene alguna discapacidad 14,5% de la poblacin (4,5% discapacidad SEVERA)


63 / 74

Sn pocs per s un mercat verge. A ms els serveis pblics els han dincloure per llei.

63

IPO GEInformtica


Las personas son diferentes entre s

Existen grupos de poblacin con

limitaciones de distintos niveles

Una Necesidad General

Personas de edad avanzada

Personas muy jvenes

Personas con dispositivos lentos o antiguos

Personas con dispositivos muy modernos

Personas con discapacidades temporales

Y las personas discapacitadas

Permanentes

Temporales

Fsicas

Cognitivas

Accesibilidad


64 / 74



64

OTRO COMPONENTE FUNDAMENTAL DE LAS APLICACIONES INTERACTIVAS

IPO GEInformtica

Regulado por las leyes

Norma UNE EX 139802, eEurope, Plan de Accin InfoXXI, Declaracin de Madrid, .

Ley 34/2002, de 11 de julio, de servicios de la sociedad de la informacin y de comercio electrnico (LSSICE)

Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones bsicas para el acceso de las personas con discapacidad a las tecnologas, productos y servicios relacionados con la sociedad de la informacin y medios de comunicacin social.

Accesibilidad


65 / 74



65

Regulado por Ley: Legislacin sobre Accesibilidad para la Sociedad de la Informacin

I Plan Nacional de Accesibilidad 2004-2012:

Marco estratgico de acciones para conseguir que los entornos, productos y servicios nuevos se realicen de forma accesible al mximo nmero de personas (Diseo para Todos) y que aquellos ya existentes se vayan adaptando convenientemente.

Espritu de la Ley: Por un nuevo paradigma, el Diseo para Todos, hacia la plena la igualdad de oportunidades.

Principios generales:

Cinco Objetivos: 5 Promover la accesibilidad

en las nuevas tecnologas

IPO GEInformtica

?

?

Internet hoy

?


66 / 74

IPO GEInformtica


Toni Granollers.

66

Sitio web accesible


67 / 74

IPO GEInformtica


Toni Granollers.

67

Estndares

Los estndares 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 informacin web

Ms informacin: http://www.w3.org/standards

Misin del W3C:

encaminar la web hacia su mximo potencial, desarrollando protocolos y pautes que aseguren su crecimiento futuro

http://www.w3.org


68 / 74

IPO GEInformtica


Toni Granollers.

68

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 evaluacin y de reparacin de la accesibilidad Web

Formacin y concienciacin en relacin del diseo accessible (design for all, ...)


69 / 74

69

WAI. Pautas WCAG

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) Triple (Nivel AAA)

http://www.w3.org/WAI/WCAG2-Conformance


70 / 74

IPO GEInformtica


Toni Granollers.

70

Accesibilidad TIC. (algunas) Entidades clave

http://www.w3.org/WAI

https://ec.europa.eu/digital-agenda/en/web-accessibility


71 / 74

IPO GEInformtica


Toni Granollers.

71

W3C - Informacin de inters

W3C Internacional: http://www.w3.org/

Delegacin espaola: http://www.w3c.es/

Gua 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


72 / 74

IPO GEInformtica



72

Diari Segre, 27-2-2012


73 / 74

El Curso de Interaccin Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.


74 / 74

IPO GEInformtica

3.-Diseo Centrado en el Usuario. MPIu+a

Toni Granollers.

74

1. fundamentos. usabilidad, accessibilitat, ux

Education