arquitectura de la informacion

17,964 views

Published on

Arquitectura de la información. Material correspondiente al Seminario de: Diseño y Organización de la Producción, Maestría en Diseño de Aplicaciones Multimedia, Universidad Politécnica de catalunya, España.

7 Comments
42 Likes
Statistics
Notes
No Downloads
Views
Total views
17,964
On SlideShare
0
From Embeds
0
Number of Embeds
750
Actions
Shares
0
Downloads
0
Comments
7
Likes
42
Embeds 0
No embeds

No notes for slide
  • arquitectura de la informacion

    1. 1. arquitectura de la información Geni de Vilar [email_address] Máster DAM-UPC - Abril 2004
    2. 2. <ul><li>Introducción a la Arquitectura de la Información </li></ul><ul><li>Proceso de diseño del site en AI: </li></ul><ul><ul><li>Fase 1: Planificación estratégica </li></ul></ul><ul><ul><li>Fase 2: Análisis de contenidos y servicios </li></ul></ul><ul><ul><li>Fase 3: Organización de la información </li></ul></ul><ul><ul><li>Fase 4: Diseño de los sistemas de navegación </li></ul></ul><ul><ul><li>Fase 5: Diseño de los sistemas de rotulación </li></ul></ul><ul><ul><li>Fase 6: Diseño de página (AI-Diseño interfaz) </li></ul></ul><ul><li>Conclusiones </li></ul><ul><li>Anexo: Modelo ARGUS </li></ul><ul><li>Análisis caso real: www.3xl.net </li></ul>Índice
    3. 3. Introducción a la Arquitectura de la Información
    4. 4. ¿Qué es la AI? Disciplina emergente basada en Ciencia de la Organiza- ción de la Información Entendimiento humano que define organización de la información navegación etiquetados sistemas de búsqueda en los sistemas de información
    5. 5. ¿Qué es la AI? <ul><li>Antes de diseñar un sitio web, se debe definir: </li></ul><ul><ul><ul><ul><ul><li>contenido </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>objetivos </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>funcionalidades </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>navegación </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>interacción en general </li></ul></ul></ul></ul></ul><ul><li>Todas éstas son tareas propias de la Arquitectura de la Información </li></ul>
    6. 6. Importancia de la AI <ul><li>Contenido mal estructurado </li></ul><ul><li>+ </li></ul><ul><li>sistemas de búsqueda e interacción no claros </li></ul><ul><li>= </li></ul><ul><li>mala experiencia del usuario </li></ul><ul><li>= </li></ul><ul><li>fracaso del diseño del site </li></ul><ul><li>-> importancia AI </li></ul>
    7. 7. ¿Qué es un Arquitecto de la Información? <ul><li>Richard Saul Wurman </li></ul><ul><li>Una persona que hace claro lo complejo. </li></ul><ul><li>Una persona que crea el mapa o la estructura de información que permite a otros encontrar su camino personal al conocimiento. </li></ul><ul><li>La ocupación profesional emergente del siglo XXI dedicada a las necesidades de la era, basada en la claridad, el entendimiento humano y la ciencia de la organización de la información. </li></ul>APUNTE: Wurman fue el primero en usar el término “ Arquitectos de la Información ” en su libro del mismo nombre publicado en 1962.
    8. 8. ¿Qué es un Arquitecto de la Información? <ul><li>Edward Tufte </li></ul><ul><li>El responsable de diseñar la presentación de la información para facilitar el entendimiento. </li></ul>APUNTE : Tufte es profesor en la Universidad de Yale. Su trabajo, plasmado en diversos libros, trata acerca de cómo presentar todo tipo de información en la forma más clara posible.
    9. 9. ¿Qué es un Arquitecto de la Información? <ul><li>Rosenfeld y Morville </li></ul><ul><li>AI clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia </li></ul><ul><li>determina el contenido y funcionalidad que el sitio va a tener </li></ul>APUNTE : Louis y Peter fundaron Argus, empresa especializada en consultoría de Arquitectura de la Información. Con la publicación de su libro en 1998 generaron una comunidad en torno al tema, llamada ACIA. El libro ha sido traducido al español por la editorial McGraw-Hill el año 2000, bajo el nombre &quot;Arquitectura de la Información para el WWW&quot;
    10. 10. ¿Qué es un Arquitecto de la Información? <ul><li>Rosenfeld y Morville </li></ul><ul><li>especifica cómo los usuarios van a encontrar la informacion al definir su organización, navegación, etiquetado y sistemas de búsqueda </li></ul><ul><li>mapea cómo el sitio se va a acomodar al cambio y crecimiento en el tiempo </li></ul>
    11. 11. Misión del Arquitecto de la Información <ul><li>Clarificar objetivos del sitio web (equilibrio necesidades cliente-usuario) </li></ul><ul><li>Determinar contenidos y funcionalidades </li></ul><ul><li>Diseñar cómo los usuaris encontrarán la información , mediante: </li></ul><ul><ul><li>Sistemes de organización </li></ul></ul><ul><ul><li>Sistemas de navegación </li></ul></ul><ul><ul><li>Sistemas de rotulado </li></ul></ul><ul><ul><li>Sistemas de búsqueda </li></ul></ul><ul><li>Proyectar cómo el sitio web se adaptará a los cambios y a su crecimiento </li></ul>
    12. 12. Perfil profesional del Arquitecto de la Información <ul><ul><li>Periodismo / Ciencias de la Información </li></ul></ul><ul><ul><li>Psicología </li></ul></ul><ul><ul><li>Biblioteconomía </li></ul></ul><ul><ul><li>Diseño Gráfico </li></ul></ul><ul><ul><li>Marketing </li></ul></ul><ul><ul><li>Ciencias de la Computación </li></ul></ul>
    13. 13. El Arquitecto de la información dentro del equipo <ul><li>Naturaleza multidisciplinar del diseño : el diseño de un proyecto web no puede ser desarrollado por una sola persona. Son necesarios: </li></ul><ul><ul><ul><li>Jefe de proyectos (project manager) </li></ul></ul></ul><ul><ul><ul><li>Arquitecto de la Información </li></ul></ul></ul><ul><ul><ul><li>Director artístico </li></ul></ul></ul><ul><ul><ul><li>Director técnico </li></ul></ul></ul><ul><ul><ul><li>Director comercial </li></ul></ul></ul>
    14. 14. La relación de la AI con la usabilidad Arquitectura de la información USABILIDAD rel.con <ul><li>Efectividad: La medida en la cual los usuarios pueden alcanzar sus metas de tareas. </li></ul><ul><li>Eficiencia: Mide los recursos usados para realizar la tarea. </li></ul><ul><li>Satisfacción: Mide la reacción afectiva de los usuarios respecto a la aplicación. </li></ul>medida en la cual una aplicación puede ser usada por usuarios específicos para conseguir objetivos específicos con:
    15. 15. La relación de la usabilidad con el UCD <ul><li>UCD ( User Centred Design ) </li></ul>USABILIDAD orígenes una forma de entender el diseño que tiene en cuenta al usuario en cada fase de su proceso
    16. 16. La relación de la usabilidad con el UCD Adaptado de: Terry Swack, “Experience Design”.
    17. 17. La relación del UCD con la HCI <ul><li>HCI (Human Computer Interaction) </li></ul>UCD (User Centred Design) orígenes corriente de estudio multidisciplinar que investiga la interacción entre las personas y los ordenadores desde diferentes puntos de vista: procesos psicológicos, comunicativos, físicos, ergonómicos, etc.
    18. 18. Proceso de diseño del site en AI
    19. 19. Proceso de diseño del site en AI <ul><li>Fase 1: Planificación estratégica </li></ul><ul><li>Fase 2: Análisis de contenidos y servicios </li></ul><ul><li>Fase 3: Organización de la información </li></ul><ul><li>Fase 4: Diseño de los sistemas de navegación </li></ul><ul><li>Fase 5: Diseño de los sistemas de rotulación </li></ul><ul><li>Fase 6: Diseño de página (AI-Diseño interfaz) </li></ul>
    20. 20. FASE 1: Planificación estratégica
    21. 21. FASE 1: Planificación estratégica <ul><li>Definición concreta de los objetivos del site </li></ul><ul><li>Establecer formas de actualitzación de contenidos </li></ul><ul><li>Establecer responsables del diseño y desarrollo del site </li></ul><ul><li>(Esta fase la ejecuta, normalmente, el Jefe de Proyecto. El Arquitecto de la Información le ayuda en la definición de objetivos) </li></ul>
    22. 22. FASE 2: Análisis de contenidos y servicios
    23. 23. FASE 2: Análisis de contenidos y servicios <ul><li>El análisis de contenidos y servicios define toda la información que el usuario podrá encontrar dentro de la aplicación o site y todos los servicios (webmail, encuestas, buscadores, foros, chat, juegos, etc.) </li></ul>
    24. 24. FASE 3: Organización de la información
    25. 25. FASE 3: Organización de la información Sistemas de clasificación Estructuras Definir en base a qué atributos vamos a agrupar los contenidos. Definir tipos de relaciones entre los elementos del contenido y los grupos. Se basa en: organización de la información
    26. 26. FASE 3: Organización de la información DIFICULTADES Ambigüedad Heterogeneidad Diferencias en las perspectivas Políticas internas El lenguaje es ambiguo Un sitio web tiene objetivos muy distintos. Perspectiva del creador es diferente a perspec-tiva del usuario. Compromisos de la empresa (en el proceso de organización de la información)
    27. 27. FASE 3: Organización de la información Definen en base a qué atributos vamos a agrupar los contenidos. sistemas de clasificación de la información
    28. 28. FASE 3: Organización de la información Exactos Ambiguos Secciones muy de- finicas y excluyen- tes entre ellas. El usuario debe sa- ber el nombre de lo que busca. Alfabético Cronológico Geográfico Temáticos: por tipos de contenido Funcionales: (software: abrir,...) Para públicos específicos: (Profes-estudiants) Conducidos por metáforas: (Windows) NO!!! Esquemas híbridos: ¡¡¡confunden!!! sistemas de clasificación de la información
    29. 29. FASE 3: Organización de la información Estructuras Definen tipos de relaciones entre los elementos del contenido y los grupos.
    30. 30. FASE 3: Organización de la información Estructuras Secuenciales Matriciales Jerárquicas Hipertextuales Matriciales dinámicas
    31. 31. FASE 3: Organización de la información http://download.cnet.com/ Estructura secuencial
    32. 32. FASE 3: Organización de la información http://www-emultimedia.upc.es/webem/indexc.htm Estructura jerárquica
    33. 33. FASE 3: Organización de la información http://argus-acia.com/index.html Estructura hipertextual
    34. 34. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial Curso 3 Curso 2 Curso 1 Tutores Profesores Alumnos
    35. 35. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Lunes Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA
    36. 36. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Martes Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA
    37. 37. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Miércoles Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA
    38. 38. FASE 3: Organización de la información Estructuras combinadas Curso 3 Curso 2 Curso 1 Convoc. 3 Convoc. 2 Convoc. 1
    39. 39. FASE 3: Organización de la información EJEMPLO
    40. 40. FASE 3: Organización de la información “ Proyecto de diseño y desarrollo de un CD-ROM promocional de unas galerías comerciales” DESCRIPCIÓN PROYECTO: Promocionar las tiendas y servicios del centro comercial. OBJETIVOS: Los clientes del centro. Se les regalaría el CD-ROM al comprar en cualquier tienda del centro, para que conozca todos los servicios y otras tiendas que le ofrece el centro. USUARIOS:
    41. 41. FASE 3: Organización de la información Totalidad de información
    42. 42. FASE 3: Organización de la información El conjunto de tiendas y locales del centro comercial.
    43. 43. FASE 3: Organización de la información Dividir en unidades lógicas
    44. 44. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Bar Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo”
    45. 45. FASE 3: Organización de la información Definir sistemas de clasificación
    46. 46. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Bar Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo” Sistema de clasificación exacto: Clas. alfabética ¡NO! El usuario tendría que saber los nombre de los locales...
    47. 47. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Restaurante Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo” Rel: son tiendas de ropa Rel: son para salir de noche Rel: son restaurantes Sistema de clasificación ambiguo: Clas. temática
    48. 48. FASE 3: Organización de la información Definir estructura de contenidos
    49. 49. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Para comprar ropa Para salir Para comer Para peinarte Centro comercial tiene tiene tiene tiene tiene Estruc. jerárquica
    50. 50. FASE 4: Diseño de los sistemas de navegación
    51. 51. FASE 4: Diseño de los sistemas de navegación <ul><li>El diseño de la navegación debe orientar al usuario y minimizar el efecto de rotura que se produce en “saltar” de un sitio a otro. </li></ul><ul><li>Es tan importante como la organización de la información. </li></ul>
    52. 52. FASE 4: Diseño de los sistemas de navegación tipos de sistemas de navegación Jerárquicos Ad hoc Globales Locales La jerarquía de la información es el sistema de navegación principal. Sistema que afecta a todo el site, y está presente en todas las páginas. Sistema que afecta a un sub- site, y convive con el sistema global de navegación. Hipertexto, o vínculos exter- nos especiales.
    53. 53. FASE 4: Diseño de los sistemas de navegación Integrados Remotos Barras de navegación Conjunto vínculos hipertextuales juntos. Navegación global y local. Siempre visible. Problema en la elección de iconos. Menús textuales Secciones de 1r nivel de contenidos. Tabla de contenido : en sistemas jerárquicos. Texto o imágenes. Muy útil. Índice: Cuando no jerárquico. Mapa del site : Presenta estructura de forma visual, más allá del texto. Visita guiada : muy útil en zonas restringidas con servicions. Naveg. lineal. elementos de navegación Menús desplegables Muchas opciones de navegación compac- tas. Ojo con tapar contenido.
    54. 54. FASE 4: Diseño de los sistemas de navegación elementos de navegación <ul><li>Tener en cuenta que, además de los elementos de navegación, tenemos: </li></ul><ul><li>Sistemas de búsqueda </li></ul><ul><li>La navegación del browser </li></ul>
    55. 55. FASE 5: Diseño de los sistemas de rotulación
    56. 56. FASE 5: Diseño de los sistemas de rotulación Rotular Etiquetar, dar nombre a las unidades de contenidos, a los grupos de contenidos, y a los servicios y funcionalidades del site. Es muy difícil (ambigüedad del lenguaje).
    57. 57. FASE 5: Diseño de los sistemas de rotulación Rotulado de los sistemas de navegación Especialmente importante: aplicados con eficacia, crean sentido de familiaridad.
    58. 58. FASE 5: Diseño de los sistemas de rotulación Rótulos de indexación - <META> o registro base de datos - no visibles para el usuario, pero muy importantes para los sistemas de búsqueda
    59. 59. FASE 6: Diseño de página
    60. 60. FASE 6: Diseño de página Diseño de página Diseño de la página de inicio Diseño de las páginas interiores (importancia diseño navegación)
    61. 61. FASE 6: Diseño de página La página de inicio <ul><li>El diseño de página de la página de inicio es diferente que el del resto de páginas (a pesar de que comparte estilo visual). </li></ul><ul><li>Las páginas de bienvenida que no dan información son totalmente inútiles y lo único que hacen es relentizar al usuario en su intento por llegar a la información que le interesa. </li></ul>
    62. 62. FASE 6: Diseño de página La página de inicio <ul><li>Logotipo más grande </li></ul><ul><li>Ha de responder a lar preguntas: “¿DÓNDE ESTOY?” y “¿QUÉ ENCONTRARÉ EN ESTE SITE?”. </li></ul><ul><li>Debe incluir un directorio de las principales areas de contenido del site. </li></ul><ul><li>Si el site tiene mucha información, en la página de inicio debe haber un buscador . </li></ul>
    63. 63. FASE 6: Diseño de página La página de inicio <ul><li>Se presentan las noticias o promociones especiales. </li></ul><ul><li>Se destina mucho más espacio para la navegación que en el resto de páginas. </li></ul><ul><li>La navegación global puede ser diferente que en el resto de páginas. </li></ul><ul><li>Debe ser una página “viva” , con información nueva constantemente. </li></ul>
    64. 64. FASE 6: Diseño de página <ul><li>En todo diseño de página, deben estar presentes 4 tipos de navegación: </li></ul><ul><ul><li>1. Navegar “hacia abajo” , hacia los hijos de la página </li></ul></ul><ul><ul><li>2. Navegar “hacia arriba” , hacia los padres de la pág. </li></ul></ul><ul><ul><li>3. Navegar a través de secciones del site </li></ul></ul><ul><ul><li>4. Navegar con utilidades como la ayuda o el buscador </li></ul></ul>La navegación aplicada al diseño de página
    65. 65. FASE 6: Diseño de página
    66. 66. FASE 6: Diseño de página 1. Navegar a ítem “hijo”
    67. 67. FASE 6: Diseño de página 2. Navegar a sección padre
    68. 68. FASE 6: Diseño de página 3. Navegar a través de las secciones del site
    69. 69. FASE 6: Diseño de página 4. Navegar a través de utilidades
    70. 70. FASE 6: Diseño de página
    71. 71. FASE 6: Diseño de página <ul><li>La navegación global debe estar en todas las páginas (en la home puede ser diferente). </li></ul><ul><li>Utilizar un mismo estilo de navegación en todas las páginas para crear una navegación consistente y incrementar el control del usuario sobre ésta. </li></ul><ul><li>Separar (espacialmente, visualmente), los cuatro tipos de navegación: arriba, abajo, a través, utilidades. </li></ul><ul><li>Utilizar encabezados descriptivos arriba de las páginas. </li></ul>La navegación aplicada al diseño de página
    72. 72. FASE 6: Diseño de página <ul><li>Ayudar a los usuarios que lleguen desde links externos a acceder a la página principal y a las secciones principales. </li></ul><ul><li>No crear páginas muertas, sin opción de navegación. </li></ul><ul><li>Situar los elementos de navegación arriba y debajo de las páginas. </li></ul><ul><li>Incluir elementos de navegación que nos lleven a utilidades básicas (Ej: Ayuda) </li></ul>La navegación aplicada al diseño de página
    73. 73. FASE 6: Diseño de página Elementos de navegación integrados Barras de navegación Menús textuales Menús desplegables Elementos de navegación integrados
    74. 74. FASE 6: Diseño de página <ul><li>Conjunto vínculos hipertextuales juntos. </li></ul><ul><li>Navegación global y local. </li></ul><ul><li>Siempre visible. </li></ul><ul><li>Problema en la elección de iconos (que sean conceptualmente claros). </li></ul>Barras de navegación
    75. 75. FASE 6: Diseño de página <ul><li>Ordenar el texto en una secuencia lógica y hacer que aparezcan en el mismo orden en todas las páginas. </li></ul><ul><li>Opciones más visitadas: dos primeras y la última del listado. </li></ul><ul><li>Intentar reducir el número de opciones textuales de primer nivell (aprox. 8 opciones). </li></ul><ul><li>Inactivar el elemento textual en el que está el usuario. Lo ubica dentro del site. </li></ul>Menús textuales
    76. 76. FASE 6: Diseño de página <ul><li>Usar los mismos criterios de ordenación que en los Menús Textuales. </li></ul><ul><li>Tener cuidado con los contenidos que se tapan cuando se despliega el menú. </li></ul>Menús desplegables
    77. 77. FASE 6: Diseño de página EJEMPLO
    78. 78. FASE 6: Diseño de página Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Para comprar ropa Para salir Para comer Para peinarte Centro comercial tiene tiene tiene tiene tiene
    79. 79. FASE 6 : Diseño de página Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Comprar ropa Salir Comer Peinarte Bienvenida ¿qué quieres hacer? Opciones generales siempre disponibles: -Salir de la aplicación -Imprimir lista de establecimientos -Mapa del centro Página web ¿quieres hacer algo más? Salir No Sí Mapa
    80. 80. FASE 6: Diseño de página ¿Qué quieres hacer? comprar salir comer peinarme Logo grande
    81. 81. FASE 6: Diseño de página Logo grande ¿Qué quieres hacer? comprar salir comer peinarme Funcionalidades: salir, mapa, imprimir,
    82. 82. FASE 6: Diseño de página ¿Qué quieres hacer? comprar salir comer peinarme Zara Massimo Duti Logo grande
    83. 83. FASE 6: Diseño de página logo ZARA
    84. 84. FASE 6: Diseño de página logo ZARA
    85. 85. FASE 6: Diseño de página logo ZARA Rest. Manolo Pizzeria Mamma
    86. 86. Conclusiones
    87. 87. Conclusiones <ul><li>De nada sirve tener un gran sistema informático si el usuario no es capaz de comprenderlo . </li></ul><ul><li>Utilizar un proceso de diseño basado en la arquitectura de la información facilita la comprensión y navegación del usuario, por lo que genera una experiencia de usuario positiva. </li></ul>
    88. 88. Conclusiones <ul><li>Las etapas del diseño de la arquitectura de la información de un site son: </li></ul><ul><li>Fase 1: Planificación estratégica </li></ul><ul><li>Fase 2: Análisis de contenidos y servicios </li></ul><ul><li>Fase 3: Organización de la información </li></ul><ul><li>Fase 4: Diseño de los sistemas de navegación </li></ul><ul><li>Fase 5: Diseño de los sistemas de rotulación </li></ul><ul><li>Fase 6: Diseño de página (AI-Diseño interfaz) </li></ul>
    89. 89. Conclusiones <ul><li>Es importante tener en cuenta la figura del Arquitecto de la Información cuando se quiere realizar un web site complejo o cuando se diseña un sistema de información. </li></ul><ul><li>Una mala estructuración de los contenidos y un mal diseño del acceso a estos contenidos harán fracasar el site, aunque a nivel visual o tecnológico tenga mucha complejidad o esté muy bien diseñado. </li></ul>
    90. 90. Anexo: El MODELO ARGUS de diseño de la información
    91. 91. AI: el proceso de diseño -> Modelo ARGUS
    92. 92. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Proceso de diseño del site </li></ul><ul><ul><ul><ul><li>Objetivos </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Audiencia </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Requisitos de Contenido y Funcionales </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Agrupar Contenido </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Diseño Conceptual </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Brainstorming </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Explorar Metáforas </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Escenarios </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Mapas de Alto Nivel </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Esquemas de Página </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Bocetos de Diseño </li></ul></ul></ul></ul>
    93. 93. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>EJEMPLO: </li></ul><ul><li>Cliente : empresa que fabrica manerial para la construcción </li></ul><ul><li>Descripción del proyecto : Diseño y desarrollo de un sitio web con catálogo de productos y posibilidad de venta online a constructores y promotores immobiliarios. </li></ul>
    94. 94. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Objetivos </li></ul><ul><li>Agilizar el proceso de venta a clientes fijos de la empresa cliente y augmentar la bolsa de clientes. </li></ul><ul><li>Ofrecer información de interés a los clientes para que visiten a menudo el site y así vean las ofertas de productos. </li></ul><ul><li>Mejorar la imagen de la empresa. </li></ul>
    95. 95. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Audiencia </li></ul><ul><li>comprarán: constructures y promotores (a ellos debemos orientar los contenidos y parte de la interfaz) </li></ul><ul><li>efectuará la compra: secretarios y/o comerciales (hábito de uso de nuevas tecnologías) (a ellos orientaremos parte de la interfaz) </li></ul>
    96. 96. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Requisitos de contenidos y funcionalidades </li></ul><ul><li>Contenidos: </li></ul><ul><ul><ul><li>información de ls productos y de las ofertas </li></ul></ul></ul><ul><ul><ul><li>actualidad relacionada con el mundo de la construcción </li></ul></ul></ul><ul><ul><ul><li>información corporativa </li></ul></ul></ul><ul><li>Funcionalidades: </li></ul><ul><ul><ul><li>búsqueda de producto concreto </li></ul></ul></ul><ul><ul><ul><li>mapa del site </li></ul></ul></ul><ul><ul><ul><li>compra en entorno seguro </li></ul></ul></ul>
    97. 97. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Agrupar contenido </li></ul><ul><li>1. Catálogo de productos </li></ul><ul><ul><li>1.1. Productos tipo x </li></ul></ul><ul><ul><ul><ul><li>1.1.1. Producto 1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>1.2.3. Producto n </li></ul></ul></ul></ul><ul><ul><li>1.2. Productos tipo y </li></ul></ul><ul><li>2. Actualidad </li></ul><ul><li>3. Información corporativa </li></ul>
    98. 98. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Diseño conceptual </li></ul><ul><li>Página inicio -> atracción a través de actualidad informativa y de ofertas de productos </li></ul><ul><li>Catálogo -> primero información producto más fotografía, luego posibilidad compra </li></ul><ul><li>etc. </li></ul>
    99. 99. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Brainstorming </li></ul><ul><li>Aportación conjunta de ideas sobre diseño conceptual, metáforas, interfaz,... </li></ul>
    100. 100. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Explorar metáforas </li></ul><ul><li>Construcción -> interfaz que juegue con elementos visuales del mundo de la construcción. </li></ul><ul><li>Ejs.: </li></ul><ul><ul><ul><li>página de inicio se estructurará, a nivel visual, sobre un plano de arquitecto. </li></ul></ul></ul><ul><ul><ul><li>notícias como clasificados immobiliarios en los periódicos </li></ul></ul></ul><ul><ul><ul><li>en lugar de carrito de la compra, una carretilla de construcción </li></ul></ul></ul>
    101. 101. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Escenarios </li></ul><ul><li>Plano arquitectura página inicio </li></ul><ul><li>Marketplace </li></ul><ul><li>Notícias </li></ul><ul><li>... </li></ul>
    102. 102. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Mapas de alto nivel </li></ul>inicio catálogo info corporativa actualidad Productos x Productos y P1 P2 Pn P1 P2 Pn Compra paso 1 Compra paso 2 Compra paso 3 Noti 1 Noti n
    103. 103. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Esquemas de página </li></ul>logo Comprar buscar mapa Linea oferta Entradita entradita entradita entradita tradita texto texto entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita tradita texto texto entradita actualidad Linea titular notícia Entradita entradita entradita etradita Entradita evntradita entradita eradita Entradita ent Linea titular notícia Linea titular notícia Linea titular notícia monográficos Linea nombre monográfico Linea nombre monográfico infor.corporativa barra funciona- lidades
    104. 104. AI: ¿Cómo se trabaja? Proceso ARGUS <ul><li>Bocetos de diseño </li></ul><ul><li>Esquemas de la interfaz visual, ya aplicando composición, colores, tipografia, tratamiento de los elementos multimedia... El conjunto de elementos que darán el look&feel. </li></ul>

    ×