Taller

Interacción Hombre Computador

Objetivo del Taller
 Aplicar la Modelo de Proceso de la Ingeniería de la Usabilidad
y de la Accesibilidad a un proyecto seleccionado por el grupo
para lograr:
 El análisis de requisitos
 Diseño
 Implementación del Prototipo
 Evaluación del prototipo

Ing. Patricia Vigo Pereyra 2

Forma de trabajo
 Conformar grupos de 5 estudiantes.
 Seleccionar una empresa y dentro de esa empresa seleccionar
un proceso para ser analizado.
 Todas las semanas se expondrán los avances de la aplicación
del la metodología, conforme a las indicaciones dadas por el
docente.

Ing. Patricia Vigo Pereyra 3

Ing. de Usabilidad y Accesibilidad
 La Ingeniería de la Usabilidad y de la Accesibilidad busca:
 Conseguir aplicaciones que cumplan con los objetivos
funcionales para las que han sido propuestas y
desarrolladas, y
 Conseguir, que estas aplicaciones cumplan con todos los
principios que permiten calificar a las mismas como
“usables” y/o “accesibles” para todas las personas.

Ing. Patricia Vigo Pereyra 4

Características
 Se basa en la Ingeniería del Software (IS) y, la disciplina de la
Interacción Hombre Computador, que contribuye con toda una
sólida base de conocimiento y un conjunto de técnicas y
experiencias conocidas para el diseño de interfaces centradas
en sus usuarios.
 No especifica ni el uso de un determinado lenguaje de
programación, ni ninguna tecnología específica, ni ningún
factor que pueda determinar la aplicación, sino todo lo
contrario, está pensado para todo tipo de aplicaciones y
tecnologías –actuales y futuras–. En definitiva, es
independiente de los dispositivos y la tecnología.

Ing. Patricia Vigo Pereyra 5

Usabilidad en Sistemas Interactivos
 Los factores principales que deben considerarse al hablar de
usabilidad son la facilidad de aprendizaje, la efectividad de
uso y la satisfacción con que las personas son capaces de
realizar sus tareas gracias al uso del producto con el que está
trabajando.
 El grado de usabilidad de un sistema interactivo es un aspecto
directamente relacionado con la interfaz de usuario, que
demanda aproximadamente el 50% del código, sin dedicarse
tiempo de diseño en la misma proporción.

Ing. Patricia Vigo Pereyra 6

Usabilidad en sitios Web
 El perfil de los usuarios de las aplicaciones informáticas ha
cambiado mucho desde la aparición de Internet; la inmediatez
y globalización hacen que el perfil genérico del usuario de un
sitio web sea diferente: existe una gran diversidad de
conocimientos, necesidades y formas de acceder a los
servicios.
 El conseguir que los internautas se conviertan clientes on-line
dependerá directamente de la facilidad de uso, es decir, de la
usabilidad del sitio Web.
 Para ello el diseño de las páginas, sus funciones, mensajes y
contenidos deben estar diseñados e implantados para que lo
pueda usar cualquier persona.
Ing. Patricia Vigo Pereyra 7
Problemas de Usabilidad
 Problemas de navegación: Es usual preguntarnos ¿dónde estoy
ahora?, ¿cómo he llegado aquí? o ¿qué debo hacer para...?
Todo ello se agrava cuando hay ambigüedad en la
comprensión de los enlaces o no se siguen estándares en los
enlaces.
 Deben tenerse en cuenta aspectos importantes acerca de la
memoria humana. Si los usuarios tienen que recordar un
elevado número de ítems seguro que alguno de ellos se
perderá, agravándose si además deben recordar ciertos ítems
de una página a otra.
 Contenidos pobres, la lentitud en las descargas, los enlaces
rotos, las opciones y menús confusos, el abuso de ventanas
emergentes, la “moda deIng.laPatricia
letra Vigo muy
Pereyra pequeña”, etc. 8
Accesibilidad
 Las capacidades y aptitudes de todas las personas difieren de
unas a otras. Existen grupos de población que tienen alguna
limitación funcional que les impide acceder a facilidades que
desearían, deberían o tienen el derecho de acceder, por
ejemplo: personas con baja o nula visión y/o audición, con
discapacidades motrices o reducidos niveles de comprensión.
 Es necesario evitar diseñar atendiendo a características de
grupos de población mayoritarios, imponiendo barreras que
podrían ser evitadas prestando atención a las limitaciones de
estos.
 En un mundo ideal todas las interfaces de usuario deberían
acomodarse a esas diferencias de tal modo que cualquier
persona fuera capaz de utilizarlas sin problemas.
Ing. Patricia Vigo Pereyra 9
Etapas
Usuario

Análisis de
Requisitos

Prototipado
Diseño
Evaluación

Implementación

Lanzamiento
Ing. Patricia Vigo Pereyra 10
Usuario
 Como la Ingeniería de Usabilidad y Accesibilidad es un
proceso de diseño centrado en el usuario, se puede observar en
el diagrama que se dispone a éste en la parte central y por
encima del resto de etapas durante todo el Modelo de Proceso.
 El usuario es el único que tiene la potestad de calificar al
sistema como Usable y escoger las metáforas, organizando la
información y los enlaces, y las opciones de los menús.

Ing. Patricia Vigo Pereyra 11

Etapa 1: Análisis de Requisitos
 Se formula el problema de diseño: se determinan los usuarios,
las sus requisitos técnicos, así como las necesidades de los
usuarios y los requisitos de usabilidad.
 Supone determinar, enumerar y clasificar todas las
características, capacidades y restricciones que ha de cumplir
y a las que se verá sometido.
 Los requisitos suelen estar enfocados en qué hará el sistema y
no en como ha de hacerlo.

Ing. Patricia Vigo Pereyra 12

Etapa 1: Análisis de Requisitos

Análisis de Análisis de los Usuarios

Requisitos Análisis de la diversidad de los
Usuarios
Análisis de Tareas
Objetivos Funcionales
De usabilidad
De accesibilidad

Ing. Patricia Vigo Pereyra 13

Etapa 1: Análisis de Requisitos
1.1. Análisis de los Usuarios:
 Objetivo: conocer cómo son realmente los futuros usuarios y
cuáles son sus necesidades.
 Fuentes: Información procedente de fuentes empresariales o,
realizar encuestas y/o entrevistas, observación directa.
 Para entender a los usuarios no sólo tendremos en cuenta los
atributos personales, sino que también debemos analizar los
distintos dispositivos y plataformas que utilizan para acceder a
la información. (Ver Lectura: Diseño centrado en el Usuario)

Ing. Patricia Vigo Pereyra 14

Etapa 1: Análisis de Requisitos
1.1. Análisis de los Usuarios:
 El entorno físico también es importante aunque, estrictamente
hablando no es una característica del usuario, pero se deben
considerar elementos como el ruido, la baja iluminación, la
temperatura y otras que se consideren de relevancia.
 El entorno social y laboral tambien debe ser considerado, por
ejemplo: si el usuario va a ser interrumpido frecuentemente
por sus compañeros o por clientes.

Ing. Patricia Vigo Pereyra 15

Etapa 1: Análisis de Requisitos
1.2. Análisis de la Diversidad de los Usuarios:
 Segmento de mercado: edad, género, educación, ocupación,
aficiones..., discapacidades visuales, auditivas, motrices..., y
nivel de experiencia.
 Organizar a los usuarios en categorías, para cada una de las
cuales estableceremos el perfil, sus necesidades y sus metas.
 Para Internacionalización: Diferencias culturales que puedan
existir para cada categoría de audiencia, idiomas,
localizaciones.

Ing. Patricia Vigo Pereyra 16

Primer Entregable:
 El día 19 de enero se expondrán los puntos 1.1 y 1.2 del
Modelo de Proceso.

Ing. Patricia Vigo Pereyra 17

Etapa 1: Análisis de Requisitos
Algunos modelos útiles en la descripción de Usuarios:
 Para describir Roles de Usuario:
Cliente comprueba la disponibilidad y reserva un asiento conforme a
sus preferencias
Pasajero comprueba los datos de su billete de viaje y factura el
 Mapa de Roles de Usuario:
equipaje

Cliente Pasajero

Facturación
Comprueba Pasajero
disponibilidad de vuelos
Cliente
Reserva un Comprueba
asiento datos del billete

Ing. Patricia Vigo Pereyra 18

Etapa 1: Análisis de Requisitos
1.3. Análisis de Tareas:
 Objetivo: Describir usando un conjunto de técnicas cómo
hace la gente para realizar una determinada tarea.
 Tarea: es una actividad con sentido para el usuario, algo que
el usuario considera necesario o deseable que se realice.
 Las tareas pueden ser descritas usando:
 Escenarios
 Casos de Uso

Ing. Patricia Vigo Pereyra 19

Etapa 1: Análisis de Requisitos -
Escenarios
 Escenario: Es una forma de reflejar la forma en que las
personas interactúan entre si y con el computador en la
realización de sus tareas.
 Un escenario refleja:
 que es lo que las personas quieren hacer con el sistema,
 que procedimientos se usan, cuáles no se usan,
 cuáles se realizan o no satisfactoriamente, y
 que interpretaciones hacen de lo que les sucede.

Ing. Patricia Vigo Pereyra 20

Etapa 1: Análisis de Requisitos -
Escenarios
 Ejemplo de Escenario:
 ...Los alumnos para ver su horario tienen que proporcionar
su ID y su NIP a través de un formulario. Se tiene que
comprobar que todos los datos necesarios están, si no la
solicitud no se podrá procesar...
 Es importante analizar los Escenarios, pues no siempre los
pasos que se dan en los sistemas son los correctos, y por eso se
pueden realizar mejoras.
 En ese caso, se puede realizar el análisis del Escenario Actual
y el análisis del Escenario Propuesto.

Ing. Patricia Vigo Pereyra 21

Etapa 1: Análisis de Requisitos -
Escenarios
 Ejemplo: Un usuario de una biblioteca dice:
 Quiero encontrar un libro de Eduardo Mendoza. No recuerdo el título
pero sé que se publicó antes del 2000. Voy al catálogo e introduzco mi
contraseña, no entiendo porqué ya que a la biblioteca puedo entrar sin
que nadie me pida el carnet. El sistema sólo me permite buscar por
autor o por fecha, pero no por ambos a la vez. Normalmente, uso el
nombre del autor ya que la fecha me da demasiados resultados.
Después de 30 segundos me dice que no hay resultados y me muestra
los resultados más parecidos. El nombre exacto no era Eduardo sino
Edward.
 ¿Qué se puede mejorar?
 No es necesaria la contraseña para buscar, sólo para prestar.
 Incluir mecanismos flexibles de búsqueda
 Mantener la lista de Ing.
nombres parecidos
Patricia Vigo Pereyra 22
Etapa 1: Análisis de Requisitos -
Escenarios
 Ejercicio: Describir el escenario para comprar un PC en una
tienda.

Ing. Patricia Vigo Pereyra 23

Etapa 1: Análisis de Requisitos -
Casos de Uso
 Enfatiza la tarea del usuario más que la interacción con el
sistema.
 Aunque se enfoca en la interacción entre el usuario (actor) y el
sistema software, se ve desde la perspectiva del usuario no del
sistema.
 Un caso de uso se asocia a un actor, y es el objetivo del actor
usando el sistema lo que el caso de uso quiere describir.
 Cuando un paso no se realiza, se ejecuta una “excepción”, la
cual debe mostrarse al final del caso.

Ing. Patricia Vigo Pereyra 24

Etapa 1: Análisis de Requisitos -
Casos de Uso
 Ejemplo: Caso de Uso para la Biblioteca
1. El usuario inicia la sesión con la aplicación
2. El sistema le pide su id y su contraseña
3. El usuario introduce su id y su contraseña
4. El sistema comprueba si es correcto
5. El sistema le muestra la pantalla de búsqueda
6. ....
 Excepciones
4. Si no existe ese id o esa contraseña para ese id
4.1 El sistema muestra un error
4.2 Le pide al usuario de nuevo el id y la contraseña

Ing. Patricia Vigo Pereyra 25

Segundo Entregable:
 Para la semana del 19 al 24 de abril se presentará el informe
y expondrán el punto 1.3: Análisis de Tareas, utilizando las
técnicas estudiadas.

Ing. Patricia Vigo Pereyra 26

Etapa 1: Análisis de Requisitos -
Objetivos
 No hay ninguna aplicación que se realice sin al menos un
objetivo concreto. Una empresa, persona, grupo o institución
decide desarrollar una aplicación como consecuencia de
haberse marcado unos objetivos a conseguir y se considera
necesaria la implementación de la aplicación como una
herramienta para conseguirlo.
 A la hora de recoger los objetivos de la aplicación deberemos
tener en cuenta tanto los requisitos funcionales como los no
funcionales, entre los cuales tenemos los Objetivos de
Usabilidad y los objetivos de Accesibilidad.

Ing. Patricia Vigo Pereyra 27

Etapa 1: Análisis de Requisitos -
Objetivos Funcionales
 Se refieren a las funcionalidades que debe tener la aplicación
para satisfacer las necesidades de los usuarios.
 Las podemos obtener a partir del análisis de tareas realizado
en el punto anterior.
 Por ejemplo en el caso de la biblioteca tendríamos:
 Realizar búsquedas de libros por autor, título, año de
publicación o tema.
 Registrar el préstamo de un libro.
 Registrar la devolución de libros.
 Etc.

Ing. Patricia Vigo Pereyra 28

Etapa 1: Análisis de Requisitos -
Objetivos de Usabilidad
 Los objetivos de usabilidad necesitan ser identificados para
después ser medidos. Asignar un valor (o varios) como meta
para cada objetivo proporciona al diseñador una línea base de
medida, comparación y análisis.
 La idea de plantear objetivos de usabilidad es asegurar que los
sistemas interactivos sean fáciles de aprender, efectivos y
agradables para sus usuarios.
 Se deben plantear en los siguientes términos:
 Facilidad en el aprendizaje  Recuperabilidad
 Consistencia  Tiempo de respuesta
 Flexibilidad  Adecuación a las tareas
 Robustez  Disminución de la carga
cognitiva
Ing. Patricia Vigo Pereyra 29
Etapa 1: Análisis de Requisitos -
Objetivos de Usabilidad
 Ejemplos:
 De Tiempo de Aprendizaje: Se podrá utilizar la aplicación
sin entrenamiento desde la primera vez.
 De tiempo de respuesta: Cuando alguna tarea demore mas
de 5 segundos, el sistema enviará un mensaje al usuario
indicándolo.

Ing. Patricia Vigo Pereyra 30

Etapa 1: Análisis de Requisitos -
Objetivos de Accesibilidad
 La accesibilidad, al igual que la usabilidad, de por sí ya debe
constituir un objetivo primordial de toda sistema.
 Cierto es que pensar en dotar de funcionalidad total para todos
los tipos de discapacidades supone un reto difícilmente
alcanzable.
 Considerando el análisis de usuarios realizado, si se tiene
algún usuario con discapacidad, se plantearán los objetivos
considerándolo.
 Por ejemplo para un sitio web, el objetivo de accesibilidad
sería: “Cualquier persona con un ordenador conectado a
internet puede visitar nuestro sitio web, independientemente
de su origen geográfico, cultural, generacional o
motivacional” Ing. Patricia Vigo Pereyra 31
Etapa 2: Diseño
 Debe alcanzarse una idea clara de cómo será la interfaz de
usuario y las relaciones con esta para desarrollar las
especificaciones funcionales que sirvan de guía al diseño
posterior.
 La interfaz determinará en gran medida la percepción que el
usuario tendrá de la aplicación.

Ing. Patricia Vigo Pereyra 32

Etapa 2: Diseño
Diseño Diseño de la Diseño del concepto del sistema
Interacción Diseño de la parte visual del sistema
Estándares Generales
Particulares
Metáforas
Colores
Diseño detallado

Ing. Patricia Vigo Pereyra 33

Etapa 2: Diseño
 Una vez identificadas las tareas a las que el sistema va a dar
soporte, se puede empezar a diseñar la interacción del sistema,
como una primera aproximación que será evaluada y,
eventualmente, mejorada en posteriores iteraciones.
 El diseño de la interacción se puede dividir en dos etapas:
 Diseño del concepto del sistema, y
 Diseño de la parte visual de la interacción.

Ing. Patricia Vigo Pereyra 34

Etapa 2: Diseño –
Diseño del Concepto del Sistema
 El diseño del concepto del sistema es la actividad más
importante del desarrollo de software, pues definirá de qué
modo va a funcionar el sistema. Es importante crear un
concepto del sistema que pueda ser comprendido y asimilado
fácilmente por el usuario.
 Para ello se pueden usar metáforas (como la metáfora del
escritorio o como la del menú y ventanas) basadas en
conceptos familiares para el usuario, o bien imitar sistemas ya
conocidos por el usuario.

Ing. Patricia Vigo Pereyra 35

Etapa 2: Diseño –
Diseño del Concepto del Sistema
 El diseño es una actividad creativa y no puede mecanizarse.
De todos modos, aunque no hay recetas de cómo crear un buen
concepto del sistema, sí hay principios generales que nos
pueden guiar en dicha tarea, como intentar lograr una
consistencia en la interacción, intentar minimizar la
posibilidad de error por parte del usuario, no sobrecargar la
memoria del usuario, ofrecer realimentación al usuario sobre
sus acciones, etc.
 Una manera concreta de modelar este diseño es el Árbol de
Menús.

Ing. Patricia Vigo Pereyra 36

Diseño de la Parte Visual del
Sistema
 Generales: Establecer el paradigma de interacción, el tipo de
letra, tamaño, disposición de los elementos generales,
estructura de diálogos de error/interrogación, sonidos,
animaciones, iconos (tamaño/color), etc. a ser utilizados.
 Particulares: Se debe establecer la estructura de las pantallas
a ser utilizada por cada tipo de operación: registro de datos,
consultas, etc.
 Metáforas: Definir las metáforas que se usarán en el sistema
para ayudar al usuario.
 Colores: Establecer los colores que se utilizarán en la
implementación de la aplicación.

Ing. Patricia Vigo Pereyra 37

Tercer Entregable:
 Para la semana del 26 al 30 de abril se presentará el informe
y expondrán:
 Definición de Objetivos Funcionales
 Definición de Objetivos de Usabilidad
 Definición de Objetivos de Accesibilidad
 Diseño del Concepto del Sistema
 Diseño de la Parte Visual del Sistema

Ing. Patricia Vigo Pereyra 38

Etapa 3: Prototipado
Prototipado Bocetos
StoryBoards
Prototipos en papel
Maquetas
StoryBoard Navegacional
Videos
Escenarios
Prototipo software

Ing. Patricia Vigo Pereyra 39

Etapa 4: Evaluación
 En cada fase de desarrollo, se necesita algún tipo de
realimentación del sistema, puesto que queremos identificar
tan rápidamente como sea posible cuando el proceso de diseño
se desvía hacia un mal camino.
 Por eso en cada etapa es necesario realizar la evaluación de los
avances realizados, a fin de corregir a tiempo, sin incurrir en
costos adicionales.

Ing. Patricia Vigo Pereyra 40

Bibliografía
 La Ingeniería de la Usabilidad y de la
Accesibilidad aplicada al diseño y desarrollo de
sitios web
 Jesús Lorés, Toni Granollers
 Universitat de Lleida

Ing. Patricia Vigo Pereyra 41