Laboratorio Digital

Condiciones para regularizar:

• Aprobación del 80% de los Trabajos prácticos con 4 o mas
• Aprobación de un parcial múltiple opción con 4 ó más a ser evaluado virtualmente. 
• Aprobación del trabajo final con 4 o mas
• Participación en clase, especialmente durante las presentaciones grupales: en lo posible conectado.
• Se pueden recuperar el 50% de las evaluaciones dadas (2 de cuatro).

Condiciones para promocionar:

• Aprobación del 80% de los Trabajos prácticos con 7 o mas
• Aprobación del parcial intermedio con 7 o mas
• Aprobación del trabajo final con 7 o mas
  Participación en clase, especialmente durante las presentaciones grupales
• Participación en los espacios virtuales

Los alumnos que queden regulares rendirán un final/ coloquio volviendo a presentar todos los trabajos y principalmente se evaluarán aquellos que hayan tenido desempeño por debajo de 7. Estos alumnos rinden con el profesor que dictó la materia.

Los alumnos que rinden libres rendirán un final escrito y luego pasan a una instancia de evaluación oral-integradora presidida por un tribunal docente (todos los docentes que dictan la materia). Deberá abordar todos los ítems que se encuentran en el programa de la materia

En la actualidad los ordenadores o pcs son equipos indispensables y complementarios en tareas cotidianas y laborales.

Desde su aparición, estos equipos informáticos han incorporado sistemas operativos para controlar su hardware.

Sin embargo en los últimos años hemos visto un notable aumento en la proliferación de dispositivos móviles con capacidades muy similares a la de los ordenadores de escritorio y además, con software especializado para su contexto.

La adopción masiva de la tecnología móvil ha transformado la dinámica a partir de la última década permitiendo la creación de ecosistemas de servicios y aplicaciones (visto por la cátedra de Lenguaje Digital el semestre pasado), tanto que ahora las interacciones con los dispositivos móviles han dejado de ser llamadas telefónicas; abriendo posibilidades infinitas para el consumo y creación de todo tipo de contenido y gestión de procesos.
Si tenemos en cuenta su impacto actual, estamos asistiendo a un cambio de paradigma donde la ubicuidad de los equipos inalámbricos y los sistemas operativos móviles han comenzado a volverse una necesidad básica para los usuarios, quienes utilizan cada vez más estas plataformas que ofrecen ecosistemas muy atractivos de aplicaciones y servicios de computación en la nube.

Los dispositivos necesarios para correr un sistema operativo móvil se pueden agrupar en teléfonos inteligentes, tabletas, relojes cámaras digitales y cualquier tipo de dispositivo corporal. La interacción con el sistema se realiza por medio de pantallas táctiles o teclados físicos incorporados en el equipo que permiten una interacción cercana con el sistema y las aplicaciones instaladas.

En cuanto a la anatomía básica de un dispositivo móvil moderno, tenemos a un diseño rectangular de mayor o menor tamaño, en donde una gran superficie corresponde a una pantalla táctil. Los móviles también permiten la inclusión de dispositivos periféricos, como auriculares, teclados, lapides digitales, ratones, parlantes, bases para ubicarlos en el automóvil; etc. Si bien los complementan no son indispensables para interactuar de forma eficiente con el dispositivo móvil.

No obstante este diseño minimalista, y acorde con los lineamientos de la UPC, la resolución de problemas de interfases móviles todavía tiene retos importantes en cuanto a accesibilidad para brindar información a poblaciones en situación de discapacidad visual, para quienes la pantalla táctil no es un modelo ideal que soporte su interacción básica; en donde el teclado físico ofrecería una experiencia más adecuada. Si bien hay avances que prometen mitigar estas deficiencias.

Las aplicaciones permiten mejorar y personalizar un dispositivo: muchas veces la razón entre optar entre sistema Android o Ios dependen de las aplicaciones y de cómo se presenta la interfaz en las aplicaciones. Por todo lo expresado hasta aquí este cuatrimestre nos abocaremos al diseño de una app. 

Intercreativididad:

Nos basaremos en el principio de la intercreatividad para realizar los trabajos impartidos en clase: Hablemos de  intercreatividad:

La intercreatividad es el proceso de hacer las cosas o resolver problemas juntos. Si la interactividad no es sólo sentarse pasivamente delante de una pantalla, entonces la intercreatividad no es solo sentarse frente a algo interactivo«(p.156)¹²Se entiende entonces que esta idea está construida por las palabras interactividad y creatividad, las cuales se relacionan con el fenómeno evolutivo de Internet.

Va más allá de encontrar una información en la web, se trata de intercambiarla entre personas y dar lugar entre todos a la creación de nuevos productos que sean más completos y satisfagan mejor las necesidades del colectivo. 

No sólo se transfieren datos, sino que se hace un proceso social de intercambio creativo y por tanto una construcción colectiva del saber. Desde una perspectiva tecno-social , se trata de un potencial de uso de las tecnologías en red muy bueno, se construye un ciberespacio para compartir el conocimiento entre personas a través de networks de cooperación recíproca.

Introducción a la interacción humano-computadora. 

Interfaces de Usuario.

Tipos de GUI: 

Tipos de GUI: 

¿Qué es GUI?

Acrónimo de Graphical User Interface (Interfaz gráfica de usuario). Una visualización de software de opciones de programa que permite al usuario seleccionar comandos apuntando a iconos, cuadros de diálogo y listas de elementos de menú en la pantalla, generalmente mediante un ratón.

Conceptos relativos al diseño interactivo. 

El diseño interactivo es un proceso de desarrollo y programación de software que permite a los seres humanos y computadoras interactuar unos con otros a través de medios de interfaz.

Los medios interactivos son la integración de los medios digitales que incluyen combinaciones de texto electrónico, sonidos y gráficos con movimiento en una manera informatizada por dispositivos que nos permiten interactuar con los datos. Este tipo de medios de comunicación no debe ser confundido con “multi-media”. Debemos entender que el sector interactivo ha evolucionado rápidamente a través de muchas etapas y estos términos sobre todo reflejan una etapa que se supera constantemente.

Principios Básicos. 

1 . Consistencia

Debemos asegurarnos de que los elementos permanentes de interfaz permanezcan en el mismo lugar y de que conservan el mismo aspecto respetando el mismo diseño de la cuadrícula y las proporciones en las pantallas de experiencias digitales. Cuando estos elementos se mueven y cambian de aspecto y sin un propósito a través de estas páginas o pantallas, se convierten inmediatamente perceptible .

Este principio básico se aplica no sólo a la apariencia y colocación de objetos digitales, sino también a sus comportamientos. Cuando estos objetos comienzan a comportarse de manera diferente en condiciones similares, se produce una gran confusión para el usuario y lo obliga a tomar un nuevo enfoque o aprender una forma diferente para completar  su tarea.

Diseños consistentes tanto en la apariencia como en el comportamiento permitirá a los usuarios a permanecer centrados en sus tareas sin distracciones o sorpresas con cambios inesperados.

 2 . Perceptibilidad 

La gente es consciente de la oportunidad de interactuar con los medios interactivos. Como diseñadores de interfaz, tenemos que evitar el desarrollo de interacciones ocultas el cual disminuyen la capacidad de uso, eficiencia y experiencia de usuario de los medios interactivos. En otras palabras, las personas no deben tener que adivinar o buscar oportunidades para interactuar.

En el desarrollo de los medios interactivos, los usuarios deben tener la posibilidad de revisar una interfaz e identificar en donde pueden ellos interactuar. Debemos recordar que no todo el mundo experimenta e interactúa con la interfaz de la misma manera que los demás.

Hagamos de esto un hábito para proporcionar consejos e indicadores como señales visuales, tales como botones, iconos, texturas , tejidos digitales, etc.. Permitamos que el usuario vea que estas señales visuales en realidad se puede hacer clic o tocar con los dedos. Siempre debemos tener en cuenta la usabilidad y la accesibilidad de los medios interactivos y la forma en que el usuario ve y percibe los objetos en la interfaz.

3 . Facilidad de Aprendizaje

Otro principio básico muy importante es la capacidad de aprender y utilizar una interfaz fácilmente después de usarla por primera vez.

Facilidad de aprendizaje posibilita la comunicación más sencilla e intuitiva. Incluso las interfaces simples pueden requerir una cierta cantidad de experiencia para aprender. Las personas tienden a interactuar con una interfaz de manera similar que interactúan con otras interfaces.

Por esta razón, tenemos que entender la importancia de los patrones de diseño y la consistencia. Se sentirán inteligentes y capaces de comprender y utilizar nuevas interfaces permitiendo que se sientan seguros al navegar por la interfaz.

4 . Previsibilidad

Grandes diseños de interacción establecen expectativas precisas sobre lo que sucederá antes de que ocurra la interacción. Debemos ser capaces de mostrar a nuestros usuarios una interfaz y pedirles una serie de preguntas antes de que puedan interactuar con dispositivos celulares, tabletas y sus interfaces. Por ejemplo, debemos ser capaces de preguntarles a los usuarios lo siguiente – ¿qué crees que se puede hacer aquí? o – ¿cuál será el resultado si se selecciona o se toca esto?

Para que esto sea posible, nosotros los programadores/diseñadores de experiencias debemos preguntarnos lo siguiente cuando estamos programando una interfaz – ” ¿Dónde están las oportunidades de interacción en nuestra interfaz? “.

Sería muy efectivo usar demostraciones, instrucciones, y las vistas previas. Tengamos en cuenta que las interacciones deben estar bien centradas y orientadas a las tareas e objetivos del usuario.

La clave radica en la observación de como el usuario interactúa con la interfaz. De esta manera, podemos determinar si entienden la interfaz y si son capaces de navegar en en aquella misma con facilidad. Esto les ayuda a predecir resultados y familiarizarse con la interfaz.

5. Retroalimentación

La retroalimentación es fundamental en el desarrollo de los medios interactivos, ya que proporcionan el reconocimiento de las interacciones del usuario, así como información acerca de sus resultados. La retroalimentación nos permite responder a una serie de preguntas importantes como las siguientes: ¿qué podemos hacer ahora en la interfaz? O, cual es nuestra condición o estado en el interfaz? e incluso nos permiten conocer cuando hemos completado o haber terminado una tarea determinada en el interfaz.

La retroalimentación debe complementar y facilitar la experiencia. Asegúrese de no interrumpir al usuario durante el ejercicio de una tarea de interfaz y no retener información cuando la información puede ser necesaria para proceder o seguir adelante. La evaluación debe ser notable y significativa.

Siempre recuerden que estos cinco principios esenciales trabajan juntos para formar un sistema, y que están unidos por la observación, la interacción, la comprensión y la transferencia de conocimientos. Cuando se proporciona una retroalimentación significativa, los usuarios van a entender cómo sus acciones condujeron a ciertos resultados y aprenderán cómo funciona la interfaz. Esencialmente, los usuarios aprenderán a navegar la interfaz más rápido.

Armar Grupos en Padlet: No puede haber más de 10 grupos en total por comisión.

• Número máximo permitido: 5 personas. 
• Número mínimo permitido: 3 personas. 

Si son muchos y se quieren divídanse: crecerán. Si son pocos en el grupo: ábranse, aprenderán. 

CADA SEMANA SUBIRÁS UN SOLO POSTEO CON UN PDF QUE TENGA TODO LO HECHO POR EL GRUPO APRETANDO EL SIGNO +

En el primer posteo dentro de la clase:

0) confirmación del grupo y roles (techi, comunicador, estratega, redactor, esteticista )…

1) Público: identificar 5 perfiles (pensar en alumnxs y docentes y en la variedad de facultades)

2) contexto de uso

3) top task (botones)

Tarea para clase que viene (Clase 02)

Subir un PDF con la siguiente información: 

El Contexto: 

• ¿Cuál es la Misión de la UPC? (Diapo 01)

• ¿Cómo influye la misión en el desarrollo de una App?

• ¿Cómo es el mercado educativo en Córdoba) (Diapo 02)

• Analizá la competencia (Directa e indirecta).

La Institución…

• Describir a los tipos de público internos.  (Diapo 03)

• Describir a los tipos de público externos.  (Diapo 04)

• Construcción de perfil de personas. Esto es una síntesis de las diapo 03 y 04 (Diapo 05)

• Diseñá el mapa del usuario en base a instancias, necesidades y expectativas. (Diapo 06)

Tipos de Interactividad

Los distintos tipos de interactividad, según los cuales un usuario se puede relacionar recíprocamente con las computadoras, configuran tres niveles diferentes de implicancia: explorativo, manipulativo y contributivo, descriptos en orden creciente según el grado de interacción que el sistema le permite realizar al usuario, y según el modo en que éste puede llegar a modificar los objetos del entorno.

1. Interacción explorativa: es el nivel más bajo de interactividad, el usuario puede desplazarse por los nodos de contenido siguiendo los recorridos previamente diseñados, pero no está facultado para crear nuevas secuencias ni modificar el entorno. Los sistemas de exploración de una interfaz más comunes son: lineal, jerárquico, ramificado o en red. Es el tipo de interacción que caracteriza a los materiales didácticos hipermediales.
2. Interacción manipulativa: posibilita un mayor nivel de relación con el entorno. El usuario puede manipular distintos objetos de la interfaz y con ello, transformar la apariencia de una sesión, aunque estas modificaciones no afectan el funcionamiento de la aplicación y cuando inicia una nueva sesión, el sistema se mantiene igual que al principio. Un ejemplo de este tipo de interactividad es la que proveen los editores de medios en línea: cuando utilizamos un editor de videos, manipulamos los distintos clips, sonidos e imágenes para realizar un audiovisual, pero esto no cambia la apariencia del entorno de edición ni su modo de funcionamiento.
3. Interacción contributiva: Es el grado más alto de implicancia que los usuarios pueden obtener de los sistemas, al punto que lo pueden alterar en su funcionamiento, entorno y reacciones. Es el tipo de interacción que proveen algunos sitios de Realidad Virtual, como por ejemplo SecondLive, en el que los objetos que lo integran están supeditados a determinados comportamientos y reglas que responden a las acciones de los usuarios. En estos casos, los cambios introducidos en el sistema lo modifican y ya no mantiene las características iniciales.

Brief Creativo

• Identificar problema

• Definir indicadores de éxito

• Top task (se retoma)

• Expectativas del proyecto según $ y Tiempo.

• Limitantes tecnológicas y otras limitantes.

Mapa De sitio (Diapo 1) 

• Etiquetas/ menúes

• Palabras Clave

• ¿Responde a las expectativas de los usuarios este mapa de sitio?

Diagrama de Flujo (diapo 2 a 5)

• 3 diagramas de flujo x 3 usuarixs de diferente complejidad. (9 diagramas)… probá con Miró por ejemplo. 

Wireframe (1 sola diapo con 3 wireframes) 

• Buscá qué es un wireframe y diseñá 3 Wireframes acorde 3 diagramas de flujo del mismo usuari/X:

  • Inicio de la App una vez que ya está logueado el estudiante.

  • Un wireframe intermedio en complejidad de información. 

  • Un wireframe avanzado como por ejemplo cuando estemos en un punto donde haya mucha información compleja. 

La experiencia de usuario es el conjunto de factores y elementos que hacen a la interacción del usuario, con un entorno o dispositivo concretos. El  resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo (Wikipedia).)

Entonces la experiencia de usuario es la nnteracción o experiencia de usuario ante un producto o servicio, y a partir de ello se construir soluciones para la mejora de la interfaz que presta dicho producto o servicio.

LA UX ES LA GENERACIÓN DE EXPERIENCIA DE USO CON UN ENFOQUE HUMANO.

• De interfaz
• Perceptiva
• Selectiva
• De Contenidos

1. Interactividad de interfaz

Afecta exclusivamente a ciertos cambios que el interactor o el propio sistema generan en la interfaz (el código de comunicación entre el interactor y el sistema). Estos cambios pueden atender a las preferencias del usuario en cuanto a la disposición de elementos en pantalla, ya sea por preferencias puramente estéticas (por ejemplo, el cambio de colores de las ventanas del sistema) o debido a requerimientos funcionales (ordenando, añadiendo o eliminando iconos de la barra de menús).

• Cuando las peticiones del interactor están orientadas a modificar aspectos (estéticos o funcionales) de la interfaz, hablamos de interactividad de interfaz de preferencias.
• Cuando el sistema interpreta las acciones del interactor y modifica la interfaz para adecuarse al comportamiento del usuario (por ejemplo, identifica las acciones más usuales), hablamos de interactividad de interfaz generativa.

2. Interactividad perceptiva

La alteración del discurso mediante interacción perceptiva se produce al modificar algún valor en el periférico de salida del sistema. Pensemos, por ejemplo, en personas con visión reducida, que necesitan valerse de audio para interactuar con nuestro sitio.

Así, el interactor puede subir el volumen de una canción de un disco compacto, ecualizar el sonido, añadir distorsiones con un generador de efectos (interactividad perceptiva sonora), virar el color de una imagen o modificar su brillo y contraste (interactividad perceptiva visual).

3. Interactividad selectiva

Permite acceder a los diferentes núcleos de información almacenados en el sistema. Estos núcleos de información permiten generar un discurso que mostrará una de las múltiples líneas potenciales que pueden formarse accediendo a unos u otros núcleos de información o según el orden en que se consulten. Los datos de los núcleos de información están preestablecidos y no se verán modificados de ninguna manera por el interactor.

• Cuando la interactividad permite acceder sólo a la línea temporal del discurso hablamos de interactividad selectiva secuencial. Sólo puede desarrollarse cuando el discurso está concebido para una lectura lineal. El acceso a los diferentes momentos de la línea temporal del discurso no genera nuevas historias.
• Cuando el interactor utiliza la interfaz del sistema para acceder a un núcleo informativo del discurso almacenado que le permita construir el discurso discurrido hablamos de interactividad selectiva de navegación. Un ejemplo de ello sería:
  • Cuando el interactor puede acceder a núcleos de información sin que afecte a la línea argumental del discurso, hablamos de interactividad selectiva de realización. Se da, por ejemplo, cuando podemos seleccionar la opción de ver los subtítulos de una película, pues seguimos viendo el film pero además superponemos otra información.

4. Interactividad de contenidos

Este tipo de interacción afecta directamente a los datos disponibles en el sistema, ya que permite generar nuevos datos que producen respuestas no necesariamente previstas de forma explícita en el diseño original del sistema.

• Cuando el interactor puede añadir nuevos nodos de información combinando fragmentos de información existente en el sistema, hablamos de interactividad de contenidos combinatoria. Se da, por ejemplo, en los «Talleres de cuentos» en los que los niños combinan escenarios y personajes para crear su propia historia.

Brief Creativo (esto era para esta clase) 

• Identificar problema

• Definir indicadores de éxito

• Top task (sí… lo agregué al último)

• Expectativas del proyecto según $ y Tiempo.

• Limitantes tecnológicas y otras limitantes.

Mapa De sitio (Diapo 1) 

• Etiquetas/ menúes

• Palabras Clave

• ¿Responde a las expectativas de los usuarios este mapa de sitio?

Diagrama de Flujo (diapo 2 a 5)

• 3 diagramas de flujo x 3 usuarixs de diferente complejidad. (9 diagramas)… probá con Miró por ejemplo. 

Wireframe (1 sola diapo con 3 wireframes) 

• Buscá qué es un wireframe y diseñá 3 Wireframes acorde 3 diagramas de flujo del mismo usuari/X:

  • Inicio de la App una vez que ya está logueado el estudiante.

  • Un wireframe intermedio en complejidad de información. 

  • Un wireframe avanzado como por ejemplo cuando estemos en un punto donde haya mucha información compleja. 

Características de la Experiencia de Usuario (vectores)

• Experiencia
• Usabilidad
• Percepción

Diseño de la Información

• perfil de usuario,
• definición de objetivos y situación de uso.
• Diseño de interacción.

Moodboard (diapo 7)

• No hace falta que te expliquemos qué es: tene en cuenta lo recabado de otras apps, de la uni, de los alumnxs, la misión, las expextativas de los usuarios, pero sobre todo: las tendencias visuales que creés que son compatibles con la UPC. 

Style Tile (Diapo 8) 

• O guía de estilo transicional. 

Brand style guide. (diapo 9)  

• O guía de estilo transicional. 

Definición De estilo de la APP (Diapo 10)  

• Skeumorfismo.

• Flat Design

• Neumorfismo

• Material Design 
  Pequeñas capturas y justificar por qué en base a lxs usuarixs.

Análisis Ergonómico (Diapo 11) 

• De las pantallas que propongas (al menos 5), teniendo en cuenta la ley del pulgar. 

Contenido del acordeón

Cada grupo va a presentar en la clase 05 una herramienta para prototipar apps. 

1. Framer — Diseño de flujos elaborados UX

2. Marvel — Simplifica el proceso de creación de prototipos

3. Origami — Da vida a tus ideas para proyectos de móviles y web

4. Proto.io — Diseño de prototipos que parecen reales

5. Wix

6. Adobe XD

7. Figma

o cualquier otro. 

11 pantallas diseñadas que sean de 3 diagramas de flujo