El documento explica los pasos para diseñar la arquitectura de información de una página web. Se define la arquitectura de información, se describen formas de organizar la información como estructuras lineales, jerárquicas y en red, y se concluye que la mejor solución es una combinación de estas estructuras. Además, se indica que la arquitectura de información es un paso inicial en el proceso de diseño web.

1. Para diseño de páginas web

2. Vamos a explicar de una forma sencilla y
esquemática cómo diseñamos la arquitectura
de la información de una página web.
i
www.neserideas.com
1 Arquitectura de la información

3. ¿Qué es la arquitectura de
la información de una
=
página web?
www.neserideas.com
Estructura de la web
Organización de la información
Es… Esqueleto de la empresa
Plano o esquema organizado
Desarrollo de la interfaz visual
2 Arquitectura de la información

4. ¿Porqué es tan importante
para el diseño web, y qué se
define durante su desarrollo?
 El objeto, propósito y fines del sistema de información o sitio
 La definición del público objetivo y los estudios de la audiencia.
 La realización de análisis competitivos.
 El diseño de la interacción.
www.neserideas.com
 El diseño de la navegación, esquemas de organización y maquetación de
los contenidos
 El etiquetado o rotulado de los contenidos para acceder a la información.
 La planificación, gestión y desarrollo de contenidos.
 La facilidad de búsqueda y el diseño de la interfaz de búsqueda.
 La usabilidad.
 La accesibilidad
 El feedback del resultado y los procesos de reingeniería del sitio
3 Arquitectura de la información

5. Pero antes hay que diferenciar…
=
/
Esquema o estructura inicial del Diseño web definitivo (aspecto final)
www.neserideas.com
cual se realizará el Diseño Web Presentación de los elementos en la
página
Presentación de la información
Disposición de los menús
Diseño de formularios
Botones de llamada a la acción
Barras laterales
…
4 Arquitectura de la información

6. Una vez hecha esta aclaración entremos en
materia y veamos cómo organizar correctamente
la información para crear nuestra web
i
www.neserideas.com
5 Arquitectura de la información

7. Ventajas de organizar la información en una página web
Optimización de tiempos de ejecución en fase de diseño
web.
Facilidades para el usuario para encontrar lo que busca.
Evitar el Efecto Rebote (abandonar la página por falta de
entendimiento).
Diseño unificado en todas las páginas de un mismo sitio al
mantener la misma estructura en todo el site.
Permite organizar y estructurar los contenidos de un
sitio web pensando en el usuario.
No debe ser igual a la estructura de la empresa pero sí
www.neserideas.com
guardar relación.
Ayuda a ordenar información y crea orden necesario
para su comprensión.
Evita contendidos duplicados.
La información se organiza en menús fácilmente
comprensibles para el usuario.
Ayuda al Posicionamiento SEO. Punto importante si
queremos ser visibles en Internet. (indexación)
6 Arquitectura de la información

8. Formas de organización de la información en páginas web
www.neserideas.com
7 Arquitectura de la información

9. 1. Estructura Lineal
Características de la Estructura Lineal
Navegación lineal
Una página lleva a otra mediante enlace
www.neserideas.com
Cada página está a 1 clic más alejada de la
página de inicio (recomendado 3 clic máx.)
Los buscadores dan más importancia a la
página de inicio con éste sistema.
Estructura muy cerrada que se
complementa con la estructura jerárquica
8 Arquitectura de la información

10. 2. Estructura Jerárquica
Crecimiento horizontal más complicado
(definir bien el menú en fase diseño en 1er Nivel)
1er Nivel
Jerarquía
Crecimiento vertical menos
complicado
2o Nivel (es fácil aumentar los grupos,
Jerarquía servicios, productos…en
www.neserideas.com
cualquier etapa del proyecto)
3er Nivel
Jerarquía
Se pueden crear tantos niveles como se necesite
(recomendado 3 clics máx.)
9 Arquitectura de la información

11. 2. Estructura Jerárquica
Características de la Estructura Jerárquica
•Menú general.
1er Nivel •Se define al principio en fase inicial diseño web.
Jerarquía •Grandes grupos de la empresa. Navegación en cascada.
•Crecimiento horizontal a posteriori complicado.
Fácil de entender y seguir por el usuario
Estructura habitual en las empresas.
•Submenús, servicios, productos…
•Crecimiento horizontal y vertical sin Facilidad para organizar gran cantidad de
2o Nivel problemas en fase diseño. información compleja.
Jerarquía •Se puede crecer sin problemas a priori tanto
horizontal como verticalmente Estructura lógica: de lo general a lo
www.neserideas.com
•Dependen del 1er Nivel particular o específico.
Se puede mezclar con el sistema de
•Submenús, servicios, productos… estructura lineal.
•Crecimiento horizontal y vertical sin
3er Nivel problemas en fase diseño. Se reparte la importancia de las páginas a
Jerarquía •Se puede crecer sin problemas a priori tanto nivel de indexación para los buscadores.
horizontal como verticalmente
•Dependen del 2o Nivel Facilidad para crecer en el futuro
10 Arquitectura de la información

12. 2. Estructura Jerárquica (ejemplo)
1er Nivel
Jerarquía
1er Nivel
Jerarquía
www.neserideas.com
Ejemplo de niveles de la página Neser ideas.
En éste caso se ha utilizado 2 menús de 1er Nivel. En el primer menú se podría
crecer horizontalmente a posteriori del diseño inicial, pero en el segundo
menú queda claro la complejidad de crecimiento horizontal una vez acabado el
diseño.
11 Arquitectura de la información

13. 2. Estructura Jerárquica (ejemplo)
1er Nivel
Jerarquía
Ejemplo de niveles de la página Neser ideas.
Dentro del grupo de 1er Nivel (Marketing
Online), encontramos grupos de 2º nivel en
este caso; Servicios. Dentro de éstos podemos
crecer en número tantos como necesitemos y
en cualquier momento.
www.neserideas.com
2o Nivel
Jerarquía
12 Arquitectura de la información

14. 3. Estructura en Red
Características de la Estructura en Red
Navegación libre y flexible.
Puede generar confusión y desorden para
el usuario si no está bien diseñada
Se puede acceder a cualquier sección o
menú desde cualquier parte del sitio
Las páginas se relacionan entre si mediante
www.neserideas.com
enlaces internos y esto favorece la
indexación del sitio web
13 Arquitectura de la información

15. Entonces… ¿Cuál es el mejor sistema para
estructurar una página web?
¿?
www.neserideas.com
14 Arquitectura de la información

16. Cada página se debe diseñar en función de las
necesidades que requiera la web, pero la unión
de las 3 estructuras es la mejor solución.
1+2+3=ok
www.neserideas.com
15 Arquitectura de la información

17. Ejemplo de 3 estructuras
Grupo de 1er Nivel
(Estructura Jerárquica)
Estructura Lineal
(facilita la navegación por el Grupo de 2º nivel
site y nuestro posicionamiento) (Estructura Jerárquica)
Grupo de 3er nivel
(Estructura Jerárquica)
www.neserideas.com
Visita Neser Ideas para
probar la navegación
Grupo de 2º nivel
(Estructura Jerárquica)
Estructura en Red
(poder acceder a cualquier
sección del site (1er y 2º
nivel) gracias al footer)
16 Arquitectura de la información

18. Queda todo claro, pero...
¿Una vez estructurada la arquitectura de la
información, ya se puede diseñar la página web?
¿?
www.neserideas.com
17 Arquitectura de la información

19. La arquitectura de la información es uno de los
primeros pasos para alcanzar el diseño definitivo
de la web.
En la próxima diapositiva podemos ver el
Esquema del Proceso de Diseño Web
ok
www.neserideas.com
18 Arquitectura de la información

20. Esquema del Proceso de Diseño Web
PLANIFICACIÓN
Identificación de los ARQUITECTURA DE LA
requerimientos del proyecto INFORMACIÓN
(cliente y usuarios)
Se tiene
en cuenta
DISEÑO
Modelado del Usuario
Diseño Conceptual
Todo lo que se diseña tiene Definir Estilo
que ser evaluado a través Diseño Visual
de los prototipos hasta Diseño de Contenidos
conseguir el diseño
definitivo.
Evaluación Prototipado
Métodos de Inspección Baja Fidelidad
www.neserideas.com
Método de Testeo Alta Fidelidad USABILIDAD
ACCESIBILIDAD
IMPLEMENTACIÓN
Y LANZAMIENTO
MANTENIMIENTO
Y SEGUIMIENTO
19 Arquitectura de la información

21. info@neserideas.com
974.54.53.05
www.neserideas.com
neser.skype