ejemplo de una investigacion

36
Estrategias de Comunicación Visual Utilizadas en Aplicaciones Web

Upload: mis-cursos-betancur

Post on 07-Jul-2018

223 views

Category:

Documents


0 download

TRANSCRIPT

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