Interfaces Gráficas by noslen

Tecnología del Futuro Título del boletín

Volumen 1, nº 1

Fecha del boletín

Nombre del trabajo

Título del artículo principal

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.

Este artículo puede incluir 175-225 palabras.

direcciones de una organización.

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 servicios, además de otorgar credibilidad y afianzar la imagen de su organización tanto fuera como dentro de ella.

Publisher incluye numerosas publicaciones que se ajustan al estilo de su boletín.

A continuación, establezca el tiempo y el dinero que puede invertir. Estos factores le ayudarán a determinar la frecuencia con la que publicará el boletín y su extensión. Se recomienda publicar un boletín al En primer lugar, determine menos trimestralmente, el público al que va dirigicon el fin de que se consido el boletín; por ejemplo, dere una fuente constante empleados o personas de información. Sus clieninteresadas en un produc- Pie de tesimagen o empleados esperarán o gráfico. to o servicio. su publicación. Contenido:

Artículo interior

Cree una lista de direcciones 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 adquirir también una lista de

INTERFACES GRÁFICAS Título del artículo secundario

Este artículo puede incluir 75-125 palabras.

rá a desarrollar el artículo centrado en este punto.

El título es una parte importante del boletín y debe pensarlo con detenimiento.

Algunos ejemplos: Premio internacional para un producto, ¡Este nuevo producto le ahorrará tiempo! y Próxima apertura de una oficina cerca de usted.

Debe representar fielmente 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-

¿QUÉ ES INTERFAZ?

nterfaz es un término que procede

del vocablo inglés interface. En informática, esta noción sirve para señalar a la conexión que se da de manera física y a nivel de utilidad entre 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 comunicació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.

Interfaces Graficas Tecnología del Futuro

INTERFAZ

Es posible entender la interfaz como:

Espacio Espacio: Desde esta perspectiva la interfaz es el lugar de la interacción, el espacio donde se desarrollan los intercambios

Instrumento Instrumento: A modo de extensión del cuerpo humano, como el mouse que permite interactuar con una computadora.

Superficie Superficie:

objeto

que

aporta

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

Interfaces Graficas Tecnología del Futuro

INTERFAZ DE USUARIO

Interfaz de usuario

a interfaz de usuario es el medio con

Las interfaces básicas de usuario son aquellas

que el usuario puede comunicarse con

que

incluyen

elementos

como

menús,

una máquina, un equipo o una computadora,

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

y comprende todos los puntos de contacto

otros sonidos que la computadora hace, y en

entre el usuario y el equipo. Normalmente

general, todos aquellos canales por los cuales

suelen ser amigables e intuitivos.

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

brinde

tanto

comodidad, como eficiencia.

Funciones principales

us principales funciones son las

siguientes: 

Puesta en marcha y apagado.



Control de las funciones manipulables



Intercambio de datos entre aplicaciones.



Control de acceso.



Sistema de ayuda interactivo.

del equipo. 

Manipulación de archivos y directorios. 

Herramientas de desarrollo de aplicaciones. 

Comunicación con otros sistemas. 

Información de estado. 

Configuración de la propia interfaz y entorno.

Interfaces Graficas Tecnología del Futuro

INTERFAZ DE USUARIO

Tipos de interfaz de usuario entro de las Interfaces de Usuario se puede distinguir básicamente tres tipos:

Interfaz de hardware Una interfaz de hardware, a nivel de los dispositivos utilizados para ingresar, procesar y entregar los datos: teclado, ratón y pantalla visualizadora.

interfaz de software Una interfaz de software, destinada a entregar información

acerca

los

procesos

herramientas de control, a través de lo que el usuario observa habitualmente en la pantalla.

Interfaz de Software-Hardware 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.

Interfaces Graficas Tecnología del Futuro

INTERFAZ DE USUARIO

Otra Clasificación Según la forma de interactuar del usuario

tendiendo a como el usuario puede interactuar con una interfaz, nos

encontramos con varios tipos de interfaces de usuario:

Interfaces alfanuméricas Interfaces alfanuméricas (intérpretes de comandos) que solo presentan texto. Exigen que el usuario introduzca instrucciones breves mediante un teclado para dirigir las acciones de la computadora.

Interfaces gráficas de usuario Interfaces

gráficas

usua-

rio (GUI, graphic user interfaces), las que permiten comunicarse con el ordenador de una forma muy rápida e intuitiva representando gráficamente los elementos de control y medida.

Interfaces táctiles 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 Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 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:

1981 Xerox Star En este nuevo sistema podía apreciarse un paradigma basado en ventanas, iconos, menús y cursores (WIMP), antes probado en el ordenador experimental Xerox Alto y que apareció comercialmente en el ordenador Xerox Star

1984 Mac Lisa El Macintosh fue el primer ordenador comercial de éxito que disfrutó del uso de una GUI. Ya en 1984, usaron una metáfora de escritorio similar a la de Star. Las primeras versiones de Lisa no seguían exactamente el paradigma WIMP, pero futuras versiones se vieron aún más influenciadas por el prodigio de Xerox.

1985 Amiga Workbench El ordenador Amiga fue lanzado por Commodore 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-

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 1985 Windows 1.0 Windows 1.0 era una GUI para el sistema operativo MS-DOS, que había sido el sistema elegido por los ordenadores de IBM y compatibles desde 1981. Primer 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áficos a color

1986 Geos 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.

1989 NeXTSTEP Se diseño para la línea de ordenadores NeXT, pudiéndose destacar que usaba, ya entonces, PostScript para sus gráficos. Su característica más destacable era el Dock, un repositorio donde poner aplicaciones, portado al Mac OS posteriormente. Fue la primera GUI que hacía opacas las ventanas al arrastrarlas. Era considerablemente más sencillo de usar que cualquiera de sus predecesores.

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 1991 Mac OS System 7 Una nueva interfaz de usuario llena de color. Aunque esta característica se hizo como una mejora de la interfaz 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.

1995 Windows 95 Windows

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. Windows 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 directos fueron Windows 98 y Windows ME.

1998 KDE 1.0 El equipo desarrollador de esta GUI describe a KDE como “Un entorno de Escritorio contemporá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 sistemas es, personalizable como pocos, lo cual le ha hecho ganar bastante adeptos con conocimiento avanzado en sus siguientes versiones. 9

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 1999 GNOME 1.0 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 algunas de las configuraciones puede emplear opciones de los menús GNOME, el ratón

2001 Mac OS X Es un entorno operativo basado en Unix. El cambio más visible fue la inclusión de la interfaz Aqua. La misma hacía uso de bordes suaves, colores translucidos y rayas -similar al diseño del hardware de los primeros iMac- trajo más textura y color a la interfaz de usuario.

2001 Windows XP tiene una interfaz gráfica de usuario (GUI) perceptiblemente

reajustada

(denominada Luna), la cual incluye características rediseñadas, algunas de las cuales se asemejan ligeramente a otras GUI de otros sistemas operativos, cambio promovido para un uso más fácil que en las versiones anteriores.

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 2002 KDE 3 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.

2007 Windows Vista Windows Aero Es una nueva interfaz gráfica que permite la transparencia en las ventanas. Incluye «Flip 3D», una mini-aplicación que permite cambiar de ventana con presionar la tecla Windows y el tabulador. Además, permite tener una vista preliminar de las ventanas abiertas, con solo pasar el ratón sobre los botones en la barra de tareas. Viene incluido en las ediciones a partir de Home Premium.

2007 Mac OS X Leopard Este OS de sexta generación, mejoró muchísimo la interfaz de usuario. Básicamente sigue siendo Aqua pero con barras para scroll y el clásico gris platino renovado, ahora con mas azul. La GUI tiene ahora un toque mas 3D, con un dock con iconos interactivos y animados.

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 2009 KDE v4.2 La versión 4 de este desktop trajo muchas mejoras, como manejo de ventanas suave pero animado, y siguiendo la tendencia de Microsoft incluyeron Widgets (con relojes 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 puede correr bajo plataformas Windows y Mac OS X.

2009 Windows 7 se enfocaron en demostrar capacidades 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, conjunto de sonidos, inclusoprotector de pantalla

2011 Mac OS X 10.7 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.

Interfaces Graficas Tecnología del Futuro

INTERFAZ GRÁFICA

Historia de la interfaz gráfica 2012 Windows 8 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.

2013 Mac OS X 10.9 Mavericks, Es una nueva versión que integra las aplicaciones de iOS como Recordatorios, 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 anunciadas de OS X Mavericks está la opción de usar una HDTV como segundo monitor por medio de Apple TV y el aumento de la duración de la batería para los usuarios

MacBook

Air de 11" y 13", con mayor

ahorro

energía para iMac

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.

l modelo de aprendizaje de Selección,

Este modelo puede emplearse en ambientes

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

educativos para la confección de contenidos

activación de los elementos cognitivos que

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

forman parte del proceso de aprendizaje de la

cualquier otro material que se diseñe con fina-

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

lidad instruccional. Su aplicación es adecuada

decir, en la audiencia del material multimedia,

en modelos constructivistas de aprendizaje,

sea publicitario, instruccional, etc., (Reigeluth,

donde se propone la elaboración del conoci-

1999).

miento y la estimulación de la memoria activa.

Pautas de Diseño de Interfaces Gráficas Principios de Composición de Elementos en el Diseño de la Ventana 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

pantallas no tengan un despliegue gráfico

presentada, mostrándosele claramente

grandilocuente, su aplicación tendrá un exce-

cómo puede y debe interactuar con la

lente aspecto para los usuarios.

misma. Si esto se hace, aunque las

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:

Estructura de la información y las tareas

Estructura y Consistencia entre ventanas. La estructura de la organización de los ele-

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.

mentos en todas las ventanas de una aplicació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).

Punto Focal en la ventana.

Relación entre elementos.

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 elementos o controles de la interfaz, con técnicas que estimulen el proceso cognitivo de selección de la información pertinente, tales como uso de espaciado, aislamiento u otros métodos. La ubicación de los elementos en la interfaz gráfica está afectada por la cultura, por las pautas de diseño y, en ocasiones, por las técnicas de diseño instruccional que se apliquen. Por lo general, en la cultura occidental, donde

Trata de la proximidad espacial que debe existir entre elementos de la interfaz que presenten nexo informativo-comunicativo; por ejemplo, una lista que permita seleccionar valores que son cargables a un cuadro de texto. En este caso, ambos controles deben estar espacialmente cercanos.

Legibilidad y Flujo entre los elementos. Consiste en proporcionar facilidad en la lectura 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.

se lee de izquierda a derecha y de arriba hacia

Integración.

abajo, las personas buscan la información im-

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

portante en la parte superior izquierda de la

visual de la aplicación y las aplicaciones del

pantalla. Luego, en este orden, se tiende a

sistema u otras aplicaciones del entorno gráfi-

ubicar los elementos en la interfaz según su

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

importancia y relación.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Color

l color debe ser considerado como una

cibidos, en caso de que el usuario tenga siste-

herramienta adicional en el diseño y no como

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

una necesidad básica. No hay que depender

mento visual leve, la aplicación debe conti-

de colores para mostrar la información impor-

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

tante; si los colores no son correctamente per-

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 complementarios suelen ser los más apropiados en el diseño de interfaces para aplicaciones de corte

nalidad del diseño instruccional del compo-

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

nente de software.

caso de que la audiencia de los componentes

3. Uso de Paletas

instruccionales sea infantil, debe diseñarse la

El uso de paletas de combinación de colores

interfaz, como corresponde siempre, en fun-

aplicables en los formularios brinda una apa-

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

riencia de unificación, consistencia y formali-

mientos, conductas previas, etc. En este caso

dad, lo que minimiza la posibilidad de crear

particular, se recomiendan los colores prima-

distractores visuales

rios cálidos, sin tender a “carnavalizar” la interfaz, a menos que así lo requiera la intencio-

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Matiz, Resplandor y Contraste...

os usuarios con desórdenes visuales

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

(ceguera o baja visión nocturnas) requie-

nifiesta en la incapacidad de distinguir ciertos

ren alternativas para la asignación de colores

matices tanto del color rojo como del verde

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

(deuteranopia o protanopia) o azul y amarillo

terfaz de usuario se anticipa a estas necesida-

(tritanopia). En consecuencia, es necesario

des y proporciona opciones para personalizar

permitir al usuario personalizar los colores en

las preferencias del color. Sin embargo, es me-

cualquier parte de la aplicación que presente

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

información importante. Esto significa que la

cuidadosa selección de color y contraste por

aplicación debe comunicar la información

defecto.

efectivamente en cualquier configuración o

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

personalización de color que el usuario selec-

tiene algún desorden de ceguera nocturna

cione.

Disposición de la Ventana (Formulario)

a localización de los componentes en la

ción adecuada de los componentes y el espa-

ventana determina la

ciado recomendado por

relación entre estos, de

el Proyecto de Usabili-

allí la importancia de la

dad de GNOME (Group

posición que se le asig-

GNOME, 2002). La

ne.

llama

mayoría de los compo-

“Layout” en diseño de

nentes analizados serán

Interfaces.

etiquetas, íconos, boto-

Un layout limpio es cru-

nes de opción, de che-

cial para crear un flujo

queo, campos de texto

Esto

visual de información sin problemas para el usuario. En esta sección se describen la ubica-

y botones de comando.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Cuadros de Diálogos

uando un usuario revisa un cuadro de

etc., esta Interface puede convertirse en algo

diálogo complejo, que contiene muchas eti-

engorroso. Cuando el layout es deficiente, en

quetas, cuadros de textos, botones varios,

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

El cuadro de diálogo de la izquierda presenta

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

las etiquetas sin alinear, al pasar la vista nota-

fiere en longitud, se recomienda alineación

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

derecha, así como cuidar que el final del

pida de la pantalla. En casos como estos es

control no esté ubicado demasiado lejos de

importante atender a:

su respectiva etiqueta.

Alineación

3. No es recomendable el uso de marcos con bordes visibles para separar grupos de da-

Debe proporcionarse una alineación a los

tos. Se sugiere usar espaciado y encabeza-

Controles de manera que se brinde al usuario

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

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

efectivo porque garantiza el menor número

que permita la lectura vertical en forma

de líneas adicionales que distraerían al

organizada y rápida.

usuario del contenido principal de la venta-

1. Cuando los controles (cuadro de

na. Su uso se reserva a lo estrictamente

texto) tengan la misma longitud, se

necesario.

recomienda alineación izquierda.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Cuadros de Diálogos 4. Se debe mantener la consistencia de los componentes de la ventana en términos de

n consecuencia, se recomienda

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

minimizar, tanto como sea posible, la

mente importante cuando se requiere

necesidad de que los ojos del usuario

agrupar muchos controles, para que la ha-

tengan que dar saltos de un lado a otro

bilidad del usuario de escanear la informa-

cuando revisa el layout de la ventana.

ción rápidamente no sea sacrificada.

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

3. Las etiquetas deben ser concisas y tener

entre el borde de la ventana y el control

sentido, aun leyendo la ventana fuera de

más cercano.

contexto.

2. Deje 12- píxel ó 120 Twips horizontales entre el control y su etiqueta (esta distancia

4. Asigne teclas de acceso a todos los controles editables.

puede ser mayor entre controles de un

5. Asegúrese de tener un orden adecuado de

mismo grupo, dependiendo del tamaño de

TAB ORDER de manera que, si se accede

la etiqueta).

por teclado, el orden de los controles sea el correspondiente.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Espaciado 1. Proporcione un espacio adecuado entre

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

controles y grupo de controles, esto facili-

imaginaria horizontal o vertical que atravie-

tará al usuario encontrar y organizar men-

sa la ventana y que es reflejada por el bor-

talmente la información.

de de uno o más controles dentro de la

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

misma.

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

6. Estructure los componentes de la Interfaz

zontales entre etiquetas y controles asocia-

de izquierda a derecha y de arriba hacia

dos. Para espaciado vertical entre grupos

abajo, en orden de importancia. El primer

de componentes, deben emplearse 18 pí-

elemento significativo debe ubicarse en la

xels (o 440 Twips) aproximadamente.

esquina superior izquierda y el menos signi-

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

ficativo en la esquina inferior derecha.

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

7. Use espacios en blanco e identación para

queo para menos de 8 valores. En caso de

delimitar grupos de información. De esta

poseer mayor cantidad de valores, aplique

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

menú o listas deplegables.

neas gráficas.

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

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

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

paciado y tamaño de los componentes en

tar jerarquía.

toda su aplicación.

5. Minimice los puntos

9. No diseñe ventanas que sean 50% más largas en una di-

alineación

mensión

en su venta-

que en otra.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Elementos del Formulario: Guías Generales 1. Sea consistente con el uso de etiquetas y su

4. No use gráficos en “fondo de

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

agua”

etiqueta en varios formularios, ésta debe

interfiere en el contraste que debe

tener siempre el mismo significado.

Existir entre el texto y su fondo, y

2. No use la misma etiqueta más de una vez en un mismo formulario.

detrás

del

texto,

esto

podría causar dificultades a los usuarios con impedimentos visuales.

3. No emplee más de tres fuentes y tamaños de letras en su aplicación. Demasiadas fuentes y tamaños de letras harán que la interfaz luzca no profesional y recargada, además de dificultar su lectura.

Uso de Mayúsculas Existen dos estilos de uso de mayúsculas den-

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

tro de los elementos de Interfaz de Usuario

mayúscula la primera letra de la palabra

GNOME (Group GNOME, 2002):

inicial y cualquier otra palabra, normalmen-

1- Estilo Mayúsculas de Encabezado: Inicia en

te iniciada en mayúscula en oraciones, ta-

mayúsculas todas las palabras de los elementos, con las excepciones de: a) artículos: un, una, el, la, los, las b) conjunciones: y, pero, mas, para, todavía.

Fuentes del Texto de la Interfaz

l igual que los otros elementos de la interfaz, y además de proporcionar el esti-

lo visual, las fuentes también se utilizan para organizar la información y hasta para transmitir un determinado énfasis a las expresiones

les como nombres.

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Fuentes del Texto de la Interfaz

ecuerde siempre que las fuentes son,

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

en general, menos legibles en pantalla que en

tándar del sistema para los elementos co-

un material impreso, por ello se recomienda:

munes de la interfaz, para unificar e inte-

1. Evitar las fuentes en cursiva y Serif porque

grar su aplicación con las ventanas de las

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

demás herramientas del sistema. 5. Es conveniente, de ser factible, permitir el

mente en bajas resoluciones. 2. Limitar el número de fuentes y estilos usa-

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

dos en las interfaces de sus aplicaciones,

cación.

pues un uso excesivo de fuentes diferentes

6. En general, la fuente predeterminada para

provocará un desorden visual de las venta-

Windows 98 y Windows NT 4.0 es MS San

nas.

Serif de 8 puntos. Para Windows 2000 es

3. Usar adecuadamente las negritas: aplíque-

recomendable Tahoma de 8 puntos, ya que

las para estimular los procesos cognitivos

ofrece mejoras en la legibilidad y soporte

de Selección y Organización conveniente-

de globalización (MicroSoft®, 2000).

mente. Su aplicación excesiva reduce el énfasis en la información y dificulta la lectura.

Redacción de Textos en la Interfaz

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

breves sin sacrificar la claridad y facilidad de

elementos de la interfaz, es fundamental

comprensión.

tener presente la audiencia de la producción,

1. Enfatice lo que el usuario debe conocer sin aditamentos ni información opcional.

pues ella determina el Estilo de Escritura, el cual está compuesto por los siguientes facto-

2. Use palabras y frases sencillas.

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 22

Interfaces Graficas Tecnología del Futuro

PAUTAS PARA EL DISEÑO Lenguaje Utilice la gramática correcta y estándar, un lenguaje claro y coherente en la interfaz mejo-

3. Utilice una redacción coherente en situaciones similares. 4. Utilice una redacción familiar en los menús,

ra la facilidad de uso de la aplicación. 1. Escriba frases positivas: evite usar frases negativas como problemas, mal, incorrec-

etiquetas de los controles y barras de herramientas.

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

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

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

el usuario con menos conocimientos pueda

problema, qué debe hacer y por qué.

entender.

2. Evite redundancias como: entorno circundante, absolutamente completo, exactamente idéntico, repetir de nuevo, etc.

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, souando se interactúa con una aplicación

bre todo en plataformas multimedia (Director,

software, el “contacto” ocurre, en primera

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

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

suelen realizar despliegues gráficos grandilo-

límite entre los recursos del computador y el

cuentes que, por lo general, van en detrimen-

usuario- y la persona que utiliza el software

to de lo que en principio debe ser el norte de

para apoyar la realización de alguna de sus

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

tareas.

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

Si la ventana que comunica la aplicación con

portante que en pregrado se provea

Interfaces Graficas Tecnología del Futuro

FUTURO

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

n los primeros entornos de escritorio,

en muchas aplicaciones móviles: la libreta pa-

el icono era una metáfora conveniente para

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

los típicos objetos de oficina, como el fichero

etcétera.

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

Imitar la realidad fue una idea atractiva, nece-

trascendido ese cometido y son meros logos,

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

imágenes de marca que rara vez comunican

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

una funcionalidad.

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

Pero la tendencia de diseño de interfaces por

una era digital es innecesaria e ineficiente. El

la cual se trasladan formas del mundo físico a

sistema operativo del futuro prescindirá en

las interfaces gráficas –conocida técnicamente

gran medida de iconos y metáforas visuales.

como esqueuomorfismo-, se mantiene todavía

Se controlará de muchas formas a la vez (interfaz multimodal) El sistema del futuro se controlará con

cuerpo.Se controlará de muchas formas a la

una mezcla de pensamientos, órdenes vocales

vez (interfaz multimodal)

y gestos, todos ellos procesados de manera concurrente y armoniosa. La modalidad clásica –teclado y ratón- seguirá siendo compatible con las demás, pero solo para determinadas tareas. El SO nos escuchará, seguirá nuestra mirada y reaccionará en consecuencia. Una de las interfaces del futuro, en resumen, será nuestro

Interfaces Graficas Tecnología del Futuro

ENTRETENIMIENTO SOPA DE LETRAS D

W R X H B

Y P A

G W

D H R R

G H

E W V

D A

W G H

T R P

B E

C W J

A W R

Y R Y

D W N U

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

H U M O R

Nombre del trabajo

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: alguien@example.com

Lema o eslogan de la empresa

Organización

¡Estamos en la Web! example.com

É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 fundación y una breve historia. También puede incluir una lista de los tipos de productos, 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 especificar un nombre de contacto para aquellos lectores que deseen obtener más información acerca de la organización.

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

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 parte posterior. Por tanto, es una buena idea que pueda leerse de un vistazo.

Pie de imagen o gráfico.

Un modo de llamar la atención del público es incluir una sección de preguntas y respuestas. Recopile preguntas que haya recibido desde la última edición o resuma algunas que se realicen con frecuencia acerca de su organización. Una lista de los directores de la organización da un

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 productos o servicios estándar, puede incluir una lista en este espacio. También puede hacer referencia a cualquier otro modo de comunicación que haya creado para su organización.

mes o una subasta benéfica bianual. Si dispone de espacio, puede insertar una imagen prediseñada o algún otro gráfico.

También puede utilizar este espacio para recordar a los lectores que marquen un evento periódico en el calendario, como un desayuno de negocios con los proveedores el tercer martes de cada

INTERFAZ GRÁFICA Tecnología del Futuro Universidad Pedagógica Experimental Libertador Instituto Pedagógico de Caracas Fase de Ensayo Didáctico EVELYN GUERRERO