Planificar y estructurar lo que vamos a publicar
Para que nuestros contenidos estén centrados en las necesidades de los usuarios, usemos la estructura de pirámide invertida y maquetemos los contenidos antes de publicarlos.
En esta página
Adoptá la estructura de pirámide invertida
Los especialistas en UX (experiencia de usuario), como Jakob Nielsen, recomiendan que un sitio web o un contenido específico tenga estructura de pirámide invertida: arriba la información más importante para el usuario, abajo la menos importante.
Los periodistas llaman pirámide invertida a la estructura de la noticia: primero un encabezado con lo más importante, luego lo que es menos importante o tiene detalles que no son fundamentales para comprender la nota.
Aplicado a un sitio web, implica que en su página de inicio o bienvenida (home o landing page) publique la información más importante del sitio organizada de mayor a menor importancia para el usuario:
- Nombre del sitio al cual entró el usuario (un organismo, un área del organismo, un programa del organismo, un tema de interés, que informamos en el título de la landing) y una breve presentación (que informamos en el resumen del contenido);
- Acceso a contenidos con los servicios o beneficios que los usuarios más consultan o necesitan en un momento del año;
- Acceso a contenidos con los programas, políticas o temas que los usuarios más consultan o necesitan en un momento del año;
- Acceso a las últimas noticias o novedades (si tiene);
- Información institucional (autoridad si es un área de gestión, datos de contacto, presencia en redes y plataformas, acceso a contenidos con la misión institucional y la estructura de la organización).
A medida que el usuario hace clic en los accesos, «baja» a información más detallada que la anterior. Si un contenido está a un clic de la home, es más importante para el usuario que si está a dos o tres clics.
Al organizar la información de ese modo, «armamos» una estructura de pirámide invertida en la que, a medida que el usuario «desciende» (hace más clics desde la home), la información es menos importante que la de arriba.
Como la página de libro tiene una estructura jerárquica (página «madre», páginas «hijas» y páginas «nietas»), también debemos considerarla con esta lógica de pirámide invertida.
Por último, cada contenido individual (un área, una página, una página de libro, un servicio) también debe estar estructurado como pirámide invertida:
- Nombre del contenido al cual entró el usuario (una página, una página de libro, una noticia, un webform) y una breve presentación, que informamos en el título y resumen del contenido;
- Primer párrafo del cuerpo de texto con la información más importante para el usuario;
- Párrafos con información menos importante (o que tiene más detalles) para el usuario que la que de arriba y más importante para el usuario que la de abajo;
- Párrafos con información menos importante (o que tiene más detalles) para el usuario que la que de arriba y más importante para el usuario que la de abajo;
- Párrafos con la información menos importante (o que tiene más detalles) para el usuario en todo este contenido.
Si el contenido de una página, página de libro o noticia es muy extenso, podés insertar subtítulos para presentarle al usuario su estructura de manera más clara.
Si organizamos los sitios y los contenidos de este modo, es más probable que los usuarios encuentren rápidamente lo que necesitan.
Maquetá la estructura antes de subirla al sitio
Un buen modo de probar un sitio o un contenido antes de subirlo a back.argentina.gob.ar (si tiene toda la información, si es intuitivo) es armar una maqueta gráfica.
La maqueta te ayuda a organizar ideas y hacer pruebas de concepto manuscritas o en un programa de diseño antes de redactar y crear un contenido.
El tiempo que dediques a armar la maqueta se va a ver compensado en el mediano y largo plazo con una menor necesidad de cambios de estructura.
De acuerdo con el contenido que estés planificando o el momento de la planificación en el que estés (recién empezás, estás en una etapa avanzada), podés usar una de las siguientes representaciones gráficas.
- mapa del sitio,
- wireframe, o
- mockup.
Mapa del sitio
El mapa del sitio es un diagrama de árbol que representa gráficamente la estructura jerárquica de un sitio completo o de una sección temática.
De arriba (la raíz, el asunto central) a abajo (las ramas que se abren en asuntos más específicos), navegás visualmente por los temas que vas a presentarle al usuario.
Un tipo de diagrama de árbol que probablemente conocés es el organigrama de una organización. Esa estructura nunca debe reflejarse en el mapa del sitio (un ministerio como raíz, sus secretarías como primera rama hasta llegar a las direcciones en la parte inferior).
Los usuarios no conocen (ni tienen por qué que conocer) la estructura del organismo para encontrar la información que necesitan. Por el contrario, el mapa del sitio debe estar estructurado de manera intuitiva; por ejemplo:
- de un organismo a sus políticas o temas y de las políticas o temas a sus programas o productos;
- de un organismo a sus perfiles de usuario y de los perfiles a los correspondientes programas o productos.
Armar un mapa te ve a ayudar a saber cuáles grupos (o contenidos área) vas a tener que crear y con cuál orden jerárquico, porque es muy probable que un nodo que esté más arriba (que tenga mucha información debajo) deba ser un grupo de back.argentina.gob.ar.
Podés hacer el mapa con lápiz y papel, dibujarlo en un programa de presentaciones como Powerpoint o Presentaciones de Google o usar alguna de las herramientas gratuitas que hay en internet.
Wireframe
El wireframe es una representación esquemática de una página web en la que disponés de manera simplificada su contenido: qué va arriba, qué va abajo, qué a izquierda o derecha.
En el apartado anterior, cuando hablamos del mapa del sitio, dijimos que hay nodos, los que están más arriba en el árbol, de los que se desprenden muchas ramas. Es una buena práctica maquetar como wireframe cada uno de esos nodos más importantes (la página de inicio, la página principal de cada una de sus secciones), porque muy probablemente serán áreas (grupos) del sitio.
Disponer los elementos en el wireframe te ayudará a identificar los recursos más adecuados (atajos estáticos, listados dinámicos, tablas con buscador, etc.) para apuntar a los tipos de contenido en los que se va a desarrollar esa sección.
Podés hacer el wireframe con lápiz y papel, dibujarlo en un programa de presentaciones como Powerpoint o Presentaciones de Google o usar alguna de las herramientas gratuitas que hay en internet.
Mockup
Luego de organizar los contenidos en el wireframe, elegí los recursos gráficos y dibujalos en un mockup.
Si con el wireframe representás de manera simplificada (rectángulos, círculos, textos con referencias, etc.) cómo vas a disponer la información, con el mockup diseñás de manera fiel el contenido que estás maquetando: colores, imágenes, íconos, textos.
Para dibujar el mockup, debés tener en cuenta los recursos con los que contamos en el framework Poncho.
Poncho es la librería de estilos y componentes oficiales para diseñar y desarrollar sitios web y aplicaciones móviles del gobierno de la República Argentina.
En otras secciones de estos estándares vamos a presentarte sus principales componentes y recursos, así como el modo de utilizarlos.
El mockup puede ser estático o interactivo. La ventaja de hacerlo interactivo (por ejemplo, en capacita-back) es que otras personas podrán probar la navegación o la visualización en desktop y móvil.
Para crear un mockup interactivo podés usar alguna de las herramientas gratuitas que hay en internet o crearlo en un entorno de pruebas al que te damos acceso.