Taller online de Diseño de Experiencia de Usuarios y Usabilidad realizado en conjunto con AyerViernes U y Mejorando.la

1. Taller de UX & Usabilidad
Sesión Nº1/3
Desde la Estrategia a la Arquitectura de la Información
!
!
!
!
Mejorando.la
Sábado 16 de noviembre de 2013

2. ¿Quién soy?
@jorgebarahona
@ayerviernes
@clerkhotel
www.facebook.com/jorgebarahona
Diseñador de Experiencia de Usuarios
Emprendedor serial
ayerviernes.com
clerkhotel.com
monterilla.cl
ead.pucv.cl
jbarahona.com
jbarahona@ayerviernes.com

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

6. Estrategia

7. Estrategia
•Brief
•Contrabrief
•Propuesta Comercial
•Debrief
•Benchmark
•Brief final
Estrategia

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

12. Benchmark
Estrategia
https://www.dropbox.com/s/3oyytodnf0y0j3k/
UXa_International_eBanking_Benchmark_Study_2012.pdf

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

15. PRE-SERVICIO
Expectativas
Estrategia
SERVICIO
POST-SERVICIO
Experiencias
Satisfacción
Service Design Thinking, Marc Stickdorn & Jakob Schneider

16. Sin Estrategia es difícil
Diseñar un portal

17. Investigación

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

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

24. Escenario
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

27. Thoughtless Acts?: Observations on Intuitive Design
Jane Fulton Suri (IDEO)
Investigación

28. Conversaciones guiadas
Investigación

29. Arquitectura de la Información

30. Elección 2000 USA
Ai

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

33. Herramientas de Ai
•Indexación de Contenidos
•Taxonomía
•Card Sorting
•Mapas de Navegación
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

35. www.learnchile.cl
Ai

36. Taxonomía
•Jerarquía de conceptos
•Orden de los contenidos
•Genera una regla de cómo se organizarán y encontrarán
los contenidos
Ai

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

38. Herramientas
•http://www.optimalworkshop.com/optimalsort.htm
•http://uxpunk.com/websort/
•Lapiz & papel :)
Ai

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)

44. ¿Preguntas, dudas,
ideas, ejemplos, etc.?
¡Ahora!