Versión pdf 2

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.

Estudiar al publico al cual va dirigida la aplicación

Diseñar bocetos de la estructura gráfica partiendo de lo general a lo

específico

Discutir con el equipo de trabajo.

Arquitectura de la Información / Criterios de organización

Desarrollar la arquitectura de contenidos de forma jerárquica o mixta,

pero de forma organizada

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

Mantener botones, iconos o algunos elementos de interacción en un

mismo lugar para que los usuarios no se pierdan en páginas secundarias

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

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 3

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

facilidad

Crear iconos universales o estándares si la aplicación Web instruccional

se dirige a un público amplio y heterogéneo.

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.

Utilizar metáforas en la iconografía para enriquecer el lenguaje y dejar

que la aplicación vaya narrando una historia.

Las Ilustraciones

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

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

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 4

Las Fuentes / pistas tipográficas /legibilidad

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

Ser cuidadoso con el uso de contrastes entre colores de textos y fondos;

el uso de colores parecidos puede favorecer a la mala lectura

Contrastar con el del fondo el color de los textos. El tamaño de fuente

debe ser suficientemente grande para que sea legible

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

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

Crear elementos multimedia atractivos manteniendo un concepto similar

al de la aplicació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 explícitos mas no elementos decorativos

Versión pdf 5

La Usabilidad

Crear una interfaz sencilla y visualmente fácil de entender

Utilizar colores han de utilizarse con precaución para no dificultar el

acceso a los usuarios que presentan problemas de distinción de colores

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.

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

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

Seleccionar los colores de la paleta Web, estudiando el tema tratado ya

que esto es parte de la personalidad del curso

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

Se Utilizar pequeños elementos de color sobre un fondo

mayoritariamente blanco para separar contenidos y que no se confundan.

Versión pdf 6

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

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

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

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.

Mantener el uso de los mismos colores, buscando un lenguaje propio,

matices, degradados, colores planos, manteniendo un concepto

Versión pdf 7

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)