Valentina Pérez: Intranet Alumnos

De Casiopea
Revisión del 21:31 1 sep 2010 de Valentinaperez (discusión | contribuciones) (Programación)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)




Título
Palabras ClaveDiseño Gráfico, Diseño de Interacción, Taller de Construcción 4, Intranet, Maia, Diseño Gráfico 4, Segundo trimestre
Período2010-2010
CarrerasDiseño Gráfico
Alumno(s)Valentina Pérez
ProfesorHerbert Spencer


Proyecto: Diseño Intranet Alumnos

Introducción

El ramo de Construcción tiene como fin, llegar a una dimensión mas práctica del taller, donde debemos, en poco tiempo, realizar un proyecto que tenga como meta, la construcción de algún cuerpo gráfico. Este año, la construcción se basa en la creación de sitios web, enfrentándonos con cada una de las problemáticas que esto conlleva. Hacemos un recorrido por diferentes materias para poder llegar al producto final que sería el proyecto de cada uno de los alumnos.

Cada uno de los alumnos enfrenta diferentes desafíos, los cuales debe resolver con un trabajo de investigación y estudio. Este año, como mencionamos anteriormente, nos centramos en diferentes tipos de proyectos de carácter digital.

En esta edición veremos el proceso detallado de cada uno de los pasos que damos en esta investigación, desde el estudio, hasta el desarrollo del producto.

Primer estudio

Mapa de navegación del sitio e[ad]

Mapaunodemi.png

Para dar comienzo la proyecto del ramo, comenzamos por la investigación del sitio de la escuela (www.ead.pucv.cl). Este es un sitio que se encuentra en constante cambio, por toda la cantidad de gente que participa en él, generando diferentes tipos de contenidos.

En este espacio interceptan diferentes tipos de intereses. Desde los mas prácticos, de un interés mas interno de la escuela, hasta intereses de tipo abierto a otras personas anexas a la escuela que estén interesadas en los temas que tocamos en ella.

Por lo tanto nos encontramos con un espacio para múltiples miradas. Para poder adentrarnos en el, hicimos una investigación en el sitio que se conformó por la reproducción del mapa de navegación del sitio.

El mapa de navegación es una herramienta que nos ayuda a poder leer el sitio de manera mas ordenada, así, entendemos su estructura interna y su contenido, de qué manera este se nos presenta en la navegación.


Segundo estudio

Análisis de mapa de navegación del sitio e[ad]

Mapita2noseqmas.png

Luego de haber tenido nuestro primer encuentro a profundidad con el sitio de la escuela, hacemos un análisis de este, pero con una mirada más crítica, con el objetivo de ver qué cosas buenas y malas tiene el sitio y donde podemos encontrar un buen espacio donde generar algo nuevo.

Esto se puede basar en diferentes criterios, de partida encontrar qué públicos son los que llama el sitio de la escuela, y si de verdad, se da la instancia de nuevos planteamientos sobre los oficios o la poética. Qué otros tipos de instancias se pueden generar en el sitio o qué elementos de este no tienen un buen uso. También se puede apuntar a otros criterios como de mejoras del sitio, de manera de crear una nueva forma de que los contenidos se muestren.

Éstas son algunas de las preguntas que se hacen de forma previa a la realización del encargo. En las siguientes páginas veremos como se desarrolla este análisis.


Propuestas para el proyecto

Del segundo estudio del sitio veo muchos puntos diferentes, con diferentes tipos de audiencias, sin embargo me llamó la atención dos grandes problemáticas.

  1. La primera trata sobre el espacio de Amereida en el sitio.
  2. Se trata sobre hacer del sitio, no solo un lugar de donde sacar información, si no también que este sea una herramienta para las personas de la escuela, en especial los alumnos.

La primera viene de la poca consistencia que hay dentro de la sección Amereida, sin especificar que este se trata de un ramo.

La segunda se refiere a una intranet para los alumnos de la escuela, un lugar donde se pueda interactuar con diferentes elementos de la facultad, facilitando la organización persona de los alumnos. Esta viene, por el solo hecho que no existe un elemento así.

A continuación se profundizará mas de cada tema.

Espacio Taller Amereida

En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.


En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.

En una primer lugar, vemos un extenso texto de la descripción del ramos. Consiste en un punteo con información a modo de ficha técnica. Luego una breve descripción. Esto parece un poco inadecuado y muy extenso para quienes recurren mucho a este sitio, en especial los alumnos.

Sin duda muchas personas fuera de la escuela recurren a este sitio, sin embargo, a primera vista del texto, no se logra persivir la riqueza e importancia que tiene este ramo. Los conceptos tradición, oficio y poética no están detras de esta presentación.

Más abajo, en la misma página, nos encontramos con mas texto y texto linkeado. Cada uno pertenece a diferentes tiempos, como vemos, algunos de 1996, otros del 2010, y cada una de las publicaciones con una breve, y muy general descripción de la clase.

No sabemos cuantos articulos más existen, lo cual hace muy dificil cuando se está buscando algo puntual. Nuevamente, vemos que el material visual no se presenta ante nosotros para darnos otra dimensión del taller de Amereida.

A la izquerda encontramos un link llamado “ Podcas: del Taller de Amereida”. Teniendo la importancia que tiene, no la representa debido al lugar en el que se encuentra, haciendo muy dificil el encuentro de los audios de las clases, material muy recurrido. El hecho de que se encuentre junto a otros temas que no se relacionan al taller hace mas dificil su acceso.

Luego de que entramos a Podcas, nos encontramos con archivos clasificados por el tipo, no por la el numero de clase o fecha. De manera que una misma clase está dispersa en diferentes formatos, video, audio e imagen (material que aca no se nos presenta).

Navegador Académico

El antecedente más cercano a una intranet para los alumnos es el Navegador Académico. Este es igual para todos los alumnos de la universidad, por lo tanto tiene información muy general. Su importancia es mas de tipo administrativo, sin embargo no se pueden hacer trámites oficiales a través de él.

Por lo menos se usa a principios y a fines del trimestre para la preinscripción de ramos y las notas de los ramos anteriores.

Sin embargo no es una herramienta cercana ni imprescindible para los alumnos.

Por otro lado, no toda la información que contiene el sitio es realmente oficial. Es el caso del horario. En él se muestra una información muy diferente a la que realmente ocurre en el presente, ni la hora ni el lugar que se nos dice son realmente esos. De manera que, cuando se recive, éste no es de fiar para los alumnos, limitando una verdadera organización de la vida universitaria del alumno.

En general, la distancia entre la realidad y el Navegador Académico es muy grande, de manera que su utilidad es muy baja en el día a día. Al igual que su credibilidad.

Proyecto Intranet Alumnos

Resumen del proyecto (Abstract)

Este proyecto tiene como objetivo crear una herramienta para los alumnos adentro del sitio de la escuela. Consiste en un tipo de "Agenda Electrónica" para los alumnos, donde pueden encontrar información del día a día. De esta manera se trata de oficializar el método que usamos actualmente, nosotros y otros talleres, de los servicios de Google Groups.En el encontraremos diferentes elementos que ayudaran al alumno a organizarse en sus actividades universitarias.

Mapas de navegación

Indice de contenido

  1. Biblioteca
    1. Textos disponibles
    2. Arriendo actual
    3. Deuda en biblioteca
  2. Librería (Elsa)
    1. Deudas de librería
    2. Solicitud de plotter
    3. Valor de impresiones
  3. Cafeta
    1. Menú de la semana
    2. Solicitar almuerzo
    3. Deuda de cafeta
  4. Calendario (Agenda Electrónica)
    1. Ramos
    2. Actividades escuela
    3. Plazos biblioteca
    4. Horarios
  5. Sala de PC
    1. Solicitud de plotter
    2. Solicitud de carro-ancho
    3. Solicitud de impresora laser
  6. Laboratorio Mac
    1. Solicitud de Mac
  7. Avisos
    1. Alertas de biblioteca
    2. Alertas de entregas
    3. Alertas de deudas
  8. Noticias
    1. Noticias de última hora de ramos
    2. Noticias de última hora de servicios

Primer Mapa

Propuesta1 de mapa de navegación para intranet

En esta propuesta, se presenta una intranet muy personalizada específicamente para los alumnos de la escuela de la e[ad], ya que tiene la opción de comunicarse con diferentes departamentso de la facultad como “la cafeta”, “la librería”, la sala de computación y diferentes areas con las que el alumno tiene una relación constante del día a día. De manera que se pueda tener un trato también formal con ellos estándo al tanto de las noticas y también las solicitudes que se pueden hacer.

Por ejemplo, en la sala de computación uno puede pedir una hora para el plotter o también saber tu deuda en ella, de manera de evitar malos entendidos.

Sin embargo, este concepto era muy cerrado a solo la escuela, de manera que no incluye a otros alumnos de otras facultades. Esto hace del proyecto poco oficial, de manera que era muy dificil de llevar a cabo.

Segundo Mapa

Propuesta2 de mapa de navegación para intranet

En esta segunda propuesta, se elimina toda la parte del mapa anterior que tenía una relación con elementos específicos de la escuela y se integra toda la información general que se encuentra en el Navegador Académico.

Esta información no es tanta, de manera que se puede mostrar de manera más breve en esta propuesta.

De ésta manera, logramos las dos dimensiones que se quieren lograr del proyecto, tener el ámbito persona del día a día del alumno y también el ámbito administrativo, el cual, por muy poco que se use, es tremendamente importante.

Además, de ésta forma, incluimos a todos los alumnos de la PUCV.


Wireframes 1


Wireframes: Inicio

Este wireframe es el primer estudio de como se quiere que se presente la intranet. La intención, es tener la mayor cantidad de información necesaria para el alumno para comenzar el día, o actualizarse cada cierto tiempo. Por esa razón se incluyen temas como Noticias, lo cual tendría conexión tanto con la facultad que le corresponda al alumno como con la Casa Central de la PUCV.

El calendario es una herramienta personal del alumno, donde el puede poner sus actividades personales, además de tener, de manera predeterminada las actividades que corresponten con su s ramos.


Wireframe: Ramo

Acá nos introducimos a la tarea de ingresar a uno de los cursos. En cada uno de ellos se puede ver una lista de publicaciones hechas por profesores y alumnos, de manera que se puede comunicar facil y oficialmente.

También hay intercambio de archivos, los cuales son adjuntados a las publicaciones que se hacen. Todo puede ser comentado, de manera de crear este canal de comunicación desde el ramo, a las personas.

Las publicaciones son a modo de foro, alguien escribe y el resto comenta. Además de que cada publicación tiene un tema específico.

Vemos una ficha técnica como la que encontramos en el sitio de Taller de América.


Wireframe: Foro de ramo

De los problemas de esta propuesta, es el poco dominio que hay de la grilla. El texto sigue siendo algo que domina en la interfaz, y no elementos que interactúan conmigo.

Aún el diseño se ve con algunos elementos flotando, como la barra gris clara de la izquerda con respecto con la barra oscura.

La inexacta grilla se deja ver por la impresición entre las columnas y los espacios en blanco que rodean a casi todos los elementos. No hay una equidad entre ellos que muestren una norma.

Wireframes 2

Wireframe: Inicio

Hay un segundo intento con ordenar el sitio con la propuesta de una nueva grilla. Éste consiste en cubos que se repiten y cada uno de ellos significa un contenido.

La interfaz aún se apega mucho a la primera, lo cual no permite un gran avance. Su primer problema son la gran cantidad de elementos que se muestran en un solo instante. además de que la grilla no permite llegar a refinamiento limpio del wireframe.

Wireframe: Log in

Wireframe del ingreso del alumno a la intranet. Se piensa como algo muy sencillo y claro.


Wireframe 3

Wireframe: Inicio

El inicio es totalmente distinto, ya que se limpia la pnatalla y la carga de información disminuye de forma muy importante. La información se guarda en las columnas laterales las cuales tienen carácteres distintos: la de la derecha es para los ramos, y la de la izuerda para herramientas personales.

Se trata de hacer un espacio libre de movilidad y no de tener todo en frente de una sola vez.

Hay un menú inferior para las actividades administrativas que tienen menos uso que las barras laterales, por eso lo ponemos con una menor importancia. Son importantes de antemano.


Wireframe:Mensajería

Cuando abrimos la pestaña de mensajes, podemos ver inmediatamente todo lo que nos llega teniendo otro pequeño sub menu a la derecha, el cual le da diferentes funciones a la herramienta de los mensajes.


Wireframe: Calendario

El calendario es de Google, de manera que se puede cargar dependiendo de los ramos a los que estas inscritos.

Además éste se puede complementar con mis actividades personales, así puedo organizar todos mis días y actividades en conjunto con las de la universidad.

Wireframe: Ramo

Cuando entramos a un ramo, se nos presentan todos los temas subidos por los diferente integrantes del curso. Podemos ver temas pasados.

Cada uno de ellos muestra la información de quién lo emitió y cuando, lo cual solo puede ser hecho por personas inscritas en el ramo.

Cuando nos adentramos a uno de los temas del ramo, encontramos una publicación comentada por los participantes. Al igual que en los mensajes, aparece un submenú dentre que le da diferentes funciones que se pueden hacer dentro de un tema o ramo.

Los artículos pueden tener archivos adjuntos de manera que se tenga un dialogo enriquecido y complementado, sin necesidad de recurrir a otro tipo de herramientas.


Interfaz

Primeras interfaces

logo de intranet

Este es el logo de la intranet. La intranet buscar tener su propia identidad, es un sistema interno de la universidad, sin embargo, es una gran máquina que funciona por si sola.

El logo representa la unión de diferentes estructuras representando la interconexión de la información y las personas.


La interfaz tiene una fotografía de fonfo que habla sobre la ultima noticia de la facultad. De cierto modo, es para aprovechar el material fotográfico que hay y al mismo tiempo, un modo de informar.

La intranet tiene un logo, el cual de lejos, es como un copo de nieve, pero también se puede mirar como una roda de personas acostadas unidas por los brazos.

Segundas Interfaces

Mapas de divs


Escenarios y personas

Las pruebas de usuario consiste en poner a prueba el diseño creado. Esto pone la atención en la usabilidad del sitio principalmente, su legibilidad, ver como las personas interactuan con la interfaz.

Para esto, introducimos a los testeadores del diseño en un plano irreal, pero que correspondería a un posible usuario del servicio. Esto consiste en la creación de personas que están bajo ciertas influencias y entornos, creando diferentes necesidades. De esta manera, el testeador puede encontrar un sentido en el sitio.

Para la intranet se crearon las siguientes personas y escenarios:

  1. Profesora de Ingenieria Comercial
  2. Alumno de Arquitectura
  3. Alumno de Derecho

Enviar aviso a taller de ramo

Profesora de Ingeniería Comercial

María Teresa Ramirez, es profesora de media jornada en la carrera de Ingeniería Comercial en la Católica de Valparaíso. Le gusta mucho hacer clases, sin embargo, no se puede dedicar a trabajar jornada completa, ya que es madre de 3 niños de 5, 7 y 9 años.

Ella todas las mañanas va a dejar a sus hijos al colegio, luego va a hacer clases a Valparaíso y luego vuelve a buscar a sus hijos, de manera que le queda el tiempo justo para poder realizar sus actividades docentes.

Es invierno y aún caen las últimas lluvias del año. Este día ella va a buscar a sus hijos, pero cuando llega se da cuenta de que sus tres hijos están muy agripados, ya que jugaron bajo la lluvia en el recreo.

Esto la obliga a no poder hacer clases al día siguiente. Ella es muy responsable y quiere avisar a sus alumnos la suspensión de clases de forma inmediata, por lo cual recurre a la intranet ya que es único modo masivo de comunicarse con sus 80 alumnos.


Leer un mensaje y responderlo

Alumno de Arquitectura

Camilo Alvarez es un alumno de Arquitectura de la Universidad Católica de Valparaíso. El está en 3 año pero ha reprobado algunos ramos que lo han atrasado en la carrera.

Por esta razón, hizo una petición para poder ramos por adelantado para no atrasar su ingreso a título. Envío un mail oficial, hace una semana, a través de la intranet de la universidad. Hoy, el Jefe de Docencia, le respondió su solicitud aceptando su petición. En gratitud, Camilo, quiere agradecerle por haber aceptado su solicitud, respondiendo con un mail de agradecimiento.

Ingresar actividad al calendario

Alumno de Derecho

Marcelo Gomez es estudiante de Derecho en la Católica de Valparaíso. El tiene muchas actividades toda la semana, sin embargo es una persona muy activa y quiere retomar clases de karate.

Para tener una rutina organizada, ingresa todas sus actividades al calendario de la intranet, donde puede ver las actividades universitarias, sumadas con sus actividades personales.

Por esta razón quiere ingresar las clases de karate al calendario.

Maqueta navegable

Para realizar las pruebas de usuario, se hizo una maqueta navegable con las interfaces terminadas.

Estas maquetas navegables se realizan en Fireworks, creando imágenes gif que pueden linkearse unas con otras creando una navegación.

Se usa una resolución de pantalla que optimiza el trabajo con las maquetas, logrando un sitio muy eficiente, pudiendo verse en el navegador.

Estos factores hacen que el testeador se le haga mas entendible y legible la interfaz, de manera que puede tener una percepción muy real del proyecto. De esta manera, sus apreciaciones toman un caracter mucho mas crítico lo cual puede ayudar en la investigación del proyecto.

Las pruebas consistían en dejar al testeador solo con la interfaz. Previamente se le entregaban las metas de la tarea a realizar, de manera que no se le diga como llegar a la meta. Luego escibe sus apreciaciones y se habla de ellas en conjunto.

http://labs.ead.pucv.cl/lc/vperez/prueba/ingreso.htm

Resolución de las pruebas

persona 1

Alumno Diseño Industrial, PUCV

  1. Menú abajo hacia arriba, mas pequeño
  2. Gris de fondo al seleccionar molesta, oscurece mucho.
  3. Mayúscula minúscula
  4. La X al seleccionar enviar emergencia.
  5. Cosas personales con las actividades estén en lo mismo
  6. Mensajes, relacion de color entre selección y mensaje


perosna 2

Alumna de Diseño Gráfico, PUCV

  1. Ver lo del color de los eventos (el gris no el mismo).
  2. No se entiende el título “Temas”, pero aparte de eso, igual se entiende cuando se crea uno nuevo.
  3. La imagen de fondo se tiene que notar más como una noticia (en el caso de que sea) para que tenga una relación con algo y no sea sólo una imagen de fondo.
  4. El envío de mensajes está super claro.
  5. La x se puede reemplazar con un ‘volver al inicio’ para no confundir con cerrar la aplicación.


persona 3


Alumna Diseño Gráfico, PUCV

  1. Color morado del head es muy fuerte.
  2. El calendario es claro, pero al ingresar actividades no se entienden todos los contenidos que hay que ingresar, por lo tanto, debería ser por partes.
  3. Encontré todos los botones rápidamente, pero en la parte de enviar el mensaje urgente me costó encontrar el botón “crear nuevo”.
  4. Se le da mucha importancia a la noticia al poner una foto de fondo relacionada a ésta. En la intranet deberían tener más importancia los contenidos de la parte de abajo (avance curricular, certificados...etc.) y las noticias estar en último lugar.
  5. No se entiende que el texto de la parte inferior izquierda está relacionado a la imagen.


persona 4

Alumno Ingeniería Comercial, UAI

  1. Para enviar o responder un mail, debería abrirse una ventana nueva, exclusiva para envío o respuesta de mails. La otra opción es que, al escribir un mail, se opaque el color de las opciones ya que son redundantes, o que no se van a utilizar, como “eliminar” o “responder” (en el caso de que también exista simultaneamente una opción de “enviar”). Sin embargo, esta complicación se evita haciendo uso de la primera recomendacion, al estilo facebook.
  2. Si en el cuadrado de la hora ya está estipulada cual es la actividad a realizar, es redundante tener que clasificarla con un color.
  3. Al crear un foro para un ramo, es difícil darse cuenta para un profesor, que lo que se esta haciendo es crear un foro y no un mail.
  4. Al terminar un mail o un foro, el botón aceptar debe cambiarse: es identico al de facebook.

persona 5

Dueña de casa

  1. El porte de los carácteres algo pequeña.
  2. Me resulto más fácil por que ya estaba familiarizada con la plantilla.

persona 6

Ingeniero Comercial, profesor de la escuela naval

  1. Incluir un encabezado que identifique al propietario de la Intranet (Institución).
  2. Permitir que se amplíe el mensaje mediante un doble click sobre el mensaje seleccionado.
  3. Crear un espacio para “Información General” o Noticias de Importancia. Por ejemplo: Suspensión de clases, actividad en la universidad, etc.
  4. Incluir corrector ortográfico cuando escribas la respuesta a un mensaje.
  5. Aprovechar mejor el espacio de pantalla disponible.
  6. Poco amistoso. No entendí el metodo de los colores. Sería mejor si usa un metodo de preguntas sucesivas. Primero, la hora; segundo, cual es la asignatura y luego asigna el color automáticamente.
  7. Debería crear bloques para el horario definido.
  8. Así como permite incluir actividades todos los días de la semana, debería permitirlo durante todas las horas del día. Mostrar en forma fija el horario habitual 08:00 a 18:00 horas y con scroll el resto del día.
  9. Permitir vista alternativas: Solo un día, todo el mes.
  10. El procedimiento para que un profesor mande avisos me parece bueno y facil de hacer. Pero creo que debería canalizarce por una vía distinta. No como parte del foro del ramo entre una serie de otros dialogos de menor nivel.; sino como un mensaje o aviso que el alumno vea casi “inevitablemente”.

Interfaz final

Esta interfaz trata de solucionar la mayoría de los problemas que habían en la interfaz anterior.

Hay cambios en la disposición de los elementos, pero no en su estructura.

Los colores cambiaron en el fin de limpiar el diseño, sin embargo, la intranet sigue siendo personalizada.

Se trata de conciliar la identidad de la persona con el de la institución con el logo de la PUCV al costado derecho superior de la interfaz.

El nombre de la intranet es Maia. Es una forma de decir la palabra ‘malla’ de una nueva forma.

Se hace una diferencia en los botones de Calendario y Mnesajes con respecto de los de ramos, ya que su contenido es totalmente diferente, los primeros son de caracter muy personal y los segundos, tienen que ver con el encuentro del usuario con otros usuarios que tienen en común una misma asignatura.

Los botoned de ramos traen nueva información de su contenido, tambien dando a conocer cuando hay una urgencia.

Otro cambio, es que ya no tenemos un menú inferior. Esto botones subieron para darles mas importancia, ya que hablamos de acciones administrativas del usuario. Se trata de dar mas énfasis a los botones que llevan a acciones que llevan a una tarea como ‘Crear nuevo’.

Se hace un orden mas claro en la disposición de la información en el área de ‘Enviar’. Se le da mucha mas importancia al contenido principar que es el escribir un mensaje.

Luego vemos como se vé el mensaje urgente dentro de ‘Ramo’. Además de luego poder verlo en la página principal, donde se vé como una extensión del botón del ramo ‘Construcción 2’.

Se hace mas explícito cual es el area de lista de mensajes, y cual es el area del mensaje, contenido principar.

Se eliminan los botones ‘crear nuevo’ o eliminar en esta fase, ya que no se pueden usar. Solo se da énfasis al que queremos que use el usuario, ‘Enviar’. ‘Volver’ al inicio tiene una menor importancia.

Las personas necesitan saber que sus acciones son realmente realizadas por el sistema.

Todo se opaca y aparece este nuevo botón de aceptar.

El lenguaje dentro de la caja para ingresar la información al calendario, cambia, de manera de ser mas elocuente en las acciones que se tienen que seguir para poder realizar la acción.

Programación

http://labs.ead.pucv.cl/lc/vperez/amigo/index.html

http://labs.ead.pucv.cl/lc/vperez/amigo/index2.html

navegable gif

http://labs.ead.pucv.cl/lc/vperez/navegable/inicio.htm