Interfaces Humano-Computadora

Instituto Tecnológico de Colima

Maestría en Sistemas Computacionales

D en C. Patricia Elizabeth Figueroa Millán

patricia.figueroa@itcolima.edu.mx

UNIDAD 2. DISEÑO DE INTERFACES

UNIDAD 2.- Diseño de Interfaces

2.1 Diseño de la interfaz.
2.2 Metodologías.
2.1.1 Diseño centrado en el usuario.
2.1.2 Modelo OOHDM
2.3 Análisis de tareas.
2.4 Guías y estándares de diseño.
2.5 Prototipos.
2.6 Soporte al usuario.
2.6.1 Hipertexto e hipermedia.
2.6.2 Ayuda en línea.
2.7 Evaluación.

Introducción

Por muchos años IHC se centraba ampliamente en el diseño de la interfaz de usuario.
Las primeras innovaciones en IHC fueron la creación de cosas como la pluma ligera, el primer mouse de computadora (interacción flexible con las cosas de la pantalla).
Sin embargo, el foco o centro de atención estaba en la pantalla.
Así se desarrollaron muchos principios sobre cómo diseñar bien "cosas" para una pantalla.

Introducción

Se tomó prestado de las industrias de revistas e impresión el valor de las cuadriculas para mostrar contenido y guiar a los usuarios en las interfaces.

Introducción

Se crearon leyes que rigen lo difícil que es para los usuarios seleccionar lo que quien en pantalla
- Ejemplo:
  - Se examinó si es más fácil seleccionar un menú en la Mac donde los menús siempre están en la parte superior de la pantalla,. O en una PC donde se agrupan con la ventaja individual.

Introducción

Se desarrollaron técnicas para ayudar a que las interfaces se adapten a diferentes tamaños de pantallas y métodos para el prototipado rápido de interfaces de usuario, usando papel y lápiz.

Introducción

A través de esta historia, el diseño UI se convirtió en un campo bien definido de investigación.
De hecho muchos de los conceptos de IHC fueron concebidos en el contexto del diseño de interfaces de usuario.

Introducción

IHC es por un lado investigación y por otro diseño:
- Investigación:
  - Investigar al usuario, comprender sus necesidades, evaluar sus interacciones con los diseños que se crean para ellos.
- Diseño:
  - Fase de creación de prototipos con la investigación en mente.
  - Diseñar interacciones para ayudar a los humanos a interactuar con las computadoras, utilizando principios conocidos como diseñar con un cognición distribuida en mente, o asegurarse que el usuario desarrolle buenos modelos mentales de la forma en que funciona la interfaz, o asegurarse de diseñar con un diseño universal en mente.

Introducción

La investigación y el diseño no son conceptos aislados.

Introducción

Los resultados de la investigación de usuarios informan los diseños que se construyen y los resultados de los diseños informan la investigación en curso.
Similar a los ciclos de retroalimentación que se diseñan para los usuarios.
- Usan lo que saben para participar en la tarea y luego usar los comentarios de esa participación para informar lo que saben.
- Se usa lo que sabemos para diseñar buenas interfaces y luego usar los resultados de esas interfaces para informar nuestra investigación en curso.

Introducción

El objetivo del diseño es "diseñar interacciones efectivas entre humanos y computadoras".
El diseño toma dos formas:
- Actividad donde se aplican principios conocidos a un nuevo problema.
- Proceso donde se obtiene información y se utiliza para desarrollar alternativas de diseño, evaluarlas con usuarios y revisarlas.
Tener cuidado: no se ignoran décadas de experiencia en el diseño de interfaces, pero el sólo aplicarlas a un nuevo problema no garantiza que se obtenga un buen diseño.

2.1 Diseño de Interfaces

Conceptos Básicos de Diseño:
- Diseño.
  - Qué es, intervenciones, objetivos, limitaciones.
- Proceso de Diseño.
  - Qué pasa y cuándo.
- Usuarios.
  - Quiénes son, cómo son, etc., (usando personas en el diseño).
- Escenarios.
  - Historias ricas de diseño.
- Navegación.
  - Encontrar el camino alrededor de un sistema
- Iteración y prototipos.
  - ¡Nunca lo harás bien la primera vez!

2.1 Diseño de Interfaces

Diseño:
- Objetivos - Propósitos.
  - ¿Para quien es?, ¿para qué lo quieren?.
- Restricciones
  - Plataformas, costo, materiales..
- Compensaciones

2.1 Diseño de Interfaces

El proceso de diseño

2.1 Diseño de Interfaces

El proceso de diseño:
- Requerimientos.
  - Qué hay y qué se desea.
- Análisis.
  - Ordenar y entender.
- Diseño.
  - Qué hacer y cómo decidir.
- Iteración y prototipado.
  - Entendiéndolo y encontrar que es realmente necesario.
- Implementación y despliegue.
  - Hacerlo y sacándolo.

2.1 Diseño de Interfaces

¿Tiempo limitado?
- Diseño de compensación.
¿Usabilidad?
- ¿Encontrar los problemas y solucionarlos?
- ¿Qué solucionar?
Un sistema perfecto está mal diseñado.
- Demasiado bueno implica demasiado esfuerzo en diseño.

2.1 Diseño de Interfaces

Usuarios :
- Conoce a tu usuario.
  - ¿Quienes son?
  - Probablemente no como tú!!
  - Habla con ellos.
  - Observa a ellos.
  - Usa tu imaginación.
  - Lee acerca de ellos - alguien más ya lo hizo, no ocupas estudiarlos a profundidad.
- Persona:
  - Un modelo preciso y descriptivo del usuario, lo que el/ella desea lograr y pro qué (arquetipos compuestos, con motivaciones y objetivos).
  - Utilizar como usuario sustituto (qué pensaría esta persona)
  - Los detalles importan (hacer a esta persona real)

2.1 Diseño de Interfaces

Escenarios (story-board):
- - Historias para el diseño.
    - Comunicar y validar con otros.
    - Entender las dinámicas.
  - Linealidad
    - El tiempo es lineal, nuestras vidas son lineales, pero no se muestran alternativas.
  - ¿Que desean los usuarios hacer?
  - Tutorial paso a paso (qué ven, qué hacen, qué piensan).
  - Para dispositivos móviles es importante considerar el contexto de uso.
  - Usar y reutilizar en todo el diseño.

2.1 Diseño de Interfaces

Escenarios (story-board)
- Mock up - la maqueta funciona mejor si no está pulida del todo.
- Explora la interacción (qué pasa cuando).
- Explora la cognición (qué piensan los usuarios).
- Explora la arquitectura (qué pasa dentro).
- Valida contra otros modelos.
- Expresa la dinamicidad (apariencia, comportamiento).

2.1 Diseño de Interfaces

Navegación
- Estructura local - una única pantalla.
- Estructura global - todo el sitio.
- Piensa acerca de la estructura.
  - Dentro de una pantalla .
  - Saliendo de la pantalla.
  - Estructura del sitio, movimiento entre pantallas.
  - Aún más ancho (relación con otras aplicaciones).
- Cuatro reglas de oro:
  - Conoce donde estás.
  - Conoce que puedes hacer.
  - Conoce hacia a donde te diriges (qué pasará),
  - Conoce donde has estado (o qué has hecho).

2.1 Diseño de Interfaces

Navegación
- Jerarquías de navegación.
  - La profundidad es difícil.
  - Mas uso del 7 +-2 de Miller.
    - Memoria de corto plazo, no tamaño del menú.
  - ¿Óptimo?
    - Muchos elementos en cada pantalla, pero estructurados dentro de la pantalla.
  - Desarrolla diagramas de red.
    - Diferentes rutas a través del sistema.
    - Qué lleva a qué.
    - Qué pasa cuando se incluyen ramas.
    - Mas tareas ordenadas que jerarquía.

Actividad

Leer "Applying User-Centered Design to Mobile Appplication Development".

-Participe y debata en el foro de discusión sobre esta lectura.

2.2 Metodologías

Diseño de Interfaces

2.2 Metodologías

Las metodologías para el diseño de interfaces de usuario varían de acuerdo al enfoque:
- Diseño centrado en el sistema (SOD)
- Diseño centrado en el usuario (UCD)
- Diseño centrado en la experiencia del usuario (UX)
- Diseño centrado en la interacción (IxD).
IHC ha adoptado un modelo de diseño que aspira a incorporar las siguientes premisas:
- Centrado en el usuario
- Multidisciplinario
- Altamente iterativo
- Centrado en las experiencia del usuario

2.2 Metodologías

Diseño orientado al sistema (SOD):
- Dirigido a la tecnología.
- Enfocado en los componentes.
- Desarrollo antes de validación.
- Limitada cooperación interdisciplinaria.
- Enfocada a la arquitectura interna.

2.2 Metodologías

Diseño centrado en el usuario (UCD)
- Dirigido al usuario.
- Enfocado a soluciones.
- Equipo de trabajo multidisciplinario.
- Enfocado en el diseño externo.
- Diseños validados
- Enfoque en usuarios actuales y futuros.
- Considera laws habilidades, necesidades, contexto y tareas.

2.2 Metodologías

Diseño centrado en la experiencia del usuario (UX):
- Se enfoca en como se siente el usuario cuando utiliza un producto.
- Enfocado en crear productos que proporcionan sentido y experiencias relevantes a los usuarios.

2.2 Metodologías

Diseño centrado en la interacción (IxD):
- Se enfoca en definir las formas de operar la interfaz, los flujos de operación y las respuestas del sistema.
- Se enfoca en la forma en que los usuarios interactúan con el sistema.

Diseño Centrado en el Usuario

Subtitle

Diseño Centrado en el Usuario

Características:
- Enfoque para el desarrollo de sistemas e interfaces de usuario.
- Se enfoca en la comprensión de:
  - Usuarios,
  - Sus objetivos y tareas y
  - El entorno (físico, organizacional, social).
- Presta atención en todo esto durante el desarrollo.

Diseño Centrado en el Usuario

El estándar ISO 13407 describe el diseño centrado en el humano (human-centered design).
- Principios del HCD:
  - Participación activa de los usuarios.
  - Asignación adecuada de funciones entre sistema y usuarios.
  - Iteración de soluciones de diseño.
- Actividades esenciales en HCD:
  - Comprender y especificar el contexto de uso.
  - Especificar los requerimientos de usuario y organizacionales.
  - Producir soluciones de diseño (prototipos).
  - Evaluar diseños de usuario en función de los requerimientos.

El estándar ISO 13407 describe el diseño centrado en el humano (human-centered design).
- Principios del HCD:
  - Participación activa de los usuarios.
  - Asignación adecuada de funciones entre sistema y usuarios.
  - Iteración de soluciones de diseño.
- Actividades esenciales en HCD:
  - Comprender y especificar el contexto de uso.
  - Especificar los requerimientos de usuario y organizacionales.
  - Producir soluciones de diseño (prototipos).
  - Evaluar diseños de usuario en función de los requerimientos.

Diseño Centrado en el Usuario

¿Qué es el enfoque centrado en el usuario?:
- Enfoque temprano en usuarios y tareas: estudio directo de características cognitivas, conductuales, antropomórficas y de actitud.
- Medición empírica: se observan, registran y analizan las reacciones y el rendimiento de los usuarios ante escenarios, manuales, simulaciones y prototipos.
- Diseño iterativo: cuando se encuentran problemas en las pruebas de usuario, corríjalos y realice más pruebas

Diseño Centrado en el Usuario

4 actividades básicas:
- 1. Identificar necesidades y establecer requisitos.
- 2. Desarrollando diseños alternativos.
- 3. Crear versiones interactivas de los diseños.
- 4. Evaluación de diseños.

Diseño Centrado en el Usuario

Elementos esenciales:
- Visibilidad.
  - Los usuarios deberían poder ver desde el principio qué pueden hacer con el sistema, de qué se trata, cómo pueden usarlo.
- Accesibilidad.
  - Los usuarios deberían poder encontrar información de manera fácil y rápida. Se les debe ofrecer varias formas de encontrar información, por ejemplo, botones de llamada a la acción, opción de búsqueda, menú, etc.

Diseño Centrado en el Usuario

Elementos esenciales:
- Legibilidad.
  - El texto debe ser sencillo de leer, tan simple como eso.
- Lenguaje.
  - Se prefieren ideas y oraciones cortas.
  - Cuanto más fácil sea la frase y las palabras mejor.

Diseño Centrado en el Usuario

¿Cuál es el proceso del diseño centrado en el usuario?
- Identificar los usuarios del sistema y especificar el contexto de uso.
- Agrupar los datos para formular un juego de requerimientos y objetivos de usuario que deben satisfacerse para asegurar que las necesidades de los usuarios se consideraron.
- Considerar los objetivos en el proceso iterativo del desarrollo, hacer pruebas de usabilidad para obtener retroalimentación de los usuarios.
- Los requerimientos de los usuarios se obtienen a través de métodos como grupos focales, pruebas de usabilidad, clasificación de tarjetas, diseño participativo, cuestionarios y entrevistas.

Diseño Centrado en el Usuario

Por lo general, las siguientes áreas se analizan para tener una mejor idea de lo que quieren los usuarios objetivo:
- Persona:
  - Se crea al comienzo del proceso para tener un ejemplo de los usuarios objetivos a quien se desea alcanzar.
  - Representación de un grupo particular de personas con los mismos patrones; comportamiento, necesidades,
    objetivos, habilidades, actitudes, etc.
  - Ayuda a tomar decisiones correctas sobre las características del producto, navegación, interacciones, diseño visual y mucho más.
  - Ayuda a priorizar el trabajo de diseño, comprender lo que el usuario necesita y qué funciones son simplemente agradables de agregar y tener.

Diseño Centrado en el Usuario

...
- Escenario:
  - Es una "vida diaria" de su objetivo, de su persona. Se trata de problemas que tiene la persona. Aquí, pequeños detalles, tanto emocionales como físicos, importan.
- Casos de uso:
  - Es una serie de pasos para que la persona logre el objetivo.

Diseño Centrado en el Usuario

Algunos problemas prácticos:
- ¿Quiénes son los usuarios?
- ¿Cuáles son sus necesidades?

Diseño Centrado en el Usuario

Métodos de diseño más comunes:

Diseño Centrado en el Usuario

Desarrollo ágil y diseño centrado en el usuario:
- El diseño centrado en el usuario encaja muy bien en las metodologías de desarrollo ágil.
  - Ventajas:
    - Enfoque en el cliente.
    - Desarrollo iterativo.
    - Pruebas.
    - Transparencia.
    - Reducción de costos.
    - Alta satisfacción del cliente.
    - Reducción de riesgos.
    - Productividad.

Actividad

Los alumnos por equipos investigarán los métodos de desarrollo de hipertexto e hipermedia y cual es su aplicabilidad en el diseño de interfaces de usuario.

Deberán realizar un cuadro sinóptico sobre los distintos tipos encontrados.