Diferencia entre revisiones de «Diseño Lenguajes Visuales: Partitura de Interacción»

De Casiopea
 
(No se muestran 35 ediciones intermedias del mismo usuario)
Línea 449: Línea 449:
=Iconización=
=Iconización=


El catastro de Patrones de Interacción se gráfica en iconos para pertenecer a la visualización gráfica de la Partitura de interacción. Funcionando estos como signos lingüísticos, elementos bases de la Partitura, así como las palabras son elementos bases en la construcción del lenguaje.  
El catastro de Patrones de Interacción se grafica en iconos para pertenecer a la visualización gráfica de la Partitura de interacción. Funcionando estos como signos lingüísticos, elementos bases de la Partitura, así como las palabras son elementos bases en la construcción del lenguaje.  
 
==Gestos de Interacción==
Los iconos realizados para este proyecto se inspiran en una gráfica simple, de trazo fino y tono leve para facilitar la comprensión de lo que representan y sean fácilmente memorables.
 
==Iconos I==
Para crear los iconos de la partitura a partir de los patrones se clasificaron 3 tipos de iconos para que conformen este lenguaje visual:
 
*'''Gestos de Interacción''': En esta sección se grafican los gestos que el usuario realiza al interactuar con el dispositivo digital.
 
*'''Acciones de Usuario''': En esta sección se grafican las acciones que el usuario realiza en un servicio digital.
 
*'''Elementos de Interfaz''': En esta sección se grafican los elementos de interfaz con los cuales el usuario interactúa con el servicio digital.
 
A partir de ahora se presentan los iconos realizados.
 
===Gestos de Interacción===


<gallery>
<gallery>
Línea 469: Línea 482:
</gallery>
</gallery>


==Acciones de Usuario==
===Acciones de Usuario===


<gallery>
<gallery>
Línea 508: Línea 521:
</gallery>
</gallery>


==Elemento de Interfaz==
===Elemento de Interfaz===


<gallery>
<gallery>
Línea 552: Línea 565:
<br>
<br>
[[archivo:CF_Iconos_Partitura_de_Interacción_3.pdf]]
[[archivo:CF_Iconos_Partitura_de_Interacción_3.pdf]]
==Iconos II==
'''CRITERIO DE ICONOS'''<BR>
Qué elementos deben graficarse en la Partitura de interacción
Un problema que se ha presentado en la elaboración de la Partitura es reconocer qué elementos y acciones deben graficarse a través de iconos para facilitar la programación y la lecturabilidad de la partitura evitando la ionización innecesaria de elementos.
Por ello se han tomado las siguientes decisiones:
'''Acciones de usuario''': Esta fila se ha decidido no graficarse debido a que responde a las intenciones y deseos del usuario, son objetivos y expectativas. Por ello no pueden abstraerse en iconos.
'''Contacto directo''': En esta sección, como se ha mencionado antes, responde a lo que el usuario hace en la pantalla. Debido ha esto aquí se grafican acciones comunes y elementos de interfaz.
'''Proceso interno''': Aquí se grafican las acciones de servidores y otros procesos que no ve el usuario.
'''CLASIFICACIÓN DE ICONOS'''
Debido a que en la sección Contacto directo van ciertas acciones y elementos de interfaz comunes a todos los dispositivos es preciso graficar aquellos más recurrentes y generales.
Dentro de la '''interacción''' con un dispositivo digital se reconocen los gestos de interacción.
Los cuales comprende movimientos de dedos sobre la pantalla, movimientos oculares, comando de voz, movimientos sosteniendo el dispositivo.
Los gestos de movimiento de manos, vista y del dispositivo iconizados aquí provienen de las acciones posibles realizadas por los celulares galaxy de samsung ilustrados en su
[http://downloadcenter.samsung.com/content/UM/201304/20130424173827203/GT-I9505_UM_LTN_Jellybean_Spa_D04_130424.pdf manual de usuario]
Gestos de smartphones
[[image:CF_gestos_galaxy.png|center|600px]]
En esta sección se corrigen descartando iconos que pueden ser reiterativos, como “drag” y “drop” que gestualmente es el mismo movimiento.
También se reconocen elementos básico de interfaz, como objetos como video, documento, imagen, etc.
En la sección de '''proceso interno''' se reconocen más iconos en base  a los [http://redesadsi.wordpress.com/ Tipos de servidores y las acciones que realizan]
'''LISTADO DE ICONOS'''
[[image:CF clasificación de iconos.png|center|700px]]
[[archivo:CF_clasificación_de_iconos.pdf]]
===Gestos de Interacción===
====Gestos con los dedos====
<gallery>
Archivo:CF_icono_tap.png|Tap
Archivo:CF_icono_double_tap.png ‎|Doubletap
Archivo:CF_icono_press.png|Press
Archivo:CF_icono_press&drag.png|Press&drag
Archivo:CF_icono_flick.png|Flick
Archivo:CF_icono_spread.png|Spread
Archivo:CF_icono_pinch.png|Pinch
Archivo:CF_icono_scroll.png|Scroll
Archivo:CF_icono_rotate.png|Rotate
Archivo:CF icono drag.png|Drag
Archivo:CF_icono_scroll_hand.png|Scroll
Archivo:CF_icono_slide.png|Slide
</gallery>
====Gestos con la mirada====
<gallery>
Archivo:CF_icono_scroll_view.png|Scroll view
Archivo:CF_icono_view_front.png|View front
Archivo:CF_icono_look_forward.png|Look froward
</gallery>
====Gestos con el dispositivo====
<gallery>
Archivo:CF_icono_shake.png|Shake
Archivo:CF_icono_flip_horizontal.png|Horizontal flip
Archivo:CF_icono_flip_vertical.png|Vertical flip
Archivo:CF_icono_side_by_side.png|Move side by side
Archivo:CF_icono_move_arround.png|Move arround
Archivo:CF_icono_flip.png|Flip
Archivo:CF_icono_flip_2.png|Flip
Archivo:CF_icono_voice_command.png|Voice command
</gallery>
===Elementos de Interfaz===
====Objetos====
<gallery>
Archivo:CF_icono_audio.png|Audio
Archivo:CF_icono_video.png|Video
Archivo:CF_icono_photo.png|Photo
Archivo:CF_icono_image.png|Image
Archivo:CF_icono_file.png|File
Archivo:CF_icono_form.png|Form
Archivo:CF_icono_list.png|List
Archivo:CF_icono_message.png|Message
Archivo:CF_icono_notification.png|Notification
Archivo:CF_icono_box.png|Box
Archivo:CF_icono_calendar.png|Calendar
Archivo:CF_icono_results.png|Results
</gallery>
====Ventanas====
<gallery>
Archivo:Page.png|Page
Archivo:CF_icono_pupop_model.png|Pupop model
Archivo:CF_icono_wizard.png|Wizard
</gallery>
====Acciones====
<gallery>
Archivo:CF_icono_up_load.png|Up load
Archivo:CF_icono_down_load.png|Down load
Archivo:CF_icono_recieve.png|Receive
Archivo:CF_icono_send.png|Send
Archivo:CF_icono_aprove.png|Save
Archivo:CF_icono_add.png|Add
Archivo:CF_icono_undo.png|Undo
Archivo:CF_icono_delete.png|Delete
Archivo:CF_icono_sign_in.png|Sign in
Archivo:CF_icono_sign_up.png|Sign up
Archivo:CF_icono_sign_out.png|Sign out
Archivo:CF_icono_write.png|Write
Archivo:CF_icono_edit.png|Edit
Archivo:CF_icono_search.png|Search
Archivo:CF_icono_select.png|Select
Archivo:CF_icono_comment.png|Comment
Archivo:CF_icono_display.png|Display
Archivo:CF_icono_share.png|Share
Archivo:CF_icono_favorite.png|Favorite
Archivo:CF_icono_ranking.png|Ranking
Archivo:CF_icono_tagg.png|Tagg
</gallery>
===Proceso Interno===
====Objetos====
<gallery>
Archivo:CF_icono_database.png|Database
Archivo:CF_icono_server.png|Server
Archivo:CF_icono__online_folder.png| Online folder
Archivo:CF_icono__home_network.png|Home network
Archivo:CF_icono__computer_network.png|Computer network
Archivo:CF_icono__network_servers.png|Network servers
</gallery>
====Acciones====
<gallery>
Archivo:CF_icono_veryfing_database.png| Verify database
Archivo:CF_icono_load_database.png| Save/load/Receive in database
Archivo:CF_icono_server_responds.png|Server responds
Archivo:CF_icono_process.png|Process
</gallery>


=Casos de estudio=
=Casos de estudio=

Revisión actual - 16:15 28 may 2014



TítuloProyecto Diseño Lenguaje Visual: Partitura de Interacción
Tipo de ProyectoProyecto de Titulación
Palabras Clavediseño gráfico, lenguaje visual, iconos, partitura, interacción
Período2014-2014
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Christopher Fattori
ProfesorHerbert Spencer


Relacionados

Referencias: Bibliográficas | Weblográficas

  1. Lenguajes Visuales para la Interacción
  2. Partituras de Interacción
  3. Estudio de Modelos de Interacción
  4. Diseño de Iconografía

Introducción

Diseño Lenguaje Visual:Partituras de Interacción continua con la investigación y la propuesta de Katherine Exss. Se estudian los distintos modelos visuales presentados en su investigación, enfocado en el recogimiento de elementos comunes y útiles para la creación de un modelo que reúna sus fortalezas y a su vez mejorar sus debilidades. Así se propone en este proyecto seguir desarrollando la proposición de este modelo, el cuál reconoce que un mensaje visual y conceptual favorece el desarrollo de un sistema mediante la elaboración de un lenguaje visual común y comprensible por los distintos actores involucrados de un proyecto de desarrollo digital.

Lenguaje

Un lenguaje es un sistema de comunicación estructurado para el que existe un contexto de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.

Desde un punto de vista más amplio, el lenguaje indica una característica común al hombre y a los animales para expresar sus experiencias y comunicarlas a otros mediante el uso de símbolos, señales y sonidos registrados por los órganos de los sentidos. El ser humano emplea un lenguaje complejo que expresa con secuencias sonoras y signos gráficos.

  • El lenguaje humano se basa en la capacidad de los seres humanos para comunicarse por medio de signos (usualmente secuencias sonoras, pero también gestos y señas, así como signos gráficos). Principalmente lo hacemos utilizando el signo lingüístico. Aun así, hay diversos tipos de lenguaje. El lenguaje humano puede estudiarse en cuanto a su desarrollo desde dos puntos de vista complementarios: la ontogenia y la filogenia. La ontogenia analiza el proceso por el cual el ser humano adquiere el lenguaje. La filogenia se encarga de estudiar la evolución histórica de una lengua.
  • Los lenguajes formales son construcciones artificiales humanas, que se usan en matemática y otras disciplinas formales, incluyendo lenguajes de programación. Estas construcciones tienen estructuras internas que comparten con el lenguaje humano natural, por lo que pueden ser en parte analizados con los mismos conceptos que éste.

Características del lenguaje

Dentro de las definiciones varias que se le han otorgado a lo largo de los años, en un principio con origen teológico, luego visto desde un punto de vista de evolución histórica, hoy predomina la visión de sistema.(Kristeva, J., 1999)

Dentro de las características que coinciden con lo que se busca construir en la Partitura como lenguaje otros autores han definido lenguaje como:

  • El lenguaje es un conjunto finito o infinito de oraciones, cada una de las cuales posee una extensión finita y construida a partir de un conjunto finito de elementos (Noam Chomsky, 1957).
  • Por el lenguaje entendemos un sistema de códigos con cuya ayuda se designan los objetos del mundo exterior, sus acciones, cualidades y relaciones entre los mismos. (A. R. Luria, 1977).
  • El lenguaje es una instancia o facultad que se invoca para explicar que todos los hombres hablan entre sí (J. P. Bornchart, 1957).

Dimensiones del lenguaje

El lenguaje entre especies biológicas puede ser estudiado según cuatro dimensiones o aspectos diferentes que definen características propias de su naturaleza:

  • Formal o estructural, que se refiere a la complejidad combinatoria de los códigos usados, el medio empleado para el mismo y los patrones en los que se basa la comunicación mediante dicho lenguaje. La dimensión estructural a su vez puede ser dividida en forma, contenido y uso:
    • Forma: estudiada en sus diferentes aspectos por la fonología, morfología y sintaxis. La primera comprende la forma material de las señales, la segunda las propiedades de formación de señales complejas y la tercera las propiedades combinatorias.
    • Contenido: estudiado por la semántica, que consiste en la codificación y decodificación de los contenidos semánticos en las estructuras lingüísticas.
    • Uso: estudiado en la pragmática, que define cómo la situación de uso tiene importancia tanto para las formas usadas como para la interpretación del contenido.
  • Funcional, se refiere a la intencionalidad con la que se usa, qué ventajas aporta y para qué casos se usa, con qué funciones y en qué contextos.
  • Comportamental, se refiere a todo el comportamiento exhibido por el emisor y los receptores del código, y a las conductas desencadenantes del uso y desencadenadas por el uso del lenguaje.
  • Representativa, se refiere a la intencionalidad del emisor de exponer una información sin intención de dar una valoración o provocar una reacción en el receptor. (ROLATER)

Funciones del lenguaje

El lenguaje se usa para trasmitir una realidad, ya sea afirmativa, negativa o de posibilidad, un deseo, una pregunta, una orden y más. Dependiendo de cómo utilicemos las oraciones, podemos distinguir diferentes funciones en el lenguaje:

Funciones básicas

  • Función referencial: El lenguaje pretende ser capaz de transmitir objetivamente la información, es decir, que el emisor transmita el mensaje sin que en él aparezca su opinión personal. La comunicación está centrada en el tema o asunto sobre cual se hace referencia. Se utilizan oraciones declarativas o enunciativas. Esta función la podemos encontrar en los periódicos.
  • Función emotiva o expresiva: El mensaje que transmite el emisor hace referencia a sus propios sentimientos. Los expresa de manera subjetiva, mostrando su opinión y sus estados de ánimo. Las formas lingüísticas de esta función corresponden al uso de oraciones exclamativas e interjecciones. También se emplean aumentativos y diminutivos, así como pronombres en primera persona.
  • Función conativa o apelativa: Predomina el oyente sobre los otros factores de comunicación. Pretende captar la atención del receptor y recibir una respuesta o reacción. Aquí la comunicación está centrada en la persona del tú. Los rasgos lingüísticos que la caracterizan son el uso del vocativo, el modo imperativo y el uso de interrogativos.

lenguaje

Componentes de un lenguaje

  1. Caracter material: sonido y marcas (escritura y gestos).
  2. Convención de un código
  3. Manifestación del lenguaje en un discurso

signo linguistico

El signo lingüístico es una realidad que puede ser percibida por el hombre mediante los sentidos y que remite a otra realidad que no está presente. Es una construcción social que funciona dentro de un sistema lingüístico y que pone un "elemento" en lugar de otro.

Peirce distingue también tres clases de signos y los clasifica según cómo se presente a sí mismo, cómo se relacione con su objeto y cómo se relacione con su interpretante. De esta manera los clasificó en indicios, íconos y símbolos:

  • Iconos: Se refiere al objeto por su parecido con él.
  • Índices: El signo no se parece forzosamente al objeto pero recibe influencia de él y por ello tiene algo en común con él
  • Símbolos: Se refiere a un objeto que designa por convención a través de la idea.

Semiología

Los términos y teorías que se emplean para explicar la comunicación visual son préstamos tomados de la ciencia del lenguaje (lingüística) y de la de los signos (semiología)

En las palabras de David Crow (Visual Signs an introduction to semiotic, 2008) dice que como consumidores de arte visual nos hemos convertido en lectores muy sofisticados de signos y señales, capaces de decodificar el significado de complejas composiciones con facilidad inconsciente. Para artistas y diseñadores es importante tener un conocimiento de cómo se forma el significado y del modo en que los receptores pueden ser conducidos a él mediante la yuxtaposición de palabras e imágenes que conforma nuestro lenguaje visual.

Tres áreas conforman lo que conocemos por semiótica:

  1. los propios signos
  2. el modo en que se organiza en sistemas y
  3. el contexo en que aparecen

Modelos teóricos

Las teorias que utilizamos en Diseño gráfico y comunicación visual proceden de la teoría general de los signos(semiótica) unión de las teorías de Ferdinand de Saussure, profesor suizo de lingüística, y Charles Sanders Peirce, filósofo norteamericano, ambos trabajaron de forma independiente pero presentan varias similitudes. Se han enfocado en modelos estructurales del signo, centrados en las relaciones entre los componentes del mismo, esto nos permite construir señales.


Estructura básica del lenguaje

Para Saussure tanto el fonema como la palabra son signos, y se componen de dos elementos fundamentales el significante y el significado.

comparativa de modelos: Saussure se sentra en el lenguaje (escritura, sonido) y Peirce se centra en la percepción del mundo integrando al observador

En el Modelo de Saussure el Significado es el objeto que se representa a través de la construcción arbitraria del Significante, la unión de estos conforman al Signo.

En el Modelo de Peirce el significado se denomina Interpetante, que es el objeto referido más la experiencia del intérprete, el significante se denomina Representamen, que es la evidencia física del signo (texto, imagen o sonido), que se relacionan con el Objeto mismo al que se hace referencia.

Las diferencias radican en que Saussure se enfocaba ante todo por el Lenguaje, y Peirce se enfocaba en cómo se extrae el sentido al mundo que nos rodea.

Significado

"En un estado de lengua todo se basa en relaciones" De Saussure, F. Curso de lingüística General(1915)

Tanto Saussure como Peirce coinciden en que para entender cómo se extrae el significado de los signos necesitamos comprender la estructura de los signos.

Clasificación de signos

Las clasificaciones son similares entre Peirce y Saussure

Peirce identificó tres niveles de propiedades de los signos, identificables en su modelo:

Primariedad: nivel de Sensación. Sentimiento o estado de ánimo que produce el signo al verlo.

Secundariedad: nivel de Hechos. La relación física entre una cosa y otra.

Terciariedad: nivel Mental. Nivel de las reglas generales que reúnen a los otros dos en una relación. vincula al signo con el objeto mediante una convención.

Semiosis

Semiosis es la transferencia del signo: acto de significar.

La construcción del significado como un proceso entre el signo y el lector del signo no lleva a un significado fijo, único; sino que es un intercambio, basado en el pasado y experiencia del lector.

Un color es un símbolo que significa una cosa para una cultura y puede a la vez significar otra cosa para otra cultura

"El lenguaje es un sistema de términos interdependientes en el cual el valor de cada término procede únicamente de la presencia simultánea de los demás." De Saussure, F. Curso de Lingüística General (1915)

Valor: elemento dado por la relación de un signo con respecto a los otros dentro de un sistema.

Significación: transferencia de significado, mediante conceptos mentales para categorizar la realidad.

El significado no procede entre la relación del signo y la realidad sino del signo con otros signos.

Sintagma: colocación de signos ordenados de manera secuencial. La convinación de sintagmas bajo reglas por convención se denomina gramática.

Paradigma: colección de signos ordenados en relación por similitud, pero cada signo distinguible uno de otro.

Dentro de las teorías de significación se encuentra Roland Barthes, filósofo y semiólogo francés influenciado por Sausure, propone integrar al lector como parte importante del proceso de leer el significado.

Relaciones estructurales del signo:

  • Denotación: lo que se representa. Significación directa. Importa lo que está representado.
  • Connotación: cómo se representa. Influye cómo interpretar lo representado, apelando la emoción y la cultura del expectador.
  • Convención: acuerdos culturales por la repetición y aceptación de recursos para la representación de un signo y nos enseña a cómo leerlo hasta ser instintivo.

Signos de poca convención requieren un alto nivel de iconicidad para llegar a un público amplio.

  • Motivación: el grado en que el significante describe al significado. Un signo icónico es un signo altamente motivado, un signo simbólico es poco motivado.

Cuánto más motivado sea el signo más importante es que el lector conozca las convenciones que ayudan a descifrar la imagen.

Texto e Imagen

Teoría de Barthes: códigos.

En la teoría de los signos el código es un sistema de signos diferenciados en:

  • Código digital: paradigmas que poseen un número limitado. ejemplo: el alfabeto.
  • Código analógico: paradigmas que poseen un número indeterminado. ejemplo: la música y la danza, pero se digitalizan como en las notas musicales.

Lectura de Imagen y Texto: los 3 mensajes.

En la lectura simultánea de imagen y textos se distinguen 3 mensajes:

  • Mensaje lingüístico: es el texto presente en sí.
  • Mensaje icónico codificado: lectura de la imagen según un sistema (convenciones). Trabaja a nivel de connotación.
  • Mensaje icónico no codificado: lectura del medio según lo que es. Trabaja a nivel de denotación.

Del texto que acompaña la imagen:

  • Anclaje: define la lectura de la imagen. Limita su interpretación.
  • Relevo: funciona como complemento de la imagen aportando significado.

Interacción Humano - Computador: Diseño de Interacción

La interacción humano-computador trata acerca de las ciencias y metodologías asociadas al intercambio de información entre el humano y la computadora(interacción) mediante la utilización de software. Mediante el estudio del diseño, evaluación e implementación de aparatos tecnológicos interactivos se busca definir técnicas y metodologías que aseguren la un nivel óptimo de usabilidad del producto, es decir, que sea ser usados de forma efectiva, eficiente, segura y satisfactoria, con el objeto de hacer más productivas las tareas que rodean a las personas y los computadores.

Es un estudio que integra tanto conocimientos de personas (teoría de la comunicación, disciplinas del diseño gráfico e industrial, lingüística, ciencias sociales, psicología cognitiva y función del ser humano) como de la máquina (sistemas operativos, técnicas gráficas, lenguajes de programación y entornos de desarrollo).

Metodologías de Diseño

Con el fin de hacer interactuar la persona y la máquina se han planteado numerosas metodologías mas la mayoría de éstas se basan en que los diseñadores deben tener en cuenta el proceso cognitivo del usuario(la memoria y la atención), de esta manera se pueden tomar decisiones en las primeras etapas de diseño las cuales pueden cambiarse a medida que el proyecto avanza y así abaratar costos por errores en su implementación. Los modelos más modernos se centran en que haya una comunicación, entre usuarios, diseñadores e ingenieros, así se pretende conseguir que el usuario obtenga la experiencia que realmente quiere tener.

Diseño Centrado en el Usuario

El Diseño Centrado en el Usuario parte de la idea de que el usuario es el centro del diseño, en cualquier sistema computacional. Los usuarios, los diseñadores y el equipo técnico trabajan unidos con el objetivo de articular aquello que se desea, que se necesita y conocer las limitaciones del usuario para crear un sistema adecuado. Esta metodología es similar a la del diseño participativo, la cual enfatiza la posibilidad de que los usuarios finales contribuyan con el diseño del sistema.

Principios de diseño de la interfaz de usuario

En el Diseño de Interfaz de Usuarioexisten siete principios que se tienen que considerar en todo momento a la hora de diseñar la interfaz de usuario: tolerancia, simplicidad, visibilidad, factibilidad, consistencia, estructura y retroacción. El fin es hacer que el objeto de diseño sea atractivo para el usuario y su interactividad y sea intuitiva, rápida y fácil de aprender.

Interactividad

Para comprender más acerca del objetivo de la construcción de un lenguaje de interacción es necesario comprender qué es la interacción vista desde los medios digitales.

La Interactividad es un concepto ampliamente utilizado en las ciencias de la comunicación, en informática, en diseño multimedia y en diseño industrial.

En su campo de aplicación suele hablarse de tres niveles de comunicación:

  • No interactiva, cuando un mensaje no se relaciona con otro previo.
  • Reactiva, cuando un mensaje se relaciona únicamente con el previo inmediato.
  • Interactiva, cuando un mensaje se relaciona con una serie de elementos previos.

Interactividad entre personas

Es el ejemplo base de la interactividad basado en las características humanas para comunicarse y su capacidad de interpretar y responder ante acciones como el movimiento en el caso de los lenguajes corporales o detectar los estados de ánimo.

La interactividad entre personas radica en sus capacidades de establecer diálogo y cambiar de papel siendo los participes de este emisor y receptor alternativamente.

En los medios digitales las redes sociales, la capacidad de enviar mails a los autores de un articulo, los foros, etc. Funcionan como medios de comunicación entre personas, y como herramientas de interactividad con el medio digital.

Interactividad humano-máquina

Basado en el concepto anterior de interpretar y responder, la interactividad humano-máquina radica en cómo responde el aparato ante una acción del usuario, ya sea presionando un botón, o cualquier otra acción que responda para satisfacer los requerimientos del usuario.

La interactividad humano-maquina radica en el diseño de la interfaz del objeto, herramientas y recursos que le permitan al usuario tener el control del objeto, es decir, de permitir al usuario control de determinadas acciones.

[Interactividad]

Patrones de Diseño de Interacción

Los Patrones de Diseño de interacción son herramientas que utilizan diseñadores para establecer decisiones y solucionar problemas concretos de diseño ante casos que se han visto anteriormente y satisfacen acciones del usuario.

Los Patrones de Diseño tienen como origen las propuestas del arquitecto Christopher Alexander en el contexto del diseño y construcción urbanística en su libroA Pattern Language: Towns, Buildings, Construction.

Como características principales los Patrones de Diseño debe cumplir con dos requisitos:

  • Efectividad: Su solución ante un problema ha sido documentada.
  • Reutilizable: Puede ser aplicado en distintos casos.

Un conjunto de Patrones de Diseño se convierte en un Lenguaje de Patrones. A partir de la metodología de Alexader para casos arquitectónicos, luego fue aplicado por los programadores como Patrones de Diseño de Software, resuelven problemas de usabilidad. Luego por diseñadores de interfaces como Patrones de Diseño de Interacción, resuelven problemas de usabilidad.

Patrones de Diseño

Estructura y Características

Del artículo "Patrones de diseño de interacción"(Yusef Hassan, 2012) en human-computer.net se extrae la siguiente descripción de la estructura y características de los patrones de interacción:

  • Título o nombre del patrón : Debería ser claro, conciso, significativo y sugestivo respecto al problema abordado.
  • Problema : Descripción del problema de interacción abordado.
  • Principio/s de usabilidad : Determina sobre qué principios o criterios de usabilidad se sustenta el patrón.
  • Contexto : Descripción del contexto o situación de interacción para la que puede ser aplicado el patrón.
  • Representación visual : Se trata de un elemento opcional, en el que se representa visualmente la esencia o resumen del patrón (diagramas, esquemas, fotografía,…).
  • Solución : Este es el elemento principal de un patrón, donde se describe de forma clara y precisa qué decisión de diseño será la más adecuada para solucionar el problema de interacción.
  • Consecuencias : Impacto de la decisión de diseño sobre otros elementos y atributos del producto.
  • Beneficios : Se argumentan las ventajas y beneficios en términos de usabilidad que implica la aplicación del patrón.
  • Ejemplo : Se muestra un ejemplo de aplicación con éxito del patrón, normalmente de forma gráfica.
  • Patrones relacionados : Relación del patrón con otros patrones similares, como aquellos destinados a solucionar el mismo problema en contextos diferentes.
  • Bibliografía : Fuentes de información sobre los que se fundamenta el patrón o a través de las cuales poder ampliar información.
  • Comentarios : Aquellos patrones publicados en medios de comunicación interactiva (como la web) pueden admitir que por ejemplo otros desarrolladores comenten y aporten información, enriqueciendo el patrón.

Los patrones además pueden contener elementos con metadatos acerca del patrón:

  • Autor : Persona que propone el patrón.
  • Palabras clave : Describen los conceptos principales tratados en el patrón.
  • Copyright : Mención de reserva de derechos de autor.

Patrones de Diseño de Interacción

Caso de Estudio

Uno de los primeros casos de estudio de Patrones de Interacción es Pattern Languages in Interaction Design: Structure and Organization de Martijn van Welie y Gerrit C. van der Veer. En este caso se presenta un método de organización y estructura de patrones de interacción.

Un patrón de Interacción es un caso que cumple satisfactoriamente un caso de usabilidad que requiere un usuario, por ejemplo, si el usuario requiere comprar algo en un sitio web, un patrón en este caso sería el Carrito de compras. Un patrón es entonces una pieza en el diseño de un sitio y una pieza en el conocimiento del Diseño. Por ello se propone la idea de un Lenguaje de Patrones, en el cual estos patrones se relacionen entre sí para crear un diagrama de Interacción.

Patrón de Interacción: Carrito de compras

Para establecer el lenguaje se explica los casos de relación entre patrones:

  • Agregación (Aggregation): Dentro de un patrón de diseño se puede agregar otros patrones dentro de él.

ejemplo, siguiendo con el Carrito de compras, dentro de este se agrega el patrón lista de compras, permite elegir, y el patrón Auxiliar que ayuda a comprar.

  • Especialización (Specialization): Es un caso de especificación, por ejemplo el patrón Búsqueda Simple puede extenderse en el patrón Búsqueda Avanzada.
  • Asociación (Association): En el caso de resolver problemas de una experiencia se requieren de más patrones, así en un mismo caso se pueden asociar uno o más patrones para resolver ese problema. Ejemplo, en el caso de una compra por internet se tiene el patrón Comparación de Productos y ofrecer al mismo tiempo el patrón Carrito de compras.
Diagrama de Patrones

Welie describe los patrones en los siguientes casos:

  • Patrón de Postura (Posture type patterns): Son patrones asociados al propósito del sito web, es decir, si es de carácter comercial, personal o social. En estos patrones influye el producto que ofrece el sitio o la experiencia que ofrece.

ejemplo: tienda virtual, sitio comunitario, noticiario, blog, etc.

  • Patrón de Experiencia (Experience patterns): Son patrones basados en las expectativas del usuario, qué es lo que el usuario quiere lograr. Son los objetivos mas amplios, generalmente compuesto por verbos.

ejemplos: comprar, buscar, elegir, descubrir, etc.

  • Patrón de Tareas (Task patterns): Son los patrones más concretos y familiares, describen soluciones para los pequeños problemas de experiencia. Interacción de objetos que resuelven el problema.

ejemplo: carrito de compras, listas, listas comparativas, menú, auxiliar, etc.

  • Patrón de Acciones(Action patterns): Son acciones que se vinculan con los patrones de tareas solo para que estos se ejecuten.

ejemplo: seguir, salir, entrar, detenerse, etc.

Organizando los patrones se puede crear un lenguaje que explique las funciones de un sitio en un diagrama de interacción de patrones como a la vez un catastro de elementos de Diseño.

Clasificación de patrones


Lenguaje de Patrones de Diseño de Interacción HCI Patterns

Dificultad de los Patrones de Interacción

Dificultad de un lenguaje común

En el paper Improving e-Shops Environments by Using Usability Patterns por Francisco Montero, Víctor López-Jaquero, José Pascual Molina, María Lozano, presentan un caso de estudio comparativo del uso de Patrones de Diseño de Interacción, en el cual se comparan los patrones de Diseño de interacción en el caso de un sevicio de ventas por internet propuestos por Welie(2003), Rosie et al (2000) y Van Duyne et al.(2002)

Comparativa de patrones

En este estudio comparativo los autores concluyen que ante un mismo caso las propuestas de patrones difieren en la nominación de patrones utilizando distintos nombres, o unos proponen patrones que no presentan los otros, es una clara falta de convención en el nombramiento de patrones. Además que debieran ser construidos en conjunto con los usuarios para obtener el mismo lenguaje y percepción. Lo que se aprecia claramente en la conclusión:

El diseño de sistemas interactivos es difícil y los diseñadores necesitan herramientas eficaces que puedan utilizar. Se han utilizado Directrices desde hace mucho tiempo para captar los conocimientos de diseño y para ayudar a los diseñadores en el diseño de interfaces de usuario. Los patrones pueden ser más poderosos que las directrices como una herramienta para los diseñadores, sin embargo, hay una gran cantidad de sugerencias, inconvenientes y posibilidades que necesitan más trabajo.

Mencionan también que los patrones sirven más como una colección de objetos que un diseñador elige utilizar o no, o utilizarlos como una checklist en el uso de técnicas heurísticas.

Improving e-Shops Environments by Using Usability Patterns

Sólo como un compendio de herramientas

En la Presentación Patterns for Designers de Martijn van Welie, afirma que los Patrones no son útiles para los diseñadores experimetados pues funcionan como guías y recursos para diseñadores novatos, a la vez que un lenguaje todavía no está completamente compuesto y no existen herramientas que ayuden en la configuración de lenguajes de patrones.

Pero a la ves propone que los patrones pueden ser útiles para:

  • Obtener ideas para resolver problemas de diseño.
  • Utilizarlos cuando se habla de los diseños con los clientes o los ingenieros.
  • La captura de conocimiento acerca de los sitios en los que nunca se trabajó.
  • Soluciones de documentos que se utilizan a menudo por un grupo de diseñadores.
  • Estimula a pensar sobre lo que funciona, por qué y cuándo.
  • De lo contrario, sólo pensar en ellos como directrices mejor envasados.

Patterns for Designers

Falta de un software

No existe un software que facilite graficar diagramas de interacción de patrones de usabilidad de manera optima, pues los que se han generado no han avanzado o bien se han avandonado.

UPADE: una herramienta para la automatización modelos de diseño orientado a patrones HCI

MOUDIL

Colección de Patrones

Ante la falta de un lenguaje unificado de Patrones de interacción las colecciones presentes en la red sirven como inicio para la compilación de acciones de usuario y elementos de interacción presentes en los sitios web que constituirán los elementos gráficos para la construcción de la Partitura de Interacción.

Colecciones de patrones

User Interface Design Patterns

Título: User Interface Design Patterns
Administrador: Sari A. Laakso
URL: http://www.cs.helsinki.fi/u/salaakso/patterns/
Descripción: Patrones de interacción para el diseño de interfaces gráficas de usuario (GUIs).
Idioma: Inglés

Patterns in Interaction Design

Título: Patterns in Interaction Design
Administrador: Martijn van Welie
URL: http://www.welie.com/
Descripción: El sitio web recoge patrones de interacción para el Diseño Web, Interfaces Gráficas de Usuario (GUIs), e Interfaces de Dispositivos Móviles.
Idioma: Inglés

UI Patterns and Techniques

Título: UI Patterns and Techniques
Administrador: Jenifer Tidwell
URL: http://time-tripper.com/uipatterns/
Descripción: Patrones para Diseño de Interfaz.
Idioma: Inglés

Yahoo Design Pattern Library

Título: Yahoo Design Pattern Library
Administrador: Yahoo
URL: http://developer.yahoo.com/ypatterns/everything.html
Descripción: Patrones utilizados por el sitio yahoo.
Idioma: Inglés

Pattern Tap

Título: Library Pattern tap
Administrador: Zurb University
URL: http://patterntap.com/
Descripción: Patrones utilizados por distintos diseñadores.
Idioma: Inglés

Patternry

Título: Patternry
Administrador: Patternry.com
URL: http://patternry.com/patterns/
Descripción: Sitio que almacena, comparte y vende patrones.
Idioma: Inglés

Android Patterns

Título: Android Patterns
Administrador: Android Patterns
URL: http://www.androidpatterns.com
Descripción: Sitio que ilustra patrones de usabilidad de los teléfonos android.
Idioma: Inglés

Gestos de interacción

Dentro de las acciones de interacción humano-computador, además de los patrones clasificados y propuestos por los sitios anteriores, se deben considerar los gestos físicos posibles ahora dado el avance de las tecnologías touch. Por ello para establecer una Partitura de Interacción se deben agregar los gestos touch que utilizan las grandes compañías para sus dispositivos.

Guía de Gestos Touch

Como referencia está disponible la Guía de Gestos Touch de Luke Wroblewsky que cataloga y especifica gestos touch para el diseño de interacción.

Guía de gestos touch

Touch Gesture Guide: guía de gestos touch

Porqué utilizar gestos touch: en un futuro cercano todo será touch

Design for Touch: porqué utilizar gestos touch

Re-imagina aplicaciones para Ultrabook

Re-imagina aplicaciones para Ultrabook Es una serie de videos en los que Luke explica los usos de los Gestos Touch referidos en la presentación anterior, además disponibiliza los estudios de Windows 8 y otros por lo que se justifica el uso de estos gestos para las futuras tecnologías.

Video explicativo del uso de gestos touch

Iconos de Gestos

Gestureecons es un sitio que vende un set de iconos de gestos el cual clasifica también según el sistema operativo, como Android, IOS, Windows 7, Kinect.

Iconos de gestos

Catastro de patrones

Para establecer una lista de elementos que se utilizarán en la Partitura de Interacción se establece un catastro de Patrones de Interacción comparando las listas de elementos de los sitios web de patrones presentados anteriormente

Catastro: Se ordenan y comparan las formas en que se han organizado los Patrones de Interacción.

Catastro de Patrones

Una vez realizado el catastro se crea entonces una lista de Patrones para la Partitura de Interacción, distinguiendo los patrones más comunes y pertenecían a una función similar entre las distintas colecciones:

Archivo:CF selección de patrones.pdf

Iconización

El catastro de Patrones de Interacción se grafica en iconos para pertenecer a la visualización gráfica de la Partitura de interacción. Funcionando estos como signos lingüísticos, elementos bases de la Partitura, así como las palabras son elementos bases en la construcción del lenguaje.

Los iconos realizados para este proyecto se inspiran en una gráfica simple, de trazo fino y tono leve para facilitar la comprensión de lo que representan y sean fácilmente memorables.

Iconos I

Para crear los iconos de la partitura a partir de los patrones se clasificaron 3 tipos de iconos para que conformen este lenguaje visual:

  • Gestos de Interacción: En esta sección se grafican los gestos que el usuario realiza al interactuar con el dispositivo digital.
  • Acciones de Usuario: En esta sección se grafican las acciones que el usuario realiza en un servicio digital.
  • Elementos de Interfaz: En esta sección se grafican los elementos de interfaz con los cuales el usuario interactúa con el servicio digital.

A partir de ahora se presentan los iconos realizados.

Gestos de Interacción

Acciones de Usuario

Elemento de Interfaz

Archivo:ICF conos Partitura de Interacción 1.pdf
Archivo:ICF conos Partitura de Interacción 2.pdf
Archivo:CF Iconos Partitura de Interacción 3.pdf

Iconos II

CRITERIO DE ICONOS
Qué elementos deben graficarse en la Partitura de interacción

Un problema que se ha presentado en la elaboración de la Partitura es reconocer qué elementos y acciones deben graficarse a través de iconos para facilitar la programación y la lecturabilidad de la partitura evitando la ionización innecesaria de elementos.

Por ello se han tomado las siguientes decisiones:

Acciones de usuario: Esta fila se ha decidido no graficarse debido a que responde a las intenciones y deseos del usuario, son objetivos y expectativas. Por ello no pueden abstraerse en iconos.

Contacto directo: En esta sección, como se ha mencionado antes, responde a lo que el usuario hace en la pantalla. Debido ha esto aquí se grafican acciones comunes y elementos de interfaz.

Proceso interno: Aquí se grafican las acciones de servidores y otros procesos que no ve el usuario.


CLASIFICACIÓN DE ICONOS

Debido a que en la sección Contacto directo van ciertas acciones y elementos de interfaz comunes a todos los dispositivos es preciso graficar aquellos más recurrentes y generales.

Dentro de la interacción con un dispositivo digital se reconocen los gestos de interacción. Los cuales comprende movimientos de dedos sobre la pantalla, movimientos oculares, comando de voz, movimientos sosteniendo el dispositivo.

Los gestos de movimiento de manos, vista y del dispositivo iconizados aquí provienen de las acciones posibles realizadas por los celulares galaxy de samsung ilustrados en su manual de usuario

Gestos de smartphones

CF gestos galaxy.png

En esta sección se corrigen descartando iconos que pueden ser reiterativos, como “drag” y “drop” que gestualmente es el mismo movimiento.

También se reconocen elementos básico de interfaz, como objetos como video, documento, imagen, etc.

En la sección de proceso interno se reconocen más iconos en base a los Tipos de servidores y las acciones que realizan


LISTADO DE ICONOS

Archivo:CF clasificación de iconos.pdf

Gestos de Interacción

Gestos con los dedos

Gestos con la mirada

Gestos con el dispositivo

Elementos de Interfaz

Objetos

Ventanas

Acciones

Proceso Interno

Objetos

Acciones

Casos de estudio

Caso de Estudio:AHJVA

Para la aplicación de la Partitura de Interacción se establece como caso de estudio La plataforma de registro y memoria AHJVAde la alumna de Titulo II Gabriela Pérez, estableciéndose la Partitura como esquema de planificación de las actividades entre el usuario y el sistema.

Siguiendo las acciones esperadas por el usuario en el primer modelo visual de la plataforma de registro y memoria se diagrama esta sección con las acciones esperadas por el usuario categorizadas en 3 acciones:

  • Visualización: De contenido del sitio. Colecciones fotográficas, publicaciones, documentos, archivos, otros sitios relacionados.
  • Reproducción - Lectura:De contenido fotográfico, audio y textual. Biblioteca Constel, Videos, Archivo de la palabra, para reproducir y visualizar.
  • Solicitud:De archivo(s) seleccionados. Se establece un convenio para su posterior uso.


Primera diagramación AHJVA.

El diagrama presente se puede leer de la siguiente manera:

  • Buscar/explorar: El usuario en el sitio busca cierto contenido. En el sitio escribe el tema de búsqueda. Escribe el tema que busca. El sistema recibe la información, discrimina contenido, lo procesa, entrega un resultado.
  • Visualizar/Reproducir: El usuario ve los resultados, archivos: estos pueden ser imágenes, fotografías, video, texto o audio. Lo selecciona y reproduce, o lo selecciona para discriminar contenido.
  • Seleccionar/Solicitar: El usuario seleccionó un tipo de archivo, el sitio procesa la información y entrega nuevos resultados. El usuario observa nuevamente los archivos selecciona el menú, elige solicitar un archivo al sistema, este responde con un auxiliar, rellena un formulario y envía la solicitud.

La partitura de Interacción se utilizaría como herramienta de visualización de decisiones de diseño previas a la implementación del servicio digital.

Personas EAD

En el caso de estudio de Personas EAD, propuesta de María Jesús Abarca (2012), se observa en que la partitura de interacción utilizada no cumple cabalmente con las características de una partitura de interacción.


observaciones

  • No utiliza la iconografía
existe el logo registrarse
  • Ubica acciones del sistema que se visualizan en la pantalla (contacto directo) como proceso interno.
"bienvenida" y "popup" son ventanas de interfaz
  • Elementos como botones de interfaz (contacto directo) aparecen como Acciones de Usuario.
"editar" y "crear" se refiere a botones de interfaz
  • Especifica demasiados wireframes por acciones realizadas.
comprime muchos wireframes para acción "ingresar", "escribir datos", "verificar datos".


En el caso de Personas EAD, propuesta de Marcelo Velásquez (2011) la propuesta está más organizada pero aún presenta unos pocos detalles.

Partitura 2
  • No especifica el modo en que el sistema responde.
"datos" y "entrega información de notifiación" o "certifica bienvenida" no se especifica si es otra ventana, módulo, popup, etc, no está ilustrado.

En el caso de Optimización del sitio Personas EAD, propuesta de Alejandra Salinas (2011) la propuesta se presenta mejor organizada pero carece de algunos iconos y otros elementos.

  • No presenta representación gráfica
Las secciones no se identifican con los iconos correspondientes.
  • No hay distinción de módulos
No hay líneas que dividan las acciones ni módulos, ni especifica cuántos wireframes utiliza la paritura para su ejecución
  • No hay clara ubicación de acciones
Ingresar datos está ubicado en "Contacto directo" mas en los anteriores aparece en "Acciones de usuario"

Crear grupo facebook

Como otro caso de estudio más real y un poco más complejo se ha establecido como caso de uso la creación de un grupo en facebook.

en la parte superior se ubican las pantallas en las que se interactuó y debajo de estas se encuentran la partitura.
partitura mobile

Archivo:Cf caso de uso 2.pdf Archivo:Cf caso de uso 2 mobil.pdf

La partitura grafica lo siguiente:

  • wireframe 1: ingreso al sitio. Búsqueda del menú. Seleccionar opción de crear grupo al sistema.
  • wireframe 2: Cambio de pantalla, dada la reacción del sistema. Lectura de la pantalla para encontrar la opción crear, seleccionar.
  • wireframe 3:Popup model aparece como respuesta del sistema para el formulario de creación del grupo. Se ingresa datos escribiendo como seleccionando opciones. Se ejecuta la petición. Se espera reacción del sistema.
  • wireframe 4: En caso de haber un error, el sistema responde con una alerta y el usuario ingresa datos faltantes.
  • wireframe 5:En caso de no haber error, el sistema responde con el siguiente paso, la selección de un icono para el grupo. Seleccionar y aceptar.
  • wireframe 6: El sitio recibe y almacena la información, luego responde con la pantalla de grupo de face creado. Aparece un mensaje popup informativo, se selecciona aceptar para cerrarlo.
  • wireframe 7:En la misma pantalla de grupo se selecciona editar portada, aparece un modulo para elegir la imagen, esta se selecciona y el sistema la descarga y almacena.
  • wireframe 8: El usuario ve la imagen, ajusta la imagen y selecciona aprobar cambios. El grupo ha sido creado.


Observaciones

Se requiere modular con eficacia la partitura, subdividir los "módulos" en secciones menores equivalentes por "acciones" realizadas en cada "modulo", definir cuándo se termina un modulo y comienza otro, a la vez que se requiere afinar el tipo de relaciones que conectan a cada elemento de la partitura, distinguiendo las inferencias, derivaciones, complementos, implicancias, ejemplo. Al ingresar e ir a menú:¿ingresar datos deriva de el menú o pertenece a acciones del usuario? ¿cuando un usuario realiza varias acciones dentro un mismo modulo todos relacionados cómo nombrarlo distinguiendo las relaciones directas?.

Enviar correo Gmail

en la parte superior se ubican las pantallas de uso y debajo de estas se encuentran su partitura.
partitura mobile

Archivo:Cf caso de uso 3.pdf Archivo:Cf caso de uso 3 mobil.pdf

En este caso la situación a tratar es la creación de un mensaje con un archivo adjunto a través del servicio de Gmail tanto en computador como en celular.

Para esta partitura se tomó una decisión de mayor definición en cuanto a las acciones del usuario corresponde, pues en casos anteriores se ocupaba demasiado la acción visualizar más hay que saber utilizarla cuando es realmente necesario. Pero la principal decisión es pensar en que las acciones del usuario ejercen influencia en el sistema, por lo que las direcciones de estas siempre han de ser apuntadas hacia abajo, en acción hacia los elementos de interfaz por las que el usuario interactúa con el servidor en el nivel mas inferior.

CONECTORES

  • Influencia:Flechas direccionales que indican hacia dónde la interacción va dirigida. Se observan 2 tipos de estas:
  1. Descendentes:Es cuando se ejerce una acción a un elemento de nivel inferior. Es decir, la acción del usuario afecta a un elemento de interfaz y este a su vez afecta al sistema.
  2. Ascendentes:Es cuando se ejerce una reacción a algún elemento en un nivel superior. Es decir cuando el sistema, en el nivel inferior de la partitura responde reaccionando entregando un elemento de interfaz, en un nivel superior. Cómo un elemento de interfaz no realiza ninguna acción sobre el usuario, nunca habrá una linea ascendente desde la interfaz a las acciones del usuario.
Descendentes y Ascendentes
  • Derivación:Flechas direccionales que indican hacia qué otras acciones o elementos continúan en la secuencia de interacción a partir de una acción o elemento de interfaz inicial.
  • Transición: Flecha que indica el paso de una pantalla a otra distinta de la anterior, en reacción del sistema para satisfacer un requerimiento. Siempre se da desde el sistema hacia una ventana nueva en la interfaz. Habría que destacar más visualmente este signo.