Construcción de una Visión de Realidad

De Casiopea



TítuloConstrucción de una Visión de Realidad
Tipo de ProyectoProyecto de Taller
Período2011-
Del Curso4º DG 2011
CarrerasDiseño Gráfico
Alumno(s)Karen Carrera, Joaquín Martel, Andrea Cifuentes
ProfesorHerbert Spencer


Tabla de Contenidos

Observación e Investigación:
¿Cuál es la problemática existente?

Primer Planteamiento

Un caso sin encargo. Con motivo de la discusión generada en la observación del día en la página de la escuela se propone la creación de un espacio que es de los alumnos, un gobierno de alumnos, el cómo se da la discusión para, el pensar la universidad. Diseñar cuál es el proceso para llegar a diseñar una buena página en blanco que a través de la arquitectura de la información generará un espacio habitado por el contenido de otro. Para esto es necesario originar patrones de interacción y no centrarse en los contenidos.


Fundamento:
¿Por qué es necesario para el diseñador plantearse esta problemática?

Como diseñadores tenemos un lugar decisivo dentro de la sociedad; poseemos o deberíamos poseer la sensibilidad de detectar las problemáticas que nos rodean y a su vez tenemos las facultades, metodologías y estrategias para enfrentarlas y solucionarlas. Sin embargo, cuando no existe nadie que nos diga "el encargo" y sus alcances, entra en juego la destreza de diseñar el proceso por el cual se llegará a definir la problemática y cómo se soluciona desde el diseño. Es necesario reconocer la importancia de que la metodología este diseñada, las herramientas se diseñan para saber lo que quiero saber.


Metodología de Investigación

Metodología para diseño de interacción

Nos basamos en el siguiente modelo (a la derecha):

Lo que emerge de las personas. Lo que nos distingue de los ingenieros es que tenemos una sensibilidad con las personas en cuanto a lo que creamos para ellas. Nos colocamos en el caso de tener que diseñar para nosotros, de esta forma somos actores y testigos del problema, el grupo a quien se dirige nuestro trabajo y de quienes podemos obtener la información está totalmente al alcance.

Primera Etapa: Jornada de Investigación con Estudiantes

Para esta jornada de investigación los 3 grupos de trabajo del taller se pusieron de acuerdo para convocar a los estudiantes a participar.Jornada: Participación Estudiantil en la Escuela, Hoy y Mañana

La jornada se dividió en 2 partes:

  • Actividad Grupal:

Se realiza una actividad grupal con el fin de conocer lo que los alumnos piensan sobre el lo que Hoy significa la Participación Estudiantil.

  • Actividad Individual:

Una cantidad de alumnos se dividen y realizan distintas actividades determinadas por cada grupo.


Desarrollo de la actividad individual

Actividades

Los alumnos colaboradores crearon un cartel que expone sus ideas y sueños con respecto a Gobierno de Alumnos en el Futuro. La única condición adicional era que ellos se incluyeran en su trabajo.

Materiales:

  • 1/4 de Pliego
  • Plumones de colores Sharpie
  • Lápices tinta gel

Desarrollo de la Actividad

Cartel 1

Poster Individual KarenAndreaJoaquin1.jpg

Explicación:

  • Se menciona la idea de foro.
  • Todos están atentos a lo que acontece en la escuela.
  • Hoy en día no somos escuela, yo vengo a estudiar, pero no me siento parte de una escuela.
  • Desde la individualidad se puede cambiar la escuela.
  • Me gustaría poder expresar mi opinión.

Cartel 2

Poster Individual KarenAndreaJoaquin2.jpg

Explicación:

  • El planeta tierra es la escuela y existe otro planeta en donde no hay que buscar las soluciones que necesitamos.
  • Hay que encontrar soluciones realistas y para ello se debe estar presente dentro de la escuela.
  • Ella es una alumna que no es está en ninguno de los dos planetas y por lo tanto, es una alumna desinteresada.
  • Si uno va a criticar hay que estar dentro de la escuela, y si no participas es mejor no hablar.

Cartel 3

Poster Individual KarenAndreaJoaquin.jpg

Explicación:

  • El futuro es ahora. Ahora necesitamos que el futuro sea mejor.
  • Depende de cada uno comenzar el cambio.
  • Necesitamos información.
  • Desde lo personal se llama al común, todo por medio de la información.
  • Ella esta en el cartel informándose y involucrándose en las actividades de la escuela.

Cartel 4

Poster Individual KarenAndreaJoaquin4.jpg

Explicación:

  • Esta es una escuela de artistas, esto nos caracteriza.
  • Tenemos las herramientas y las usamos (desde nuestros oficios) para movilizarnos.
  • Nosotros somos las herramientas. Ella esta dibujada como parte de las herramientas.

Cartel 5

Poster Individual KarenAndreaJoaquin3.jpg

Explicación:

  • El ideal es un ambiente de diálogo, buena onda.
  • El individuo debe sentir el deseo y la disposición de progresar.
  • La importancia de informárse y participar.
  • El tiempo de la escuela en trabajo, consume la vida participativa.

Hallazgos de la jornada

  • Hay que validar la opinión personal a través de la participación.
  • Existe una muy clara identidad como escuela, sin embargo ellos no se sienten incluídos en esta identidad.
  • Es necesario que cada uno sienta el deseo y la disposición de progresar.
  • Informárse va directamente vinculado a la participación. Ellos quieren tener acceso a la información.
  • Se reconoce una falta de organización, estructura, orden y puntualidad; tanto en la organización del alumnado como los horarios de taller.
  • Los alumnos se sienten agobiados por la falta de tiempo, el oficio consume su vida.
  • El cuerpo coordinador no es visible. No hay transparencia en los procesos.
  • La escuela se reconoce como un ente apolítico, y esto se contradice con la necesidad humana de ser políticos.
  • La escuela crea límites con las actividades del resto de la universidad.
  • No sabemos como ocupar lo que sabemos.

Conclusión

Dados los resultados de la investigación creemos en una primera definición de encargo. Por lo tanto hay que crear un canal de comunicación donde:

  • Se pueda opinar.
  • Se vincule la PUCV con la escuela.
  • Este presente el cuerpo coordinador.
  • Exista información y con ella participación.
  • Se sepa lo que pasa, el presente y el ahora.
  • Desde la singularidad se llame al común.
  • Exista un ambiente de diálogo.
  • Que sea popular y de fácil acceso.
  • Tenemos que crear Comunidad.

Generación de Propuestas de Interacción

Segunda Etapa: Identificación del Problema

Lo que es

Mapa Conceptual de Interacción del Cuerpo Estudiantil

CMap: Interacción del Cuerpo Estudiantil

Lo que se propone

Modelos Visuales de Participación Estudiantil

Modelo Visual que plasma las interacciones que queremos generar con la propuesta de diseño. Primeras Propuestas:


300px 300px

Desarrollo del modelo que detalla el flujo de acciones que genera la participación. Todo en pos de actuar en comunidad.


Modelo Participacion Estudiantil KarenAndreaJoaquin.png

Se piensa el modelo a partir de los intereses como estudiantes, son temas y subtemas que luego se implementarán como menúes.

Intereses

  1. Discusiones
    • Temas debatibles
  2. Ámbito Académico
    • Seminarios
    • Exposiciones
    • Charlas
    • Clases Magistrales
  3. Asuntos Estudiantiles
    • Talleres Extracurriculares
    • Becas
    • Fondos Concursables
    • Concursos
    • Farándula
  4. Trabajo
    • Ofertas Laborales
  5. Económicos
    • Venta de artículos personales (Se ofrece)
    • Se busca
  6. Ocio
    • Fiestas
    • Ciclo de Cine
    • Copa Fabio Cruz

Propuesta Final

Modelo Visual Final de Participación Estudiantil

A partir de las evaluaciones, se corrige el planteamiento de la propuesta de interacción de estudiantes, que responde a una simplificación de los pasos.

KarenAndreaJoaquin ModeloFinalInteracionEstudiantes.png

Y dividimos los menúes en:

  1. Mesa Redonda
  2. Ámbito Académico
    • Seminarios
    • Exposiciones
    • Charlas
    • Clases Magistrales
  3. Mundo Estudiantiles
    • Talleres Extracurriculares
    • Becas
    • Fondos Concursables
    • Concursos
    • Farándula
    • Fiestas
    • Ciclo de Cine
    • Copa Fabio Cruz
  4. Bolsa de trabajo
  5. Avisos Económicos
  6. Mensajes

Interacción Actual e Ideal

Realizamos un paralelo entre lo que existe actualmente respecto a la comunicación y el ideal al que queremos llegar. Eso quiere decir, que exista un fluidez de información/opinión entre los pares y una cabeza visible conocida.

KarenAndreaJoaquin InteraccionActual Ideal.png

Loop de Interacción Mesa Redonda

El sistema de mesa redonda consiste en que un estudiante propone un tema para discutir con los compañeros de escuela, donde lo ideal es que se haga algo al respecto, si la situación lo requiere. La discusión se genera en los comentarios donde se argumentan dos posturas que son contabilizados mediante los votos. Los estudiantes tienen la oportunidad de fundamentar sus votos y entregar argumentos que ayuden a validar la discusión. Luego, el cuerpo coordinador está encargado de filtrar esta información para determinar la postura del cuerpo de estudiantes y trabajar junto a los alumnos en tomar acción en el caso. De esta forma se da cierre al tema.

KarenAndreaJoaquin LoopInteraccionMesaRedonda.png

Base de interacción para sección Mensajes

Se inicia con la pregunta ¿Con quién quiero comunicarme?. Responde a la necesidad de un espacio de comunicación informal para los alumnos, en donde la información sea transmitida entre sus pares y no desde un ente mayor.

Para ello se crea un espacio, donde los mensajes son dirigidos a personas o grupos de personas. La página se divide en tres: "Personas", "Taller" y "Escuela". Y cada estudiante tiene la posibilidad de dirigirse a personas, talleres y al totalidad de la escuela. Las personas no pueden ver los mensajes dirigidos a otras personas u otros talleres en donde éste no pertenece.

KarenAndreaJoaquin InteraccionMural.png

Primeras Propuestas y Wireframes de Casos de Uso

Diseño Front

Mapa de Navegación

Cmap

Formularios para Añadir Publicaciones

Archivo:Formularios sitio alumnos.pdf

Mapa de Clases

Mapa de clases GrupoJoaquinKarenAndrea.png

Maquetas de Alta Intensidad

Primera Propuesta de Diseño Front

600px Paleta de Colores

Segunda Propuesta de Diseño Front

KarenAndreaJoaquin WireframePaleta2.jpg

Personas y Escenarios

Diego Sazo

Personasyescenarios Diegosazo.jpg

  • Edad: 23 años
  • Curso: 5º Arquitectura
  • Vive en: Villa Alemana
  • Características:
    • Estudió un año ingenería civil en la Universidad de Valparaíso
    • Pertenece al Cuerpo Coordinador


  • Escenario: Diego sabe que para publicar informaciones en asuntos académicos debe hacerlo en el sitio de gobierno estudiantil. Y recién está aprendiendo las funciones del cuerpo coordinador, pues fue elegido hace un mes.
  • Que necesita: Diego necesita publicar un seminario organizado por alumnos de diseño industrial, que tiene por nombre “Anatomía de los objetos”.
  • Cómo le ayuda el sitio: Para añadir y editar publicaciones, necesita estar loggeado a través del sitio personas.ead.pucv. Por ser parte del cuerpo coordinador personas.ead.pucv le reconoce permisos para editar publicaciones en todo el sitio. Para crear la publicación, un formulario le ayuda a no olvidar ninguna información.

Maqueta 1

Maqueta 2


Giovanna Bernal

Personasyescenarios GiovannaBernal.jpg

  • Edad: 18 años
  • Curso: Diseño Plan Común
  • Vive en: Recreo, Viña del Mar
  • Características:
    • Viene de Temuco a estudiar en la Escuela de Arquitectura y Diseño de la PUCV.
    • Vive en una pensión con estudiantes de la facultad de arte e historia.
    • Su segunda opción de estudio era gastronomía internacional.
    • Le gusta cocinar comida japonesa.
  • Escenario: Giovanna nunca se imaginó que tenía que gastar tanto dinero en materiales. Por lo tanto, necesita dinero extra y quiere vender sushi (a pedido) a los estudiantes de la escuela.
  • Que necesita: Giovanna necesita publicar un aviso que promocione su venta de sushi y quiere que la mayor cantidad de alumnos lean el aviso.
  • Cómo le ayuda el sitio: El sitio dispone de un espacio para los estudiantes que desean promocionar algún servicio o producto. También su publicación puede ser valorada para mejorar la reputación de lo que ofrece. Además existe un botón para compartir en Facebook y Twitter.

Maqueta 1

Maqueta 2

Kevin Lloyd

Personasyescenarios KevinLloyd.jpg

  • Edad: 21 años
  • Curso: 3º Arquitectura
  • Vive en: Limache
  • Características:
    • Fue dirigente estudiantil de su colegio durante la revolución pingüina.
    • Le interesan los temas de contingencia.
    • Es un líder natural.
    • Tiene la beca bicentenario.
    • Sus padres deben costear los gastos de él y su hermano que estudia en la UVM.
  • Escenario: Cada miércoles debe levantarse a las 6:00 am y viajar a Viña a tomar la micro a Ciudad Abierta. Se siente frustrado ya que su hermano estudia en la UVM y tiene un bus de acercamiento que es gratis y tiene una frecuencia de 15 minutos.
  • Que necesita: Expresar su frustración, ya que él considera injusta la diferencia en el sistema de transporte de ambas universidades, teniendo como agravante que Ciudad Abierta queda mucho más lejos y la carrera es de las más caras de la PUCV. Que sus compañeros lo apoyen para manifestar su petición ante la escuela.
  • Cómo le ayuda el sitio: El sitio le da gran importancia al espacio de la Mesa Redonda, donde puede proponer temas debatibles y ser ampliamente apoyado por sus compañeros. Además de que los temas más comentados pasan a la agenda del cuerpo coordinador haciendo factible que su publicación llegue a convertirse en una propuesta real. Además el formulario, en este caso, lo ayuda a plantear un texto argumentativo, dándole consejos y ejemplos para que pueda comunicar de la mejor manera su parecer.

Maqueta 1

Maqueta 2

Tercera Propuesta de Diseño Front | Maqueta Navegable

Paleta de colores

Paletanueva KarenAndreaJoaquin.jpg


Caso Avisos Económicos

Caso Evento

Caso Mesa Redonda

Maqueta Navegable

Maqueta Navegable

Pruebas de Usuario | Eyetracking y Entrevistas

  • Usuarios: 3 alumnos de primer año, 2 de diseño y 1 de arquitectura.
  • Lugar de la Prueba: AyerViernes S.A. - Viña del Mar.

Eyetracking

Preparación

Se le indica a la persona que hable lo que esta pensando, dónde se espera encontrar los enlaces que le permiten completar la tarea. Puede recorrer el menú principal para tener una idea general del sitio sin hacer click. Es importante que entienda que lo que estamos evaluando es el sitio no a la persona ni sus capacidades, que por favor intente relajarse diciéndo cuál cree que es el camino que debes seguir para realizar las tareas que le darán a continuación, en otras palabras, cuáles son las pistas visuales que le guían.


Partituras de Interacción

Las partituras de interacción se realizan en base a cuatro tareas dadas a los usuarios de las pruebas de Eyetracking.

Se dividen en:

  • Acción del usuario (Color rojo)
  • Pantallas
  • Proceso interno
  • Anotaciones (espacio para notas en las pruebas)

Las líneas y palabras en color rojo, muestran lo que el usuario debiese hacer. Los campos en color verde, muestran las zonas o links en donde los usuarios debiesen mirar y accionar. El proceso interno, muestra como entiende el sitio las acciones de los usuarios.

Resultados Generales del Eyetracking

Escenario 0

Tú eres un alumno de la e[ad], te llamas Diego Sazo y ya estás registrado en el servidor de la escuela, así que te voy a pedir que accedas a tu cuenta.


Imágenes


Anotaciones

  • El sitio parece agradable, bien organizado y llama a leer.
  • Existen dificultades hallar el "Entrar", se encuentra escondido.
  • Existen complicaciones entre "Entrar" y "Registro"
  • Se confunde "Suscripción de RSS" con "Entrar", por que en una primera instancia no ve la parte de arriba del sitio
  • Dice que se encuentra poca relación entre el texto de acompaña la imagen y su título.


Escenario 1

Te han dicho que hay una fiesta "San Masking 2011" y tu quieres saber más, dónde, cuándo, cuánto cuesta para ti y para tus amigos que no son de la escuela. Si una de las cosas que quieres saber no está dicha, deja un comentario preguntando.


Imágenes

Anotaciones

  • Se hace click en la fotografía y texto de la fiesta
  • Se desea utilizar el buscador
  • Se accede vía "Mundo Estudiantil", el menú desplegable y la parte inferior del Home.
  • Se busca en "Agenda"

Escenario 2

Sabes hacer sushi, has gastado un poco más de dinero en materiales este mes, así que quieres vender sushi a pedido en Ciudad Abierta.


Imágenes

Anotaciones

  • Se accede vía "Avisos Económicos"
  • Dificultades al comprender que el texto de ayuda sea borrado automáticamente

Escenario 3

Estás aburrido(a) de pagar tanto para ir a Ciudad Abierta todos los miércoles, así que decides plantear el tema en este sitio para conseguir apoyo de tus compañeros de escuela y hacer algo al respecto.

Imágenes


Anotaciones

  • Se accede por "Mesa Redonda" y "Publicar"
  • Al hacer click en el enlace que se presenta en la página de "Mesa Redonda", debiese ir directo al formulario de mesa redonda.
  • Dentro del formulario, la opción de asignar "posturas" no se entiende

Entrevista

  • ¿Algún comentario acerca del look and feel del sitio?
  • ¿Entendiste lo que era la mesa redonda, para que servía y como funcionaba?
  • ¿Qué te dice la interfaz acerca de lo que significa poner un tema en la mesa redonda? o ¿necesitarías ayuda o más experiencia para saber cuál es la interacción que conlleva?
  • (Explicación del sistema de mesa redonda)
  • ¿Qué opinas acerca de que el cuerpo coordinador sea el que de conclusión al tema, algo así como un moderador de la postura de los alumnos de la escuela, a partir de los comentarios y votos?

Con lo que viste del sitio,

  • ¿Cumple éste con tus expectativas como estudiante de esta escuela?
  • ¿Le agregarías algo, quiero decir, crees que haya un ámbito que falta tomar en cuenta? o ¿consideras que algo no debería pertenecer a este sitio?
  • ¿Usarías este sitio?, ¿lo visitarías constantemente, a veces, casi nunca, nunca?
  • ¿Crees que esto hace más transparente el gobierno? o tal vez lo que aquí se plantea podría darse a través de otro medio o soporte.

Modificaciones y Conclusiones

Respecto al Eyetracking

Se decide:

  • Cambiar menú de acción y hacerlo más visible, invertir colores.
  • Cambiar los nombres de "Entrar" a "Iniciar Sesión"
  • En la imagen del Home, se decide dejar en tres líneas la bajada de título.
  • Separar el espacio que contiene la imagen del Home y "Mesa Redonda"
  • En el Home y las páginas de que se despliegan del menú, agregar links no sólo a títulos, sino también a la fotografía y textos, una caja de información.
  • Al acceder a "Publicar" por medio de las páginas que se despliegan del menú, se dirigirá directamente al formulario de Mesa Redonda
  • Realizar una aclaración en la parte de elegir "Posturas" en el formulario de mesa redonda

Respecto a la Entrevista

  • Se sugiere un sitio menos estático y más personal
  • Se necesita un espacio donde se de comunicación informal, en donde los alumnos tengan la oportunidad de interactuar con sus pares de manera más rápida y expedita.

Maqueta Final

Sitio Estorninos