Contenido

Entorno para el diseo de MEC ............................................................................................... 1

Diseo de Comunicacin ...................................................................................................... 1
Diseo Computacional .......................................................................................................... 1
Preparacin y revisin de un prototipo del MEC .................................................................. 2
Interfaz hombre-maquina ........................................................................................................ 2
Disposicin de las zonas de comunicacin ............................................................................ 3
Elementos constitutivos de las zonas de comunicacin ...................................................... 4
Acerca de los mens .............................................................................................................. 4
Acerca de los textos ............................................................................................................... 4
Acerca del color y armona ................................................................................................... 5
Principios para combinar colores ..................................................................................... 5
Entorno para el diseo de MEC

A partir de los resultados del anlisis, es conveniente hacer explcitos los datos que
caracterizan el entorno del MEC (Material Educativo Computacional) que se va a
disear: destinatarios, rea de contenido, necesidad educativa, limitaciones y recursos
para los usuarios del MEC, equipo y soporte lgico que se van a utilizar.

Entorno del diseo

A quines se dirige?, Qu caractersticas tienen sus destinatarios?
Qu rea de contenido y unidad de instruccin se beneficia con el estudio del
MEC?
Qu problemas se pretenden resolver con el MEC?
Bajo qu condiciones se espera que los destinatarios usen el MEC?
Para un equipo con que caractersticas fsicas y lgicas conviene desarrollar el
MEC?

Diseo de Comunicacin

La zona de comunicacin en la que se maneja la interaccin entre usuario y programa

se denomina interfaz. Para especificarla, es importante determinar cmo se comunicar
el usuario con el programa, estableciendo mediante qu dispositivos y usando qu
cdigos o mensajes (interfaz de entrada); tambin se hace necesario establecer cmo
el programa se comunicar con el usuario, mediante qu dispositivos y valindose de
qu cdigos o mensajes (interfaz de salida).

Esto se sintetiza de la siguiente manera:

Diseo de interfaces
Qu dispositivos de entrada y salida conviene poner a disposicin del usuario
para que se intercomunique con el MEC?
Qu zonas de comunicacin entre usuario^ programa conviene poner a
disposicin en y alrededor del micromundo seleccionado?
Qu caractersticas debe tener cada una de las zonas de comunicacin?
Cmo verificar que la interfaz satisfcelos requisitos mnimos deseables?

Diseo Computacional

Con base en la necesidad se establece qu funciones es deseable que cumpla el MEC

en apoyo de sus usuarios. La estructura lgica que comandar la interaccin entre
usuario y programa deber permitir el cumplimiento de cada una de las funciones de
apoyo definidas para el MEC por tipo de usuario. Su especificacin conviene hacerla
modular, por tipo de usuario, y mediante refinamiento a pasos, de manera, que haya
niveles sucesivos de especificidad hasta que se llegue finalmente al detalle que hace
operacional cada uno de los mdulos que incluye el MEC.

1
La estructura lgica deber ser la base para formular el programa principal y cada uno
de los procedimientos que requiere el MEC.

Diseo computacional
Qu funciones se requiere que cumpla al MEC para cada uno de los tipos de
usuario?
Para el mdulo del profesor y para el del estudiante, qu estructura lgica
comandar la accin y qu papel cumplen cada uno de sus componentes?
Qu estructuras lgicas subyacen a cada uno de los componentes de la
estructura principal? Qu estructuras de datos, en memoria principal, y en
memoria secundaria, se necesitan para que funcione el MEC?

Preparacin y revisin de un prototipo del MEC

La fase final de un diseo consiste en llevar al

terreno del prototipo aquello que se ha
concebido y en verificar que esto tiene sentido
frente a la necesidad y poblacin a la que se
dirige el MEC.

La forma ms elemental de elaborar un prototipo

es hacer bocetos en papel de cada uno de los
ambientes que se van a utilizar, definiendo los
pantallazos que operacionalizan la estructura
lgica y las acciones asociadas a los eventos que
pueden acontecer en ellos.

Otra forma complementaria de crear un prototipo es hacer lo equivalente, pero en el

computador, a nivel de cascarn, como complemento del prototipo de papel y lpiz
con el que se define la red de pantallazos.

Como fruto de lo anterior se tendr una red de pantallazos que permite al grupo de
diseo verificar si su producto tiene sentido para satisfacer la necesidad que intenta
atender. Esta verificacin conviene que se haga con apoyo de expertos externos a los
diseadores, as como con usuarios representativos de la poblacin objeto. A cada uno
de ellos puede someterse a consideracin el bosquejo, conocer su reaccin general y
sus sugerencias particulares, como base para ajustar el diseo donde sea pertinente.

Interfaz hombre-maquina

La zona de comunicacin en la que se realiza la interaccin entre usuario y programa

se denomina interfaz: En ella intervienen los tipos de mensajes entendibles por el
usuario (verbales, icnicos, pictricos o sonoros) y por el programa (verbales, grficos,
seales elctricas...), los dispositivos de entrada y salida de datos que estn disponibles
para el intercambio de mensajes (v. gr., teclado, ratn, pantalla, parlante), as como las

2
zonas de comunicacin habilitadas en cada dispositivo (v. gr., en un teclado suele haber
una zona numrica y una alfabtica; en una pantalla suele haber zonas de mens y de
informacin, entre otras).

El diseo del sistema de intercomunicacin depende en gran medida de lo que se desea

que el usuario aprenda y de las caractersticas socio-culturales y generacionales de ste.
El diseador debe analizar con detalle la terminologa, simbologa y particularidades del
rea de enseanza-aprendizaje que cubre el material de instruccin. Pero tambin debe
ser consciente de la edad y condiciones de desarrollo sociocultural de los usuarios, para
adecuar los mensajes a sus caractersticas (v. gr., tuteo o no-tuteo, contextos relevantes,
uso de modismos, etc.). Estas condiciones deseadas se convierten en el foco que gua
la seleccin de dispositivos de entrada y salida, de los tipos de cdigos y los mensajes
que se permitir intercambiar, as como de las zonas de intercomunicacin que se van
a utilizar.

Disposicin de las zonas de comunicacin

Una vez se hayan definido las zonas de comunicacin que conviene utilizar, es
importante cuidar que las relaciones de simetra entre ellas sean apropiadas. La simetra
se refiere a la forma de agrupar los objetos dentro del rea de encuadre, teniendo como
referencia las proporciones de los ejes horizontales y verticales. La distribucin de un
pantallazo puede ser simtrica o asimtrica, segn se ilustra a
continuacin.

Distribucin simtrica y asimtrica de un pantallazo

Los estados asimtricos ms comunes guardan las proporciones [2/3 : 1/3] o [3/5 : 2/5].
El diseo de ventanas (pantallas partidas) deber guardar las proporciones de acuerdo
con el rol que deber cumplir cada ventana.

Distribuciones asimtricas neutrales

3
Elementos constitutivos de las zonas de comunicacin

Adems de la definicin de las zonas de comunicacin y su funcin, es necesario

establecer las caractersticas de los elementos que se van a utilizar en stas: mens,
textos, grficos, animaciones, colores, as como los efectos sonoros o cortinas musicales
que pueden acompaar la accin en el pantallazo. Cada uno de estos elementos implica
resolver una serie de interrogantes, tal como se establece a continuacin.

Acerca de los mens

Conviene que el usuario tenga control de lo que desea hacer, o ms bien el MEC debe
llevarlo? La respuesta a esta pregunta depende de quines son los usuarios, qu se est
tratando que aprendan y del papel que desempee el MEC.

En el caso de que convenga poner a disposicin del usuario mens para que escoja lo
que desea hacer, deben tomarse en cuenta las siguientes preguntas:

Conviene que sean textuales o grficos?

Es bueno que sean circulares (i.e., despus del ltimo sigue el primer
elemento) o basta con que sean lineales?
Amerita que sean desplegables o debern estar desplegados
completamente?
Estarn disponibles a todo lo largo del programa o slo en ciertas partes
del mismo?
Se manejarn con flechas, espacio, nmeros, o con un apuntador?
Se debern seguir en algn sentido u orden (i.e., el MEC verificar el orden
en que se sigue)?
Cmo se confirmar la escogencia de una opcin: con RETURN, doble
"click",...?

La solucin a interrogantes como los anteriores no es independiente de las herramientas

de software disponibles, ni tampoco de las caractersticas de la audiencia y de los
dispositivos de entrada disponibles.

Acerca de los textos

Un elemento casi siempre presente en el pantallazo es el texto. El papel del texto cambia
segn la estrategia ideada para lograr lo que el pantallazo se propone; en un caso, el
texto sirve de base para presentar la idea, en otro, es un organizador de ideas, un
apuntador de claves de observacin, o un simple elemento de control de flujo.
Cualquiera que sea el caso, la disposicin de los elementos textuales debe hacerse en la

4
forma ms esttica y efectiva. Pero, cmo decidir qu caractersticas deber tener las
zonas de comunicacin donde convenga hacer uso de textos? Ser necesario hallar
respuesta a preguntas como las
siguientes:
Conviene que los textos se desplieguen palabra por palabra, lnea por lnea,
prrafo por prrafo?
A qu velocidad debe desplegarse el texto?
Conviene que haya control de tiempo para lectura entre prrafos?
Qu espaciamiento entre lneas y entre prrafos es necesario dejar?
Qu tipo y tamao de letra conviene usar?
Conviene usar maysculas, minsculas, o maysculas y minsculas?
Cundo se incluyen colores o destacados en el texto?

Acerca del color y armona

La composicin de un pantallazo no puede dejar de lado el color. Por supuesto, hay un

factor limitante al respecto que son las facilidades con que cuente el equipo. En equipos
sin monitor en color, a lo sumo se podr jugar con tonos de grises, mientras que, en
otros equipos, dependiendo del tipo de tarjeta grfica y del monitor en color de que se
disponga, se podr trabajar con cuatro, diecisis, doscientos cincuenta y seis o ms
colores simultneos.

Principios para combinar colores

La composicin artstica proporciona las siguientes ideas para combinar colores

[DSA80]:

1. Destaque de colores: Los colores parecen ms oscuros sobre el blanco, ms claros

sobre negro y sobre un gris de igual tono se funden con ste y tienen poco destaque.
2. Armona de los colores: Se obtiene sta por analoga de grises; por matices de colores
anlogos; por contraste; por empleo de blanco, negro, gris, oro y plata, entre varios
colores; por la textura, unos colores exaltados se suavizan y unen sobre superficie muy
spera o rugosa. Cuando en un esquema intervienen muchas reas pequeas de color,
estas armonizan mejor con colores anlogos, pues el contraste entre ellas crea
impresin de inquietud. Al ser los colores muy relacionados, se obtendr una sensacin
montona; para animar el conjunto se debe aadir un color de contraste.
3. Combinacin de letras y fondos en color: Cualquiera que sea la combinacin de
colores en las letras y fondos, debe haber la menor cantidad posible de colores; una
variedad excesiva confunde y produce un efecto chocante. La legibilidad y destaque de
letras en diversos colores y sobre diferentes fondos sigue
los siguientes patrones:
Letras amarillas sobre azul, verde, violeta o negro tienen buena legibilidad.
Sobre gris algo menos y sobre pardo, relativamente legibles.

5
 Letras rojas sobre blanco y negro son legibles; se pueden hacer ms legibles
con contorno negro/blanco y ancho que las asle del fondo.
Las letras en naranja son legibles sobre fondos verdes, azules, violetas, negro,
gris o pardo.
Letras azules son legibles sobre naranja y amarillo y lo son ms si el azul de
la letra es muy oscuro. Sobre blanco son muy legibles, menos sobre el negro
y an menos sobre pardo.
Letras verdes sobre blanco y pardo pueden tener buena legibilidad, mejorada
cuando estn contorneadas por negro.
Letras blancas son legibles sobre fondo rojo, verde, violeta y gris cuando
estn contorneadas de negro o cuando es mezclado un pardo con el color
del fondo.
Letras negras sobre amarillo y naranja son muy legibles, pero es sobre blanco
cuando adquieren mayor destaque. Sobre rojo y verde pueden hacerse ms
legibles con un contorno blanco y ancho que las asle.

4. Color y textura: El color y la textura estn ntimamente ligados. Textura es la cualidad

que determina el aspecto de una superficie; esta puede ser lisa o rugosa, blanda o dura,
suave o spera, brillante o mate. Una tela spera parece ms oscura o apagada que
otra ms suave. Un objeto de superficie brillante parece ms grande y destacado que
otro de
superficie mate.

5. Convenciones de colores: Un ltimo aspecto por considerar en la combinacin de

colores son las convenciones existentes (p.ej. los colores del semforo), las cuales deben
respetarse.

Acerca del diseo de cada pantallazo

Cada pantallazo que se defina deber cumplir con estos principios bsicos: claridad de
propsito, sencillez, consistencia y promover la participacin de la audiencia.

Principio 1: Claridad de propsito

Una regla de oro para el diseo de cada pantallazo es saber lo que se espera lograr con
l, por ejemplo, transmitir una idea, servir de base para el descubrimiento, presentar
opciones de decisin, ofrecer oportunidades de evaluacin, ofrecer transicin entre las
secciones de un programa, etc. Un propsito claro es la base para identificar y disponer
los elementos del pantallazo de modo que apoyen concurrentemente el fin buscado.

Principio 2: Sencillez

Teniendo claro lo que se busca con el pantallazo y habiendo ideado una forma
interactiva de lograr este propsito, es necesario identificar y disponer los elementos
textuales, grficos, de animacin, color y sonido necesarios. En lo sencillo radica el

6
encanto de un orden visible y la expresin alcanza la mayor legibilidad. En la unicidad
de intencin y de accin se fundamenta la complementariedad y armona que deben
tener los elementos que conforman el pantallazo.

Principio 3: Consistencia

Las caractersticas bsicas definidas para la interfaz hombre-mquina (p.ej., disposicin

de las zonas de comunicacin) deben preservarse a lo largo de los pantallazos, de
manera que el usuario que aprende a usar el MEC pueda sentirse cmodo con la forma
como se realiza la interaccin a lo largo del mismo.

Nota: Aunque el contenido de este documento se basa en el diseo de Materiales

Educativos Computacionales (MEC), la idea es que retomen las partes esenciales
respecto al diseo de interfaz y adaptarlo al tipo de sistema que se debe desarrollar.

A manera de ejemplo se presentan las siguientes interfaces.

7
8
9
10
 Referencias

Medal Sols, J. A., & Velsquez Vallecillo, E. (21 de Octubre de 2010).

DISENOCOMPUTACIONAL DE UN MEC. DISEO DEL MATERIAL EDUCATIVO
COMPUTARIZADO.

Medal Sols, J. A., & Velsquez Vallecillo, E. (30 de Septiembre de 2010). DISEO DEL
SISTEMA DE COMUNICACION ENTRE EL APRENDIZ Y EL MEC. DISEO DEL
MATERIAL EDUCATIVO COMPUTARIZADO.
Medal Sols, J. A., & Velsquez Vallecillo, E. (5 de Agosto de 2010). Ingeniera del
Software Educativo.

11