✔
Introducción al curso
Todo lo que aprenderás sobre arquitectura de la información
¿Qué es la Arquitectura de la Información?
Antecedentes de la Arquitectura de la Información
¿Qué es la Arquitectura de la Información?
Relación entre contenido, contexto y usuarios
Errores típicos al construir una Arquitectura de Información
Reto: Rediseñar una interfaz
¿Cómo ayudar al usuario a encontrar el contenido que busca?
Sistemas de organización
Sistemas de navegación
Sistemas de rotulado y sistemas de búsqueda
¿Cómo construir la Arquitectura de Información ?
Inventarios de contenidos
Card sorting
Sitemap
Proyecto: Rediseño de un mapa de sitio
Wireflows
Proyecto: Creación de Wireflow
Wireframes
Ejemplos de Wireframes
Proyecto: Rediseño de una pantalla
Wayfinding y breadcrumbs
Vocabularios controlados
¿Cómo diseñar la experiencia al buscar y extraer información?
Findability
Diseña la información
Prueba de usabilidad
Tree testing
Proyecto: Evalúa el proyecto con prueba de usabilidad
Tips y Recomendaciones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
María Isabel Murillo
Una vez hemos organizado nuestro contenido mediante un inventario de contenidos y un ejercicio de card sorting, haremos un site map, el cual nos ayudará a mostrar la agrupación, clasificación y jerarquía de nuestro contenido.
Un site map puede ser dibujado de manera sencilla (tipo organigrama), o más compleja (diagrama isométrico), depende de la complejidad y del volumen del contenido.
Aportes 33
Preguntas 17
✔
Me gustaría compartir con ustedes el proceso desarrollado para el rediseño del mapa de navegación de Bavaria
Proceso y diseño de Sitemap negocio Bavaria (empresa cervecera)
SiteMap Actual
**Proceso Card sorting reorganizar secciones **
**Resultado SiteMap Rediseñado **
Uno de los mejores sitios que conozco para hacer un sitemap es https://whimsical.co. Su plan gratuito es muy bueno, espero les sirva un monton.
En este ejemplo:
-El naranja fuerte el primer nivel de navegación
-En amarillo claro el segundo nivel o “sub navegación”, luego
-En transparente con borde naranja es donde se muestra la información, de tras unas líneas que nos llevan a donde se almacena la información y trae lo que necesita según los campos seleccionados.
-No olvidar representar, que significa cada cuadro que pongamos en nuestra pantalla.
Ejemplo: el naranja es para las secciones del primer nivel
Los sitemap en modo isometrico los hacen en algún programa de diseño o con algún programa especializado?, se ve bastante bueno lo que muestran.
Les recomiendo utilizar realtimeboard.com ahora se llama miro
Lucidchart, Coogle, Miro. Son las herramientas que yo conozco y he usado para crear los sitemaps.
¿ Qué herramienta habrá utilizado la profesora para hacer el Site Map ?
Tip de arquitectura de información: Sospechar de mapas que son mucho más anchos que profundos o viceversa (es decir, parecen rectángulos alargados). Lo ideal es que los mapas de navegación sean proporcionales a nivel de ancho y profundidad.
PFFFFFF
No me quiero imaginar el tiempo que se demoraron en hacer ese mapa.
Gran esfuerzo y se entiende el como hacer sitemaps. Me pareció muy interesante el hecho de que yo puedo llegar a un contenido por 2 ramas o categorías diferentes
A todos los que compartieron una herramienta para hacer sitemaps 💚
Yo utilizo Bizagi (https://www.bizagi.com/es) para crear el sitemap y también para el análisis de procesos BPMN.
¿Cuando es necesario trabajar en nuestro site map?
Una vez hemos organizado nuestro contenido mediante un inventario de contenidos y un ejercicio de card sorting, haremos un site map, el cual nos ayudará a mostrar la agrupación, clasificación y jerarquía de nuestro contenido.
Este sitio es relativamente nuevo y es el que más veo que usan los diseñadores UI para crear sitemaps. 👇🏻
https://octopus.do/sitemap
Gracias por el tip sobre la proporción del sitio en vertical y en horizontal, simple pero muy cierto
¿Me gustaría saber si todas las agencias y diseñadores ponen en practica toda estas practicas?
Un site map puede ser dibujado de manera sencilla (tipo organigrama), o más compleja (diagrama isométrico), depende de la complejidad y del volumen del contenido.
Sitemap ejemplo
Gracias
Jaja Bogotá no es frio
Les recomiendo el siguiente sitio para crear sitemaps es gratis y online:
https://lucid.app/
Que profesional es esta profe Dios
Tip de arquitectura de información para Sitemaps
Ej. Sitemap en isómetrico de proyecto para sitio oficial de turismo en Colombia.
Se recomienda hacer los sitemaps a con una vista isométrica para entender la profundidad de cada contenido del sitio.
En el ejemplo de María Isabel, se utilizan los criterios de las primeras clases: tener en cuenta el contexto del usuario y del negocio; por una parte, se está resolviendo la necesidad del negocio mostrando de manera eficiente las regiones para hacer turismo y sus actividades; y por otra parte, se está teniendo en cuenta lo que necesita encontrar un usuario cuando busca un destino turístico.
Muy bueno ese último tip ya que podemos creer que involucramos toda la información pero no correctamente.
Excelente información sobre los mapa de sitios que muestra la agrupación, clasificación y jerarquía.
¿El mapa de sitio es para el equipo o también se muestra al cliente?
Por ejemplo, si la agencia de turismo contratara a una empresa de desarrollo de paginas web, se le mostraría al cliente el sitemap?
Una vez sepamos el contenido que se va a quedar dentro de nuestro portal podemos realizar un sitemap o mapa de sitio. Aquí podremos visualizar la agrupación, clasificación y jerarquía de nuestro contenido. Esto nos ayudará bastante a organizar nuestro contenido para poder mostrar el contenido de manera oportunidad y organizada al usuario.
importante la recomendacion final.! hay que reconsiderar la Arquitectura de la Informacion en caso no exista proporcion adecuada entre el ancho y la profundidad del sitemap
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?