El mapa web o sitemap es un diagrama o esquema que nos ayuda a ver el contenido general de una página o aplicación. Cada apartado del menú corresponde a una rama de la página principal y cada rama puede contener una o más páginas.
Hace muy poco una empresa del sector de la salud nos contactó porque querían mejorar su portal web, ya que tenían mucho contenido y muchos problemas para poder editarlos. En resumen, encontraban que la página en sí era un caos de información.
Lo primero en este caso fue tener una primera reunión con uno de sus representantes para conocernos un poco y charlar sobre su proyecto. Estas reuniones son un primer encuentro donde hablamos de su problema o necesidad y nosotros escuchamos y apuntamos los puntos más relevantes de su problemática. Finalizando la reunión mostramos un poco lo que hacemos y nuestro portafolio.
Todo esto sirve para poder ver la envergadura general del proyecto y empezar a redactar cada apartado de la web.
1.- Nos sirve para poder medir y evaluar un proyecto en general.
2.- Nos sirve para poder analizar cuanto contenido existe en cada apartado.
El siguiente ejemplo es lo que hicimos para este cliente. Y ahora te explicaré cómo hacerlo de manera ordenada, fácil y sencilla.
Los pasos son simples, pero hay que ser cuidadoso de no dejar nada fuera de nuestro análisis visual. Primero que nada y lo más importante es hacer una inspección general de los apartados o pantallas y seguir rigurosamente el orden en el que se van concatenando.
Un ejemplo sencillo es el siguiente:
En el ejemplo anterior podemos ver que home va precedido por el número 1, esto nos ayudará a futuro a poder hacer una inspección de cada sección dentro de cada página. En el Home nos encontramos con un menú que nos lleva a 3 apartados como 2. Nosotros, 3. Productos y 4. Contacto.
Y cómo se puede apreciar en el diagrama podemos ver que dentro del apartado de productos hay un submenu que nos lleva a 3 productos que enumeramos según el apartado del que nacen.
Para poder hacer este diagrama podemos utilizar diferentes herramientas gráficas, nosotros utilizamos Miro porque es colaborativa y fácil de usar. Una de sus particularidades es que viene con plantillas predefinidas que puedes utilizar para tus proyectos.
Ahora para poder hacer una inspección más profunda de una web es necesario poder hacer un análisis más profundo a las secciones de cada apartado.
El comportamiento de los usuarios que visitan una página web es la de leer el contenido de izquierda a derecha y de arriba hacia abajo. Y este comportamiento tiene una regla llamada el diagrama de Gutenberg.
El diagrama de Gutenberg (o la regla de Gutenberg) es un concepto que traza algo llamado lectura en gravedad. La lectura en gravedad describe un hábito de lectura en el mundo occidental: de izquierda a derecha, de arriba a abajo. El diagrama de Gutenberg divide una página en cuatro cuadrantes: el "Área visual primaria" en la parte superior izquierda, el "Área superficial fuerte" en la parte superior derecha, el "Área superficial débil" en la parte inferior izquierda y un "Área terminal" en la parte inferior derecha.
Tomando en consideración el Diagrama de Gutenberg nos ponemos manos a la obra. Empezaremos haciendo un barrido a todo el contenido del Home o Página de inicio.
En este caso obtendríamos el siguiente diagrama
¿Y todo esto para qué nos sirve? Para poder ir analizando más a fondo y hacer una mejor auditoría de la página web o servicio.
En definitiva, un sitemap o Mapa web es una herramienta básica que cualquier Diseñador UX debería tomar en consideración para afrontar cualquier proyecto. En nuestro caso la utilizamos para una auditoría, pero en cualquier caso podemos empezar un proyecto desde 0 con esta herramienta y así poder ir analizando los apartados que queramos desarrollar.
