PiXograms

Título	PiX
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	partituras de interacción
Período	2014-
Alumno(s)	Ingrid Céspedes, Melany Marin
Profesor	Katherine Exss, Herbert Spencer
URL	http://eadpucv.github.io/pix

Ver También: PiX: Antecedentes

Casos de Estudio

Partituras de Interacción PiX

Las partituras de interacción son un lenguaje visual que generan la articulación entre lo que el usuario desea hacer, lo que comunica la interfaz gráfica y el proceso que realiza el sistema. Esta es una herramienta que permite moldear el diseño de interacción para la experiencia del usuario en proyectos digitales.

Los factores a tomar en cuenta a la hora de crear nuevos sistemas de interacción o servicios:

Lo humano: No dejar de preguntarse qué espera obtener el usuario de nuestra marca y de las interacciones puntuales dentro del sitio. Esto nos entrega las primeras aproximaciones a la usabilidad del servicio que diseñamos.^[1]

El negocio: ¿Qué información relevante necesitamos como equipo de diseño? Considera la estrategia y los objetivos comerciales del proyecto, esto es fundamental para la viabilidad del proyecto.

La tecnología: Determina muchos estándares sobre cómo se hacen las cosas y va a influir en la factibilidad de la propuesta, lo que se puede y lo que no se puede hacer.

Esta herramienta se divide en tres capaz:

Acción del usuario: son las intensiones y objetivos del usuario (leer, pensar)
Interacción directa: el usuario interactua directamente con la interfaz gráfica (hacer click, ventanas)
Ejecución del sistema: funciones y comportamientos que se procesan el el sistema (bases de datos)

Aplicación de Partituras de Interacción PiX

Comenzamos realizando algunas pruebas de partituras de interacción para familiarizarnos con su uso. Determinamos dos tareas a realizar, el primero de subir un vídeo y crear una lista de reproducción en el sitio web Youtube.com

Caso 1: Subir video a youtube

Ejemplo 1

Ejemplo 2

Al realizar dos personas la partitura de la misma acción (subir video a youtube), nos damos cuenta que se usan iconos mixtos y otras veces iconos pequeños solos, a pesar de que estos están diseñados para ser usados dentro de un icono contenedor. El resultado en la partitura muestra irregularidad entre iconos grandes (stackeados o superpuestos) y los iconos pequeños.

Cabe mencionar que muchos iconos sin necesariamente un contenedor cumplen la función de comunicar la idea que se quiere expresar en la partitura, debido a que el texto inferior es el que especifica la intención del usuario, el dialogo o la respuesta del sistema.

Caso 2: Crear lista de reproducción

Ejemplo 1

Ejemplo 2

Al realizar el segundo ejercicio de partitura, con la tarea de crear una lista de reproducción, se puede observar como se mezcla el uso de iconos en las diferentes horizontes, en donde apaceren íconos de intención del usuario en la sección de interación directa (ejemplo 2). Lo cual hace mas confuso el uso de los iconos sin darles un sentido predeterminado para guiar su uso.

Además aparecen diferencias en el uso de los comentarios, los cuales clarifican que cada separación corresponde a un cambio de pantalla o de estado de la pantalla al ejecutar una acción.

Se observa ademas que se utilizan iconos diferentes para representar la misma respuesta del sistema (filtrar visibilidad es graficado en el ejemplo con un engranaje y un embudo y el el ejemplo dos con una base de datos y un filtro) por lo que no se justifica el exceso de variables para representar una acción, dialogo o respuesta que serán profundizados con el texto inferior.

Puntos a considerar

Disminuir cantidad de iconos.
Eliminar el concepto de stacking o superposición y transformar a iconos únicos
Separar grupos de iconos según las 3 capas de interacción: usuario, diálogo y sistema. Al separar según la capa se organizan los óconos según el sentido o propósito con el cual serán utilizados, mas que por que tipo de acción o elemento representan.

Propuestas de clasificación de iconos

Clasificación según horizontes

La partitura se divide en los horizontes de persona, dialogo y sistema, por lo que esta propuesta ordena la función de los iconos según el área en la cual serían utilizados.

Persona

Diálogo

Sistema

Clasificación según horizontes, sin stacking

Se nivelan los tamaños de los iconos mas pequeños (antes encerrados en contenedores cuadrados o circulares) de modo tal que todos los iconos estuviesen a una misma proporción.

Persona

Diálogo

Sistema

Clasificación según gramática

Se observa que al cambiar de tamaño los iconos las variables de grosor de los iconos se deforman, quedando con irregulares en cuanto a estilo, por lo que en la siguiente propuesta se nivelan los grosores de trazos y estilos gráficos de los iconos. Además, se cambia el concepto de agrupación de iconos, los cuales se clasifican por su gramática, de modo tal de flexibilizar el uso de los iconos en cada horizonte y que estos sean asimilados por ser verbos(acciones y gestos) y sustantivos. Los elementos eliminados fueron:

Containers
- square
- square-dashed
- circle
- circle-dashed
- dialogue
- message
- database
- book
- gear
Devices
Controls & Overlays
Arrow
- up
- down
- left
- right
- expand
- collapse
- slide
- scroll
- rotate
Face Expressions
Hand Gestures
Objects
- Cube
- Compass
- Lightbulb
- lightbulb
- Wrench

Stacked Combinations

Mouse actions
Trackpad
Touch interactions
Keyboard
System Response
Object Combinations

Iconos de trazo y llenos

Gestos

click
doble-click
drag
pinch
pinch-zoom
press-drag-1
press-drag-2
press-drag-3
rotate
scroll
tap
tap-2
tap-3
tap-4
double-tap
tap-horizontal-1
tap-horizontal-2
tap-horizontal-3
tap-vertical-1
tap-vertical-2
tap-vertical-3
touch-collapse
touch-expand

Acciones

View
Upload
Upload
Import
Export
Share
Download
Edit
Type
Send
Search
Coment
Save
Record
Print
Copy
Paste
Archive
Attach
Notify
Merge
Buy
Like
Dislike
Call
Hang out
ok
No
Minus
Add
Unlock
Lock
Ask
Delete

Objetos

Archive
Calendar
Checkbox
Clock
Cloud
Contact
Contacts
Database
Email
Filter
Gallery
Image
Link
List
Page
Pile
Position
Rss
Sound
Tag
Text
Unlink
Video
Window

Corrección de trazado

Se regulariza el trazo de los iconos y se alinean a la misma línea de base dependiendo de su tamaño. Se diseñan nuevamente los iconos con relleno negro para que armonicen con los iconos de trazado sin relleno.