wireframes navegables, pruebas de usabilidad y propuestas

20
Wireframes navegables, pruebas de usabilidad y propuestas PUCV Integrantes Daniela Pardo / Maria Jesus Abarca / Nicol Valenzuela / Bernardo Catrilef / Christopher Fattori 1

Upload: maria-jesus-abarca

Post on 21-Jun-2015

358 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Wireframes navegables, pruebas de usabilidad y propuestas

Wireframes navegables, pruebas de usabilidad y propuestas

PUCV

IntegrantesDaniela Pardo / Maria Jesus Abarca / Nicol Valenzuela / Bernardo Catrilef / Christopher Fattori

1

Page 2: Wireframes navegables, pruebas de usabilidad y propuestas

Metodologías aplicadas

Wireframes navegables 1

Pruebas de usabilidad2

Análisis y gráficos de resultados3

Nuevas propuestas de wireframes4

2

Page 3: Wireframes navegables, pruebas de usabilidad y propuestas

Generación de wireframes navegables

Creación y aplicación de wireframes navegablesprogramas 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 adipiNunc 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 adipiNunc 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 adipiNunc 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 adipiNunc 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 eventoHora

Sala

07AGO

Título del eventoHora

Sala

09AGO

Título del eventoHora

Sala

13AGO

Título del eventoHora

Sala

15AGO

Título del eventoHora

Sala

22AGO

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 dolor Lorem ipsumdolor

Dirección

Fono

Lorem ipsumdolor

Lorem ipsumdolor A

B

3

Page 4: Wireframes navegables, pruebas de usabilidad y propuestas

Nombre: Andrés MedinaEdad: 18Ocupación: alumno de 4ºMedio, Liceo Industrial de San AntonioNivel de usuario: avanzado

Recorrido: Facultades y carreras, Admisión(requisitos y beneficios), Universidad.

Tareas asignadas por casoAlumno Escolar

(A,B) Tareas dadas:

1.1 Buscar la carrera que desea estudiar1.2 Encontrar los requisitos para ingresar y beneficios a los que puede acceder1.3 Buscar información de la universidad

4

Page 5: Wireframes navegables, pruebas de usabilidad y propuestas

Nombre: Anton SvarbicEdad: 21Ocupación: estudiante universitario Nivel de usuario: avanzado

Recorrido: Navegador académico,Intercambio,becas intercambio (beneficios y requesitos).

Tareas asignadas por casoAlumno Pregrado

(A,B) Tareas dadas:

2.1 Ingresar al sitio y buscar el navegador académico 2.2 Ingresar buscar información sobre intercambios2.3 Ingresar a las becas de intercambio (requisitos y beneficios)

5

Page 6: Wireframes navegables, pruebas de usabilidad y propuestas

Nombre: Elias Cristobal Olivares AmigoEdad: 27Ocupación: estudiante universitario egresado / trabajadorNivel de usuario: medio

Recorrido: Navegador académico, postgrados,becas postgrados (beneficios y requesitos).

Tareas asignadas por casoAlumno Postgrado

(A,B) Tareas dadas:

3.1 Ingresar al sitio y buscar el navegador académico3.2 Ingresar a los postgrados y buscar un magister de su interés3.3 Ingresar a las becas de postgrados

6

Page 7: Wireframes navegables, pruebas de usabilidad y propuestas

Actividad: Prueba de usabilidad

Prueba de usabilidad: Wireframes navegablesregistro de la actividad con el programaSilverback.

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)

2

1

3

7

Page 8: Wireframes navegables, pruebas de usabilidad y propuestas

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 di!culta 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

Page 9: Wireframes navegables, pruebas de usabilidad y propuestas

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

Page 10: Wireframes navegables, pruebas de usabilidad y propuestas

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

Page 11: Wireframes navegables, pruebas de usabilidad y propuestas

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

Page 12: Wireframes navegables, pruebas de usabilidad y propuestas

WireframesMóvil

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde la prueba de usabilidad

12

Page 13: Wireframes navegables, pruebas de usabilidad y propuestas

WireframesTablet

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde la prueba de usabilidad

13

Page 14: Wireframes navegables, pruebas de usabilidad y propuestas

WireframesTablet

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde la prueba de usabilidad

14

Page 15: Wireframes navegables, pruebas de usabilidad y propuestas

WireframesEscritorio

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde 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 IMAGENLorem ipsum dolor sit amet, consectetur adipiscing elit.

Calendario

TÍTULO DEL EVENTOClasi!caciónHora

07AGO

AgostoDo

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 EVENTOClasi!caciónHora

09AGO

TÍTULO DEL EVENTOClasi!caciónHora

13AGO

TÍTULO DEL EVENTOClasi!caciónHora

15AGO

TÍTULO DEL EVENTOClasi!caciónHora

22AGO

Navegador Académico

Intranet

EVENTO / Clasi!cación / Hora

Título NoticiaCategorí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 NoticiaCategorí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 NoticiaCategorí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 NoticiaCategorí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)[email protected]

ENLACE#1ENLACE#2ENLACE#3ENLACE#4

15

Page 16: Wireframes navegables, pruebas de usabilidad y propuestas

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde 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)[email protected]

ENLACE#1ENLACE#2ENLACE#3ENLACE#4

WireframesEscritorio

16

Page 17: Wireframes navegables, pruebas de usabilidad y propuestas

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde 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)[email protected]

ENLACE#1ENLACE#2ENLACE#3ENLACE#4

Lorem ipsum

PREMIO DE HONOR RECTOR RUBÉN CASTRO

Es un bene!cio 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 o!cial 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 bene!cio 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 bene!cio cubrirá la diferencia entre dicho !nanciamiento y el Arancel Anual de la carrera.

WireframesEscritorio

17

Page 18: Wireframes navegables, pruebas de usabilidad y propuestas

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde la prueba de usabilidad

Facultad de Arquitectura y Urbanismo

DECANO Patricio Caraves Silva

SECRETARIO DE FACULTADDavid Luza Cornejo

DIRECCIÓNAv. Matta Nº 12, Recreo, Viña del Mar. Chile

PORTAL EADwww.ead.pucv.cl

PORTAL INSTITUTOwww.arte.ucv.cl

FONO(56) (32) 2274401

[email protected]

PONTIFICIA UNIVERSIDAD CATÓLICA DE VALPARAÍSO ENGLISH

Inicio Universidad Admisión Facultades y Carreras Asuntos Académicos Relaciones Internacionales

Arquitectura

Diseño Grá!co

Diseño Industrial

Video Facultad Arquitectura y Urbanismo

CONTACTO

Dirección:Fono:Correo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit(XX)[email protected]

ENLACE#1ENLACE#2ENLACE#3ENLACE#4

Facultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de AgronomíaFacultad de Agronomía

Facultad de Arquitectura y Facultad de Arquitectura y Facultad de Arquitectura y Facultad de Arquitectura y Facultad de Arquitectura y Facultad de Arquitectura y Facultad de Arquitectura y Facultad 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 Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad de Ciencias Facultad 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

WireframesEscritorio

18

Page 19: Wireframes navegables, pruebas de usabilidad y propuestas

Nuevas Propuestas: Wireframes navegablesdatos y cambios basados en los resultadosde 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)[email protected]

ENLACE#1ENLACE#2ENLACE#3ENLACE#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

Certi!cados y LegalizacionesCerti!cados y Legalizaciones

Dirección de Procesos Dirección de Procesos Carrera Tecnología Médica.Carrera Tecnología Médica.Dirección de Procesos Carrera Tecnología Médica.Carrera Tecnología Médica.

DocentesDocentes

WireframesEscritorio

19

Page 20: Wireframes navegables, pruebas de usabilidad y propuestas

Gracias

20