Arquitectura de la información para web

17,378 views

Published on

Published in: Business

Arquitectura de la información para web

  1. 1. Para diseño de páginas web
  2. 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. iwww.neserideas.com 1 Arquitectura de la información
  3. 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. 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. 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. 6. Una vez hecha esta aclaración entremos en materia y veamos cómo organizar correctamente la información para crear nuestra web iwww.neserideas.com 5 Arquitectura de la información
  7. 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. 8. Formas de organización de la información en páginas webwww.neserideas.com 7 Arquitectura de la información
  9. 9. 1. Estructura Lineal Características de la Estructura Lineal Navegación lineal Una página lleva a otra mediante enlacewww.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. 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…enwww.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. 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 lowww.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. 12. 2. Estructura Jerárquica (ejemplo) 1er Nivel Jerarquía 1er Nivel Jerarquíawww.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. 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. 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 mediantewww.neserideas.com enlaces internos y esto favorece la indexación del sitio web 13 Arquitectura de la información
  15. 15. Entonces… ¿Cuál es el mejor sistema para estructurar una página web? ¿?www.neserideas.com 14 Arquitectura de la información
  16. 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=okwww.neserideas.com 15 Arquitectura de la información
  17. 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. 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. 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 okwww.neserideas.com 18 Arquitectura de la información
  20. 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 Fidelidadwww.neserideas.com Método de Testeo Alta Fidelidad USABILIDAD ACCESIBILIDAD IMPLEMENTACIÓN Y LANZAMIENTO MANTENIMIENTO Y SEGUIMIENTO 19 Arquitectura de la información
  21. 21. info@neserideas.com 974.54.53.05 www.neserideas.com neser.skype

×