1. Intro sobre Arquitectura
de Información y uso de
wireframe

2. Arquitectura de
Información (AI)
La Arquitectura de Información considera la
organización y estructura, jerarquía y etiquetación en
un producto de información, ya sea un sitio web, una
aplicación para móviles, un periódico, un diccionario
o incluso un punto de venta.

3. Componentes de la AI
Un enfoque tradicional de la AI está dado por el libro
del oso («Information Architecture for the World Wide
Web») de Peter Morville y Louis Rosenfeld (O’Reilly).

4. Componentes de la AI
(cont.)
En este libro se menciona que una arquitectura de
información se puede caracterizar por sus:
Sistemas de organización.
Sistemas de navegación.
Sistemas de búsqueda.
Sistemas de etiquetado.

5. Componentes de la AI (cont.)
Como sus nombres lo dicen, de lo que
debemos estar conscientes cuando estemos
inmersos en un proceso de arquitectura de
información es de:
ORGANIZAR
Cómo organizar la información. Todo el
contenido que va en el sitio web, la aplicación,
DETERMINAR LA
revista, etc. ESTRUCTURAR LA RECUPERACIÓN DE
NAVEGACIÓN INFORMACIÓN
Cómo definir cuáles serán los medios o formas
que empleará el usuario para moverse dentro
ETIQUETAR
del contenido, un «espacio» a la vez.
Cómo definir la forma en la que el usuario podrá
recuperar información.
Determinar cuáles son los términos o
vocabulario adecuado para etiquetar o nombrar
el contenido.

6. Personas
Para focalizar las decisiones de diseño en el
usuario y evitar caprichos o criterios propios
muy arraigados, podemos escoger el
método de Personas (de Alan Cooper).
En sí se trata de elaborar perfiles que
representan al arquetipo de los usuarios de
un producto de diseño.
Además de ser básico el darle vida al
personaje siempre debemos tomar en
cuenta la meta de uso: ¿qué meta quiere
cumplir la Persona?
En adición, las Personas al querer cumplir
con algo, tienen a su vez escenarios que
describen tareas o metas por cumplir.

7. Taxonomía del contenido
Cuando intentamos organizar el contenido,
categorizarlo, caracterizarlo o como gustemos
llamarlo, tendemos a crear una estructura rígida
para dividir semánticamente la información.
Podemos decir que hacemos una taxonomía
con el contenido.
En un principio, con la ayuda de la o las
Personas creadas, necesitamos explayarnos y
especificar el contenido potencial del producto.
Aquí podemos aplicar un ejercicio de free
listing.
Luego, podemos relacionar el contenido
mediante mapas de afinidad o con un ejercicio
de card sorting. La estructura resultante nos da
una idea de cómo está organizada la
información, aunque no necesariamente
podríamos definir nuestra estructura de
navegación de la misma manera.

8. Escenarios
Los escenarios por su naturaleza narrativa nos
pueden ayudar a conformar en la cabeza cómo se
da el flujo de trabajo o las interacciones básicas con
el producto que vamos a diseñar. En este sentido,
funcionan como una herramienta de diseño.
Los escenarios pueden servir como herramienta de
evaluación. Cuando realizamos una prueba de
usabilidad sobre nuestro producto diseñado, el
escenario será el camino que el participante seguirá.

9. Análisis de tareas
Para concretar y dejar por sentado cómo se
están dando los flujos de trabajo es
necesario entender y determinar cuáles son
las acciones que la o las Personas pueden
llevar a cabo dentro de éstos. Esto es,
analizar las tareas asociadas a ese
escenario.
Conforme vamos narrando el escenario
podemos ir detectando cuáles son los pasos
que debe seguir el usuario, así hasta
terminar la narración. Luego, para cada paso
se desglosa en sus sub-pasos o sub-tareas.
Con este desglose se pueden explicar las
acciones del usuario y la respuesta del INFORMATION ARCHITECTURE. BLUEPRINTS FOR THE
sistema. Lo anterior es útil de colocar en una WEB.
CHRISTINA WODTKE AND AUSTIN GOVELLA.
tabla o bien, armar un diagrama. NEW RIDERS, 2009.

10. Generar la arquitectura
Cuando ya se conoce a las Personas y
sus escenarios y cómo se dan los flujos
de trabajo en el sistema o producto a
través de un análisis de tareas tomando ORGANIZAR
en cuenta que entendemos cómo se
estructura semánticamente el
contenido, se tiene una gran idea de lo DETERMINAR LA
ESTRUCTURAR LA RECUPERACIÓN
que se necesita. El cómo ensamblar NAVEGACIÓN DE INFORMACIÓN
estas ideas es la generación de la
arquitectura de información.
ETIQUETAR
En este punto se tiene que tener
consciencia de qué implica constituir
para el contenido un sistema de
organización, navegación, etiquetado y
quizá de búsqueda, que resulten
adecuados para el contexto del
proyecto.

11. Elaboración del mapa del aplicativo
El concepto de mapa de
aplicativo se asocia realmente,
a aplicativos web, aunque
puede generalizarse la idea
para mostrar cómo está
estructurado el contenido del
sistema o producto de
información a partir de
grandes bloques, cómo éstos
INFORMATION ARCHITECTURE. BLUEPRINTS FOR THE
se interrelacionan (i.e. cómo WEB.
navegarlos) y cuáles fueron CHRISTINA WODTKE AND AUSTIN GOVELLA.
NEW RIDERS, 2009.
los términos seleccionados
para etiquetarlos.

12. Elaboración de WireFrame
El wireframe o marco alambrado es una representación
visual de cómo queda distribuida la información del
contenido en adición con los componentes (i.e. los
widgets) que permiten la interacción con el sistema o
producto de información que diseñamos.
A un bajo nivel de fidelidad, la forma de la presentación
involucra sólo el manejo de blanco y negro o grises a lo
más. Debe notarse la jerarquía visual asociada tanto a
la información textual como a lo que podría ser
información gráfica; sin embargo la parte gráfica
básica se omite en algunos casos.
Como apoyo a su entendimiento, los marcos deben
contemplar el manejo de call-outs o notas al margen.

13. INFORMATION ARCHITECTURE FOR THE WORLD WIDE
WEB.
PETER MORVILLE AND LOUIS ROSENFELD.

14. INFORMATION ARCHITECTURE FOR THE WORLD WIDE
WEB.
PETER MORVILLE AND LOUIS ROSENFELD.

15. INFORMATION ARCHITECTURE FOR THE WORLD WIDE
WEB.
PETER MORVILLE AND LOUIS ROSENFELD.

16. Recursos para la elaboración de
wireframes
http://webdesignledger.com/freebies/10-free-printable-web-design-
wireframing-templates
http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-
resources/
http://wwwhatsnew.com/2010/03/04/herramientas-para-creacion-de-
prototipos-y-wireframes/
http://www.masternewmedia.org/es/2010/06/12/
wireframing_y_prototipos_para_websites_mejores_herramientas.htm
http://wireframes.linowski.ca/
OMNIGRAF FLE HOTGLOO
MICROSOFT VISIO IPLOTZ
AXURE BALSAMIC
BALSAMIQ CACOO
KEYNOTE