¿Qué es una GUI?
Sus siglas vienen del inglés (graphical user interface) que a su vez en español significa interfaz gráfica de usuario, este es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador. Es necesario resaltar que, en el contexto del proceso de interacción persona-computadora, la interfaz gráfica de usuario es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.
Si deseas profundizar un poco más te dejare el link de la información más ampliada:
Acá dejare dos enlaces que conducen a videos que hablan acerca las GUI donde se explica a detalle y de una forma más visual el concepto anterior:
->Fundamentos e importancia de un Buen Diseño de GUI, formularios, elementos, métodos.
Para realizar un buen diseño de GUI hay que tener en cuenta 9 principios fundamentales, como lo son:
1. Comunicación Visual Efectiva para Interfaces Gráficas de Usuario:
El uso de tipografía, símbolos, color y otros gráficos estáticos y dinámicos son comúnmente usados para expresar hechos, conceptos y emociones. Esto compone un diseño gráfico sistemático orientado a la información que ayuda a la gente a comprender información compleja. La comunicación visual efectiva para este sistema se basa en algunos principios básicos de diseño gráfico.
2. Consideraciones de Diseño:
Existen tres factores que pueden considerarse para el diseño de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptación.
Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto incluye toolkits y librerías de componentes, soportes para un rápido 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 múltiples representaciones. Como factores de aceptación están la política de la corporación, los mercados internacionales, y la documentación y entrenamiento.
3. El Lenguaje Visible:
El Lenguaje Visible se refiere a todas las técnicas gráficas usadas para comunicar el mensaje o contexto. Esto incluye:
– Disposición o Layout: formatos, proporciones, y mallas (grids); organización: ya sea 2D y 3D.
– Tipografía: selección de tipos de letra y estilos, incluyendo la anchura fija y variable.
– Color y Textura: color, textura y luminancia aportan información compleja y realidad pictorial.
– Imágenes: signos, iconos y símbolos, desde lo fotográficamente real a lo abstracto.
– Animación: un display dinámico o cinético: muy importante en la utilización de imágenes relacionadas con el vídeo.
– Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamiento lógico.
– Sonido: abstracto, vocal, concreto, o musical.
– Identidad Visual: las reglas adicionales y únicas que proporcionan consistencia de conjunto a una interfaz de usuario.
4. Principios del Diseño 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 máximo con la menor cantidad de elementos.
– Comunicar: ajustar la presentación a las capacidades del usuario.
5. Términos y conceptos relacionados con el color:
Las discusiones sobre el color suelen ser confusas porque científicos, artistas, diseñadores, programadores y profesionales del marketing describen el color de diferentes formas.
Algunas de estas formas difieren del rojo, verde y azul que basan el sistema de color «RGB», familiar para los usuarios de periféricos con tubos de rayos catódicos (CRTs).
Los siguientes términos aclaran conceptos sobre esta manera de entender el color:
- Matiz (Hue) es la composición espectral de longitud de onda que produce percepciones de ser azul, naranja, verde, etc. por ejemplo.
- Valor (Value) es la cantidad relativa de claridad u oscuridad del color en un rango desde el negro al blanco (también llamado intensidad).
- Saturación (Chroma) es la pureza del color en una escala desde el gris a la variante más viva del color percibido.
- Brillo (Brightness) es la cantidad de energía luminosa al crear el color.
6. Principios de diseño del color:
Los tres principios básicos de diseño pueden aplicarse también al color: organización del color, economía del color y comunicación del color.
- Organización del color:
La organización del color influye en la consistencia de la organización. El color debe emplearse para agrupar los ítems relacionados. Debe aplicarse una organización de color consistente tanto a las pantallas, como a la documentación y a los materiales de entrenamiento. Los colores similares infieren similitud en los objetos. Se debe mirar la consistencia al agrupar objetos con el mismo color. Una vez se establece una codificación del color, esta debe ser usada en toda la interfaz gráfica, así como en la documentación y publicaciones relacionadas.
- Economía del color:
El segundo principio del color, la economía del color, sugiere usar un máximo de 5 +/- 2 colores cuando el significado tiene que ser recordado. La idea fundamental es usar color para aumentar la información proporcionada en blanco y negro (por ejemplo, diseñar la interfaz para que funcione bien primero en blanco y negro).
-Comunicación del color:
El énfasis del color sugiere usar fuertes contrastes en valor y tono para centrar la atención del usuario en la información más importante. Cuando demasiadas figuras o campos del fondo compiten por la atención del usuario se produce cierta confusión. La jerarquía de los estados sobre iluminado, neutro e infra iluminado para todas las áreas de la pantalla deben ser cuidadosamente diseñadas para proporcionar la máxima sencillez y claridad.
7. Simbolismo del color:
La importancia del color es comunicar. Los códigos de colores deben respetar el uso profesional y cultural ya existente de determinados colores. Las connotaciones varían fuertemente respecto a los diferentes tipos de usuario, especialmente cuando son 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 usa un icono gráfico para representar el correo electrónico, es conveniente adecuar su color al país para mejorar la comunicación.
8. Combinaciones entre colores:
Cuando pensamos en qué colores debemos emplear en nuestras pantallas debemos reparar en la influencia que un determinado color puede llegar a tener sobre el resto. Los colores provocan sensaciones cuando se abandona su visión y se pasa sin transición 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 más pálido y mate.
En general, los colores tienen unas propiedades psicológicas que actúan sobre nuestro subconsciente. Existen algunos efectos de la yuxtaposición entre colores que se admiten de forma general. Por ejemplo, el color amarillo, que como hemos dicho es alegre y brillante, pierde toda su fuerza cuando se combina con el blanco. Para rebajar el excesivo dinamismo que evoca el naranja no hay nada como mezclarlo con el blanco. Sin embargo, combinado con el rojo forma un color pardo demasiado denso. El violeta combina muy bien con el rojo, porque da más prestancia a la imagen noble y altiva del violeta, pero si se mezcla con el blanco resulta cursi.
9.Guía de uso del color en el diseño de GUIs. Recomendaciones:
1.- Usar un máximo de cinco, más menos dos colores.
Cuatro colores distintos son apropiados. Permite mayor sitio adicional en la memoria a corto plazo (memoria de trabajo). Los ordenadores pueden proporcionar alrededor de 16 millones de colores, pero los humanos sólo pueden discriminar entre 7,5 millones de colores.
2.- Usar colores centrales y periféricos de forma apropiada.
Usar el color azul para áreas grandes, no para detalles o texto. El azul es apropiado para fondos de transparencias y pantallas. Usar el rojo y el verde para captar la atención es una buena medida, el campo visual se adapta fácilmente a esto.
3.- Usar el mismo color para agrupar elementos relacionados.
La ciencia cognitiva ha avanzado en la noción de preparar y el proceso preatento. En este contexto, puedes preparar al usuario para eventos relacionados usando un código de color común. Un grupo de imágenes sucesivas puede mostrarse para relacionarse usando el mismo color. Colores similares pueden evocar significados similares. Es preciso mantener el color de fondo a no ser que exista una poderosa razón, por el mismo motivo.
4.- Usar un código de formas redundante de la misma manera que el color
Hace la pantalla más impermeable a distorsiones en el color. Los cambios en la claridad del ambiente pueden provocar cambios en el color percibido.
5.- Evitar azul para el texto, líneas finas, y formas pequeñas.
Nuestro sistema visual no está únicamente diseñado para estímulos detallados y precisos en longitudes de onda corta. Sin embargo, el azul es muy aconsejable para el color de fondo, y se percibe de manera idónea en la periferia del campo visual.
6.- Evitar que los colores adyacentes difieran únicamente en la cantidad de azul.
Los límites que difieran únicamente en la cantidad de azul se percibirán 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 y al verde, estos colores deben
ser evitados en la periferia en su forma saturada. El amarillo y el azul son buenos
colores periféricos.
Acá dejare una reseña donde se explica a detalle cada uno de los conceptos
anteriormente mencionados:
Acá un video que nos señala como mejorar en el diseño de nuestras interfaces:
