Rotulado y cardsorting

2,228 views

Published on

Presentación preparada para el VI Seminario Chileno de Arquitectura de Información, Santiago, 2010

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,228
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Rotulado y cardsorting

  1. 1. Taller de Rotulado y Alejandro Morales Vargas Jefe del Área Multimedios del SISIB, Universidad de Chile Coordinador académico del Diplomado en Periodismo Digital y Gestión de Medios en Internet, U. de Chile VI Seminario Chileno de Arquitectura de Información
  2. 2. Una imagen vale más que mil palabras
  3. 3. palabras, tan sólo palabras
  4. 4. Mil palabras valen más que una imagen
  5. 5. Las palabras mueven la web palabras, tan sólo palabras
  6. 6. Rótulo: Término que representa un trozo mayor de información
  7. 7. Tipos de rótulos Textual Icónico Mixto
  8. 8. Aplicaciones de rótulos • Menús de navegación
  9. 9. Aplicaciones de rótulos • Enlaces contextuales
  10. 10. Aplicaciones de rótulos • Titulares
  11. 11. Aplicaciones de rótulos • Botones de aplicación
  12. 12. Un buen rótulo debe ser • Compresible • Autoexplicativo • Unívoco • Directo • Sucinto • Autónomo • Universal
  13. 13. Algunos ejemplos • Compresible
  14. 14. Un buen rótulo debe ser • Autoexplicativo
  15. 15. Un buen rótulo debe ser • Unívoco
  16. 16. Un buen rótulo debe ser • Directo
  17. 17. Un buen rótulo debe ser • Sucinto
  18. 18. Un buen rótulo debe ser • Autónomo
  19. 19. Un buen rótulo debe ser • Universal
  20. 20. Otras condiciones imprescindibles • Específico • Consistente • Estándar • Indexable • Accesible • Útil • Usable
  21. 21. Un caso práctico: Agendas de actividades de portales web universitarios ¿Cómo llamarle a cada categoría? Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile Benchmarking: Nixa Espínola Bustamante
  22. 22. Cantidad de contenidos ingresados por categoría desde el año 2005 a la Agenda de Actividades del portal web Uchile.cl Conferencia, Charla: 752 Encuentro: 487 Concierto: 407 Seminario: 320 Ceremonia oficial: 261 Exposición: 216 Presentación libro: 189 Curso, Taller: 173 Teatro: 136 Inauguración: 109 Aniversario: 104 Danza: 89 Homenaje, Premios: 79 Cine, Video: 60 Sesión: 47 Deportes: 38 Congreso: 34 Extensión académica: 25 Simposio: 16 Literatura: 10 Visita oficial: 9 Escuela de verano: 3 Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  23. 23. El menú de navegación de la agenda UNAM es un listado de vínculos que dan acceso a sitios autónomos, los cuales poseen una navegación y gráfica propia. Universidad Nacional Autónoma de México http://www.unam.mx/interna.html?n=0&m=8 Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  24. 24. La agenda del Instituto Tecnológico de Monterrey es híbrido que combina en su navegación principal, cuatro criterios: 1. Temático (tipo de actividad) 2. Áreas de conocimiento 3. Público objetivo 4. Organigrama El menú de navegación queda compuesto por: 1. Todos los eventos 2. Arte y cultura 3. Aspirantes 4. Calendario académico 5. Deportes 6. Educación continua 7. Eventos estudiantiles 8. Eventos institucionales 9. Exatec 10. Padres de familia 11. Profesores Además brinda una navegación auxiliar basada en calendario (navegación por fechas). Instituto Tecnológico de Monterrey http://calendar.activedatax.com/itesm Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  25. 25. La agenda de la Universidad de Buenos Aires orienta su navegación a tipo de actividades, fecha, popularidad y áreas de conocimiento. El menú de navegación queda compuesto por: 1. Cultura 1. Artes visuales 2. Cine y Video 3. Danza 4. Letras 5. Música 6. Teatro 2. Conferencia / Jornadas 1. Académicos 2. Investigación 3. Extensión 3. Cursos / Seminarios 1. Académicos 2. Extensión universitaria 3. Investigación 4. Posgrados 4. Calendarios académicos 1. Ciclo Básico común 2. Facultades 3. UBAXXI 5. Otros 1. Actos institucionales 2. Deportes 3. Turismo Universidad de Buenos Aires http://www.uba.ar/comunicacion/contenidosa.php
  26. 26. La Universidad Nacional de la Plata, expone su calendario de actividades como un widget que simplemente recoge fecha y título de la actividad que se realiza, por lo que su navegación se restringe a un recorrido por calendario. Universidad Nacional de la Plata http://www.unlp.edu.ar/ Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  27. 27. La Universidad Autónoma de Barcelona basa la navegación de su agenda en el calendario. Sin embargo, también presenta un menú desplegable con las opciones ordenadas en un híbrido que considera: tipo de actividad, área de conocimiento, publico objetivo y tarea. Universidad Autónoma de Barcelona http://www.uab.es/servlet/Satellite/AGENDA- 1089963374310.html El menú de navegación queda compuesto por: 1. Todas las actividades 2. Cultura 3. Deportes 4. Institucional 5. Académicos 6. Calendario académico 7. Asociaciones 8. Salud 9. Convocatorias 10. Nominaciones 11. Encuentros y reuniones 12. Año de la física 13. Estudiar 14. Investigar 15. Vivir 16. Año de la evolución 17. Economía 18. Informática 19. Área de personal 20. Medio Ambiente
  28. 28. 1. Todos los eventos 2. Arte y cultura 3. Aspirantes 4. Calendario académico 5. Deportes 6. Educación continua 7. Eventos estudiantiles 8. Eventos institucionales 9. Exatec 10. Padres de familia 11. Profesores Tec. Monterrey 1. Cultura 1. Artes visuales 2. Cine y Video 3. Danza 4. Letras 5. Música 6. Teatro 2. Conferencia / Jornadas 1. Académicos 2. Investigación 3. Extensión 3. Cursos / Seminarios 1. Académicos 2. Extensión universitaria 3. Investigación 4. Posgrados 4. Calendarios académicos 1. Ciclo Básico común 2. Facultades 3. UBAXXI 5. Otros 1. Actos institucionales 2. Deportes 3. Turismo UBs.As. 1. Todas las actividades 2. Cultura 3. Deportes 4. Institucional 5. Académicos 6. Calendario académico 7. Asociaciones 8. Salud 9. Convocatorias 10. Nominaciones 11. Encuentros y reuniones 12. Año de la física 13. Estudiar 14. Investigar 15. Vivir 16. Año de la evolución 17. Economía 18. Informática 19. Área de personal 20. Medio Ambiente 21. Investigación 22. Seguridad 23. Mantenimiento y averías 24. Centros docentes 25. Año de la computación 26. Idiomas 1. Todas las categorías 2. Actividades religiosas 3. Actividades estudiantes 4. Artes visuales 5. Cine 6. Congresos, seminarios, conferencias 7. Exposiciones 8. Música 9. Niños 10. Teatro 11. Ceremonias 12. Otros UAB PUC 1. Académico 2. Artístico 3. Charla 4. Conferencia 5. Congreso 6. Deportivo 7. Feria 8. Foro 9. Otro 10. Seminario 11. Simposio 12. Todos USM Tabla comparativa: menú de navegación de agendas por universidades Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  29. 29. 1. Aniversario 2. Ceremonia Oficial 3. Cine, Video 4. Congreso 5. Concierto 6. Conferencia, Charla 7. Curso, Taller 8. Danza 9. Deportes 10. Encuentro 11. Escuela de Verano 12. Exposición 13. Extensión académica 14. Homenaje, Premios 15. Inauguración 16. Literatura 17. Presentación Libro 18. Seminario 19. Simposio 20. Teatro 21. Visita Oficial 22. Sesión . 1. Seminarios y conferencias 2. Ceremonias 3. Presentaciones 4. Encuentros y reuniones 5. Exposiciones 6. Teatro, música y danza 7. Cine y video 8. Deportes Menú de navegación de agenda portal Uchile.cl Navegación actual1 Propuesta vigente2 Nueva propuesta.013 1. Todas las actividades 2. Seminarios /conferencias 3. Ceremonias 4. Cursos / Talleres 5. Reuniones • Artes / Letras • Deportes Nueva propuesta.024 1. Todas las actividades 2. Seminarios y conferencias 3. Ceremonias 4. Encuentros 5. Exposiciones 6. Música y danza 7. Teatro y cine 8. Deportes Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  30. 30. Conferencias y seminarios 1 Congreso Conferencia, Charla Seminario Simposio Ceremonias y presentaciones 4 Aniversario Ceremonia oficial Homenajes, Premios Inauguración Visita oficial Presentación libro Literatura Encuentros 2 Encuentro Sesión Música y danza 3 Concierto Danza Exposiciones 5 Exposición Teatro y cine 6 Teatro Cine, video Deportes 7 Deportes De acuerdo a la propuesta de etiquetas que se genera a partir del Benchmark y de las estadísticas relativas al número de visitas de las actuales categorías de la agenda se propone el siguiente rotulado y estructura de navegación. De tal forma las 22 categorías existentes actualmente en la Agenda del portal Uchile.cl, se reorganizarían en : Escuela de verano Extensión académica Curso, Taller Educación continua Reorganización de categorías de eventos Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile Todas0
  31. 31. ¿Cómo organizar los rótulos?
  32. 32. Esquemas de organización • Exactos – Alfabético – Cronológico – Geográfico • Ambiguos – Tema o materia – Tareas – Estilos • Híbridos
  33. 33. Esquemas de organización • Taxonomía Reino > Tipo > Clase > Orden > Familia > Género > Especie • Polijerarquía Artes > Literatura > Poesía > Nicanor Parra Ciencias > Física > Física Teórica > Nicanor Parra • Clasificación facetada Búsqueda de vinos por Tipo / Cepa / Región / Precio / Ranking • Folcksonomías Javier Velasco Martin Apunte de clase: Diploma en Periodismo Digital U. de Chile
  34. 34. Productos asociados • Estructura de contenidos • Mapa de navegación • Diagrama de interacción • Layout • Wireframe • Storyboard
  35. 35. Facultad de Derecho Propuesta de estructura contenidos Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile Wireframes: Pamela Aguayo y Roberto Escobar
  36. 36. Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  37. 37. Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  38. 38. Facultad de Derecho Propuesta de layout de portada Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  39. 39. Facultad de Derecho Portada (detallada)
  40. 40. Facultad de Derecho Wireframe subportada Facultad Sistema de Servicios de Información y Bibliotecas (SISIB) Universidad de Chile
  41. 41. ¿Y si incorporamos a nuestros usuarios en este proceso?
  42. 42. Card sorting: Técnica de categorización de contenidos centrada en el usuario
  43. 43. Fotos: Nixa Espínola
  44. 44. Permite establecer patrones sobre cómo los usuarios esperan encontrar un contenido o una funcionalidad
  45. 45. Fotos: Nixa Espínola
  46. 46. Tipos de card sorting • Abiertos: usuarios puede agrupar libremente los rótulos, en el número de conjuntos que ellos estimen conveniente, sin categorías previas • Cerrados: usuarios reciben categorías primarias previamente establecidas
  47. 47. Tipos de card sorting • Individual: un usuario representa a un perfil o segmento (entre 7 y 10) • Colectivo: un grupo variado de usuarios ordena las tarjetas por consenso (15, con 5 grupos de 3)
  48. 48. Fotos: Nixa Espínola
  49. 49. Pasos previos • Selección de contenido – Descriptores generales – Contenido en línea – Rótulos potenciales o futuros • Selección de los participantes – Específicos para el objetivo – Representativos del tipo de público – Heterogéneos entre sí • Preparación de las tarjetas – Entre 30 y no más de 100
  50. 50. Durante la ejecución • Comunicar claramente los objetivos • Establecer un clima de confianza • Aclarar que no hay sólo una manera correcta • Entregar el mazo desordenado • No intervenir ni presionar • Poner atención a las discusiones • Atender consultas • Registrar adecuadamente los resultados
  51. 51. Análisis de resultados • Búsqueda de patrones generales en los datos • Ayuda de software de análisis de clúster • Identificación de diferencias por: – rótulos que no se entendieron bien – contenidos que pueden pertenecer a más de una categoría – rutas alternativas para llegar a un mismo contenidos – discrepancias entre los participantes
  52. 52. Ventajas y desventajas • Simple • Económica • Probada • Fácil • Participativa • Poco profunda • Variable • No considera objetivos • Lenta de tabular
  53. 53. Ejercicio: Nube de rótulos
  54. 54. ¡Muchas gracias!

×