Interfaces Gráficas

Este artículo puede incluir

175-225 palabras.

El propósito del boletín es

proporcionar información

especializada para un pú-

blico determinado. Los

boletines constituyen un

buen método publicitario

para sus productos o servi-

cios, además de otorgar

credibilidad y afianzar la

imagen de su organización

tanto fuera como dentro

de ella.

En primer lugar, determine

el público al que va dirigi-

do el boletín; por ejemplo,

empleados o personas

interesadas en un produc-

to o servicio.

Cree una lista de direccio-

nes a partir de las tarjetas

de respuesta, hojas de

información de clientes,

tarjetas de presentación

obtenidas en ferias o listas

de miembros. Puede ad-

quirir también una lista de

direcciones de una organi-

zación.

Publisher incluye numero-

sas publicaciones que se

ajustan al estilo de su bo-

letín.

A continuación, establezca

el tiempo y el dinero que

puede invertir. Estos facto-

res le ayudarán a determi-

nar la frecuencia con la

que publicará el boletín y

su extensión. Se recomien-

da publicar un boletín al

menos trimestralmente,

con el fin de que se consi-

dere una fuente constante

de información. Sus clien-

tes o empleados esperarán

su publicación.

Título del artículo principal

Título del artículo secundario


75-125 palabras.

El título es una parte im-

portante del boletín y debe

pensarlo con detenimien-

to.

Debe representar fielmen-

te y con pocas palabras el

contenido del artículo y

despertar el interés del

público por leerlo. Escriba

primero el título. De esta

manera, el título le ayuda-

rá a desarrollar el artículo

centrado en este punto.

Algunos ejemplos: Premio

internacional para un pro-

ducto, ¡Este nuevo produc-

to le ahorrará tiempo! y

Próxima apertura de una

oficina cerca de usted.

Nombre del trabajo

Título del boletín

Pie de imagen o gráfico.

Contenido:

Artículo interior 2







Fecha del boletín Volumen 1, nº 1

Puntos de interés

especial:

Destaque brevemente un punto de interés.




INTERFACES GRÁFICAS

Tecnología del Futuro

Evelyn Guerrero

I nterfaz es un término que procede

del vocablo inglés interface.

En informática, esta noción sirve pa-

ra señalar a la conexión que se da de

manera física y a nivel de utilidad en-

tre dispositivos o sistemas.

La interfaz, por lo tanto, es una conexión

entre dos máquinas de cualquier tipo, a las

cuales les brinda un soporte para la comunica-

ción a diferentes estratos.

En la electrónica y las telecomunicaciones, la

interfaz es un circuito físico que envía o recibe

señales de un sistema hacia otro.

¿QUÉ ES INTERFAZ?

2

Es posible entender la interfaz como:

Espacio: Desde esta perspectiva la interfaz es

el lugar de la interacción, el espacio donde se

desarrollan los intercambios

Instrumento: A modo de extensión del cuerpo

humano, como el mouse que permite interac-

tuar con una computadora.

Superficie: el objeto que aporta

información a través de su textura, forma

o color.

3

Espacio

Interfaces Graficas Tecnología del Futuro

INTERFAZ

Instrumento

Superficie

L a interfaz de usuario es el medio con

que el usuario puede comunicarse con

una máquina, un equipo o una computadora,

y comprende todos los puntos de contacto

entre el usuario y el equipo. Normalmente

suelen ser amigables e intuitivos.

Las interfaces básicas de usuario son aquellas

que incluyen elementos como menús,

ventanas, teclado, ratón, los beeps y algunos

otros sonidos que la computadora hace, y en

general, todos aquellos canales por los cuales

se permite la comunicación entre el ser

humano y la computadora. La mejor

interacción humano-máquina a través

de una adecuada interfaz (Interfaz de

Usuario), que le brinde tanto

comodidad, como eficiencia.

S us principales funciones son las

siguientes:

Puesta en marcha y apagado.

Control de las funciones manipulables

del equipo.

Manipulación de archivos y directo-

rios.

Herramientas de desarrollo de apli-

caciones.

Comunicación con otros sistemas.

Información de estado.

Configuración de la propia

interfaz y entorno.

Intercambio de datos entre aplicaciones.

Control de acceso.

Sistema de ayuda interactivo.

4


INTERFAZ DE USUARIO

Interfaz de usuario

Funciones principales

D entro de las Interfaces de Usua-

rio se puede distinguir básica-

mente tres tipos:

Una interfaz de software, destinada a entregar

información acerca de los procesos y

herramientas de control, a través de lo que el

usuario observa habitualmente en la pantalla.

Una interfaz de hardware, a nivel de los

dispositivos utilizados para ingresar, procesar

y entregar los datos: teclado, ratón y pantalla

visualizadora.

Una interfaz de Software-Hardware, que

establece un puente entre la máquina y las

personas, permite a la máquina entender la

instrucción y al hombre entender el código

binario traducido a información legible.

5


INTERFAZ DE USUARIO

Tipos de interfaz de usuario

Interfaz de hardware

interfaz de software

Interfaz de Software-Hardware

A tendiendo a como el usuario puede

interactuar con una interfaz, nos

encontramos con varios tipos de interfaces

de usuario:

Interfaces alfanuméricas (intérpretes de co-

mandos) que solo presentan texto. Exigen

que el usuario introduzca instrucciones bre-

ves mediante un teclado para dirigir las ac-

ciones de la computadora.

Interfaces táctiles, que representan

gráficamente un "panel de control" en una

pantalla sensible que permite interactuar

con el dedo de forma similar a si se

accionara un control físico.

Interfaces gráficas de usua-

rio (GUI, graphic user interfaces), las que

permiten comunicarse con el ordenador

de una forma muy rápida e intuitiva re-

presentando gráficamente los elementos

de control y medida.

6


INTERFAZ DE USUARIO

Otra Clasificación

Según la forma de interactuar del usuario

Interfaces alfanuméricas

Interfaces gráficas de usuario

Interfaces táctiles

Para aprender un poco mas sobre las interfaces de usuario es de suma importancia antes

conocer como ha evolucionado las interfaces de usuarios a través de la historia. Para ellos

comenzaremos con:

El Macintosh fue el primer ordenador co-

mercial de éxito que disfrutó del uso de una GUI.

Ya en 1984, usaron una metáfora de escri-

torio similar a la de Star. Las primeras ver-

siones de Lisa no seguían exactamente el

paradigma WIMP, pero futuras versiones

se vieron aún más influenciadas por el pro-

digio de Xerox.

7


INTERFAZ GRÁFICA

Historia de la interfaz gráfica

En este nuevo sistema podía apreciarse un

paradigma basado en ventanas, iconos, me-

nús y cursores (WIMP), antes probado en el

ordenador experimental Xerox Alto y que

apareció comercialmente en el ordenador

Xerox Star

1981 Xerox Star

1984 Mac Lisa

El ordenador Amiga fue lanzado por Com-

modore en 1985 con una GUI llamada Workbench.

Los usuarios recuerdan las primeras versiones por

su llamativa paleta de colores (azul, naranja, blanco

y negro), seleccionada así por su alto contraste.

Workbench se llamó así porque representaba los

directorios como "cajones" de un escritorio virtual

llamado banco de trabajo (Workbench en inglés). La

librería que lo hacía funcionar recibió el nombre de In-

1985 Amiga Workbench

Windows 1.0 era una GUI para el siste-

ma operativo MS-DOS, que había sido

el sistema elegido por los ordenadores

de IBM y compatibles desde 1981. Pri-

mer sistema operativo basado en una

GUI, padre gráfico de la mayor parte

de cosas que manejamos hoy en día,

con brillantes y rimbombante iconos a

una lujosa resolución de 32×32 y gráfi-

cos a color

Surgió en 1986 como un sistema diseñado

para el ordenador de 8 bits Commodore 64,

aunque luego se portó al IBM PC. Traía

aplicaciones como un calendario o un

editor de textos incorporados de serie.

Se diseño para la línea de ordenadores NeXT,

pudiéndose destacar que usaba, ya

entonces, PostScript para sus gráfi-

cos. Su característica más destaca-

ble era el Dock, un repositorio don-

de poner aplicaciones, portado al

Mac OS posteriormente. Fue la pri-

mera GUI que hacía opacas las ven-

tanas al arrastrarlas. Era considera-

blemente más sencillo de usar que

cualquiera de sus predecesores.

8


INTERFAZ GRÁFICA


1985 Windows 1.0

1986 Geos

1989 NeXTSTEP

Una nueva interfaz de usuario llena

de color. Aunque esta característica

se hizo como una mejora de la inter-

faz visual, era opcional. Solamente

algunos objetos se colorearon: las

barras de scroll, por ejemplo, tenían

un nuevo aspecto, pero los botones

permanecían en blanco y negro.

Windows 95 es un sistema operati-

vo con interfaz gráfica de usuario híbrido de

entre 16 y 32 bits. Una versión nueva para los

consumidores, y grandes fueron los cambios

que se realizaron a la interfaz de usuario, y

también se utiliza multitarea preceptiva. Win-

dows 95 fue diseñado para sustituir no sólo a

Windows 3.1, sino también de Windows para

Workgroups y MS-DOS. Sus sucesores direc-

tos fueron Windows 98 y Windows ME.

9


INTERFAZ GRÁFICA


1991 Mac OS System 7

1995 Windows 95

El equipo desarrollador de esta GUI describe a

KDE como “Un entorno de Escritorio contem-

poráneo para estaciones de trabajo Unix. KDE

llena la necesidad de un escritorio amigable

para estaciones de trabajo Unix, similar a los

escritorios de MacOSX o Windows” Este siste-

mas es, personalizable como pocos, lo cual le

ha hecho ganar bastante adeptos con conoci-

miento avanzado en sus siguientes versiones.

1998 KDE 1.0

tiene una interfaz gráfica de usuario (GUI)

perceptiblemente reajustada

(denominada Luna), la cual incluye caracte-

rísticas rediseñadas, algunas de las cuales

se asemejan ligeramente a otras GUI de

otros sistemas operativos, cambio promovi-

do para un uso más fácil que en las versio-

nes anteriores.

El escritorio GNOME es bastante configurable:

puede configurar los menús, los iconos, las

tipografías, el fondo, el protector de pantalla,

el tema, el administrador de ventanas, sonido,

la interacción con las ventanas y muchos otros

detalles de acuerdo a su gusto. Para hacer al-

gunas de las configuraciones puede emplear

opciones de los menús GNOME, el ratón

10


INTERFAZ GRÁFICA


2001 Mac OS X

2001 Windows XP

1999 GNOME 1.0

Es un entorno operativo basado en Unix. El

cambio más visible fue la inclusión de la inter-

faz Aqua. La misma hacía uso de bordes sua-

ves, colores translucidos y rayas -similar al di-

seño del hardware de los primeros iMac- trajo

más textura y color a la interfaz de usuario.

Desde su versión 1.0 el escritorio mejoró

cantidades. Con gráficos mejorados e

iconos, redefinieron la experiencia del

usuario promedio de este OS.

Este OS de sexta generación, me-

joró muchísimo la interfaz de

usuario. Básicamente sigue sien-

do Aqua pero con barras para

scroll y el clásico gris platino re-

novado, ahora con mas azul. La

GUI tiene ahora un toque mas 3D, con un

dock con iconos interactivos y animados.

11


INTERFAZ GRÁFICA


2002 KDE 3

2007 Windows Vista Windows Aero

Es una nueva interfaz gráfica que per-

mite la transparencia en las ventanas.

Incluye «Flip 3D», una mini-aplicación

que permite cambiar de ventana con

presionar la tecla Windows y el tabu-

lador. Además, permite tener una vis-

ta preliminar de las ventanas abiertas,

con solo pasar el ratón sobre los boto-

nes en la barra de tareas. Viene inclui-

do en las ediciones a partir de Home

Premium.

2007 Mac OS X Leopard

Nuevo diseño de la interfaz de

usuario Aqua incluyendo, nuevo

diseño de botones y de la Barra de

Progreso, los botones de color Rojo,

Amarillo y Verde, Cerrar, Minimizar

y Maximizar en la decoración de las

ventanas se han hecho más peque-

ños, el Acabado de Metal también

ha sido ligeramente alterado.

La versión 4 de este desktop trajo

muchas mejoras, como manejo de

ventanas suave pero animado, y

siguiendo la tendencia de Micro-

soft incluyeron Widgets (con relo-

jes analógicos, por supuesto). El

tamaño de los iconos es ajustable,

y los elementos de diseño son mas fáciles de configurar al gusto.

Nuevos sonidos, temas e iconos fotorealistas. Ahora también pue-

de correr bajo plataformas Windows y Mac OS X.

12


INTERFAZ GRÁFICA


2009 Windows 7

2011 Mac OS X 10.7

2009 KDE v4.2

se enfocaron en demostrar capacida-

des multitáctiles, una interfazrediseñada junto

con una nueva barra de tareas y un sistema de

redes domésticas simplificado y fácil de usar.

permite ahora la personalización del equipo,

al guardar temas completos, lo que incluye

color de ventanas, imágenes incluidas, conjun-

to de sonidos, inclusoprotector de pantalla

Su interfaz de usuario ha sido modificada para hacerla más adecuada para su

uso con pantallas táctiles, además de los tradicionales ratón yteclado. El efecto

Aero Glass está presente en este sistema operativo, poniendo nuevos efectos

planos para ventanas y botones con un simple color.

13


INTERFAZ GRÁFICA


2012 Windows 8

2013 Mac OS X 10.9 Mavericks, Es una nueva versión que integra las aplicaciones de iOS como Re-

cordatorios, Notas, Mensajes, iBook y notificaciones instantáneas pero con

mucha más personalización. La nueva versión se puede actualizar sin ningún

costo desde el mismo día de su presentación. Entre otras novedades anuncia-

das de OS X Mavericks está la opción de usar una HDTV como segundo moni-

tor por medio de Ap-

ple TV y el aumento

de la duración de la

batería para los usua-

rios de MacBook

Air de 11" y 13", con

mayor ahorro de

energía para iMac

http://es.wikipedia.org/wiki/Interfaz_de_usuario

http://es.wikipedia.org/wiki/Pantalla_t%C3%A1ctil

http://es.wikipedia.org/wiki/Rat%C3%B3n_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/Teclado_(inform%C3%A1tica)

http://es.wikipedia.org/wiki/MacBook_Air

http://es.wikipedia.org/wiki/MacBook_Air

E l modelo de aprendizaje de Selección,

Organización e Integración (S.O.I) favorece la

activación de los elementos cognitivos que

forman parte del proceso de aprendizaje de la

persona. Se centra en “el que aprende”, vale

decir, en la audiencia del material multimedia,

sea publicitario, instruccional, etc., (Reigeluth,

1999).

Este modelo puede emplearse en ambientes

educativos para la confección de contenidos

en formato electrónico, de libros de texto y de

cualquier otro material que se diseñe con fina-

lidad instruccional. Su aplicación es adecuada

en modelos constructivistas de aprendizaje,

donde se propone la elaboración del conoci-

miento y la estimulación de la memoria activa.

La intención del diseño visual no es que las

aplicaciones luzcan “bonitas”. Un buen Diseño

Visual está centrado en la Comunicación. La

información visual es un complemento del

diseño estructural de una aplicación.

El uso de pautas de Diseño de I nterfaces

sobre sus formularios hace que el usuario

pueda entender fácilmente la información

presentada, mostrándosele claramente

cómo puede y debe interactuar con la

misma. Si esto se hace, aunque las

pantallas no tengan un despliegue gráfico

grandilocuente, su aplicación tendrá un exce-

lente aspecto para los usuarios.

14


PAUTAS PARA EL DISEÑO

Pautas de Diseño de Interfaces Gráficas Basadas en el Modelo de Aprendizaje S.O.I.

Plataformas: Microsoft®, Linux

Modelo de Aprendizaje S.O.I.

Pautas de Diseño de Interfaces Gráficas

Principios de Composición de Elementos

en el Diseño de la Ventana

Estructura de la información y las tareas

del usuario en la aplicación.

Se distingue aquí la posición y jerarquía de los

elementos visuales con respecto a los otros

elementos que componen la ventana. Influye,

además, el orden de ejecución de las tareas

del usuario. Debe facilitarse la comprensión

de este orden.

Punto Focal en la ventana.

Se determina la ubicación de los elementos

prioritarios. Una vez definida la idea central,

surge el punto focal para la actividad. Este

punto debe destacarse sobre los demás ele-

mentos o controles de la interfaz, con técnicas

que estimulen el proceso cognitivo de selec-

ción de la información pertinente, tales como

uso de espaciado, aislamiento u otros méto-

dos. La ubicación de los elementos en la inter-

faz gráfica está afectada por la cultura, por las

pautas de diseño y, en ocasiones, por las téc-

nicas de diseño instruccional que se apliquen.

Por lo general, en la cultura occidental, donde

se lee de izquierda a derecha y de arriba hacia

abajo, las personas buscan la información im-

portante en la parte superior izquierda de la

pantalla. Luego, en este orden, se tiende a

ubicar los elementos en la interfaz según su

importancia y relación.

Estructura y Consistencia entre ventanas.

La estructura de la organización de los ele-

mentos en todas las ventanas de una aplica-

ción debe ser constante, por lo que hay que

estandarizar elementos como presentación de

menús, botones de comandos, etiquetas, etc.

La estructura y la consistencia facilitan el

aprendizaje y asimilación en el usuario

(Nielsen 2002).

Relación entre elementos.

Trata de la proximidad espacial que debe exis-

tir entre elementos de la interfaz que presen-

ten nexo informativo-comunicativo; por ejem-

plo, una lista que permita seleccionar valores

que son cargables a un cuadro de texto. En

este caso, ambos controles deben estar espa-

cialmente cercanos.

Legibilidad y Flujo entre los elementos.

Consiste en proporcionar facilidad en la lectu-

ra y comprensión de la comunicación de las

ventanas, dadas en función del espaciado y

alineación de los elementos de la interfaz.

Integración.

Se logra al medir la relación entre el diseño

visual de la aplicación y las aplicaciones del

sistema u otras aplicaciones del entorno gráfi-

co que se utilizan (MicroSoftâ® , 2000, p. 367).

15



Principios de Composición de Elementos en el Diseño de la Ventana

A continuación se presentan los principios que rigen la composición de elementos en el

diseño de la ventana:

E l color debe ser considerado como una

herramienta adicional en el diseño y no como

una necesidad básica. No hay que depender

de colores para mostrar la información impor-

tante; si los colores no son correctamente per-

cibidos, en caso de que el usuario tenga siste-

mas de poca resolución o posea algún impedi-

mento visual leve, la aplicación debe conti-

nuar siéndole usable. En el uso del color es

conveniente aplicar:

1. El color es una forma de información

secundaria

Evite confiar en el color como único medio de

informar una condición o valor.

2. Aplique conjunto limitado de colores

Los colores apagados, sutiles y complementa-

rios suelen ser los más apropiados en el dise-

ño de interfaces para aplicaciones de corte

empresarial y académicas (Andragogía). En el

caso de que la audiencia de los componentes

instruccionales sea infantil, debe diseñarse la

interfaz, como corresponde siempre, en fun-

ción de sus intereses: edad, cultura, conoci-

mientos, conductas previas, etc. En este caso

particular, se recomiendan los colores prima-

rios cálidos, sin tender a “carnavalizar” la in-

terfaz, a menos que así lo requiera la intencio-

nalidad del diseño instruccional del compo-

nente de software.

3. Uso de Paletas

El uso de paletas de combinación de colores

aplicables en los formularios brinda una apa-

riencia de unificación, consistencia y formali-

dad, lo que minimiza la posibilidad de crear

distractores visuales

16

Color



L os usuarios con desórdenes visuales

(ceguera o baja visión nocturnas) requie-

ren alternativas para la asignación de colores

por defecto de una aplicación. Una buena In-

terfaz de usuario se anticipa a estas necesida-

des y proporciona opciones para personalizar

las preferencias del color. Sin embargo, es me-

jor si la aplicación está ya configurada con una

cuidadosa selección de color y contraste por

defecto.

Se estima que un 11% de la población mundial

tiene algún desorden de ceguera nocturna

(Dougerty y Wade, 2002). Esta afección se ma-

nifiesta en la incapacidad de distinguir ciertos

matices tanto del color rojo como del verde

(deuteranopia o protanopia) o azul y amarillo

(tritanopia). En consecuencia, es necesario

permitir al usuario personalizar los colores en

cualquier parte de la aplicación que presente

información importante. Esto significa que la

aplicación debe comunicar la información

efectivamente en cualquier configuración o

personalización de color que el usuario selec-

cione.

L a localización de los componentes en la

ventana determina la

relación entre estos, de

allí la importancia de la

posición que se le asig-

ne. Esto se llama

“Layout” en diseño de

Interfaces.

Un layout limpio es cru-

cial para crear un flujo

visual de información sin problemas para el

usuario. En esta sección se describen la ubica-

ción adecuada de los componentes y el espa-

ciado recomendado por

el Proyecto de Usabili-

dad de GNOME (Group

GNOME, 2002). La

mayoría de los compo-

nentes analizados serán

etiquetas, íconos, boto-

nes de opción, de che-

queo, campos de texto

y botones de comando.

17

Matiz, Resplandor y Contraste...

Disposición de la Ventana (Formulario)



C uando un usuario revisa un cuadro de

diálogo complejo, que contiene muchas eti-

quetas, cuadros de textos, botones varios,

etc., esta Interface puede convertirse en algo

engorroso. Cuando el layout es deficiente, en

consecuencia, el diseño visual también lo es.

El cuadro de diálogo de la izquierda presenta

las etiquetas sin alinear, al pasar la vista nota-

rá la dificultad de un “escaneo” o revisión rá-

pida de la pantalla. En casos como estos es

importante atender a:

Alineación

Debe proporcionarse una alineación a los

Controles de manera que se brinde al usuario

un margen firme, “un punto de ancla” o eje

que permita la lectura vertical en forma

organizada y rápida.

1. Cuando los controles (cuadro de

texto) tengan la misma longitud, se

recomienda alineación izquierda.

2. Si la mayoría de un grupo de etiquetas di-

fiere en longitud, se recomienda alineación

derecha, así como cuidar que el final del

control no esté ubicado demasiado lejos de

su respectiva etiqueta.

3. No es recomendable el uso de marcos con

bordes visibles para separar grupos de da-

tos. Se sugiere usar espaciado y encabeza-

dos en negrita en su lugar. Esto es más

efectivo porque garantiza el menor número

de líneas adicionales que distraerían al

usuario del contenido principal de la venta-

na. Su uso se reserva a lo estrictamente

necesario.

18

Cuadros de Diálogos



4. Se debe mantener la consistencia de los

componentes de la ventana en términos de

alineación y tamaño. Esto es particular-

mente importante cuando se requiere

agrupar muchos controles, para que la ha-

bilidad del usuario de escanear la informa-

ción rápidamente no sea sacrificada.

E n consecuencia, se recomienda

minimizar, tanto como sea posible, la

necesidad de que los ojos del usuario

tengan que dar saltos de un lado a otro

cuando revisa el layout de la ventana.

1. Deje un mínimo de 12- píxel ó 120 Twips

entre el borde de la ventana y el control

más cercano.

2. Deje 12- píxel ó 120 Twips horizontales en-

tre el control y su etiqueta (esta distancia

puede ser mayor entre controles de un

mismo grupo, dependiendo del tamaño de

la etiqueta).

3. Las etiquetas deben ser concisas y tener

sentido, aun leyendo la ventana fuera de

contexto.

4. Asigne teclas de acceso a todos los contro-

les editables.

5. Asegúrese de tener un orden adecuado de

TAB ORDER de manera que, si se accede

por teclado, el orden de los controles sea

el correspondiente.

19

Cuadros de Diálogos

Especificaciones de Layout



1. Proporcione un espacio adecuado entre

controles y grupo de controles, esto facili-

tará al usuario encontrar y organizar men-

talmente la información.

2. Como regla básica, se debe usar un espacia-

do mínimo de 12 píxels (o 120 Twips) hori-

zontales entre etiquetas y controles asocia-

dos. Para espaciado vertical entre grupos

de componentes, deben emplearse 18 pí-

xels (o 440 Twips) aproximadamente.

3. Diseñe listas de selección de grupos peque-

ños. Aplique botones de opción o de che-

queo para menos de 8 valores. En caso de

poseer mayor cantidad de valores, aplique

menú o listas deplegables.

4. Ubique los componentes de grupo a 12 pí-

xels (ó 120 Twips) de un rótulo para deno-

tar jerarquía.

5. Minimice los

puntos de

alineación

en su venta-

na. Un punto de alineación es una línea

imaginaria horizontal o vertical que atravie-

sa la ventana y que es reflejada por el bor-

de de uno o más controles dentro de la

misma.

6. Estructure los componentes de la Interfaz

de izquierda a derecha y de arriba hacia

abajo, en orden de importancia. El primer

elemento significativo debe ubicarse en la

esquina superior izquierda y el menos signi-

ficativo en la esquina inferior derecha.

7. Use espacios en blanco e identación para

delimitar grupos de información. De esta

manera resulta más claro y preferible a lí-

neas gráficas.

8. Sea consistente en cuanto a alineación, es-

paciado y tamaño de los componentes en

toda su aplicación.

9. No diseñe ventanas que sean 50% más lar-

gas en una di-

mensión

que en otra.

20

Espaciado



1. Sea consistente con el uso de etiquetas y su

semántica, es decir, si se usa una misma

etiqueta en varios formularios, ésta debe

tener siempre el mismo significado.

2. No use la misma etiqueta más de una vez

en un mismo formulario.

3. No emplee más de tres fuentes y

tamaños de letras en su aplica-

ción. Demasiadas fuentes y tama-

ños de letras harán que la interfaz

luzca no profesional y recargada,

además de dificultar su lectura.

4. No use gráficos en “fondo de

agua” detrás del texto, esto

interfiere en el contraste que debe

Existir entre el texto y su fondo, y

podría causar dificultades a los usuarios

con impedimentos visuales.

Existen dos estilos de uso de mayúsculas den-

tro de los elementos de Interfaz de Usuario

GNOME (Group GNOME, 2002):

1- Estilo Mayúsculas de Encabezado: Inicia en

mayúsculas todas las palabras de los ele-

mentos, con las excepciones de:

a) artículos: un, una, el, la, los, las

b) conjunciones: y, pero, mas, para, todavía.

2- Estilo Mayúsculas de Oración: Coloque en

mayúscula la primera letra de la palabra

inicial y cualquier otra palabra, normalmen-

te iniciada en mayúscula en oraciones, ta-

les como nombres.

21

Elementos del Formulario: Guías Generales

Uso de Mayúsculas

A l igual que los otros elementos de la in-

terfaz, y además de proporcionar el esti-

lo visual, las fuentes también se utilizan para

organizar la información y hasta para transmi-

tir un determinado énfasis a las expresiones

Fuentes del Texto de la Interfaz



R ecuerde siempre que las fuentes son,

en general, menos legibles en pantalla que en

un material impreso, por ello se recomienda:

1. Evitar las fuentes en cursiva y Serif porque

suelen ser más difíciles de leer, especial-

mente en bajas resoluciones.

2. Limitar el número de fuentes y estilos usa-

dos en las interfaces de sus aplicaciones,

pues un uso excesivo de fuentes diferentes

provocará un desorden visual de las venta-

nas.

3. Usar adecuadamente las negritas: aplíque-

las para estimular los procesos cognitivos

de Selección y Organización conveniente-

mente. Su aplicación excesiva reduce el én-

fasis en la información y dificulta la lectura.

4. Siempre que sea posible, usar la fuente es-

tándar del sistema para los elementos co-

munes de la interfaz, para unificar e inte-

grar su aplicación con las ventanas de las

demás herramientas del sistema.

5. Es conveniente, de ser factible, permitir el

ajuste del tamaño de las fuentes de la apli-

cación.

6. En general, la fuente predeterminada para

Windows 98 y Windows NT 4.0 es MS San

Serif de 8 puntos. Para Windows 2000 es

recomendable Tahoma de 8 puntos, ya que

ofrece mejoras en la legibilidad y soporte

de globalización (MicroSoft®, 2000).

22

Fuentes del Texto de la Interfaz

breves sin sacrificar la claridad y facilidad de

comprensión.

1. Enfatice lo que el usuario debe conocer sin

aditamentos ni información opcional.

2. Use palabras y frases sencillas.

Redacción de Textos en la Interfaz

E n la redacción de los mensajes y demás

elementos de la interfaz, es fundamental

tener presente la audiencia de la producción,

pues ella determina el Estilo de Escritura, el

cual está compuesto por los siguientes facto-

res:

Brevedad

Los estudios de facilidad de uso (Nielsen,

2002) reportan que es más probable que

los usuarios lean bloques de texto cortos

que bloques largos; por lo tanto se

sugiere eliminar las palabras

innecsarias y redactar textos



Utilice la gramática correcta y estándar, un

lenguaje claro y coherente en la interfaz mejo-

ra la facilidad de uso de la aplicación.

1. Escriba frases positivas: evite usar frases

negativas como problemas, mal, incorrec-

to, fallo, error, fatal, terminar y dificultad.

En su lugar indíquele al usuario cuál es el

problema, qué debe hacer y por qué.

2. Evite redundancias como: entorno circun-

dante, absolutamente completo, exacta-

mente idéntico, repetir de nuevo, etc.

3. Utilice una redacción coherente en situa-

ciones similares.

4. Utilice una redacción familiar en los menús,

etiquetas de los controles y barras de he-

rramientas.

5. Evite la jerga técnica, escriba de forma que

el usuario con menos conocimientos pueda

entender.

C uando se interactúa con una aplicación

software, el “contacto” ocurre, en primera

instancia, entre “la cara” de la aplicación -ese

límite entre los recursos del computador y el

usuario- y la persona que utiliza el software

para apoyar la realización de alguna de sus

tareas.

Si la ventana que comunica la aplicación con

el usuario –interfaz gráfica – no es intuitiva,

fácil de usar, de aprender y de recordar, allí

puede existir un factor que probablemente no

conjugó en etapas de análisis del diseño, para

lo cual se deben considerar:

* El usuario que debe realizar las tareas

* El diseñador de la interfaz gráfica

* La Usabilidad del software

En el desarrollo de proyectos de software, so-

bre todo en plataformas multimedia (Director,

Flash, Visual Basic, Java, etc.), los estudiantes

suelen realizar despliegues gráficos grandilo-

cuentes que, por lo general, van en detrimen-

to de lo que en principio debe ser el norte de

cualquier diseño de interfaz de usuario: la ca-

pacidad de comunicación. Por lo tanto, es im-

portante que en pregrado se provea

23

Lenguaje



E n los primeros entornos de escritorio,

el icono era una metáfora conveniente para

los típicos objetos de oficina, como el fichero

o el portapapeles. Hoy en día los iconos han

trascendido ese cometido y son meros logos,

imágenes de marca que rara vez comunican

una funcionalidad.

Pero la tendencia de diseño de interfaces por

la cual se trasladan formas del mundo físico a

las interfaces gráficas –conocida técnicamente

como esqueuomorfismo-, se mantiene todavía

en muchas aplicaciones móviles: la libreta pa-

ra tomar notas, el pasar páginas en un libro,

etcétera.

Imitar la realidad fue una idea atractiva, nece-

saria en los albores de la informática de usua-

rio, cuando la gente le tenía miedo a los orde-

nadores y a la tecnología en general, pero en

una era digital es innecesaria e ineficiente. El

sistema operativo del futuro prescindirá en

gran medida de iconos y metáforas visuales.

24

Futuro de las Interfaces Gráficas de Usuario...

El sistema del futuro se controlará con

una mezcla de pensamientos, órdenes vocales

y gestos, todos ellos procesados de manera

concurrente y armoniosa. La modali-

dad clásica –teclado y ratón- seguirá

siendo compatible con las demás,

pero solo para determinadas ta-

reas. El SO nos escuchará, seguirá

nuestra mirada y reaccionará en

consecuencia.

Una de las interfaces del futuro,

en resumen, será nuestro

cuerpo.Se controlará de muchas formas a la

vez (interfaz multimodal)

Se controlará de muchas formas a la vez (interfaz multimodal)


FUTURO

http://www.fastcodesign.com/1671960/why-the-human-body-will-be-the-next-computer-interface

http://www.fastcodesign.com/1671960/why-the-human-body-will-be-the-next-computer-interface

http://en.wikipedia.org/wiki/Multimodal_interaction

http://en.wikipedia.org/wiki/Multimodal_interaction

SOPA DE LETRAS

Halla las siguientes palabras: DISEÑO INTERFAZ USUARIO GRAFICA CONEXION SOFTWARE HARDWARE

H

U

M

O

R

25

D A R F E S V I P Ñ J Y R

E I U T U C C X W R X H B

D U S U A R I O R Y P A Y

G L J E D Ñ G W F D H R R

W C F Q Ñ T A F G H C D W

E S O T R O Z T R E E W V

Y A I N T E R F A Z D A N

F W G H E P O Z F I T R P

S D I H V X U Q I F B E U

X A N O N C I A C W J Y T

A C G P J F R O A W R J D

S O F T W A R E N O I A E


ENTRETENIMIENTO

toque personal al boletín. Si

la organización es pequeña,

quizá desee enumerar la

lista de nombres de todos

los empleados.

Si tiene precios de produc-

tos o servicios estándar,

puede incluir una lista en

este espacio. También pue-

de hacer referencia a cual-

quier otro modo de comuni-

cación que haya creado para

su organización.

También puede utilizar este

espacio para recordar a los

lectores que marquen un

evento periódico en el calen-

dario, como un desayuno de

negocios con los proveedo-

res el tercer martes de cada


175-225 palabras.

Si el boletín es para plegarlo

y enviarlo por correo, este

artículo aparecerá en la par-

te posterior. Por tanto, es

una buena idea que pueda

leerse de un vistazo.

Un modo de llamar la aten-

ción del público es incluir

una sección de preguntas y

respuestas. Recopile pregun-

tas que haya recibido desde

la última edición o resuma

algunas que se realicen con

frecuencia acerca de su or-

ganización.

Una lista de los directores

de la organización da un

mes o una subasta benéfica

bianual.

Si dispone de espacio, pue-

de insertar una imagen pre-

diseñada o algún otro gráfi-

co.

Título del artículo de la página posterior

Dirección del trabajo principal

Línea 2 de dirección



Teléfono: 555-555-5555

Fax: 555-555-5555

Correo: [email protected]

Éste es un lugar ideal para

insertar unas líneas acerca de

la organización. Puede incluir

el propósito de la misma, su

misión, la fecha de su funda-

ción y una breve historia.

También puede incluir una

lista de los tipos de produc-

tos, servicios o programas que

ofrece la organización, la zona

en la que trabaja (por ejemplo

sur de España o mercados

sudamericanos), así como un

perfil de los tipos de clientes o

miembros a los que atiende.

Resulta también muy útil espe-

cificar un nombre de contacto

para aquellos lectores que

deseen obtener más informa-

ción acerca de la organiza-

ción.

Nombre del trabajo

Lema o eslogan de la empresa

Organización

¡Estamos en la Web!

example.com

Pie de imagen o gráfi-

co.

INTERFAZ GRÁFICA Tecnología del Futuro

Universidad Pedagógica Experimental Libertador

Instituto Pedagógico de Caracas

Fase de Ensayo Didáctico

EVELYN GUERRERO

Interfaces Gráficas

Documents

Transcript of Interfaces Gráficas