UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583...

38
Dia de la Usabilidad 2012 8 de Noviembre 2012

description

Afrontar el rediseño de un sitio web de una reconocida universidad de Colombia fue un reto que comprendía tener en cuenta la opinion y requerimientos de estudiantes, profesores, egresados, decanos, directores de programa, jefes de mercadeo y el mismo rector. En esta conferencia se compartirá el proceso de arquitectura de información desarrollado durante 5 meses con la aplicación de diversos métodos para poder entender los requerimientos, expectativas y contextos de los usuarios.

Transcript of UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583...

Page 1: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Dia de la Usabilidad 2012 8 de Noviembre 2012

Page 2: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

ü Existaya.com es una Agencia de Marketing Digital expertos en el diseño y desarrollo de estrategias de mercadeo, publicidad y comunicación por Internet.

ü 9 años de experiencia y más de 500 campañas de mercadeo en Internet ejecutadas, Miembros IAB Colombia.

ü 550+ Clientes entre Pymes, Grandes Empresas y Grandes Marcas.

Quiénes Somos

Page 3: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Algunos Clientes

Page 4: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Un Chicharron: Usabilidad y arquitectura de información con la opinión y requerimientos de 583 usuarios.

Page 5: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

El Chicharron:

Diseño  y  Arquitectura  no  

unificada  

Page 6: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

El Chicharron:

Alta  diversidad  de  usuarios  y  muchos  clientes  internos:  Rector,  Decanos,  Dir.  Programas,  Profesores,  Estudiantes,  Egresados,  Empleados  

Page 7: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

¿Qué hacer?

Page 8: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

3 Importantes Objetivos definen el proyecto de Rediseño de Icesi.Edu.Co:

Objetivos a lograr

Comunicación  y  Diseño  Unificado  

Usable  de  fácil  navegación  

Concenso  y  Aceptación  

1

2

3

Page 9: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Análisis de Usuarios Principales Segmentos, necesidades y requerimientos

Page 10: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Análisis de Usuarios Perfiles de usurios del sitio www.icesi.edu.co

Clientes  Internos  

Usuarios  Primarios  

Decanos,  Dir.  Dptos.  y  Dir.  Programas  

Áreas  AdministraDvos  

Estudiantes  

Profesores  

Aspirantes  

Pregrado  y  Posgrado  

Primario

Secundario

Egresados   Secundario

Page 11: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Perfiles de Usuarios Uso actual del sitio Web (Google Analytics)

Aspirantes Pregrado

Estudiantes Pregrado

Estudiantes Postgrado Profesores

53% 6% 5%

Aspirantes Posgrado

7 % 10%

Page 12: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Perfiles de Usuarios Principales Actividades (Google Analytics)

- Matrícula Académica

- Horarios por Programas - Notas Parciales - Moodle - Prerequisitos

- Calendario Académico - Constancia de Matrícula - Matrícula Académica - Asistencia - Balance Académico

- Listado de Profesores - Actualización de Datos - Listado de Clase de - Pregrado (normal)

- Solicitar Formulario de Inscripción - Proceso y Requisito de Admisión - Fechas de Admisiones - Valores de Matrícula por carrera - Becas y Financiación - Programas a Pregrado

Aspirante Pregrado

Estudiante Pregrado

Profesores

Estudiante Posgrado

Page 13: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

La encuesta estuvo activa durante 10 días en los cuales se recibieron 550 respuestas. La encuesta se envío a las bases de datos de todos los estudiantes, egresados y profesores de la Universidad Icesi. El mayor porcentaje de participación, con un 53% fue de los egresados.

Encuesta Estudiantes, Profesores y Egresados

Page 14: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Muy Importante No=cias  sobre  la  Universidad  (Eventos,  entorno  estudianDl,  etc.)   18%  

Importante Indiferente

21%   15%  Información  Académica  (Cursos,  Horarios,  Notas)   1%   5%   34%  Admisiones  y  Registro  (Requisitos,  Cancelaciones,  Adiciones)   4%   14%   21%  

Bienestar  Estudian=l  (AcDvidades  lúdicas)   7%   20%   12%  

Biblioteca  (Libros,  Bases  de  Datos,  etc.)   8%   17%   15%  Facultad  (Publicaciones,  Grupos  de  InvesDgación,  etc.)   3%   15%   21%  Programas  internacionales  (Convenios  con  Universidades  en  el  Exterior)   4%   14%   22%  Oportunidades  de  emprendimiento  y  espíritu  empresarial.   7%   16%   16%  

Estudiantes

Principales Necesidades Información y Contenidos

3

3

2

1

4

Page 15: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Permanente

Acceder  a  Moodle  para  Consultar  cursos,  tareas   4%  

Algunas Veces

Pocas Veces

5%   31%  Realizar  búsquedas  en  la  biblioteca  (Libros,  Bases  de  datos,  etc.)   17%   16%   7%  Ac=vidades  de  Registro  (CerDficados,  Cancelaciones,  Adiciones,  etc.)   16%   20%   4%  Generar  Reportes  Académicos  (Notas,  Balance  Académico,  Horarios)   7%   19%   13%  Inscripción  en  Ac=vidades  de  Bienestar  Universitario   26%   11%   2%  Acceso  a  la  Bolsa  de  Empleo  y  oportunidades  laborales   31%   5%   3%  

Estudiantes

Principales Actividades Tareas realizadas dentro del sitio Web

3

2

1

4

Page 16: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Muy Importante No=cias  sobre  la  Universidad  (Eventos,  entorno  estudianDl,  etc.)   1%  

Importante Indiferente

3%   3%  Información  Académica  (Cursos,  Horarios,  Notas)   1%   3%   3%  Trámites  de  Nómina,  Cer=ficados  Laborales  y  desprendibles  de  pago   1%   3%   3%  Servicios  en  línea  (Moodle,  Reserva  de  espacios,  Soporte,  entre  otros)   0%   2%   5%  

Biblioteca  (Libros,  Bases  de  Datos,  etc.)   0%   1%   6%  

Profesores

Principales Necesidades Información y Contenidos

1

2

3

Page 17: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Muy Importante No=cias  Egresados  (Eventos,  NoDcias,  Servicios,  etc.)   1%  

Importante Indiferente

24%   28%  Bolsa  de  Empleo  y  oportunidades  laborales   2%   10%   41%  Programas  de  posgrado  (Maestrías,  Especializaciones  y  Diplomados)   2%   23%   29%  Trámites  y  Cer=ficados  de  Estudio  y  Notas,  etc.   15%   26%   13%  

Biblioteca  (Libros,  Bases  de  Datos,  etc.)   12%   28%   13%  Programas  internacionales  (Convenios  con  Universidades  en  el  Exterior)   3%   23%   27%  Oportunidades  de  emprendimiento  y  espíritu  empresarial.   5%   19%   30%  

Egresados

Principales Necesidades Información y Contenidos

5

3

2

1

4

Page 18: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Canales de Actualización

Page 19: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

ü  Unificación / Uniformidad. ü  Mas Interactividad. ü  Información precisa y

actualizada. ü  Noticias y eventos (visibles y

actualizados) ü  Pagos en línea (certificados,

matrículas, cuotas) ü  Utilizar más videos. ü  Mapa de Ubicación (ojala

virtual) ü  Mejorar acceso reservas,

cuotas de impresión, salas de computo.

ü  Vinculada con redes sociales. ü  Ayuda en línea (chat) ü  Mejorar disponibilidad de

Moodle. ü  Muchos clics para llegar al

destino ü  Versión para móviles. ü  Versión en Inglés completa. ü  Mejorar sección de Notas. ü  Eventos por facultad. ü  Info de publicaciones y grupos de

Investigación.

Requerimientos y Comentarios Estudiantes, Profesores y Egresados

Page 20: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Encuesta y Entrevista Decanos y Directores de programas

Page 21: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Entrevistas y Encuesta Decanos, Direcotores Programas y Adminstrativos

Entrevista  De

cano

s   Ficha  Técnica    Metodología:  Encuesta  guiada  a  través  de  entrevista  personal.  6  Encuestas  procesadas.    (1  Rector  y  5  decanos)       Encuesta  Dir.  Prog.  

Ficha  Técnica    Metodología:  Encuesta  electrónica  12  ParDcipantes.  

Page 22: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Calificación Diseño Gráfico

El 60% de los encuestados tiene una opinión favorable respecto al aspecto visual sin embargo hay un 40%, nada despreciable que opina que es deficiente . Factor importante a considerar pues se aprecia inconformidad.

Decanos

Page 23: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Directores de Programa Decanos

Dis

eño

Con

teni

dos

Acceso  a  contenidos  de  calidad,  actualizados  en  las  temporalidades  de  las  áreas  afines  en  temas  legales  y  de  impuestos.  

1.  Mejorar  la  estructuración,  generación  y  publicación  de  contenidos  

2.  Orientar  correctamente  los  contenidos  a  los  públicos  que  sirve  cada  página  

3.  Actualización  fácil  y  rápida  de  contenidos  4.  Generar  y  publicar  contenidos  audiovisuales  

(Videos,  Infografas,  etc.)  5.  Incluir  contenidos  en  Ingles  (Traducciones  de  los  

siDos)  6.  Incluir  herramientas  o  aplicaciones  de  redes  

sociales  que  permitan  interactuar  a  los  estudiantes.  

 

1.  Mantener  una  coherencia  en  línea  gráfica  con  el  diseño  general  de  Icesi.  

2.  Mejorar  elementos  de  diseño,  opDmización  de  la  usabilidad  y  navegación.  

3.  Diseños  ajustados  a  los  públicos  que  informan.          

1.  Unificar  idenDdad  y  línea  gráfica  diseño  general  icesi  y  programas.  

2.  Diseño  frescos,  juveniles  y  modernos.  3.  Diseño  impactante  que  genere  una  buena  

experiencia  estéDca.  4.  Libertad  de  cada  programa  en  generar  cada  uno  el  

diseño  de  la  página  Web    

1.  Versión  en  ingles  de  los  programas  2.  Incluir  nuevas  fotos  y  actualizar  los  videos  de  los  

programas.  3.  Orientar  los  contenidos  hacia  los  aspirantes  

idenDficando  cuales  son  los  contenidos  relevantes  4.  Disminuir  la  canDdad  de  contenidos  en  texto  e  

incluir  videos  cortos.  

Resumen Requerimientos Principales sugerencias y necesiaddes

Page 24: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

•  Se  revisaron  aproximadamente  250  páginas  de  universidades  nacionales  e  internacionales.  

•  Se  hizo  énfasis  en  el  Top  100  internacional.  •  Se  destacan  las  universidades  americanas  

por  sus  diseños  orientados  a  la  facilidad  de  uso.  

•  Se  capturaron  los  elementos  más  interesantes  referentes  a:  –  Usabilidad  /  Facilidad  –  Diseño  –  Dinamismo  /  InteracDvidad    

Benchmarking Análisis de buenas prácticas en la Web

Page 25: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Wake Forest University (USA)

http://www.wfu.edu/

Page 26: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Wake Forest University (USA)

http://www.wfu.edu/

Observaciones  de  diseño   Observaciones  de  organización  de  la  información  (usabilidad):      

Observaciones  de  herramientas  e  interac=vidad:      

• Banner  grande,  llamaDvo,  no  muy  ancho  • Organización  por  columnas  apoyadas  con  pequeñas  fotografas  

• Menús  organizados  por  perfiles  que  se  resalta  según  el  mouse  over      

Comentarios  Generales:  

Muy  organizada,  menús  superiores  según  perfil  del  visitante,  buena  proporción  del  banner.  Relevancia  a  los  eventos  y  noDcias  

Page 27: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

University of Nebraska-Lincoln (USA)

http://www.unl.edu/

Page 28: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

University of Nebraska-Lincoln (USA)

http://www.unl.edu/

Observaciones  de  diseño   Observaciones  de  organización  de  la  información  (usabilidad):      

Observaciones  de  herramientas  e  interac=vidad:      

• Banner  con  videos  • Organización  por  columnas  apoyadas  con  pequeñas  fotografas  

• Menús  organizados  por  perfiles  • Menús  expandibles  para  facilitar  la  navegación  • Acceso  rápido  a  eventos,  directorio,  clima  y  cámaras      

• Cámaras  en  vivo  • Redes  sociales  • Buscador  de  personas  • Canal  en  iTunes  

Comentarios  Generales:  

Menús  expandibles,  segmentada  por  perfiles.  Fácil  acceso  información.  Buena  diagramación  y  tamaño  del  banner  

Page 29: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Benchmarking Universidades Nacionales e Internacionales

Page 30: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Consideraciones: Se  tuvieron  en  cuenta  las  opiniones  y  recomendaciones  de  los  estudiantes,  egresados,  profesores,  directores  y  decanos  respecto  a  la  página  principal  de  Ia  Universidad  Icesi.

Uniendo todos los puntos:

Benchmarking Usuarios Estadísticas Estructura Diagrama Diseños

Page 31: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

Wireframe Home

Elementos  Considerados:  ü  Encabezado  Limpio  ü  Menú  Desplegable  ü  Banner  +  Info  ü  Accesos  Directos  a  secciones  de  uso  

frecuente  ü  Sección  de  NoDcias  ü  Sección  de  Eventos  ü  Redes  Sociales  ü  Banners  Secciones  Destacados  

Page 32: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

El Resultado

Page 33: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS
Page 34: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS
Page 35: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS
Page 36: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS
Page 37: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS
Page 38: UN CHICHARRÓN: USABILIDAD Y ARQUITECTURA DE INFORMACIÓN CON LA OPINIÓN Y REQUERIMIENTOS DE 583 USUARIOS

¿Preguntas?