Taller de Diseño de Interacción 2023

De Casiopea

Examen del Taller de Diseño de Interacción, Primer semestre 2023

Este taller constó de 3 partes:

  1. La primera: una introducción a la interacción, como campo de observación y de estudio. Cada uno observa una interacción y rediseña un elemento de control de la interfaz.
  2. La segunda se enfocó en la interacción como diálogo transaccional donde el taller diseñó el Portal de Trámites de la Municipalidad de Valparaíso.
  3. La tercera se enfocó en la interacción del juego donde cada alumno diseñó un juego concreto (de mesa, digital o a escala torneo)

La interacción es el diálogo o la comunicación entre un usuario y un sistema o producto, diálogo que este taller media a través del diseño. Entonces, las 2 experiencias principales de este taller, Transacción y Juego, se presentan casi como los polos extremos del espesor de la interacción humana como campo de estudio del taller. Esta materia nos introduce a conceptos claves como: la comunicación bidireccional, la retroalimentación, la experiencia (del usuario), el modelo conceptual que opera detrás, y el contexto de uso. Estas son materias de estudio que guían las propuestas que desarrollamos, tanto en un contexto físico como en uno digital.

El diseño de interacción define la mediación de los elementos que conforman un juego finito y cerrado. Precisamente, es en esta clausura donde el juego puede existir, al igual que la transacción. La transacción requiere precisar los pasos y las partes para llevar a cabo cierta operación. Esta clausura o determinación de los marcos de un sistema permite definir un lenguaje; entonces, la interacción se entiende como un lenguaje de mediación dado que tiene palabra, mensaje, instrucción, y posee “acontecimiento” o acción, el “acontecer” que es también un fenómeno físico. Tanto en el lenguaje de la forma y de la palabra, y en su aplicación al juego y a la transacción, hay una construcción de sentido, una reflexión sobre su posterioridad temporal, y el cuidado de su tiempo interno.

El diseño, tanto en el acontecimiento de la transacción como en la jugada del juego, opera en un diálogo que se va desplegando en el tiempo. La comprensión del hilo que conecta los momentos y les da sentido es lo que debemos observar en este taller. Si entendemos la “observación” como nuestra propia “notación en el tiempo” del acontecer o de la acción, le proponemos al Taller que la interacción puede escribirse como una partitura que describe el diálogo entre sujeto y objeto (o sujeto con sujeto mediados por un sistema u objeto). Comprender, racionalizar y proyectar la interacción comprendida como diálogo, es una lección que este taller puede ofrecer.

Cuando hablamos de interacción también nos referimos a una triada, que reconoce a las personas, a las acciones y a los elementos materiales, sean ellos pantallas, páginas, objetos y en este caso, juegos.

Interacción-Verplank.png

Considerando esta triada, nos preguntamos ¿Por qué es relevante observar? Pensamos que sólo persistiendo en recoger algo es como se puede aprender a enaltecerlo. Se habla que la observación es un elogio. La invención del elogio es la interpretación del diseño y es darle un nuevo hilo que le da sentido. Persistencia en algo que se recoge, desde ahí se reconoce el valor y se eleva a otra dimensión que cobra sentido entre nosotros.

Si consideramos que la interacción “del usuario” está basada en 3 momentos: observar, reflexionar y actuar (semejante también a las 3 capas de las partituras de interacción) resulta destacable que la tríada: sensor, procesador y actuador sea semejante a un sistema robótico autónomo. El campo de observación considera a múltiples actores, humanos y no-humanos, interactuando entre sí. En este mismo sentido, la interacción “sujeto con otros sujetos mediados por un objeto” es el avance del segundo módulo, el diseño del juego.

En un primer módulo, y en línea con la transformación digital promovida por el Estado, el taller se dividió en cinco oficinas de diseño, las que desarrollaron observación, investigación de usuarios y propuestas de interacción navegables para realizar diversos trámites municipales de forma digital, vinculadas al sitio del Municipio. Para darle inicio al módulo, nos reunimos en la Municipalidad de Valparaíso para observar las diversas situaciones y transacciones, tanto humanas, como espaciales y administrativas, que determinaban la interacción entre espacios, objetos, dispositivos digitales y habitantes. Esta partida buscó comprender quiénes eran las personas que realizaban trámites y cómo ellas podían acceder de manera más directa e intuitiva a la ejecución de éstos a través del futuro portal digital. Considerando que el desafío era acercar la ley de transformación del estado al Municipio, y finalmente a las personas, el taller siguió e investigó a diferentes usuarios, definiendo personas y escenarios posibles. En paralelo, se categorizaron aproximadamente 130 trámites municipales de acuerdo a diferentes variables que buscaban esta aproximación entre los habitantes y la comprensión de la función más directa dentro del portal, para encontrar las categorías más simples y claras que indican de manera más universal y precisa cada árbol de trámites dentro del sitio. Teniendo en relevancia estas categorizaciones y a través de un diálogo transversal, se desarrolló el mapa de navegación del portal, sobre el que cada oficina propuso un árbol de trámites asociado a épicas, o viajes de usuarios. En este caso, los cinco prototipos funcionales que mediaron la triada entre personas, objetos y acción se compartieron con expertos del municipio, y se probaron con distintos usuarios para iterar y contribuir al desarrollo de cada propuesta.

En el segundo módulo diseñamos juegos, teniendo en cuenta un campo teórico que establece categorías de juegos y del jugar, por ejemplo, a través de la lectura de textos de Huizinga, Callois y Casanueva. En este módulo se origina una propuesta desde la observación de estados de flujo y juego. Se cree en que el salir a observar nos va a dar un momento de detención, un momento para sorprendernos y para persistir sobre lo que está ahí, frente a nosotros, nos va a conducir a maravillarnos e indagar sobre la experiencia vividas y a “las cosas mismas”. Desde allí cada estudiante plantea una propuesta original que tiene en consideración conceptos tales como: objetivo del juego, mecánicas del juego, reglas, tema, componentes, balance entre jugadores, escalabilidad, tiempo de juego, rejugabilidad, accesibilidad, campo de juego, trabas o desafíos, fruición, geometría, narrativa, progresión, interacción social, inmersión, estrategia, recompensas, aleatoriedad, dificultad, modos de juego y accesibilidad cognitiva. Para diseñar el juego jugamos, probamos otros juegos, leímos otros manuales y dedicamos tiempo a revisar la mecánica de cada propuesta, iterando en versiones de baja y mediana resolución semana a semana, las que se transformaron hasta tener una propuesta con los materiales reales. Cabe considerar que esta vez, el taller intentó no incluir narrativas figurativas dentro de juego, privilegiando abstracciones, con lo que pudimos constatar un vuelco hacia fenómenos físicos, cuyo desarrollo implicó una mayor consideración de los materiales utilizados. Lo que se espera de cada juego es que sea completo, lo que quiere decir que el juego se abra, se desarrolle y se cierre, y que al terminar una partida e iniciar otra, quedemos todos ante el por igual para volver a jugar. En este ejercicio se cumple la dimensión de clausura del juego, permitiendo ejercer el diseño de interacción.

Finalmente hay dos dimensiones que se cobran en este taller: el diseño es con otros y el diseño es verdadero. La propuesta se verifica y cobra una dimensión de lo verdadero o lo real cuando aparece como tal, cuando otros la pueden utilizar, probar y verificar. Tanto en el campo de lo digital, como en el físico, que en este caso serían los juegos, las propuestas existen y son asibles. En base a esta dimensión de realidad se puede analizar si ellas funcionan o no funcionan, qué partes de ellas sirven, si acaso su forma diseñada y las acciones que proponen es lo que las y los autores esperan, o si hay apreciaciones materiales, prácticas y simbólicas que los usuarios comprenden o interpretan de otros modos . Aunque podamos buscar lo bueno, lo bello y lo verdadero, este taller privilegió lo verdadero.

Profesores: Daniela Salgado y Herbert Spencer.



Asignatura(s)Taller de Diseño de Interacción
Año2023
Tipo de CursoTaller de Etapa
TalleresDG 3º, DG 4º, DO 3º, DO 4º
ProfesoresHerbert Spencer, Daniela Salgado
EstudiantesMacarena Alonso, Fauve Bellenger, Belen Briones, María Fernanda Calderón, Camilla Carella, Marisol Cekalovic, Fernanda Farías, Francesca Favilla, Maria Eliza Mondaca, Kaithlyn Murga, Rafaella Osorio Corvetto, Scarleth Osorio, Rodrigo Parra Ortiz, Antonia Pino Salinas, Constanza Pomodoro, Catalina Zaro Vivanco, Anastasia Somerville, Emilia Lara Sanchez, Catalina Landeros Rojas, Jose Tomas Cáceres, Francisca Ortega, Carla Gómez Guerra
Carreras RelacionadasDiseño

Estudiantes


Información General

Horario Sala
Lunes y jueves
Claves 3,4 - 5,6
9:35 - 12:10
Sala Hall
Matta 12
Modalidad 100% presencial

Formato Carpeta

El formato de la carpeta de taller corresponde a páginas de 25,6 cm x 15,4 cm. Estas páginas se unen como acordeón, por lo tanto se sugiere dividir el pliego por el largo de 77cm en 3 tiras y cortarlo. Cada paño de papel de 25,6 cm x 110 cm se debe plegar a 15,4 cm. El excedente del paño sirve como solapa para unir los acordeones. El papel puede ser ahuesado o hilado 6.

Formato-carpeta-dix-2023.png

Módulo 1: Interacción como materia de diseño

Este módulo tiene por objeto definir la materia del taller. En un primer momento observamos la forma en la que nos relacionamos con los sistemas y objetos técnicos por medio de una interfaz. La noción de interfaz, como el espacio de expresión e impresión (feedforward y feedback), o de diálogo entre intencionalidad y acto resultante, se transforma en el campo primero de aproximación del taller. Nos interesa poder reconocer este espacio en la cotidianeidad de nuestros actos y en la familiaridad de los objetos que nos acompañan. ¿Cómo se da esta relación en el espacio que nos rodea? ¿qué es lo implícito en ella? ¿podemos reconocer y categorizar distintas formas de relación? ¿cuál es la cualidad de este diálogo en su despliegue temporal? Este es el primer campo especulativo y materia del taller.

Encargo

Observar las relaciones de interacción en nuestro cotidiano,dando cuenta de la temporalidad. Para esto se requiere ir a ver escenarios y situaciones de interacción, revisando cómo dialogamos con constructos de diseño y los objetos-sistemas interactivos en nuestro entorno y la ciudad.¿Cómo son esos, lugares?¿Hasta donde se interactúa con un sistema? Se requiere traer a presencia esa mirada, y tener un juicio de valor individual sobre esto.

El registro de la tarea se realiza en la bitácora, considerando que será expuesta en los muros del taller, lo que requiere diseñar el registro de la tarea. Además de las observaciones, la tarea implica desarrollar definiciones de interacción e incorporar diagramas. Estas se presentarán en forma sintética ante el taller. Una primera referencia que contribuye a pensar esta relación es el diagrama de Bill Verplak, quien postula que diseñar para la interacción involucra pensar en estas 3 preguntas: ¿Cómo lo haces? ¿De qué manera afectas al mundo?, ¿Qué sientes? ¿Qué percibes del mundo y cuáles son las cualidades sensoriales que dan forma a los medios de comunicación?¿Cómo sabes? ¿Cómo aprendes y planificas (o, tal vez, cómo queremos que pienses)?

Clase 13.03.23

Se realiza la corrección del primer encargo, discutiendo sobre la materia de interacción observada por los estudiantes y revisando de manera crítica distintas interacciones mencionadas. En esta instancia nacieron observaciones interesantes que abrieron discusión entre el grupo, por ejemplo “Hay gestos o acciones innatas/intuitivas al momento de interactuar” “La mayoría de los sistemas son particulares y no están diseñados para la interacción colectiva”.

Cómo corrección se recalcó la importancia de ver la realidad fuera de lo obvio, para así encontrar ocasiones de diseño dentro de aquello que nos parece normal o cotidiano. En este sentido, se requiere persistir en el dibujo y en el mantenerse en un estado de disposición frente a lo que acontece.

Posteriormente se realizó una actividad grupal o mini desafía, cuyo objetivo era diseñar la interfaz exterior e interior de los ascensores de una biblioteca de 1000 pisos. Se evaluó de manera colectiva las distintas propuestas, identificando algunos factores que hacen más eficientes las interfaces. Se menciona la posibilidad de diseñar esta interfaz a través de categorías, como la de Melvin Dewey.

Se presenta el origen del diseño de interacción, definición, propósitos y sentido.

El encargo para el día 16.03 consiste en rediseñar el widget de algún sistema, entendiendo widget como una pequeña unidad que alimenta el sistema. El formato de entrega es un video horizontal de máximo 1 minuto, mostrando el contexto y la versión original y el widget rediseñado en uso.

Documentación en Casiopea
  1. Crear un Nuevo Proyecto con el nombre del widget
  2. Como "Cursos Relacionados" definir Taller de Diseño de Interacción 2023
  3. Como "Palabra Clave": definir: widget
  4. Incluir un video (clip) de demostración de la situación de cambio y la nueva interacción

Proyectos: rediseño Widget

  1. Anastasia Somerville - Rediseño de Widget - Tarea 2(Alumnos: Anastasia Somerville)
  2. Antonia Pino - Rediseño de Widget - Tarea 2(Alumnos: Antonia Pino Salinas)
  3. Belén Briones - Rediseño de widget: caja de Autoservicio(Alumnos: Belen Briones)
  4. Camilla Carella - Rediseño de Widget: Lector de tarjeta cajero automático(Alumnos: Camilla Carella)
  5. Carla Gómez: Rediseño Widget(Alumnos: Carla Gómez Guerra)
  6. Catalina Landeros: rediseño de widget(Alumnos: Catalina Landeros Rojas)
  7. Catalina Zaro Vivanco - Rediseño de un widget: Tótem de autoservicio(Alumnos: Catalina Zaro Vivanco)
  8. Constanza Pomodoro - Rediseño de Widget: Contenedor de basura(Alumnos: Constanza Pomodoro)
  9. Emilia Lara: Rediseño de widget(Alumnos: Emilia Lara Sanchez)
  10. Fernanda Farías-rediseño de widget(Alumnos: Fernanda Farías)
  11. Francesca Favilla: Re - diseño de un widget(Alumnos: Francesca Favilla)
  12. Francisca Ortega: Rediseño Widget(Alumnos: Francisca Ortega)
  13. José Tomás Cáceres - Rediseño de Widget - Tarea 2(Alumnos: Jose Tomas Cáceres)
  14. Kaithlyn Murga Ramírez - Re-diseño de Widget: Botonera Peatonal(Alumnos: Kaithlyn Murga)
  15. Macarena Alonso - Rediseño de widget - Tarea 2(Alumnos: Macarena Alonso)
  16. Marisol Cekalovic: Rediseño Widget(Alumnos: Marisol Cekalovic)
  17. María Eliza Mondaca - Rediseño de Widget: torniquete
  18. Rafaella Osorio Corvetto- Re widget/ "Archivados de Gmail"(Alumnos: Rafaella Osorio Corvetto)
  19. Rodrigo Parra - Nuevo Widget: Tostadora(Alumnos: Rodrigo Parra Ortiz)
  20. Scarleth Osorio Amaya - Rediseño de Widget(Alumnos: Scarleth Osorio)

Clase 16.03.23

Antes de comenzar la clase, se nos hizo saber que existe un drive con referencias y bibliografías relacionadas a la clase además de invitarnos a compartir información relacionada al taller que encontremos por nuestros propios medios, el link a dicho drive fue enviado a nuestros correos institucionales. La clase se dividió en dos partes.

En primer lugar, se realizó la corrección del segundo encargo que consistía en rediseñar un widget de algún sistema que hemos observado, recalcando la problemática de la relación entre usuario-sistema, la solución de este y la maquetación de la modificación que se le quizo dar al elemento.

Se realizaron comentarios correspondientes a la revisión de los encargos, cada alumno con una representación en video de cuál era su widget a rediseñar. Se apunta la relación entre Usuario, Interfaz, Sistema. Se refiere brevemente a partitura de interacción donde a través de estas 3 últimas es donde comprendemos la interacción y subjetividad del usuario así como identificar problemas de interacción con ciertos objetos, servicios, productos. "buen y mal diseño"

La segunda parte de la clase fue una intervención de dos agentes gubernamentales, donde nos presentaron un plan de Transición digital del estado cual hace referencia a la aún ley en desarrollo 21.180. Esta ley busca incorporar soporte y la tramitación electrónica en los procedimientos administrativos del Estado y la gestión documental.

El temario de la presentación fue el siguiente:

Ley 21.180.

  • Alcances
  • Sistemas y Plataformas
  • Beneficios especiales de la ley

Trámites y procesos administrativos

  • Catalogación
  • Rediseño de procesos
  • Implementación de trámites en simple

Pauta de trámites municipales

  • trabajo previo: modelo, interacciones, perfiles, categorías
  • Prototipo y prueba
  • Desafío y tarea

Se rescata de la ley 21.180 que se busca integrar progresivamente el uso de TLCs en los servicios públicos, según el calendario de trabajo, para el año 2025 todo trámite debiera ser digital, como ejemplo. En el caso de que un usuario, ciudadano requiera hacer un tramite y no posea conectividad, es responsabilidad del estado proporcionar medios de conectividad para realizar cualquier trámite que requiera

Palabras clave: Interoperabilidad, Reconversión laboral, Digitalización, Plan de trabajo, Usuario, Widget, rediseño

Clase 23.3.23

La jornada del día 23 de marzo comienza con la revisión de los nombres de cada oficina y los integrantes de cada una de estas para compartir opiniones de como es el espacio en el que estamos trabajando, coincidiendo en que este es desordenado, que tiene una falta de jerarquía en sus trámites y hay escasez de información, sumado a esto nos encontramos con patrones de comportamiento en ciertos usuarios que asisten a la municipalidad para la ejecución de sus trámites, clasificando un poco estos para conocer mejor el tipo de público al cual se dirige nuestro estudio y proyecto.

Dentro del diálogo como taller salieron ciertos puntos a tratar como el comportamiento, las necesidades y los perfiles de estos usuarios, el análisis e investigación de las actividades frecuentes y de prioridad a realizar en la municipalidad y el cómo se puede expandir el ámbito digital “¿mejorar la accesibilidad?”

  • Investigar
  • Prototipar
  • Interpretar
  • Describir

Se habló sobre la limitante brecha semántica que existe entre los funcionarios y los usuarios, ya que el lenguaje "funcionario" a veces denota actividades que no tienen relación con el trámite en sí, resultando difícil de comprender para las personas que no están habituadas a esto. Eso determina que la comunicación de algunos procedimientos no sea efectiva, esté incompleta o no sea entendible para las personas. Es por eso que se sugirió el desarrollo de un tesauro que permita trasladar los procedimientos y su significado a un lenguaje amigable para los usuarios de la municipalidad.

La segunda parte de la clase tras el periodo de compartir como taller todo lo que pudimos recoger en el proceso de estudio, se terminó una presentación pendiente respecto al Diseño y Storytelling, este corresponde a las narrativas en el diseño en donde se mezcla la literatura y el diseño para la comunicación de mensajes y generación de experiencias. Gustav Freytag nos presenta una forma de arco narrativo el cual forma parte de la narrativa para un storytelling, identificando la función de cada parte y relacionado con el acto de diseñar, a su vez se usa una pequeña historia como ejemplo para clasificar cada punto del arco narrativo.

  • Exposición
  • Alza de acción
  • Crisis
  • Climax
  • Caida de acción

El recurso de la narración sirve para homologar ciertos aspectos propios de los relatos y poder construir historias que hagan más entendible a los usuarios la finalidad, de por ejemplo, una aplicación. Esa abstracción del relato también permite crear analogías con cosas cotidianas que puedan apelar a las emociones y sensibilidades, creando un lugar común que sea entendible para la mayor cantidad de personas.

Clase 27.3.23

La clase del día lunes 27 de marzo, comenzamos analizando a Alan Cooper y la obra "About face" (2003) donde nació el concepto: método. El método es la manera en que trabajamos, es la construcción del conocimiento. Estas afirmaciones deben tener sentido, se debe fundamentar frente a otros con datos.

Luego nos llevó a estudiar en profundidad la Rueda Metodológica.

Comienza con la ideación (?), luego con las investigaciones de usuario (IU) -necesidades, modelos mentales, conceptos - para llevar a cabo la Arquitectura de Información (AI), esta sería una información implícita, donde cada palabra te anticipa a algo. Estos mapas van cambiando según las necesidades.

La siguiente etapa sería a través de la maqueta de un momento (MN) la construcción de Wireframes (W) siendo una guía visual que representa el esqueleto o estructura visual de un sitio web. Como siguiente paso tenemos el Diseño Interfaz Usuario (DIU) y por último el Diseño Front (DF).

Síntesis

  1. Ideación
  2. Arquitectura de Información - MN
  3. Wireframes - PU
  4. Diseño Interfaz Usuario
  5. Diseño front-end (del diseño visual al código HTML + CSS + JS)

Para la segunda parte de la clase, se llevaron a cabo las correcciones del encargo a cada oficina de diseño. Algunas de las correcciones destacadas fueron:

  • Analizar la manera en que se deben exponer las oportunidades del problema, a partir de la lista de conflictos que se identifican.
  • Reconocer objetivos (sean generales y específicos)
  • Protocolo pensamiento hablado / analizar sitio web en sí mismo - análisis de sitio y la declaración criterio de análisis.
  • Traer criterios para agrupar / mapas de afinidad
  • Definición de cantidad de trámites que se realizan de manera online - indagar en la web
  • Mapa de empatía
  • Jerarquizar información
  • Referencias claras
  • Legibilidad de la presentación

Encargo Jueves 30.03

Definir síntesis visual, hallazgos, Wireframes, arquitectura de información. Ilustrar con trámites reales, una propuesta de diseño a partir de las entrevistas. Organizar criterios y jerarquías.

  • “En el Diseño es importante saber contar una historia”
  • Palabra clave para wiki: municipio

Clase 30.3.23

La jornada del jueves 30 de Marzo inicia con una clase sobre la arquitectura de información:

Richard Saul Wurman lo define como Hacer de la información algo comprensible a otros seres humanos

Por otro lado, Peter Morville & Louis Rosenfeld lo definen como Piensen en los arquitectos de información como los bibliotecólogos de la internet

La arquitectura de información está muy vinculada al diseño visual. Es la combinación de organización, etiquetado, búsqueda y sistemas de navegación en sitios web e intranets a través del diseño estructural de espacios compartidos de información con el fin de formar productos de información y experiencias para apoyar la usabilidad y encontrabilidad.

Ejemplos:

  • La página de la PUCV
  • Software de Ilustrator
  • Afiche infografía

¿Qué es la información?

La información esta entre los datos concretos y el conocimiento dentro de las personas. La arquitectura de información tiene una mirada estructural que da orden y dispone los caminos de la información.

Pasos AI

  1. Análisis: Estudiar el caso específico. Observación
  2. Selección: Inventario de contenidos
  3. Edición: Primeras ideas estructuradas de la información
  4. Organización: Definición de estructura total, se establecen jerarquías.
  5. Diagramación: Wireframes


Entregables: Se definen los entregables claves de una presentación:

Mapa de navegación: Es una representación gráfica de la organización de los contenidos en una plataforma digital. Es fundamental para explicar y presentar una AI. Se utiliza para jerarquizar contenidos, representar y entender relaciones entre contenidos y para definir elementos básicos.

En la segunda parte de la clase, dos grupos presentan su avance en su presentación como oficinas de diseño, las retroalimentaciones recolectadas son:

  1. Contar lo encontrado (y no el proceso, eso queda en la wiki)
  2. Contar la metodología (por ejemplo el cardsorting)
  3. Sintetizar
  4. Ser cauteloso con las imágenes, incluir delicadamente los detalles importantes de cada imagen, construir coherentemente
  5. Grillas
  6. Vincular la arquitectura de información a los problemas encontrados. ¿Por qué proponemos hacer ciertos cambios?

Clase 20.04.23

En la clase del día jueves 20 de abril, comenzó con la corrección del mapa de navegación, aun así se deben corregir ciertos elementos, dejarlo más bonito estéticamente y crear un lenguaje de distinciones. El mapa de navegación se hizo en conjunto de todas las agencias, el mapa es una representación visual de las páginas que conforman un sitio web y la información que contendrán. En este caso se hizo un mapa de los tramites de la municipalidad de Valparaíso.

Posteriormente se corrigieron la primera épicas de todos los grupos. Los wiframes hechos en computador y otros en celular. Para la mayoría de los grupos las correcciones fueron:

  • Jerarquización de información.
  • El contraste, el texto y el fondo.
  • Tener cuidado con las proporciones y terminaciones redondas.
  • Ocupar grillas.
  • La distancia entre objetos y las dimensiones.
  • Dejar solo el logo del municipio. (En la home parecer el logo de Valparaíso y el del municipio)
  • Textos legibles como el tamaño y tener cuidado con centrar el texto.

Mirar diseños de interfaces, Home. Orden, colocar los nombres en figma en los archivos. Trabajar en biblioteca- componentes. Paginas que nos ayudaran en el diseño front, bootstrap

Entrega Módulo 1

Entregables cierre de módulo

  1. Mapa de Navegación - Taller: El taller realizará un mapa de navegación colectivo que contempla la distinción de navegación, categorías y elementos de interfaz del sitio de la Municipalidad de Valparaíso y el portal de trámites. El mapa se debe acordar en conjunto por el taller y en diálogo constante con María Eliza, encargada de la formalización del Mapa de Navegación. Considerar horizontes de nivel,buscador, login, elementos de pantallas o de menú desplegables, líneas de conexión y textos que se puedes incluir en las líneas de conexión. Utilizar vocabulario de Garrett. La lámina es de 90 cm de alto y de ancho por definir. Revisar relación entre fondo y textos, cuidar de las proporciones, de las cajas, de las líneas y de la legibilidad del mapa
  2. Video de Navegación - Grupal: Crear videos en relación a las tres épicas determinadas por el grupo y su navegación de principio a fin, tanto para pantallas de teléfono como para computadores. Esto videos muestran capturas de pantalla con interacción y audio con narración de la interacción o recorrido del usuario
  3. Documentación en Wiki - Grupal: Realizar documentación en wiki por oficinas, en base al material obtenido y analizado a lo largo del módulo. La documentación debe organizarse por jerarquías en el desarrollo del proyecto, presentando claramente la propuesta del grupo. Se requiere que la documentación sea organizada en relación a los contenidos y la propuesta en vez de presentar un orden cronológico, se debe presentar con claridad:
    1. Objetivos
    2. Métodos
    3. Hallazgos
    4. Propuestas de diseño
    5. Pruebas de navegación. Para esto se requiere explicar a usuarios que no es un test de inteligencia, que contribuye a mejorar el diseño propuesto identificando problemas para su posible solución, se requiere que el usuario piense en voz alta sin que los diseñadores brinden pistas de uso, identificar hallazgos que sirvan para iterar en la propuesta.
    6. Mapas de clase y partituras de interacción (opcionales)
  4. Lámina - Grupal: Cada oficina realiza una lámina grupal de 90 cm de alto. En esta lámina se debe nombrar y presentar la propuesta (título de la propuesta, nombre de la oficina, objetivos, radicalidad de la propuesta). Debe contener:
    1. Fase de investigación y levantamiento de información
    2. Investigación de usuarios (encuestas, entrevistas, definición de personas) y sus hallazgos e implicancias para el diseño
    3. Arquitectura de información (criterios)
    4. Mapa de Navegación particularizado por grupo en relación a la categoría determinada
    5. Vocabulario visual (estilos, componentes tipográficos, cromáticos,elementos de interfaz, etc.)
    6. Plantillas y tipos de pantalla
    7. Épicas de usuarios y navegación. Considerar tres épicas y su navegación en dispositivo móvil y computador.

Oficinas

  1. AVD(Alumnos: Macarena Alonso, Francesca Favilla, José Urrejola)
  2. Eunoia(Alumnos: Fauve Bellenger, Catalina Zaro Vivanco, Kaithlyn Murga, Belen Briones, Fernanda Farías)
  3. HERMES(Alumnos: Carla Gómez Guerra, Francisca Ortega, Scarleth Osorio, Marisol Cekalovic, Rafaella Osorio Corvetto)
  4. OAW(Alumnos: María Fernanda Calderón, Jose Tomas Cáceres, Emilia Lara Sanchez, Rodrigo Parra Ortiz, Antonia Pino Salinas)
  5. WODIIN(Alumnos: Maria Eliza Mondaca, Constanza Pomodoro, Catalina Landeros Rojas, Anastasia Somerville, Camilla Carella)

Rúbrica de Evaluación Módulo 1

Resultados de aprendizaje Investiga y registra de manera rigurosa sobre métodos de diseño, contexto y usuarios Integra lenguajes en una propuesta compleja Diseña formalmente un prototipo verificable de acuerdo a los requerimientos de mandantes Participa de manera activa dentro de la oficina de diseño
Porcentaje 20% 30% 30% 20%
Modalidad de evaluación Individual-Grupal Grupal Grupal Individual
Entregables Registra claramente el proceso de diseño en la Wiki (proyecto individual y grupal) y documenta las dimensiones del proyecto de forma estructurada Propuesta construida y maquetas navegables Presentación ante mandante (Jefe de Transformación Digital Municipalidad de Valparaíso) Auto y Co-evaluación sobre aporte al equipo de trabajo y del taller
  • Presenta en clases de forma constructiva
  • Asume rol y tareas dentro del grupo
  • Aporta en base a sus conocimientos e inquietudes
Especificaciones Documentación física y digital Dibujos y anotaciones en su carpeta personal que expone en el taller y registra en la wiki como parte de su proyecto Entrega Final
  • Documentación wiki del proceso
  • maqueta navegable
Texto de reflexión y autoevaluación (rellenar formulario digital)

Mapa de Sitio

Mapa de Navegación del Portal de Trámites de la Municipalidad de Valparaíso. Trabajo Colectivo del Taller.

Referencias Módulo 1

Transformación digital del Estado

  1. Ley de Transformación Digital del Estado
  2. Transformación Digital: Hoja de Ruta
  3. Kit Digital. El Kit Digital consiste de una serie de herramientas de comunicación digital, diseño y desarrollo para facilitar la creación y mejora de los productos oficiales de Gobierno.
  4. Guía para el diseño de interfaces web institucionales

Herramientas

  1. Penpot es una herramienta de diseño de código abierto y gratuita que permite a los diseñadores crear diseños vectoriales y animaciones, diseños para web, aplicaciones y gráficos impresos, utilizando una variedad de herramientas y características para crear diseños y animaciones de alta calidad. También es una herramienta de colaboración, lo que significa que varios usuarios pueden trabajar en un proyecto simultáneamente, lo que facilita la colaboración y el trabajo en equipo.
  2. Las Partituras de Interacción son una técnica de diseño centrada en el usuario que se utiliza para planificar y diseñar interacciones entre un usuario y un sistema. En esencia, una partitura de interacción es un guion gráfico que muestra cómo un usuario interactúa con un sistema en diferentes situaciones. La partitura de interacción describe las acciones que el usuario realiza en cada etapa de la interacción, así como las respuestas del sistema a esas acciones. Las partituras de interacción son útiles para explorar diferentes escenarios de uso y para planificar las interacciones de usuario de manera detallada antes de la implementación. También pueden ayudar a los diseñadores a identificar posibles problemas y a solucionarlos antes de que se conviertan en problemas reales en el sistema. En resumen, las partituras de interacción son una herramienta valiosa para los diseñadores de interacción y pueden ayudar a mejorar la usabilidad y la eficacia de los sistemas.
  3. SysML es un lenguaje de modelado gráfico que se utiliza en la ingeniería de sistemas para describir, analizar, diseñar y verificar sistemas complejos. Se basa en UML, pero se centra en la modelización de sistemas y procesos complejos en lugar de la modelización de software. SysML proporciona una notación y un conjunto de diagramas que se utilizan para representar diferentes aspectos de un sistema, incluyendo su estructura, comportamiento, relaciones y procesos. Su uso en la ingeniería de sistemas y otras disciplinas permite una mejor comprensión de los sistemas complejos, lo que ayuda a detectar posibles problemas y a mejorar la eficiencia y eficacia en su diseño y desarrollo.
  4. El Design Toolkit de la Universidad Abierta de Cataluña constituye una caja de herramientas para llevar a cabo proyectos de diseño. Las herramientas se presentan en forma de fichas de contenidos y recursos de aprendizaje. El Design Toolkit recoje las herramientas más representativas y utilizadas, especialmente las que se trabajan a lo largo de los diferentes estudios de diseño gráfico e interacción.
  5. TableConvert es una herramienta en línea para producir el código (wiki markdown) para construir tablas con formatos más complejos

Lenguajes de Diseño

  1. BBC GEL: Global Experience Language Propuesta de BBC para el diseño de experiencias digitales.
  2. Atomic Design de Brad Frost Libro Atomic Design que persiste en crear sistemas de diseño, no páginas.
  3. Google Creative Lab
  4. Magenta.js Proyecto Open Source donde se exploran los alcances del Machine Learning a través de aplicaciones para navegador basadas en Tensorflow.js.

Diseño de Interfaz Gráfica de Usuario (GUI)

Al diseñar interfaces gráficas de usuario (GUI) para múltiples formatos, es fundamental seguir ciertos principios de diseño para garantizar una experiencia de usuario coherente y efectiva en diferentes dispositivos y tamaños de pantalla. Aquí hay algunos principios o heurísicas de diseño clave a considerar:

  1. Consistencia: Asegúrese de que los elementos de diseño, la tipografía, los colores y las interacciones sean consistentes en todos los formatos. La consistencia facilita la familiaridad y la usabilidad para los usuarios.
  2. Diseño adaptable (Responsive design): Implemente un diseño que se adapte automáticamente a diferentes tamaños y resoluciones de pantalla. Esto implica diseñar con un enfoque de "mobile-first" y utilizar técnicas como rejillas fluidas, imágenes flexibles y consultas de medios CSS.
  3. Escalabilidad: Utilice imágenes y elementos gráficos vectoriales para garantizar que se escalen correctamente en diferentes resoluciones y tamaños de pantalla sin pérdida de calidad.
  4. Navegación clara y simple: Facilite la navegación a través de la interfaz de usuario con menús y opciones de navegación claras y concisas. Considere el uso de menús desplegables, menús laterales o botones de navegación persistentes según sea necesario.
  5. Jerarquía visual: Organice los elementos de la interfaz de usuario de manera lógica y jerárquica para que los usuarios puedan identificar fácilmente las áreas de contenido y las acciones importantes.
  6. Tamaño de los elementos táctiles: Asegúrese de que los elementos táctiles, como botones e íconos, sean lo suficientemente grandes y tengan un espacio adecuado entre ellos para facilitar la interacción en dispositivos táctiles.
  7. Legibilidad: Utilice tamaños de fuente y contrastes de color adecuados para garantizar que el contenido sea legible en diferentes dispositivos y condiciones de iluminación.
  8. Retroalimentación visual y de interacción: Proporcione retroalimentación a los usuarios a través de animaciones, cambios de estado y transiciones para indicar que sus acciones se han reconocido y procesado correctamente.
  9. Simplificación: Evite la sobrecarga visual y funcional al eliminar elementos innecesarios y centrarse en las funciones principales que los usuarios necesitan.
  10. Pruebas y ajustes: Realice pruebas en diferentes dispositivos y tamaños de pantalla para garantizar que la experiencia de usuario sea consistente y funcione correctamente en todas las plataformas.

Glosario

  1. Diseño de interacción: El proceso de diseño de la comunicación y la interacción entre el usuario y la interfaz de usuario de una aplicación o sitio web.
  2. Diseño visual: El aspecto estético y gráfico de una interfaz de usuario, que incluye elementos como colores, tipografía, iconos, gráficos y diseño general.
  3. Diseño UX: La experiencia general de los usuarios al interactuar con una aplicación o sitio web. Incluye aspectos emocionales, subjetivos y objetivos.
  4. Diseño UI: El proceso de diseño de los elementos visuales de una interfaz de usuario, incluyendo iconos, botones, campos de entrada, menús, tipografía y otros elementos visuales.
  5. Diseño Front-end: El proceso de diseño de la parte visible y accesible de un sitio web o aplicación que el usuario final interactúa directamente.
  6. Diseño responsive: Un enfoque de diseño en el que se adapta el diseño de un sitio web o aplicación para que se ajuste a cualquier tamaño de pantalla y dispositivo, brindando una experiencia óptima al usuario.
  7. Diseño centrado en el usuario: Un enfoque de diseño que se enfoca en las necesidades, deseos y habilidades de los usuarios para crear una experiencia de usuario óptima.
  8. Arquitectura de información: El proceso de organización y estructura de la información en una interfaz de usuario, para que sea fácilmente accesible y entendible para los usuarios.
  9. Diseño iterativo: El proceso de diseño en el que se realizan pruebas y mejoras continuas para crear una interfaz de usuario óptima.
  10. Diseño de servicio: El diseño de una experiencia completa para el usuario, incluyendo la interacción con una organización o empresa en línea y fuera de línea.
  11. Patrones de diseño: Soluciones de diseño comunes y efectivas para problemas de interfaz de usuario.
  12. Wireframes: Representaciones gráficas esquemáticas de la estructura y diseño de una interfaz de usuario. Los wireframes suelen ser la etapa inicial del proceso de diseño.
  13. SEO: Optimización de motores de búsqueda. Se refiere a técnicas y estrategias para mejorar la visibilidad de un sitio web o aplicación en los resultados de búsqueda orgánicos en los motores de búsqueda como Google.
  14. Interfaz de programación de aplicaciones (API): Un conjunto de reglas y protocolos que permiten a diferentes aplicaciones interactuar entre sí.
  15. Prototipo: Una versión inicial de una aplicación o sitio web que se utiliza para evaluar y probar el diseño.
  16. Accesibilidad: El diseño de una interfaz de usuario para que sea usable y accesible para usuarios con discapacidades, incluyendo discapacidades visuales y auditivas.
  17. Retroalimentación del usuario: La información que se obtiene de los usuarios sobre su experiencia al utilizar la interfaz de usuario.
  18. Microinteracciones: Interacciones pequeñas y específicas dentro de la interfaz de usuario que mejoran la experiencia del usuario.
  19. Testeo de usabilidad: Pruebas de la interfaz de usuario para medir la facilidad de uso, la eficiencia y la satisfacción del usuario.
  20. Analítica web: La medición y el análisis del comportamiento de los usuarios en un sitio web o aplicación, para optimizar la experiencia del usuario y mejorar los resultados del negocio.
  21. A/B testing: Una técnica en la que se prueba una versión alternativa de una página web o una aplicación para compararla con la versión original y determinar cuál es más efectiva en términos de objetivos específicos.


Épicas

Registro y autenticación de usuarios

  • Objetivo: Facilitar el acceso seguro y personalizado a la plataforma.
  • Beneficiarios: Usuarios finales y administradores.
  • Funcionalidades clave: Registro, inicio de sesión, recuperación de contraseña.
  • Criterios de éxito: Tasa de registro exitoso, tiempo promedio para iniciar sesión, satisfacción del usuario.

Épica: Búsqueda y filtrado de productos

  • Objetivo: Permitir a los usuarios encontrar productos o servicios relevantes fácilmente.
  • Beneficiarios: Usuarios finales.
  • Funcionalidades clave: Búsqueda por palabras clave, filtrado por categoría, precio, valoraciones, etc.
  • Criterios de éxito: Tasa de conversión, tiempo en la página, satisfacción del usuario.

Épica: Carrito de compras y proceso de pago

  • Objetivo: Facilitar una experiencia de compra rápida y segura.
  • Beneficiarios: Usuarios finales y administradores.
  • Funcionalidades clave: Añadir al carrito, modificar cantidades, eliminar productos, proceso de pago.
  • Criterios de éxito: Tasa de conversión, abandono del carrito, satisfacción del usuario.

Épica: Personalización y recomendaciones

  • Objetivo: Mejorar la relevancia de los productos o servicios sugeridos a los usuarios.
  • Beneficiarios: Usuarios finales.
  • Funcionalidades clave: Recolectar datos de preferencias, algoritmos de recomendación, mostrar sugerencias personalizadas.
  • Criterios de éxito: Tasa de clics en productos recomendados, ventas generadas por recomendaciones, satisfacción del usuario.

Épica: Soporte y atención al cliente

  • Objetivo: Brindar asistencia eficiente y accesible a los usuarios.
  • Beneficiarios: Usuarios finales y administradores.
  • Funcionalidades clave: Sistema de tickets, chat en vivo, base de conocimientos, seguimiento de problemas.
  • Criterios de éxito: Tiempo promedio de respuesta, tasa de resolución de problemas, satisfacción del usuario.

Módulo 2: Interacción y Juego

Clase introductoria: Diseño como materia de interacción

Se aborda el rol histórico y no agotado de los juegos.Se mencionan los tipos de juego de acuerdo a diferentes categorizaciones,y se reflexiona sobre cómo los diseñadores podemos abordar las interacciones con otras personas a través de objetos mediados. Se menciona el paso de la construcción de un servicio a un juego. Parecen distintos pero la construcción es similar. En ese sentido, el modelo cognitivo de interacción se puede aplicar a ambos módulos. Primero encontramos la percepción y el proceso de la información a través de modelos mentales, y luego la expresión de esa decisión o la acción en el mundo.

En inglés se distingue entre play y game, game viene de ludus. Ludus era el lugar donde vivían los gladiadores. Play viene de Paideia, de la formación y la educación, es una exploración, un fluir en las cosas. Es la formación de personas dentro de una cultura.

Dentro de la bibliografía hay dos libros clásicos que debemos revisar, uno es el de Johan Huizinga y otro el de Roger Caillois. El recuadro que se ve en la presentación corresponde al segundo. Para mostrar algunas ideas de reglas de muestran los autómatas celulares:

Stephen Wolfram: Hizo un software llamado Wolfram Alpha, es un matemático que se puso a estudiar autómatas celulares en los años 60. Realiza un juego trabajando con 8 bits que establece todas las combinaciones posibles, que son 256. De lo simple emerge lo simple, y los resultados son predecibles, aunque en algunos casos la regla presenta fractales, y en algunos casos el caos. Presenta irreductibilidad matemática.

El árbol de solución del GO requiere tener un estado del presente, lograron hacer Alpha Go y ahora Alpha Go 1, que gana por mucho a Alpha Go. Ver el dilema del prisionero.

Encargo de Observación

Observar, ir a encontrar la materia. Ir a identificar cómo se construye este estado de flujo. Explorar el estado de flujo en la vida cotidiana, intentando develar estos estados de flujo en el juego. Es importante que estas observaciones constituyen la materia, los conceptos y el orígen del juego. Realizar la tarea en bitácora.

Rúbrica de Evaluación Módulo 2

Resultados de aprendizaje Investiga, observa, registra y expone de manera rigurosa sobre el juego Conceptualiza el juego vinculando las lecturas y las observaciones en un modelo Prototipa el juego e itera hacia una propuesta refinada Construye y desarrolla un lenguaje plástico y visual consistente, finiquitando un juego completo
Porcentaje 25% 25% 25% 25%
Modalidad de evaluación Individual-Grupal Individual Individual Individual
Entregables Croquis de observación expuestos y en carpeta. Presentación grupal del autor y de su teoría con enfoque crítico. Primer prototipo y modelo visual de la interacción lúdica propuesta (atisbo de una teoría propia) Proceso, maquetas y decisiones desde la retroalimentación del taller y de los usuarios. Decanta su propuesta hacia un soporte adecuado: juego de mesa, juego digital o torneo físico. Propuesta terminada, documentada y presentada de acuerdo al soporte y naturaleza del juego. Documentación en wiki, y videos correspondientes.
Especificaciones Recoge dimensiones singulares del juego, nombrando conceptos y obteniendo medidas y principios para el juego Establece las relaciones entre conceptos hacia una idea de experiencia de juego que considera mecánicas, fases y momentos singulares del juego Desarrolla una proceso proyectual en un diálogo interno (reflexivo) y con otros (investigativo) especificando el perfil, lenguaje y narrativa idónea para el juego propuesto Para evaluar el juego se consideran aspectos como: Lenguaje, tiempo y goce

Presentación de libros

Homo Ludens, Johan Huizinga

Se realiza una lectura del libro Homo Ludens escrito por el autor Johan Huizinga en 1938, en donde se analiza su visión, se distinguen los principales conceptos y se lleva a cabo una reseña critica con respecto a la visión actual del juego.

Los Torneos, Manuel Casanueva

Clase sobre juegos de Iván González- Búho Juegos

Importancia del desarrollo de juegos de mesa ya que es escaso en comparación con los juegos de pantalla. Ha habido un ingreso de Chile en la cultura lúdica lo que ha proporcionado un desarrollo de nuevos juego de manera acelerada ¿Qué es el juego? De acuerdo a Caillois, un juego tiene que ver con hacer una caja que logra que a cada nueva partida empezamos en igualdad de condiciones. Iniciar y terminar en el mismo punto, ese es el desafío.

  1. Composición de reglas:Hay manuales malos y explicaciones muy malas. Para tener un buen juego deben construirse buenos manuales, los que expresen buenas reglas de manera clara. Un buen manual debe contener:
    1. Título del Juego: Darle sentido al juego con el título
    2. Contenido: Número de piezas, cómo se llaman, cómo se ven
    3. Objetivos del juego/ Concepto del juego, cómo ganar el juego. Muy resumido
    4. Preparación del juego o tablero
    5. Cómo jugar: La explicación entera, más detallada. Hay que entender todo de a poquito antes de esto
    6. Final del juego y condiciones de victoria. Cómo termina el juego? Cómo es el empate? cuando se deja de jugar? quién gana?
  2. Tips: Presentar un juego y no morir en el intento
    1. Aprenderse las instrucciones antes de ponerlo en la mesa
    2. Elegir un buen lugar
    3. Elegir el tipo de juego y su dificultad en relación a lo jugadores
    4. Nivelar al jugador más motivado y atender al menos interesado
    5. Explicar de a poco
    6. Explicar el juego es explicar un historia.
    7. La autorregulación es la clave

Referencias Módulo 2

  1. Libro de Torneos, Manuel Casanueva
  2. Homo Ludens, Johan Huizinga
  3. Manifiesto for a Ludic Century, Eric Zimermman
  4. Clasificación de los juegos, Roger Caillois
  5. El Arte como Experiencia, John Dewey
  6. Metatopia: Diseño de Juegos de Mesa 101 (→ ver mapa conceptual)
  7. Jane McGonigal: Gaming can make a better world

Exposición y Entrega Final

Elementos considerados para la entrega

  1. Documentación de la Etapa
    • Carpeta de etapa
    • Documentación en Casiopea del proyecto final
  2. Prototipo final
    • Juego
    • Empaque, instrucciones, gráfica y
    • elementos adicionales en el caso de juegos de escala torneo (artefactos, vestimentas, modelos a escala, etc)
  3. Lámina del proyecto final
    • Título de la propuesta y nombre del juego
    • Observaciones iniciales y conceptualización del juego
    • Modelo del visual juego (Representación que comunica de la mecánica del juego)
    • Desarrollo formal de la propuesta, variaciones y evoluciones
    • Propuesta final

Juegos