3. DCU-MPIu+a

DISEÑO CENTRADO EN EL USUARIO (DCU).

EL MODELO MPIu+aGrau en Enginyeria InformàticaInteracció Persona-Ordinador

Toni GranollersEl Curso de Interacción Persona-Ordenador ha sido realizado

por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

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

http://creativecommons.org/licenses/by-nc/4.0/







Usabilidad

• Los diseñadores y/o programadores de aplicaciones NO

PODEMOS DECIDIR POR LOS USUARIOS !!!

DISEÑO CENTRADO en el

USUARIO

Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 2 / 71

Metodología de Trabajo. Diseño Centrado en el Usuario (DCU)

• Se invierte mucho

tiempos/energía/recursos

en la tecnología ...

y muy poco en las personasque han de utilizarla (los usuarios)

Los diseñadores y/o programadores de aplicaciones NO PODEMOS DECIDIR POR LOS USUARIOS !!!


Metodología de Trabajo. Diseño Centrado en el Usuario

DC en la TECNOLOGÍA (DCT)

• Enfoque en la aplicación y el desarrollo• Todo gira en torno a la tecnología• Se busca la manera más fácil de

implementar una solución• Diseño basado en la modelización• Sistemático, procesos bien

definidos• Diseño basado en metodologías de

Ingeniería del Software• Revisión del uso a posteriori y

habitualmente revisado solo por “tecnólogos”

DC en el USUARIO (DCU)

• Enfoque en los usuarios: en la experiencia y el grado de satisfacción del usuario• Basado en la opinión del usuario• Implicación substancial del usuario:

• Estudios de usuarios• Diseño participativo• Respuesta del usuario• Pruebas con usuarios

• Se diseñan iterativamente distintos prototipos

• Procesos muy variables e informales• Diseño basado en la Ingeniería de la

Usabilidad


Estandarización del Diseño centrado en el usuario

• marco teórico para el desarrollo de actividades centradas en el

usuario que puede ser adaptado a diversos ambientes de

desarrollo

• se concentra en el proceso de desarrollo de sistemas interactivos

ISO 13407: Human-centred design processes for interactive systems (1999)http://www.iso.ch

Atención, implicar al usuario en el diseño no es lo mismo que diseñar

pensando en el usuario!


http://www.iso.ch/

http://www.iso.ch/

• DCU permite producir un software que:• Es más fácil de usar y entender lo que implica una

reducción de los costes de entrenamiento• Mejora la calidad de vida de los usuarios ya que reduce el

estrés y además incrementa la satisfacción• Incrementa significativamente la productividad y eficacia

operacional de los usuarios individuales y por lo tanto los de la organización

• El proceso promueve comunicación entre desarrolladores y usuarios. Esto permite que se identifiquen problemas en un estado en el cual es aún barato y posible hacer cambios

DCU. Ventajas


DCU. Posibles problemas

• Es posible que se piense que DCU complica más el

trabajo

• incluir a más personas en el equipo de trabajo … usuarios y

stakeholders … que además, suelen sernos “ajenos”

• Los usuarios no siempre ven con buenos ojos el implantar un

nuevo orden de cosas ya que hay una inercia por conservar el

sistema que se pretende cambiar o implantar

• Hacer refinamientos iterativos toma tiempo y pude ser

percibido como una pérdida de tiempoDiseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 7 / 71

1. Inclusión de los usuarios activamente• La extensión de cuánto se han de involucrar los usuarios

depende en la naturaleza de las actividades de diseño

• Lo más efectivo es usar personas que tengan un verdadero conocimiento y necesidad de trabajar o usar la aplicación

• Esto también ayudará a la aceptación del producto final ya que los usuarios finales se pueden sentir comprometidos.

• Los usuarios sentirán que el sistema fue diseñado tomando en cuenta su opinión y no que ha sido impuesto

DCU. Principios más importantes


2. Iteración de soluciones potenciales• Un diseño iterativo implica el seguimiento del feedback

de los usuarios. Es necesario incorporar incrementalmente soluciones de diseño encontrada

• Las soluciones pueden ser presentada desde el uso de esbozos, maquetas, o prototipos de gran fidelidad ejecutados en computadoras

• El usuario debe tratar de realizar tareas reales (factibles) usando el diseño que presenta soluciones potenciales y su feedback debe ser usado para desarrollar (o modificar) un nuevo diseño más adelante




3. Equipos de diseño

multidisciplinarios

• DCU es un proceso cooperativo en el cual hay que involucrar varias partes. Cada

una de las partes posee conocimientos y experiencias que ofrecer. Diferentes

perspectivas

• El grupo debe estar conformado por representes de todos los sectores que serán

afectados por el sistema

• Deben participar: gerentes, especialistas de usabilidad, personal administrativo y

de entrenamiento, ingenieros de software, representantes para asegurar la

calidad, y, claro, los usuarios finales del sistema (recordar: implicados o

stakeholders)


DCU. Actividades claves (ISO 13407:1999)


DCUActividades claves

1. Entender y especificar el contexto de uso

• Características relevantes de los usuarios

• Conocimientos, habilidades, experiencia, educación, entrenamiento, atributos

físicos, hábitos, capacidades motor-sensoriales.

• Identificar si hay grupos distintivos (ejemplo Expertos vs. Novatos)

• Conocer la tarea que se realiza

• Objetivos, frecuencia, y duración de la misma

• El ambiente en que el usuario usará el sistema

• Aspectos organizacionales (estructura del grupo, etc.), técnicos (hardware, red,

etc.), y físicos (temperatura, humedad, aspectos de salud y seguridad, etc.)



2. Especificar los requisitos del usuario

• Identificar el personal y usuarios relevantes en el diseño

• Proveer una propuesta clara de los objetivos

• Establecer puntos de referencias con los cuales se pueda comparar

el diseño a probar

• Evidencias que los requerimientos han sido aceptados por sus

representantes

• Estar en conocimientos de requerimientos legales, por ejemplo

seguridad laboral



3. Producir soluciones de diseño

• Crear maquetas simples al inicio

• La solución inicial pude ser basada en experiencias previas, estándares ya

reconocidos, o guías de estilo

• Lo más importante es simular la solución que presenta el diseño

• El realismo es un aspecto importante

• La creación de prototipos propicia la comunicación entre desarrolladores y usuarios

• Usar un prototipo sencillo permite probar más alternativas antes de empezar a

codificar

• Los cambios a realizar son oportunos y de posible realización



4. Contrastar los diseños con los requisitos

• Crear un plan de evaluación

• Reportar los resultados de la evaluación y las recomendaciones de

cambio

• Iterar esta actividad hasta que el objetivo del diseño (y usabilidad)

sean logrados

• Llevar un seguimiento de los cambios, del mantenimiento, y de la

continuidad del producto


Ingeniería de la usabilidad

• Metodología que proporciona la manera de proceder

organizadamente para incluir la usabilidad en el

desarrollo de aplicaciones interactivas

1993 1999 2002 2003


Usability Engineering[J. Nielsen, 1993]

Ingeniería de la Usabilidad

DUTCH Model[Gerrit van der Veer,

1996]

Design web sites that work: Usability for the Web[T. Brink et. al., 2002]


MPIu+a

MPIu+a: Modelo de Proceso de la Ingeniería de la usabilidad y accesibilidad

www.grihotools.udl.cat/mpiua


http://www.grihohcitools.udl.cat/mpiua

El modelo MPIu+a …

• es tecnológicamente independiente,

• es aplicable a todo tipo de proyectos, independientemente de su clase y envergadura,

• se adapta a los diferentes modelos mentales de los integrantes de los equipos multidisciplinares,

• es muy simple,

• sigue los principios del Diseño Centrado en el Usuario,

• fomenta el desarrollo de sistemas evolutivo: iterativo e incremental,

• integra la metodología y los formalismos necesarios de la Ingeniería del Software con la de la Usabilidad, y la Accesibilidad cómo componente fundamental de todo el proceso, y

• es consistente con los estándares de calidad relacionados.

www.grihotools.udl.cat/mpiua



MPIu+a

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


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

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

MPIu+a. Características

• Simple y flexible

• Tres pilares

• Organización conceptual

• El usuario

• Iteratividad

• Adaptado para

equipos multidisciplinares




• Tres pilares


• El usuario

• Iteratividad

• Adaptado para


1 2 3

Ingenieríadel Software



• Análisis Etnográfico• Observación

contextual• Análisis de Implicados (Stakeholders)• Clasificar a los usuarios

• Perfiles de usuarios• Roles

• Identificación de Objetos• Plataforma (posibilidades y restricciones)• Objetivos

• Funcionales• Usabilidad• Accesibilidad


• Tres pilares


• El usuario

• Iteratividad

• Adaptado para




“diseño contextual”

• Análisis de Tareas• Modelo conceptual

• Modelos de diálogo• Estilo

• Estándares generales• Metáforas• Colores• Estándares

particulares• Diseño detallado


• Tres pilares


• El usuario

• Iteratividad

• Adaptado para



La AI en las cosas cotidianas

¿Qué hace que esto ...

... sea diferente de esto?


Arquitectura de la Información (AI)Peter Morville's Iceberg Diagram

• La información es una fuente de conocimiento. Pero, si no está organizada,

procesada y disponible para las personas en un formato que les permita tomar

decisiones, más que un beneficio es un estorbo.

Usuarios

Arquitectosde laInformación


Arquitectura de la InformaciónModelos organización de contenidos


Flat vs. Deep Website Hierarchies

• Information can be organized in either flat or deep hierarchies; both have

their advantages and pitfalls.

• Although website visitors never see this type of visualization, the shape

of the hierarchy has a huge impact on the end user's experience:

• Content is more discoverable when it's not buried under multiple intervening layers

BUT deep hierarchies are more difficult to use.

http://www.nngroup.com/articles/flat-vs-deep-hierarchy




AI. Card Sorting


AI. Representación


Design guidelineshttps://developer.apple.com/watch/human-interface-guidelines/specifications


https://developer.apple.com/watch/human-interface-guidelines/specifications

https://developer.apple.com/watch/human-interface-guidelines/specifications

Design guidelines https://developer.android.com/design/wear/principles.htmlhttps://developer.android.com/design/wear/patterns.html


https://developer.android.com/design/wear/principles.html

https://developer.android.com/design/wear/principles.html

https://developer.android.com/design/wear/patterns.html

https://developer.android.com/design/wear/patterns.html

Methafors

http://webdesign.tutsplus.com/articles/design-theory/using-metaphors-in-web-design/




Radio Buttons - Mutually Exclusive Choices

Floppy Disk - Save

Manila Folder

http://www.hanselman.com/blog/TheFloppyDiskMeansSaveAnd14OtherOldPeopleIconsThatDontMakeSenseAnymore.aspxDiseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 35 / 71

http://www.hanselman.com/blog/TheFloppyDiskMeansSaveAnd14OtherOldPeopleIconsThatDontMakeSenseAnymore.aspx




9 Rules to Make Your Icons Clear and Intuitive

1. Always Label Your Icons, Unless Space is Limited

2. Always Represent Both the Icon Action and Object

3. Always Group Similar Icons Together

4. Always Keep the Icon Order and Placement Consistent

5. Always Give Your Icons a Common Visual Motif

6. Avoid Using Icons for Abstract Actions

7. Avoid Using Icon Images That are Too Metaphoric

8. Avoid Giving Your Icons Too Much Specific Detail

9. Avoid Using 3D Perspectives and Heavy Drop Shadows on Small Icons

http://uxmovement.com/buttons/9-rules-to-make-your-icons-clear-and-intuitive


http://uxmovement.com/buttons/9-rules-to-make-your-icons-clear-and-intuitive

Methafors

http://www.kare.com/portfolio/03_apple_macicons.html?utm_source=buffer&utm_campaign=Buffer&utm_content=buffer5a4ce&utm_medium=facebook





Methafors - Skeuomorphism

https://creativemarket.com/Adrien/516-Braun-UI

5 Confusing Icons and Their History

The share icon

http://ergonomicsindesign.com/2015/02/confusing-symbols-around-us








MPIu+a. CaracterísticasImplementación

• Codificación• Test unitario• Integración• Test de integración



• Entregables• Producto de software• Tests unitarios• Resultados de los tests unitarios• Test de integración para

funcionalidades• Resultados del test de integración para

funcionalidades• Casos de test a nivel de sistema

• Resultados• Producto de software (CCC)• Tests unitarios y resultados• Test de integración para

funcionalidades y resultados• Documentación del producto• Descripción de los casos de test a

nivel de sistema (CCC)



• WEB:• Escribir para la web

• El texto se ha de redactar de tal manera que soporte las tareas y los objetivos del usuario y se adapta a la audiencia prevista

• HTML, CSS, JQuery, PHP, …

• Colores de los vínculos• Posible problema de

inconsistencia• MARCOS NO

• rompen el modelo unificado de la web


MPIu+a. Características Lanzamiento

• Test de Sistema• objetivo: Realiza una batería

de pruebas completa del sistema para tener información fiable de que el software cumple los requerimientos de prestaciones y funcionales pedidos

• Despliegue• objetivo: Comprobar que el

producto final refleja perfectamente el producto base



• Test de Sistema• Entregables

• Resultados del test del sistema• Informe del test del sistema• Documento de diseño del

software actualizado• Producto

• Resultados• Esta fase se cumple cuando el

producto de software ha pasado todos los casos de test del sistema y el documento de diseño de software es actualizado



• Despliegue• Entregables

• La salida de esta fase es el producto preparado para entregar al cliente

• Resultados• La fase está completada al

entregar el producto



• Simple y flexible • Tres pilares• Organización conceptual• El usuario• Iteratividad• Adaptado para


“prototipado contextual”

• Bocetos o esbozos• Storyboards• Prototipos de Papel• Maquetas• Maquetas digitales• Storyboard Navegacional• Vídeos• Escenarios

• Lenguaje natural• Storyboards• Vídeos• Casos de Uso UML

• Prototipos software


Prototipado ….

Prototipos de Papel


www.paperprototyping.com

http://blogs.msdn.com/b/jensenh/archive/2006/01/06/510069.aspx

we continually iterate and improve based on our usability feedback loop



http://www.paperprototyping.com/


Prototipado ….

escenarios

storyboards


Prototipado ….

Maquetas

Maquetas Digitales


Prototipado ….

Prototipos software


Prototipado ….

Storyboard Navegacional(wireframes)


Prototipado ….

Video prototyping

Metáforas

Casos de Uso UML


Prototipado Iteratividad y Evolutivo

Fail soon, fail often, fail cheap !!!


Prototipado Iteratividad y Evolutivo





•Inspección• Heuristica• Recorrido Cognitivo• Recorrido de Usabilidad

Plural• Recorrido Cognitivo con

Usuarios• Estándares

•Indagación• Observación de Campo• Grupo de Discusión

Dirigido (Focus Group)• Entrevistas• Cuestionarios• Grabación del Uso

(logging)•Test

• Medida de Prestaciones• Pensando en Voz Alta

(Thinking Aloud)• Interacción Constructiva• Test Retrospectivo• Método del Conductor• Ordenación de Tarjetas

(card sorting)


Proyecto: WEB de Els Infants de la Paeria de Lleida evaluador:

4. Control y libertad para el usuario

Sub heurísticosImpacto Frecuencia Persistencia

a) Es posible deshacer una acción siempre que sea una operación funcional y operativa. 3 MEDIA

b) En caso de un proceso de diversos pasos, es posible volver a pasos anteriores del proceso para modificarlos. 3 MEDIA

c) Existe una salida de la página, del proceso o de la estructura de información mediante acciones tipo "Desconectar" o "Cancelar". 1

d) Se inician de manera automática acciones que el usuario no ha solicitado explícitamente. 0

e) Se utilizan animaciones no controladas por el usuario. 1f) El scroll no ocupa más de dos pantallas. 0

g) Es posible guardar información. 1h) Es posible imprimir la información sin perder información.i) Existe un vínculo que permite volver al inicio de la aplicación. 0j) Es posible aumentar y disminuir el tamaño de la letra. 1 ALTA

k) El sistema se visualiza perfectamente utilizando diferentes resoluciones de pantalla. 0

l) La interfaz no introduce tecnologías que requieren versiones actualizadas de elementos externos (navegadores, plugs-ins, DLL's,…). 1

notas del evaluador:

a) cuando pulsas en la opción de enviar no hay la posibilidad de cancelar. Lo envia y ja está.b) cuando pulsas en la opción de enviar no hay la posibilidad de cancelar. Lo envia y ja está.c)d)e) si, en el banner informativof)

g)h) cuando he impreso toda la banda inferior se ha girado!!i)j)

k)l) Si necesita el plug-in del Macromedia Flash, pero es muy habitual.

Los usuarios eligen a veces funciones del sistema por error y necesitan a menudo una salida de emergencia claramente marcada, esto es, salir del estado indeseado sin tener que pasar por un diálogo extendido. Es importante disponer de deshacer y rehacer

Marta Gonzalez

Evaluando ….

Thinking Aloud

Heurística


Evaluando ….

Accessibilidad

Focus Group


Evaluando ….

Accessibilidad


Evaluando ….

Análisis de logs


Test de Usabilidad

• Proceso que permite aprender de los usuarios el grado de

usabilidad de un sistema informático observandolos

mientras lo utilizan.

BBC News - How Google fine tunes its search enginehttp://news.bbc.co.uk/2/hi/programmes/click_online/9751991.stm


http://news.bbc.co.uk/2/hi/programmes/click_online/9751991.stm



MPIu+a. Características.Iteratividad





DistintosModelosMentales


http://visual.ly/disciplines-user-experience-design




UCD example

• Discovery Results

• Understanding of the business goals and

requirements

• Definition of the user personas and profiles

• Description of the context of use of the

functionality required

• Understanding of the user's goals

• Understanding of the user's workflow and

task flows

• Steps:

• Stakeholder interviews

• Creation of user personas and profiles

• Setting goals and task flows

• Establishing business and user

requirementshttp://www.oracle.com/webfolder/ux/applications/uxd/design.html


http://www.oracle.com/webfolder/ux/applications/uxd/design.html


UCD exampleSteps for Design1.Concept Design2.Wireframes3.Design Specification4.Visual Design5.Validation


• Detailed UI wireframes

• User validation• Specifications

• Choose users/tasks/workflows to validate

• Recruit test subjects (users)• Write test script• Conduct tests• Analyze results• Document design

recommendations• Modify designs based on

feedbackDiseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 69 / 71



The central premise of UCD is that the best designed products and services result from UNDERSTANDING the needs of the people who will use them

http://visual.ly/user-centred-design




Bibliografia• Lorés,J. Introducción a la Interacción Persona-Ordenador. AIPO (2002)

• Brinck, Tom (2002). Usability for the Web. Morgan-Kaufman

• Powell,, Thomas (1998). Web Site Engineering. Prentice Hall.

• Nielsen, J : Usabilidad diseños de sitios WEB. Prentice Hall, 2000.

• Krug, S., No me hagas pensar (2001)

• Granollers, T. (2004). MPIu+a. Una metodología que integra la Ingeniería del Software, la Interacción Persona-Ordenador y la Accesibilidad en el contexto de equipos de desarrollo multidisciplinares. Universitat de Lleida, juliol 2004.

http://jjg.net/elements

www.grihohcitools.udl.cat/mpiua


http://jjg.net/elements

http://www.amazon.com/o/ASIN/0735712026/ref=nosim/jjgnet-20/


3. DCU-MPIu+a

Education

Transcript of 3. DCU-MPIu+a