Proceso de Diseño de Sitios
WWW
Proceso de Diseño

Análisis





Diseño





Metáforas
Arquitectura de alto nivel
Bosquejos del diseño
Prototipos
Producció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

Seguimiento de los usuarios
Análisis






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

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
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.
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
Análisis competitivo
Proyecto “SitioEducativo.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

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.
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)
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
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)
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.
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)
...........
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)
.......
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
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 “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)
.........
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
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
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.
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
Diseño





Identificar metáforas convenientes
Desarrollar escenarios
Arquitectura de alto nivel
Construir bosquejos de los diseños
Construir prototipos basados en la web
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.
Metáforas

Tipos de metáforas

Funcionales:
 Basadas en las tareas que se pueden desempeñar en un
ambiente tradicional.


Visuales:
 Utilizan elementos gráficos conocidos para crear una
comprensión a los nuevos usuarios.


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.
“SitioEducativo.com”: Metáfora recreo-aula?
Escenarios

Descripción de posibles operaciones con el sitio


Metodología:



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

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
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

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
Descripciones de páginas
Descripciones de páginas
Página EGB
Alumnos
Tests Vocacionales
Cursos
Librerí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
“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)
“Bosquejos” del diseño
Producció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

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
 “look&feel”, navegación, rotulado
Pueden indicarse los sistemas de navegación
Diagramas detallados de la
arquitectura
Diagramas detallados de la
arquitectura
Tests
Vocac.
Cursos
Alumnos
Tema
Clase
Recreo
Librería
Docentes
EGB
Buscar o
Navegar
Discusiones o
Comentarios
Cursos
Materias
Materias
Materias
Juegos
Torneos
Clase
Recreo
Elab.
Guias
Prácticas
Tareas administrativas
Ejerc.
Materias
Materias
Materias
Juegos
Tema
Ejerc.
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
Asociación del contenido
Asociación del contenido
Tabla de Asociaciones
Componente lógico
Destino (Página)
P36-1
2.2.3
P36-2
2.3.3
P36-3
2.2.2
P36-4
2.2.1
P36-5
2.2.5.1
P36-6
2.2.5.2
P36-7
2.2.5.3
P36-8
2.2.5.1
P36-9
2.2.5.2
P36-10
2.2.5.3
Descargar

Proceso de Diseño de Sitios WWW