Arquitectura de Información de Personas a Wireframes
-
Upload
omar-sosa-tzec -
Category
Design
-
view
1.497 -
download
0
description
Transcript of Arquitectura de Información de Personas a Wireframes
Arquitectura de Información:Síntesis sobre el proceso. De la creación de las personas hasta los marcos alambrados.
Elaborado por Omar Sosa Tzec.http://tzek-design.com
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.
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).
Componentes de la AI (cont.)
En este libro se menciona que una arquitectura de información se puede caracterizar por sus:
1. Sistemas de organización.
2. Sistemas de navegación.
3. Sistemas de búsqueda.
4. Sistemas de etiquetado.
Mayor información checar las presentaciones:
• http://slidesha.re/eeFRxE
• http://slidesha.re/bzgK54
• http://slidesha.re/aSOe5f
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:
1. Cómo organizar la información. Todo el contenido que va en el sitio web, la aplicación, revista, etc.
2. Cómo definir cuáles serán los medios o formas que empleará el usuario para moverse dentro del contenido, un «espacio» a la vez.
3. Cómo definir la forma en la que el usuario podrá recuperar información.
4. Determinar cuáles son los términos o vocabulario adecuado para etiquetar o nombrar el contenido.
Determinar la recuperación de
información
Etiquetar
Organizar
Estructurar la navegación
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.
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.
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á.
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 sistema. Lo anterior es útil de colocar en una tabla o bien, armar un diagrama.
Information Architecture. Blueprints for the Web.Christina Wodtke and Austin Govella.New Riders, 2009.
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 en cuenta que entendemos cómo se estructura semánticamente el contenido, se tiene una gran idea de lo que se necesita. El cómo ensamblar estas ideas es la generación de la arquitectura de información.
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.
Determinar la recuperación de
información
Etiquetar
Organizar
Estructurar la navegación
Elaboración del mapa del sitio
El concepto de mapa de sitio se asocia realmente, como su nombre lo indica, a sitios 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 se interrelacionan (i.e. cómo navegarlos) y cuáles fueron los términos seleccionados para etiquetarlos.
Information Architecture. Blueprints for the Web.Christina Wodtke and Austin Govella.New Riders, 2009.
Elaboración de marcos alambrados
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.
Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.
Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.
Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.
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/
Gracias.
http://tzek-design.com/bloghttp://facebook.com/omitzekhttp://twitter.com/tzek
* Apuntes realizados sin fines de lucro.