| |
Año 4 - Boletín Nro 71 - martes 30 de nov de 2004 |
Diagramas de sitios Web (I)
Planificando un espacio de información
POR JASON WITHROW - Tomado de http://www.boxesandarrows.com/
TRADUCIDO POR: Carlos Martínez Pérez de PROYECTOWEB.org
"Para comunicar eficazmente las características de un espacio de información, necesito un enfoque para crear diagramas fáciles de entender. Para que sean útiles a mi audiencia, los diagramas deben comunicar "la visión general" del sitio Web a las personas interesadas, en tanto, provee detalles suficientes para que sea de utilidad al equipo de desarrollo."
Los espacios de información nos rodean. Cuando recuperamos un archivo de nuestra computadora, estamos navegando a través de un espacio de información; cuando usamos un motor de búsqueda nos movemos a través de un espacio de información. Como profesionales de la experiencia del usuario es nuestro trabajo entender no sólo cómo este espacio trabaja (y cómo los usuarios trabajan dentro del espacio), sino también cómo es mejor acceder y comunicar la información contenida allí. Entender la estructura de un espacio de información para un sitio Web se reduce a las siguientes preguntas:
- ¿Cuál es la estructura de la información?
- ¿Cómo represento visualmente esa estructura?
- ¿Qué relaciones existen entre las páginas Web?
- ¿Cómo se representan estas relaciones?
Sospecho que los diagramas del sitio serán lo suficientemente útiles para responder esas preguntas. Cómo crear el diagrama correcto se convirtió en un desafío personal.
La evolución de un enfoque del diagrama
Mi inspiración más temprana vino de una clase de Arquitectura de la Información en la Escuela de Información de la Universidad de Michigan. Nuestro libro de texto fue Arquitectura de la Información para para el World Wide Web de Rosenfeld y Morville, el cual me dio los primeros ejemplos de los diagramas de sitios. Basado en los diagramas del libro, tuve la idea de cómo podía transmitir visualmente la información estructural y funcional acerca del sitio Web.
Dado que el texto no proporcionaba guías específicas para realizar los diagramas, encontré mi forma iterando con las pocas imágenes que contenía. Todos los proyectos en los que trabajé sirvieron como una iteración adicional en los qué adopté las prácticas que trabajaron bien y descarté aquellas que no lo hicieron. Durante este proceso iterativo Jesse James Garret lanzó su excelente Vocabulario Visual, el cual tenía un enfoque dferente en sus diagramas. Considerando que mi enfoque en desarrollo se centraba principalmente en planificar la estructura y las relaciones entre las páginas , como consideraciones secundarias brindar la funcionalidad e interactividad, encontré que el Vocabulario Visual era ideal para mostrar la funcionalidad e interactividad detalladas y no era el enfoque apropiado para comunicar mis consideraciones estructurales.
Para comunicar eficazmente las características de un espacio de información, necesito un enfoque para crear diagramas fáciles de entender. Para que sean útiles a mi audiencia, los diagramas deben comunicar "la visión general" del sitio Web a las personas interesadas, en tanto, provee detalles suficientes para que sea de utilidad al equipo de desarrollo. La meta final fue evitar abstracciones innecesarias en los diagramas; el contenido del diagrama debe estar muy cerca de lo que será observado después en el sitio Web (o lo que está actualmente en el sitio, si el diagrama es parte de un rediseño). De hecho, mi anhelo por entender los sitios Web me llevó a desarrollar un enfoque para la realización de los diagramas llamado "structural/functional site diagramming".
Comenzando con un boceto del sitio
Un diagrama del sitio debe sonar inicialmente como un boceto del sitio. Y si no es técnicamente una parte del diagrama del sitio, un boceto del sitio complementa el diagrama bastante bien. El boceto del sitio presenta la estructura del sitio Web en un típico formato de boceto, reflejando perfectamente la enumeración, los niveles y las etiquetas en el diagrama del sitio. Las ventajas de los bocetos del sitio, es que ellos son más rápidos de crear y mantener que los diagramas de sitios, pero sus desventajas incluyen la dificultad de mostrar secuencias lineales de páginas y límites en sus habilidades para mencionar funcionalidad y otros tipos de contenido, principalmente debido al desorden visual que crea el texto adicional. (Si esa información se proporciona, es normalmente entre paréntesis después del nombre de la página.) Los bocetos de los sitios no revelan "la visión general" del sitio Web (tal como su anchura y profundidad) tan fácilmente como los diagramas del sitio.
Después de crear el boceto inicial del sitio, el próximo paso es representar la información en formato de diagrama, el cual nos permite mostrar más fácil las relaciones complejas de las páginas así como la funcionalidad. Desde que nos movemos dentro del proceso del diagrama, el punto de partida lógico es la unidad estructural que sirve como el bloque constructor del diagrama.
La unidad estructural en el diagrama
La unidad básica estructural del diagrama es la página Web, representada por un rectángulo. Si la página Web es generada dinámicamente los bordes del rectángulo son redondeados (las páginas estáticas no tienen bordes redondeados). Las páginas Web que serán desarrolladas en el futuro son representadas por un rectángulo de puntos; una nota al pie de la página puede indicar la fecha para la cual la página estará disponible o la referencia a un inventario de contenido para estos detalles. Planificar el desarrollo futuro de un diagrama del sitio puede ayudar a predecir las necesidades de la interfaz de usuario a largo plazo y servir de guía al diseño de la interfaz hacia un diseño más escalable (por ejemplo, un diseño que acomodará fácilmente los cuatro botones de navegación nuevos que serán adicionados en el transcurso de seis meses).
Múltiples páginas al mismo nivel pueden estar agrupadas, proporcionando un nivel útil de abstracción en situaciones donde mostrar cada página por separado puede ser difícil (generalmente debido a las limitaciones del espacio de la página impresa que lleva a cabo el diagrama). Cuando se decide agrupar las páginas se siguen los siguientes criterios:
1. Las páginas que son agrupadas se localizan no más alto del nivel 3 del sitio Web; preferiblemente están en los niveles más bajos. Agrupar a un nivel muy alto (por ejemplo, desde la página de inicio) a menudo ocultará información relevante y relaciones entre páginas en la estructura del sitio Web. Más adelante se sigue explicando.
2. No hay sub-páginas debajo de los elementos agrupados. El agrupamiento evita las trayectorias individuales a través del sitio Web desde que es visto, así que cualquier valor obtenido de conocer esos caminos a las páginas de nivel inferior se pierde.
3. Las páginas tienen contenidos similares. Biografías, lanzamientos de prensa, publicaciones y foros de discusión, todas ellas funcionan bien para los agrupamientos porque son páginas múltiples con contenido similar. Dada sus semejanzas inherentes, mostrarlas por separado no ofrece suficiente valor para compensar el desorden visual que ellas introducen en el diagrama.
4. La cantidad de páginas es probable que cambie con frecuencia. En vez de cambiar el diagrama diariamente, es mejor mostrar un grupo.
Figura 1: Unidades estructurales del diagrama del sitio
Especificando los niveles y la enumeración de las páginas
La mayoría de los sitios Web poseen una estructura que es al menos parcialmente jerárquica. En esa estructura jerárquica, cada página está en cierto nivel, basado en relaciones de padre e hijo a otras páginas dentro del espacio de información. La página de inicio está en el Nivel 1, las páginas de navegación global y otras no globales pertenecen al Nivel 2, la navegación local está en el Nivel 3, etc. A menudo cada enlace accedido desde la página de inicio (si se sigue un camino jerárquico) corresponde a un nuevo nivel del sitio.
Es importante observar que estos niveles representan como se estructura la información del sitio conceptualmente - a menudo de general (páginas en un nivel alto) a específico (páginas a niveles bajos). Los modelos mentales del usuario representan esta estructura conceptual. Los niveles no corresponden necesariamente a la localización del archivo y la estrcutura de directorio; un sito Web puede tener 6 niveles aún cuando todos los archivos están en el mismo directorio del servidor.
Enumerar las páginas Web es una manera muy provechosa de mantener todo organizado y simplifica la comunicación sobre el sitio Web. La página de inicio es 1.0 (primer nivel) y las páginas del segundo nivel son 1.1,1.2,1.3, etc. Las páginas del tercer nivel debajo de 1.1 serían 1.1.1,1.1.2,1.1.3, etc. Una estructura simple del sitio, mostrada en formato de esbozo del sitio, sería:
1.0 Home
1.1 Quiénes somos
1.1.1 Nuestra historia
1.1.2.Nuestro Personal
1.1.2.1-1.1.2.8 Bibliografías del personal
1.2 Qué hacemos
1.2.1 Productos
1.2.2 Servicios
Cada página Web tiene solo un número y cada número es único; los enlaces cruzados a estas páginas hacen referencia al número. Con solo el número sabemos al menos dos cosas acerca de la página: el nivel en el cual está la página (por ejmplo, 1.2.2 es una página del nivel 3, se determina contando los dígitos) y el camino para llegar a la página (1.2.2 está por debajo del camino de 1.2 en la navegación global). Las páginas agrupadas terminan en .x (ejemplo, 1.2.4.1-1.2.4.x) si ese grupo es propenso a cambios frecuentes; si el número de páginas Web en el grupo es estable entonces se puede proporcionar un valor final fijo.
La importancia de enumerar las páginas no puede ser exagerada; no hay nada más embarazoso durante una reunión con el cliente como estar revolviendo para encontrar el diagrama relevante y/o la documentación para una página basado solamente en su nombre.
Este problema se complica a medida que el número de las páginas aumentan, y si existen existen diferentes páginas con el mismo nombre (tal como "FAQ") en múltiples secciones del sitio. El número asignado a cada página elimina esas preocupaciones. (CONTINUA EN EL PRÓXIMO BOLETÍN) |
ProyectoWeb - Diagramas de sitios Web (I)
|
|
Suscribirse al Boletín
