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

Tema 2. Principios de diseño centrado en el
usuario
30258- Diseño Centrado en el Usuario.
Diseño para la Multimedia
Dra. Sandra Baldassarri
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
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
•
•
–
Definir tareas:
•
•
–
Guías
Estándares
Reglas
Implementación
–
•
Análisis jerárquico de las tareas
Diálogos
Definir estilo: Interacción e Interfaz
•
•
•
•
Técnicas de prototipado
Técnicas de evaluación
Prototipos funcionales, evaluación
Lanzamiento
–
Evaluación: test de usabilidad
Ref: Transparencias IPO
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
Ref: Transparencias IPO
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
implementada la aplicación.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Tipos de prototipos. Funcionalidad
• Prototipado horizontal y vertical
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Tipos de prototipos. Calidad
• Prototipos de baja fidelidad
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Tipos de prototipos. Calidad
• Prototipos de alta fidelidad
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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”
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
Técnicas de prototipado:
– Escenarios
• Narrativa, Diagrama de flujo, Texto de procedimientos, Storyboard
–
–
–
–
–
–
–
–
Prototipo en papel, en vídeo, software
Mapa de navegación
Sketching
Wireframe
Mockups
Esquemas
Prototipo basado en cartas
Wizard-of-Oz
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
• Escenarios
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
Sketching
• Importante en los prototipos de baja fidelidad
• Se utilizan símbolos simples (no importa la habilidad
para dibujar)
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
El wireframe tiene como objetivo
proporcionar la visualización del
diseño o las funcionalidades de
una aplicación o sitio web.
El wireframe se centra en:
– Tipos de información que se va a
mostrar
– Cantidad de las funciones disponibles
– Prioridades relativas de la información
y las funciones
– Reglas para mostrar ciertos tipos de
información
– Efecto de los distintos escenarios en
la pantalla
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
• Los wireframes ayudan a establecer funcionalidad y
las relaciones entre las diferentes plantillas de
pantallas.
• Un proceso iterativo de creación de wireframes es
una forma efectiva de hacer prototipos de páginas
rápidos, mientras se evalúa la aceptación de un
concepto de diseño.
• Los wireframes se usan para hacer prototipos de
sitios web, aplicaciones móviles, aplicaciones para
ordenador, u otros productos basados en pantalla.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
Mockup: maqueta de diseño digital, lo más similar
posible al modelo real.
Los mockups se suelen realizar con:
–
–
–
–
–
Adobe Illustrator
Adobe Photoshop
Gimp
Corel Draw
3ds Max…
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Técnicas de prototipado
• Ejemplo de uso de un prototipo basado en cartas
para representar un caso de uso de una aplicación
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
User
Razonamiento
Percepción visual
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
>Blurb blurb
>Do this
>Why?
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.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
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
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
En el mercado de la interacción persona ordenador y
el diseño, hay algunos conceptos que se suelen
confundir o utilizar de diferentes maneras.
¿Cuál es la diferencia entre sketch, wireframe, mockup
y prototipo?
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
Sketch: Boceto estático en baja calidad de un diseño
El entregable es una imagen, o un papel.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
Wireframe: Representación estática en baja calidad de
un diseño
Un wireframe conecta la estructura
conceptual, o arquitectura de la
información, con la superficie,
o diseño visual del sitio web.
El entregable es una imagen.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
Mockup: Representación estática en calidad media o
alta de un diseño
El entregable es una imagen.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Prototipado: Algunas consideraciones prácticas
Prototipo: Representación navegable del producto final
en calidad media o alta.
El entregable es un HTML, PPT,
animación o formato navegable.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
La arquitectura de la información se puede definir
como la práctica profesional dedicada a la
organización, la clasificación, la estructuración y el
etiquetado de grandes volúmenes de contenidos
A diferencia del diseño de la interacción, más
focalizado en la funcionalidad y el comportamiento
interactivo de los productos digitales, la arquitectura de
la información se centra en el contenido, en cómo
organizarlo para que el usuario pueda navegar por él,
localizar la información deseada y manejarla de
manera eficiente y satisfactoria.
Arquitectura de la información
La arquitectura de la información trata indistintamente
el diseño de: sitios web, interfaces de dispositivos
móviles (como lectores de mp3), CD interactivos,
videoclips digitales, relojes, tableros de instrumentos
de aviones, interfaces de máquinas dispensadoras,
interfaces de juegos electrónicos, etc.
Su principal objetivo es facilitar al máximo los procesos
de comprensión y asimilación de la información, así
como las tareas que ejecutan los usuarios en un
espacio de información definido.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Componentes de la AI:
– Tipos de estructura: jerárquica, web, lineal
– Esquemas de organización: temas, tareas, formato,
audiencia, alfabético, temporal, geográfico, atributos,
popularidad
– Nombre de las etiquetas: específico vs conciso
– Búsqueda: diseñadas para encontrar la información
• Documentación de la AI:
– Mapas del sitio
– Inventarios de contenidos
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Métodos para organizar la información: Diagrama de
afinidad
• Proceso:
–
–
–
–
Expresar el problema
Análisis de las ideas
Clasificación
Relacionar ideas
(causa-efecto)
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Métodos para organizar la información: Card Sorting
(ordenamiento de cartas)
–
–
Cómo agrupar la información de forma que le permita a la gente
encontrar lo que están buscando, en base al reconocimiento de los
grupos.
Sirve para establecer la terminología que podría ser fácil o difícil de
comprender
Apples
Oranges
Bananas
Fruit
Apples
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Oranges
Bananas
Arquitectura de la información
• Métodos para organizar la información: Card Sorting
Fruit
Local
Tropical
Apples
Oranges
Fruit
Bananas
Pyrus
Citrus
Musa
Apples
Oranges
Bananas
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Métodos para organizar la información: Card Sorting
Se parte de una descomposición inicial
Se preparan tarjetas de cartulina, cada una con una acción o tarea
Se presenta a un conjunto de usuarios, que las agrupan y organizan
Se estructuran las tarjetas según los resultados
Si es necesario, se reorganiza todo lo necesario y se comienza de
nuevo.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Métodos para organizar la información: Card Sorting
Cada etiqueta corresponde una funcionalidad o contenido del web
Tarjetas lo suficientemente cercanas para poder crear grupos
Card Sorting Abierto
• No hay grupos preestablecidos.
• Útil para nuevos sitios.
Card Sorting Cerrado
• Los grupos o categorías están preestablecidos.
• Útil cuando se añaden entradas a estructuras preexistentes.
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Ejemplo: aCaSo
– El administrador crea la sesión, las tarjetas (y grupos) e
incluye los usuarios que participarán
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
• Ejemplo: aCaSo
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Arquitectura de la información
Lecturas recomendadas:
– Top 10 Information Architecture (IA) Mistakes
http://www.nngroup.com/articles/top-10-ia-mistakes/
– Card Sorting: Pushing Users Beyond Terminology Matches
http://www.nngroup.com/articles/card-sorting-terminology-matches/
– Nielsen Norman Group Webpage
Topic: Information Architecture
http://www.nngroup.com/topic/information-architecture/
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Resumen
• Las técnicas de prototipado se pueden clasificar por
su funcionalidad o por su calidad.
• Hay múltiples técnicas para diseñar la información y
la navegación, cada una de ellas con diferentes
propósitos y en diferentes etapas. Es necesario
saber cuándo conviene aplicar una u otra.
• La arquitectura de la información permite estructurar,
organizar y clasificar la información. Técnicas.
• Recordar las técnicas de evaluación con usuarios
para verificar la viabilidad del diseño
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia
Referencias - Diseño
• Interaction Design: Beyond Human-Computer
Interaction, Capítulo 11. H. Sharp, Y. Rogers & J.
Preece. Wiley, 2011.
• A. Floriá Cortes (2000): Recopilación de métodos de
usabilidad. SIDAR. Disponible en:
http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm
• Y. Hassan, F.J. Martín, G. Iazza (2004): Diseño Web
Centrado en el Usuario: Usabilidad y Arquitectura de
la Información. Disponible en:
http://www.upf.edu/hipertextnet/numero-2/diseno_web.html
30258 – Diseño Centrado en el Usuario –
Diseño para la Multimedia