Proceso de Diseo de Sitios WWW Proceso de

Proceso de Diseño de Sitios WWW

Proceso de Diseño n Análisis n n n Diseño n n n Metáforas Arquitectura de alto nivel Bosquejos del diseño Prototipos Producción n Objetivos, alcances, y características del sitio Análisis Competitivo Métricas a utilizar Audiencias, contenido y funcionalidad Asociación de contenidos Principios de diseño y guías de estilo Post-Producción n Seguimiento de los usuarios

Análisis n n n Determinar alcance y características del proyecto Análisis competitivo Definir objetivos Identificar audiencias Identificar contenidos y funcionalidad Agrupar contenidos

Alcance y características del proyecto n Desarrollar reuniones entre todos los involucrados en el proyecto n n n Propietarios de la idea Arquitectos de la Información Técnicos Sponsors Determinar: n n n Idea general del sitio Alcance del proyecto Misión y Visión actual / futura del sitio Posible plan de acción Prioridades Factibilidades técnicas

Alcance y características del proyecto Proyecto “Sitio. Educativo. com” Idea general: se pretende desarrollar un sitio de contenidos, para proveer información a toda la comunidad educativa en general (alumnos, docentes, profesionales, autoridades). Misión del sitio: el sitio debe constituirse en un referente para la comunidad educativa en el mediano plazo. Posible plan de acción: proveer un sitio básico en el corto plazo, para captar la adhesión de la comunidad. Ir incorporando gradualmente mayor funcionalidad. Prioridades: construir una comunidad de visitantes en el menor plazo posible.

Análisis competitivo n Identificar puntos fuertes y débiles de los potenciales competidores n Incluir: n Aspectos funcionales n Arquitectura de la información n Diseño n Satisfacción subjetiva n Analizar arquitectura de la información de los sitios similares n Estudiar sitios nacionales e internacionales

Análisis competitivo Proyecto “Sitio. Educativo. com”: Análisis Competitivo Sitios analizados: Contenidos. com Educar. com Elsabio. com Aspectos hallados: “Contenidos. com” y “Educar. com” poseen relativamente pocos contenidos educativos. El diseño gráfico no es atrayente. En el caso de contenidos el diseño es muy malo, ya que no puede apreciarse claramente el rol del sitio “Elsabio. com” es el mejor de los sitios analizados. Su diseño gráfico y contenidos son excelentes. Muy fácil de navegar. Oportunidades: Los sitios analizados se basan en contenidos educativos pre-construidos (libros, cursos, etc. ). La posibilidad de construir contenidos educativos dinámicamente, por la misma comunidad, aparece aún inexplorada.

Definir Objetivos n Determinar: n n n Misión del sitio Misión de la organización (para sitios organizacionales) Rol del sitio en la misión de la organización Objetivos a corto plazo del sitio Objetivos a largo plazo Visión del sitio en uno o dos años.

Definir objetivos Proyecto “Sitio. Educativo. com”: Objetivos - Mision del sitio: proveer información para toda la comunidad educativa. Los contenidos debieran ir creciendo, con información suministrada por la propia comunidad y los integrantes del staff del sitio. El sitio debiera ser un punto de referencia para toda la comunidad, contando con una alta cantidad de accesos que permita la participación de sponsors importantes, y/o la venta de publicidad. Objetivos a corto plazo: lograr un crecimiento sostenido en la cantidad de información en el sitio. Objetivos a largo plazo: obtener un sitio que sea punto de referencia en el area, con una alta cantidad de información y cantidad de accesos, tal que posibiliten su venta. Visión del sitio dentro de uno o dos años: sitio con información ingresada por la propia comunidad, que no sea facilmente encontrable en los medios disponibles actualmente (ej. Libros, cursos). (valor agregado del sitio)

Determinar métricas a usar n Determinar formas de medir el éxito (o no) del sitio. n n Listar posibles mediciones sobre el sitio, a evaluar en distintos plazos en el futuro, y ponderar la importancia que se le asignará a cada uno de ellos. n Ayuda en la determinación de los “targets” del sitio Aspectos mensurables: n Reducciones de costos n Desarrollo de transacciones n Servicios ofrecidos n Percepción general del público n Performance del sitio

Determinar métricas a usar Proyecto “Sitio. Educativo. com”: Mediciones a efectuar Desarrollo de transacciones: Si el sitio decide incluir ventas por comercio electrónico, debieran poder medirse: . cantidad y crecimiento en las operaciones mensuales via la web (4) Servicios a los clientes: (principal “target” del sitio) crecimiento de la cantidad de información contenida en el sitio (1) interacciones via mail (2) cantidad de usuarios registrados (1) cantidad de comentarios ingresados por los usuarios (2) - Percepción de los usuarios en general: comentarios y percepción de los visitantes del sitio (2) comparación positiva con respecto a los potenciales competidores (2) menciones del sitio en la prensa (1) numeros de links al sitio, desde otros sitios (2) Performance del sitio: cantidades y crecimientos en los accesos al sitio (1) rango y diversidad de visitantes (2)

Identificar audiencias n Estudiar posibles audiencias, para determinar las necesidades y características de cada una de ellas n n n Audiencias más importantes del sitio? Otras audiencias no contempladas? Medios? Inversores? Competidores? Que acciones efectuará en el sitio cada una de estas audiencias? Porqué visitarían el sitio? Porqué volverían al sitio? Las audiencias más importantes no necesariamente serán aquellas que visiten más frecuentemente el sitio Generar una lista de posibles audiencias, la importancia relativa de estas audiencias y sus necesidades más importantes. n La priorización de la importancia relativa de las distintas audiencias será util para la consideración de las posibles estructuras de la información del sitio.

Identificar audiencias Proyecto “Sitio. Educativo. com”: Análisis de Audiencias Audiencia general: comunidad educativa - Alumnos. Preescolares (#2) ü juegos didácticos Alumnos Primarios (EGB) (#1) ü busqueda de información sobre un tema dado (puede leer la informacion, bajarla, imprimirla, etc), ü obtener resúmenes de lecciones sobre un determinado tema, ü resolución de ejercicios (lecto-escritura / matemática / etc. ) (los ejercicios podrían ser los existentes en el sitio a modo de ejemplo, y/o ejercicios propuestos por el alumno) ü orientación vocacional, ü compra de libros o material educativo ü discusiones con profesores, maestros o alumnos ü información torneos deportivos / competiciones /. . Alumnos Secundarios (Polimodal) (#1) . . - Alumnos Terciarios (Universitarios, carreras terciarias, etc. ) (#3) . . .

Identificar audiencias Proyecto “Sitio. Educativo. com”: Análisis de Audiencias Docentes Preescolares (#2) üelaboración de juegos didácticos üconsultas a especialistas (psico-pedagógicos) Docentes Primarios (#1) üelaboración de guías prácticas y/o ejercicios, üdiscusión de ejercicios y/o contenidos con colegas, üobtener complementos para materiales educativos, üelaboración de planificaciones, ücompra de libros o material didáctico, üconsultas a especialistas en un tema dado, üconsultas a psico-pedagogos o similares. üinformación cursos / congresos /. . Docentes Secundarios (#1) . . Docentes Terciarios (#3) . . Directivos (#3). . . . Profesionales: (#2). .

Identificar contenidos y funcionalidad n Determinar contenidos y funciones provistas por el sitio n n n Observar contenidos en sitios existentes Listas de contenidos “deseados” Definir fuentes y formatos en los que está disponible la información Pueden analizarse estrategias de introducción gradual de contenidos La mayor parte del proceso de construcción de un sitio web está dada por su diseño, por lo tanto no ahorrar tiempo en estas fases!

Identificar contenidos y funcionalidad Proyecto “Sitio. Educativo. com” Información acerca de distintos temas (historia, geografía, matemática, etc. . ) (1) Juegos didácticos (para preescolar, EGB, polimodal) (3) Planes de estudio (para preescolar, EGB, polimodal) (2) Lecciones (para preescolar, EGB, polimodal) (2) Comentarios ingresados por los visitantes (1) Tests de orientación vocacional (2) Ejercicios resueltos con comentarios (para preescolar, EGB, polimodal) (2) Ejercicios para resolver (para preescolar, EGB, polimodal) (2) Libros y/o material didáctico (bibliografía) (3) Carreras universitarias y/o terciarias + planes de estudio + info gral. (2) Ofertas de trabajo + pasantías (2) Como elaborar una guía práctica? (3) Como elaborar una planificación? (3) Cursos de actualización, especialización, congresos, posgrados. . (2) Trámites para legalización de titulos (4) Tramites para matriculación en colegios (4). .

Agrupar los contenidos n n Agrupar los contenidos en categorías de alto nivel para la estructura de la información. Determinar: n Forma de organización del contenido: n n n Audiencia Tópico Función Metáfora Forma en que los usuarios navegarán la información Metodología: n Reuniones con diseñadores del sitio, y representantes de las audiencias. n Construir tarjetas con principales contenidos, y solicitar a los integrantes de la reunión que las agrupen por similitud entre ellos

Agrupar los contenidos n Alternativas para la de organización del sitio: n Audiencia n n n Adecuados para sitios con más de una audiencia claramente definida. Permite guardar la dirección (´bookmark´) del sub-sitio particular de cada visitante Permite adecuar este sub-sitio para cada audiencia particular Pueden ser “abiertos” o “cerrados”, de acuerdo a si una audiencia puede observar los contenidos de otra audiencia Tópico n n n Útil para localizar las páginas de un tema dado. No es muy utilizado como organización principal del sitio, n Debe brindar una cobertura muy amplia del sitio. Utilizado como medio de acceso al contenido

Agrupar los contenidos n Alternativas para la de organización del sitio: n Función: n n Organiza la información como una colección de procesos, funciones o tareas. Apropiado cuando es posible determinar un conjunto de tareas del visitante, con una alta prioridad. No suele ser adecuado para sitios de contenido, sí para sitios con aplicaciones (ej. Intranets o extranets) Metáfora: n n Permite a los usuarios comprender los contenidos del sitio, a través de su relación con un concepto conocido. Es generalmente dificultoso hallar la metáfora adecuada, y garantizar que sea adecuada para todos los visitantes.

Agrupar los contenidos Proyecto “Sitio. Educativo. com”: Agrupamiento de contenidos Se sugiere una organización principal por audiencia (en los primeros niveles), y luego introducir gradualmente organizaciones por tópicos (materias) Alternativas de la organización por audiencia: Agrupamientos posibles: · A) Alumnos (Preescolar, EGB, Polimodal, Terciario / Universitario) · Docentes (Preescolar, EGB, Polimodal, Terciario / Universitario) · Directivos · Profesionales B) Preescolar (Alumnos, Docentes) · EGB (Alumnos, Docentes) · Polimodal (Alumnos, Docentes) · Terciario / Universitario (Alumnos, Docentes) · Directivos · Profesionales

Diseño n n n Identificar metáforas convenientes Desarrollar escenarios Arquitectura de alto nivel Construir bosquejos de los diseños Construir prototipos basados en la web

Metáforas n Una metáfora adecuada puede resultar adecuada para guiar al usuario en la navegación y comprensión del sitio. n n No siempre las metáforas resultan adecuadas, por lo cual no debe forzarse la utilización de una de ellas. Tipos de metáforas: n Organizativas: n Aprovecha la organización existente de un sistema, para guiar la comprensión del sitio. n Ej. Sitio de una concesionaria de automoviles n Utilizar departamentos: ventas de coches nuevos, ventas de coches usados, reparaciones y services, autopartes.

Metáforas n Tipos de metáforas n Funcionales: n Basadas en las tareas que se pueden desempeñar en un ambiente tradicional. n n Visuales: n Utilizan elementos gráficos conocidos para crear una comprensión a los nuevos usuarios. n n Ej. Operaciones que se pueden realizar en una biblioteca: recorrer, buscar, pedir asistencia, etc. Ej. Iconos de TE blancos, azules y amarillos para ilustrar las distintas secciones de una guía telefónica. “Sitio. Educativo. com”: Metáfora recreo-aula?

Escenarios n Descripción de posibles operaciones con el sitio n n Metodología: n n n Mostrar la información a presentar al usuario, y las formas posibles de navegación Crear un “actor” para cada posible escenario Describir una sesión simple de estos actores con el sitio Los sitios debieran describir como los usuarios efectúan las tareas de navegación (“Browsing”) y búsquedas (“Searching”)

Arquitectura de alto nivel n Organización de la información obtenida con los procesos previos n n Describe la estructura y rotulos de las principales áreas Debiera identificar: n n Puntos de entrada al sitio Contenidos a mostrar en primera página Posible organización de “sub-sitios” Elementos comunes en páginas web n n “Search & Browse”, “Feedback”, “News”, . . . Agrupamiento de páginas relacionadas En principio, debieran ignorarse los elementos de navegación y detalles particulares de cada página El diagrama debe ser discutido posteriormente en una reunión y contrastado contra los escenarios descriptos anteriormente

Arquitectura de alto nivel

Arquitectura de alto nivel Introd. (Descripc. ) Preescolar EGB Polimodal Contenidos Página Ppal. Terciarios Directivos Profesional Nav. p/tema Buscar o Navegar Discusiones o Comentarios Noticias Buscador Nav. p/curso Nav. juegos Comentarios Chats Foros

Descripciones de páginas n Elaborar descripciones textuales de los contenidos de cada página n n Mostrar información y links Pueden ser utilizados conjuntamente con los escenarios para analizar el sitio n n Observar el funcionamiento del sitio en acción Permiten efectuar tests de usbilidad simples

Descripciones de páginas

Descripciones de páginas Página EGB Alumnos Tests Vocacionales Cursos Librería Docentes Cursos Librerías Búsquedas avanzadas Recorrido del sitio Por tema Por curso Juegos Salas de reunión Comentarios Chats Foros

“Bosquejos” del diseño n Prototipos en papel diseño de las páginas n n Describe principales líneas de estilo Elaboración: reuniones compuestas por: n n n Diseñadores Técnicos Arquitectos de la información n n “Diseño de interfaces multi-disciplinario” Una vez verificados y testeados, deben ser implementados como prototipos de mayor fidelidad (en la web)

“Bosquejos” del diseño

Producción n n Diagramas detallados de la arquitectura Asociación de contenidos Inclusión de guías de estilo Documentación de las páginas

Diagramas detallados de la arquitectura n Descripción del sitio completo n n Incluye toda la información, desde la página principal a las páginas destino. Incluye sistemas de rotulado y navegación Indicar los contenidos que deben estar agrupados en una página Diferenciar páginas locales y remotas n n Las páginas locales heredarán el estilo local n “look&feel”, navegación, rotulado Pueden indicarse los sistemas de navegación

Diagramas detallados de la arquitectura

Diagramas detallados de la arquitectura Tests Vocac. Alumnos Cursos Clase Recreo Librería Docentes EGB Buscar o Navegar Discusiones o Comentarios Cursos Materias Recreo Elab. Guias Prácticas Tareas administrativas Ejerc. Juegos Torneos Clase Tema Materias Juegos Tema Ejerc.

Asociación del contenido n División o agrupamiento del contenido en componentes lógicas n n Cada componente lógico requiere un tratamiento individual Los componentes lógicos deben ser asociados a la arquitectura de la información n n No necesariamente implica una relación 1 -1 entre páginas y componentes lógicos Construir una tabla de asociaciones

Asociación del contenido

Asociación del contenido Tabla de Asociaciones Componente lógico Destino (Página) P 36 -1 2. 2. 3 P 36 -2 2. 3. 3 P 36 -3 2. 2. 2 P 36 -4 2. 2. 1 P 36 -5 2. 2. 5. 1 P 36 -6 2. 2. 5. 2 P 36 -7 2. 2. 5. 3 P 36 -8 2. 2. 5. 1 P 36 -9 2. 2. 5. 2 P 36 -10 2. 2. 5. 3