interfaces gráficas
DESCRIPTION
tecnología del FuturoTRANSCRIPT
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
Este artículo puede incluir
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
Artículo interior 2
Artículo interior 2
Artículo interior 3
Artículo interior 4
Artículo interior 5
Artículo interior 6
Fecha del boletín Volumen 1, nº 1
Puntos de interés
especial:
Destaque brevemente un punto de interés.
Destaque brevemente un punto de interés.
Destaque brevemente un punto de interés.
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
Interfaces Graficas Tecnología del Futuro
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
Interfaces Graficas Tecnología del Futuro
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
Interfaces Graficas Tecnología del Futuro
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
Interfaces Graficas Tecnología del Futuro
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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
Interfaces Graficas Tecnología del Futuro
INTERFAZ GRÁFICA
Historia de la 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
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
Interfaces Graficas Tecnología del Futuro
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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)
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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
Interfaces Graficas Tecnología del Futuro
PAUTAS PARA EL DISEÑO
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)
Interfaces Graficas Tecnología del Futuro
FUTURO
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
Interfaces Graficas Tecnología del Futuro
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
Este artículo puede incluir
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
Línea 3 de dirección
Línea 4 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