Professional Documents
Culture Documents
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
• 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
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
• 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
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
– Escenarios
• Narrativa
• Diagrama de flujo
• Texto de los procedimientos
• Storyboard*
– Prototipo en papel
– Prototipo en vídeo
– Prototipo software
Ref: Transparencias IPO
• 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
• 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
• 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:
– 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
Mapa de navegación
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
• 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.
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.
Técnicas de prototipado
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 >Blurb blurb
>Do this
>Why?
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
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
• Proceso:
– Expresar el problema
– Análisis de las ideas
– Clasificación
– Relacionar ideas
(causa-efecto)
Arquitectura de la información
Fruit
Fruit Fruit
Arquitectura de la información
Arquitectura de la información
• Ejemplo: aCaSo
– El administrador crea la sesión, las tarjetas (y grupos) e
incluye los usuarios que participarán
• Ejemplo: aCaSo
Arquitectura de la información
Lecturas recomendadas:
– Top 10 Information Architecture (IA) Mistakes
http://www.nngroup.com/articles/top-10-ia-mistakes/
Referencias - Diseño