Proceso de Diseo de Sitios WWW

1
Proceso de Diseño de Sitios WWW
2
Proceso de Diseño

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

3
Análisis

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

4
Alcance y características del proyecto

• Desarrollar reuniones entre todos los
  involucrados en el proyecto
• Propietarios de la idea
• Arquitectos de la Información
• Técnicos
• Sponsors
• Determinar
• 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

5
Alcance y características del proyecto
Proyecto SitioEducativo.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.
6
Análisis competitivo

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

7
Análisis competitivo
Proyecto SitioEducativo.com Análisis
Competitivo Sitios analizados Contenidos.com Edu
car.com Elsabio.com Aspectos hallados Contenido
s.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. Oportunidad
es 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.
8
Definir Objetivos

• Determinar
• 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.

9
Definir objetivos
Proyecto SitioEducativo.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)
10
Determinar métricas 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 determinación de los targets del
  sitio
• Aspectos mensurables
• Reducciones de costos
• Desarrollo de transacciones
• Servicios ofrecidos
• Percepción general del público
• Performance del sitio

11
Determinar métricas a usar
Proyecto SitioEducativo.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)
12
Identificar audiencias

• Estudiar posibles audiencias, para determinar las
  necesidades y características de cada una de
  ellas
• 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.
• 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.

13
Identificar audiencias

• Proyecto SitioEducativo.com Análisis de
  Audiencias
• Audiencia general comunidad educativa
• -   AlumnosPreescolares (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)
• ...........

14
Identificar audiencias

• Proyecto SitioEducativo.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)

15
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 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!

16
Identificar contenidos y funcionalidad
Proyecto SitioEducativo.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) .........
17
Agrupar los contenidos

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

18
Agrupar los contenidos

• Alternativas para la de organización del sitio
• Audiencia
• 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
• Útil para localizar las páginas de un tema dado.
• No es muy utilizado como organización principal
  del sitio,
• Debe brindar una cobertura muy amplia del sitio.
• Utilizado como medio de acceso al contenido

19
Agrupar los contenidos

• Alternativas para la de organización del sitio
• Funció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
• 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.

20
Agrupar los contenidos
Proyecto SitioEducativo.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  
21
Diseño
 

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

 
22
Metáforas

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

23
Metáforas

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

24
Escenarios

• Descripción de posibles operaciones con el sitio
• Mostrar la información a presentar al usuario, y
  las formas posibles de navegación
• Metodología
• 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)

25
Arquitectura de alto nivel

• Organización de la información 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 página
• Posible organización de sub-sitios
• Elementos comunes en páginas web
• 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

26
Arquitectura de alto nivel
27
Arquitectura de alto nivel
Introd. (Descripc.)
Contenidos
Página Ppal.
Buscar o Navegar
Discusiones o Comentarios
Noticias
28
Descripciones de páginas

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

29
Descripciones de páginas
30
Descripciones de páginas
Página EGB Alumnos Tests Vocacionales Cursos L
ibrería Docentes Cursos Librerías Búsquedas B
úsquedas avanzadas Recorrido del sitio Por
tema Por curso Juegos Salas de
reunión Comentarios Chats Foros
31
Bosquejos del diseño

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

32
Bosquejos del diseño
33
Producción

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

34
Diagramas detallados de la arquitectura

• Descripción del sitio completo
• 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
• Las páginas locales heredarán el estilo local
• lookfeel, navegación, rotulado
• Pueden indicarse los sistemas de navegación

35
Diagramas detallados de la arquitectura
36
Diagramas detallados de la arquitectura
Tema
Tests Vocac.
Clase
Ejerc.
Cursos
Juegos
Recreo
Alumnos
Librería
Torneos
Tema
Docentes
Cursos
Clase
Ejerc.
Buscar o Navegar
EGB
Recreo
Juegos
Elab. Guias Prácticas
Discusiones o Comentarios
Tareas admi-nistrativas
37
Asociación del contenido

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

38
Asociación del contenido
39
Asociación del contenido
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)