Arquitectura de Información de Personas a Wireframes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Arquitectura de Información de Personas a Wireframes

on

  • 1,858 views

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.

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.

Statistics

Views

Total Views
1,858
Views on SlideShare
1,857
Embed Views
1

Actions

Likes
2
Downloads
43
Comments
1

1 Embed 1

http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Arquitectura de Información de Personas a Wireframes Presentation Transcript

  • 1. 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
  • 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 («InformationArchitecturefortheWorld Wide Web») de Peter Morville y Louis Rosenfeld(O’Reilly).
  • 4. Componentes de la AI (cont.)
    Mayor información checar las presentaciones:
    • http://slidesha.re/eeFRxE
    • 5. http://slidesha.re/bzgK54
    • 6. http://slidesha.re/aSOe5f
    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.
  • 7. 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:
    Cómo organizar la información. Todo el contenido que va en el sitio web, la aplicación, revista, etc.
    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.
    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.
    Organizar
    Determinar la recuperación de información
    Estructurar la navegación
    Etiquetar
  • 8. 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.
  • 9. 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 cardsorting. 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.
  • 10. 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á.
  • 11. 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 usuarioy la respuesta del sistema. Lo anterior es útil de colocar en una tabla o bien, armar un diagrama.
    InformationArchitecture. Blueprintsforthe Web.
    Christina Wodtke and Austin Govella.
    New Riders, 2009.
  • 12. 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.
    Organizar
    Determinar la recuperación de información
    Estructurar la navegación
    Etiquetar
  • 13. 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.
    InformationArchitecture. Blueprintsforthe Web.
    Christina Wodtke and Austin Govella.
    New Riders, 2009.
  • 14. Elaboración de marcos alambrados
    El wireframeo 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.
  • 15. InformationArchitecturefortheWorld Wide Web.
    Peter Morville and Louis Rosenfeld.
    O’Reilly, 2006.
  • 16. InformationArchitecturefortheWorld Wide Web.
    Peter Morville and Louis Rosenfeld.
    O’Reilly, 2006.
  • 17. InformationArchitecturefortheWorld Wide Web.
    Peter Morville and Louis Rosenfeld.
    O’Reilly, 2006.
  • 18. Recursos para la elaboración de wireframes
    • http://webdesignledger.com/freebies/10-free-printable-web-design-wireframing-templates
    • 19. http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
    • 20. http://wwwhatsnew.com/2010/03/04/herramientas-para-creacion-de-prototipos-y-wireframes/
    • 21. http://www.masternewmedia.org/es/2010/06/12/wireframing_y_prototipos_para_websites_mejores_herramientas.htm
    • 22. http://wireframes.linowski.ca/
  • Gracias.
    http://tzek-design.com/blog
    http://facebook.com/omitzek
    http://twitter.com/tzek
    * Apuntes realizados sin fines de lucro.