TEMA 1.

HUMAN COMPUTER INTERACTION (HCI)

Productos interactivos utilizados a diario: Teléfono, PC, fotocopiadora…

Los productos interactivos están diseñados para ciertas tareas, pero no siempre se tiene en
cuenta como las personas reales los utilizarían.

Los objetos tienen que diseñarse para que, además, puedan ser usados teniendo en cuenta
factores como:

- Visibilidad
- Causalidad
- Restricciones visibles
- Coincidencia (“Mapping”: su diseño debería sugerir su funcionalidad)

- Efectos de transferencia

Un procesador de texto y una máquina de escribir

- Estereotipos de los usuarios

Símbolo de guardar (disquete), símbolo de eliminar (papelera)

- Modelos conceptuales
- Diferencias individuales, culturales …

NACIMIENTO DEL HCI

La interacción se produce tanto en la vida cotidiana como en el uso del ordenador.

Ejemplo de buen HCI: Volante del coche que aparte de confortable y bonito se interese por la
conexión cigüeñal del motor y rotula de las ruedas.

Ejemplo de mal HCI: Controles de video visibles con buena translación de sus efectos.

Inicialmente aparece el término Man-Machine Interface

La interfaz incluye aquellos elementos del sistema con los que el usuario interactúa.
A mediados de los 80 se acuña el nuevo término HCI. “Un lenguaje de entrada para el usuario,
de salida para el sistema y un protocolo de interacción”

“HCI es una disciplina relacionada con el diseño evaluación e implementación de sistemas

interactivos y con el estudio de los grandes fenómenos alrededor de dichos sistemas”

HCI == CHI  IPO

OBJETIVOS DE HCI

Desarrollar o mejorar:

- Seguridad en el trabajo
- Utilidad que puede hacer el sistema
- Efectividad (Poner juntos botones de salir y borrar)
- Eficiencia (El botón más usado debe ser el más cercano)
- La capacidad de ser usados (usabilidad)

De sistemas que incluyen ordenadores.

HCI ES MULTIDISCIPLINAR

Es una disciplina relacionada con:

- El diseño, evaluación e implementación de sistemas interactivos para el uso humano

- Estudio de los grandes fenómenos alrededor de dichos sitemas
EL CONCEPTO DE INTERACCIÓN

El proceso de comunicación entre el usuario y el sistema. (El sistema como un elemento que
realiza, simplifica o da soporte a la ejecución de alguna tarea)

La interfaz es el medio a través del cual se produce la comunicación entre ambos y por ello
debe diseñarse para que contribuya a que esa interacción tenga éxito

MODELOS DE INTERACCION

Un modelo es una representación abstracta de una realidad compleja que se utiliza para
facilitar la comprensión y el estudio de su comportamiento

Los modelos de interacción están diseñados para:

- Ayudar a comprender el proceso de interacción

- Identificar la raíz de los problemas que se pueden producir durante dicho proceso.

DEFINICIONES

Dominio: Un área de habilidad y conocimiento en alguna actividad del mundo real

Meta: Lo que quiere conseguir el usuario

Tarea: Como quieres conseguir tus metas. Actividades requeridas o llevadas a cabo para
conseguir una meta usando un dispositivo en concreto

Acciones: Tarea que no implica resolución de problemas o estructuras de control

Plan: conjunto de tareas para conseguir una meta.

Ejemplo:

MODELO DE NORMAN

El usuario formula un plan de acciones que ejecuta utilizando la interfaz del sistema

Cuando el plan o parte del plan se ha ejecutado el usuario observa la interfaz para evaluar el
resultado y comprobar si hacen falta más acciones
Sigue el Modelo de ejecución/evaluación

Dos lenguajes:

- Lenguaje del sistema: lenguaje del núcleo, representa atributos computacionales del
dominio relevantes para representar el estado del sistema
- Lenguaje del usuario: lenguaje de la tarea, atributos psicológicos del dominio
relevantes para representar el estado del usuario.

1 El usuario establece la meta

2 Formula su intención

3 Especifica acciones en la interfaz

4 Ejecuta acciones

5 Percibe el estado

6 Interpreta el estado

7 Evalúa el estado respecto a su meta

Abismo de ejecución: Diferencia entre la formulación de los usuarios de las acciones para
alcanzar el objetivo y las acciones permitidas por el sistema

Ejemplo: Grabar una película

El usuario pulsa el botón grabar pero hay que pulsar el botón grabar, seleccionar el canal, el
tiempo de grabación y pulsar OK

Abismo de evaluación: Es la distancia entre la presentación física del estado del sistema y lo
que esperaba el usuario. El usuario y el sistema no hablan el mismo lenguaje

EJ: Una vez seguido el proceso de grabación la interfaz del sistema no muestra ninguna señal
distinta que ayuda al usuario a percibir si realmente se está grabando.

MODELO DE ABOWD Y BEALE

Respecto al modelo de Norman se incluye la Interfaz de usario de forma explicita, que realizará
la traducción entre lenguaje de usuario y lenguaje del sistema y viceversa.

QUÉ ES LA INTERFAZ DE USUARIO

Canal a través del cual se produce la comunicación entre el usuario y el ordenador.

La interfaz del usuario es lógica y física.

Tipos de interfaces interactivas: Textual, gráfica, multimedia, multimodal, conversacional.

TEMA2. INTERFACES DE USUARIO

La interfaz de usuario es el canal a través del cual se produce la comunicación entre el usuario
y el ordenador. Es Lógica y Física.

Debe diseñarse para que esa tarea se haga de manera eficiente y satisfactoria.

TIPOS DE INTERFACES INTERACTIVAS

 - Comandos
- WIMP y GUI
- Multimeda
- Realidad virtual
- Tableros
- Móvil
- Voz
- Compartida
- Cerebro – ordenador

BASADA EN COMANDOS

Cada comando se ejecuta en un terminal y el sistema responde con el resultado

correspondiente. Un ejemplo de comando es ls al que el sistema responde listando los ficheros
que se encuentran en la carpeta actual

Algunos comandos se pueden asignar a unas teclas del teclado

Eficiente, precisa y veloz pero puede resultar difícil de aprender

Utilizada como alternativa para personas con discapacidad visual

WIMP Y GUI

Windows (Ventanas), se pueden minimizaar, maximizar, cambiar el tamaño …

Icons (Iconos), representan aplicaciones, objetos, comandos y herramientas que se abren al

clicar

Menus, incluyen listas de operaciones que pueden ser exploradas y seleccionadas

Puntero: Un ratón controla al puntero que puede entrar en una venta, un menú o unos iconos
en pantalla

VENTANAS

Se inventaron para superar las limitaciones físicas de la pantalla de un ordenador.

Los componentes de una ventana deben estar relacionados.

Si se abren más ventanas podría resultar difícil gestionarlas y para ello se tiene la posibilidad
de reducirlas a un icono en la barra de estado, listar las abiertas o moverse fácilmente de una a
otra.

Tipos:

- Tiled Windows (Permiten drag and drop)

- Overlapping Windows
- Cascading Windows

VENTANAS – MDI

MDI es una interfaz centrada en la aplicación

Una aplicación MDI lanza una ventana principal que funciona como espacio de trabajo para
todos los documentos abiertos.
Ventajas:

- Los recursos del sistema se conservan

- No se produce sensación de abarrotamiento visual
- Proporcionan un espacio de trabajo coordinado
- Se pueden ver múltiples documentos a la vez

Desventajas:

- Los menús cambian de acuerdo con el documento seleccionado

- Las ventanas de documento tienen que estar dentro del área de trabajo
- Las ventanas hijo pueden minimizarse dentro de las padre, lo cual incrementa la
complejidad visual de la pantalla

VENTANAS-SDI

SDI es una interfaz centrada en el documento

Una aplicación SDI abre una nueva ventana principal para cada documento con el que se
quiera trabajar

Ventajas:

- Al estar centrado en un único documento, todos los menús y barras de herramientas

reflejan la visión del usuario
- Son menos complejas visualmente

Desventajas:

 No hay forma de agrupar ventanas de documentos

 La barra de tarreras puede aparecer llena cuando hay demasiados documentos
abiertos
 La transición entre ventanas puede ser compleja

VENTANAS-TDI

Es una variante de MDI también llamda workbook

Incorpora el uso de pestañas para cambiar entre documentos

VENTANAS –CAJAS DE DIÁLOGO

Proporcionan un espacio en el que llevar a cabo funcionalidades relacionadas pero

secundarias.

Pueden ser:

- Modales: si el usuario no puede hacer otra cosa hasta que haya terminado las acciones
por las cuáles se abrió la caja de dialogo
- No modales: si el usuario puede acceder a otras funcionalidades del programa
mientras el diálogo está abierto.

Se pueden encadenar cajas de diálogo para proporcionar acceso a funcionalidades avanzadas a

los usuarios más expertos.

VENTANAS –OTROS ELEMENTOS

 - Paneles. Agrupacion de funcionalidades relacionadas.
- Marcos. Pueden minimizarse y cambiar de tamaño. Suelen usarse en las paginas web
para separar áreas de navegación
- Pestañas. Permiten incrementar el tamaño del diálogo apilando niveles y facilitan que
se acceda a más elementos

ICONOS

Los iconos son más fácil de aprender y recordar que los comandos

Se pueden diseñar para ocupar poco espacio y moverse en la pantalla

La correspondencia entre la representación y el icono elegido puede ser:

- Similar
- Analógica
- Arbitraria

MENUS

Menu a listas: Para pocas opciones que se quieran visualizar al mismo tiempo y en una pantalla
pequeña

Menú expandible: Se pueden enseñar múltiples opciones en una sola pantalla

Menú contextual: Las opciones ofrecidas dependen del contexto de la tarea en ejecución.

MULTIMEDIA

Combinación de diferentes media en la misma interfz ofreciendo diferentes modos de

interactuar.

Se facilita el acceso a diferentes tipos de información

Mejora el aprendizaje y la aceptación por parte de los usuarios

Se utiliza en particular en juegos

REALIDAD VIRTUAL

Simulación gráfica generada por ordenador que genera la ilusión de participar en un entorno
no real en vez de observarlo desde el exterior.

TABLEROS

Tableros gráficos para visualizar datos complejos

Mejora la capacidad de pensamiento y aprendizaje de los usuarios que pueden reconocer

patrones o anomalías en los datos visualizados.

MOVIL

Los dispositivos móviles están pensados para utilizarse en movimiento a lo largo de todo el día
para una gran variedad de avtividades.

VOZ

Se utiliza para acceder a algún tipo específico de información.

COMPARTIDA

Las interfaces compartidas están diseñadas para ser utilizadas por más usuarios y recibir varios
inputs al mismo tiempo

Para ello se utilizan pantallas de grandes dimensiones donde las personas interactúan con
gestos o toques.

CEREBRO-ORDENADOR

Este tipo de interfaces permiten establecer una comunicación bidireccional entre el cerebro
del usuario y el ordenador, permitiendo al usuario mover un dispositivo externo como el
cursor en la pantalla a través de ondas cerebrales.

TEMA 2. USABILIDAD

Propiedad que refleja la facilidad de usar un sistema

Propiedad basada en 5 componentes básicos: 1)Learnability, eficiencia, memorabilidad,

errores y satisfacción.

Es el nivel de eficacia, eficiencia y satisfacción alcanzado por un producto que es empleado por
una clase de ususarios para alcanzar objetivos dados en determinados entornos.

Un buen diseño hace que los objetos sean fáciles de entender y utilizar.

Es necesario que el sistema hable el mismo lenguaje que el usuario.

Demasiadas opciones representan una carga adicional de información. (más posibilidades de

errores)

La información así como las funcionalidades del sistema se deberían presentar con un lenguaje
natural e iconos fáciles de entender, evitando términos técnicos

Hay que garantizar una correspondencia entre lo que visualiza el sistema y el modelo mental
que se ha construido el usuario

Hay que analizar las necesidades del usuario y de su entorno

El diseño de la interfaz del usuario se basa en metáforas.

Las metáforas podrían tener problemas de internacionalización.

EL SER HUMANO

Hay que tener en cuenta varios factores relacionados con el ser humano para poder diseñar
una interfaz usable.

- La percepción visual
 - La lectura
- El oído
- El tacto
- El movimiento
- La memoria
- El pensamiento

LA PERCEPCIÓN VISUAL

La percepción visual del tamaño y de la profundidad de un objeto dependen del ángulo visual

Las leyes de la percepción visual o Leyes de la Gestalt son un conjunto de principios sobre
como las personas perciben y organizan los elementos.

Ley de cierre: Completar con la imaginación las formas percibidas

Ley de la figura y fondo: el fondo enmarca a la figura y por su menor contraste tiende a no ser
percibido

Ley de la simplicidad: los elementos se perciben de la manera más simple

El brillo se define como la cantidad de luminancia perceptible que proporciona un objeto

(subjetivo)

Mayor luminancia significa mayor agudeza visual y mayor frecuencia de parpadeo

Contraste: relación entre la luminancia de un cuerpo y la de su fondo.

Contraste negativo mejor, pero produce más cansancio

El color está compuesto por matiz (longitud de onda de la luz), intensidad (brillo del color) y
saturación (cantidad de blanco en el color)

Se aconseja utilizar entre los 5 y los 7 colores, donde los grises claros son los más idóneos
como color de fondo.

Los colores se deberían utilizr para categorizar datos pero no para aportar información
adicional

La interfaz se debería poder utilizr en blanco y negro teniendo en cuenta los usuarios con
problemas de daltonismo

LA TEORÍA DEL COLOR

Cálidos: Pasión, alegría, entusiasmo y energía.

Fríos: Sensación de calma y profesionalismo

Colores opuestos en el círculo se utilizan para generar un fuerte contraste.

Colores análogos son la base de esquemas armónicos.

Tres colores equidistantes esquema armónico pero con mucho contraste

Un colores y los adyacentes a su complementario: mucho contraste sin la tensión del esquema
complementario

Tetrádica: No se pueden utilizar los cuatro de la misma forma. Debe haber un dominante
Cuadrado: Puede tener problemas de armonía. Utilizr con cuidado

EL MOVIMIENTO

Hay varios factores relevantes para el diseño de una interfaz que están relacionados con el
movimiento de las manos, brazos … Como la velocidad de reacción y precisión.

LA MEMORIA

Sensorial: icónica, ambiental y del tacto.

Corto plazo: fugaz

Largo plazo: Información experimental y comportamiento

EL PENSAMIENTO

El razonamiento es el proceso por el cual el conocimiento que tenemos infiere algo nuevo
sobre el dominio.

- Deductivo: Pedro es una persona. Las personas comen pesacado. Pedro come
pescado.
- Inductivo: Veo un avión con hélices y ruedas, entonces todos los aviones las tienen.
- Abductivo. Santi corre mucho con el coche cuando bebe. Si santi va rápido es que ha
bebido.

La resolución de problemas es el proceso de encontrar una solución a una tarea no familia

usando el conocimiento previo.

Los usuarios siempre ganan habilidad con el uso de los sistemas.

BENEFICIOS DE LA USABILIDAD

- Reducción de costes de aprendizaje

- Disminución de costes de ayuda al usuario
- Aumento de la tasa de aceptación
- Mejora de la imagen y el prestigio
- Mejora de la calidad de vida de los usuarios
- Reducción de los costes de prodcuiión
- Aummento de la productivdad.

PRINCIPIOS DE DISEÑO

Abstracciones generalizables que tienen como objetivo orientar a los diseñadores en varios
aspectos de su diseño

- Entender al usuario
- Entender el dominio de la aplicación
- Diseñar buscando la claridad y la simplicidad
- Mantener la consistencia
- Proporcionar pistas visuales o auditivas
- Fomentar la legibilidad
- Proporcionar soporte con el teclado
- Diseñar los componente de la IU para cumplir su función
LA PANTALLA

El diseño de la información visualizada en pantalla siempre tiene elementos artísticos y que

requieren creación.

Principios básicos desde el punto de vista de la presentación en la pantalla:

- Elegancia y simplicidad
- Estilo unitario, refinado y adecuado
- Escala, contraste y proporción
- Los elementos deben ser claros, existir armonía entre ellos y con la actividad que
llevan a cabo
- Organización y estructura visual
- La información debe estar agrupada, aprovechar las jerarquías y relaciones, y estar
balanceada

MENSAJES DE ERROR

Pueden ayudar al usuario a detectar el problema y a resolverlo

Mensajes poco adecuados pueden crear malas experiencias en los usuarios

Se debe incluir el diseño de estos mensajes dentro del proceso de desarrollo

Los mensajes deben ser específicos y contener consejos constructivos y el tono debe ser
positivo.

TIPOS DE ARTEFACTOS

- Heurísticas: abstracciones generalizables basadas en la experiencia, el sentido común

o la teoría.
- Guías de diseño: Recomendaciones de diseño basadas en la experimentación y
orientadas a mejorar la experiencia de uso de la interfaz
- Patrones de diseño: Soluciones que se han demostrado que son satisfactorias a
problemas recurrentes y que están recopiladas de forma sistemática
- Métodos de inspección: Conjunto de procedimientos que permiten evaluar una
interfaz a fin de determinar su grado de usabilidad

HEURÍSITCAS

(Estudiados más adelante)

PATRONES DE DISEÑO

(Estudiadas más adelante)

TEMA2. METODOLOGÍA Y PROTOTIPADO

CONOCER AL USUARIO
Se definen como stakeholders aquellos usuarios que resultan directamente o indirectamente
afectados por el sistema

Para conocer al usuario, se pueden definir unas personas.

Una persona es una descripción detallada de un usuario típico del sistema que se está
desarrollando, incluyendo objetivos, capacidades, actitudes, tareas y contexto.

MÉTODOS ETNOGRÁFICOS

Con estos métodos se observa la interacción entre las personas y entre las personas y el
contexto en el que se encuentran para tomar nota de la información más relevante para el
desarrollo del sistema

El contexto puede estar relacionado a una situación particular, como el trabajo o la vida
cotidiana.

- Analizar los resultados obtenidos de la observación de los usuarios y de las entrevistas.

- Identificar los factores más relevantes a tener en cuenta durante la fase de diseño
- Analizar como los usuarios llevan a cabo las tareas con sistemas similares.
- Utilizar modelos cognitivos para representar la interacción entre los usuarios y los
sistemas.

DISEÑO CENTRADO EN EL USUARIO

El usuario se encuentra en el centro del proceso de diseño. De esta forma se quiere minimizar
el esfuerzo cognitivo. El usuario tiene que entender la imagen del sistema definida por el
diseñador para poder aprender a utilizarlo.

- El diseñador se hace una idea de cuales son las necesidades del usuario y las tareas
que quiere llevar a cabo
- El diseñador traslada sus ideas al diseño del sistema y de su interfaz
- El usuario interpreta la interfaz del sistema y se hace una idea propia de como
funciona el sistema
- PROBLEMA SI LA IDEA DEL DISEÑADOR NO CORRESPONDE CON LA DEL USUARIO

PROTOTIPO

Conjunto de bocetos de las pantallas.

Ejemplos: Presentación Powerpoint, video de la simulación de como se utilizaría el sistema,

objeto físico de algún material específico como la madera.

Utilidades:

- Para evaluar la idea del diseñador y recibir feedbacks de los usuarios

- Es más fácil que los stakeholder vean, toques e interactúen con el prototipo que con el
sistema final
- Tomar decisiones de manera más sencilla
- Testear ideas.

THE RAPID PROTOTYPING PROCESS

Proceso en tres fases para construir y mejorar rápidamente los prototipos

 - Definir el prototipo especificando cualquier interacción o funcionalidad que se quiera
añadir
- Evaluar el prototipo con o sin usuario dependiendo del contexto y de la fase de diseño
en la que nos encontremos
- Redefinir el prototipo. Se puede ir añadiendo más funcionalidades o más detalles a las
funcionalidades ya incluidas
- Se itera el proceso hasta llegar a una versión del prototipo adecuada para pasar al
desarrollo del producto final

Los prototipos se pueden analizar según 4 calidades:

- Representación (la forma física)

- Fidelidad (precicisión o el nivel de detalles y realismo)
- Interacción (hasta que punto el usuario puede interactuar con el prototipo)
- Evolución (el ciclo de vida del prototipo incluyendo el número de iteraciones
necesarias para desarrollar el sistema final)

FIDELIDAD

- Fidelidad funcional. Se llaman prototipos horizontales y genralmente presentan un

mayor número de funcionalidades pero con un bajo nivel de detalles
- Fidelidad visual: se llaman prototipos verticales y generalmente presentan un menor
número de funcionalidades pero con un alto nivel de detalles.
1. LOW VISUAL + LOW FUNCTIONALITY
Prototipos rápidos y fáciles de realizar que se pueden usar durante las primeras fases
del proceso. EJ: los prototipos en papel
2. LOW VISUAL + HIGH FUNCTIONALITY
Wireframes que se realizan generalmente con algún tipo de herramienta específica.
Permiten evaluar la usabilidad del sistema. EJ: Enunciados de las prácticas
3. HIGH VISUAL + LOW FUNCTIONALITY
Mock-ups a los que se añade algúna interacción más avanzada. Se utilizan para evaluar
el flujo del sistema
4. HIGH VISUAL + HIGH FUNCTIONALITY
Prototipos HI-FI realizados durante el últio paso antes del desarrollo del producto final.
Se utilizan para evaluar la usabilidad de las funcionalidades y de la interfaz así como
serán en el producto final

TEMA2. DISEÑO PARA TOD@S

Los sistemas usables tienen como objetivo lo de satisfacer personas con diferentes
características, necesidades y requisitos.

ADAPTIVE TECHNOLOGY

Productos o dispositivos que se han diseñado para mejorar o aumentar las capacidades
funcionales de las personas con algún tipo de discapacidad.

DISEÑO UNIVERSAL

Diseño de productos usables para tod@s, sin necesidad de ser adaptados o mejoradas para
con ciertas especificaciones especiales.

SIETE PRINCIPIOS
 1. Uso equitativo
2. Uso flexible
3. Simple e intuitivo
4. Información perceptible
5. Tolerancia a los errores
6. Esfuerzo físico bajo
7. Tamaño y espacio para acercarse y usarse

DISEÑO 4 ALL EN HCI

Incluye el diseño accesible, inclusivo, sin barreras, universal.

Los conceptos de accesibilidad y usabilidad se tienen en cuenta a lo largo de todo el proceso

de diseño y desarrollo.

CALIDADES DEL DISEÑO

- Accesibilidad. Los productos tienen que tener en cuenta habilidades limitadas y

específicas, así como factores relacionados con el entorno
- Usabilidad. Los productos tienen que cumplir con los requisitos y las necesidades de
los usuarios para alcanzar un objetivo en un entorno específico.

El concepto de accesibilidad se puede ver como un pre-requisito fundamental para la

usabilidad

FACTORES DE DIVERSIDAD

- Diversidad de los usuarios

- Diversidad tecnológica

Diversidad de los usuarios:

Se identifican grupos de usuarios con habilidades y necesidades comunes para adaptar el

diseño de la interacción

- Percepción: discapacidad auditiva o visual

- Movimiento: discapacidad física
- Cognición: habilidad de la mente humana de procesar información, pensar, recordar …

EDAD

Las personas perciben y procesan la información dependiendo de la edad.

EXPERIENCIA

La facilidad de uso y la satisfacción dependen también de las experiencias y los conocimientos

previos que tiene el usuario con la tecnología

CULTURA

Incluir detalles relacionados con la cultura del usuario hace que la experiencia del usuario con
el sistema sea más inclusiva y tolerante.

SOCIAL
La condición social y las oportunidades educativas pueden crear barreras de acceso a la
tecnología.

DIVERSIDAD TECNOLÓGICA:

El entorno puede representar un impedimento a la hora de utilizar un sistema.

- Puede haber ruidos y distracciones visuales

- El acceso a internet podría resultar limitado
- El uso de dispositivos móviles puede estar limitado dependiendo del entorno

WEB ACCESSIBILITY

Garantizar que personas con discapacidad puedan acceder, entender, navegar e interactuar
con el contenido disponible en internet.

DESIGN 4 ALL

De conocer al usuario a conocer las diversidades del usuario

Diapositiva 29/48 el resto no

TEMA 3. DISEÑO WEB

Un sitio web es una colección de paginas web relacionadas y comunes a un dominio de
Internet o subdominio de las World Wide Web.

Principios básicos:

- Diseñar el sitio para satisfacer las necesidades del usuario

- Evitar la navegación lineal
- El usuario debe saber en todo momento dónde se encuentra, qué puede hacer y cómo
desplazarse a otros contenidos.
- Hay que facilitar la búsqueda de contenidos

Aspectos a considerar en el diseño del sitio:

- Estructura de la información
- Navegación por el sitio
- Interaccion

ESTRUCTURA

(……………) Mejor en este tema solo resumir heurísticas y patrones de diseño

HEURÍSTICAS DE NIELSEN

1. Visibilidad del estado del sistema

2. Coincidencia entre el sistema y el mundo real
3. Control del usuario y libertad
4. Consistencia y estandarización
5. Prevención de errores
6. Reconocimiento antes que recuerdo
7. Flexibilidad y eficiencia de uso
8. Estética y diseño minimalista
9. Ayudar a reconocer, diagnosticar y recuperar la situación cuando se produce un error
 10. Ayuda y documentación

PATRONES DE DISEÑO WEB

A. Especificar cual es el genero del sitio web

B. Creating a navigation framework
C. Creating a powerful homepage
D. Writing and managing content
E. Building trust and credibility
F.
G.
H. Helping customers complete tasks
I. Designing effective page layouts
J. Making site search fast and relevant
K. Making navigation easy
L. Speeding up your site

TEMA 4. DISEÑO DE LA INTERACCIÓN

CICLOS DE VIDA

- Modelo en cascada: Propone un enfoque lineal y secuencial al desarrollo software. Hay

que primero tener en cuenta los requisitos del sistema y luego tener un diseño básico
antes de empezar la implementación y la fase de pruebas. No es un modelo centrado
en el usuario porque no toma en cuenta formalmente el usuario.
- Diseño ágil: Feedbacks frecuentes de los clientes que se tienen en cuenta al momento
para modificar el diseño del sistema.

QUE SON LOS REQUISITOS

Es una declaración sobre un producto deseado que especifica qué debería hacer o como
debería hacerlo.

Los requisitos deben ser lo más claros posibles y comprender claramente como se cumplen

- Funcionales: dicen que debe hacer el sistema

- No funcionales: restricciones del sistema y su desarrollo

Otros tipos de requisitos serían:

- De datos: tipo, volatilidad, tamaño, persistencia, precisión y valor

- Del entorno: entorno físico, social, organizaciones, técnico
- Del usuario: talento y habilidades, casual o frecuente, experto o novato
- De usabilidad: efectividad, eficiencia, seguridad, utilidad y aprendizaje

RECOGIDA DE DATOS

El objetivo es recoger datos suficientes, relevantes y apropiados para definir un conjunto

estable de requisitos.

Si ya existe un conjunto estable sirve para expandir, clarificar y confirmar ese conjunto

Existen varias técnicas para recoger información, las cuales no son excluyentes: Cuestionarios,
entrevistas, grupos de interés, observación …
CUESTIONARIOS

QUIS (questionnaire for user interface satisfaction)

CSUQ (Computer system usability questionnaire)

PUEU( perceived usefulness and ease of use)

NAU (Nielsen atributes of usability)

ASQ(After scenario questionnaire)

PUTQ (Purdue usability testing questionnaire)

SUMI( Software usability measurement inventory)

SUS (System usability scale)

TAM. Con un punto de vista totalmente diferente, mas orientado a la tecnología desarrollada,
y uno de los mas usados hoy en día.

Para diseñar un cuestionario efectivo hay que tener en cuenta el texto y la organización de las
preguntas.

Validez: se refiere a si el cuestionario mide lo que se espera que mida

Fiabilidad: se refiere a la consistencia del cuestionario

La parte más difícil de diseñar de un cuestionario es el piloto.

Los pilotos son versiones preliminares de los cuestionarios.

Los pilotos se evalúan con una muestra de usuarios y permiten a los investigadores diseñar el
cuestionario final identificando y solucionando posibles problemas.

Las preguntas abiertas no tienen ningún tipo de opción para las respuestas. Bastantes difíciles
de analizar y exigen más esfuerzo de los usuarios.

Las preguntas cerradas vienen con unas opciones alternativas de respuestas:

- Check boxes e intervalos

- Escalas Likert (Muy de acuerdo, de acuerdo, en desacuerdo, muy en desacuerdo)
- Las escalas diferenciales semánticas (fácil 1 2 3 4 5 dificil)

ENTREVISTAS

Intercambio interactivo de hacer preguntas y obtener respuestas.

Requieren mucho tiempo y pueden ser caras.

Las entrevistas requieren preparar el material con mucho cuidado para evitar la ambigüedad
del lenguaje natural, teniendo en cuenta también la variabilidad de las personas y el coste de
viajar al contexto de los usuarios.

- Estructuradas. Se utiliza una pequeña habitación. Lista predeterminada de preguntas y

respuestas. El entrevistador juega un papel neutral.
 - No estructuradas. Conversaciones centradas en un tema. El guión utilizado solo
contiene los temas principales que se abordarán durante la entrevista. Los temas se
plantean generalmente a través de preguntas abiertas, a diferencia de las entrevistas
estructuradas.
- Semi-estructuradas. Combinan características de entrevistas estructuradas y no
estructuradas. El orden de las preguntas no es estricto. Se pueden incluir preguntas
abiertas. Sin embargo, tienden a ser un poco más específicas que las preguntas hechas
en entrevistas no estructuradas.
- En grupos. Consisten en la entrevista de varios usuarios al mismo tiempo en un
ambiente formal o informal. Tomar el control sobre un grupo de personas es más
difícil que controlar a una sola persona.

OBSERVACION

Puede ser manifiesta o encubierta.

INTERPRETACIÓN Y ANÁLISIS DE LOS DATOS

El objetivo de la interpretación es estructurar y registrar descripciones de requisitos.

El análisis tiene que ver con la investigación de los distintos aspectos del sistema de acuerdo
con los requisitos establecidos y las técnicas para comprender las metas y los objetivos de los
usuarios, y comprender en profundidad los requisitos.

DESCRIPCIÓN DE TAREAS

Un escenario es una descripción informal de actividades o tareas humanas que permiten la

exploración y discusión de contextos, necesidades y requisitos.

ANALISIS DE TAREAS

Hay diferentes técnicas para analizar tareas:

- Análisis Jerárquico de tareas. Permite dividir una tarea en subtareas de forma

recursiva para entender como llevarlas a cabo.
- Modelos predictivos. Modelos a priori usados para definir una aproximación de las
acciones que los usuarios ejecutarán.

ANÁLISIS JERÁRQUICO DE TAREAS.

Ejemplo.

◦ 0. Para tomar prestado un libro en la biblioteca ◦

1. Ir a la biblioteca ◦

2. Encontrar el libro buscado ◦

2.1 Acceder al catálogo ◦

2.2 Acceder a la pantalla de búsqueda

◦ 2.3 Introducir los criterios de búsqueda

◦ 2.4 Identificar el libro buscado

◦ 2.5 Anotar la localización

◦ 3. Ir a la estantería y tomar el libro

◦ 4. Ir al mostrador para reservarlo

MODELOS PREDICTIVOS

Se usan para hacer predicciones sobre como el usuario ejecuta tareas. Se compone de un
conjunto de memoria y procesadores que funcionan siguiendo unos principios de operación.

GOMS (Goals, Operators, Methods and selection rules) tiene como objtetivo el modelado del
conocimiento y de los procesos cognitivos que se producen cuando el usuario interactúa con el
sistema. Se utiliza mucho para comparar sistemas distintos. Sirve muy bien para análisis
sencillos pero no para complejos. Se necesita una herramienta que automatice el proceso.

Goals: Estados concretos que el usuario quiere conseguir

Operators: procesos cognitivos y acciones físicas que se tienen que llevar a cabo para lograr
esas metas.

Methods: Los métodos son los procedimientos aprendidos para conseguir una meta

Selection rules: Las reglas de selección se usan para determinar que método elegir cuando hay
más de un escenario en una tarea.

KLM

Sistema para evaluar las prestaciones de un sistema. Asigna un tiempo determinado a cada
acción, salvo para el ratoón que depende de la distancia entre punto de partida y de llegada

LEY DE FITT

El tiempo requerido para conseguir un objetivo es proporcional a la distancia y el tamaño del

objetivo.

LEY DE HICK
El tiempo que se tarda en tomar una decisión aumenta a medida que se incrementa el número
de alternativas.

DISEÑO CONCEPTUAL

Tiene como objetivo transformar los requisitos y necesidades del usuario en un modelo
conceptual.

Un modelo conceptual es una descripción del sistema propuesto como un conjunto intergrado
de ideas y conceptos sobre qué debería hacer, como debería comportarse y cómo debe
parecer.

Tres maneras de pensar el modelo conceptual:

- El modo de interaccion: forma en que el usuario invoca acciones cuando interactúa

con el dispositivo
- La existencia de una metáfora
- El paradigma de interacción a utilizar

Todo a partir de aquí falta

TEMA 5. PARADIGMAS DE INTERACCIÓN

Un paradigma implica una misma concepción para abordar un problema,

habitualmente utilizando los mismos métodos o técnicas. Los paradigmas de

interacción afrontan la forma de interactuar de la misma forma, y habitualmente

se ven como hitos que se han producido a lo largo de la historia y que han

provocado una mejora en la interacción persona-ordenador. Ejemplos: Realidad

aumentada, Interfaces tangibles, Computación para vestir.

MILGRAM:

Entorno real  realidad aumentadavirtualidad aumentadaentorno virtual

La realidad virtual es un entorno digital artificial que sustituye la realidad física

y crea una apariencia de un entorno real a un usuario. Los usuarios de

software de realidad virtual pueden interactuar sólo con los objetos virtuales y

con usuarios en el mismo entorno virtual. Por otro lado, la realidad aumentada

añade información virtual a la información física ya existente, los usuarios son

libres de interactuar con el mundo real (personas incluidas) y los objetos

virtuales.

• La realidad mixta incorpora los conceptos de realidad aumentada y realidad

virtual. Los objetos físicos del entorno del usuario (y el usuario mismo) sirven

como elementos de interacción con el entorno virtual. Un ejemplo de realidad

mixta es un videojuego en el que los usuarios ven objetos virtuales

sobreimpuestos a objetos físicos a través de gafas especiales e interactúan

con el mundo virtual moviendo los objetos físicos mismos.