Arquitectura de la información para web

Para diseño de páginas web

http://www.neserideas.com/

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


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


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


= / 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




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)




ww

w.n

ese

ride

as.

co

m

Formas de organización de la información en páginas web

7




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




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.)




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




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




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




¿?

Entonces… ¿Cuál es el mejor sistema para estructurar una página web?

ww

w.n

ese

ride

as.

co

m




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




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 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




http://www.w3schools.com/









http://www.neserideas.com/diseno-web/proyectos-especiales/one-page.html




¿?

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




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




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


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

[email protected]

974.54.53.05

neser.skype


mailto:[email protected]


http://www.facebook.com/neserideas

https://twitter.com/Neserideas

https://plus.google.com/u/0/b/104901427753653085170/

http://www.linkedin.com/company/neser-ideas

http://www.youtube.com/user/NeserIdeas?feature=mhee

http://www.neserideas.com/esfera

Arquitectura de la información para web

Business

Transcript of Arquitectura de la información para web