PiXograms

De Casiopea


TítuloPiX
Tipo de ProyectoProyecto de Titulación
Palabras Clavepartituras de interacción
Período2014-
Alumno(s)Ingrid Céspedes, Melany Marin
ProfesorKatherine Exss, Herbert Spencer
URLhttp://eadpucv.github.io/pix

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

Partitura subir video youtube-01.png

Ejemplo 2

Partiturasdeinteraccion subir video.png

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

Partitura crear lista youtube-02.png

Ejemplo 2

Partiturasdeinteraccion crear lista.png

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

Pixprpuestagrupos persona prop1.png

Pixprpuestagrupos dialogo prop1.png

Sistema

Pixprpuestagrupos sistema prop1.png

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

Pixprpuestagrupos persona prop 2.png

Diálogo

Pixprpuestagrupos dialogo prop 2.png

Sistema

Pixprpuestagrupos sistema prop 2.png

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
Acciones
Objetos

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.

Gestos
  • Tap-left
  • Tap-up
  • Press-drag up
Acciones

Se agregaros los siguentes iconos:

  • play
  • fast foward
  • stop
  • pause
  • next


Objetos

Se agregaros los siguentes iconos:

  • map (2 versiones)
  • ratio (2 versiones)
  • button
  • drop-down
  • checklist (2 versiones)


Blancos y trazos regularizados

Definición de elementos y variables gráficas utilizada para la edición de los iconos. Tiene como propósito hacer que cada icono se asimile al otro como elementos de una misma familia.

Gestos

33 iconos en total forman el juego de iconos de gestos que incluyen los click del mouse y los tactiles.

Se agrega el icono:

  • Drag-n-drop
Sprites.png

Acciones

Se modifican los iconos:

  • Branch
  • Merge

Se agreganlos iconos:

  • Play
  • Stop
  • Fall-back
  • Fast-foward
  • Previous
  • Nex
  • Rec
  • Pause
  • Resize
Action-sprites.png

Objetos

se agregan los iconos:

  • button
  • input-time
  • input
  • select
Sprites-objets.png

Referencias

  1. Tres usos de las partituras de interacción según el proyecto digital [1]