PROCESO DE

DISEO DE SITIOS
WEB
BY JIMMY DAVILA

PROCESO DE DISEO
Anlisis

Objetivos, alcances, y caractersticas del sitio

Anlisis Competitivo
Mtricas a utilizar
Audiencias, contenido y funcionalidad
Diseo
Metforas
Arquitectura de alto nivel
Bosquejos del diseo
Prototipos
Produccin
Asociacin de contenidos
Principios de diseo y guas de estilo
Post-Produccin
Seguimiento de los usuarios

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

Rol del sitio en la misin de la organizacin

Misin de la organizacin (para sitios

organizacionales)
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

Tpico

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

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)

Metfora:
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.

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

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

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

Destino (Pgina)

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