3. Es inventar el futuro
¿Qué es Diseñar la
Experiencia de los usuarios?
Es construir un conocimiento
4. Diseñar Experiencica
Es inventar el futuro a través de
Arquitectura de la
Diseño
los verbos, relatos quede Interacción
Información
construyen aprecio
y compromiso Diseño de Interfaces
Diseño de Front End
5. Sesión Nº1
Metodología UX
Brief
Estrategia
Propuesta Comercial
Benchmark
1
Usabilidad &
Comportamiento de las
Personas
Etnografía
Personas & Escenarios
Indexación de Contenidos
Arquitectura de la
Información
Card Sorting
Mapas de Navegación
8. Brief
•¿Quiénes?
•¿Qué?
•¿Cuál es el problema?
•Presupuesto
•¿Por qué?
•¿Para qué?
•¿Para cuándo?
•¿Con quiénes?
Estrategia
https://www.dropbox.com/s/94ll2b8h7c5djre/BriefAyerViernes2013.pdf
9. Un buen Brief permite
•Diseñar una Propuesta
•Diseñar una Estrategia
•Una buena Estrategia permite determinar
•Metas y Objetivos
•Tácticas y plazos
•Hacer un balance (de-brief)
Estrategia
10. Propuesta Comercial
•Identificador claro
•Responsable (ambas empresas)
•Contexto (Brief)
•Metodología o Visión
•Propuesta
•Objetivos, tácticas y entregables
•Tiempos y Precios
•Exclusiones
Estrategia
Merlin (OSX)
projectwizards.net
OmniPlan (OSX-iPad)
omnigroup.com/omniplan/
Team Gantt (Online)
https://teamgantt.com
Gantt Project (Linux)
http://www.ganttproject.biz
11. Benchmark
•Comparativo
•Cualitativo
•Competidores: buenas prácticas… o malas :)
•Normalmente se hace entre 3 a 5 consultores
•Cuantitativo
•Consultores construyen parámetros específicos que
genere indicadores desde preguntas específicas
• Permite generar metas del proyecto
Estrategia
13. Estrategia UX
•Entrega los recursos necesarios para crear un mapa futuro
•Baja las tácticas con objetivos, tiempos, costos y
ejecutores para lograr las metas planteadas en la Estrategia
•Diseña una Gantt acorde a los escenarios a enfrentar
•Avanza sistemáticamente y no por reacción.
•Involucra a toda la compañía. Deja de ser una idea de
Gerencia para transformarse en una idea de todos
•Debe necesariamente involucrar a la alta gerencia
Estrategia
14. ¿Cómo hacer Estrategia UX?
Diseño del Servicio
Estrategia
Service Design Thinking, Marc Stickdorn & Jakob Schneider
18. Usabilidad & Comportamiento de las Personas
•Usabilidad
•Pone a prueba los sistemas
•Test Heurísticos
•Paseos cognitivos
•Comportamiento de las Personas
•Personas & escenarios
•Etnografía
•Conversaciones guiadas
Investigación
19. Personas & Escenarios
•Personas = Arquetipos o personajes
•Permite ponernos en el lugar de los
usuarios finales para los que diseñamos
•Observa escenarios reales de uso
•Permite tener la descripción de los usuarios
para hacer test, etnografía y
conversaciones guiadas
http://www.amazon.com/
dp/0672316498
•Personifica lo que hacemos
www.cooper.com
Investigación
20. Personas
•Se describe detalladamente
•Pueden ser varios
•Hay primarios y secundarios
•Usuario v/s personaje
•Restringe el objetivo de usuarios
•El personaje debe pertenecer a la realidad
•Saber a quién le diseñamos (y a quién no)
•Los diferenciamos por sus metas
Investigación
21.
22.
23. Tipos de personas
•Primario
•necesitan interacciones exclusivas
•sumar más de 3 puede inducir a replantear la persona
•Secundario
•puede usar interacciones ajenas
•Diseñar para los primarios
Investigación
25. Personas & Escenarios
•Busca personificar el diseño en situaciones reales de uso
•Conduce el futuro del proyecto. define
•Estudios
•tests
•Wireframes
•Interfaces
•Front End
Investigación
http://www.amazon.com/dp/
0470084111
26. Etnografía
•Observación y participación con grupos específicos de
usuarios
•Buscamos entender las acciones y conversaciones que tienen
cuando usan un determinado servicio
•Usamos Notas de Campo para registrar la observación
•Notas, Fotos, vídeos y croquis
Investigación
31. ¿Qué es la Ai?
Saul Wurman (1962)
Organiza patrones inherentes en los datos,
haciendo claro lo complejo.
Edward Tufte
El diseño de la presentación de la información
para facilitar el entendimiento.
Ai
32. ¿Qué es la Ai?
Peter Morville & Louis Rosenfeld
!
Clarifica la misión y visión del sitio, equilibrando
las necesidades del patrocinador
y las necesidades de la audiencia
!
Determina el contenido y funcionalidad
que el sitio va a tener
!
Especifica cómo los usuarios van a encontrar
la informacion al definir su organización,
navegación, etiquetado y sistemas de búsqueda
Ai
34. Indexación de Contenidos
•Listar con jerarquías los contenidos
•Sin filtros
•Usar estructura de indexación científica
•Hacer varios
•Es la primera aproximación a una
organización de contenidos para un
sitio servicio digital
Ai
1.- Xxxxxxxxx
1.1.- Xxxxx xxxxx
1.2.- Xxxx xxx xx
1.2.1.- Xxxxxx
1.3.- Xxxxx
2.- Xxxxxxx xxxxx
3.- Xxxxxx
3.1.- Xxxxxx xxxx
3.2.- Xxxxxxxxxx
3.2.1.- Xxxxxxx
3.2.2.- Xxxxxxx
3.2.3.- Xxxxxxx
3.3.- Xxxxxxxxx
4.- Xxxxxxxx
37. Card sorting
•Organización de menús por tarjetas
•Participan los arquetipos
•Todos tenemos una opinión de cómo organizar el contenido
•Hay coincidencias críticas que permiten estructurarlo sobre
seguro y proyectar una buena jerarquía
39. Mapa de Navegación
•Es la culminación del proceso de Ai
•La materialización de la organización de contenidos
•Permite involucrar a los clientes y TI
•Visualiza las jerarquías, niveles y pertenencias
•Vislumbra elementos
Ai
40. ETAPA 1
(Marzo 2013)
Maquetas navegables
Librería
Contacto
(Normal o
Logeado)
Backoffice
AD
Fichas
publicadas
MyAD
BackEnd
Cliente
Crear cuenta
Verificación
Info
Productos
Exportación
de fichas
Ingresar
Productos
Edición
Pares
relacionases
con AD
Cobro
Track
Tageo de
fotos
Catálogo
Geolocaliza
Publicación
Ai
Teaser
API y
Conexión
Catálogo
Embebible
41. Precios
Temporadas
Rack
Sobreprecio
Calculadora
No aparecen:
• Precio
• Descuento
No aparecen:
• Precio
• Descuento
Cambio de
Tipo de Hab
Aplicar Tarifa
de
Temporada
Aplicar
descuento
libre diario
Aplicar Total
(plano)
SE APLANA LA TARIFA
Aparecen:
• Precio
• Descuento
• Precio Final
Se reinicia
Resumen
Ai
Columna Tipo de Habitación
Aparece:
Tarifa
Promedio
42. Lenguaje de Mapas en Ai
•Lenguaje de Jesse James Garret
(http://www.jjg.net/ia/visvocab/spanish.html)
Ai
43. Sesión Nº2
Mapas de Clases
Diseño de Interacción
Partituras de Interacción
Wireframes
2
Diseño tipográfico y
cromático
Diseño de Interfaces
Dirección de Arte
Fotográfico
Diseño de Interfaces de
Usuarios (UI)