Post on 15-Dec-2014
description
i
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.
1
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información
= ¿Qué es la arquitectura de
la información de una página web?
2
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información
Estructura de la web
Organización de la información
Esqueleto de la empresa
Plano o esquema organizado
Desarrollo de la interfaz visual
Es…
¿Porqué es tan importante para el diseño web, y qué se
define durante su desarrollo?
3
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información
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.
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
Diseño web definitivo (aspecto final) 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
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información
= / Esquema o estructura inicial del cual se realizará el Diseño Web
Pero antes hay que diferenciar…
i
Una vez hecha esta aclaración entremos en materia y veamos cómo organizar correctamente
la información para crear nuestra web
5
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
Ventajas de organizar la información en una página web
6
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í
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)
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
Formas de organización de la información en páginas web
7
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
1. Estructura Lineal
8
Navegación lineal
Una página lleva a otra mediante enlace
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
Características de la Estructura Lineal
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
2. Estructura Jerárquica
9
1er Nivel
Jerarquía
2o Nivel
Jerarquía
3er Nivel
Jerarquía
Crecimiento horizontal más complicado
(definir bien el menú en fase diseño en 1er Nivel)
Crecimiento vertical menos
complicado
(es fácil aumentar los grupos,
servicios, productos…en
cualquier etapa del proyecto)
Se pueden crear tantos niveles como se necesite
(recomendado 3 clics máx.)
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
2. Estructura Jerárquica
10
1er Nivel
Jerarquía
•Menú general.
•Se define al principio en fase inicial diseño web.
•Grandes grupos de la empresa.
•Crecimiento horizontal a posteriori complicado.
2o Nivel
Jerarquía
•Submenús, servicios, productos…
•Crecimiento horizontal y vertical sin
problemas en fase diseño.
•Se puede crecer sin problemas a priori tanto
horizontal como verticalmente
•Dependen del 1er Nivel
3er Nivel
Jerarquía
•Submenús, servicios, productos…
•Crecimiento horizontal y vertical sin
problemas en fase diseño.
•Se puede crecer sin problemas a priori tanto
horizontal como verticalmente
•Dependen del 2o Nivel
Características de la Estructura Jerárquica
Navegación en cascada.
Fácil de entender y seguir por el usuario
Estructura habitual en las empresas.
Facilidad para organizar gran cantidad de
información compleja.
Estructura lógica: de lo general a lo
particular o específico.
Se puede mezclar con el sistema de
estructura lineal.
Se reparte la importancia de las páginas a
nivel de indexación para los buscadores.
Facilidad para crecer en el futuro
Arquitectura de la información
ww
w.n
ese
ride
as.
co
m
2. Estructura Jerárquica (ejemplo)
1er Nivel
Jerarquía
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.
1er Nivel
Jerarquía
Arquitectura de la información 11
ww
w.n
ese
ride
as.
co
m
2. Estructura Jerárquica (ejemplo)
2o 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.
1er Nivel
Jerarquía
Arquitectura de la información 12
ww
w.n
ese
ride
as.
co
m
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
enlaces internos y esto favorece la
indexación del sitio web
Arquitectura de la información 13
¿?
Entonces… ¿Cuál es el mejor sistema para estructurar una página web?
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información 14
1+2+3=ok
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.
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información 15
ww
w.n
ese
ride
as.
co
m
Ejemplo de 3 estructuras Grupo de 1er Nivel
Grupo de 2º nivel
Grupo de 3er nivel
Estructura Lineal (facilita la navegación por el site y nuestro posicionamiento)
(Estructura Jerárquica)
(Estructura Jerárquica)
(Estructura Jerárquica)
Estructura en Red (poder acceder a cualquier sección del site (1er y 2º nivel) gracias al footer)
Grupo de 2º nivel (Estructura Jerárquica)
Visita Neser Ideas para probar la navegación
Arquitectura de la información 16
¿?
Queda todo claro, pero... ¿Una vez estructurada la arquitectura de la
información, ya se puede diseñar la página web?
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información 17
ok
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
ww
w.n
ese
ride
as.
co
m
Arquitectura de la información 18
ww
w.n
ese
ride
as.
co
m
Esquema del Proceso de Diseño Web
DISEÑO
Modelado del Usuario Diseño Conceptual
Definir Estilo Diseño Visual
Diseño de Contenidos
Evaluación
Métodos de Inspección Método de Testeo
Prototipado
Baja Fidelidad Alta Fidelidad
IMPLEMENTACIÓN
Y LANZAMIENTO
MANTENIMIENTO
Y SEGUIMIENTO
PLANIFICACIÓN
Identificación de los requerimientos del proyecto
(cliente y usuarios)
ARQUITECTURA DE LA
INFORMACIÓN
Arquitectura de la información
USABILIDAD
ACCESIBILIDAD
Se tiene en cuenta
Todo lo que se diseña tiene que ser evaluado a través
de los prototipos hasta conseguir el diseño
definitivo.
19
www.neserideas.com
info@neserideas.com
974.54.53.05
neser.skype