TEMA 4

1. Introduccin
Por muy buenos que hayan sido el anlisis, el diseo y la implantacin de cualquier aplicacin, de nada servir si los servicios que proporciona a los usuarios no se muestran de una forma clara, sencilla y amigable. El riesgo de construir sistemas informticos cada vez ms potentes es que sean tan complejos que abrumen a los usuarios. Estos juzgan las aplicaciones por la primera impresin que les producen, siendo un factor importante en esta sensacin, la manera de interactuar con el programa. Lo verdaderamente crucial de la interfaz de usuario no es su esttica sino su funcionalidad.

El objetivo de una interfaz de usuario es recoger los datos de entrada al sistema -interfaz de entrada- y poner a disposicin del usuario la informacin suministrada por el mismo -interfaz de salida

Interfaz de Entrada

Interfaz de Salida

SISTEMA INFORMATICO

2. Tipos de interfaces.
2.1. INTERFACES DE LNEA DE MANDATOS (CUI: COMMAND-LINE USER INTERFACES)
El usuario escribe la rdenes utilizando un lenguaje formal con un vocabulario propio del sistema. No se suele recibir mucha informacin por parte del sistema, siendo el modelo de la interfaz el del programador y no el del usuario. Como ventaja presenta su potencia, flexibilidad y facilidad de control; como inconveniente la carga de memoria a la que somete al usuario al obligarle a recordar decenas de comandos. Es recomendable slo para usuarios expertos.

2. INTERFACES DE MENS. Listas de opciones que se muestran al usuario en pantalla, permitiendo navegar por el sistema de men en men y seleccionar la acciones y opciones deseadas. El modelo de interfaz ya es del programador. Existen diferentes tipos de mens: Mens de pantalla completa, estructurados jerrquicamente por niveles. Mens de barra, situados en la parte superior de la pantalla (tipo EDIT del MS-DOS). Paletas o barras de herramientas. Mens grficos. Mens contextuales o pop-up. El contenido del men depende del contexto de trabajo del usuario.

Las interfaces de mens son adecuadas para usuarios noveles o espordicos, destacando por su facilidad de uso. Se debera prestar una atencin especial al espacio usado por el men en la pantalla, a la agrupacin lgica de los elementos en los mens, la consistencia entre todos, la adecuada navegabilidad

3. LA INTERFAZ GRFICA DE USUARIO (GUI). La caracterstica principal de una GUI es la presencia de mltiples ventanas (formularios) que permiten que diferentes informaciones se muestren simultneamente en la pantalla de usuario. Adems, las diferentes informaciones manipuladas por el usuario presentan representaciones iconogrficas y las tareas a realizar se seleccionan de un men en lugar de teclearse en un lenguaje de comandos. Desde el punto de vista funcional y tambin arquitectnico, una GUI se compone, fundamentalmente de tres elementos principales: Comunicacin. Bfferes de almacenamiento de la informacin temporal. Control de la interfaz.

Interfaz de usuario grfica (GUI)

Paneles, mens, iconos, ... (controles - widgets)

3. CRITERIOS DE DISEO
Cuando se disean las interfaces de entrada (formularios de entrada) al sistema se deben tener en cuenta los siguientes criterios: 3.1 . Pedir todos y solo los datos necesarios El formulario diseado para recoger la informacin de entrada al sistema debe pedir los datos necesarios para que el sistema realice la operacin deseada y no otros datos.

3.2 Los datos han de verificarse ante se comenzar su procesamiento. Los datos que recoge el formulario de entrada no deben contener errores; por tanto, habr que establecer los controles necesarios para verificar que dichos datos son correctos.

3. 3. Facilidad de uso y aprendizaje. Hay que intentar que el nmero de teclas que debe utilizar el usuario para realizar su entrada sea el mnimo posible, evitando entradas repetitivas. Los formularios han de ser bien estructurados y fciles de entender.

3. 4. Esttica cuidada La apariencia del formulario debe ser agradable, utilizando para ello colores, sonido, etc., pero sin llegar a recargarlo de forma que el trabajo acabe siendo pesado. Adems, suele ser conveniente mantener una cierta coherencia en cuanto a la presentacin, proporcionando un aspecto uniforme.

En el diseo de las interfaces de salida tambin deben tenerse en cuenta varios criterios: 1. Proporcionar slo la informacin pedida. Se debe presentar la informacin necesaria para entender la salida, no siendo conveniente presentar demasiados datos de forma que enmascaren la informacin que realmente ha solicitado el usuario. 2. Las salidas se deben estructurar de manera que sean fciles de leer.

En general, se tendrn en cuenta las siguientes recomendaciones: Consistencia y coherencia. El sistema debe pedir las entradas producir las salidas de forma consistente, es decir, hay que fijar el formato que vamos a utilizar para un determinado dato y procuraremos presentarlo siempre de la misma forma. Por ejemplo para las fechas dd-mm-aa, o dd de mm de aaaa, etc. Seguir un orden lgico. La informacin se debe pedir y presentar con una secuencia lgica de los datos. No sera excesivamente razonable que, al presentar los datos de un cliente, adoptemos el siguiente orden: Nombre, Calle, Telfono, Primer Apellido, Poblacin, etc.

Facilitar al usuario la identificacin de los errores propios con mensajes claros y tiles

Debemos intentar que los errores sean obvios para el usuario, es decir, si estamos trabajando con una pantalla en la que se introducen muchos datos, no sera muy normal que cuando se comete un error se produzca un pitido sin ms. Cada error debe tener su mensaje de identificacin de forma que el usuario comprenda rpidamente el fallo cometido.

El usuario es humano Comprender que el usuario se puede equivocar en mltiples ocasiones y permitirle la recuperacin de dichos errores de la manera ms sencilla posible. Es conveniente permitir la anulacin de parte o de toda la entrada que se est realizando e incluso el retorno a pantallas anteriores.
Crear asistentes y/o tutoriales Es conveniente introducir un mecanismo de ayuda que informe al usuario sobre la forma en la que tiene que realizar su trabajo. Esto se ha colgado? Si el proceso que se est realizando es largo, conviene desplegar un mensaje para que el usuario no piense que el sistema se ha detenido: barras de progreso, iconos con relojes,

4. MODELOS

Modelo del usuario: El usuario tiene su visin personal del sistema, y espera que ste se comporte de una cierta forma. Se puede conocer el modelo del usuario estudindolo, ya sea realizando tests de usabilidad,entrevistas o a travs de una realimentacin. Una interfaz debe facilitar el proceso de crear un modelo mental efectivo. Para ello son de gran utilidad las metforas, que asocian un dominio nuevo a uno ya conocido por el usuario. Un ejemplo tpico es la metfora del escritorio, comn a la mayora de las interfaces graficas actuales.

Modelo del diseador: El diseador mezcla las necesidades, ideas, deseos del usuario y los materiales de que dispone el programador para disear un producto de software. Es un intermediario entre ambos. El modelo del diseador describe los objetos que utiliza el usuario, su presentacin al mismo y las tcnicas de interaccin para su manipulacin. Consta de tres partes: presentacin, interaccin y relaciones entre los objetos

Modelo del programador: Es el ms fcil de visualizar, al poderse especificar formalmente. Est constituido por los objetos que manipula el programador, distintos de los que trata el usuario (ejemplo: BASE DE DATOS, FUNCIONES, PROCEDIMIENTOS, FORMULARIOS, etc). Estos elementos deben esconderse del usuario. Los conocimientos del programador incluyen la plataforma de desarrollo, el S.O, y otras especificaciones.

5. ESTANDARES Y GUIAS DE DISEO

Definicin de Estndar Estndar o norma: Es un conjunto de reglas sobre cmo deben ser diseados unas interfaces de usuario dadas unas tareas, usuarios y contextos. Los Estndares de Interfaces de Usuario se establecen generalmente en guas de estilo y estn disponible para los principales sistemas operativos. Los estndares ayudan a asegurar una consistencia a travs de las aplicaciones para usuarios, reduciendo as el tiempo de aprendizaje y previendo los errores de los usuarios.

Beneficios de los Estndares Incorporacin de investigaciones basadas en los factores humanos Caractersticas fsicas: ver, or, sentir Caractersticas cognitivas: Percepcin Procesado de informacin Aprendizaje Toma de Decisiones Caractersticas Afectivas Buenas prcticas de diseo Prcticas que han funcionado tanto para el desarrollador como para el usuario Mejoras del Proceso de Diseo Reduccin del proceso de diseo mediante prueba y error

Instituciones para el desarrollo de Estndares ISO (http://www.iso.org) ISO 9241. Requisitos Ergonmicos para el Trabajo de Oficina IEC International Electrotechnical Commision (http://www.iec.ch) ANSI (http://www.ansi.org) USA HFES (http://www.hfes.org) - USA HFES-200. Ergonoma de las Interfaces de Usuario BSI (http://www.bsi.org.uk) England UNI (http://www.unicei.it/uni) - Italia

Utilizacin de los Estndares 1. Elegir qu estndar/es vas a seguir/utilizar 2. Planificar un proceso de desarrollo adaptando los diferentes estndares elegidos 3. Aplicar las recomendaciones de los estndares. 4. Revisar el proceso de desarrollo para observar si cumple los estndares adaptados 5. Refinar la adaptacin de los estndares: Si no se cumplen las recomendaciones del estndar Si el refinamiento del estndar elegido no es suficiente para desarrolladores y diseadores Si no se ha creado una versin del estndar adaptada al proyecto en desarrollo

Uso del Sistema Objetivo: Mejorar la calidad del uso del sistema Cuantificacin: Satisfaccin / Rendimiento del Usuario rea de Estudio: Uso del Producto dentro del Contexto Especificaciones: ISO 20282: Usabilidad en los productos de la vida diaria Recomendaciones: ISO/IEC 9126-1: Ingeniera del Software: Calidad del Producto (Parte I Modelo de Calidad) ISO/IEC 9126-4: Ingeniera del Software: Calidad del Producto (Parte IV Calidad en el uso de Mtricas) ISO 9241-11: Gua de Usabilidad

Interfaz del Usuario e Interaccin Objetivo: Calidad del Producto Cuantificacin: Percepcin del producto rea de Estudio: Interfaz e Interaccin con el Producto Especificaciones: ISO/IEC 10741-1: Interaccin del Dilogo Control de Cursores para edicin de texto ISO/IEC 11581: Smbolos de Icono y Funciones ISO/IEC 18021: Tecnologa de la Informacin Interfaz de Usuario para herramientas mviles

 Recomendaciones: ISO/IEC TR 9126-2: Ingeniera del Software: Calidad del Producto (Parte II Mtricas Externas) ISO/IEC TR 9126-3: Ingeniera del Software: Calidad del Producto (Parte III Mtricas Internas) ISO 9241: Requisitos ergonmicos para trabajo con terminales grficas (Partes 10-17) ISO 14915: Ergonoma del Software para interfaces de usuario multimedia. IEC TR 61997: Guas para interfaces en equipos multimedia de propsito general

Utilizacin de los estndares ISO

Funcin del estndar: Establecer una consistencia de la Interfaz del Usuario. Iconos/Metforas, Control de Cursores, Entornos PDA, ... Los estndares de facto de la Industria generalmente se han impuesto sobre los estndares ISO.

Partes del ISO 9241 Part 1: General introduction Part 2: Guidance on task requirements Part 3: Visual display requirements Part 4: Keyboard requirements Part 5: Workstation layout and postural requirements Part 6: Guidance on the work environment Part 7: Requirements for display with reflections Part 8: Requirements for displayed colours Part 9: Requirements for nonkeyboard input devices Part 10: Dialogue principles Part 11: Guidance on usability Part 12: Presentation of information Part 13: User guidance Part 14: Menu dialogues Part 15: Command dialogues Part 16: Direct manipulation dialogues Part 17: Form filling dialogues

Ejemplos de Recomendaciones de diseo Factores Fsicos Se basan en cmo los atributos fsicos de los seres humanos. Factores Cognitivos Se basan en cmo los seres humanos procesan la informacin Factores Afectivos Se basan en la reaccin subjetiva de un sujeto frente a una interfaz. Incluye emociones, valores, preferencias o satisfaccin.

Ejemplos de factores fsicos Evitar el uso de texto rojo saturado sobre un fondo azul saturado La cromostereopsis hace que el texto sea difcil de leer para muchos usuarios debido a la longitud de onda de cada color

USO DEL COLOR EN EL DISEO DE PANTALLAS

El empleo del color es importante en el diseo de cualquier Interfaz de E/S, se deben emplear colores muy contrastantes entre el color de fondo y el de primer plano, las cinco combinaciones mas legibles de un texto en primer plano sobre un fondo son:

1.2.3.4.5.-

Negro sobre amarillo Verde sobre blanco Azul sobre blanco Blanco sobre azul Amarillo sobre negro

Ejemplos de factores fsicos Utilizar movimiento solo para obtener la atencin del usuario La visin perifrica es ms sensible al movimiento que la visin central. El ojo tiende a distraerse con el movimiento. Ejemplos de factores cognitivos En listas desplegables buscar un orden lgico de colocacin de las opciones Si no es posible un orden lgico, ordenarlas alfabticamente

Ejemplos de factores cognitivos

Proporcionar teclas rpidas para las opciones de men utilizadas habitualmente Esta opcin se denomina habitualmente mnemonic

Ejemplos de factores afectivos Diseos centrados en el usuario, donde ste tiene el control de la interaccin Evitar el uso de palabras como ilegal en los mensajes de aviso o error

Ejemplos de factores afectivos Proporcionar personalizacin de la esttica de la interfaz Controles de Apariencia en Macintosh Esquemas de Microsoft Paletas de Motif

Los menos legibles son :

- Rojo sobre verde - Azul sobre rojo - Negro sobre azul

ROJO SOBRE VERDE

AZUL SOBRE ROJO NEGRO SOBRE AZUL

Trate de utilizar colores brillantes para el primer plano, sobre colores menos luminosos para el fondo.

Una regla heurstica til es no mas de 4 colores para usuarios principiantes y solo hasta 7 para usuarios experimentados. El color no solo debe utilizarse en el contraste , tambin en el resaltado de campos importantes, sealar errores y permitir cdigos que tengan significado.

NARANJA AMARILLO NARANJA AZUL VERDE VIOLETA

VIOLETA, BLANCO NEGRO, GRIS AZUL, NEGRO BLANCO AMARILLO,BLANCO GRIS BLANCO ROJO

NARANJA, AZUL, VERDE BLANCO ROJO, VERDE ROJO, VERDE ROJO, NARANJA, AZUL BLANCO

BLANCO NEGRO GRIS

ROJO,NARANJA,AZUL VERDE, NEGRO, GRIS ROJO,AMARILLO,VERDE BLANCO,GRIS AZUL,BLANCO,NEGRO

AMARILLO VIOLETA

ROJO

La informacin sencilla reduce la carga de memoria

Informacin jerarquizada

Informacin dispuesta por temas

Sobrecarga informativa

Un fondo llamativo dificulta la lectura

Los iconos ayudan a identificar los contenidos

Uso del color para distribuir la informacin

Uso del color para resaltar y jerarquizar la informacin

El contraste de color anima y estimula

Contraste errneo, rojo-azul, exige gran esfuerzo de acomodacin visual