Diferencia entre revisiones de «Diseño del sitio web PUCV»

De Casiopea
Línea 249: Línea 249:
Image:Paso_6.jpg|Becas de apoyo PUCV
Image:Paso_6.jpg|Becas de apoyo PUCV
Image:Paso_7.jpg|Tipos de becas de apoyo
Image:Paso_7.jpg|Tipos de becas de apoyo
Image:ScreenshotGenerales2.jpg|Becas de arancel PUCV
Image:Paso_8.jpg|Becas de arancel PUCV
Image:ScreenshotGenerales2.jpg|Calendario becas y créditos ministeriales
Image:ScreenshotGenerales2.jpg|Calendario becas y créditos ministeriales
</gallery>
</gallery>

Revisión del 01:01 14 ago 2013


TítuloDiseño del sitio web PUCV
Tipo de ProyectoProyecto de Taller
Palabras Claveanálisis heurístico, FODA, mapas de navegación, personas y escenarios, card sorting, prueba de usuarios, wireframes, maquetas navegables, usabilidad
Período2013-2013
AsignaturaLenguaje Computacional 3,
Del CursoLC3 2013,
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)Daniela Pardo, Nicol Valenzuela, Maria Jesus Abarca, Christopher Fattori, Bernardo Silva
ProfesorJorge Barahona


Etapa 1: Análisis Heurístico, FODA y resultados

Introducción

Se estudia distintas metodologías para analizar el funcionamiento y buen desarrollo del sitio web PUCV. Se escogen las que generan buenos resultados a largo plazo y se pueden aplicar en cualquier etapa del proyecto.

Los Criterios para evaluar son:

  1. Generales
  2. Identidad e información
  3. Lenguaje y redacción
  4. Rotulado
  5. Estructura y navegación
  6. Lay-out de la página
  7. Búsqueda
  8. Elementos multimedia
  9. Ayuda
  10. Accesibilidad
  11. Control y retroalimentación

Bibliografía

  • Márquez Correa, Joaquín. “Guía para evaluación experta”. Information architect. Icon medialab.
  • Hassan Montero, Yusef. Martín Fernández, Francisco J. “Guía de Evaluación Heurística de Sitios Web”. 2003
  • Nielsen, Jakob. "Ten Usability Heuristics". 1995
  • Instone, Keith. "Site Usability Heuristics for the Web". 1997
  • Krug, Steve. "Don't Make Me Think". 2010

Metodologías Aplicadas

Análisis Heurístico (estudio cuantitativo)

sirve para identificar rápidamente y con claridad el tipo de error más común que se repite en proyectos web (Internet, Extranet o Intranet). La experiencia de los investigadores en arquitectura de información y usabilidad demuestra que las deficiencias en este ámbito tienden a reiterarse. La prueba heurística, permite, a través de una metodología muy sencilla y directa, descartar este tipo de fallas o corregirlas, si es el caso, antes de entrar a un análisis más detallado.

ver más datos en:

FODA (estudio cualitativo)

El Análisis DAFO, también conocido como Matriz o Análisis DOFA o FODA, es una metodología de estudio de la situación de una empresa o un proyecto, analizando sus características internas (Debilidades y Fortalezas) y su situación externa (Amenazas y Oportunidades) en una matriz cuadrada. Proviene de las siglas en inglés SWOT (Strengths, Weaknesses, Opportunities y Threats).

Es una herramienta para conocer la situación real en que se encuentra una organización, empresa o proyecto, y planificar una estrategia de futuro.

Durante la etapa de planificación estratégica y a partir del análisis DAFO se debe poder contestar cada una de las siguientes preguntas:

  • ¿Cómo se puede destacar cada fortaleza?
  • ¿Cómo se puede disfrutar cada oportunidad?
  • ¿Cómo se puede defender cada debilidad?
  • ¿Cómo se puede detener cada amenaza?

Este recurso fue creado a principios de la década de los setenta y produjo una revolución en el campo de la estrategia empresarial. El objetivo del análisis DAFO es determinar las ventajas competitivas de la empresa bajo análisis y la estrategia genérica a emplear por la misma que más le convenga en función de sus características propias y de las del mercado en que se mueve.

El análisis consta de cuatro pasos:

  1. Análisis Externo (conocido como "Modelo de las cinco fuerzas de Porter")
  2. Análisis Interno
  3. Confección de la matriz DAFO
  4. Determinación de la estrategia a emplear

ver más datos en:

Análisis Heurístico

Pauta de evaluación heurística y resultados

Screenshots

Generales

Identidad e Información

Lenguaje y redacción

Rotulado

Estructura

Navegación

Lay-out

Accesibilidad

Gráficos del Análisis Heurístico

Gráfico del Análisis Heurístico

FODA

Fortalezas

  1. Hay un esfuerzo por crear una interfaz limpia
  2. Existe una representatividad del logo en todas sus páginas
  3. Hay un esfuerzo de comunicar de forma clara, amena y precisa sus contenidos en la redacción.

Oportunidades

  1. Tomando en cuenta que la universidad posee un Programa Internacional de Intercambio, se podría posibilitar al sitio como bilingüe
  2. Adoptar un diseño responsive, para así hacer más grata la navegación sin importar la plataforma.

Debilidades

  1. No utiliza apropiadamente el espacio visual del sitio
  2. Dificulta la navegación al abrir varias ventanas distintas sin retorno a la home
  3. Hay disparidad en el diseño de las páginas de los servicios que ofrece.

Amenazas

  1. El usuario tiende a perderse, por ende, tratará de evitar utilizar el sitio nuevamente
  2. Al no poseer un diseño responsive, en muy incómodo visitar el sitio en otros medios como los tablets y, en especial, los celulares
  3. Existen sitios que ofrecen los mismos servicios de mejor manera al usuario

Conclusiones

  1. El diseño del sitio no aprovecha el espacio, lo que provoca que se vea muy condensado.
  2. La estructura no está bien determinada en el sitio.
  3. No existe un motor de búsqueda en la página de inicio que ayude a los usuarios.

Propuestas

  1. Adoptar un diseño responsive, para así hacer más grata la navegación sin importar la plataforma.
  2. Debe enfocarse el diseño del sitio en generar una mejor experiencia para los usuarios.
  3. Tomando en cuenta que la universidad posee un Programa Internacional de Intercambio, se podría posibilitar al sitio como bilingüe y la opción debería estar disponible en todas sus páginas enlazadas.

Presentación 1

Etapa 2: Mapas de Navegación, Personas y Escenarios, Propuestas

Metodologías Aplicadas

  1. Mapa de Navegación(actual sitio web PUCV)
  2. Personas y Escenarios
  3. Caso de estudio: University of Cambridge
  4. Generación de Propuesta: análisis, observaciones y propuesta.

Mapa de Navegación

Mapa de navegación del sitio web PUCV

Personas y Escenarios

Alumno escolar

  • Nombre: Juan Esteban Ramírez Rodríguez
  • Edad: 17
  • Ocupación: estudiante escolar
  • Nivel de usuario: medio

Descripción: Estudia en una escuela particular subvencionada de la V región. Pertenece a la clase media baja, tiene como objetivo ser el primero en su familia en ingresar a la universidad, por lo cual se esfuerza estudiando para obtener un buen puntaje. Como no tienen dinero para largos viajes y no quiere separase de su familia decide buscar una carrera en una universidad dentro de la región.

Escenario: Para mejorar la calidad de vida de su familia busca una carrera que obtenga buenos ingresos luego de egresar pero no está seguro qué carrera debe elegir. Va hacia un ciber, se conecta a un computador de escritorio y buscando una carrera en una universidad de la región da con el portal de la PUCV y quiere saber cómo es la universidad, qué carreras ofrece, cuáles son los aranceles y si tiene beneficios o becas. Por sobre todo que estas sean de buena calidad.

Recorrido: Facultades y carreras, Admisión, Asuntos estudiantiles

Facultades y carreras

Admisión

Asuntos estudiantiles


Estudiante PUCV

  • Nombre: Macarena Palacios Aguirre
  • Edad: 22
  • Ocupación: estudiante universitaria
  • Nivel de usuario: avanzado

Descripción: Es una estudiante de cuarto año de la carrera Ingeniería Civil. Vive en una situación de clase media en una casa en el Cerro Placeres sola con su madre, ya que sus padres están divorciados.

Escenario: Desea irse de intercambio el año siguiente a otro país, con idioma de preferencia español o inglés, ya que esos son los que domina a la perfección. Visita el sitio de la PUCV para informarse con respecto a las postulaciones utilizando su computador.

Recorrido: Relaciones Internacionales, proceso de postulación y formulario

Relaciones Internacionales

Proceso de postulación

Formulario

Egresado PUCV

  • Nombre: Eduardo Rojas Riquelme
  • Edad: 24
  • Ocupación: estudiante universitario / trabajador
  • Nivel de usuario: avanzado

Descripción: Es un joven emprendedor, bueno en los estudios, esforzado. Decide trabajar mientras estudia para valerse por sí mismo pagando el apartamento en el que vive con unos amigos. Además le gusta adelantar su currículo realizando proyectos por cuenta propia.

Escenario: Como trabaja mientras cursa la carrera debe poder administrar bien su tiempo. Así que cuenta con pocas horas al día para navegar por internet y cuando lo hace es por las noches reunido con sus amigos conectándose a su laptop. Por ello necesita estar pendiente de los horarios de las clases, eventos relevantes que alteren los horarios, facilidades para estudiantes que trabajen, cambios de sedes, proyectos concursables, capacitaciones, etc.

Recorrido: Asuntos estudiantiles, Portal de noticias y Agenda

Asuntos estudiantiles, Portal de noticias y Agenda

Problemas en cada escenario

Alumno escolar

  1. No se explican correctamente las becas de Apoyo de la PUCV y no se indica cómo obtenerlas.
  2. Hay links rotos en el sitio de Admisión.
  3. El Acceso Directo de Becas Postgrado lleva a una página con un buscador y sin contenido.
  4. Ofrecer más información sobre la Tarjeta Junaeb, al menos el link para el sitio de la Junaeb.
  5. Se encuentra la misma información en distintos sitios, generalmente es la misma pero con datos agregados o sin ciertos datos que la anterior.

Estudiante PUCV

  1. Hay enlaces con información incompleta o "en construcción" y son enlaces relevantes, como Proceso de Postulación

Egresado PUCV

  1. El sitio no es adecuado para visitarlo por celular.
  2. Ciertas páginas son responsive, pero no está pensado para móvil ya que las columnas chocan.
  3. Pide descargar plugin.
  4. Las imágenes interrumpen la lectura en el celular.
  5. Los enlaces se demoran al menos 5 segundos en cargar.
  6. La columna de texto no aprovecha el espacio horizontal y se condensa hacia la derecha.

Caso de estudio: University of Cambridge

Objetivos planteados

  1. Resolver los problemas de los usuarios de manera interactiva y diseño responsive.
  2. Que sea de contenido simple y de fácil ejecución.
  3. Generar compresión inmediata como navegar en el sitio y como buscar contenidos

Propuestas: Mapas de navegación

  1. Notebook y PC
  2. Móvil

Presentación 2

Etapa 3: Card sorting, prueba de usuarios y wireframes

Metodologías Aplicadas

  1. Card Sorting.
  2. Pruebas de usuarios.
  3. Mapas de contenido y de navegación.
  4. Wireframes.

Card sorting

Descripción

Se presenta el material a los usuarios y se les pide que propongan un nuevo modo de navegación para el sitio web PUCV, con los contenidos dados (sustantivos, nombres y verbos). Los contenidos del card sorting están basados en nuestros resultados del análisis realizado al sitio actual y los mapas de navegación propuestos anteriormente.



Mapa de navegación y propuestas de contenido. pruebas de usuario con target objetivo.

Prueba de usuarios

Alumno escolar

Estudiante 4º Medio, Colegio Capellán Pascal. Interesado en la carrera de Derecho (18 años):

Ingresó al sitio para informarse sobre la carrera, pero se enfocó en el sitio de la Facultad. No le interesaba lo que dijera el sitio sobre la Universidad porque sabe el prestigio que ésta posee.

Estudiante PUCV

Estudiante de Ingeniería Industrial (21 años):

Muy pocas veces visita el sitio, ya que generalmente se informa en el portal de su Facultad y cuando necesita ingresar al Navegador Académico lo hace directamente desde el buscador de Google.

Egresado PUCV

Egresado de Ingeniería Comercial (27 años):

Utilizaba el sitio para utilizar el Navegador Académico, Aula Virtual y la Biblioteca. Comenta que siempre le fue mucho más útil el sitio de su Facultad que el de la pucv.

Problemas en cada escenario

Alumno escolar

1.1 Estudiante 4º Medio, Colegio Capellán Pascal (18 años): Ingresó al sitio para informarse sobre la carrera, pero se enfocó en el sitio de la Facultad. No le interesaba lo que dijera el sitio sobre la Universidad porque sabe el prestigio que ésta posee.

1.2 Estudiante 4º Medio,Liceo Industrial de San Antonio (18 años): Su prioridad son las facultades y las carreras porque es lo que le interesa saber, porque aún no tiene claro lo que quiere estudiar. Luego sobre la admisión al postulante que ofrezca el valor de cada carrera, el puntaje, becas y los créditos que ofrece como universidad o los convenios de pago que tiene con el estado.

Estudiante PUCV

2.1 Estudiante de Ingeniería Industrial (21 años): Se informa en el portal de su facultad y cuando necesita ingresar al Navegador Académico lo hace directamente desde el buscador de Google.

2.2 Estudiante de Ingeniería Comercial (23 años): Visita regularmente el sitio para visitar el Navegador Académico y la Biblioteca. Comenta que al principio le fue difícil averiguar sobre las Becas de Apoyo que entrega la PUCV en el sitio y tuvo que recurrir a otros medios para informarse.

Egresado PUCV

3.1 Egresado de Ingeniería Comercial (27 años): Utilizaba el sitio para utilizar el Navegador Académico, Aula Virtual y la Biblioteca. Comenta que siempre le fue mucho más útil el sitio de su Facultad.

3.2 Egresado de Ingeniería Industrial (25 años): Visitaba el sitio sólo para revisar el Navegador Académico y el Aula Virtual. Agregando cuando preparó su Intercambio.

Wireframes

  1. Notebook y PC
  2. Móvil

Presentación 3

Etapa 4: Wireframes navegables, pruebas de usabilidad y propuestas

Metodologías Aplicadas

Generación Wireframes navegables

Móvil

Sección 1 UNIVERSIDAD

Sección 2 FACULTADES Y CARRERAS

Sección 3 ADMISIÓN

Sección 4 RELCIONES INTERNACIONALES

Sección 5 RECURSOS ACADÉMICOS

Sección 6 UNIVERSIDAD

Archivo:WIREFRAMES PUCV.rar

Actividad: Prueba de usabilidad

Tareas asignadas por casos

  1. Alumno escolar
  2. Estudiante PUCV
  3. Egresado PUCV

Análisis y gráfico de los resultados

Propuestas: Wireframes

  1. Notebook y PC
  2. Tablet
  3. Móvil