3. Generación de wireframes navegables
Creación y aplicación de wireframes navegables
programas utilizados html, fireworks y silverback
Descripción: Se revisa los mapas de navegación obtenidos tras la
actividad “card sorting y prueba de usuarios” realizada, se analiza
resultados y se propone una nueva navegación para el sitio web
PUCV.
Se genera wireframes navegables a partir de la nueva propopuesta
de navegación y los wireframes de baja resolución creados en la
última presentación.
Pontificia Universidad Católica de Valparaíso
Noticias
Título de la Noticia 1
RESEÑA: Lorem ipsum dolor sit amet, consectetur adipi
Nunc tempus imperdiet pharetra. Nulla tempus augueg
eros, eget elementum mi cursus eget. In fermentum.
Título de la Noticia 2
RESEÑA: Lorem ipsum dolor sit amet, consectetur adipi
Nunc tempus imperdiet pharetra. Nulla tempus augueg
eros, eget elementum mi cursus eget. In fermentum.
Título de la Noticia 1
RESEÑA: Lorem ipsum dolor sit amet, consectetur adipi
Nunc tempus imperdiet pharetra. Nulla tempus augueg
eros, eget elementum mi cursus eget. In fermentum.
Título de la Noticia 2
RESEÑA: Lorem ipsum dolor sit amet, consectetur adipi
Nunc tempus imperdiet pharetra. Nulla tempus augueg
eros, eget elementum mi cursus eget. In fermentum.
Eventos
Agosto
UniversidadHome
Contacto
Portal de empleo
Hipervínculos:
TEXTO IMÁGENES
Facultades y CarrerasAdmisión Recursos Académicos
ENGLISH
Intercambio
LOGO
Do
28 29 30 31 1 2 3
4 5 6 7
Título del evento
Hora
Sala
07
AGO
Título del evento
Hora
Sala
09
AGO
Título del evento
Hora
Sala
13
AGO
Título del evento
Hora
Sala
15
AGO
Título del evento
Hora
Sala
22
AGO
8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Lu Ma Mi Ju Vi Sa
-Lorem ipsum dolor
-Lorem ipsum dolorLorem ipsumdolor
Dirección
Fono
Lorem ipsumdolor
Lorem ipsumdolor
A B
3
4. Nombre: Andrés Medina
Edad: 18
Ocupación: alumno de 4ºMedio, Liceo Industrial de San Antonio
Nivel de usuario: avanzado
Recorrido: Facultades y carreras, Admisión
(requisitos y beneficios), Universidad.
Tareas asignadas por caso
Alumno Escolar
(A,B) Tareas dadas:
1.1 Buscar la carrera que desea estudiar
1.2 Encontrar los requisitos para ingresar y beneficios a los que
puede acceder
1.3 Buscar información de la universidad
4
5. Nombre: Anton Svarbic
Edad: 21
Ocupación: estudiante universitario
Nivel de usuario: avanzado
Recorrido: Navegador académico,Intercambio,
becas intercambio (beneficios y requesitos).
Tareas asignadas por caso
Alumno Pregrado
(A,B) Tareas dadas:
2.1 Ingresar al sitio y buscar el navegador académico
2.2 Ingresar buscar información sobre intercambios
2.3 Ingresar a las becas de intercambio (requisitos y beneficios)
5
6. Nombre: Elias Cristobal Olivares Amigo
Edad: 27
Ocupación: estudiante universitario egresado / trabajador
Nivel de usuario: medio
Recorrido: Navegador académico, postgrados,
becas postgrados (beneficios y requesitos).
Tareas asignadas por caso
Alumno Postgrado
(A,B) Tareas dadas:
3.1 Ingresar al sitio y buscar el navegador académico
3.2 Ingresar a los postgrados y buscar un magister de su interés
3.3 Ingresar a las becas de postgrados
6
7. Actividad: Prueba de usabilidad
Prueba de usabilidad: Wireframes navegables
registro de la actividad con el programa
Silverback.
Descripción: Se cita a tres personas para realizar las pruebas cada
uno cumple con las características de cada caso:
/1/ alumno escolar 4ºmedio (18 años) /2/ estudiante pucv (24
años) /3/ estudiante egresado pucv (27 años)
21 3
7
8. Análisis y gráficos de los resultados
3) Dirígete a Relaciones Internacionales.
1- ¿Se encontraron los enlaces de manera rápida?
2- ¿Fue sencillo volver al Inicio del sitio?
3- ¿En algún momento te sentiste desorientado navegando por el sitio mientras realizabas la tarea?
4- ¿Concuerda Relaciones Internacionales con su contenido? ¿Si no lo haces, qué término utilizarías?
1) Entra en el sitio para Buscar información sobre una carrera . Y luego Vuelve al Inicio
1- ¿Fue fácil encontrar el enlace de Facultades y Carreras?
2- ¿Te acomoda que las carreras estén ordenadas dependiendo de su Facultad?
3- ¿El diseño del sitio dificulta la navegación?
4- ¿El sitio contiene Imágenes?¿Tienen alguna función importante?
5- ¿Fue sencillo volver al Inicio del sitio?
6- ¿En algún momento te sentiste desorientado navegando por el sitio mientras realizabas la tarea?
7- ¿Relacionas Facultades y Carreras con su contenido? ¿Si no lo haces, qué término utilizarías?
No estoy de acuerdo
No lo sé
Estoy de acuerdo
TAREAS DE USABILIDAD
2) Busca información acerca de las Becas
1- ¿Fue fácil encontrar el enlace de Becas?
2- ¿Crees que las imágenes son necesarias?¿En qué parte?
3- ¿Fue sencillo volver al Inicio del sitio?
4- ¿En algún momento te sentiste desorientado navegando por el sitio mientras realizabas la tarea?
5- ¿Relacionas Becas con su contenido? ¿Si no lo haces, qué término utilizarías?
8
9. 5) Dirígete a Postgrados
1- ¿Se encontraron los enlaces de manera rápida?
2- ¿Relacionas Postgrados y magíster con su contenido? ¿Si no lo haces, qué término utilizarías?
3- ¿En algún momento te sentiste desorientado navegando por el sitio mientras realizabas la tarea?
4) Entra en el Navegador Académico y Aula Virtual
1- ¿Se encontraron los enlaces de manera rápida?
7- ¿Está bien indicada la manera de volver al Inicio en el sitio?
9- ¿En algún momento te sentiste desorientado navegando por el sitio mientras realizabas la tarea?
10- ¿Relacionas Navegador Académico y Aula Virtual con su contenido? ¿Si no lo haces, qué término utilizarías?
Análisis y gráficos de los resultados
9
10. Nivel de satisfacción del usuario en relación a la organización de contenidos de la maqueta.
Usuario 1: Andrés Medina/Usuario 2: Anton Svarbic/Usuario 3: Elias Cristobal Olivares
TAREAS
I. Buscar información sobre una carrera específica.
1. ¿Relacionas la etiqueta "Facultades y Carreras" con su contenido? ¿Encontraste lo que esperabas? Sí/Sí/Sí
2. ¿Te acomoda que las carreras estén ordenadas según facultad? Sí/Sí/Sí
3. Esta sección no contiene imágenes, ¿Estás deacuerdo con ello? No/No/Sí
4. ¿Te desorientaste en algún momento? o ¿Te sentiste orientado por la interfáz siempre? Sí/Sí/Sí
II. Buscar información sobre becas.
1. ¿Buscaste las becas en la sección "Admisión" del menú? Sí/Sí/Sí
2. ¿Te acomoda que becas esté bajo Aranceles y Matrículas? Sí/Sí/Sí
3. Esta sección no contiene imágenes, ¿Estás deacuerdo con ello? Sí/Sí/Sí
4. ¿Te desorientaste en algún momento? o ¿Te sentiste orientado por la interfáz siempre? Sí/Sí/Sí
III. Buscar información sobre estudios en el extranjero.
1. ¿Relacionas "relaciones internacionales" con intercambio o estudios en el extranjero? Sí/Sí/Sí
2. ¿Encontraste las becas que se ofrecen para estudios en el extranjero? Sí/Sí/Sí
3. Esta sección no contiene imágenes, ¿Estás deacuerdo con ello? No/No/Sí
4. ¿Te desorientaste en algún momento? o ¿Te sentiste orientado por la interfáz siempre? Sí/Sí/Sí
IV. Acceder al Navegador Académico.
1. ¿Relacionas "Recursos Académicos" con el Navegador académico? Sí/Sí/Sí
2. ¿Te desorientaste en algún momento? o ¿Te sentiste orientado por la interfáz siempre? Sí/Sí/Sí
V. Acceder a los Postgrados
1. ¿Relacionas el hecho de que postgrado se encuentre en "Admisión"? Sí/Sí/Sí
2. ¿Te desorientaste en algún momento? o ¿Te sentiste orientado por la interfáz siempre? Sí/Sí/Sí
91,6%
8,4%
Porcentaje de
éxito en la prueba
Porcentaje de
fracaso en la prueba
10
11. Nivel de consecución de tareas realizadas por el usuario en relación a la organización de contenidos de la maqueta.
Usuario 1: Andrés Medina/Usuario 2: Anton Svarbic/Usuario 3: Elias Cristobal Olivares
TAREAS
I. Buscar información sobre una carrera específica.
1. Información encontrada Sí/Sí/Sí
2. Vuelve al inicio sin dificultad No/Sí/Sí
II. Buscar información sobre becas.
1. Información encontrada Sí/Sí/Sí
2. Vuelve al inicio sin dificultad Sí/Sí/Sí
III. Buscar información sobre estudios en el extranjero.
1. Información encontrada Sí/Sí/Sí
2. Vuelve al inicio sin dificultad Sí/Sí/Sí
IV. Acceder al Navegador Académico.
1. Información encontrada Sí/Sí/Sí
2. Vuelve al inicio sin dificultad Sí/Sí/Sí
V. Acceder a los Postgrados
1. Información encontrada Sí/Sí/Sí
2. Vuelve al inicio sin dificultad Sí/Sí/Sí
96,6%
Porcentaje de
éxito en la prueba
Porcentaje de
fracaso en la prueba
3,4%
11
15. Wireframes
Escritorio
Nuevas Propuestas: Wireframes navegables
datos y cambios basados en los resultados
de la prueba de usabilidad
PONTIFICIA
UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH
Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales
TÍTULO IMAGEN
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Calendario
TÍTULO DEL EVENTO
Clasificación
Hora
07
AGO
Agosto
Do
28 29 30 31 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Lu Ma Mi Ju Vi Sa
TÍTULO DEL EVENTO
Clasificación
Hora
09
AGO
TÍTULO DEL EVENTO
Clasificación
Hora
13
AGO
TÍTULO DEL EVENTO
Clasificación
Hora
15
AGO
TÍTULO DEL EVENTO
Clasificación
Hora
22
AGO
Navegador Académico
Intranet
EVENTO / Clasificación / Hora
Título Noticia
Categoría
Lorem ipsum dolor sit amet, consectetur adipis-
cing elit. Etiam accumsan faucibus velit, fermen-
tum pretium nisi hendrerit at. Suspendisse non
mi ac arcu tristique. Leer Más...
Título Noticia
Categoría
Lorem ipsum dolor sit amet, consectetur adipis-
cing elit. Etiam accumsan faucibus velit, fermen-
tum pretium nisi hendrerit at. Suspendisse non
mi ac arcu tristique. Leer Más...
Título Noticia
Categoría
Lorem ipsum dolor sit amet, consectetur adipis-
cing elit. Etiam accumsan faucibus velit, fermen-
tum pretium nisi hendrerit at. Suspendisse non
mi ac arcu tristique. Leer Más...
Título Noticia
Categoría
Lorem ipsum dolor sit amet, consectetur adipis-
cing elit. Etiam accumsan faucibus velit, fermen-
tum pretium nisi hendrerit at. Suspendisse non
mi ac arcu tristique. Leer Más...
CONTACTO
Dirección:
Fono:
Correo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
(XX)XXXXXX
loremipsum@mail.com
ENLACE#1
ENLACE#2
ENLACE#3
ENLACE#4
15
16. Nuevas Propuestas: Wireframes navegables
datos y cambios basados en los resultados
de la prueba de usabilidad
PONTIFICIA
UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH
Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales
Quiénes Somos
Qué Hacemos
Estructura Organizacional
Campus
Directorio
Gran Cancillería
Pastoral
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan faucibus velit, fermentum pretium nisi hendre-
rit at. Suspendisse non mi ac arcu tristique imperdiet id nec massa. Integer id urna sagittis, dapibus sapien ut, sollicitu-
din mauris. Integer ultrices varius felis, ac eleifend dolor suscipit in. Phasellus nec velit sit amet eros laoreet cursus et
tristique sapien. Maecenas viverra adipiscing orci, ut tincidunt purus blandit sed. Morbi elementum imperdiet quam eu
scelerisque. Aenean cursus ac ante nec pellentesque. Aenean et augue vitae risus blandit imperdiet. Integer varius
pulvinar arcu, ut eleifend nunc. Suspendisse vel magna ligula. Aenean tristique consectetur lacus. Etiam facilisis ligula
nulla, ac viverra nunc venenatis ac. Nulla eget convallis est. Quisque sed quam ut elit tristique viverra et nec magna.
Morbi aliquam nunc sed odio rutrum volutpat.
CONTACTO
Dirección:
Fono:
Correo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
(XX)XXXXXX
loremipsum@mail.com
ENLACE#1
ENLACE#2
ENLACE#3
ENLACE#4
Wireframes
Escritorio
16
17. Nuevas Propuestas: Wireframes navegables
datos y cambios basados en los resultados
de la prueba de usabilidad
PONTIFICIA
UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH
Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales
Premio de Honor Rector Rubén Castro
Premio de Honor Puntajes Regionales
Requisitos
Postulante
Aranceles
Becas Beca de Intercambio
Beca PUCV
Premio al Ingreso Destacado
Beca Isabel Caces de Brown
CONTACTO
Dirección:
Fono:
Correo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
(XX)XXXXXX
loremipsum@mail.com
ENLACE#1
ENLACE#2
ENLACE#3
ENLACE#4
Lorem ipsum
PREMIO DE HONOR RECTOR RUBÉN CASTRO
Es un beneficio de asignación automática para estudiantes que obtienen puntajes nacionales en la PSU. Consiste en
la exención del pago del Arancel Anual y del Derecho de Inscripción por el periodo oficial de duración de la carrera.
Adicionalmente, los estudiantes que obtengan este Premio y que provengan de una región distinta a la de Valparaí-
so, recibirán una beca de alimentación y una ayuda monetaria para el pago de alojamiento en la zona.
La renovación de este beneficio es anual, y requiere la aprobación de un 60% de avance académico en primer año y
un 70% en curso superior.
Requisitos
- Ser alumno egresado de Enseñanza Media de la promoción 2012.
- Obtener puntaje máximo nacional en alguna de las Pruebas de Selección Universitaria (Lenguaje, Matemáticas,
Ciencias, Historia y Ciencias Sociales)
En caso de que el estudiante reciba ayuda para el pago de su Arancel Anual a través de las Becas que entrega el
Ministerio de Educación, este beneficio cubrirá la diferencia entre dicho financiamiento y el Arancel Anual de la
carrera.
Wireframes
Escritorio
17
18. Nuevas Propuestas: Wireframes navegables
datos y cambios basados en los resultados
de la prueba de usabilidad
Facultad de Arquitectura y Urbanismo
DECANO
Patricio Caraves Silva
SECRETARIO DE FACULTAD
David Luza Cornejo
DIRECCIÓN
Av. Matta Nº 12, Recreo, Viña del Mar. Chile
PORTAL EAD
www.ead.pucv.cl
PORTAL INSTITUTO
www.arte.ucv.cl
FONO
(56) (32) 2274401
EMAIL
decanoarq@ucv.cl
PONTIFICIA
UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH
Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales
Arquitectura
Diseño Gráfico
Diseño Industrial
Video Facultad Arquitectura y Urbanismo
CONTACTO
Dirección:
Fono:
Correo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
(XX)XXXXXX
loremipsum@mail.com
ENLACE#1
ENLACE#2
ENLACE#3
ENLACE#4
Facultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de Agronomía
Facultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura yFacultad de Arquitectura y
UrbanismoUrbanismoUrbanismoUrbanismoUrbanismo
Facultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de Ciencias
Facultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de CienciasFacultad de Ciencias
Económicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y AdministrativasEconómicas y Administrativas
Facultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de DerechoFacultad de Derecho
Facultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de FilosofíaFacultad de Filosofía
Facultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de IngenieríaFacultad de Ingeniería
Wireframes
Escritorio
18
19. Nuevas Propuestas: Wireframes navegables
datos y cambios basados en los resultados
de la prueba de usabilidad
Navegador Académico
RUT
Contraseña
Navegador Académico
pucv.cl
¿Olvidó su contraseña?
PONTIFICIA
UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH
Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales
INGRESAR
Matrícula en Línea
Carrera Tecnología Médica.
Escuela de Ingeniería Civil.
Escuela de Ingeniería en Transporte.
Escuela de Ingeniería Mecánica.
Escuela de Periodismo.
Ingresa acá.
Pregrado: Más Información
Matrícula en LíneaMatrícula en LíneaMatrícula en LíneaMatrícula en Línea
CONTACTO
Dirección:
Fono:
Correo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit
(XX)XXXXXX
loremipsum@mail.com
ENLACE#1
ENLACE#2
ENLACE#3
ENLACE#4
Navegador AcadémicoNavegador AcadémicoNavegador Académico
Aula VirtualAula Virtual
Carrera Tecnología Médica.Carrera Tecnología Médica.
Escuela de Ingeniería Civil.Escuela de Ingeniería Civil.
Carrera Tecnología Médica.Carrera Tecnología Médica.
Escuela de Ingeniería Civil.Escuela de Ingeniería Civil.
BibliotecaBiblioteca
Certificados y LegalizacionesCertificados y Legalizaciones
Dirección de ProcesosDirección de ProcesosCarrera Tecnología Médica.Carrera Tecnología Médica.Dirección de ProcesosCarrera Tecnología Médica.Carrera Tecnología Médica.
DocentesDocentes
Wireframes
Escritorio
19