Post on 21-Jun-2015
description
PARTITURAS DE INTERACCIÓN
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
INTRODUCCIÓN
PRESENTACIÓNHola, soy Rodrigo Vera, y bienvenidos
a la clase Partituras de Interacción.
RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane
RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane
ELIMINADO POR ESTA CLASE
LO QUE VEREMOS HOYIntroducción IXDProblemática¿Que Son?¿Porqué Usarlas?
INTRODUCCIóN IXD
DISEÑO DE INTERACCIÓN
El Diseño de Interacción (IxD) define la estructura y comportamiento de los sistemas interactivos. Los diseñadores de interacción se esfuerzan en crear relaciones significativas entre las
personas y los productos y servicios que utilizan, desde los ordenadores a los dispositivos móviles a otros aparatos y más allá.
DISEÑO DE INTERACCIÓN
DISEÑO DE INTERACCIÓN
IXDSERVICIO PRODUCTO
• Ir a la Plaza• Conversar• Vender Autos• Encontrar Casa• Grabar un disco
• Silla• Teléfono• Aplicación• Web• etc.
La complejidad de un proyecto de desarrollo Web requiere de una metodología escalonada que normalmente es abordada por un equipo multidisciplinario. Dentro de este proceso podemos distinguir:
! !!!!
A lo largo de este proceso, los lenguajes de representación y formalización (mapas de navegación, wireframes, esquemas de datos, diagramas de flujo, etc.) van marcando cada etapa pero carecemos de
un sistema que permita transversalizar el producto final: la experiencia del usuario.
DISEÑO DE INTERACCIÓN
ESTRATEGIA AI UI PRODUCCIÓNPERSONA IXD TESTEO
DIAGRAMA DE FLUJOS
DIAGRAMA DE FLUJOS
Este diagrama es una representación gráfica de los pasos de un proceso y / o los procesos de un sistema. El diagrama de flujos concretamente es una conexión de
símbolos que representan operaciones, posibilidades, etc. Este diagrama se compone de una serie de símbolos específicos con un significado, es decir, tiene símbolos universales de flujos que han sido normalizados para evitar
las diferencias entre un diagrama y otro, para que puedan ser entendido por cualquiera que tenga conocimiento de esta simbología básica.
DIAGRAMA DE FLUJOS
En los diagramas de flujo se deben cumplir los siguientes aspectos:
• Existe siempre un camino que permite llegar a una solución (finalización del algoritmo).
• Existe un único inicio del proceso.• Existe un único punto de fin para el proceso de flujo (salvo del
rombo que indica una comparación con dos caminos posibles).
DIAGRAMA DE FLUJOS
1. Rectángulo de lados redondos: Esta figura representa el inicio o el fin de un proceso (claro que el fin de un proceso también puede ser el comienzo de otro).
2. Rectángulo: esta forma representa (a diferencia del mapa de navegación) un evento o un proceso determinado, que en general es parte de una secuencia.
3. Parelelógramo: Este símbolo grafica un campo de entrada o salida de información del sistema, se utiliza generalmente en los formularios.
4. Rombo: Esta figura (al igual que en los mapas de navegación) significa un punto de decisión. Una acción del usuario puede tomar distintos caminos dependiendo de la situación; se entiende como una decisión del sistema.
5. Círculo: Representa un punto de conexión entre procesos. Se utiliza cuando es necesario dividir un diagrama de flujo en varias partes, ya sea por razones de espacio o simplicidad. En esos casos, se debe dar referencia para distinguirlo de otros.
6. Flecha Gruesa: Esta flecha denota la dirección del flujo directo, la trayectoria óptima del proceso de información.
7. Flecha Delgada: Esta flecha representa otras vías que puede tomar llevar a cabo un proceso, que no llegan a una solución óptima.
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n
PROBLEMÁTICA
PROBLEMÁTICA LINEAL
Pensamiento Lineal ….
PROBLEMÁTICA LINEAL
Pensamiento Lineal ….
PARTITURA DE INTERACCIÓN
La interacción en una plataforma web es tan importante como su estructura de contenidos y diseño. Sin embargo, no existen muchas herramientas para trabajarla ni
un modo de comunicación estándar para la industria del diseño y desarrollo web.
PROBLEMÁTICA EN ENTORNOS DE TRABAJO
Por otro lado, la gran cantidad de profesionales involucrados en la creación de un sitio web demanda la existencia de más y mejores objetos (modelos o diagramas) que comuniquen de forma efectiva las ideas desde el comienzo del proyecto, etapa caracterizada por ser altamente abstracta.
PARTITURA DE INTERACCIÓN
Es en este contexto es que surgieron las partituras de interacción, como un lenguaje visual para modelar la interacción en proyectos digitales. Concretamente, lo que
busca esta notación gráfica es articular la relación entre el usuario, la interfaz gráfica y el sistema que responderá a las acciones ejecutadas por el usuario.
¿QUE SON?
PARTITURA DE INTERACCIÓN
Nicole Dupré
Katherine Exss
Herbert Spencer
PARTITURA DE INTERACCIÓN
PARTITURA DE INTERACCIÓN
INTRODUCCIÓN
Este lenguaje propone un sistema de notación que pueda acompañar el proyecto desde la etapa de estrategia (alto grado de abstracción) hasta la etapa final de
implementación en código (alto grado de especificidad), permitiendo a cada actor del proyecto (estrategas, diseñadores y programadores) comprender el total y cuidar el cumplimiento de la visión original. Se trata de un sistema que permite coreografiar y
orquestar cuidadamente el díagolo en continuidad entre la persona y el servicio.
• Es un lenguaje visual que propone un sistema de notación gráfica para formalizar los flujos de interacción en una plataforma o servicio digital.
• Es un lenguaje visual que propone un sistema de notación que pueda acompañar el proyecto desde la etapa de estrategia hasta la etapa final de implementación en código.
• Las partituras de interacción descomponen el diálogo entre la persona y el servicio en tres distintas capas horizontales: Acciones de Usuario, Contacto Directo y Procesos.
PARTITURA DE INTERACCIÓN
PARTITURA DE INTERACCIÓN
Acciones del usuario: la intencionalidad del usuario expresada en sus acciones concretas———————— línea de interacción ————————
Contacto directo: los elementos de interfaz que permiten al usuario ejecutar tales acciones———————— línea de visibilidad ————————
Proceso: las funciones que permiten al sistema (servidor) dar respuesta en el diálogo con el usuario
INTERFAZ
USUARIO(acciones)
SISTEMA
la intensionalidad del usuario expresada en sus acciones concretas
los elementos de interfaz que permiten al usuario ejecutar tales acciones
las funciones que permiten al sistema (servidor) dar respuesta en el diálogo con el usuario
Cada módulo de interacción se compone como un compás en esta partitura. Estos compases (o patrones de interacción) permiten ensamblarse para verificar la lógica
y la calidad de la experiencia en determinados escenarios de uso, así como detectar inconsistencias o puntos críticos en el servicio.
PARTITURA DE INTERACCIÓN
LENGUAJE VISUAL
MODO ROTS (?)
INTERFAZ
USUARIO(ACCIONES)
SISTEMA
Login Usuario
HOME
RUT
CONTRASEÑA
Sistema Valida Rut y Contraseña para
ingresar al Dashboard
DASHBOARD
PAGAR
1. CUENTAS ASOCIADAS
2. CUENTAS DISPONIBLES
3. MODIFICAR CUENTA
4. COMPROBANTES DE PAGO
5. GRUPOS DE CUENTAS
Sistema usa el Rut para mostrar las
cuentas asociadas
6. NUEVO PAGO
7. PAGO NO INSCRITO
• Cuenta 1• Cuenta 2• Cuenta 3• Cuenta 4• Etc…
MIS PAGOSCUENTAS ASOCIADAS
PAGAR CUENTA
Mis Pagos
Cuentas Asociadas se pueden Filtrar por Servicio
• Cuenta 1• Cuenta 2• Cuenta 3• Cuenta 4• Etc…
Las cuentas asociadas si el usuario desea se pueden
convertir en "Cuentas Disponibles" CUENTAS DISPONIBLES
Cuentas Asociadas se pueden Filtrar por Servicio
Sistema guarda cuenta dentro de
las cuentas disponibles
AGREGAR
NUEVO PAGO
Un usuario puede pagar una cuenta Asociada a su RUT sin necesidad de agregarla a sus "Cuentas Disponibles"
Pagar CuentaFlujo Externo
Pagar CuentaFlujo Externo
DESCARGAR
COMPROBANTE
Otros Comprobantes
• Cuenta 1• Cuenta 2• Cuenta 3• Cuenta 4• Etc…
COMPROBANTES DE PAGO
Cuentas Asociadas se pueden Filtrar por Servicio
CREAR GRUPO
GRUPOS DE CUENTAS
Un usuario puede agrupar cuentas para gestionar sus pagos
PAGAR
PAGAR CUENTA NO INSCRITO
Un usuario puede hacer pago de
cuentas no asociadas.
Sistema guarda grupo de
cuentas dentro de los datos del
cliente
Comprobantes de Pago
Cuentas Asociadas
Cuentas Disponibles
MODIFICAR
Sisema puede disponibilidad en las cuentas asociadas el
pago no inscrito.
LOG OUT
Sistema Guarda Comprobante de
Pago en la lista de Comprobantes.
1
2 3
6
4
5 7
MÉTODOS DE PAGO
LOGIN
¿PORQUÉ USARLAS?
EQUIPO DE TRABAJO
Nos ayudan a unificar las ideas que cada profesional involucrado tiene sobre los flujos de interacción. Además, son un entregable para los clientes, quienes pueden leer y comprender
fácilmente nuestra propuesta, mucho antes de crear las maquetas de diseño.!
Diseñadores y desarrolladores deben colaborar codo a codo en la creación de estas partituras. Creemos que las mejores discusiones de los equipos multidisciplinarios salen de estas instancias,
cuando todos podemos hablar al mismo nivel y con un mismo lenguaje de interacción.!
• Permite la comunicación fluida entre el equipo de trabajo (creativos e ingeniería).
• Identificar tipos de usuario y roles dentro del sitio
• Permiten evaluar cantidad de plantillas a diseñar y HH involucradas
• Permiten visualizar interacciones y flujos.
• Las discuciones son basadas en funcionalidades e Interacciones.
• Se pueden identificar tempranamente problemas de Interacción.
• Se reducen los tiempos de trabajo y costos
• Posibilidad de ejecutar cambios anticipadamente, evitando rediseñar sobre el producto final.
• Los harás felices a los desarrolladores
EN RESUMEN
REFERENCIAS
Documentación de Nicole Dupré
http://wiki.ead.pucv.cl/index.php/Lenguajes_Visuales_para_la_Interacci%C3%B3n
Documentación de Katherine Exss
http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacci%C3%B3n
Descarga Plantillashttp://www.ead.pucv.cl/2008/partituras-de-interaccion/
FIN CLASE