Page 1


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ2

Recomendaciones en la construcción de una interfaz gráfica

Generalmente el diseño de una interfaz gráfica es un proceso, al diseñarlo es porque existe una necesidad personal, o de un cliente, para ellos es importante desarrollar después de hacer ciertas investigaciones, como. x Estudiar al publico al cual va dirigida la aplicación x Diseñar bocetos de la estructura gráfica partiendo de lo general a lo específico x Discutir con el equipo de trabajo. Arquitectura de la Información / Criterios de organización

x Desarrollar la arquitectura de contenidos de forma jerárquica o mixta, pero de forma organizada x Un sitio Web debe ser consistente en todos sus aspectos y aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio. Parte de la consistencia se evidencia con el uso adecuado de la arquitectura de contenidos, y con un buen uso de un criterio de organización x Mantener botones, iconos o algunos elementos de interacción en un mismo lugar para que los usuarios no se pierdan en páginas secundarias x Trabajar con un criterio de organización de simplicidad, claridad y regularidad, esto provocará en el usuario una sensación de organización del curso x Colocar en el lado izquierdo el menú de opciones ya que en nuestra cultura se estila leer generalmente de izquierda a derecha.


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ3

Iconos

x 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 facilidad x Crear iconos universales o estándares si la aplicación Web instruccional se dirige a un público amplio y heterogéneo. x Mantener un mismo concepto gráfico para los iconos e interfaz, de manera que los usuarios entiendan la identidad del mismo y sea una aplicación funcional. x Utilizar metáforas en la iconografía para enriquecer el lenguaje y dejar que la aplicación vaya narrando una historia.

Las Ilustraciones

x Utilizar ilustraciones, esquemas, gráficos u otros elementos de apoyo visual a los contenidos que ayuden a llamar la atención, y que soporten el fin de comunicar una idea, ilustrar procedimientos o instrucciones procedí mentales x Utilizar todas las imágenes del curso con un mismo concepto, un mismo fotógrafo o ilustrador o de un mismo banco de imágenes; esto otorgará una visión uniforme de toda la aplicación, y apoyará una vez más la identidad de la aplicación instruccional Web x Utilizar imágenes en un solo tono o dúo tono para ilustrar secciones y no abusar del uso del color ni del peso de las imágenes


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ4

Las Fuentes / pistas tipográficas /legibilidad

x Utilizar fuentes estándares, preferiblemente palo seco ya que en la mayoría de las plataformas de los computadores estas se ofrecen. Estas deben poseer un muy buen nivel de lectura y visualización x Ser cuidadoso con el uso de contrastes entre colores de textos y fondos; el uso de colores parecidos puede favorecer a la mala lectura x Contrastar con el del fondo el color de los textos. El tamaño de fuente debe ser suficientemente grande para que sea legible x Crear pistas tipográficas para que sirvan de puntos focales y el usuario sepa cuando descansar o no. Estas pistas deben ofrecerse con estilo tipográficos o ilustraciones pequeñas dentro de las columnas de texto que sirvan de detalles x Utilizar textos con fondos de colores uniformes, que contrasten con el fondo para facilitar la lectura y provoquen menos cansancio y sobre esfuerzo. Utilizar preferiblemente colores de fondos claros, o blancos

Multimedia

x Crear elementos multimedia atractivos manteniendo un concepto similar al de la aplicación instruccional Web, y un mismo lenguaje visual. x 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 explícitos mas no elementos decorativos


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ5

La Usabilidad

x Crear una interfaz sencilla y visualmente fácil de entender x Utilizar colores han de utilizarse con precaución para no dificultar el acceso a los usuarios que presentan problemas de distinción de colores x Utilizar enlaces azules y botones del sistema. Ayudan al usuario a reconocer lo que son vínculos y lo que no lo es, al igual que los vínculos ya utilizados. x En las aplicaciones instruccionales Web la interfaz gráfica ha de ser visible, evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas x A nivel visual los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer, existe sobrecarga de información, por lo que se le debe ofrecer en primera instancia una interfaz sencilla, con un excelente concepto gráfico, respaldada por su identidad

El Color

x Seleccionar los colores de la paleta Web, estudiando el tema tratado ya que esto es parte de la personalidad del curso x Utilizar el color de fondo de manera lógica para separar unas áreas de otras y crear rupturas que ayuden a jerarquizar y separar los contenidos x Se

Utilizar

pequeños

elementos

de

color

sobre

un

mayoritariamente blanco para separar contenidos y que no se confundan.

fondo


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ6

x Proporcionar a nivel visual (cromático) contrastes, donde el usuario pueda leer visualmente y por jerarquía, usando intencionalmente los colores cálidos o fríos como patrones principales x Utilizar los colores de tonos más saturados para las zonas donde se despliegue los menús, iconos y notas especiales. El color de mayor tono llamará la atención a primera vista, lo cual proporcionara a los usuarios una jerarquía en la lectura, comenzando por los más fuertes u oscuros, o de los cálidos a los fríos x Utilizar un máximo de 3 a 4 colores en la aplicación instruccional Web; un color en grandes áreas y otros esparcidos de manera de pinceladas o retoques en la interfaz para que visualmente exista una diversidad de colores, más no un abuso del mismo. Esto ayudará al usuario a no cansarse de la interfaz

Proclamar la Identidad a través de

x Las

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 a contenidos importantes del sitio en la cabecera o cercano a ella, se debe respetar esta zona si lo que se desea respetar es la identidad. x Mantener el uso de los mismos colores, buscando un lenguaje propio, matices, degradados, colores planos, manteniendo un concepto


Versión pdf 8QLGDG,0HUFDQFtDHQ&RQVLJQDFLyQȽ3iJ7

Términos básicos Comunicación Visual: La comunicación visual es básicamente comunicación funcional, ya que persigue conseguir o alcanzar un objetivo intencional, es aquella cuya eficacia mide la forma de cómo el objeto es alcanzado. (Bonsiepe, 1999) Diagramar: Es elaborar un esquema, gráfico o dibujo con el fin de mostrar las relaciones entre las diferentes partes de un conjunto (Encarta, 2008). Dimensión de Iconicidad: Es una magnitud operante de la abstracción.

Es la

cantidad de realismo, la cantidad de imaginería inmediata, contenida o retenida en el esquema

Se trata de representar, pero al mismo tiempo de abstraer y

reducir la realidad del mundo a signos intangibles.

Es el acto mismo de dar

nombre a las cosas. (Moles, 2002) Estrategia de comunicación visual: Representa al conjunto de imágenes visuales que se establecen en una comunicación entre observador o creador de la escena mental o real (emisor)

y un utilizador eventual (receptor), con objeto de

condicionar u organizar las acciones ulteriores de este último, donde su principales dimensiones están reprensadas por la esquematización, la iconicidad y espejo tipográfico (ventana perceptual) de manera pedagógica y educativa. (Moles, 2002)

Lectura Recomendada  

Lectura Recomendada