blog

Wireframes

Desde que he publicado los wireframes para el rediseño de EFH varios lectores me han preguntado con qué herramienta los elaboro. También anticipé que hablaría sobre ello más adelante. Bueno, ahora es el momento.

Definiciones Iniciales

Partamos hablando del objetivo de los wireframes y cómo enfoco el proceso de desarrollo. En general esta herramienta es parte del proceso de arquitectura de infomación y permite definir el detalle del contenido de las páginas más relevantes. Para conocer un poco más de esto veamos algunos antecedentes.

Normalmente los deliverables o productos que nos entregan el panorama global de los contenidos de un sitio son el inventario de contenido y el diagrama de contenidos. Este último nos permite, mediante recursos como el vocabulario visual de Garret, definir el detalle de contenidos a nivel global del sitio, identificar secciones, tipos de páginas, etc. Luego de tener el panorama completo del sitio debemos pasar a identificar y modelar el detalle de contenidos a nivel de página. Para ello se seleccionan las páginas tipo más relevantes y se desarrollan wireframes.

Normalmente se crean wireframes para la portada, las portadas interiores o portadillaspáginas interiores de contenido y otros casos especiales. En muchos de estos casos se repetirán elementos comunes como el encabezado, la navegación, el pie de página, etc., lo que hará que hacia el interior los wireframes sean más rápidos y simples de desarrollar.

La Importancia de los Wireframes

El desarrollar wireframes tiene varias ventajas dentro del proceso de diseño y desarrollo de un proyecto web, tanto para el equipo de desarrollo como para la relación con el cliente.

En primer lugar, el definir claramente las características de contenido de las páginas que componen un sitio es de una importancia sustantiva. Esto permitirá que el desarrollo de todas las etapas posteriores se realice inequívocamente, con todos los miembros hablando de lo mismo.

En segundo lugar permite establecer hitos con el cliente que generan definiciones precisas. Al momento de validar los wireframes de un sitio con el cliente, se centra la atención en el diseño de contenidos, no en el diseño visual. Un wirefreme puede contener ciertos elementos de caracter visual como una sugerencia de diagramación general, la jeraquización de los elementos, pero en rigor se trata de organizar la información a nivel de página, por lo tanto no se discute de diseño. De hecho, es muy posible que posteriormente, al traducir el wireframe a diseño, el diseñador gráfico determine que es necesario alterar ciertos elementos para optimizar aspectos comunicacionales, siempre que esto enriquezca al contenido y no sea exclusivamente por manierismos estéticos.

Por esto, normalmente trabajaremos los wireframes como diagramas simples, minimalistas, en grises y evitando cualquier enriquecimiento o contaminación visual que se pueda considerar un compromiso de diseño.

Perspectivas

Si bien el wireframe es una herramienta de arquitectura de información, es posible agregarle dimensiones adicionales que enriquezcan su valor como herramienta de diseño conceptual y análisis.

Personalmente en muchos proyectos me corrsponde realizar wireframes y luego hacerme cargo también del desarrollo del HTML y CSS. Por lo mismo esto me da una perspectiva diferente al momento de realizar wireframes: procuro junto con los objetivos originales de un wireframe, agregar información que me permita componer más fácilmente la estructura de HTML. Por ejemplo, es común identificar un bloque de elementos como pertenecientes a un mismo concepto: el logo e identidad de un sitio y la navegación principal corresponderán a la cabeza de las páginas y tiene sentido identificarlos de este modo. Por lo tanto, los encierro en un recuadro y eventualmente los puedo identificar como #encabezado. Exactamente, veo que brillan los ojos de ciertos fanáticos de CSS al notar que esto se traducirá posteriormente a: <div id=”encabezado”> … </div>

Este enriquecimiento del wireframe lo hace una herramienta más valiosa y útil de desarrollar porque tendrá una participación mayor y aportará más al desarrollo del proyecto.

Herramientas

Captura de pantalla de OpenOffice Draw con un archivo abierto.

Captura de OpenOffice Draw con un wireframe abierto del rediseño de EFH.

Hay muchas herramientas con las que se puede desarrollar un wireframe y la elección de una dependerá básicamente del enfoque y uso que hagamos del wireframe como producto dentro del desarrollo de los proyectos, así como del área de competencia de quien elabore el diagrama. Para diagramas simples es posible utilizar herramientas gráficas como Fireworks, Illustrator y otros similares. Sin embargo esto está más orientado a diseñadores y no todos lograrán ocupar eficientemente estas aplicaciones. Herramientas de presentaciones como PowerPoint también son útiles y las he visto con bastante frecuencia en la creación de wireframes, siendo además mucho más disponibles y utilizadas por un rango mayor de usuarios. No sería justo dejar de mencionar a Visio, que es una elección natural para cualquier clase de diagramas. Si está disponible, sin duda es un aporte enorme al desarrollo de wireframes, diagramas de contenido, interacción, etc.

Y bien, me preguntan con qué desarrollo mis wireframes. Al principio intenté con Fireworks por una desviación gráfica propia, pero en la medida que ún diagrama se complejiza resulta más dificil controlarlo, aparte del hecho que la aplicación consume cantidades monstruosas de memoria.

Pero desde hace cerca de dos años comencé a adoptar OpenOffice como plataforma para mis documentos, plantillas, presentaciones, etc. Y descubrí que uno de los componentes del paquete es Draw, una herramienta simple de gráficos vectoriales. No pretende competir con Freehand o Illustrator, pero para efectos de gráficos simples es ideal. Más grata fue mi sorpresa al descubrir que tiene conectores que permiten unir elementos y que se redibujan en la medida que los movemos, permitiéndonos editar fácilmente los diagramas.

Así, en este momento tengo algunas plantillas desarrolladas que me permiten comenzar a desarrollar diagramas rápidamente. Incluso envié hace un tiempo atrás una plantilla con el diagrama visual de Garret para diagramas de contenido en formato OpenOffice al propio Jesse James Garret, quie lo publicó en su sitio junto con las plantillas para los demás programas.

Conclusiones

Es evidente que el uso de wireframes es una muy buena idea para el desarrollo de proyectos web, más aún si los enriquecemos con otras dimensiones, como por ejemplo con indicios para la construcción del HTML y CSS. Es también una valiosa herramienta para determinar claramente los contenidos a nivel de página, junto con marcar hitos con el cliente respecto al desarrollo del proyecto.

En otro sentido, la herramienta con la que produzcamos los wireframes es secundaria, en tanto el producto es el valioso. Pero si me preguntan a mí, OpenOffice Draw es ideal.

Tags y Categorías

La definición de Technorati sobre los tags comienza con:

What’s a tag?

Think of a tag as a simple category name like web design services. People can categorize their posts, photos, and links with any tag that makes sense.

Asumo que la definición intenta simplificar el problema, pero me parece esencialmente incorrecta. Tags y categorías no son lo mismo.

El uso de tags en un rango amplio de sitios es un fenómeno reciente e interesante, pero me sorprende que la diferencia entre ambos no sea suficientemente clara para muchos. Hay sitios que utilizan tags, otros que utilizan categorías y otros que hacen uso de ambos. A continuación trataré de anotar algunos aspectos importantes de ambos esquemas para comentar sus beneficios y algunos casos en que uno sea más apropiado que otro.

Categorías

Las categorías son un sistema de asociación de contenido con uno o más temas. Permiten definir y agrupar la información estableciendo relaciones. Las categorías tienen estructuras planas (un nivel) o jerárquicas (múltiples niveles). Establecen una relación de dependencia del tipo pertenece a.

Por ejemplo:

  • Recetas
    • Postres
      • Fruta
        • Manzanas
        • Peras
        • Naranjas
        • Sandías

Tags

Los tags, o keywords, son términos simples que hablan de una propiedad o característica de la información, pero no la define ni la agrupa jerárquicamente. Es información sobre la información, o un metadato. Un nodo o unidad de información puede tener uno o más tags, relacionados o no, cada uno de los cuales se refiere a una característica específica del objeto, pero que no lo clasifica o categoriza. Por ejemplo:Manzanasfruta, vegetales, postre, verde, roja, dulce

En este caso, cada uno de los tags habla sobre una propiedad del objeto Manzana, pero no son categorías a la que éste pertenezca. Se trata de una estructura plana de términos que lo caracterizan, en un esquema de es o tiene.

Dado que ambos esquemas son diferentes, pero no son opuestos, es posible utilizarlos simultáneamente para obtener una mayor riqueza en la organización de la información. Una estructura de clasificación es útil, por ejemplo, para establecer un esquema de navegación jerárquico. Los directorios son un muy buen ejemplo de esto.

Categorías en el directorio de Dmoz.org

Dmoz.org utiliza un esquema de categorías para organizar la información de su Directorio.

Los tags, en cambio, permiten alimentar muy precisamente un buscador, porque identifican los términos más relevantes de un contenido. Esto es particularmente importante para contenido no textual, como fotografías, videos y audio, casos en los que no es fácil extraerlos automáticamente.

Tags en Flickr.com

Flickr.com permite asociar tags a las fotografías de sus usuarios, esto facilita la descripción de las imágenes.

Existen casos en que es posible beneficiarse del uso de ambos esquemas por su complementariedad. Por ejemplo, Spurl.net, un organizador de bookmarks, permite organizar los bookmarks en categorías y asignarles tags. Esto facilita el encontrar la información mediante el uso de un buscador o explorando directamente las categorías o los tags.

Categorías en Spurl.net

Spurl.net permite el uso de categorías para organizar los bookmarks.

Tags en Spurl.net

De un modo complementario, Spurl.net da la posibilidad de asociar tags a los bookmarks.

Un factor adicional de los tags es el uso en esquemas colectivos, conocidos como folksonomía, en que cada usuario puede agregar tags a diferentes contenidos, de modo que se complementan entre ellos y ayudan a describir de modo más completo al contenido.

En el rediseño de una intranet que realicé hace poco, se definieron dos esquemas de categorización diferentes: uno centrado en los contenidos y otro en la estructura de la institución. Por ejemplo, un formulario de solicitud de vacaciones correspondería a la categoría Formularios, según su tipo de contenido y a Recursos Humanos desde la perspectiva de la organización. El primer esquema se utilizó para navegar el sitio y el segundo para aportar un esquema complementario. Adicionalmente, se sugirió el uso de tags para que los propios usuarios pudieran ayudar a definir los contenidos de un modo más eficiente y con una perspectiva centrada en los usuarios, desde abajo hacia arriba (orgánica), antes que desde arriba hacia abajo, como es el caso con los esquemas de clasificación predefinidos.

En este caso, los tags deberían contribuir a alimentar las descripciones
de contenidos mediante los metadatos, y de este modo se pueden mejorar o precisar los resultados de búsqueda.

En suma, hemos visto que:

  • las categorías ordenan y agrupan contenido
  • los tags hablan de características del contenido, pero no lo agrupan
  • las categorías pueden ser jerárquicas
  • los tags son planos, sin jerarquías
  • las categorías determinan a qué pertenece el contenido
  • los tags hablan de qué es o que tiene el contenido