Ejemplos de jerarquía en una estructura web

Coloque un organigrama corporativo junto al diagrama de diseño de un sitio web, y puede encontrar una notable similitud entre los dos documentos. Las empresas, los gobiernos y otras entidades a menudo utilizan los mismos patrones de diseño jerárquico que los sitios web. El CEO de una corporación, por ejemplo, puede sentarse en la parte superior de un modelo jerárquico de la misma manera que una página de inicio se encuentra en la parte superior de un modelo de sitio web. Las jerarquías diseñadas de manera efectiva crean sitios que a las personas les encanta visitar.

Estructuras de sitio web

Como lo anotan los autores de la "Guía de estilo web", "El éxito de la organización de su sitio web dependerá en gran medida de la forma en que la arquitectura de información de su sitio coincida con las expectativas de sus usuarios". Si a las personas les resulta fácil moverse por su sitio, Tal vez pasen más tiempo revisándolo. Una forma de facilitarles la tarea es dar a este sitio un diseño lógico y predecible, de modo que los visitantes puedan navegar por las páginas web sin consultar la documentación de ayuda del sitio.

Enfoque piramidal

Puede ser útil pensar en un sitio web como una pirámide. En la parte superior de la pirámide se encuentra el primer nivel del sitio, la página de inicio. Una jerarquía efectiva contiene información general y enlaces que apuntan a otras páginas web que contienen información más detallada. Esas páginas aparecen debajo de la página de inicio y se convierten en el segundo nivel del sitio en la jerarquía. Es posible que un sitio básico solo necesite dos niveles, y una página de inicio simplemente tenga enlaces que apunten a páginas como "Acerca de nosotros", "Productos" y "Unirse". Siempre es una buena idea brindar a los visitantes del sitio una forma de volver. a la página de inicio desde cualquier página, por ejemplo, al incluir un enlace, botón o elemento de menú en cada página que apunta a la página de inicio.

Nivel tres y más allá

Whitehouse.gov es un ejemplo de un sitio que tiene varios niveles que forman una jerarquía compleja. La página de inicio es simple, pero puede acceder a cualquier otra página del sitio desde la página de inicio. Este tipo de jerarquía puede extenderse a muchos niveles, donde los niveles más bajos proporcionan más detalles que los niveles más altos. Un buen ejemplo de una jerarquía de tres niveles es un sitio de revisión de libros. La página de inicio, en el nivel uno, puede proporcionar información general, así como enlaces que apuntan a una página de revisiones. Esa página, que forma el segundo nivel, podría contener una lista de libros. Cuando haces clic en un libro, otra página llamada "Guerra y paz" podría mostrar una revisión de ese libro. Esta página se sentaría en el tercer nivel del sitio. Si diagramas esta jerarquía de la forma en que crearías un organigrama, dibujarías un cuadro en la parte superior y escribirías "Página de inicio" en él. Luego, puede dibujar su cuadro "Comentarios" debajo del cuadro "Página de inicio" y agregar el cuadro "Guerra y paz" debajo del cuadro "Página de inicio".

Uso de encabezados para mostrar jerarquía

Además de organizar las páginas en un sitio web, puede organizar el contenido de una página para mostrar relaciones jerárquicas. Los encabezados, por ejemplo, permiten a las personas presentar información en forma de esquema que es fácil de digerir. HTML proporciona varias etiquetas de encabezado, como h1, h2 y h2, que pueden ayudarlo a agregar jerarquía a una página web. Por ejemplo, puede usar una etiqueta h1 grande como el encabezado principal de la página y una etiqueta h2 más pequeña para una sección llamada "Productos". Luego puede agregar una etiqueta h3 debajo de Productos para crear una subsección que describa sus productos. También tiene la opción de agregar listas con viñetas a su página. Al combinar todos estos elementos, creará un esquema visual que los visitantes del sitio pueden comprender de un vistazo.