8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 1/36
Estrategias de ComunicaciónVisual Utilizadas enAplicaciones Web
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 2/36
Interfaz de Diseño paraun curso Web
Motivación y aprendizaje del estudiante
Estudiar y evaluar las estrategias decomunicación visual utilizadas en las
aplicaciones instruccionales Web
Mejor utilización de estrategiasde comunicación visual para su
uso pedagógico y lógico.
Establecer lineamientos y estrategias de comunicaciónvisual para enriquecer las aplicaciones instruccionalesWeb que se produzcan para el Internet.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 3/36
Crecimiento de lastelecomunicaciones y lanecesidad social del serhumano para educarse
Surge los medios alternativos deeducación ormal y de capacitación
!ersonal pro esional Incorporación de lasnuevas tecnolog"as
en los procesosinstruccionales y
educativos
#tilizan plata ormas tecnológicas de Internet$ paradesarrollar aplicaciones instruccionales en susprogramas y planes de estudio.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 4/36
ANTECEDENTES DELA INVESTIGACIÓN
Zambrano ( !!"#$ realizó unatesis denominada %Evaluaciónde la Imagen en los So t&are
Educativos
Evaluar el tratamiento de laimagen en el so t&are educativo
Se 'undamentó en los postuladosteóricos de (ondis y )umont*+,,- $ (e !ablos *+,,, $ /ielsen y0alvis *1222 $ Marcal y Se34 *122+ $("az *1221 $ 5ambrano *1226 .
Entre las conclusiones del
estudio$ se determinó que lospro esores de la maestr"arequieren sistematizar losconocimientos sobre el dise7ode pantalla$ para aplicarla con el
in de mejorar sus materialespedagógicos.
Se recomendó desarrollar el so t&areque servir8 de apoyo al proceso deaprendizaje y e3tender su aplicacióna docentes de otras 8reas
%orres$ & ( !!'#$ realizó unatesis doctoral denominada %9as
:eor"as de )prendizaje y deInstrucción
; rece lineamientos teórico<metodológicos para su
dise7o
Albornoz Zambrano ( !!!#
(e la realidad a laimagen
D)uro$ A ( !!'
So t&are educativo para el (ise7o(e plantillas en las produccioneseducativas multimedia
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 5/36
*rocedimiento de la in+estigación
+.Se seleccionaron te3tos y documentos %on line= que tratasen sobre las estrategias decomunicación visual$ la composición$ diagramación$ sinta3is de la imagen$ tipo de uentestipogr8 icas a utilizar$ usabilidad en la Web$ navegación$ desarrollo de contenidos$ principios dedise7o b8sicos para la creación de sitios Web y teor"as del color y su tratamiento para la Web.
1. Se procedió a la revisión bibliogr8 ica de los antecedentes para la undamentación del estudio
y la correspondiente sustentación de las bases teóricas$ considerando criterios para la selecciónde investigaciones en el 8rea de evaluación de estrategias de comunicación visual y aplicacionesinstruccionales Web.
6. :omando como punto de partida estas bases teóricas$ se construyó una tabla deoperacionalización de cada variable *Cuadro /o 6 que dio origen a una gu"a deobservación *)ne3o C $ cuya estructura se responde a cuatro *6 dimensiones$ y *+1
indicadores representados en ochenta *-2 "temes que se midieron siguiendo laalternativa ija de respuesta con ormada por la ausencia y la presencia de las estrategiasde comunicación visual$ y la pertinencia de las mismas en la aplicación instruccionalWeb.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 6/36
*,-*UE.%A DE /I0EA&IE0%-. .-1,E E.%,A%E2IA. DE C-&U0ICACI30 VI.UA/U%I/IZA1/E. E0 /A. A*/ICACI-0E. I0.%,UCCI-0A/E. WE1
+. Estudiar al p>blico al cual va dirigida la aplicación instruccional Web.
1. (ise7ar bocetos de la estructura gr8 ica partiendo de lo generala loespec" ico.
6. (iscutir con el equipo detrabajo.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 7/36
/I0EA&IE0%-. E.*EC45IC-.
Ar6uitectura de la Información 7 Criterios de organización?(esarrollar la arquitectura de contenidos de orma jer8rquica o mi3ta$ pero
de orma organizada.
?#n sitio Web debe ser consistente en todos sus aspectos y aunque puedaparecer apropiado que di erentes 8reas tengan dise7os di erentes$ la consistencia
entre los dise7os acilita al usuario el uso de un sitio. !arte de la consistencia seevidencia con el uso adecuado de la arquitectura de contenidos$ y con un buenuso de un criterio de organización.
?Mantener botones$ iconos o algunos elementos de interacción en un mismolugar para que los usuarios no se pierdan en p8ginas secundarias.
? :rabajar con un criterio de organización de simplicidad$ claridad y regularidad$esto provocar8 en el usuario una sensación de organización del curso.
? Colocar en el lado izquierdo el men> de opciones ya que en nuestracultura se estila leer generalmente de izquierda a derecha.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 8/36
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 9/36
Ar6uitectura de la Información 7 Criterios de organización
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 10/36
Iconos
? Crear iconos o botones creativos$ con colores planos$ conceptos claros y sencillos$con un gran nivel de s"ntesis$ para que estos sean entendidos con acilidad.
? Crear iconos universales o est8ndares si la aplicación Web instruccional se dirige aun p>blico amplio y heterog4neo.
? Mantener un mismo concepto gr8 ico para los iconos e inter az$ de manera que losusuarios entiendan la identidad del mismo y sea una aplicación uncional.
? #tilizar met8 oras en la iconogra "a para enriquecer el lenguaje y dejar que laaplicación vaya narrando una historia.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 11/36
Iconos
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 12/36
Iconos
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 13/36
Ilustraciones
? #tilizar ilustraciones$ esquemas$ gr8 icos u otros elementos de apoyo visuala los contenidos que ayuden a llamar la atención$ y que soporten el in decomunicar una idea$ ilustrar procedimientos o instrucciones proced" mentales.
? #tilizar todas las im8genes del curso con un mismo concepto$ un mismootógra o o ilustrador o de un mismo banco de im8genes@ esto otorgar8 una visión
uni orme de toda la aplicación$ y apoyar8 una vez m8s la identidad de la aplicacióninstruccional Web.
? #tilizar im8genes en un solo tono o d>o tono para ilustrar secciones y noabusar del uso del color ni del peso de las im8genes.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 14/36
Ilustraciones
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 15/36
Ilustraciones
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 16/36
5uentes 7 pistas tipogr8ficas 7legibilidad
? #tilizar uentes est8ndares$ pre eriblemente palo seco ya que en la mayor"a de lasplata ormas de los computadores estas se o recen. Estas deben poseer un muy buen nivel delectura y visualización.
? Ser cuidadoso con el uso de contrastes entre colores de te3tos y ondos@ el uso decolores parecidos puede avorecer a la mala lectura.
? Contrastar con el del ondo el color de los te3tos. El tama7o de uente debe sersu icientemente grande para que sea legible.
? Crear pistas tipogr8 icas para que sirvan de puntos ocales y el usuario sepa cuando
descansar o no. Estas pistas deben o recerse con estilo tipogr8 icos o ilustraciones peque7asdentro de las columnas de te3to que sirvan de detalles.
? #tilizar te3tos con ondos de colores uni ormes$ que contrasten con el ondo paraacilitar la lectura y provoquen menos cansancio y sobre es uerzo. #tilizar pre eriblemente
colores de ondos claros$ o blancos.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 17/36
5uentes 7 pistas tipogr8ficas 7legibilidad
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 18/36
&ultimedia
? Crear elementos multimedia atractivos manteniendo un concepto similar al de laaplicación instruccional Web$ y un mismo lenguaje visual.
? Crear elementos multimedia como demostraciones *demos$ animaciones$ videos $que sirvan de apoyo a los contenidos como res>menes del curso o como elementos
introductorias que sean e3pl"citos mas no elementos decorativos.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 19/36
&ultimedia
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 20/36
Vínculos o enlaces
&ultimedia
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 21/36
Sinopsis
&ultimedia
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 22/36
Uso? Crear una inter az sencilla y visualmente 8cil de entender.
? #tilizar los colores con precaución para no di icultar el acceso a losusuarios que presentan problemas de distinción de colores.
? #tilizar enlaces azules y botones del sistema. )yudan al usuario a
reconocer lo que son v"nculos y lo que no lo es$ al igual que los v"nculos yautilizados.
? En las aplicaciones instruccionales Web la inter az gr8 ica ha de servisible$ evitar elementos invisibles de navegación que han de ser in eridos por losusuarios$ men>s desplegables$ indicaciones ocultas.
? ) nivel visual los usuarios no deben su rir sobrecarga de in ormación.Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer$ e3istesobrecarga de in ormación$ por lo que se le debe o recer en primera instancia unainter az sencilla$ con un e3celente concepto gr8 ico$ respaldada por su identidad.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 23/36
Uso
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 24/36
Actividades
Uso
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 25/36
Color? Seleccionar los colores de la paleta Web$ estudiando el tema tratado ya que
esto es parte de la personalidad del curso.
? #tilizar el color de ondo de manera lógica para separar unas 8reas de otras ycrear rupturas que ayuden a jerarquizar y separar los contenidos.
? Se #tilizar peque7os elementos de color sobre un ondo mayoritariamenteblanco para separar contenidos y que no se con undan.
? !roporcionar a nivel visual *crom8tico contrastes$ donde el usuario puedaleer visualmente y por jerarqu"a$ usando intencionalmente los colores calidos o r"oscomo patrones principales.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 26/36
? #tilizar los colores de tonos mas saturados para las zonas donde sedespliegue los men>s$ iconos y notas especiales. El color de mayor tono llamar8 laatención a primera vista$ lo cual proporcionara a los usuarios una jerarqu"a en lalectura$ comenzando por los mas uertes u oscuros$ o de los calidos a los r"os.
? #tilizar un m83imo de 6 a A colores en la aplicación instruccional Web@ uncolor en grandes 8reas y otros esparcidos de manera de pinceladas o retoques en lainter az para que visualmente e3ista una diversidad de colores$ m8s no un abuso delmismo. Esto ayudar8 al usuario a no cansarse de la inter az.
Color
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 27/36
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 28/36
Identidad
? 9as cabeceras de las aplicaciones instruccionales Web deben proporcionar$el nombre y el logo de la misma. En ning>n caso se debe colocar un v"nculo acontenidos importantes del sitio en la cabecera o cercano a ella$ se debe respetaresta zona si lo que se desea respetar es la identidad.
?Mantener el uso de los mismos colores$ buscando un lenguaje propio$matices$ degradados$ colores planos$ manteniendo el concepto.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 29/36
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 30/36
Identidad
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 31/36
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 32/36
Identidad
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 33/36
C-0C/U.I-0E.
Son de uso instruccional$ pedagógico o de ense7anza$
carecen de organización$ de criterios compositivos$ loque las muestra visualmente desorganizados$ pocae ectividad comunicacional
Internet es una plata orma que sepresta para utilizar di erentestecnolog"as multimedia$ comodemos o animaciones$ por lo quese puede evidenciar que estas noaprovechan al m83imo lasventajas de las tecnolog"as.9as estrategias de comunicación visual
utilizadas en las mayor"a de las
aplicaciones instruccionales Web ueronB
< 9os contrastes tipogr8 icos y las uentes y< /inguna aplicación mostró identidad opersonalidad.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 34/36
,EC-&E0DACI-0E.
ecordar que el uso adecuado de las estrategias de comunicación visualpuede seducir al usuario y avorecer el contenido$ a di erencia de el maluso de las estrategias podr"a ocasionar cansancio y ruido y convirti4ndoseestas estrategias en cómplice del desprecio a entidades culturales$ por loque se debe tener cuidado con el uso de las mismas.
:ener presente que la imagen el signo$ los esquemas$ los elementosmultimedia$ y las composiciones que se utilicen de manera intencionalcomo estrategias de comunicación visual$ constituyen un amplio repertoriode base$ con lo que se podr"an crear otras ormas de lenguaje yaplicaciones instruccionales Web m8s ricas y vistosas visualmente$proporcionado mayor claridad y calidad de cursos$ que tendr"an un valorintr"nseco de respeto al educando o usuario$ proporcionado aplicacionesdesde una mayor y mejor calidad desde los contenidos hasta de orma.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 35/36
!romover l"neas de investigación inherentes a las estrategias de comunicación visual$con relación a las nuevas tecnolog"as y a la educación$ con el in de crear una culturavisual e iciente al momento de la utilización de estas estrategias comunicacionales.
)lcanzar una manera e iciente la posibilidad de que estas estrategias de comunicación
visual apoyen los contenidos y procesos de ense7anzazas$ mas no estropeen el mismo.
,EC-&E0DACI-0E.
8/19/2019 Ejemplo de Una Investigacion
http://slidepdf.com/reader/full/ejemplo-de-una-investigacion 36/36
/9deres en Educación a Distancia a tra+:s de Internet/9deres en Educación a Distancia a tra+:s de Internet
2racias por su Atención2racias por su Atención
M.Sc. Noris B. Rodríguez S.Directora de Estudios a Distancia
Telf: (0058 !"# !0088$# al $%&&&.ead.ur'e.edu
Maracai'o Estado )ulia.Re*+'lica Boli ariana de enezuela