Proceso de Diseo de Sitios WWW

Proceso de Diseo

Anlisis

Objetivos, alcances, y caractersticas del sitio Anlisis Competitivo Mtricas a utilizar Audiencias, contenido y funcionalidad Metforas Arquitectura de alto nivel Bosquejos del diseo Prototipos Asociacin de contenidos Principios de diseo y guas de estilo Seguimiento de los usuarios

Diseo

Produccin

Post-Produccin

Anlisis

Determinar alcance y caractersticas del proyecto Anlisis competitivo Definir objetivos Identificar audiencias Identificar contenidos y funcionalidad Agrupar contenidos

Alcance y caractersticas del proyecto

Desarrollar reuniones entre todos los involucrados en el proyecto

Propietarios de la idea Arquitectos de la Informacin Tcnicos Sponsors

Determinar:

Idea general del sitio Alcance del proyecto Misin y Visin actual / futura del sitio Posible plan de accin Prioridades Factibilidades tcnicas

Alcance y caractersticas del proyecto

Proyecto SitioEducativo.com Idea general: se pretende desarrollar un sitio de contenidos, para proveer informacin a toda la comunidad educativa en general (alumnos, docentes, profesionales, autoridades). Misin del sitio: el sitio debe constituirse en un referente para la comunidad educativa en el mediano plazo. Posible plan de accin: proveer un sitio bsico en el corto plazo, para captar la adhesin de la comunidad. Ir incorporando gradualmente mayor funcionalidad. Prioridades: construir una comunidad de visitantes en el menor plazo posible.

Anlisis competitivo

Identificar puntos fuertes y dbiles de los potenciales competidores

Incluir: Aspectos funcionales Arquitectura de la informacin Diseo Satisfaccin subjetiva

Analizar arquitectura de la informacin de los sitios similares Estudiar sitios nacionales e internacionales

Anlisis competitivo
Proyecto SitioEducativo.com: Anlisis Competitivo

Sitios analizados: Contenidos.com Educar.com Elsabio.com

Aspectos hallados: Contenidos.com y Educar.com poseen relativamente pocos contenidos educativos. El diseo grfico no es atrayente. En el caso de contenidos el diseo es muy malo, ya que no puede apreciarse claramente el rol del sitio Elsabio.com es el mejor de los sitios analizados. Su diseo grfico y contenidos son excelentes. Muy fcil de navegar.

Oportunidades: Los sitios analizados se basan en contenidos educativos pre-construidos (libros, cursos, etc.). La posibilidad de construir contenidos educativos dinmicamente, por la misma comunidad, aparece an inexplorada.

Definir Objetivos

Determinar:

Misin del sitio Misin de la organizacin (para sitios organizacionales) Rol del sitio en la misin de la organizacin Objetivos a corto plazo del sitio Objetivos a largo plazo Visin del sitio en uno o dos aos.

Definir objetivos
Proyecto SitioEducativo.com: Objetivos Mision del sitio: proveer informacin para toda la comunidad educativa. Los contenidos debieran ir creciendo, con informacin 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 participacin de sponsors importantes, y/o la venta de publicidad. Objetivos a corto plazo: lograr un crecimiento sostenido en la cantidad de informacin en el sitio. Objetivos a largo plazo: obtener un sitio que sea punto de referencia en el area, con una alta cantidad de informacin y cantidad de accesos, tal que posibiliten su venta. Visin del sitio dentro de uno o dos aos: sitio con informacin ingresada por la propia comunidad, que no sea facilmente encontrable en los medios disponibles actualmente (ej. Libros, cursos). (valor agregado del sitio)

Determinar mtricas a usar

Determinar formas de medir el xito (o no) del sitio.

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. Ayuda en la determinacin de los targets del sitio Aspectos mensurables: Reducciones de costos Desarrollo de transacciones Servicios ofrecidos Percepcin general del pblico Performance del sitio

Determinar mtricas a usar

Proyecto SitioEducativo.com: Mediciones a efectuar

Desarrollo de transacciones: Si el sitio decide incluir ventas por comercio electrnico, 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 informacin contenida en el sitio (1) interacciones via mail (2) cantidad de usuarios registrados (1) cantidad de comentarios ingresados por los usuarios (2) - Percepcin de los usuarios en general: comentarios y percepcin de los visitantes del sitio (2) comparacin 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

Estudiar posibles audiencias, para determinar las necesidades y caractersticas de cada una de ellas

Audiencias ms importantes del sitio? Otras audiencias no contempladas? Medios? Inversores? Competidores? Que acciones efectuar en el sitio cada una de estas audiencias? Porqu visitaran el sitio? Porqu volveran al sitio?

Las audiencias ms importantes no necesariamente sern aquellas que visiten ms frecuentemente el sitio
Generar una lista de posibles audiencias, la importancia relativa de estas audiencias y sus necesidades ms importantes.

La priorizacin de la importancia relativa de las distintas audiencias ser util para la consideracin de las posibles estructuras de la informacin del sitio.

Identificar audiencias
Proyecto SitioEducativo.com: Anlisis de Audiencias

Audiencia general: comunidad educativa - AlumnosPreescolares (#2) juegos didcticos Alumnos Primarios (EGB) (#1) busqueda de informacin sobre un tema dado (puede leer la informacion, bajarla, imprimirla, etc), obtener resmenes de lecciones sobre un determinado tema, resolucin de ejercicios (lecto-escritura / matemtica / etc.) (los ejercicios podran ser los existentes en el sitio a modo de ejemplo, y/o ejercicios propuestos por el alumno) orientacin vocacional, compra de libros o material educativo discusiones con profesores, maestros o alumnos informacin torneos deportivos / competiciones / .... Alumnos Secundarios (Polimodal) (#1) .......... - Alumnos Terciarios (Universitarios, carreras terciarias, etc.) (#3) ...........

Identificar audiencias
Proyecto SitioEducativo.com: Anlisis de Audiencias Docentes Preescolares (#2) elaboracin de juegos didcticos consultas a especialistas (psico-pedaggicos) Docentes Primarios (#1) elaboracin de guas prcticas y/o ejercicios, discusin de ejercicios y/o contenidos con colegas, obtener complementos para materiales educativos, elaboracin de planificaciones, compra de libros o material didctico, consultas a especialistas en un tema dado, consultas a psico-pedagogos o similares. informacin cursos / congresos / .... Docentes Secundarios (#1) ......... Docentes Terciarios (#3) ......... Directivos (#3) ....... Profesionales: (#2) .........

Identificar contenidos y funcionalidad

Determinar contenidos y funciones provistas por el sitio

Observar contenidos en sitios existentes Listas de contenidos deseados Definir fuentes y formatos en los que est disponible la informacin

Pueden analizarse estrategias de introduccin gradual de contenidos

La mayor parte del proceso de construccin de un sitio web est dada por su diseo, por lo tanto no ahorrar tiempo en estas fases!

Identificar contenidos y funcionalidad

Proyecto SitioEducativo.com

Informacin acerca de distintos temas (historia, geografa, matemtica, etc....) (1) Juegos didcticos (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 orientacin vocacional (2) Ejercicios resueltos con comentarios (para preescolar, EGB, polimodal) (2) Ejercicios para resolver (para preescolar, EGB, polimodal) (2) Libros y/o material didctico (bibliografa) (3) Carreras universitarias y/o terciarias + planes de estudio + info gral. (2) Ofertas de trabajo + pasantas (2) Como elaborar una gua prctica? (3) Como elaborar una planificacin? (3) Cursos de actualizacin, especializacin, congresos, posgrados .... (2) Trmites para legalizacin de titulos (4) Tramites para matriculacin en colegios (4) .........

Agrupar los contenidos

Agrupar los contenidos en categoras de alto nivel para la estructura de la informacin.

Determinar:

Forma de organizacin del contenido:

Audiencia Tpico Funcin Metfora

Forma en que los usuarios navegarn la informacin

Metodologa:

Reuniones con diseadores del sitio, y representantes de las audiencias.

Construir tarjetas con principales contenidos, y solicitar a los integrantes de la reunin que las agrupen por similitud entre ellos

Agrupar los contenidos

Alternativas para la de organizacin del sitio:

Audiencia

Adecuados para sitios con ms de una audiencia claramente definida. Permite guardar la direccin (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

Tpico

til para localizar las pginas de un tema dado. No es muy utilizado como organizacin principal del sitio, Debe brindar una cobertura muy amplia del sitio. Utilizado como medio de acceso al contenido

Agrupar los contenidos

Alternativas para la de organizacin del sitio:

Funcin:

Organiza la informacin como una coleccin 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)
Permite a los usuarios comprender los contenidos del sitio, a travs de su relacin con un concepto conocido. Es generalmente dificultoso hallar la metfora adecuada, y garantizar que sea adecuada para todos los visitantes.

Metfora:

Agrupar los contenidos

Proyecto SitioEducativo.com: Agrupamiento de contenidos Se sugiere una organizacin principal por audiencia (en los primeros niveles), y luego introducir gradualmente organizaciones por tpicos (materias) Alternativas de la organizacin 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

Diseo

Identificar metforas convenientes Desarrollar escenarios Arquitectura de alto nivel Construir bosquejos de los diseos Construir prototipos basados en la web

Metforas

Una metfora adecuada puede resultar adecuada para guiar al usuario en la navegacin y comprensin del sitio.

No siempre las metforas resultan adecuadas, por lo cual no debe forzarse la utilizacin de una de ellas.

Tipos de metforas:

Organizativas: Aprovecha la organizacin existente de un sistema, para guiar la comprensin del sitio.

Ej. Sitio de una concesionaria de automoviles Utilizar departamentos: ventas de coches nuevos, ventas de coches usados, reparaciones y services, autopartes.

Metforas

Tipos de metforas

Funcionales: Basadas en las tareas que se pueden desempear en un ambiente tradicional.

Ej. Operaciones que se pueden realizar en una biblioteca: recorrer, buscar, pedir asistencia, etc.

Visuales: Utilizan elementos grficos conocidos para crear una comprensin a los nuevos usuarios.

Ej. Iconos de TE blancos, azules y amarillos para ilustrar las distintas secciones de una gua telefnica.

SitioEducativo.com: Metfora recreo-aula?

Escenarios

Descripcin de posibles operaciones con el sitio

Mostrar la informacin a presentar al usuario, y las formas posibles de navegacin

Metodologa:

Crear un actor para cada posible escenario Describir una sesin simple de estos actores con el sitio

Los sitios debieran describir como los usuarios efectan las tareas de navegacin (Browsing) y bsquedas (Searching)

Arquitectura de alto nivel

Organizacin de la informacin obtenida con los procesos previos

Describe la estructura y rotulos de las principales reas

Debiera identificar:

Puntos de entrada al sitio Contenidos a mostrar en primera pgina Posible organizacin de sub-sitios Elementos comunes en pginas web

Search & Browse, Feedback, News, ...

Agrupamiento de pginas relacionadas En principio, debieran ignorarse los elementos de navegacin y detalles particulares de cada pgina

El diagrama debe ser discutido posteriormente en una reunin y contrastado contra los escenarios descriptos anteriormente

Arquitectura de alto nivel

Arquitectura de alto nivel

Introd. (Descripc.) Preescolar EGB Polimodal Contenidos Pgina Ppal. Terciarios Directivos Profesional Buscar o Navegar Discusiones o Comentarios Noticias Buscador

Nav. p/tema
Nav. p/curso Nav. juegos

Comentarios

Chats

Foros

Descripciones de pginas

Elaborar descripciones textuales de los contenidos de cada pgina

Mostrar informacin y links

Pueden ser utilizados conjuntamente con los escenarios para analizar el sitio

Observar el funcionamiento del sitio en accin Permiten efectuar tests de usbilidad simples

Descripciones de pginas

Descripciones de pginas
Pgina EGB Alumnos Tests Vocacionales Cursos Librera Docentes Cursos Libreras Bsquedas Bsquedas avanzadas Recorrido del sitio Por tema Por curso Juegos Salas de reunin Comentarios Chats Foros

Bosquejos del diseo

Prototipos en papel del diseo de las pginas

Describe principales lneas de estilo

Elaboracin: reuniones compuestas por:

Diseadores Tcnicos Arquitectos de la informacin

Diseo de interfaces multi-disciplinario

Una vez verificados y testeados, deben ser implementados como prototipos de mayor fidelidad (en la web)

Bosquejos del diseo

Produccin

Diagramas detallados de la arquitectura Asociacin de contenidos Inclusin de guas de estilo Documentacin de las pginas

Diagramas detallados de la arquitectura

Descripcin del sitio completo

Incluye toda la informacin, desde la pgina principal a las pginas destino. Incluye sistemas de rotulado y navegacin Indicar los contenidos que deben estar agrupados en una pgina Diferenciar pginas locales y remotas

Las pginas locales heredarn el estilo local look&feel, navegacin, rotulado

Pueden indicarse los sistemas de navegacin

Diagramas detallados de la arquitectura

Diagramas detallados de la arquitectura

Tests Vocac.
Cursos Alumnos

Tema
Clase Recreo Materias Materias Materias

Ejerc.

Juegos
Torneos Tema Ejerc.

Librera
Docentes Buscar o Navegar Discusiones o Comentarios Cursos Clase Recreo Elab. Guias Prcticas Tareas administrativas

Materias Materias Materias Juegos

EGB

Asociacin del contenido

Divisin o agrupamiento del contenido en componentes lgicas

Cada componente lgico requiere un tratamiento individual Los componentes lgicos deben ser asociados a la arquitectura de la informacin

No necesariamente implica una relacin 1-1 entre pginas y componentes lgicos Construir una tabla de asociaciones

Asociacin del contenido

Asociacin del contenido

Tabla de Asociaciones Componente lgico P36-1 P36-2 P36-3 P36-4 P36-5 P36-6 P36-7 P36-8 P36-9 P36-10 Destino (Pgina) 2.2.3 2.3.3 2.2.2 2.2.1 2.2.5.1 2.2.5.2 2.2.5.3 2.2.5.1 2.2.5.2 2.2.5.3