Notación gráfica para el diseño de interacción. ¿Cómo logramos atrapar las sutilezas para ofrecer una experiencia construida para el usuario?

1. LenguajesIxD
notación gráfica para el diseño de interacción

2. simultaneidadycontinuidad

7. antecedentes

8. Jesse James Garret (2005)
AJAX

9. Indie Young
ModelosMentales

10. antes,hayquesaberunpocode...

11. # Usuarios
Email
# Hoteles (cuentas)
user
ID
Cuenta CLERK
Completa
Gratis
Plan
Estándar
Mínima
lat. long.
Ventas
Usuarios habilitados
URL
Logo - Thumbnail
Fecha de Caducidad
Fecha de Creación
Moneda
Clientes
Contrato
Habitaciones
Nombre Hotel
ID
Cuenta Hotel
Moneda Secundaria (U$) y
factor de conversión a
Moneda Primaria
Moneda
Moneda Terciaria (EURO)
y factor de conversión a
Moneda Primaria
Moneda Primaria (CHLP)
Notas
Planta
Camas
Tipo de Habitación
Teléfono (extensión)
Nombre
Número (##)
Habitación
ID
Tipo
Cliente
Tarifa
Habitaciones
Cliente
Fechas (desde -
ID
Status
Venta
Avatar
Permisos
Rol
correo electrónico
Nombres
Usuario
Apellidos
ID
Persona
Institución
Tipo (Cliente)
Cumpleaños
Empresa / Institución
Pais
Teléfono
Facturas
Tarifa
Dirección
Correo electrónico
Historial de Ventas
Nombres
Acompañantes
Prefijo (Sr. Prof. Srta, etc)
Persona
Apellidos
Personas (clientes)
Notas
Facturas
Historial de Ventas
Tarifa
Contacto
URL
Nombre
Dirección
Institución
Notas
Prefijo (S
Apellidos
Correo e
Teléfono
Contac
Nombres
Mapa de Clases Clerk, plataforma de administración Hotelera (versión 0.01)
Tipos de Habitación
Precio
Tipo (Nombre)
$ 0.- $59 $149precio mensual $ 29
2 * #habs. (50 max) 100 * #habs. ∞
Gratis
100
302 10# usuarios
∞
# ventas
∞
CompletaTipo de Plan
# habitaciones
∞
Estándar
50 * #habs. (
50
Mínima
MapasdeClases

12. Diagramadesecuencia

13. CasodeUso
Clerk
Sistema de Reserva
Crea
reserva
Habitación
<incluye>
cliente<incluye>
persona
empresa
<extiende> <extiende>
cliente
<firma documento
de checkin>
Venta
<extiende>
Factura
<extiende>
Generar
cargos a la
cuenta
<usa>
genera PDF
checkout
genera PDF
checkin
<usa>
<usa>
<firma documento
de checkout>login
<usa>

14. DiagramadeEstado
State Diagram - Computer Science

15. pero,enrealidadesfácil

16. ServiceBlueprint
Lynn Shostack (1970s)

18. area of visibility
account executives product executives (BTO) ope
P P P PP P P P PP
script
hazard line
provider’sstepscustomerstepsbackstage
application
support
processes
service
representative
onstagebackstage
implementation
Dialing IBM-HELP to get assistance with Lotus Notes
Carrie Chan | IBM T.J Watson Research Center, Hawthorne NY | 6.15.07
Blueprinting ideas v.4
problem with Lotus
Notes Mail and
Calendar syncing
customer’sjourney
i’m pressing ‘3’ and
nothing is happening...
serviceevidence
he’s apologizing for soft-
ware malfunction - is this
the same problem i was
just having? or should i be
worrying about something
else?
how long am i being
put on hold for?
he’s talking really fast
he’s assuming i know all the
IBM language even though I’ve
repeatedly told him I was new
is he even listeni
me? he seems to
typing a lot. and n
paying attention.
6D1511 is before
6A1511 in the menu
choices... did I hear
6D1511 correctly?
finally, the agent is back
Dislike calling call centers
DIAL TALK TO AGENTNAVIGATE PRE-RECORDED MENU WAIT FOLLOW AGENT
Ask customer what
problem they’re having.
Ask for employee serial
number.
Present customer with menu options to
redirect call.
Redirect call after customer inputs a
choice.
Introduce yourself.
Apologize for software
malfunction.
Ask if they are on or
off site.
Look up information regarding
Lotus Notes Mail and Calendar
syncing on database.
Ask what error message
the customer is getting.
Proceed to follow steps outlined in documentation.Give introductory speech.
line of visibility
WAIT FOR CALL INTRODUCTIONDIRECT CALL TO PROPER DEPT. FIND SOLUTION TO PROBLEM WALK CUSTGET PROBLEM

20. SUDAMÉRICA AIRPASS
Flujo para Europa
Declara su situación
de vuelo
destaca el precio
para pasajero LAN
acciones del
usuario
contacto
directo
proceso
interno
llego en LAN llego en otra
aerolínea
Navega y elige su
programa
selecciona
circuito
destaca el precio
para pasajero de
otra aerolínea
procesa y grafica
información
detalle del
circuito
mapa
!
disclaimer precio

21. SUDAMÉRICA AIRPASS
Flujo para Europa
Declara su situación
de vuelo
destaca el precio
para pasajero LAN
acciones del
usuario
contacto
directo
proceso
interno
llego en LAN llego en otra
aerolínea
Navega y elige su
programa
selecciona
circuito
destaca el precio
para pasajero de
otra aerolínea
procesa y grafica
información
detalle del
circuito
mapa dis

22. {
Backend
Frontend
CONVERSACIÓN
ESPACIO
LÓGICA
PROCESOS{

23. fin¿ ?
no creo, porque no existe un
estándar para definir el flujo de
interacción de un servicio, aún.