1 Diseño de Interfaces Gráficas

7/25/2019 1 Diseo de Interfaces Grficas

1/12

Paradigmas de la programacin 2015-2

1.- Diseo de interfaces grficas de usuario (GUI)

1.1.- Comunicacin Visual Efectiva para Interfaces Grficas de Usuario

El uso de tipografa, smbolos, color y otros grficos estticos y dinmicos son comnmente usados para expresar hechos,

conceptos y emociones. Esto compone un diseo grfico sistemtico orientado a la informacin que ayuda a la gente acomprender informacin compleja. La comunicacin visual efectiva para este sistema se basa en algunos principios bsicos dediseo grfico.

1.2.- Consideraciones de Diseo

Existen tres factores que pueden considerarse para el diseo de una interfaz de usuario correcta: factores de desarrollo,factores de viabilidad y factores de aceptacin.

Los factores de desarrollo ayudan a mejorar la comunicacin visual. Esto incluye toolkits y libreras de componentes, soportespara un rpido prototipado, y adaptabilidad.

Los factores de viabilidad tienen en cuenta factores humanos y expresan una fuerte identidad visual. Esto incluye: habilidades

humanas, la identidad del producto, un claro modelo conceptual, y mltiples representaciones.

Como factores de aceptacin estn la poltica de la corporacin, los mercados internacionales, y la documentacin yentrenamiento.

Alinear imgenes.

Un error comn de diseo es insertar las imgenes en una pgina de cualquier manera sin pensar en ellayout (estructura).Estono queda bien visualmente, puesto que por defecto las imgenes se alinean a la izquierda, resulta mucho ms agradable verlascentradas.

Los recorridos visuales en Occidente.

Para componer el espacio en pantalla se debe distribuir la informacin segn

estereotipos: el sentido de lecturaescritura condiciona el modo que de mirar las cosasy los puntos innatos de atencin.

La figura ilustra los posibles recorridos visuales, de izquierda a derecha y de arriba haciaabajo. Este estereotipo que debe ser respetado cuando se organiza la informacin en lainterfaz.

La informacin en el extremo superior izquierdo es la ms importante, ya que es la queprimero se ve, y la informacin en el extremo superior derecho la de menor jerarqua.

Asimismo, se recomienda que las acciones inmediatas como dilogos o alertas aparezcanen la parte central de la pantalla

1.3.- El Lenguaje Visible

El Lenguaje Visible se refiere a las tcnicas grficas usadas para comunicar el mensaje o contexto, incluye:

- Disposicin o Layout: formatos, proporciones, y mallas (grids); organizacin: ya sea 2D y 3D.

- Tipografa: seleccin de tipos de letra y estilos, incluyendo la anchura fija y variable.

- Color y Textura: color, textura y luminancia aportan informacin compleja y realidad pictorial.

- Imgenes: signos, iconos y smbolos, desde lo fotogrficamente real a lo abstracto.
http://www.blog.lawebera.es/40-estructuras-css-listas-para-descargar-layout-gala/http://www.blog.lawebera.es/40-estructuras-css-listas-para-descargar-layout-gala/


2/12


- Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamiento lgico.

- Sonido: abstracto, vocal, concreto, o musical.

- Identidad Visual: las reglas adicionales y nicas que proporcionan consistencia de conjunto a una GUI.

1.4.- Principios del Diseo de interfaces de usuario

Existen tres principios fundamentales relacionados en el uso del lenguaje visible:

- Organizar: proveer al usuario de una estructura conceptual clara y consistente.

- Economizar: hacer lo mximo con la menor cantidad de elementos.

- Comunicar: ajustar la presentacin a las capacidades del usuario.

Organizar:disposicin de la pantalla, relaciones y navegabilidad son importantes conceptos de organizacin.

Organizacin catica Organizacin ordenada

Consistencia. Existen4 visiones de la consistencia: consistencia interna, consistencia externa, consistencia del mundo real ycuando no hay consistencia.

La primera visin, la consistencia interna, afirma que lasmismas convenciones y reglas deben ser aplicadas a todos loselementos de la interfaz grfica de usuario.

Los mismos tipos de elementos se muestran en los mismoslugares. Aquellos con diferentes tipos de comportamiento tienensu propia apariencia especial.

La consistencia externaafirma que las plataformas existentes y convenciones culturales deben ser utilizadas y aplicadas enlas interfaces grficas de usuario.

Consistencia externa para iconos de herramientas de textoEstos iconos son de diferentes aplicaciones, pero

generalmente tienen el mismo significado.


3/12


Consistencia del mundo real: Afirma que las convenciones y reglas deben ser consistentes y consecuentes con lasexperiencias del mundo real, y las observaciones y percepciones del usuario. La innovacin, trata con la carencia deconsistencia; as desviarse de las convenciones existentes slo debe hacerse cuando proporciona un beneficio al usuario.

Disposicin de la pantalla (Layout)

Hay tres formas para disear una disposicin espacial de la pantalla: usar una estructura de malla (grid), estandarizar ladisposicin de la pantalla, y usar los elementos relacionados con grupos.

Una estructura de malla puede ayudar a colocar mens, paneles de dilogo o de control. Generalmente el mximo nmero dedivisiones horizontales o verticales se ajusta a la expresin 7 +/- 2. Esto ayudar a hacer la pantalla ms inteligible y menossaturada.

Relaciones: Conectar los items relacionados y disociar los items independientes mejora sensiblemente la organizacin visual.

La localizacin, forma y valor pueden todas ellas crearrelaciones que es posible sean inapropiadas.

Relaciones claras, consistentes, apropiadas y fuertes.

Navegabilidad. Existen tres tcnicas importantes de navegabilidad:

- proveer un foco inicial para la atencin del usuario.

- dirigir la atencin a los items importantes, secundarios o perifricos.

- asistir la navegacin a travs del material.

Diseo pobre. Diseo mejorado: la disposicin espacial y el color ayudan a centrarla atencin del usuario a las reas ms importantes.


4/12


Economizar: Hay que considerar 4 grandes factores: simplicidad, claridad, singularidad y nfasis.

Simplicidad. La simplicidad incluye nicamente los elementos que son ms importantes para la comunicacin. Deberaproducir tambin la menor obstruccin posible.

Diseo complicado y diseo ms simple.

Claridad

Iconos ambiguos y claros.

Todos los componentes deberan ser diseados para que su significado no seaambiguo, que no lleve al equvoco.

Singularidad: Las propiedades de los elementos necesarios deben ser caractersticassingulares.

nfasis. Los elementos ms importantes deben ser fcilmente percibidos. Se debe restar nfasis a los elementos no crticos yminimizarlos para no ocultar informacin critica.

Comunicar. La interfaz grfica de usuario debe mantener un balance entre legibilidad, tipografa, simbolismo, mltiples vistas,y color o textura, para comunicar adecuadamente.

Legibilidad

Texto ilegible y legible.

La pantalla debe ser fcil de identificar e interpretar, ademsde atractiva y agradable


5/12


Mltiples vistas.Se puede proveer de mltiples perspectivas en la pantalla de estructuras y procesos complejos. Hacer uso deestas mltiples vistas:

- mltiples formas de representacin y niveles de abstraccin.

- vistas alternativas simultneas: conexiones y referencias cruzadas.

-

metadatos, metatexto y metagrficos.

Mltiples vistas verbales y visuales.

2.- El color y sus significados

El color es uno de los ms complejos elementos al disear una interfaz grfica correcta. Puede ser una potente herramienta decomunicacin correctamente usado. Los colores pueden ser combinados para tomar un sentido visual. Entre las ventajas deluso del color para facilitar la comunicacin estn:

- enfatiza la informacin importante.

- identifica subsistemas de estructuras.

- representa objetos naturales de un modo realista.

- reduce errores de interpretacin.- aade dimensiones a la codificacin.

- aumenta la comprensibilidad, la credibilidad y el atractivo.

Cuando el color es correctamente usado la gente aprende ms. La memoria para la informacin en color parece ser mucho mseficiente que para la informacin presentada en blanco y negro.


6/12


En principio, los colores clidos (rojo,amarillo, naranja) provocansensaciones de accin, intervencin orespuesta a un requerimiento ycercana en el espacio.

Por el contrario, los colores fros(verde, azul, violeta) consiguen crearasociaciones con situaciones msestticas y dimensiones ms lejanas.

En el cuadro de la izquierda seaprecian las relaciones quetradicionalmente se establecen entrelos colores ms comunes y ciertas

actitudes mentales.

Los colores primarios son: rojo, amarillo y azul. No pueden ser obtenidos por mezcla de otros colores. El rojo es el color delfuego y de la sangre. Excita e invita a la violencia. El amarillo es el color del sol y del oro. Es un color alegre, imagen de lailuminacin y la pureza. El azul es el color del cielo y del aire. Sugiere imaginacin, libertad, evasin y sueo.

Los colores secundarios son: naranja, verde y violeta. El naranja (rojo + amarillo) posee las connotaciones propias del fuego yel oro, caractersticas de sus colores primarios originales. El verde (azul + amarillo) es el color dominante en la naturaleza.Evoca las plantas, la humedad, el reposo y la pasividad. El violeta (rojo + azul) es el color rojo, color de la vida, apagado porel azul del cielo.

Existen tambin el negro y el blanco, que van a permitir matizar los colores anteriores, y a su vez contribuyen a crear otros

nuevos, llamados terciarios. El blanco es el color de la luz, de lo espiritual y elevado. El negro es la profundidad, la oscuridad.El gris es la mezcla, ni blanco ni negro. Indica equilibrio, tibieza. Pero tambin se puede asociar a las sombras.

En la vida cotidiana es posible encontrar con ejemplos que ilustran las asociaciones del cuadro. Quiz el ms caracterstico seael de un semforo. Los colores rojo y amarillo reflejan una reaccin ms o menos inmediata por parte del individuo, el verdeindica va libre. En un hospital nunca se les ocurrira decorar sus quirfanos con colores clidos, siempre se ven las paredespintadas de azul o verde, en un intento de transmitir tranquilidad a los enfermos, o incluso de color blanco, que no producerelajacin pero pasa desapercibido.

2.1 Principios de diseo del color

Los tres principios bsicos de diseo pueden aplicarse tambin al color: organizacin del color, economa del color y

comunicacin del color. Organizacin del color

La organizacin del color influye en la consistencia de la organizacin. El color debe emplearse para agrupar los itemsrelacionados. Debe aplicarse una organizacin de color consistente tanto a las pantallas, como a la documentacin y a losmateriales de entrenamiento. Los colores similares infieren similitud en los objetos. Se debe mirar la completud y consistenciaal agrupar objetos con el mismo color. Una vez se establece una codificacin del color, esta debe ser usada en toda la interfazgrfica as como en la documentacin y publicaciones relacionadas.


7/12


Economa del color

El segundo principio del color, la economa del color, sugiere usar un mximo de 5 +/- 2 colores cuando el significado tieneque ser recordado. La idea fundamental es usar color para aumentar la informacin proporcionada en blanco y negro (porejemplo, disear la interfaz para que funcione bien primero en blanco y negro).

Comunicacin del color

El nfasis del color sugiere usar fuertes contrastes en valor y tono para centrar la atencin del usuario en la informacin msimportante. Cuando demasiadas figuras o campos del fondo compiten por la atencin del usuario se produce cierta confusin.La jerarqua de los estados sobreiluminado, neutro e infrailuminado para todas las reas de la pantalla deben sercuidadosamente diseadas para proporcionar la mxima sencillez y claridad.

La comunicacin en color pugna con la legibilidad, incluyendo usar un color apropiado para las reas central y perifrica delcampo visual. Las combinaciones entre colores pueden producir influencias entre ellos y cambios en la eleccin de los mismos.

Es aconsejable que el color rojo y el verde no sean usados en la periferia del campo visual sino en el centro. Si son usados en laperiferia, es necesario un medio para captar la atencin del usuario, como un cambio de tamao o el parpadeo, por ejemplo.

El negro, azul, blanco y amarillo son apropiados para la periferia del campo visual, donde la retina es mas sensitiva a ellos.

Si se produce un cambio en el tamao de los elementos coloreados se debe tener en cuenta que la percepcin sobre suluminancia o tono puede cambiar, y tomar las medidas oportunas.

Es preciso usar colores que difieran tanto en valor como en tono. Las combinaciones rojo/verde, azul/amarillo, verde/azul, yrojo/azul deben ser evitadas excepto si se necesita un efecto visual especial. Pueden crear vibraciones, ilusiones, sombras ypostimgenes.

Para situaciones con poca iluminacin se recomienda texto claro, lneas finas y formas pequeas o medianas sobre un fondooscuro; para situaciones con iluminacin abundante, por el contrario, texto oscuro (azul o negro), lneas finas y formaspequeas sobre fondo claro. Estas combinaciones son para presentaciones con transparencias, videos, papel o estaciones detrabajo.

2.2 Simbolismo del color

La importancia del color es comunicar. Los cdigos de colores deben respetar el uso profesional y cultural ya existente dedeterminados colores. Las connotaciones varan fuertemente respecto a los diferentes tipos de usuario, especialmente cuandoson de diferentes culturas. Las connotaciones del color deben ser usadas con sumo cuidado.

Por ejemplo: los buzones de correos son azules en Estados Unidos, rojo brillante en Inglaterra y amarillos en Grecia. Si se usaun icono grfico para representar el correo electrnico, es conveniente adecuar su color al pas para mejorar la comunicacin.

2.3 Combinaciones entre colores

En el siguiente cuadro vemos ciertas combinaciones entre colores que pueden considerarse correctas e incorrectas. Por

ejemplo, los colores claros quedan bien integrados si se unen con colores oscuros, ya que hay un buen contraste, pero endeterminados casos se pueden combinar con tonos tambin claros, excepto si son demasiado parecidos, como ocurre con elazul y el verde. En general, un fondo claro con texto y figuras oscuras es tan admisible como un fondo oscuro con texto yfiguras claros, pero en el primer caso se gana en legibilidad.


8/12


El contraste figura fondo permite legibilidad y evita cansancio visual:

En general se recomienda tener un color de figura oscuro sobre fondo claro que al revs, porque se gana en legibilidad. En elprximo cuadro aparecen ciertas combinaciones entre colores que pueden considerarse como correctas e incorrectas. Porejemplo, los colores claros quedan bien integrados si se unen con colores oscuros, ya que hay un buen contraste, pero en

determinados casos se pueden combinar con tonos tambin claros, excepto si son demasiado parecidos, como ocurre con elazul y el verde. Tonos oscuros como el rojo y el azul presentados en una misma pantalla obligan al usuario a un esfuerzo deacomodacin ptica innecesario.

En la combinacin de colores oscuros hay que tener ms cuidado, porque es ms fcil confundirse y que se unan colores quehagan un mal efecto. Tonos oscuros como el rojo y el azul presentados en una misma pantalla obligan al usuario a un esfuerzode acomodacin ptica innecesario.

Cuando pensamos en qu colores debemos emplear en nuestras pantallas se debe reparar en la influencia que un determinadocolor puede llegar a tener sobre el resto. Los colores provocan sensaciones cuando se abandona su visin y se pasa sintransicin a observar otro. Por ejemplo, si estamos viendo el color azul y pasamos a ver un amarillo, ste se ver brillante. Si

no se pasa anteriormente por el azul, el amarillo se ver mucho ms plido y mate.

En general, los colores tienen unas propiedades psicolgicas que actan sobre nuestro subconsciente. Existen algunos efectosde la yuxtaposicin entre colores que se admiten de forma general. Por ejemplo, el color amarillo, que como hemos dicho esalegre y brillante, pierde toda su fuerza cuando se combina con el blanco. Para rebajar el excesivo dinamismo que evoca elnaranja no hay nada como mezclarlo con el blanco. Sin embargo, combinado con el rojo forma un color pardo demasiadodenso.

Existen ciertas relaciones que se deben considerar a la hora de seleccionar la gama de colores de las pantallas:

- Un objeto pequeo parecer an ms pequeo si se coloca cerca de una superficie grande.

- Un color claro parecer ms claro sobre un fondo oscuro que sobre un fondo claro.

- Un color llama ms la atencin si se encuentra sobre un color mezclado que si est sobre un color vivo.

-

Un tono fro parecer ms fro cuanto ms clido sea el color sobre el que aparece.- Cada color muestra ms claramente sus caractersticas si se coloca cercano a su complementario.

Finalmente, una breve mencin a un aspecto muy interesante de cara a obtener delimitaciones ms finas en nuestros diseos: laescala de grises. Muchas veces es ms interesante jugar con los diferentes grises que mezclar otros colores, debido a que el ojohumano percibe con ms dificultad los pequeos detalles cuando se emplea el color, y sin embargo, la combinacin de variosgrises permite la discriminacin de los elementos de manera ms eficaz y agradable a la vista. Adems, se le puede aadir azulpara suavizar las posibles connotaciones negativas que se comentaban anteriormente.


9/12


En definitiva, cuando estamos hablando se colores es mejor pecar de prudentes antes que arriesgarnos a que se provoque unadispersin de la atencin por parte del usuario. Pero, con una pequea dedicacin, un proyecto que utilice una agrupacin bienestudiada de colores va a mejorar claramente el acabado final, enriquecindolo de una forma muy interesante.

Usar el color para definir los espacios: Si se quiere disear una pgina con anchos fijos, es mejorcentrarla en la pantalladel navegador y mejorar as su presentacin.

2.4 Caractersticas del color en una interfaz grfica

Considere cul es la razn para aprovechar las ventajas del color: ofrecer al usuario la misma informacin pero de una formams persuasiva o amistosa, incrementando su inters. Por lo tanto, la principal utilidad que va a tener el color en las pantallasde la interfaz grfica ser la de resaltar las informaciones que se consideren ms importantes en detrimento del resto, para aspoder identificar rpidamente los datos ms relevantes, que sern aquellos a los que se presta atencin prioritariamente.

Un buen manejo del color lleva a agrupar los diferentes elementos de la pantalla en conjuntos, que quedarn asociados aunqueestn distanciados espacialmente, y a distribuir de forma clara los que deben diferenciarse. Este punto de vista de asociaciones ydivisiones se aplica tanto a los componentes fsicos de la pantalla como a las ideas y procesos inherentes a ellos. Por ejemplo, sepuede emplear la misma gama de colores para sealar una secuencia de procesos determinada sin necesidad de numeraciones oindicaciones directas. Tambin es muy interesante cuando se tiene informacin dinmica en el tiempo, ya que se altera el colorcuando cambia el estado de la informacin.

Se debe tener en cuenta que los objetos verdes o azules parecen ms grandes que aquellos que son rojos o amarillos. Tambinque los colores fros hacen aparecer al objeto como mucho ms plano que los calientes, que producen efecto de relieve. Pero,como se ha enunciado antes, no se puede emplear cualquier color en cualquier momento. Es necesario tener un criterio de

distribucin decidido desde el momento en que se conoce que se van a utilizar colores en nuestras pantallas.

Uno de los errores ms habituales a la hora de disear una pantalla es que intentando aprovechar la posibilidad de usar el color,acabar abusando de l. Esto puede ocurrir cuando en la aplicacin se presentan, por ejemplo, diferente gama de colores, lo queprovoca confusin a la persona que va a manejarla, ya que acaba preocupndose ms de adaptar su vista al continuo cambio decolor que al contenido de la informacin. Tambin hay que hacer hincapi en evitar las combinaciones que puedan provocarconnotaciones culturales negativas, que pueden llegar a herir susceptibilidades.
http://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-centrar-una-pagina-web.phphttp://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-centrar-una-pagina-web.phphttp://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-centrar-una-pagina-web.phphttp://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-centrar-una-pagina-web.php


10/12


Combinacin errnea indiscriminada. Vea un ejemplo de combinacin errnea indiscriminadaen la siguiente imagen. La pantalla que se ha elegidopertenece a una aplicacin sobre historiales clnicos.Dispone de dos bloques de informacin: los datos

personales del paciente y la relacin de las citasanteriores a la actual, cada uno de ellos en un marco(frame). Realmente son dos informaciones que, aunqueindependientes, mantienen la asociacin de pertenecer ala misma persona. Sin embargo, el diseador ha decididodistinguir claramente las diferencias al establecer loscolores verde y rojo como fondo para estos marcos. Laconjuncin de dos tonos tan distintos entre s invita apensar que ambos conceptos son completamenteexclusivos, aunque en la realidad no sea el caso, ya quetanto los datos personales como las citas anteriores serefieren al mismo paciente.

Otro error en el diseo de esta pantalla ha sido la de utilizar unas etiquetas con un color muy parecido en el fondo. Ocurre enlos cuadros de texto de los datos personales. El azul es muy semejante al verde y por lo tanto no permite una ntidadelimitacin. Obliga a forzar los ojos, lo que desde luego agota la vista del usuario en muy poco tiempo. Adems, cuando seutilizan varias tonalidades del mismo color, como es el caso, puede incluso provocar confusin, o dar la impresin de quealgunos datos fsicamente cercanos estn conceptualmente distantes.

Por ltimo, vea la diferencia entre un texto de color oscuro sobre fondo claro (como suele ser lo habitual) y al revs. Laprimera situacin la tenemos en los datos personales y la segunda en las citas anteriores. Como se puede observar, es muchoms fcil trabajar con situaciones como la del marco superior.

En esta imagen se ha representado la misma pantalla pero con colores ms adecuados.


11/12


Pantalla con colores adecuados.

Este problema de atropello de los colores no es exclusivo de cada pantalla considerada de una manera singular. Es posible quese estudie cada pantalla de forma individual y nos parezca que las combinaciones han sido las adecuadas, que el efecto pticoque producen es armonioso y no son susceptibles de provocar efectos negativos en el ojo del usuario ni desviacionesdesproporcionadas de atencin. Esto es debido a que a veces el problema se presenta porque la combinacin errnea se

compone entre pantallas.No es de recibo que a lo largo de la aplicacin el usuario pueda ver que el predominio de los tonos en tiempo de ejecucin vavariando sin ningn orden lgico y que lleguen, incluso, a provocar interferencias entre las pantallas. Por supuesto, hay queintentar mantener una coherencia, buscando siempre transmitir una sensacin de bloque homogneo durante toda laaplicacin. Si, por ejemplo, los fondos de todas las pantallas no pertenecen a la misma gama de color, provocar sin dudaconfusin a la persona que en este momento observa el monitor de su ordenador, a pesar de que pantalla a pantalla lacomposicin de tonalidades haya sido la adecuada. Desde luego, el problema de la uniformidad es extrapolable al resto decaractersticas de nuestra aplicacin. El usuario debe encontrarse en un entorno homogneo para poder trabajar.

La anterior reflexin nos lleva a establecer que cualquier medida tomada en cuanto al color para incrementar los aspectosergonmicos de nuestras aplicaciones deben ser estudiadas tanto a nivel individual de cada pantalla como a nivel global de laaplicacin completa.

Gua de uso del color en el diseo de GUIs. Recomendaciones.

1.

Usar un mximo de cinco, ms menos dos colores. Cuatro colores distintos son apropiados. Permite mayor sitio adicionalen la memoria a corto plazo (memoria de trabajo). Los ordenadores pueden proporcionar al rededor de 16 millones decolores, pero los humanos slo pueden discriminar entre 7,5 millones de colores.

2.

Usar colores centrales y perifricos de forma apropiada. Usar el color azul para reas grandes, no para detalles o texto. Elazul es apropiado para fondos de transparencias y pantallas. Usar el rojo y el verde para captar la atencin es una buenamedida, el campo visual se adapta fcilmente a esto.

3. Usar el mismo color para agrupar elementos relacionados. La ciencia cognitiva ha avanzado en la nocin de preparar y elproceso preatento. En este contexto, puedes preparar al usuario para eventos relacionados usando un cdigo de color

comn. Un grupo de imgenes sucesivas puede mostrarse para relacionarse usando el mismo color. Colores similarespueden evocar significados similares. Es preciso mantener el color de fondo a no ser que exista una poderosa razn, por elmismo motivo.

4.

Usar un cdigo de formas redundante de la misma manera que el color. Hace la pantalla ms impermeable a distorsionesen el color. Los cambios en la claridad del ambiente puede provocar cambios en el color percibido.

5.

Evitar azul para el texto, lneas finas, y formas pequeas. Nuestro sistema visual no est nicamente diseado paraestmulos detallados y precisos en longitudes de onda corta. Sin embargo, el azul es muy aconsejable para el color defondo, y se percibe de manera idnea en la periferia del campo visual.

6.

Evitar que los colores adyacentes difieran nicamente en la cantidad de azul. Los lmites que difieran nicamente en lacantidad de azul se percibirn distintos.

7.

Evitar el rojo y el verde en la periferia de pantallas de gran escala. Debido a la insensibilidad de la periferia retinal al rojo yal verde, estos colores deben ser evitados en la periferia en su forma saturada. El amarillo y el azul son buenos coloresperifricos.


12/12


Construccin de GUI

Las grandes inversiones tecnolgicas no han producido los incrementos de productividad esperados y en esto no ayuda el re-entrenamiento constante de usuarios ante nuevos productos y/o nuevas versiones (upgrades) de sistemas. La inversin en TIno aumenta automticamente la productividad, pero es un componente esencial para la construccin de un sistema de trabajoque s la incrementar. Una GUI atractiva y con buena usabilidad colabora en el incremento de la productividad.

Se acepta que la interfaz comprende los dispositivos E/S, y el software que los administra. Tambin debe incluirse cualquierotro aspecto que trate con el uso humano de las computadoras:

Documentacin

Entrenamiento

Soporte tcnico

Contexto de uso

Qu es CSS?

es un lenguaje de estilo que define la presentacin de los documentos HTML. trata temas relativos a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo, posicionamiento avanzado y

muchos otros temas.

est soportado por todos los navegadores hoy da.

permite controlar la presentacin de muchos documentos desde una nica hoja de estilo.

Fuentes Bibliogrficas

1.

Aguiar Fernndez, M. y Aguiar Fernndez, K. Asociaciones mentales de los colores. En: La eleccin del color en lasinterfaces grficas de usuario.www.tid.es/presencia/boletin/bole16/art002.htm

2.

Enrique M. Coperas. (1998). Documento: Las maravillas de la visin. Muy Interesante. Numero 211.

3.

Mara del Mar Aguiar Fernndez, Karlos Aguiar Fernndez. (1998). La eleccin del color en las interfaces grficas deusuario. Boletn Digital de Factores Humanos. Departamento I+D de Telefnica.

4.

accedido el 12 de junio de 2013,http://blog.txipinet.com/2006/08/28/28-estudio-sobre-el-diseno-de-guis-iii-la-importancia-del-diseno/
http://www.tid.es/presencia/boletin/bole16/art002.htmhttp://www.tid.es/presencia/boletin/bole16/art002.htmhttp://blog.txipinet.com/2006/08/28/28-estudio-sobre-el-diseno-de-guis-iii-la-importancia-del-diseno/http://blog.txipinet.com/2006/08/28/28-estudio-sobre-el-diseno-de-guis-iii-la-importancia-del-diseno/http://blog.txipinet.com/2006/08/28/28-estudio-sobre-el-diseno-de-guis-iii-la-importancia-del-diseno/http://blog.txipinet.com/2006/08/28/28-estudio-sobre-el-diseno-de-guis-iii-la-importancia-del-diseno/http://www.tid.es/presencia/boletin/bole16/art002.htm

Documents

1 Diseño de Interfaces Gráficas