arquitectura de información de personas a wireframes

17
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

Upload: omar-sosa-tzec

Post on 19-Jan-2015

1.486 views

Category:

Design


0 download

DESCRIPTION

Síntesis de cómo va el proceso de Arquitectura de Información partiendo de la definición de la Persona o arquetipo de usuario hasta qué es hacer un wireframe o marco alambrado.

TRANSCRIPT

Page 1: 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

Page 2: Arquitectura de Información de Personas a Wireframes

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.

Page 3: Arquitectura de Información de Personas a Wireframes

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).

Page 4: Arquitectura de Información de Personas a Wireframes

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

Page 5: Arquitectura de Información de Personas a Wireframes

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

Page 6: Arquitectura de Información de Personas a Wireframes

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.

Page 7: Arquitectura de Información de Personas a Wireframes

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.

Page 8: Arquitectura de Información de Personas a Wireframes

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á.

Page 9: Arquitectura de Información de Personas a Wireframes

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.

Page 10: Arquitectura de Información de Personas a Wireframes

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

Page 11: Arquitectura de Información de Personas a Wireframes

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.

Page 12: Arquitectura de Información de Personas a Wireframes

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.

Page 13: Arquitectura de Información de Personas a Wireframes

Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.

Page 14: Arquitectura de Información de Personas a Wireframes

Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.

Page 15: Arquitectura de Información de Personas a Wireframes

Information Architecture for the World Wide Web.Peter Morville and Louis Rosenfeld.O’Reilly, 2006.

Page 17: Arquitectura de Información de Personas a Wireframes

Gracias.

http://tzek-design.com/bloghttp://facebook.com/omitzekhttp://twitter.com/tzek

* Apuntes realizados sin fines de lucro.