Partituras de Interacción

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á.


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.


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 ….

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.


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?


Nicole Dupré

Katherine Exss

Herbert Spencer

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.



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.


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


Las cuentas asociadas si el usuario desea se pueden

convertir en "Cuentas Disponibles" CUENTAS DISPONIBLES


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


COMPROBANTES DE PAGO


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é


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/


http://wiki.ead.pucv.cl/index.php/Partituras_de_Interacci%C3%B3n

http://www.ead.pucv.cl/2008/partituras-de-interaccion/

FIN CLASE

Partituras de Interacción

Design

Transcript of Partituras de Interacción