Tema 2. Principios de diseño centrado en el usuario

(1)

Dra. Sandra Baldassarri

Tema 2. Principios de diseño centrado en el

usuario

30258- Diseño Centrado en el Usuario. Diseño para la Multimedia

Objetivos

Conocer los principios de diseño centrados en el usuario y su aplicación al diseño web y multimedia.

• Diseño de la información y la navegación

– Revisión de las técnicas vistas en IPO

– Estudio de nuevas técnicas de prototipado para modelar el sistema en desarrollo, con especial atención a aquellas que se usan en diseño web y diseño multimedia.

• Diseño del contenido de la información:

– Arquitectura de la información: Definición y Técnicas

• Técnicas de evaluación

– Aplicar técnicas de evaluación con usuarios para verificar la viabilidad del sistema

(2)

30258 – Diseño Centrado en el Usuario – Diseño para la Multimedia

El proceso de diseño

• Análisis de Requisitos – Prototipado, Evaluación

• Diseño

– Iteración: Prototipado y Evaluación

• Técnicas de prototipado • Técnicas de evaluación

– Definir tareas:

• Análisis jerárquico de las tareas • Diálogos

– Definir estilo: Interacción e Interfaz

• Guías • Estándares • Reglas

• Implementación

– Prototipos funcionales, evaluación

• Lanzamiento

– Evaluación: test de usabilidad

Ref: Transparencias IPO

El proceso de diseño

• Diseño

– Iteración: Prototipado y Evaluación

– Técnicas de prototipado

• Esbozos o bocetos (AR) • Escenarios

– Narrativa – Diagrama de flujo – Texto de los procedimientos – Storyboard

• Prototipos en papel • Prototipos en vídeo – Técnicas de evaluación

– Definir tareas:

• Análisis jerárquico de las tareas • Diálogos

– Definir estilo

• Guías • Estándares • Reglas

(3)

Diseño. Prototipado

¿Qué es un prototipo?

Técnicas de prototipado

• Clasificación de los prototipos según su funcionalidad

– Vertical – Horizontal

• Clasificación de los prototipos según su calidad

– Baja fidelidad – Alta fidelidad

• Otras técnicas de prototipado

Diseño. Prototipado

• ¿Qué es un prototipo?

Un prototipo es un objeto diseñado para realizar una demostración de cualquier tipo.

• ¿Qué se puede prototipar?

– Aspectos técnicos

– Flujo de trabajo, diseño de tareas

– Diseño de pantallas, información a mostrar – Áreas críticas, difíciles o controvertidas

• La etapa de prototipado se basa en la elaboración

de modelos o prototipos de la interfaz del sitio o aplicación web.

(4)

Técnicas de prototipado

• ¿Qué técnicas de prototipado se utilizan en el diseño de interfaces?

– Escenarios

• Narrativa

• Diagrama de flujo

• Texto de los procedimientos • Storyboard*

– Prototipo en papel – Prototipo en vídeo – Prototipo software

Ref: Transparencias IPO

Tipos de prototipos. Funcionalidad

• Los prototipos se pueden clasificar según la

funcionalidad reproducida:

– Prototipado horizontal: Se reproduce gran parte del aspecto visual, pero sin que esos modelos de interfaz estén

respaldados por la funcionalidad real que tendrá finalmente.

– Prototipado vertical: Se reproduce únicamente el aspecto visual de una parte de la interfaz, pero la parte reproducida posee la misma funcionalidad que tendrá una vez

(5)

Tipos de prototipos. Funcionalidad

• Prototipado horizontal y vertical

Tipos de prototipos. Funcionalidad

• Prototipado horizontal

– Muestra el espectro de características de una aplicación.

– Muestran las páginas principales, sin demasiada profundidad.

– Permite a los usuarios “navegar” por el sistema.

– Las páginas que implementan tareas específicas no están

presentes.

– Sirven para ver la lógica general del sitio.

– Se utiliza en las etapas tempranas del diseño:

• Para determinar funcionalidades a incluir

• Para decidir sobre el concepto de la interfaz de usuario

– Ayuda a evaluar:

• Navegación

• Preferencias de usuario • Accesibilidad

(6)

Tipos de prototipos. Funcionalidad

• Prototipado vertical

– Demuestra una característica específica de una aplicación

– Permite que el usuario sólo utilice esa función concreta

– Implementan las páginas claves para completar una tarea

específica.

– Apropiado cuando hay tareas complejas que no se comprenden.

– No es necesario que implementen enlaces que conectan a otras

tareas u otras partes del sitio.

– Se utiliza en las etapas tempranas del diseño:

• Para comparar entre diferentes diseños de una función

– Ayuda a evaluar:

• El diseño óptimo de una función en particular • Optimizar la usabilidad de esa función

Tipos de prototipos. Calidad

Los prototipos se pueden clasificar según la calidad o

fidelidad del prototipo (refinamiento progresivo):

– Prototipado de baja fidelidad: El aspecto de prototipo distará bastante del aspecto final.

– Prototipado de alta fidelidad: El prototipo será muy parecido a la interfaz una vez terminada.

(7)

Tipos de prototipos. Calidad

Prototipos de baja fidelidad (low-fidelity prototype)

• Son prototipos fáciles de realizar

• Se suele utilizar un medio que sea diferente del prototipo final, ej: prototipado en papel.

• Se caracteriza por ser rápido, barato y fácil de cambiar

• Se utiliza para verificar aspectos del diseño con clientes o usuarios potenciales.

• Ejemplos: sketch de pantallas, secuencia de tareas, notas “post-it”, storyboards, wizard-of-oz

Tipos de prototipos. Calidad

(8)

Tipos de prototipos. Calidad

Prototipo de alta fidelidad (high-fidelity prototype)

• Se suele utilizar un medio parecido al esperado en el producto final

• Para la representación del sistema se sueen utilizar entornos como Macromedia Director, Dreamweaver, Photoshop, etc.

• Conviene dejarlo para etapas más avanzadas del diseño.

• Limita la interacción con los clientes

• Hay peligro de que los clientes piensen que el producto está terminado

Tipos de prototipos. Calidad

(9)

Tipos de prototipos. Calidad

• Alternativas:

– Prototipos de fidelidad media: no se tienen en cuenta detalles como tipos de letra, colores, temas gráficos… – Prototipos de alta fidelidad “baratos”

Técnicas de prototipado

Técnicas de prototipado:

– Escenarios

• Narrativa, Diagrama de flujo, Texto de procedimientos, Storyboard

– Prototipo en papel – Prototipo en vídeo – Prototipo software – Mapa de navegación – Sketching – Esquemas

– Prototipo basado en cartas – Wizard-of-Oz

(10)

Técnicas de prototipado

• Escenarios

Técnicas de prototipado

Mapa de navegación

Mapa de un sitio web: Diagrama o grafo que refleja la estructura del sitio y algo sobre la estructura o flujo de navegación dentro del sitio.

(11)

Técnicas de prototipado

Sketching

• Importante en los prototipos de baja fidelidad

• Se utilizan símbolos simples (no importa la habilidad para dibujar)

Técnicas de prototipado

Esquemas (Schematics)

Representaciones de la disposición (layout) y

contenido que aparecerá en las páginas individuales. No contienen imágenes aunque sí están indicados los lugares donde estas van.

(12)

Técnicas de prototipado

Prototipo basado en cartas • Cartas tipo índice (7 x 12 cm) • Cada carta representa una

pantalla o parte de la pantalla • Se utilizan generalmente para

el desarrollo de sitios web

Técnicas de prototipado

• Ejemplo de uso de un prototipo basado en cartas para representar un caso de uso de una aplicación

(13)

Técnicas de prototipado

Mago de Oz (Wizard-of-Oz)

• El usuario piensa que está interactuando con el ordenador pero el desarrollador quien genera las salidas del sistema.

• Generalmente se utiliza en los primeros diseños para entender las expectativas de los usuarios. • No se implementan las partes más complejas y

complicadas del prototipo

• El usuario tiene la experiencia sin que haya un esfuerzo excesivo de implementación del prototipo.

Técnicas de prototipado

Mago de Oz (Wizard-of-Oz)

Áreas típicas en las que se suele emplear esta técnica:

– Reconocimiento de voz – Síntesis de voz

– Anotaciones – Razonamiento

– Percepción visual _{>Blurb blurb}

>Do this >Why?

(14)

Prototipado: Algunas consideraciones prácticas

Todas las técnicas de prototipado conllevan compromisos, que se deben tener en cuenta:

– Tiempo de desarrollo – Realismo

Hay investigaciones muestran que:

– Aquellos que trabajan en papel exploran variadas alternativas de diseño.

– Aquellos que trabajan en ordenador tienden a tomar una única idea y explorarla en detalle.

Prototipado: Algunas consideraciones prácticas

• Los prototipos altamente realistas y muy trabajados estéticamente:

– Generalmente restringen los posibles comentarios de evaluación

– Los usuarios dejan de cuestionarse el concepto básico – El feedback se centra en detalles del diseño visual o el

diseño de la interacción

• Los prototipos con diseños realistas pero menos acabados estéticamente

– Pueden ayudar a los usuarios a cuestionarse el concepto – Se pueden mejorar fácilmente los diseño visuales

(15)