INTERFACES GRFICAS DE USUARIO (GUIs)

Ing. Luis Zuloaga Rotta

Idea para una GUI

Con la idea de simplificar el uso de los ordenadores para usuarios de todo tipo y no slo para los expertos, se ha convertido en una prctica habitual el utilizar metforas visuales por medio de la llamada interfaz grfica de usuario (GUI en ingls) para que el usuario interacte y establezca un contacto ms fcil e intuitivo con el ordenador

Qu es una interfaz?
Una interfaz es un dispositivo que permite comunicar dos sistemas que no hablan el mismo lenguaje. Restringido a aspectos tcnicos, se emplea el trmino interfaz para definir el juego de conexiones y dispositivos que hacen posible la comunicacin entre dos sistemas.

Qu implica una interfaz?

Sin embargo, cuando aqu hablamos de interfaz nos referimos a la cara visible de los programas tal y como se presenta a los usuarios para que interacten con la mquina La interfaz grfica implica la presencia de un monitor de ordenador o pantalla constituida por una serie de mens e iconos que representan las opciones que el usuario puede tomar dentro del sistema.

GUI para una pgina Web

En el caso de una Web la interfaz hipertextual consistira en el diseo navegacional y el conjunto de herramientas y utilidades que permiten al usuario-lector interactuar con los contenidos. La interfaz proporcionar al usuario el conjunto de posibilidades que podr seguir durante todo el tiempo que se relacione con el programa, detallando lo que ver y escuchar en cada momento, y las acciones que puede realizar, as como las respuestas que puede ofrecer el sistema. El usuario, adems de entender el mensaje, ha de comprender la mecnica operativa que se le ofrece (sintaxis, rdenes, cdigos, abreviaturas, iconos, etc.). Una buena interfaz requiere poco esfuerzo por parte del usuario, simplicidad y funcionalidad.

Las caractersticas bsicas de una buena interfaz grfica de usuario

Facilidad de comprensin, aprendizaje y uso Representacin fija y permanente de un determinado contexto de accin (fondo) El objeto de inters ha de ser de fcil identificacin Diseo ergonmico mediante el establecimiento de mens, barras de acciones e iconos de fcil acceso Las interacciones se basarn en acciones fsicas sobre elementos de cdigo visual o auditivo (iconos, botones, imgenes, mensajes de texto o sonoros, barras de desplazamiento y navegacin...) y en selecciones de tipo men con sintaxis y rdenes Las operaciones sern rpidas, incrementales y reversibles, con efectos inmediatos Existencia de herramientas de Ayuda y Consulta Tratamiento del error bien cuidado y adecuado al nivel de usuario

Tipografa y color para una GUI

La tipografa y el tratamiento del color son dos elementos a los que hay que prestar especial importancia a la hora de establecer una buena interfaz, poniendo especial cuidado en el diseo de las formas y la coherencia interna entre ellas.

Iconos o smbolos de una GUI

El diseador de interfaces debe facilitar y simplificar el acceso y los recorridos de los usuarios. A menudo se usa la metfora del viaje o del camino a recorrer y se presentan iconos o smbolos de interfaz y otros dispositivos que tienen que ver con las seales utilizadas en mapas, urbanismo o arquitectura.

Diapositivas tomadas de la Dra. Mara Eugenia Valencia

PASOS PARA CONSTRUIR INTERFACES DE USUARIO

Paso 1 : Conocer al usuario (C) [Proceso de requerimientos C] Paso 2 : Entender la funcin de negocios en cuestin ( C) Paso 3 : Aplicar los principios del buen diseo de pantallas ( C , D)

Paso 4 : Seleccionar el tipo adecuado de ventanas (C , D)

Paso 5 : Desarrollar los menes del sistema (C , D) Paso 6 : Seleccionar los controles adecuados basados en los dispositivos (C ) Paso 7 : Elegir los controles adecuados basados en las pantallas(C) Paso 8 : Organizar y distribuir la pantalla ( C, D) Paso 9 : Elegir los controles adecuados ( D )

Paso 10: Crear conos significativos ( C , D )

Paso 11: Proporcionar mensajes, retroalimentacin y gua afectivos (D) (C: Cliente , D: Desarrollador)

CONOZCA A LOS USUARIOS experiencia

- Conocimientos de computacin - Experiencia en sistemas

Nivel de conocimiento y

alto/moderado/[bajoexplicar cada trmino] alta/moderada/[bajaproporcionar ejemplos y animaciones] alta/moderada/[bajaproporcionar ejemplos y animaciones]

- Experiencia con aplicaciones similares

- Educacin

grado/licenciatura/[educacin media usar trminos de preparatoria]

> 12 aos de escolaridad / 5-12[< 5 usar un lenguaje muy sencillo 135 ppm / 55 ppm / [10 ppm proporcionar cuadros de textos menores; dar ejemplos; resaltar el llenado de formas]

- Nivel de lectura

- Aptitudes de mecanografa

CONOZCA A LOS USUARIOS (Cont.)

Carctersticas fsicas del usuario -Edad -Gnero joven / media / madura masculino / femenino

-Destreza de mano
-Discapacidades

izquierda / derecha / ambidiestro

ciego / defecto de visin / sordo / sicomotora

Caractersticas de las tareas y trabajos del usuario -Tipo de uso de esta aplicacin -Frecuencia de uso discrecional/[obligatorio hacer una aplicacin de uso divertido] continuo / frecuente / ocasional / [una vez en la vida proporcionar todos los procedimientos y ayuda en cada pantalla] alta / moderada / [baja hacer algo divertido

-Importancia de la tarea

CONOZCA A LOS USUARIOS (Cont.)

Caractersticas de las tareas y trabajos del usuario
- Repetitividad de la tarea baja / moderada / [alta automatizar el mayor nmero de pasos posible; variedad en presentacin de datos; oportunidades para aprender] ninguna / autoaprendizaje con manuales / extensa [proporcionar oportunidades aprendizaje en lnea] ejecutivo /gerencial / profesional / secretarial/ de apoyo, etc. [uso de lenguaje, ejemplos y descripciones familiares para el personal tpico]

- Capacidad prevista

- Categora del trabajo

CONOZCA A LOS USUARIOS (Cont.)

Caractersticas sicolgicas del usuario

- Actitud probable hacia el trabajo

- Motivacin probable

positiva / neutra / negativa

alta / moderada / [baja hacer algo muy atractivo]

- Estilo cognitivo

verbal contra [espacial resaltar imgenes geomtricas

analtico contra [intuitivo resaltar smbolos ms que texto] concreta contra [abstracta explotar generalizaciones]

PRINCIPIOS DEL BUEN DISEO DE PANTALLAS

Asegurar la consistencia entre las pantallas de las aplicaciones designadas y entre las pantallas dentro de cada una - Convenciones, procedimientos, ver y sentir (look-and-feel), localizacin Preveer dnde es comn que el usuario empiece - Con frecuencia, esquina superior izquierda; colocar ah el primer elemento

Hacer la navegacin lo ms sencilla posible

- Alinear elementos parecidos - Agrupar elementos parecidos - Considerar bordes alrededor de elementos parecidos

Aplicar la jerarqua para hacer nfasis en el orden de importancia

Aplicar los principios de un visual atractivo - Balance, simetra, regularidad, que sea predecible - Sencillez, unidad, proporcin, economa

Proporcionar ttulos

APLICAR LOS PRINCIPIOS DEL BUEN DISEO DE PANTALLAS: antes

Tipo cheques ahorros mesa dinero inversin

Sucursal
Privilegios Primer nombre Segundo nombre

Of. Matriz
boletn

Suc.Sur
descuentos

Suc Norte
prstamo rpido

Apellido
Calle Ciudad Estado / municipio

Aceptar

Aplicar

Cancelar

Ayuda

APLICAR LOS PRINCIPIOS DEL BUEN DISEO DE PATALLAS DESPUS

Clientes nuevos Nombre Primero Segundo Apellido Direccin Calle Ciudad

Estado/municipio
Tipo de cuenta Cheques Ahorro Mesa dinero Inversin Privilegios

Sucursal

Matirz
Sur Norte

Boletn
Descuentos Prestamos rpidos

Aceptar

Aplicar

Cancelar

Ayuda

CMO SE APLICAN LOS PRINCIPIOS DEL BUEN DISEO DE PANTALLAS

Clientes nuevos
Nombre Primero Segundo Apellido Agrupar elementos similares

Prever inicio Direccin

Calle Ciudad

Asegura consistencia

Estadomunicipio Tipo de cuenta

Marco para elementos similares

Sucursal Usar ttulos

Privilegios

Matirz
Sur Norte Agrupar elementos similares

Matirz
Sur Norte Inversin Simetra Proporcin

Boletn
Descuentos Prestamos rpidos Balance

Aceptar

Aplicar

Cancelar

Ayuda

USO DE VENTANAS
1. Propsito: Desplegar propiedades de una entidad -- Ventana de propiedades

Caractersticas Caractersticas del del automvil automvil 189 189 Caracterstica Marca Modelo Identificacin Valor Valor Toyota Camry 893-8913-7813-789014

2. Propsito: Obtener informacin adicional para realizar una tarea o comando especfico
-- Ventana de dilogo

Caractersticas del Ayuda automvil 189 Palabra Valor

Esta pantalla

Todas las pantallas

USO DE VENTANAS (Cont.)

3. Propsito: Proporcionar informacin -- Ventana de mensajes

Mensajedel de automvil advertencia ABC Caractersticas 189 Advertencia. edad debe ser < 120
Aceptar

4. Propsito: Presentar un conjunto de controles -- Ventana de opciones

ABC 189 CaractersticasContoles del automvil Archivo Edicin Ver Formato Herr Ayuda Caracterstica Valor

monitor

disco

teclado

modem

5. Propsito: ampliar informacin

-- Ventana desplegable Esta es una ventana desplegable, diseada para amplificar

DESARROLLO DE MENES DEL SISTEMA

Proporcionar un men principal constante ( el nmero de opciones debe ser entre cinco y nueve )

Desplegar todas las alternativas relevantes (y solo stas)

Amoldar la estructura del men con la estructura de la

tareas de la aplicacin

Minimizar el nmero de niveles de men

TRMINOS DE GUI COMUNES

Icono

Ventanas en cascada Ventanas en mosaico Caja de texto

Clientes nuevos Nombre

Primero
Apellido Tipo de cuenta

Pantalla Adelante atras

Privilegios

Cheques Botn de seleccin Botn

Ahorro Mdd

Boletn
Descuentos

Cancelar

Aplicar

Cuadro de activacin

Interfaces de presentacin
Presentacin se refiere a cmo se muestra los datos en las pantallas y ventanas. Considere los datos con los que el usuario tiene que ver.

Pantalla Base
Una pantalla base es la pantalla o ventana a donde los usuarios vuelven una y otra vez mientras trabajan en una tarea concreta. La pantalla base podra ser una pantalla de datos, una lista o una forma con o sin datos. La pantalla base no es necesariamente la primera ventana que ven los usuarios cuando entran en la aplicacin o a una tarea en particular. Tener una pantalla base de operaciones ayuda a los usuarios a recordar qu hacer, les da un concreto y visual punto de anclaje, y les ayuda a aliviar la sensacin de estar perdido en la interfaz.

No use una pantalla en blanco com pantalla base.

No use como pantalla base una forma en blanco con un ttulo

Una lista puede ser una pantalla base

Una forma en blanco lista para ser llenada puede ser una pantalla base

Organizar la informacin dentro de una ventana

Decida si va a utilizar un flujo horizontal o vertical de la informacin para cada ventana o cuadro de dilogo. Cada ventana o cuadro de dilogo no tienen que tener el mismo flujo; decidir por separado para cada ventana o cuadro de dilogo. Sin embargo, no use una mezcla de los flujos horizontales y verticales en una ventana o cuadro de dilogo.

Flujo horizontal de windows

Flujo vertical de Windows 95

Grupos de datos similares

Agrupe datos similares entre s . Utilice marcos y espacios en blanco para mostrar los grupos existentes. Etiquete los grupos

Agrupamiento de datos similares

Fonts
Utilice una fuente sans serif para el texto y las etiquetas. Sans Serif es ms fcil de leer en pantalla. Times New Roman es un ejemplo de un tipo de letra serif . Tiene "pies" en las letras. Arial es un ejemplo de una fuente sans serif. No tiene "pies" en las letras.

Uso de font sans serif

No use un font serif

Evite usar muchos diferentes tipos de tamaos de font

No use fonts de colores

La forma ms fcil de leer es el tipo negro sobre un fondo blanco o gris. Si mezclamos fonts de colores en una sola pantalla, el texto de color ser ms difcil de leer que el texto negro. Si utiliza un font o fuente de color para un propsito especial, considere un font en negrita para que sea ms fcil de leer. Una fuente de color rojo se puede utilizar para identificar los campos obligatorios.

Utilice por lo menos un font de ocho puntos

Seleccin de colores y combinaciones

Usar colores para obtener la atencin. Utilice color con un propsito. Combinar colores sin utilizar demasiado destaque. Sea consciente de la ceguera al color de algunas personas. El uso del color en las barras de herramientas con moderacin. Siga significados culturales de color

Los colores y su significado en los EEUU

No viole estos significados y asegrese de seguir cualquier significado adicional que los usuarios tienen. Est al tanto de las asociaciones internacionales de colores, los que varan de cultura a cultura.

Diseando y seleccionando grficos

Una imagen vale ms que mil palabras? Slo si est bien diseada y es bien utilizada. En las GUIs hay que utilizar grficos e imgenes vinculantes y eficaces.

Use grficos con un propsito

Decida cmo un grfico se utiliza antes de disear o elegir el grfico en si mismo. Tres de los usos ms comunes son:
Icono de aplicacin. Generalmente aparecen en el escritorio. Al hacer clic en ellos se inicia la aplicacin. Imagen - Botn. Se trata de dibujos sencillos que se colocan en los botones, por lo general agrupados en una barra de herramientas. Al hacer clic en ellos se inicia una accin en la aplicacin, como la impresin. Grfico descriptivo. Estos grficos describen y apoyan la tarea del usuario, por ejemplo, una imagen de una casa en una aplicacin de una Inmobiliaria.

Grficos para uso internacional

Si est diseando GUIs para la audiencia internacional y plurilinge, considere el uso de grficos para eliminar la necesidad de traducir las palabras. Sin embargo, hay algunas pautas a tener en cuenta al seleccionar los grficos para el pblico internacional:
Asegrese de que los grficos son ampliamente entendido. Prueba con diferentes grupos. No use ningn gesto ofensivo. Por ejemplo, un dedo que seala es considerada ofensiva en algunas culturas. Usar representaciones que son de dominio universal. Por ejemplo, las escalas para abrir el equilibrio no son una representacin universal.

Decidir por un enfoque

Al disear un conjunto de grficos se puede utilizar uno de varios enfoques diferentes, que se describen en la tabla siguiente:

Botones de Comando
Los botones de comando son la principal forma que los usuarios tomar medidas dentro de los cuadros de dilogo. Utilice los botones de comando para transmitir a los usuarios de las principales acciones de un cuadro en particular. Los usuarios deben poder echar un vistazo a un cuadro de dilogo y saber qu hacer all y qu hacer a continuacin, con base en los nombres y ubicacin de los botones de comando.

Botones de Comando

Use botones de comando solo para acciones frecuentes y solo para acciones e inmediatas

Botones de Comando
Los botones de comando actan como recordatorio de qu acciones se pueden y se deben tomar.
Limite el nmero de botones de comando para un mximo de seis en una ventana. Acciones de botn-comandos tambin pueden aparecer como elementos de men. Si una accin no es frecuente y crtico, no lo coloque sobre un men desplegable