Taller de Diseño de Interacción 2023

De Casiopea



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 Farias, 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

Referencias Módulo 2