Proyecto web. Paso 2 – Estructuración de la Información

Una vez tengamos un análisis completo del sitio que vamos a diseñar o desarrollar, tengamos en claro lo que el cliente realmente quiere transmitir o si es un sitio personal igualmente tengamos en claro lo que queremos mostrar, tengamos también en claro quien o quienes van a ser los usuarios finales de este sitio, y tengamos una noción del tiempo que nos tomara este proyecto, pasaremos al siguiente paso. Este paso lo llamo la etapa de estructuración.

Estructuración de la Información

arquitectura-de-informacion

Muchas veces nos saltamos este paso siendo uno de los mas importantes en el proceso del desarrollo web, esto por que si no tenemos bases fijas para lo que haremos, sentaremos nuestros proyectos sobre nada. O imaginemos que en el proceso de construcción de un edificio se pase por alto la tarea del arquitecto y comiencen los obreros a trabajar, ¿En que termina esto?, creo que este edificio no durara mucho, por eso esta etapa de estructuración suele ser una base muy fuerte e importante para cualquier proyecto.

La estructuración de la información en el proceso de creación de un sitio web, ¿Qué significa? ¿En que consiste? ¿cómo se hace? ¿Cómo aplicar este concepto?.

Estructurar la información es analizar, organizar, ordenar y categorizar la información a mostrar en el sitio. Sobre estos

conceptos basamos los fundamentos del proyecto.

1 – Analizar.

aquí veremos lo que el usuario puede llegar a hacer con el sitio, las interacciones que puede llegar a tener con el mismo y el resultado será el como presentarlos de la manera mas fácil posible.

2 – Organizar, Ordenar y Categorizar.

mapa-del-sitio

Ya con un buen análisis realizado sabremos como organizar y categorizar la información, aquí pasamos a crear un diagrama de la navegación del sitio lo que conocemos como el mapa del sitio. Consiste en crear un árbol que contendrá todas las opciones navegables del sitio. Categorizar cuales opciones son principales y cuales no tanto, relacionar secciones o apartador por medio de menús y submenús, categorizar la información dependiendo el tema en diferentes secciones o apartados en su respectiva lógica.
(Existen herramientas online muy buenas que nos hacen la vida mas fácil al momento de organizar contenidos por medio de mapas de sitio.)
(Herramientas para crear mapas de sitio o diagramas online)

AXURE : http://www.axure.com/
SMARTDRAW : http://www.smartdraw.com/
CONCEPTDRAW : http://www.conceptdraw.com/
LOVELY CHARTS : http://www.lovelycharts.com/
¿Y por que no? POWERPOINT.
o (papel y lápiz).

3 – Representar lo planeado.

wireframe

Aquí hacemos un boceto grafico de lo que hemos estructurado o lo que conocemos como un wireframe. Un wireframe es un prototipo de cómo quedara la web, aquí no hay colores, no hay tipografía, no hay diseño ya que solo representamos la estructura mediante el esqueleto de la web. En este paso ya sabemos que elementos conforman el menú principal y cuales son sus submenús (si los tiene), cuales formaran el menú secundario, sabemos que apartados y opciones llevara el home y también algo genial seria hacerlo con cada hoja o sección que hemos definido en el árbol del sitio.
(Herramientas para crear wireframes online)

JUSTINMIND : http://www.justinmind.com/
BALSAMIQ MOCKUPS : http://www.balsamiq.com/
AXURE : http://www.axure.com/
MINDMEISTER : http://www.mindmeister.com/es
POWERPOINT.
¿Y por que no? Hacerlo manualmente. (papel y lápiz).

4 – Tener en cuenta la Usabilidad .

 usabilidad web

La usabilidad es el arte de mostrar nuestro contenido, dar a conocer la información de una manera fácil y rápida para así satisfacer las necesidades del usuario. (Usabilidad Introducción)

Este concepto de usabilidad lo podemos aplicar en muchas cosas y de hecho, hablar de usabilidad nos tomaría muchísimos tiempo, hay libros de usabilidad web, en fin vamos a tocar solo algunos puntos importantes.

– Una web usable es una web de fácil navegación.
– Una web usable nos mantiene informado de donde estamos y adonde debemos ir.
– Una web usable habla el idioma del usuario, adaptar la web a los usuario y no que los usuarios se adapten a la web.
– Una web usable ayuda a los usuarios a cometer pocos errores y al cometerlos los ayuda a recuperarse fácilmente (Recuperabilidad).
– Una web usable es una web flexible a los diferentes usuarios, que sea navegable tanto para usuarios avanzados como para novatos y sin ninguna experiencia.
– Una web usable es una web consistente en la información.

Y por ultimo, una web usable es una web que tiene una buen distribución de los elementos mostrados. Ejemplo: el menú, la navegación, las secciones, artículos, el buscador etc.…).

En cuanto usabilidad hay muchísimo para hablar, pero considero los puntos anteriores los mas importante en este tema.

usabilidad-web imagen

La usabilidad se debe de tener en cuenta mas de lo que se imagina normalmente ya que de esto depende que un usuario regrese a nuestro sitio, el éxito del usuario en referencia a un sitio no se mide por la información que el busca y que se encuentra en el sitio si no por lo fácil que la encuentra, tengo siempre presente al realizar un proyecto web que hay cientos de paginas que ofrecen lo mismo que yo, y el usuario siempre esta a un clic de salir de mi proyecto e ir a otro sitio.

1 – proyecto-web-paso-1-analisis-y-planeacion/

Con esto listo y claro, pasamos al siguiente paso.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

3 Respuestas

  1. mr.White dice:

    ConceptDraw PRO 9 es muy buen producto..te lo recomiendo como alternativa a Visio, justo lo que buscaba!

  2. Gical dice:

    Hola, esta genial el articulo, pero quede con una inquietud, en el punto 3 – Representar lo planeado, con el wireframe, esto es lo primero que se le muestra al cliente o es solo como una guia para el desarrollo final de la pag. web

    Gracias

    • Johanso dice:

      Bueno, esto depende, hay clientes que quieren seguir el paso a paso del proyecto. Estaría bien mostrar como seria la estructura. Pero lo idea es presentar un diseño mas formado, con colores, tipografía a utilizar e imágenes, si es un buen diseño de seguro enamorara al cliente.