Diferencia entre revisiones de «Waldo López: Rediseño Sitio Escuela»

De Casiopea
 
(No se muestran 33 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
{{Proyecto
|Nombre=Rediseño Sitio Escuela
|Año de Inicio=2010
|Año de Término=2010
|Carreras Relacionadas=Diseño Gráfico
|Profesor=Herbert Spencer,
|Alumnos=Waldo López,
|Palabras Clave=Proyectos, Diseño Gráfico, Diseño de Interacción, Taller de Construcción,
}}
==Mapa de sitio ead.pucv.cl==
==Mapa de sitio ead.pucv.cl==


Línea 171: Línea 181:
*''En el Home del sitio encontraremos un link de registro para ingresar a la intranet [[Valentina Pérez: Intranet Alumnos|Intranet Alumnos]] y hacer uso del resto de los servicio (como la wiki)''
*''En el Home del sitio encontraremos un link de registro para ingresar a la intranet [[Valentina Pérez: Intranet Alumnos|Intranet Alumnos]] y hacer uso del resto de los servicio (como la wiki)''
*''También encontraremos el calendario de actividades y periodos por los que está cursando la escuela''
*''También encontraremos el calendario de actividades y periodos por los que está cursando la escuela''
===Tipos de Contenidos===
La reflexión acerca de los contenidos me ha llevado a dividir los contenidos que se deben presentar en la Home, en tres grupos:
*'''Articulos''': Este tipo de contenido es todo lo que tiene que ver con noticias y los articulos del ambito académico, amereida, de carrera, etc. Dentro de este grupo también estarán incluidas las imagenes.
*'''Sitios''': Se encuentran entre los contenidos del tipo "Articulos" y son todos los contenidos que hacen referencia a los sitios que posee la escuela dentro de si como el sitio Travesías, wiki casiopea, la revista de los alumnos, entre otros.
*'''Informativos''': Preferentemente este contenido está ubicado en la columna derecha del sitio de la escuela, y es todo lo referente a las fechas, eventos, información de docencia y "twits" que hacen desde la cuenta twitter de la escuela.


--[[Usuario:Waldoignacio|Waldoignacio]] 06:10 22 jul 2010 (UTC) --[[Usuario:Waldoignacio|Waldoignacio]] 04:32 1 ago 2010 (UTC)
--[[Usuario:Waldoignacio|Waldoignacio]] 06:10 22 jul 2010 (UTC) --[[Usuario:Waldoignacio|Waldoignacio]] 04:32 1 ago 2010 (UTC)
Línea 220: Línea 239:


===Tercera propuesta===
===Tercera propuesta===
Esta tercera propuesta trata de ir más allá y he tratado de transgredir la estructura del menú y hacer que cada sección sea un bloque con una foto y dentro de ella estén los nombres de las subsecciones. Luego noté que al acceder al sitio, los articulos de Noticias y el resto de los contenidos quedaba muy abajo, por lo que tendía a perderse estos elementos que deberían ir en un primer plano.


<gallery>
<gallery>
Línea 227: Línea 247:


===Cuarta propuesta===
===Cuarta propuesta===
Esta propuesta corresponde a una limpieza de la propuesta 2 en cuanto a la dimensión del ancho y la grilla sobre la cual se construye, se mantiene la estructura a dos columnas en la cual la izquierda es para el contenido de tipo '''Articulos''' y la derecha para contenido del tipo '''Informativa'''.


<gallery>
<gallery>
Línea 237: Línea 258:
Se buscó mantener un equilibrio entre las cosas que existen actualmente en el sitio de la escuela y la incorporación de elementos que creo, deberían estar en la pantalla de inicio.
Se buscó mantener un equilibrio entre las cosas que existen actualmente en el sitio de la escuela y la incorporación de elementos que creo, deberían estar en la pantalla de inicio.


*'''Sobre las imagenes'''
El diseño de esta propuesta se crea en base a la idea de entregarle más imagenes al sitio de la escuela, el cual en este momento se ve muy empobrecido en este aspecto.
Seguido por la idea de que una imagen tiende a prestar más atención por parte de quien navega por internet y en general cualquier soporte al cual podemos incorporarle un diseño, la imagen resulta un excelente recurso para provocar en las personas que accedan al contenido de alguna noticia o algo que se tenga deseo de extender a los alumnos y a los visitantes.
Por lo dicho anteriormente me he planteado trabajar con una imagen que se presente como “portada”para cada sección ubicada en el sitio de inicio, estas secciones seleccionadas según intereses de los alumnos principalmente.
*'''Contenido Principal'''
Los contenidos ubicados en las columnas principales del sitio principal corresponden en primer lugar a las noticias, que son los contenidos con mayor frecuencia de actualización, en segundo lugar se encuentran tres elementos en un segundo grado de importancia: la revista de los alumnos e(ad) sección administrada por el cuerpo coordinador de los alumnos que será una sección nueva del sitio de la escuela que tendría un nivel de actualización muy alto; luego la Wiki Casiopea que corresponde a una herramienta de uso a nivel de escuela, tanto alumnos como profesores así que creo que es importante ubicarla en el sitio principal; y el tercer elemento corresponde al de ámbito académico en donde constantemente se suben entradas de caracter académico de interés tanto para arquitectura como diseño.
Finalmente ubico un tercer nivel de elementos que corresponden a 4: acceso al sitio de travesías, proyectos e(ad), Archivo histórico José Vial Armstrong y la observación de la semana, siendo esta última la de mayor frecuencia de actualización, los otros 3 elementos expuestos corresponden a situaciones importantes dentro de la escuela pero que por su frecuencia muy baja de actualización no deberían estar en un grado mayor de destacado.
*'''Barra lateral derecha'''
Esta barra acoge contenido de caracter informativo y datos precisos que van apareciendo dia a dia, son informaciones breves en las que se destaca el calendario, que posee en su parte baja un breve resumen de las actividades del día; luego aparece la información “minuto a minuto” desde el twitter de la escuela, espacio que entrega información sobretodo a personas que no poseen una cuenta twitter; luego se encuentra la información de docencia que tiene que ver con todo lo correspondiente a trámites que se debe hacer en la escuela o casa central como las matriculas o los plazos para hacer efectivo el pago de las cuotas o firmas de pagaré; Finalmente encontramos los contactos de la escuela, su número de telefono, su dirección de correo, fax y dirección.
===Propuesta 1===
[[imagen:Interfazsitioead002 wlopez2010prop1.jpg|thumb|200px|none|''Diseño Interfaz Home'']]
[[imagen:Interfazsitioead002 wlopez2010prop1.jpg|thumb|200px|none|''Diseño Interfaz Home'']]
'''Notas'''
''(corrección)''
*''Cuando construímos la interfaz debemos respetar la grilla base, en este sentido pareciera que la barra lateral derecha no pertenece a las mismas leyes que la columna central por lo que se quiebra la regularidad del sitio.''
*''Las miniaturas poseen tamaños distintos lo que puede complicar a los autores cuando escriban y incluyan imagenes en sus entradas, Hay que realizar una regularización de las imagenes (miniaturas de las entradas) en el sitio principal.''
*''Desarrollar la paleta de colores.''
*''La barra superior-horizontal se ve muy cargada producto de la imagen de fondo (que además se encuentra bajo el logotipo).''
*''No se encuentran las noticias anteriores, no se puede acceder a ellas desde el sitio de inicio.''
===Propuesta 2===
[[imagen:Interfazsitioead002 wlopez2010prop2.jpg|thumb|200px|none|''Diseño Interfaz Home 2'']]
--[[Usuario:Waldoignacio|Waldoignacio]] 08:16 2 ago 2010 (UTC)
--[[Usuario:Waldoignacio|Waldoignacio]] 23:44 8 ago 2010 (UTC)
=Mapa de divs=
[[imagen:Tc2010wlopez mapadedivs.png|thumb|200px|none|''Mapa de divs home sitio ead.cl'']]
--[[Usuario:Waldoignacio|Waldoignacio]] 17:46 12 ago 2010 (UTC)
=Pruebas de navegación con usuarios=
[[imagen:Tc2010wlopezfotomaqpapel.png|thumb|400px|none|''Maquetas para la construcción de protocolos para las pruebas de navegación con usuarios'']]
==Pruebas de navegación con usuarios==
La construcción de esta experiencia con personas nos ayudará a comprender algunas falencias que podría tener el proyectos con respecto al modo de encontrar los contenidos que han sido ordenados dentro del sitio web de la escuela. Para esta evaluación se debe plantear virtuales “tipos de personas” que podrían acceder al sitio en busqueda de algun material descargable o un dato.
==¿Que medimos?==
Se buscará medir el tiempo en que estas personas se encontrarán con los contenidos pedidos, además de las distintas vias que pueden usar para llegar al mismo lugar y recoger observaciones de parte de los evaluadores cuando no comprendan algún aspecto.
==Construcción de personas==
*'''Persona 1'''
Un potencial visitador del sitio de la escuela puede ser un escolar que se encuentra en 4° año medio y que tiene interés por estudiar alguna carrera de las carreras que imparte la escuela por lo que este joven ingresa a google y comienza a buscar distintas escuelas y universidades con el fin de informarse con respecto a la visión, los ramos impartidos y el perfil del egresado, además le hemos agregado la posibilidad de acceder a los proyectos que se están realizando cada uno de los trimestres en la escuela, con fotografías de las exposiciones y texto recogido de los examenes.
*'''Persona 2'''
Los mismos estudiantes de la escuela que requieren de algún tipo de información, ya sea ponerse en contacto con algún profesor, consultar el calendario de actividades o incluso buscar formularios para los que entran a titulación o quien desea pedir una tutoria. Este público es el principal al cual apunta el sitio de la escuela, puesto que son estos mismos los que deberían acceder buscando alguna noticias o información recurrente con respecto al dia a dia de la escuela. Es por esto mismo que actualmente se encuentran realizando proyectos los encargados del cuerpo estudiantil (o cuerpo coordinador) para crear una instancia en la cual los alumnos de la escuela puedan exponer temas de debate, publicar actividades, crear espacios de dialogo, etc.
*'''Persona 3'''
Por último me he imaginado una persona anexa a la realidad de la escuela que se ha enterado de que se realizará un seminario o incluso se ha hecho una publicación que es del interés de este potencial visitador, por lo mismo, se requiere que la información sea encontrada rápidamente, que el contenido vaya a la persona y que la navegación aporte para que esto ocurra.
==Protocolo==
*'''Tarea 1'''
Escolar de 4° año medio que se encuentra averiguando información sobre la carrera de diseño industrial, para esto se encuentra navegando el sitio de la escuela, ya que, necesita mirar y descargar la malla curricular para posteriormente imprimirla y compartirla con sus padres.
<gallery>
imagen:Tc2010wlopezmaqnavp1.jpg|Comienza en el home
imagen:Tc2010wlopezmaqnavp12.jpg|Ingresa a la sección ''Carreras''
imagen:Tc2010wlopezmaqnavp13.jpg|Ingresa a ''Programa de estudios'' y encuentra la malla curricular junto a una versión PDF descargable.
</gallery>
*'''Tarea 2'''
Alumno de la carrera de diseño industrial que desea ponerse en contacto con el profesor Arturo Chicano via e-mail.
<gallery>
imagen:Tc2010wlopezmaqnavp1.jpg|Comienza en el home
imagen:Tc2010wlopezmaqnavp2.jpg|Ingresa a la sección ''Escuela/cuerpo docente'' y se encuentra con los profesores ordenados por carrera y area
</gallery>
*'''Tarea 3'''
Alumno de la carrera de arquiectura que ha reprovado un ramo y desea solicitar una tutoria por lo que se le comunica que debe descargar el formulario para la solicitud desde el sitio de la escuela.
<gallery>
imagen:Tc2010wlopezmaqnavp1.jpg|Comienza en el home
imagen:Tc2010wlopezmapnavp3.jpg|Ingresa a la sección ''Alumnos/procesos administrativos'' y encuentra los formularios en versión PDF descargables.
</gallery>
*'''Tarea 4'''
Persona que no tiene ningún tipo de vinculo con la escuela y se ha enterado (por medios de comunicación) de la existencia del ''Libro de los Torneos'' y le ha llamado la atención por lo que desea adquirirlo poniendose en contacto para hacer el pedido.
<gallery>
imagen:Tc2010wlopezmaqnavp1.jpg|Comienza en el home
imagen:Tc2010wlopezmaqnavp4.jpg|Ingresa a la sección ''Mundo/Taller de ediciones'' y se encuentra con ''libro de los Torneos'' y el contacto para adquirir la publicación.
</gallery>
--[[Usuario:Waldoignacio|Waldoignacio]] 06:39 16 ago 2010 (UTC)
==Resultados de las pruebas de navegación==
[https://docs.google.com/fileview?id=0BxAczGR08qCpOWRiZTYxYWMtMWIwZS00Y2RlLWJiN2MtMjEyMzZjNmE1MmFk&hl=es Formulario con el que se realizaron las pruebas de navegación]
<gallery>
imagen:Tc2010wlopez maqlimhome.jpg | Home
imagen:Tc2010wlopez maqlimDisindsec.jpg | Sección Diseño Indutrial
imagen:Tc2010wlopez maqlimdisindmalla.jpg | Malla curricular Carrera Diseño Indutrial
imagen:Tc2010wlopez maqlimcdarq.jpg | Cuerpo Docente Arquitectura
imagen:Tc2010wlopez maqlimcdis.jpg | Cuerpo Docente Diseño
imagen:Tc2010wlopez maqlimProcesosadm.jpg | Procesos administrativos
imagen:Tc2010wlopez maqlimTdee.jpg | Taller de ediciones
</gallery>
==='''Anotaciones'''===
*Falta trabajar más en el calendario, preguntarse por cómo las personas leen las fechas (en terminos de orden). Aun está muy empobrecido el diseño de esta dimesión tan compleja que busca informar día a día a quienes entran al sitio de la escuela.
*Los bloques de Noticias y Ambito académico podrían estar únidos con los bloques de abajo, ya que corresponden a las noticias anteriores, de esta manera se entiende como una sola cosa dentro de la pantalla principal.
*La letra está muy pequeña aun, no se lee con facilidad lo que dificulta la lecturabilidad a algunas personas.
*El logotipo de twitter hace ruido frente a la paleta de colores del sitio de la escuela, por lo que cabría mejor solo poner la palabra más que el logo.
*Estos dobles de noticias anteriores, en caso de que estén deberían comprender una actualización de su imagen mediante van siendo publicadas nuevas entradas.
*Las personas que se encuentran buscando la malla curricular se confunden con el nombramiento de esta como “programa de estudios” por lo que han aconsejado que la imagen podría ser una miniatura de la malla curricular o cambiarle el nombre a la sección
*Las personas, cuando se les pide buscar el lugar donde acceder a la malla curricular la buscan en el menú de navegación o en el sidebar, más precisamente en las referencias antes de buscarla en los bloques centrales en el cuerpo del sitio.
*El bloque de Ambito académico es lo mismo que el bloque de la derecha de las entradas anteriores, y como esta última presenta más información visible que la primera mencionada, esta queda fuera de lugar
*Las personas no se encuentran con el perfil del egresado, que corresponde a una situación que creen importante dentro de la sección de cada una de las carreras.
*Junto con estar la palabra “DESCARGAR” podría haber un ícono representativo para reconocer a primera vista lo que se anda buscando.
*Las personas encuentran poco necesaria esta pantalla, puesto que si se quiere acceder a la malla bien puede ser un documento PDF o una ventana emergente que muestre la malla completa y desplazar el perfil del egresado a la ventana anterior.
*El buscador de profesores puede resultar confuso para algunas personas, ya que, existe un buscador en la parte superior del menú.
*Los espacios para cada profesor son muy pequeños, se pierde la información.
*Las personas ubican mucho más rápido los formularios descargables que en el sitio actual puesto que se presenta casi en un primer plano y no requiere bajar hasta el final de la pantalla para encontrar lo que se anda buscando como ocurre en el sitio actual.
*Las personas no logran encontrar el contenido que se les ha pedido por lo que acuden al buscador del sitio de la escuela.
*Las personas no logran encontrar el contenido que se les ha pedido, puesto que no entienden la sección “mundo” del menú principal. Por lo que prefieren buscar el libro por google en vez de navegar el sitio y llegar casi por descarte a la sección que contiene los libros
*Este segundo buscador de libros entorpece la navegación por la sección.
=Diseño Interfaz Definitiva=
A partir de lo arrojado por las pruebas de navegación con usuarios se plantea una nueva y mejorada interfaz para el sitio de la escuela de arquitectura y diseño.
[[imagen:Tc2010wlopezInterfazfinaleadhome.jpg|thumb|400px|none|''Home sitio ead'']]
'''Home sitio web escuela arquitectura y diseño, pucv'''
Este es la pantalla principal del sitio de la escuela. Posee las correcciones que han surgido de las pruebas de navegación junto con las correcciones en el taller.
Se ubica sobre la imagen de la noticias principal (y ambito académico) una pequeña etiqueta que identifica la sección
El calendario es más completo, extenso hacia abajo y atiende a la lectura que posee google calendar en donde el orden es: dia (3 letras iniciales de cada dia), fecha, y mes (3 letras iniciales de cada mes).
Los bloques de noticia principal con las de noticias anteiores van unidas para tener esta continuidad en la lectura además de tener un link hacia el archivo en que se encuentran todas las noticias.
Las etiquetas con los nombres de las secciones no van sobre las fotos con transparencias sino que son ubicadas abajo para no perder la información visual de la imagen.
[[imagen:Tc2010wlopezInterfazfinaleadentrada.jpg|thumb|400px|none|''Publicación en el sitio de la escuela'']]
'''Noticias y publicaciones'''
La publicación ocupa todo el ancho del cuerpo del sitio, arriba está el titulo, luego se muestra quien publica y cuando fue la publicación y luego se muestra el contenido.
Al final se puede comentar llenando los campos obligatorios.
En el sidebar se encuentran noticias anteriores a las que se pueden acceder además de un link que te lleva al archivo completo de las entradas de Noticias.
[[imagen:Tc2010wlopezInterfazfinaleadsecciondiseno.jpg|thumb|400px|none|''Sección Diseño Gráfico'']]
'''Seccion Carreras/Diseño Gráfico'''
Portada de la sección de diseño gráfico corresponde a el último articulo publicado sobre la carrera de diseño gráfico (posee una etiqueta en la esquina superior derecha para identificarla).
Aquí se encuentra la malla curricular o programa de estudios, al acceder a esa sección se encuentra la descripción de cada ramo y además la posibilidad de descargar en versión PDF el programa de estudios de la carrera de diseño gráfico
Debajo de la entrada principal se encuentran los articulos anteriores de diseño gráfico a los cuales se puede acceder haciendo click en el titulo
El perfil del egresado se encuentra bajo el programa de estudios.
La navegación inteligente se encuentra en el sidebar, referencias a sitios que podrían ser de interes para la persona que se encuentra viendo esa sección.


[[Categoría: Diseño Gráfico]]
[[Categoría: Diseño Gráfico]]

Revisión actual - 23:39 27 ago 2010



Título
Palabras ClaveProyectos, Diseño Gráfico, Diseño de Interacción, Taller de Construcción
Período2010-2010
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Waldo López
ProfesorHerbert Spencer


Mapa de sitio ead.pucv.cl

Mapa de sitio de ead.pucv.cl

Análisis de contenido y audiencias

Este análisis está basado en los datos y estadísticas que entrega la aplicación google analytics en su evaluación del sitio de la escuela de diseño y arquitectura de la pontificia universidad católica de Valparaíso.

Análisis entregado por GoogleAnalytics en donde se muestra en porcentaje que es lo que visitan las personas
Análisis entregado por GoogleAnalytics en donde se muestra en porcentaje de los sitios más visitados en ead.pucv.cl

Sobre los contenidos

Como se puede ver en la tabla (e ignorando el home del sitio) el contenido más recurrente es en búsqueda de información sobre la carrera de arquitectura, que a pesar de ser tan solo el 2,07% de las visitas totales, corresponde a la segunda página más visitada. Esto nos da a entender que la escuela está caracterizada principalmente por su enseñanza en este campo más que por la carrera de diseño (gráfico),cuya página está situada en el quinto lugar con 1,42% de visitas.

Importancia de la página principal

Una cifra no despreciable del 63,85% es el que corresponde al porcentaje de rebote, el cual significa que las personas han abandonado el sitio desde la página de acceso, esto da a entender que más de la mitad de quienes visitan el sitio de la escuela no se interesan por visitar las distintas páginas y servicios que pueden haber dentro del sitio. Esto puede tener relación con la gran cantidad de texto que se encuentra en la página de acceso lo que produce cierto rechazo en muchas de las personas que navegan por internet o simplemente no encuentran lo que estaban buscando.

Otro factor a tener en cuenta dentro de que es lo que ven las personas que entran en el sitio de la escuela es lo correspondiente a los artículos principales presentados en la página de inicio como muestra la siguiente tabla:

Es muy importante la construcción del discurso y el manejo del contenido puesto que en promedio, la duración de una visita en el sitio es de 2 minutos y 31 segundo, por lo que se comprueba (en parte) lo dicho anteriormente con respecto a que las personas navegan de forma rápida por internet y no se detendrán a leer textos muy extensos a menos de que sea algo que realmente les interese.

Los cuadros rojos destacan la cantidad de texto que se presenta en el Home del sitio de la escuela

Sobre las personas/audiencias

Hay que tener en cuenta que el sitio de la escuela no es visitado solo en Chile, sino que la audiencia se extiende principalmente en América latina, América del norte e importantes países de Europa como Italia, Francia, Portugal y España, esto debido al amplio programa de intercambio que la PUCV tiene con importantes universidades del exterior. Por lo mismo sería de gran valor que la escuela contase con una versión en inglés de su sitio, además de potenciar la página del programa de intercambio con algunos elementos que describiré más adelante.

Análisis del sitio

Notas

  • Las autoridades no están reconocidas con imágenes, algo que creo es primordial sobretodo para personas que vienen desde afuera y los alumnos de primer año (escuela/autoridades).
  • El campus se reconoce en el mapa, pero no tiene imágenes (de ciudad abierta, de la escuela y de la casa central). Podría haber una pequeña sección apoyada con imágenes en donde se muestren las distintas salas, patios y lugares que tiene la escuela (escuela/campus).
  • Cuando ingresamos a algún sitio no logramos ver con claridad donde están las subsecciones que se ubican en la barra de la derecha sobre una imagen, casi como ajustado. En la imagen está destacado con rojo las subsecciones de Diseño Gráfico y Diseño Industrial dentro del sitio de la carrera de Diseño.
sitio carreras/diseno

Propuesta

El planteamiento para la propuesta de proyecto está centrado en cómo los alumnos hacen uso de este sitio web, teniendo en cuenta el tiempo promedio de navegación de las personas y concentrandose en este público objetivo, hacerles preguntas y encuestas de la usabilidad que le dan al sitio de la escuela. Si bien puedo conocer que el uso que le entrega gran parte del alumnado es a los podcast del taller de américa, en las estadísticas entregadas por google analytics, esto no es corroborado, por lo que se podría trabajar sobre algunos elementos que arrojan los análisis y además las siguientes propuestas que me parecen podrían ayudar a desarrollar nuevos espacios dentro del sitio:

Barra lateral derecha

Se podría aprovechar de mejor manera esta barra, a pesar de que contiene elementos muy recurrentes como teléfono, dirección y otros datos, además de mostrar la sesión de twitter de la escuela, se podría aprovechar el espacio para destacar sub-secciones dentro de las secciones a las que hemos ingresado. Está muy organizado el tema de los artículos pero se sobre explota la incorporación de estas referencias en cada una de las páginas, se insiste en un espacio en el cual se podría sacar más provecho.

Catolicidad

Esta página, si bien está destinada a la visión de la universidad católica, es también un espacio destinado para las misiones. Estas tienen características similares a las travesías, en una dimensión menor y con límites nacionales. Este espacio podría ser aprovechado de mayor manera, encontrar a un grupo de alumnos que se haga cargo de los contenidos de esta sección, hacer una recopilación de misiones anteriores (como en el caso del sitio de las travesías) y motivar al alumnado a participar de esta actividad mediante la conexión entre este espacio con redes sociales (Facebook, Twitter, etc).

Calendario

El calendario es una herramienta que si bien, se utiliza periódicamente por los alumnos en general, es de mucha recurrencia en momentos de importancia, como inicio de trimestres, entrega de notas, semana de exámenes y entregas. Debido a esta importancia es necesario ubicar el calendario en un lugar en donde puede ser visto a simple vista y de rápido acceso.

Programa de intercambio

Las visitas al sitio web de la escuela por alumnos internacionales es muy recurrente, por su particularidad, la ciudad abierta, amereida y en especial las travesías. Por lo que se podría trabajar en esta página y desarrollar un espacio en el que alumnos extranjeros cuenten su experiencia en la escuela y se vaya creando una base de datos parecida a la de los ex-alumnos. Este material podría ser escrito en la lengua de origen del alumno para que sus pares en otros países tengan acceso a este.

Página del programa de intercambio

--Waldoignacio 16:34 20 jul 2010 (UTC) --Waldoignacio 04:00 22 jul 2010 (UTC)

indice de contenidos

  1. Escuela
    1. Historia
      1. Texto de historia
      2. Video (Vimeo)
      3. Fundadores
    2. Campus
      1. Mapa (Google Maps)
      2. Datos e(ad)
      3. Datos Pucv (link pucv.cl)
      4. Datos Ciudad Abierta (amereida.cl)
    3. Cuerpo Docente
      1. Profesores (Arquitectura,Diseño gráfico-industrial,Poesía, Matemáticas, etc)
    4. Autoridades
      1. Información Decanato, Dirección, Docencia
    5. Visión Católica
      1. Texto catolicidad
      2. Articulos de catolicidad
    6. Servicios
      1. Biblioteca
      2. Libreria
      3. Laboratorio de computación
      4. Archivo
  2. Amereida
    1. Biblioteca Constel
      1. Colección poética
      2. Colección amereida
      3. Colección ciudad abierta
      4. Colección oficio
    2. Travesías (travesias.ead.pucv.cl)Rediseño Sitio Travesías Rediseño Web de Travesías
    3. Taller de amereida
      1. Texto taller de amereida
      2. Articulos taller de amereida
      3. Podcast taller de amereida
        1. Articulos Podcast
    4. Ciudad abierta (amereida.cl)
  3. Alumnos
    1. Cuerpo Coordinador
      1. Información Cuerpo coordinador
      2. Link de interés (FEPUCV, DAE, Fondo Solidario)
    2. Procesos Estudiantiles
      1. Texto procesos administrativos
      2. Formulario de solicitud de título
      3. Formulario de Antecedentes
      4. Formulario Solicitud de Tutoria
    3. Ex-Alumnos
      1. Año de egreso
      2. links grupos ex-alumnos en la red
    4. Intercambio Estudiantil
      1. Información (texto) intercambio estudiantil
    5. Bolsa de Trabajo
      1. información e instrucción de uso
      2. Articulos de trabajos
    6. Revista Digital Alumnos e(ad) Revista Digital Alumnos e(ad) Diseño Sección Alumnos
    7. Alumnos de primer año Sub-sección Alumnos Primer Año
  4. Carreras Consuelo Miranda: Rediseño Carreras y Magister
    1. Arquitectura
      1. Programa de estudios arquitectura
      2. Articulos Arquitectura
      3. Malla curricular (PDF)
      4. Anexo Programa de estudios (PDF)
      5. Proyectos
        1. Proyectos de talleres ordenados por años
    2. Diseño Gráfico
      1. Programa de estudios Diseño Gráfico
      2. Articulos Diseño Gráfico
      3. Malla curricular (PDF)
      4. Proyectos
        1. Proyectos de talleres ordenados por años
    3. Diseño Industrial
      1. Programa de estudios Diseño Industrial
      2. Articulos Diseño Industrial
      3. Malla curricular (PDF)
      4. Proyectos
        1. Proyectos de talleres ordenados por años
  5. PostGrados
    1. Diseño nautico y marítimo
      1. Programa de estudios
      2. Cuerpo Docente
      3. Postulación y Aranceles
      4. Tesis de Mágister
      5. Origen y Fundamentos (lo nautico y lo marítimo)
      6. Infraestructura
      7. Embarcación Amereida
      8. Travesía Anual
    2. Ciudad y territorio
      1. Programa de estudios
      2. Cuerpo Docente
      3. Postulación y Aranceles
      4. Tésis de Mágister
      5. Origen y Fundamentos
  6. Mundo
    1. Información
    2. Investigación
      1. T.I.G Alejandra Salinas: Taller de Investigaciones Gráficas
    3. Asistencia técnica
      1. Taller de ediciones
      2. Asistencia técnica arquitectura
    4. Archivo histórico José Vial Armstrong
      1. Link {http://www.flickr.com/photos/archivo-escuela/}
      2. Información/Texto sobre el archivo histórico
    5. Wiki Casiopea (wiki.ead.pucv.cl)

Notas

  • En el Home del sitio encontraremos un link de registro para ingresar a la intranet Intranet Alumnos y hacer uso del resto de los servicio (como la wiki)
  • También encontraremos el calendario de actividades y periodos por los que está cursando la escuela

Tipos de Contenidos

La reflexión acerca de los contenidos me ha llevado a dividir los contenidos que se deben presentar en la Home, en tres grupos:

  • Articulos: Este tipo de contenido es todo lo que tiene que ver con noticias y los articulos del ambito académico, amereida, de carrera, etc. Dentro de este grupo también estarán incluidas las imagenes.
  • Sitios: Se encuentran entre los contenidos del tipo "Articulos" y son todos los contenidos que hacen referencia a los sitios que posee la escuela dentro de si como el sitio Travesías, wiki casiopea, la revista de los alumnos, entre otros.
  • Informativos: Preferentemente este contenido está ubicado en la columna derecha del sitio de la escuela, y es todo lo referente a las fechas, eventos, información de docencia y "twits" que hacen desde la cuenta twitter de la escuela.

--Waldoignacio 06:10 22 jul 2010 (UTC) --Waldoignacio 04:32 1 ago 2010 (UTC)

Mapa de Sitio

Vista general del mapa de navegación

--Waldoignacio 22:41 25 jul 2010 (UTC) --Waldoignacio 07:20 1 ago 2010 (UTC)

Wireframes

Notas

  • El sitio principal debe presentar la última publicación (entrada, noticia) con una imagen que destaque por sobre el texto. Este será ubicado bajo la imagen destacando el titulo y un resumen breve (preferentemente una frase) del contenido total.
  • Los otros bloques (bajo la noticia principal) corresponden a noticias/articulos anteriores, además de un bloque de sitios recomendados según periodo que esté cursando la escuela (por ejemplo: "recomendamos sección proyectos" a fines de trimestre)

--Waldoignacio 04:51 26 jul 2010 (UTC)

Primera propuesta

Siguiendo una estructura formada por 3 columnas, una izquierda en la que se ubica exclusivamente el menú, otra central en donde se encuentran los contenidos del sitio como las noticias, ambito académico y otros artículos (además es la columna que aloja al footer en la parte inferior), y una columna derecha que es una estructura que incluye información del día a día de la escuela, como el calendario, los mensajes directos desde twitter, la información de docencia y el contacto (número de teléfono, dirección, etc).

Se exponen claramente las 3 columnas bajo una fila superior que contiene el buscador, el registro e ingreso para las personas que requieren esos servicios. La característica de esta propuesta es la ubicación a la izquierda del menú, con letra grande mostrando las 6 secciones que posee el sitio.

Segunda propuesta

En esta segunda etapa me el menú regresa a una fila, por sobre dos columnas en lo que se asemeja a la estructura que posee el actual sitio de la escuela. La diferencia es el modo en que se presentan los contenidos, que, como he dicho anteriormente da preferencia a la imagen por sobre el texto, generando de esta manera una forma más "agradable" de acceder al contenido escrito que puede entregar el sitio.

Tercera propuesta

Esta tercera propuesta trata de ir más allá y he tratado de transgredir la estructura del menú y hacer que cada sección sea un bloque con una foto y dentro de ella estén los nombres de las subsecciones. Luego noté que al acceder al sitio, los articulos de Noticias y el resto de los contenidos quedaba muy abajo, por lo que tendía a perderse estos elementos que deberían ir en un primer plano.

Cuarta propuesta

Esta propuesta corresponde a una limpieza de la propuesta 2 en cuanto a la dimensión del ancho y la grilla sobre la cual se construye, se mantiene la estructura a dos columnas en la cual la izquierda es para el contenido de tipo Articulos y la derecha para contenido del tipo Informativa.

Diseño Interfaz

Este diseño es el resultado de las 4 etapas por las que pasó el proceso de wireframe, en donde se buscaba ordenar cierta cantidad de contenidos decididos con anterioridad en la etapa de ordenamiento de los contenidos. Se buscó mantener un equilibrio entre las cosas que existen actualmente en el sitio de la escuela y la incorporación de elementos que creo, deberían estar en la pantalla de inicio.

  • Sobre las imagenes

El diseño de esta propuesta se crea en base a la idea de entregarle más imagenes al sitio de la escuela, el cual en este momento se ve muy empobrecido en este aspecto. Seguido por la idea de que una imagen tiende a prestar más atención por parte de quien navega por internet y en general cualquier soporte al cual podemos incorporarle un diseño, la imagen resulta un excelente recurso para provocar en las personas que accedan al contenido de alguna noticia o algo que se tenga deseo de extender a los alumnos y a los visitantes. Por lo dicho anteriormente me he planteado trabajar con una imagen que se presente como “portada”para cada sección ubicada en el sitio de inicio, estas secciones seleccionadas según intereses de los alumnos principalmente.

  • Contenido Principal

Los contenidos ubicados en las columnas principales del sitio principal corresponden en primer lugar a las noticias, que son los contenidos con mayor frecuencia de actualización, en segundo lugar se encuentran tres elementos en un segundo grado de importancia: la revista de los alumnos e(ad) sección administrada por el cuerpo coordinador de los alumnos que será una sección nueva del sitio de la escuela que tendría un nivel de actualización muy alto; luego la Wiki Casiopea que corresponde a una herramienta de uso a nivel de escuela, tanto alumnos como profesores así que creo que es importante ubicarla en el sitio principal; y el tercer elemento corresponde al de ámbito académico en donde constantemente se suben entradas de caracter académico de interés tanto para arquitectura como diseño. Finalmente ubico un tercer nivel de elementos que corresponden a 4: acceso al sitio de travesías, proyectos e(ad), Archivo histórico José Vial Armstrong y la observación de la semana, siendo esta última la de mayor frecuencia de actualización, los otros 3 elementos expuestos corresponden a situaciones importantes dentro de la escuela pero que por su frecuencia muy baja de actualización no deberían estar en un grado mayor de destacado.

  • Barra lateral derecha

Esta barra acoge contenido de caracter informativo y datos precisos que van apareciendo dia a dia, son informaciones breves en las que se destaca el calendario, que posee en su parte baja un breve resumen de las actividades del día; luego aparece la información “minuto a minuto” desde el twitter de la escuela, espacio que entrega información sobretodo a personas que no poseen una cuenta twitter; luego se encuentra la información de docencia que tiene que ver con todo lo correspondiente a trámites que se debe hacer en la escuela o casa central como las matriculas o los plazos para hacer efectivo el pago de las cuotas o firmas de pagaré; Finalmente encontramos los contactos de la escuela, su número de telefono, su dirección de correo, fax y dirección.

Propuesta 1

Diseño Interfaz Home

Notas (corrección)

  • Cuando construímos la interfaz debemos respetar la grilla base, en este sentido pareciera que la barra lateral derecha no pertenece a las mismas leyes que la columna central por lo que se quiebra la regularidad del sitio.
  • Las miniaturas poseen tamaños distintos lo que puede complicar a los autores cuando escriban y incluyan imagenes en sus entradas, Hay que realizar una regularización de las imagenes (miniaturas de las entradas) en el sitio principal.
  • Desarrollar la paleta de colores.
  • La barra superior-horizontal se ve muy cargada producto de la imagen de fondo (que además se encuentra bajo el logotipo).
  • No se encuentran las noticias anteriores, no se puede acceder a ellas desde el sitio de inicio.

Propuesta 2

Diseño Interfaz Home 2

--Waldoignacio 08:16 2 ago 2010 (UTC) --Waldoignacio 23:44 8 ago 2010 (UTC)

Mapa de divs

Mapa de divs home sitio ead.cl

--Waldoignacio 17:46 12 ago 2010 (UTC)

Pruebas de navegación con usuarios

Maquetas para la construcción de protocolos para las pruebas de navegación con usuarios

Pruebas de navegación con usuarios

La construcción de esta experiencia con personas nos ayudará a comprender algunas falencias que podría tener el proyectos con respecto al modo de encontrar los contenidos que han sido ordenados dentro del sitio web de la escuela. Para esta evaluación se debe plantear virtuales “tipos de personas” que podrían acceder al sitio en busqueda de algun material descargable o un dato.

¿Que medimos?

Se buscará medir el tiempo en que estas personas se encontrarán con los contenidos pedidos, además de las distintas vias que pueden usar para llegar al mismo lugar y recoger observaciones de parte de los evaluadores cuando no comprendan algún aspecto.

Construcción de personas

  • Persona 1

Un potencial visitador del sitio de la escuela puede ser un escolar que se encuentra en 4° año medio y que tiene interés por estudiar alguna carrera de las carreras que imparte la escuela por lo que este joven ingresa a google y comienza a buscar distintas escuelas y universidades con el fin de informarse con respecto a la visión, los ramos impartidos y el perfil del egresado, además le hemos agregado la posibilidad de acceder a los proyectos que se están realizando cada uno de los trimestres en la escuela, con fotografías de las exposiciones y texto recogido de los examenes.

  • Persona 2

Los mismos estudiantes de la escuela que requieren de algún tipo de información, ya sea ponerse en contacto con algún profesor, consultar el calendario de actividades o incluso buscar formularios para los que entran a titulación o quien desea pedir una tutoria. Este público es el principal al cual apunta el sitio de la escuela, puesto que son estos mismos los que deberían acceder buscando alguna noticias o información recurrente con respecto al dia a dia de la escuela. Es por esto mismo que actualmente se encuentran realizando proyectos los encargados del cuerpo estudiantil (o cuerpo coordinador) para crear una instancia en la cual los alumnos de la escuela puedan exponer temas de debate, publicar actividades, crear espacios de dialogo, etc.

  • Persona 3

Por último me he imaginado una persona anexa a la realidad de la escuela que se ha enterado de que se realizará un seminario o incluso se ha hecho una publicación que es del interés de este potencial visitador, por lo mismo, se requiere que la información sea encontrada rápidamente, que el contenido vaya a la persona y que la navegación aporte para que esto ocurra.

Protocolo

  • Tarea 1

Escolar de 4° año medio que se encuentra averiguando información sobre la carrera de diseño industrial, para esto se encuentra navegando el sitio de la escuela, ya que, necesita mirar y descargar la malla curricular para posteriormente imprimirla y compartirla con sus padres.

  • Tarea 2

Alumno de la carrera de diseño industrial que desea ponerse en contacto con el profesor Arturo Chicano via e-mail.

  • Tarea 3

Alumno de la carrera de arquiectura que ha reprovado un ramo y desea solicitar una tutoria por lo que se le comunica que debe descargar el formulario para la solicitud desde el sitio de la escuela.

  • Tarea 4

Persona que no tiene ningún tipo de vinculo con la escuela y se ha enterado (por medios de comunicación) de la existencia del Libro de los Torneos y le ha llamado la atención por lo que desea adquirirlo poniendose en contacto para hacer el pedido.

--Waldoignacio 06:39 16 ago 2010 (UTC)

Resultados de las pruebas de navegación

Formulario con el que se realizaron las pruebas de navegación

Anotaciones

  • Falta trabajar más en el calendario, preguntarse por cómo las personas leen las fechas (en terminos de orden). Aun está muy empobrecido el diseño de esta dimesión tan compleja que busca informar día a día a quienes entran al sitio de la escuela.
  • Los bloques de Noticias y Ambito académico podrían estar únidos con los bloques de abajo, ya que corresponden a las noticias anteriores, de esta manera se entiende como una sola cosa dentro de la pantalla principal.
  • La letra está muy pequeña aun, no se lee con facilidad lo que dificulta la lecturabilidad a algunas personas.
  • El logotipo de twitter hace ruido frente a la paleta de colores del sitio de la escuela, por lo que cabría mejor solo poner la palabra más que el logo.
  • Estos dobles de noticias anteriores, en caso de que estén deberían comprender una actualización de su imagen mediante van siendo publicadas nuevas entradas.
  • Las personas que se encuentran buscando la malla curricular se confunden con el nombramiento de esta como “programa de estudios” por lo que han aconsejado que la imagen podría ser una miniatura de la malla curricular o cambiarle el nombre a la sección
  • Las personas, cuando se les pide buscar el lugar donde acceder a la malla curricular la buscan en el menú de navegación o en el sidebar, más precisamente en las referencias antes de buscarla en los bloques centrales en el cuerpo del sitio.
  • El bloque de Ambito académico es lo mismo que el bloque de la derecha de las entradas anteriores, y como esta última presenta más información visible que la primera mencionada, esta queda fuera de lugar
  • Las personas no se encuentran con el perfil del egresado, que corresponde a una situación que creen importante dentro de la sección de cada una de las carreras.
  • Junto con estar la palabra “DESCARGAR” podría haber un ícono representativo para reconocer a primera vista lo que se anda buscando.
  • Las personas encuentran poco necesaria esta pantalla, puesto que si se quiere acceder a la malla bien puede ser un documento PDF o una ventana emergente que muestre la malla completa y desplazar el perfil del egresado a la ventana anterior.
  • El buscador de profesores puede resultar confuso para algunas personas, ya que, existe un buscador en la parte superior del menú.
  • Los espacios para cada profesor son muy pequeños, se pierde la información.
  • Las personas ubican mucho más rápido los formularios descargables que en el sitio actual puesto que se presenta casi en un primer plano y no requiere bajar hasta el final de la pantalla para encontrar lo que se anda buscando como ocurre en el sitio actual.
  • Las personas no logran encontrar el contenido que se les ha pedido por lo que acuden al buscador del sitio de la escuela.
  • Las personas no logran encontrar el contenido que se les ha pedido, puesto que no entienden la sección “mundo” del menú principal. Por lo que prefieren buscar el libro por google en vez de navegar el sitio y llegar casi por descarte a la sección que contiene los libros
  • Este segundo buscador de libros entorpece la navegación por la sección.

Diseño Interfaz Definitiva

A partir de lo arrojado por las pruebas de navegación con usuarios se plantea una nueva y mejorada interfaz para el sitio de la escuela de arquitectura y diseño.

Home sitio ead

Home sitio web escuela arquitectura y diseño, pucv

Este es la pantalla principal del sitio de la escuela. Posee las correcciones que han surgido de las pruebas de navegación junto con las correcciones en el taller. Se ubica sobre la imagen de la noticias principal (y ambito académico) una pequeña etiqueta que identifica la sección El calendario es más completo, extenso hacia abajo y atiende a la lectura que posee google calendar en donde el orden es: dia (3 letras iniciales de cada dia), fecha, y mes (3 letras iniciales de cada mes). Los bloques de noticia principal con las de noticias anteiores van unidas para tener esta continuidad en la lectura además de tener un link hacia el archivo en que se encuentran todas las noticias. Las etiquetas con los nombres de las secciones no van sobre las fotos con transparencias sino que son ubicadas abajo para no perder la información visual de la imagen.

Publicación en el sitio de la escuela

Noticias y publicaciones

La publicación ocupa todo el ancho del cuerpo del sitio, arriba está el titulo, luego se muestra quien publica y cuando fue la publicación y luego se muestra el contenido. Al final se puede comentar llenando los campos obligatorios. En el sidebar se encuentran noticias anteriores a las que se pueden acceder además de un link que te lleva al archivo completo de las entradas de Noticias.

Sección Diseño Gráfico

Seccion Carreras/Diseño Gráfico

Portada de la sección de diseño gráfico corresponde a el último articulo publicado sobre la carrera de diseño gráfico (posee una etiqueta en la esquina superior derecha para identificarla). Aquí se encuentra la malla curricular o programa de estudios, al acceder a esa sección se encuentra la descripción de cada ramo y además la posibilidad de descargar en versión PDF el programa de estudios de la carrera de diseño gráfico Debajo de la entrada principal se encuentran los articulos anteriores de diseño gráfico a los cuales se puede acceder haciendo click en el titulo El perfil del egresado se encuentra bajo el programa de estudios. La navegación inteligente se encuentra en el sidebar, referencias a sitios que podrían ser de interes para la persona que se encuentra viendo esa sección.