Apunte Diseño Entrada Salida

Universidad Tecnolgica Nacional
Facultad Regional Resistencia
Diseo de Sistemas
Jefe de Ctedra Profesor: A.U.S. Gustavo Marcelo Torossi Apunte Confeccionado por: Profesora: Ing. Alejandra Balbastro Profesora: A.U.S. Laura Sierra
Diseo de Entradas y Salidas
Universidad Tecnolgica Nacional F.R.R.

Tabla de contenidos Unidad 1: Diseo Efectivo de Salidas .................................................................... 5 1.1 Objetivos en el diseo de salidas..................................................................... 5 1.2 Relacin del contenido de la salida con el mtodo de salida............................ 6 1.3 La eleccin de la tecnologa de salida ............................................................. 6 1.4 Consideraciones al elegir la tecnologa de salida............................................. 7 1.5 Reconocer la manera en que el sesgo de la salida afecta al usuario.................. 9 1.6 Diseo de la salida impresa............................................................................. 9 Estructura jerrquica de una salida impresa .................................................... 13 Introduccin ....................................................................................................... 15 Unidad 2: Diseo De Salidas por Pantalla........................................................... 16 2.1 Lineamientos para el diseo de pantallas ...................................................... 16 2.2 Objetivos del dise o de entradas ................................................................... 18 2.3 Buen diseo de los formularios de entrada de datos ...................................... 18 2.4 El buen diseo de pantallas........................................................................... 21 Unidad 3: Interface Grfica de Usuario.............................................................. 26 Beneficios de una Gua de Diseo para una GUI ............................................ 26 Convenciones ................................................................................................. 26 Unidad 4: Diseo Centrado en el usuario............................................................ 27 4.1. Filosofa de Diseo centrado en el usuario ................................................... 27 4.2. Pasos del dise o centrado en el usuario........................................................ 27 Atencin en el usuario desde el principio y en forma continua........................ 27 Diseo integrado ............................................................................................ 28 Prueba de usuario desde el principio y en forma continua ............................... 28 Diseo iterativo .............................................................................................. 28 4.3 Arquitectura de interface de usuario.............................................................. 28 4.4 Heursticas Generales de diseo.................................................................... 29 Simplificar la tarea y la interface lo mximo posible:...................................... 29 Consistencia conceptual: ................................................................................ 30 Disear para prevenir errores:......................................................................... 30 Proveer buena realimentacin:........................................................................ 31 Soportar diferentes estilos de interaccin: ....................................................... 32 Evitar el uso de modos: .................................................................................. 32 4.5. Fundamentos de la interaccin basada en objetos......................................... 32 Objeto: ........................................................................................................... 33 Acciones y Operaciones ................................................................................. 33 Modelo de objeto - accin ............................................................................ 35 Tcnicas bsicas y expertas ............................................................................ 35 4.6. Estilos de interaccin................................................................................... 37 4.7. La metfora de escritorio ............................................................................. 37 Unidad 5: Gua de Referencia Standard ............................................................. 39 5.1. Interface ...................................................................................................... 39 Tipos de Interfaces ......................................................................................... 39 5.2 Objetos de Interface...................................................................................... 39 Ventanas ........................................................................................................ 40 Cajas de Dilogos........................................................................................... 45
Prof. Ing.Balbastro / A.U.S.Sierra
Pgina 2 de 106
Menes........................................................................................................... 52 Otros controles Standard................................................................................. 56 5.3. Navegacin y Seleccin............................................................................... 60 Navegacin con cursor ................................................................................... 60 Foco ............................................................................................................... 61 Seleccin........................................................................................................ 61 5.4. Organizacin de la Interface ........................................................................ 62 Consistencia entre los elementos de interface ................................................. 62 Mantener simple la interface........................................................................... 62 Uso de Espacio en blanco ............................................................................... 63 Ubicacin y Agrupamiento de los elementos de interface ............................... 63 Indicios o pistas.............................................................................................. 63 Uso del color .................................................................................................. 64 Eligiendo las letras ......................................................................................... 65 Uso del sonido................................................................................................ 66 Uso de Imgenes e Iconos .............................................................................. 66 Unidad 6: Gua para obtener la entrada del usuario.......................................... 67 6.1. Seleccin a partir de un conjunto ................................................................. 67 6.1.1. Una de Muchas Opciones ................................................................. 67 6.1.2. N de Muchas Opciones...................................................................... 75 6.2. Comandos ................................................................................................... 78 Etiquetas de comandos ................................................................................... 79 Navegacin y seleccin .................................................................................. 79 Botones .......................................................................................................... 80 Menes........................................................................................................... 81 Iconos............................................................................................................. 82 6.3. Obtencin de campos de entrada.................................................................. 83 Elementos de campos de entrada .................................................................... 83 Organizacin de los elementos desplegados.................................................... 86 Navegacin .................................................................................................... 88 Chequeo de Edicin........................................................................................ 88 Formularios de datos ...................................................................................... 89 6.4. Organizacin de una Interface de Entrada .................................................... 89 Buenas prcticas de Diseo de la Interface de Entrada .................................... 90 Navegacin .................................................................................................... 92 Unidad 7: Gua para proveer Salida al Usuario ................................................. 94 7.1. Buenas Practicas de Diseo de la Interface de Salida ................................... 94 Consideraciones sobre la Interface de Salida................................................... 94 Evitar Desorden visual.................................................................................... 94 Agrupacin de datos ....................................................................................... 94 Abreviaciones................................................................................................. 95 Iluminacin y Codificado ............................................................................... 95 Etiquetas ........................................................................................................ 97 Letras y Tamao de Letras.............................................................................. 97 Bsqueda en textos y listas ............................................................................. 98 7.2.Despliegue de informacin ........................................................................... 98 Tablas............................................................................................................. 98 Texto............................................................................................................ 100 Flowcharts.................................................................................................... 101 7.3. Gua de Usuario......................................................................................... 101
Prof. Ing.Balbastro / A.U.S.Sierra Pgina 3 de 106
General......................................................................................................... 102 Manejo de errores de usuario ........................................................................ 102 Mensajes ...................................................................................................... 103 Ayuda en lnea.............................................................................................. 104 Realimentacin, Sugerencias e Indicaciones ................................................. 106
Pgina 4 de 106
DISEO DE ENTRADAS Y SALIDAS

Unidad 1: Diseo Efectivo de Salidas
1.1 Objetivos en el diseo de salidas
La salida es la informacin que reciben los usuarios del sistema de informacin. Las salidas pueden tomar distintas formas: los reportes impresos tradicionales y salidas en formatos, tales como pantallas en monitor, microformas y salidas de audio. Los usuarios confan en las salidas para la realizacin de sus tareas; y con frecuencia, juzgan el mrito del sistema exclusivamente por sus salidas. Con el fin de crear una salida de utilidad, el analista de sistemas trabaja estrechamente con el usuario, mediante un proceso interactivo, hasta que el resultado llega a ser satisfactorio. Los objetivos que persigue el analista de sistemas al disear una salida son seis: Disear una salida para satisfacer el objetivo planteado Toda salida debe contar con un propsito explcito. No es suficiente que se presente a los usuarios un reporte o una pantalla, solo porque tecnolgicamente es posible hacerlo. Durante la fase del anlisis de determinacin de los requerimientos de informacin, el analista de sistemas identifica los propsitos a satisfacer; y con base en tales propsitos se disea la salida. Disear una salida que se adapte al usuario Es difcil personalizar la salida con un gran sistema de informacin que atiende a numerosos usuarios con diferentes propsitos. Con base en entrevistas, observaciones, consideraciones de costo y, tal vez, prototipos, ser posible disear salidas que se ajusten a la mayora, si no a todas las necesidades de los usuarios y sus preferencias. Proveer la cantidad adecuada de informacin Parte de la tarea del diseo de la salida es decidir que cantidad de informacin es correcta para los usuarios, pronto se dar cuenta que es una tarea muy difcil, ya que los requerimientos de informacin cambian de manera continua. Por ejemplo mas que acomodar en una sola pantalla las ventas de todo el ao, se podra proporcionar en doce pantallas, la venta de cada uno de los meses, y de manera suplementaria, un resumen en una pantalla separada. Asegurar que la salida est disponible donde se necesita Quin debe recibir la salida? El incremento de las salidas en lnea (on-line), desplegadas en pantalla y que son accesibles de manera individual, han resuelto parte del problema de la distribucin, pero una distribucin apropiada todava es un importante objetivo para el analista de sistemas. Para ser til y aprovechada, la salida debe presentarse al usuario adecuado. No importa qu tan bien se diseen los reportes, si stos no los ven los tomadores de decisiones pertinentes; carecern de valor. Proporcionar oportunamente la salida En qu momento debe generarse la salida? Una queja comn de los usuarios es que no reciben de manera oportuna la informacin para la toma de decisiones, uno de los objetivos que debe perseguir el
Pgina 5 de 106
analista es la puntualidad en la distribucin de la salida. Muchos informes se requieren por da, por mes, por ao y habr otros por excepcin. Una presentacin a tiempo puede llegar a ser decisiva para la operacin de la empresa. Elegir el mtodo correcto de salida La salida puede tomar diferentes formas, incluyendo los reportes impresos en papel, la informacin presente en pantalla, sonidos de audio y digitalizados que simulan la voz humana y las microformas. La eleccin del mtodo correcto para cada tipo de usuario es otro de los objetivos en el diseo de la salida. El analista debe evaluar las ventajas involucradas al elegir un mtodo de salida. Los costos difieren, as como la flexibilidad, vida media, distribucin, almacenamiento y posibilidades de acceso y transporte, y, finalmente, el impacto global hacia el usuario. La eleccin del mtodo de salida no es trivial, ni es una conclusin predeterminada.
1.2 Relacin del contenido de la salida con el mtodo de salida

Es posible concebir la salida como cualquier cosa que sale de la organizacin, a la cual se le llamara salida externa o que permanece dentro de la organizacin, la cual sera una salida interna. La salida externa nos es familiar por su uso para los recibos de servicios, publicidad, cheques, informes anuales y miles de otras comunicaciones que las organizaciones tienen con sus clientes, vendedores, proveedores, industria y competidores. Algunas de estas salidas, tales como los recibos de servicios, se disean por el analista de sistemas para cumplir con dos funciones, como lo hara un documento que requiere ir a varias partes y regresar. En otras palabras, la salida de una de las etapas de un proceso se vuelve la entrada de otro, cuando el cliente regresa aquella parte del documento. Las salidas externas difieren de las salidas internas no slo por l mecanismo de distribucin, sino adems, por su diseo y apariencia. Muchos documentos externos, si se desea que se utilicen correctamente, deben incluir instrucciones para el receptor. Adems, muchas salidas externas se imprimen en formas que contienen el emblema de la compaa y los colores corporativos. Dentro de las salidas internas tenemos varios informes para la toma de decisiones. Estos se distribuyen a todo lo largo de la organizacin, desde un breve resumen, hasta un informe altamente detallado. Un ejemplo de un resumen es el reporte que consolida las ventas totales del mes. Un reporte detallado pudiera ser el de las ventas semanales por vendedor. Otros tipos de informes internos incluyen los informes histricos que se manejan como reportes por excepcin y que se emiten slo en el momento de la excepcin (una desviacin de lo esperado). Por ejemplo una lista de todos los empleados sin faltas en el ao.
1.3 La eleccin de la tecnologa de salida

Para producir diferentes tipos de salidas, se requiere el uso de diferentes tecnologas. Para salidas impresas de computadora, las opciones con que contamos son las impresoras de impacto y no impacto. Para las salidas por pantalla, tenemos como opciones monitores independientes o integrados o pantallas de cristal lquido. Las salidas de audio pueden amplificarse a travs de parlantes o escucharse a travs de una pequea bocina de la microcomputadora. Las microformas son salidas creadas por equipos de cmaras especiales y filmadas en microfichas y microfilms.
Pgina 6 de 106
En cierta manera, la salida de audio podra considerarse como exactamente lo opuesto a la salida impresa; esta es temporal, mientras que la palabra es permanente. En general es para beneficio de un solo usuario, mientras que la salida impresa comnmente cuenta con una amplia distribucin. La salida de audio por ejemplo sirve para atender pedidos de nmeros de catlogo con llamadas libres de cobro, (0800), las 24 horas del da. Al utilizar un telfono digital, los clientes marcan el nmero y en respuesta a las instrucciones que reciben por el audio, los clientes seleccionan el artculo numerado, la cantidad, el precio y refieren el nmero de su tarjeta de crdito. Esto implica para los almacenes la captura de ventas que de otra forma se perderan, ya sea porque la contratacin de empleados pudiera ser muy cara para justificar una atencin por 24 horas.
1.4 Consideraciones al elegir la tecnologa de salida

Existen varios elementos a considerar en su eleccin. Aunque la tecnologa cambia con rapidez, hay principios tiles que permanecen prcticamente constantes en relacin a los avances tecnolgicos. Estos elementos son: Quin usar la salida? Por ejemplo cuando los gerentes de distrito se encuentran alejados de sus oficinas por grandes perodos, necesitan de salidas impresas que puedan llevar consigo, conforme visiten a los gerentes de su regin. De manera alternativa, las salidas por pantallas son excelentes para funciones tales como el despacho de transporte, donde el despachador se encuentra cerca de su escritorio la mayor parte del tiempo. Tambin, aplican diferentes estndares, dependiendo si el receptor de la salida es interno o externo a la organizacin. Los receptores de salidas externas (clientes, proveedores) requerirn de salidas diferentes que los usuarios internos de la empresa. Con frecuencia, los clientes carecen de acceso a las salidas electrnicas, ya que simplemente no cuentan con el equipo requerido. En este caso, usted debe proporcionar una salida impresa. El conocer quin ser el usuario de la salida, nos permite determinar el requisito de calidad de la salida. Podemos considerar adecuado para usuarios internos numerosos, los impresos estndares en papel de computadora, una salida en letra de calidad se requerir para una correspondencia comercial, con un pblico externo. Cuntas personas necesitan la salida? La eleccin de la tecnologa de salida tambin queda influenciada por el nmero de usuarios que la usarn. Si numerosas personas requieren de la salida, probablemente se justificaran las copias impresas. Si slo un usuario requiere de la salida, una salida por pantalla, en microformas, o an, una salida de audio puede ser lo mas apropiado. Si numerosos usuarios de la empresa necesitan salidas diferentes a tiempos diferentes, por perodos cortos y la requieren con rapidez, entonces una alternativa ser el uso de terminales conectadas en lnea y con acceso directo a la base de datos. En dnde se necesita la salida? Otro factor que influye en la eleccin de la tecnologa de salida es el destino fsico de ella. Aquella informacin que permanecer cercana a su punto de origen, que ser utilizada por muy pocos usuarios dentro de la empresa y que pudiera almacenarse y consultarse con frecuencia, con seguridad puede ser impresa. Una abundante
Pgina 7 de 106
informacin que deba transmitirse a los usuarios a grandes distancias en operaciones satlites, puede mejor distribuirse de manera electrnica y el receptor decidir si lo imprime, lo presenta en pantalla o lo almacena. Cul es el propsito de la salida? Otro factor a considerar para elegir la tecnologa es la funcin de la salida. Si la salida tiene el propsito de atraer accionistas a la organizacin, y que stos tengan a su disposicin las finanzas corporativas, entonces, lo ms adecuado sera presentar un reporte anual con excelente diseo. Si el propsito de la salida es actualizar cada 15 minutos los coeficientes del mercado de valores y el material se encuentra altamente codificado y es variable, entonces, lo mas adecuado sera hacer uso de las pantallas de vdeo o aun del audio. Con qu frecuencia se requiere la salida? Entre ms frecuente se accesa una salida, ms importante ser el disponer con terminales conectadas en lnea al sistema. En las salidas de acceso poco frecuente, que requieran unos cuantos usuarios, las microformas son apropiadas, como microfichas o microfilm. Aquellas salidas que se consultan con frecuencia son candidatas adecuadas para incorporarse a sistemas en lnea, con presentaciones en pantallas. La adopcin de este tipo de tecnologa permite que el usuario tenga un fcil acceso y disminuye a la vez el riesgo del desgaste fsico que deteriora la frecuente manipulacin de las salidas impresas. Bajo qu regulaciones particulares se produce la salida? Ciertas salidas estn sujetas a la regulacin del gobierno que impone el uso de determinadas tecnologas. Por ejemplo las declaraciones juradas de la DGI, deben presentarse en forma impresa y acompa adas de un diskette. Cules son los costos iniciales y posteriores del mantenimiento y los suministros? Los costos iniciales de adquirir o rentar un equipo deben considerarse como otro elemento que entra en la eleccin de la tecnologa de salida. La mayora de los vendedores le ayudarn a estimar los costos iniciales de compra o alquiler de una computadora, incluyendo el costo de impresoras y terminales de vdeo. Sin embargo, muchos vendedores no proporcionarn informacin acerca del costo para mantener operando una impresora (papel, cintas, reparaciones y mantenimiento). De tal forma que es responsabilidad del analista, investigar el costo de operacin de las diferentes tecnologas de salida. Cules son los requisitos ambientales para las tecnologas de salida? Como se habr observado anteriormente, las impresoras requieren de un ambiente seco y fresco para operar adecuadamente. Los monitores requieren de espacio y cableado para conectarse a la base de datos que se accesa. La salida de audio requiere de un sitio relativamente silencioso, que permita que el usuario comprenda los sonidos digitalizados. Adems el volumen de la salida de audio debe ser lo suficientemente alto como para escucharse, no debera ser audible para los otros empleados (o clientes) que no lo utilizan. En el otro extremo ciertas tecnologas son apreciadas por su discrecin. Las bibliotecas que enfatizan el silencio en el rea de trabajo, hacen extensivo el uso de
Pgina 8 de 106
monitores de vdeo. Estos son mucho ms silenciosos que la operacin de impresoras y, ms an que el uso de cardex consultados fsicamente por el usuario.
1.5 Reconocer la manera en que el sesgo de la salida afecta al usuario

De tres maneras se puede crear un error no intencionado en la presentacin de las salidas: La manera de ordenar la informaci n Se introduce sesgo en la salida cuando el analista elige la manera de ordenar la informacin de un reporte. Formas comunes de ordenamiento incluyen el cronolgico, el alfabtico y el de costos. La manera de establecer los lmites de aceptacin Una segunda fuente importante de error en la salida es la definicin preliminar de lmites para valores particulares que sern reportados. El analista de sistemas podra sin intencin, establecer un lmite demasiado bajo o demasiado alto, rangos estrechos de las salidas por excepcin o rangos amplios para estas salidas. La eleccin de grficas El tamao de la grfica debe ser proporcional, de tal forma que el usuario no confunda la importancia de las variables presentadas. La eleccin del color de la grfica es de suma importancia, de tal forma que no se distorsionen sus conclusiones. El tipo elegido de grfica para la salida tambin es una fuente de sesgo potencial. Una grfica de torta es inadecuada si los porcentajes del conjunto no es lo ms relevante. Las grficas de barras y de columnas pueden exagerar las diferencias entre las variables. Los analistas de sistemas cuentan con ciertas estrategias especficas para evitar el sesgo en la salida que diseen: 1- Reconocer la fuente del sesgo 2- Diseo interactivo de la salida que considere a los usuarios 3- Trabajar con los usuarios, de tal forma que conozcan del sesgo de la salida 4- Creacin de una salida flexible que permita al usuario modificar los lmites, los rangos y el ordenamiento. 5- Proponer a los usuarios diferentes salidas para conducir pruebas realistas sobre la salida del sistema. Prototipos. En sntesis el analista de sistemas debe solicitar la retroalimentacin activa del usuario, respecto a la salida. El proceso de diseo requerir de varias interacciones, antes de que el usuario sienta que es de utilidad la salida. Otro aspecto importante es disear una salida en la que los usuarios sean capaces de modificar los l mites y los rangos establecidos para el usuario.
1.6 Diseo de la salida impresa

Al hacer uso de la informacin obtenida durante la fase de determinacin de los requisitos de informacin y una vez decidido el uso de la salida impresa, el analista de sistemas se encuentra en condiciones de iniciar el diseo fsico de la salida. La fuente de informacin bsica es el diccionario de datos. Convenciones en el diseo de reportes
Pgina 9 de 106
Informacin constante: Es la informacin que permanece sin cambios cada vez que se imprime el reporte. Para indicar la informacin constante, el analista la anota en la forma con un carcter por espacio. El ttulo del reporte y los encabezados de todas las columnas se consideran como informacin constante. a) Informacin variable: Es la informacin que vara cada vez que el reporte se imprime. b) Informacin variable: Es la informacin que vara cada vez que el reporte se imprime. Para determinar el ancho del reporte, determine para cada uno de los campos el mximo de: 1) los requerimientos de longitud del campo de los datos elementales, conforme stos aparezcan en el diccionario de datos y 2) el rengln ms largo que propone como encabezado de columna. Luego 3) agregue los espacios que pretendan dar una separacin en ambos lados. Finalmente, sume estos estimados del campo para obtener el ancho estimado. Calidad del papel, tipo y tamao La salida puede imprimirse en innumerables tipos de papel, la restriccin preponderante por lo general es el costo. El tipo de papel que tiene un tratamiento especial, ya sea preimpreso, entintado a color, con varias copias o con formas que no requieren papel carbn, ser ms costoso que el simple papel de computadora. La calidad del papel tambin difiere por el contenido de algodn. Mientras ms algodn contenga, tendr una mejor calidad, durabilidad y mayor precio. Pero un negocio quizs querr que su correspondencia particular se imprima en papel bond que contenga algodn, mediante el uso de una impresora de calidad, todo ello con el fin de dar una imagen de mayor distincin. Salidas en formas especiales Las formas preimpresas tienen numerosos propsitos; entre ellos tenemos el envo a los clientes de documentos de ida y vuelta. A travs de uso de colores y de diseos corporativos las formas preimpresas pueden llevar el logotipo de la corporacin. El uso de formas innovadoras, colores y distribuciones motivan de manera dramtica la atencin del usuario hacia el reporte particular. Consideraciones de diseo a) Atributos funcionales: Los atributos funcionales de un reporte impreso incluyen el encabezado o ttulo del reporte, el nmero de la pgina, la fecha de preparacin, los rtulos de las columnas, el agrupamiento de los datos relacionados y el uso de elementos de pausa. Cada uno de ellos cumple con un propsito especfico para el usuario. El encabezado o ttulo del reporte dirige al usuario de manera inmediata al tema de su lectura. El ttulo debe ser descriptivo y conciso. Es redundante incluir la palabra reporte en el ttulo. Cada pgina debe numerarse de tal forma que el usuario cuente fcilmente con un punto de referencia cuando discuta la salida con otros o vuelva a localizar datos importantes. Tambin si las pginas de las salidas se encuentran separadas, su paginacin es invaluable para reconstruir el documento. En cada impresin incluya la fecha de la preparacin del reporte. Los encabezados de las columnas sirven para orientar al usuario sobre el contenido del reporte. Cada elemento debe contar con un encabezado. Los encabezados deben ser breves y descriptivos.
Utilice cortes de control (los cuales son separaciones entre los datos cuando aparece una sumarizacin) para auxiliar la lectura. Separe con lneas adicionales el resto de los datos. Por ejemplo, si 200 tiendas de venta de indumentaria deportiva se agruparan por zona geogrfica, el reporte puede contar con cortes al final de cada una de las zonas. b) Atributos estilsticos/estticos: Los reportes impresos estn organizados de tal forma como los apreciaran nuestros ojos. Dentro de este contexto, esto significa que el reporte debe leerse de arriba hacia abajo y de izquierda a derecha. Los datos relacionados deben agruparse, como se mencion con anterioridad. El uso de cortes de control tambin cubre una funcin importante; pero su ubicacin en la pgina tambin le confiere una caracterstica esttica. D atencin a los cortes de control, a las sumarizaciones y a otra informacin relevante, encerrndolos en cuadros mediante el uso de caracteres especiales, tales como asteriscos o espacios adicionales. Esto permite agilizar la bsqueda de informacin decisiva y evita la larga impresin de columnas continuas de informacin. Las salidas de reportes impresos requieren de amplios mrgenes a la derecha y a la izquierda, as como en los bordes superior e inferior. Esto permite atraer la atencin del usuario al material que se centra en la pgina facilitando la lectura. No debe subestimarse la relevancia de la distribucin, la legibilidad y la facilidad de uso, ya que la salida se crea para ser utilizada. Pasos para la preparacin de la hoja de distribucin de la salida A continuacin se presenta una gua, paso a paso, para la preparacin de la hoja de distribucin de la salida: 1) Determine las necesidades del reporte. 2) Identifique a los usuarios. 3) Determine la informacin que se va a incluir. 4) Cuente el nmero de espacios necesarios y decida la dimensin global del reporte. 5) Titule el reporte 6) Numere las pginas del reporte 7) Incluya la fecha de preparacin del reporte 8) Rotule cada columna de datos de manera adecuada 9) Defina la lnea de detalles para los datos variables, indicando si cada espacio se utilizar para un carcter alfabtico, especial o num rico. 10) Indique la posicin de las sumarizaciones (cortes de control). 11) Revise el boceto (o prototipo) de los reportes con los usuarios y programadores para evaluar su factibilidad, utilidad, legibilidad, compresin y apariencia esttica.
Ejemplo de Reporte Impreso
Pgina 11 de 106
DETALLE DE VENTAS MENSUALES

P gina:
AO:
P
1er Semestre
Fecha de Impresin: /
MAYO JUNIO TOTAL
RPODUCTO ENERO FEBRERO MARZO ABRIL
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
TOTAL
En este ejemplo se puede observar: a) Informacin constante, como los atributos funcionales, ttulo: Detalle de Ventas Mensuales y los rtulos de las columnas: Producto, enero, febrero, marzo, abril, mayo, junio y total. b) Informacin variable: Representada grficamente a travs de cubetas, entre ellos se encuentran algunos atributos funcionales tales como: el nmero de la pgina, en el ngulo superior derecho y la fecha de preparacin del reporte. El resto de la informacin variable corresponde a los totales de venta mensuales. Al finalizar el reporte, respetando el corte de control, se encuentra el total general de cada columna. Como se podr observar toda la informacin variable en el reporte se encuentra representada a travs de cubetas que en el momento de producirse la salida impresa sern reemplazadas por datos. La informacin constante se expresa tal como ser vista en el reporte impreso. Los puntos suspensivos, permiten indicar la repeticin de las cubetas, en este caso un rengln por cada producto que se procese. De hecho este reporte impreso es la respuesta a un requerimiento de la fase de anlisis del sistema, es decir que existir un DFD, que genere esta salida y cuyos datos se encuentran detallados en el diccionario general de datos.
Pgina 12 de 106
Estructura jerrquica de una salida impresa La estructura jerrquica de una salida, nos permite analizar la composicin de la misma y las ocurrencias de los datos dentro de la salida. Tiene como objetivo indicar el nmero de veces que aparece un subconjunto de datos en el conjunto al que pertenece. Es posible colocar los signos de exclusin, inclusin o exclusin exclusiva, cuando los subconjuntos pertenecientes al mismo nivel aparezcan 0 o 1 vez en el conjunto al que pertenecen. A continuacin se muestra el diseo de una salida impresa, que tiene por objeto enviar resmenes de cuenta a los clientes de la organizacin:
RESUMEN DE CUENTA
Nombre: Direccin: MOVIMIENTO FECHA Cliente Nro.: Fecha Actualizacin: Antiguo Saldo: DEBE HABER
.
NUEVO SALDO:
.
TOTALES
Pgina 13 de 106
He aqu el cuadro descriptivo de la estructura jerrquica:

Nombre (1 vez) Nro. Cliente (1 vez) Fecha Actualizacin (1 vez)
Lnea Nombre (1 vez) Cabecera (1 vez)
Lnea Direcci n (1 vez)
Direccin (1 vez) Antiguo Saldo (1 vez) Descripcin Mov (1 vez)
R E S U M E N D E C C U E N T A S
Impreso Cliente (C veces) Cuerpo (1 vez) Lnea Movimiento (1 vez)
Fecha (1 vez) Debe (0 o 1 vez) Haber (0 o 1 vez) Nuevo Saldo (1 vez) Total Debe (1 vez) Total Haber (1 vez)
Fin (1 vez)
Lnea Totales y Saldo (1 vez)
En el ejemplo precedente, hay que distinguir: Lnea NOMBRE Lnea DIRECCION Lnea MOVIMIENTO Lnea TOTALES y SALDO Hay que hacer notar, a propsito de la lnea movimiento, las variantes: DEBE y HABER, que no implican la definicin de dos tipos de lneas movimientos, pero obligan a que se precise la presencia en una lnea movimiento de una rbrica DEBE exclusiva de una rbrica HABER.
Pgina 14 de 106
Diseo de Interface de Usuario

Introduccin
Los cambios fundamentales de las generaciones de computadoras casi siempre se refieren a la tecnologa de hardware. En forma paralela a los desarrollos de hardware, pueden establecerse los cambios desde el punto de vista de la interface de usuario.
Modo de Generaci Tecnologa Hardware Operacin n 0 1945 Prehistoria Lenguaje de Tecnologa Programacin Terminal Lectura de parpadeo de luces y tarjetas perforadas Tipo de Usuario Imagen de Paradigma de comunicaci Interface de n Usuario Ninguna (acceso directo al hardware con las Ninguna manos era la nica cosa que importaba) Computador a como Programacin calculadora
Mecnica, electromecnica
Para clculos.
Moviendo cables
Los propios inventores
Tubos de vaco, Grandes maquinas, 1 mucha refrigeracin, 1945-1955 corto tiempo Pionero significativo entre fallas. Transistores; Maquinas ms 2 confiables; las 1955-1965 Computadoras Histrico empiezan a verse fuera del laboratorio Circuitos Integrados. Los negocios pueden 3 justificar el costo de 1965-1980 comprar Tradicional computadoras para muchas necesidades.
Un usuario por vez tiene a su disposicin una maquina (pero por un tiempo limitado)
TTY, maquina de escribir. Solo Lenguaje de Expertos, usada en el Maquina pioneros 001100111101 centro de cmputos Terminales orientados a Lnea
Batch
Assembler
Computador Tecncratas, as como Lenguajes de profesionales procesador Comandos en de computadoras informacin Menes estrictamente jerrquicos de pantalla completa y formularios de entrada
Tiempo compartido Lenguajes de (sistemas de alto nivel, procesamiento Fortran, Pascal de transacciones en lnea)
VLSI. Los individuos 4 pueden comprar sus Usuario de 1980-1995 propias computadoras Moderno computadoras personales personales Integracin a escala mnima, la computadora en un chip. Los Individuos pueden comprar muchas computadoras.
Lenguajes orientados a Problemas; Planillas de Clculo
Grupos Terminales de especializados pantalla sin completa, solo de conocimiento caracteres de alfanumricos. computadoras Acceso Remoto. (ej. cajeros bancarios) Pantallas Grficas con justa resolucin. Profesionales Estaciones de de Negocios, trabajo como aficionados escritorios y buena portabilidad.
Mecanizaci n de las tareas de oficinas
Productivida d personal (computador a como herramienta)
WIMP (Windows, Iconos, Menes y dispositivo de sealizacin)
5 1996-? Futuro
"Dynabook, Sistemas con No imperativo, multimedia I/O, usuarios de red y Todo el posiblemente de fcil mundo sistemas grfico portabilidad, con embebidos moden celular.
Computador as como Interfaces sin entretenimie comandos nto
La mayora de las interfaces de usuario actuales son en gran medida similares y pertenecen a uno de dos tipos comunes: Las tradicionales terminales alfanumricas de pantalla completa con techado y teclas de funciones o las modernas estaciones de trabajo WIMP.
Pgina 15 de 106
A pesar que las interfaces de caracteres todava son apropiadas para determinadas aplicaciones, hoy en da la mayora de los programadores usan las interfaces modernas WIMP.
Unidad 2: Diseo De Salidas por Pantalla

Observe que las salidas por pantalla, difieren de diversas maneras de las salidas impresas. Estas son efmeras, es decir, una imagen en monitor no es permanente, de la misma manera como lo sera una impresin; pueden estar dirigidas en forma ms especfica hacia el usuario: tienen un formato con mayor flexibilidad, no son portables; y en ocasiones, las salidas por pantalla permiten modificaciones mediante una interaccin directa. Adems, los usuarios deben saber qu teclas presionar si desean consultar pantallas adicionales, cmo concluir la presentacin y si es posible, cmo interactuar con lo desplegado en la pantalla. El acceso a las presentaciones por pantalla puede controlarse a travs del uso de un cdigo confidencial (password), mientras que la distribucin de las salidas impresas se controla de manera distinta.
2.1 Lineamientos para el diseo de pantallas

Existen cuatro lineamientos que facilitan el diseo de las pantallas. Para resumir, estos son: 1) Mantenga una pantalla sencilla. 2) Mantenga una presentacin consistente en la pantalla. 3) Facilite el movimiento del usuario entre pantallas. 4) Cree una pantalla atractiva. Las dimensiones tpicas de una pantalla son de 80 columnas por 24 renglones. Las diferencias en el diseo de pantallas radican en la necesidad de indicar los cambios de la pantalla, los movimientos entre pantallas y la conclusin de la presentacin de la salida. Cuando la pantalla se encuentra en la fase de diseo preliminar, antes de que hayan sido asignados los espacios en la forma, es muy conveniente mostrar a los usuarios un boceto de la pantalla y recibir su retroalimentacin acerca de las modificaciones o mejoras que desearan. Este es un proceso interactivo que contina hasta que el usuario se encuentra satisfecho por lo que le proporciona la salida y la claridad del formato. As como en la salida impresa, las pantallas de calidad no pueden crearse de manera aislada. Los analistas de sistemas necesitan retroalimentacin de los usuarios para disear pantallas de gran vala. Una vez aprobada por los usuarios, el diseo de la pantalla puede plasmarse en la hoja de diseo de pantallas. La presentacin orienta al usuario a travs del encabezado. En la parte inferior de la pantalla se tienen instrucciones. El usuario cuenta con varias alternativas, que incluyen: continuar con la pantalla actual, concluir la presentacin, obtener ayuda o contar con ms detalle. Las pantallas de salida dentro de una aplicacin deben presentar de manera consistente la informacin de pantalla a pantalla. A continuacin se puede observar una pantalla con un diseo pobre, dado que repite la informacin con redundancia:
Pgina 16 de 106
REGISTROS DE VOTACION OFICINA DE RESISTENCIA-CHACO DIST. NMERO CALLE NOMBRE PARTIDO

69 69 69 69 69 69 69 69 69 69 11413 11413 11414 11414 11414 11415 11418 11301 11301 11305 Jujuy Jujuy Jujuy Jujuy Jujuy Jujuy Jujuy Mendoza Mendoza Mendoza Prez Prez Gonzlez Ruiz Diaz Ruiz Diaz Gomez Villalva Ramirez Ramirez Ramirez
APELLIDO
Laura Jos Pedro Alejandra Ignacio Roberto Juana Leonor Norma Gladys A B A A C B A B C A
PRESIONE PGDN PARA CONTINUAR F1 = Ayuda F2= Men Principal F4=Cambio de nombre F5=Agregar un votante
F3= Cambio de Partido F6=Cambio del Ultimo voto
El siguiente es el diseo de la pantalla mejorado, dado que elimina la informacin redundante: REGISTROS DE VOTACION OFICINA DE RESISTENCIA-CHACO DISTRITO NMERO 69 CALLE NOMBRE
Jujuy 11413 11414
NMERO PARTIDO
Prez Gonzlez Ruiz Diaz Gomez Villalva 11301 11305 Ramirez Ramirez Norma Gladys Laura Jos Pedro Alejandra Ignacio Roberto Juana Leonor C A A B A A C B A
APELLIDO
11415 11418 Mendoza
PRESIONE PGDN PARA CONTINUAR F1 = Ayuda F2= Men Principal F4=Cambio de nombre F5=Agregar un votante
F3= Cambio de Partido F6=Cambio del Ultimo voto
Pgina 17 de 106
2.2 Objetivos del diseo de entradas

Un buen diseo de los formatos y las pantallas de entrada debe satisfacer los objetivos de eficacia, precisin, facilidad de uso, consistencia, sencillez y atraccin. La eficacia significa que las formas y las pantallas de entrada satisfagan propsitos especficos del sistema de informacin de la administracin, mientras que la precisin se refiere a un diseo tal que asegure una realizacin satisfactoria. La facilidad de uso implica que tanto las formas como las pantallas sern explcitas y no requerirn de tiempo adicional para descifrarse. La consistencia, en este caso, significa que las formas y las pantallas ordenen los datos de manera similar de una aplicaci n a otra, mientras que la sencillez se refiere a mantener en un mnimo los elementos indispensables que centren la atencin del usuario. La atraccin implica que el usuario disfrutar del uso o trnsito a travs de las formas y las pantallas cuyos dise os les sean ms atractivos.
2.3 Buen diseo de los formularios de entrada de datos

Los formularios de entrada de datos son instrumentos importantes para el desempeo adecuado del trabajo. Por definicin, son documentos duplicados o preimpresos que requieren ser llenados por las personas, en respuesta a un procedimiento estandarizado. Los mismos hacen surgir y capturan la informacin que los miembros de la organizacin requieren y con frecuencia se alimentan a la computadora. Existen cuatro lineamientos importantes para el dise o de los formularios de entrada: 1- Disee formas fciles de llenar Para reducir el error, agilizar su llenado y facilitar la captura de datos, es esencial que las formas sean fciles de llenar. El costo de las formas es mnimo si se compara con el costo del tiempo que ocupa el empleado en el llenado y en la alimentacin de los datos en la computadora. Es importante tener en cuenta el Flujo de la forma: El diseo de una forma con un flujo adecuado minimiza el tiempo invertido y el esfuerzo realizado por los empleados en el llenado. Las formas deben seguir un flujo de izquierda a derecha y de arriba hacia abajo, tal y como se muestra en el informe policaco de incidentes presentado a continuacin: REPORTE DEL INCIDENTE
Tipo de incidente Sitio Fecha Oficial en Turno Hora
Nombre de la primera persona involucrada Domicilio Nombre de la segunda persona involucrada Domicilio Telfono Daos Telfono Daos
Nombre del testigo Domicilio Telfono Comentarios
Describa lo ocurrido
Pgina 18 de 106
Es importante tambin respetar las siete secciones de una forma: Una segunda tcnica que facilita el llenado correcto de las formas consiste en la agrupacin lgica de la informacin. Las siete secciones principales que le confieren solidez a una forma son: a) Encabezado b) Identificacin y acceso c) Instrucciones d) Cuerpo del formulario e) Firma y verificacin f) Totales g) Comentarios De manera ideal, estas secciones deberan aparecer en una sola pgina ordenadas. Obsrvese que las siete secciones cubren la informacin bsica requerida en la mayora de los formularios. La parte superior del formulario recibe tres secciones: el encabezado, las secciones de identificacin y acceso y la seccin de instrucciones. La seccin del encabezado por lo general incluye el nombre y la direccin de la empresa que origina la forma. La seccin de identificacin y de acceso contiene claves que sirven para archivar el informe y obtener, en un momento dado, acceso a l. Esto es importante cuando una organizacin requiere conservar un documento por un determinado nmero de aos. La seccin de instrucciones nos dice cmo debera llenarse la forma y a donde dirigirla cuando se complete. La parte central de la forma es su cuerpo, el cual utiliza aproximadamente la mitad de la forma. Esta parte requiere del mayor detalle y desarrollo de la persona que la llena. La parte inferior de la forma se integra con tres secciones: firmas y verificaci n, total y comentarios. MINISTERIO DEL INTERIOR (encabezado) F XXX 546 (Identificacin y acceso)
(Instrucciones) Marcar con x lo que corresponda: Una vez completado enviar a la Oficina de recepcin (Cuerpo) Nombre Padre: .. Nombre Madre: ... Estado Civil: Soltero Casado Viudo Divorciado Trabajo: Relacin de dependencia Autnomo No trabaja CANTIDAD DE INTEGRANTES DEL GRUPO FAMILIAR: .. (Totales)
FIRMA: (Firma y verificacin)
COMENTARIOS:(Comentarios) ..
Otro aspecto a tener en cuenta es el rotulado: Los rtulos le indican a las personas qu anotar en un espacio en blanco, en un rengln o en un recuadro. Se dispone de varias alternativas para rotular, tal y como se muestra en la siguiente figura. Observe que hay dos tipos de rtulos de lneas y dos tipos de rtulos de seleccin. Los rtulos de lnea pueden encontrarse a la izquierda de reas en blanco y en el mismo rengln, o bien pueden imprimirse debajo de la lnea donde se registrar el dato. La ventaja de ubicar rtulos debajo de las lneas es que se dispone de ms espacio en tal lnea para el dato. Otra forma de rotular es proporcionar un recuadro para los datos, en lugar de la lnea. Los rtulos pueden ubicarse dentro, fuera o debajo del recuadro. Los recuadros auxilian a la gente a introducir los datos en el sitio correcto y tambin facilitan la lectura del receptor de la forma. Cualquiera que sea el estilo que elija para rotular, es importante emplearlo de manera consistente. Por ejemplo, llenar una forma que contiene rtulos tanto encima como debajo de las lneas se presta a confusin. Los cuadros de seleccin son ms convenientes cuando el nmero de alternativas de respuesta se encuentra necesariamente restringido. Las tablas son muy convenientes dentro del cuerpo de un formulario cuando se requiere detalles. Cuando un empleado se apega al formato de una forma que cuenta con un arreglo tabular, crea una tabla que ser de fcil compresin para la siguiente persona que reciba la forma y a la vez permite mantener una organizacin coherente de los datos. Puede utilizarse una combinacin de rtulos y cuadros. Es posible que pudiera necesitarse de diferentes estilos de rotulado. Nombre: Profesin: Apellido: Telfono:
Nombre
Apellido
Profesin Nombre
Telfono Apellido
Profesin
Telfono
Marque la forma de viajar: [ ] Avin [ ] Tren [ ] Automvil de la Compaa [ ] Automvil particular
Pgina 20 de 106
2- Asegrese que las formas cumplan con el propsito para el cual fueron diseadas. 3- Disee formas que aseguren un llenado preciso. 4- Mantenga las formas atractivas: Las formas estticas motivan a la gente y hacen que se les d importancia. Esto significar que cuando la gente llene las formas, se sentir ms satisfecha y adems llenar la forma en toda su extensin. Las formas no deben parecer amontonadas, sino ms bien, deben dar una apariencia de organizacin y lgica, an despus de llenarse. Se logra lo anterior, al proporcionar suficiente espacio para alojar respuestas mecanogrficas o manuscritas. El uso de diferentes tipos de letra dentro de la misma forma puede mejorar su imagen. Puede motivarse el inters en la forma al separar categoras y subcategoras con lneas de diferente grosor. Los tipos de letra y las lneas de diferentes grosores son elementos tiles de diseo para atraer la atencin y hacer que la gente se sienta segura de que llena una forma correctamente.
2.4 El buen diseo de pantallas

Mucho de lo que ya hemos dicho acerca del buen dise o de formularios de entrada puede transferirse al diseo de pantallas. Sin embargo, entre ambos casos existen diferencias, una de ellas y muy importante es la presencia constante de un cursor (un bloque iluminado u otro sealador) en la pantalla, que orienta al usuario sobre la posicin actual de acceso. Conforme se introducen los datos en la pantalla, el cursor se ir desplazando un carcter hacia delante de la direccin de la captura. Existen cuatro lineamientos para el diseo de pantallas. Ellos son: 1) Mantenga la pantalla sencilla: La pantalla debe mostrar solo lo que es necesario para la accin particular que se lleva a cabo. a) Las tres secciones de la pantalla: La parte superior de la pantalla contiene la seccin del encabezado, parte de la cual se encuentra programada para indicar al usuario en donde se encuentra dentro de la aplicacin o paquete. El resto del encabezado puede incluir otros elementos, tales como el nombre del archivo que el usuario ha creado. Tambin debe proporcionarse al usuario la definicin de los campos indicando la dimensin previsible del dato para cada campo de la pantalla. La tercera seccin de la pantalla se denomina seccin de Comentarios e Instrucciones. Esta seccin puede contener un men conciso de rdenes que recuerde al usuario las funciones bsicas del sistema, tales como el cambio de pantalla, o funciones tales como la grabacin de archivos o la conclusin de la sesin de captura. La inclusin de tales funciones bsicas permite que los usuarios sin experiencia se sientan ms seguros de su habilidad para operar la computadora sin llegar a ocasionar errores fatales.
Pgina 21 de 106
ENCABEZADO (Palabras claves de menus)
CUERPO (Utilice las convenciones de la lectura de izquierda a derecha y de arriba para abajo, con el fin de que se facilite al usuario la captura de datos)
COMENTARIOS E INSTRUCCIONES PARA LAS TECLAS DE FUNCION b) Uso de ventanas: Otra manera de mantener la sencillez de la pantalla es emplear unas cuantas instrucciones bsicas que al ser llamadas sobrepongan ventanas, que cubran parcial o totalmente la pantalla activa con nueva informacin. De esta manera, el usuario comienza la interaccin con el sistema, con una pantalla sencilla y de buen diseo, y controlando la complejidad del sistema a travs del uso de ventanas mltiples. Al contar con tal ventana se facilita el acceso rpido y correcto, ya que el usuario no necesita recordar aquellos cdigos de poco uso o dejar la pantalla para consultar una lista impresa, antes de completar la entrada de los datos. Adems, el sistema desarrollado puede programarse para aceptar solo a los cdigos de clasificacin listados en la pantalla y de manera automtica, presentar la ventana si el cdigo tecleado es incorrecto. Esto evita los errores que pudieran ocurrir si cualquier cdigo de clasificacin fuera aceptado por el sistema. Al usar otra orden o al presionar otra tecla ya antes definida, el operador limpia las ventanas informativas y regresa a la pantalla original. 2) Conservar consistencia en la pantalla: El segundo lineamiento para un buen diseo de pantalla es el mantenimiento de una imagen consistente. Si el trabajo de los usuarios se basa en formas en papel, las pantallas deben apegarse a lo que se muestra en el papel. La consistencia de la pantalla tambin se mantiene, si la informacin se localiza en la misma rea cada vez que se accesa una nueva pantalla. 3) Facilidad de movimiento: El tercer lineamiento para un buen diseo de pantalla es la facilidad de desplazarse con sencillez entre una pantalla y otra. a) Desplazamiento: bsicamente consiste en tener el control de las teclas de desplazamiento que provee el teclado y hacer que se comporten de forma natural, flecha a izquierda desplaza el cursor hacia la izquierda y as sucesivamente. b) Solicitud de mayor detalle: Otra de las tcnicas bsicas de movimiento entre pantallas, permite que los usuarios se desplacen con rapidez a otras pantallas, mediante la colocacin del cursor junto a un comando especfico. Por ejemplo, colocar el cursor sobre el nombre del empleado que haya elegido y presionar la tecla correspondiente a un comando preestablecido. Este comando lo llevar a una nueva pantalla, la cual corresponde al registro detallado del empleado elegido.
Pgina 22 de 106
REGISTRO DE EMPLEADOS NOMBRE Prez Juan Lpez Adrin Gonzlez Silvia Esquive Adolfo Furrer Oscar Fitipaldi Angela Santa, Julia F2 = Mas detalle DOMICILIO Arbo y Blanco 785 Jujuy 876 9 de Julio 765 Hernandarias 876 Lpez y Planes 543 Entre Rios 765 Santa Fe 432 TELEFONO 8776654 9876544 7654437 8765434 6543575 9998765 7766546
REGISTRO DE EMPLEADOS (Registro detallado) Apellido: Lpez Nombre: Adrin Nmero de Seguro Social:88765-ADD-88 Domicilio: Jujuy 876 Ciudad: Resistencia Provincia: Chaco Cdigo Postal: 3500 Nombre de la Esposa: Nancy Lpez Pariente prximo: Nancy Lpez Relacin: Esposa F1=Continuar c) Dilogo en pantalla: El uso de dilogos entre el usuario y la computadora facilita cierta clase de movimientos entre las pantallas.
Pgina 23 de 106
CAMPAA DEL FESTIVAL DE VERANO DE LA TELEVISION EDUCATIVA DILOGO SUGERIDO RESPUESTA

Hola, este es el Festival de verano de DETV Nos habla para contribuir? Gracias, me podra dar su apellido? Ha contribuido antes con DETV? S
POR OMISION
[ ] N
La pantalla anterior es la que se utiliza para recaudar donaciones a travs del telfono. Tan pronto como suena el telfono, el recepcionista tiene en su monitor el dilogo sugerido. La parte izquierda muestra el dilogo que el telefonista deber utilizar. En el lado derecho de la pantalla se muestran las respuestas tpicas para cada una de las preguntas. El recepcionista telefnico atiende la llamada al preguntarle a la persona si es que llama para hacer una contribucin. Si la respuesta es si, la tecla de la respuesta estndar (una tecla de retorno, por ejemplo) debe presionarse y el telefonista continua el dilogo con la segunda pregunta. El recepcionista registra el apellido de quien llama en la base de datos que contiene los donadores activos. La siguiente pregunta debe confirmar lo que esta persona respondi respecto de su contribucin. Si la persona nunca ha contribuido con este organismo, aparecer una ventana en la pantalla, similar a la anterior, donde el cursor le recordar al telefonista solicitar el domicilio del presunto contribuyente e investigar la existencia de un nmero de departamento.
CAMPAA DEL FESTIVAL DE VERANO DE LA TELEVISION EDUCATIVA DILOGO SUGERIDO POR OMISION Entonces, podra proporcionarme su RESPUESTA domicilio, comenzando por la calle y el Entonces, Podra proporcionarme n Hola, este es elmero? Festival de verano S su domicilio, de DETV Nos habla para contribuir? comenzando por la calle y el nmero?
Gracias, me podra dar su apellido? [ ]
Hay un nmero de departamento? Ha contribuido antes con DETV? N N Hay un nmero de departamento? De manera alternativa, si quien llama responde que l o ella han contribuido con N anterioridad, entonces se solicita una ventana diferente. Esta pantalla proporciona la ltima direccin conocida y dirige al telefonista a preguntar si todava esta es la
Pgina 24 de 106
correcta. El dilogo contina hasta que se define el monto del donativo y se precisa la forma de donacin.
CAMPAA DEL FESTIVAL DE VERANO DE LA TELEVISION EDUCATIVA DILOGO SUGERIDO RESPUESTA

Hola, este es el Festival de verano S Marcelo T. de Alvear de DETV Nos habla para contribuir?
POR OMISION
Nuestros registros indican que usted vive en: 2043
Todav a es correcto? Gracias, me podr a dar su apellido? [ ]S

Ha contribuido antes con DETV? N
4) Diseo de una pantalla atractiva: Las pantallas deben atraer al usuario y mantener su atencin. Esto se logra con el uso de espacios abiertos que rodeen los campos de captura de datos, de tal forma que la pantalla no se vea sobrecargada. Nunca se debe saturar una forma, as como nunca se debe saturar una pantalla. Siempre ser mejor utilizar pantallas mltiples, que amontonar todo en una sola. Existen mltiples recursos para lograr esto, algunos de ellos son: a) El vdeo inverso y los cursores que destellan b) El uso de diferentes tipos de letras c) El uso de imgenes en el diseo de pantallas: Utilice imgenes tpicas que los usuarios puedan interpretar fcilmente. Las imgenes para una aplicacin particular deben limitarse a no ms de veinte formas reconocibles, de esta forma el vocabulario de imgenes no se saturar y puede desarrollarse un buen esquema de codificacin. Utilice de manera consistente las imgenes que a todo lo largo de la aplicacin deban aparecer juntas. Esto asegura continuidad y comprensin. En general las imgenes son tiles si conllevan un significado. d) El uso de color en el dise o de la pantalla: Las mejores combinaciones son: - negro sobre amarillo - verde sobre blanco - azul sobre blanco - blanco sobre azul - amarillo sobre negro El color debe considerarse como una manera importante de contrastar; resaltar datos y campos de importancia; apuntar errores y permitir codificaciones especiales para las entradas.
Pgina 25 de 106
Unidad 3: Interface Grfica de Usuario

WIMP (Windows, Iconos, Men es y Dispositivo de sealizacin) es un tipo de interface de usuario que fue inventada por Xerox PARC, fue hecha famosa por Apple Macintosh y ahora esta disponible en sistemas de ventanas tales como X Windows System, Microsoft Windows, OSF/Motif y RISC OS. La mayor a de las personas hoy usan el trmino GUI (Interface Grfica de usuario) para referirse a la misma. Una interface grfica de usuario soporta una gran variedad de dispositivos de entrada, a diferencia de las interfaces de texto que solo acepta comandos provenientes del teclado. Una GUI usa ventanas en vez de palabras para representar las entradas y salidas de un programa. Un programa muestra ciertos iconos, botones, cajas de di logo, etc. dentro de dichas ventanas en la pantalla y el usuario la controla principalmente moviendo el puntero en la pantalla (tpicamente controlado por un mouse) y seleccionando ciertos objetos presionado los botones del mouse mientras el puntero esta posicionado en ellos. Beneficios de una Gua de Diseo para una GUI El uso de los estndares de Interface grfica de usuario a travs de una gua de diseo y de tipos de plataformas permite muchos beneficios. Beneficios para el usuario: los estndares y guas permiten consistencia. Para el usuario, la consistencia se traduce en un aprendizaje ms rpido, mayor eficiencia, menos errores y mayor satisfaccin. Resumiendo, mejora la utilidad de las aplicaciones. Los estndares tambin permiten un movimiento relativamente fcil a travs de las plataformas. Beneficios para Diseadores y Desarrolladores: muchas decisiones de desarrollo pueden basarse en los estndares de interface y buenas prcticas de diseo. Adems, al ser el objetivo la construccin de objetos de interface disponibles a travs de libreras para ser reutilizados, se minimiza la codificacin desde el principio. El uso de las buenas prcticas de diseo deben ser consideradas cuando se desarrolla una aplicacin, para permitir una mayor aceptacin por parte del usuario. Beneficios para el dueo del capital: reduce costos si la aplicacin es mas til. Incrementa la productividad si el cdigo es reutilizado. Convenciones Este documento tiene niveles claves. El primero son tems requeridos o tems estndar. La mayora de estos requerimientos son obligatorios. Un * indicara un requerimiento. El trmino "debe" es tpicamente usado para un elemento requerido. Por ejemplo: * Toda ventana debe tener un borde. Otro nivel es la recomendacin de una prctica, que se indicara con +. El trmino "debera" es tpicamente usado para una recomendacin. Por ejemplo: + Para una orientacin en columna, debera ubicarse las etiquetas sobre las cajas de texto, con el extremo izquierdo de la etiqueta en el borde izquierdo de la columna de cajas de texto. Hay un tercer nivel de buenas prcticas: se refiere a situaciones donde el consejo es menos especfico o altamente condicionable. Se indica con >. Por ejemplo: > Disear la aplicacin de manera de minimizar el nmero de veces que el usuario debe permutar entre el teclado y el mouse. Si constantemente va hacia atrs y adelante, la performance se deteriora considerablemente.
Pgina 26 de 106
Unidad 4: Diseo Centrado en el usuario

Las aplicaciones son herramientas: una GUI es como la herramienta aparece ante el usuario. Hay una separacin entre como la aplicacin es construida en el mbito de tarea analtica y como la aplicacin aparece ante al usuario. Se puede tener la GUI mas linda y aceptable, pero si la tarea oculta por la GUI no esta bien planteada, la GUI no puede compensarla. Una buena interface se consigue siguiendo buenas prcticas de diseo y entendiendo los principios en que se basa la interaccin entre el hombre y la computadora. Los principios de diseo son los fundamentos que guan el desarrollo de estndares especficos y conjunto de reglas de construccin. En este capitulo se analizan los principios bsicos a partir de los cuales muchas reglas de construccin han sido derivadas. La literatura en interaccin entre el hombre y la computadora es rica en principios de diseo de interface de usuario. A continuacin se presenta un ejemplo de la literatura sobre diseo centrado en el usuario.
4.1. Filosofa de Diseo centrado en el usuario

Las aplicaciones normalmente son desarrolladas de acuerdo a un punto de referencia filosfico. Este punto de referencia puede estar centrado en los datos, la tecnologa o el usuario. En cualquier desarrollo estos tres puntos de vista son altamente interdependientes, la diferencia esta en cual de ellos recibe la mayor atencin. El desarrollo centrado en los datos y la tecnologa son comunes, involucrando los flujos de datos y la tecnologa considerando al usuario como dispositivo de entrada/salida. Fundamentalmente las aplicaciones son herramientas usadas por los usuarios. El diseo de herramientas es una ciencia y un arte, pero la herramienta debe ser capaz de ser usada en una forma totalmente efectiva. La efectividad se logra nicamente si se focaliza en las necesidades del usuario. Por lo tanto, el diseo centrado en el usuario debe ser el punto de comienzo de las aplicaciones. Se debe tener en cuenta que el diseo centrado en el usuario lleva dos o tres veces ms tiempo que si uno se centra en los datos o la tecnologa, al tener que traducir los que el usuario necesita en prototipos, establecer requerimientos de utilidad, sus reacciones y realizar modificaciones. Este tiempo de anlisis es recompensado rpidamente con una gran certeza de efectividad del producto, tiempo de desarrollo reducido y menor pedidos de modificaciones.
4.2. Pasos del diseo centrado en el usuario

Atencin en el usuario desde el principio y en forma continua Es una clave de xito para la aplicacin escuchar al usuario desde el principio del desarrollo. Recordar que el objetivo del usuario no es usar la computadora o la aplicacin sino realizar su tarea. Debe contactarse con el usuario directamente y escucharlo. Las siguientes preguntan ayudan a entender al usuario y a sus tareas. Las respuestas a estas preguntas ayudan a focalizar las elecciones que se harn durante el diseo: Porque alguien usa la aplicacin? Cundo usan la aplicacin? Cuales son las caractersticas del usuario? Dnde usara la aplicacin?
Cuanta tiempo deben estar expuestos a la computadora? Cul es el grado de conocimiento de las tareas involucradas? Cmo hacen la tarea actualmente? Que grado de aceptacin tiene el usuario de la tecnologa escogida? Diseo integrado Todos los aspectos del diseo deben considerar que la calidad es lo ms importante para el usuario. El usuario exige productividad y satisfaccin. Por lo tanto, todos los aspectos del diseo deben considerarse desde el punto de vista de su utilidad. Prueba de usuario desde el principio y en forma continua Un desarrollador nunca pensara en lanzar un software al mercado que no ha tenido un chequeo completo del cdigo y una considerable prueba de sistema. Si embargo, muchos desarrolladores pasan por alto o acortan la prueba del componente ms crtico del sistema: el usuario. El propsito del chequeo de software es encontrar defectos y fallas en el cdigo. El propsito de la prueba de usuario, muchas veces llamada prueba de utilidad, es encontrar los defectos y las fallas en como el usuario interact a con la aplicacin. Los problemas de utilidad son problemas del diseo de una aplicacin; no pueden ser relegados a la documentacin y el entrenamiento. Debido a que un desarrollador no puede ser un juez imparcial de una interface por tener una habilidad diferente y quizs mas tcnica de usar la aplicacin comparada con la del propio usuario. La nica forma de descubrir o enfrentar los problemas de utilidad es a travs de pruebas de usuarios. La prueba de usuario involucra tener un grupo de usuarios representativo que realice las tareas tpicas bajo condiciones reales. Esto debera hacerse lo suficientemente temprano en el proceso para que los problemas claves puedan identificarse y corregirse antes de que el software sea lanzado. Las pruebas de usuario pueden abarcar todos los aspectos de la experiencia del usuario con la aplicacin: la interface grfica, la documentacin, entrenamiento, etc. Diseo iterativo Una vez que el diseo es creado y probado, usar los resultados para realizar cambios. El ciclo de diseo-modificacin-prueba es crtico para obtener la mejor interface de usuario de la aplicacin. Usar el contacto con los usuarios para encontrar fallas en la aplicacin y no en los usuarios. Continuamente hay que tratar de entender que necesita y desea el usuario y realizar los cambios. Hay que recordar que es imposible obtener el diseo correcto la primera vez.
4.3 Arquitectura de interface de usuario

La correcta realizacin de una prueba de usuario detectara las fallas de diseo que pueden causar problemas de utilidad. Desafortunadamente, dichas fallas a menudo son difciles de modificar porque la arquitectura de software de la aplicacin no permite una fcil modificacin de la interface de usuario. Muy a menudo, el cdigo que maneja la interface de usuario esta mezclada con el cdigo de la aplicacin, y cambios en el aspecto de la interface requiere cambios en el cdigo de la aplicacin que son costosos y consumen tiempo. Una buena arquitectura de software debe permitir una fcil modificacin de la interface. El cdigo de interface de usuario debe ser independiente del cdigo de las aplicaciones. En general, un sistema de administracin de interface de usuario (UIMS)
Pgina 28 de 106
se refiere al cdigo de interface de usuario de arquitectura discreto o separado del cdigo de aplicacin. La obediencia a las reglas de desarrollo de software inspiradas en UIMS permite un cambio fcil de la interface de usuario. Los datos obtenidos durante la prueba de usuario, nuevas tecnologas de interface de usuario, nuevos grupos de usuario con diferentes niveles de habilidades y la expansin de la funcionalidad del sistema pueden ser todos ubicados dentro de un modelo UIMS. De hecho, la tecnologa de ingeniera de software UIMS es la mejor en costo-efectividad a travs de la cual la filosofa de diseo basada en prueba de usuario y diseo iterativo desde el principio y en forma continua puede realizarse.
4.4 Heursticas Generales de diseo

Adems de la filosofa de diseo centrado en el usuario, hay algunas heursticas generales para el diseo de una aplicacin til. Simplificar la tarea y la interface lo mximo posible: Reducir el ruido visual. Adoptar el lenguaje familiar natural del usuario. Minimizar lo que el usuario debe recordar. No apoyarse en entrenamientos y documentaci n para resolver problemas de software. Las interfaces simples son ms fciles para trabajar, ms fciles de aprender y tienen menor probabilidad de generar errores que una compleja. Muchos de los principios de diseo discutidos aqu contribuyen a reducir la complejidad aparente de la interface: La complejidad visual puede ser reducida poniendo solo los controles ms importantes en botones o paneles de control y ocultando el resto en menes. Los controles de men estn disponibles pero no desordenan la pantalla. La complejidad verbal puede ser reducida estudiando y empleando las palabras y conceptos que usa el usuario. Usar palabras comunes al vocabulario del usuario y apropiadas a la tarea. Las palabras positivas y activas son las ms apropiadas. Otra forma de clarificar las aplicaciones es desarrollando y usando una lista de palabras reservadas. Minimizar lo que el usuario debe recordar. Es ms fcil para el usuario reconocer que recordar. Proveer listas de datos a partir de las cuales seleccionar antes que dejar que el usuario introduzca valores que debe recordar. En promedio, una persona puede recordar entre 2000 y 3000 palabras pero reconocer 5000. La complejidad de la tarea puede ser reducida agrupando tareas relacionadas y reduciendo el nmero de tareas diferentes presentadas en una simple ventana. Las actividades del usuario deberan ser simples en cualquier momento, a pesar de que pueden ser complejas si se las considera todas juntas. Adems, ofrecer pocas alternativas en cada momento y solo opciones vlidas - restringiendo las acciones a las apropiadas. Proveer salidas claramente sealizadas al usuario. La complejidad conceptual puede reducirse ayudando al usuario a formar un modelo claro de cmo la aplicacin esta organizada y como se puede acceder a los diferentes componentes. El entrenamiento es raramente terminado y rpidamente olvidado. La documentacin es raramente leda y, cuando es usada, la informacin no se encuentra fcilmente. Adoptar la suposicin de que no hay entrenamiento ni documentacin disponible para el usuario.
Pgina 29 de 106
Incrementar la simplicidad de la interface no debera confundirse con la simplificacin de la interface a tal punto que la performance se deteriore. Para que la performance de experto este bien soportada, hay que balancear entre hacer una interface algo compleja a que requiera entrenamiento. Consistencia conceptual: Desarrollar un modelo conceptual claro de la aplicacin. No violar las expectativas del usuario. La consistencia conceptual es la base de un buen diseo de interface. La interface debera basarse en una estructura conceptual clara y consistente; estructura que es transmitida al usuario a travs del diseo y el comportamiento de los componentes de la interface. Una buena estructura de interface organiza y ayuda a estructurar las actividades del usuario. Esto se logra presentando objetos y acciones apropiadas para las tareas a ser realizadas e indicando el flujo de actividades requeridas para llevar a cabo una tarea. En muchos casos la interface puede explcitamente restringir al usuario a realizar ciertas tareas en una determinada secuencia. En otros casos el diseo permitir al usuario realizar tareas en paralelo o en diferentes de secuencias. Una de las formas ms fciles de obtener una buena organizacin es realizar un anlisis de la totalidad de las tareas (filosofa de diseo centrada en el usuario) y a partir de all construir un modelo de tareas para la interface. Dentro de una aplicacin, un diseo de interface consistente reduce los errores de usuario y mejora la performance a travs del rango de tareas. El uso consistente de las operaciones y componentes standard ayuda al usuario a predecir los resultados de una accin antes de que la realicen y les ayuda a construir un modelo mental consistente de la forma en que la interface funciona. A travs de las aplicaciones, un diseo de interface consistente da soporte a la transferencia del entrenamiento y reduce el tiempo requerido para aprender nuevas aplicaciones. Una vez que el usuario conoce como efectuar ciertas tareas y operaciones en una aplicacin, son capaces de realizar una tarea similar en una aplicacin diferente sin un previo entrenamiento. Algunos de los principios bsicos de dise o consistente son: Componentes de interface similares deberan tener una apariencia y comportamiento similares. Por ejemplo, los menes pull-down y pop-up deberan parecer menes y comportarse como menes, a pesar de que pueden ser accedidos de muy diferentes maneras. Una accin debera tener siempre el mismo resultado independientemente del contexto (evitar modos). Por ejemplo, presionado la flecha hacia arriba en una barra de desplazamiento siempre desplaza el contenido en la misma direccin, sin importar si esta manejando una lista o una ventana. Las funciones estndar deberan ser reutilizadas a travs de las tareas y deberan ser presentadas en la misma forma en cada una. Por definicin, el comportamiento de una funcin standard debera ser consistente a travs de diferentes contextos de tareas. Por ejemplo, las funciones standard de cortar, copiar y pegar deberan ser provistas por el men de edicin siempre que dichas funciones sean necesarias en una tarea. Disear para prevenir errores: restringir las acciones a las apropiadas
Pgina 30 de 106
Cuando ocurren errores proveer de buenos mensajes de errores. La mejor forma de que no ocurran errores es previnindolos. Sin embargo, los errores ocurren incluso en las mejores interfaces y con los usuarios ms habilidosos y experimentados. La mejor forma de prevencin es minimizando las consecuencias de los errores y ayudando al usuario a recuperarse de ellos. Entre las tcnicas que se pueden usar para asistir al usuario son: Mensajes de error claros. Los mensajes de error deben expresarse en trminos del usuario y no del sistema. Comunicarle al usuario que ha ocurrido el "Error 16" no le es til. Comunicndole que la red se ha cado es ms informativo. Los mensajes de error deberan tambin indicar las acciones apropiadas para recuperarse del error o corregir el problema causado por el mismo. Mecanismos de reversin que permitan al usuario deshacer operaciones no deseadas o accidentales antes de proceder con la prxima. Forzar al usuario explcitamente cuando una operacin no puede deshacerse. Destrucciones explcitas significa que el usuario debe dar un paso extra para ejecutar la operacin que resulta en una alteracin permanente en los datos u otra propiedad del sistema. Lo ms comn es preguntando al usuario que confirme la operacin tal como el borrado de datos. Proveer buena realimentacin: el usuario debe ver que esta ocurriendo Hacer que las opciones disponibles para el usuario estn visibles. La realimentacin es la forma en que la aplicacin se comunica con el usuario. La realimentacin proveniente de la interface ayuda al usuario a confirmar que la aplicacin ha recibido su entrada. Informa al usuario sobre el estado de una tarea y el estado de los objetos de la interface. La realimentacin es expresada principalmente a travs de los cambios en la apariencia visual de los objetos en la pantalla. Por ejemplo, la seleccin de un objeto puede causar la adquisicin de brillo. La realimentacin tambin puede expresarse a travs de mecanismos explcitos tal como indicadores del porcentaje realizado comunicando al usuario sobre el estado de la tarea en progreso. En general, toda entrada de usuario debe ser confirmada con realimentacin visual. La realimentacin puede ser provista a travs de otras modalidades tales como el sonido. Este puede ser til en caso de tener que comunicar al usuario advertencias o errores. Pero la realimentacin visual es la principal manera de permitir a la aplicacin comunicarse con el usuario. Los objetos de datos y las operaciones provistas por una aplicacin deben ser fcilmente entendibles y no requerir de documentacin especial o entrenamiento formal. Esto significa que deben hacerse visibles en la pantalla como objetos grficos. La visibilidad de los objetos de datos y las operaciones permite al usuario aprender explorando y le ayuda a recordar las operaciones potenciales que puede realizar, y facilita una buena realimentacin. La disponibilidad tiene otros significados. Puede significar la posibilidad de realizar una operacin a pesar de que la misma no se encuentre visible. Los menes, por ejemplo, implican o sugieren la presencia de diferentes categoras de operaciones pero no las revela hasta que el usuario lo solicita. La disponibilidad puede significar que cualquier cosa visible en la pantalla este disponible para su uso. Si una operacin dada produce una salida en la pantalla, por ejemplo una cada de texto, esta puede ser usada como la entrada de otra operacin, tal vez usando las operaciones de copiar y pegar. El principio de disponibilidad tambin puede ser usado para guiar las decisiones acerca de que operaciones que deben estar visibles y cuales pueden estar ocultas. Las operaciones que son centrales a la
performance, frecuentemente usadas, o son necesarias para recordar al usuario acerca de importantes actividades tienen alto requerimientos de disponibilidad y deben ser presentadas en botones o paneles de control para acceso instantneo. Las operaciones secundarias en importancia o que no son frecuentemente accedidas tienen bajo requerimiento de disponibilidad y pueden ubicarse en menes o cajas de dilogos. Soportar diferentes estilos de interaccin: proveer varias formas de seleccionar objetos y acciones proveer atajos (shortcuts) para los usuarios expertos minimizar las teclas aceleradoras (Keystrokes). Comnmente hay mas de una forma de realizar una tarea, y diferentes usuarios son propensos a preferir diferentes tcnicas. La flexibilidad significa proveer mltiples mtodos de entrada para realizar una operacin o una tarea. La eleccin de un men, por ejemplo, puede ser llevada a cabo seleccionando el mismo con el mouse, presionado una tecla de funcin, o usando las teclas de flechas para recorrer la estructura de men. La activacin de una ventana en una aplicacin compleja puede ser llevada a cabo seleccionando el nombre desde el men, cliqueando una ventana visible con el mouse o introduciendo el nombre de la ventana en una caja dilogo de comandos. Una operacin puede realizarse de muy diferentes maneras. En general, la flexibilidad permite a usuarios de diferentes niveles de habilidad y experiencia realizar las tareas en la mejor forma para ellos, consistente con los principios generales de un buen dise o. En la prctica, la flexibilidad se logra de dos maneras: soportando mltiples tcnicas de entrada (teclado y mouse por ejemplo) y proveyendo tcnicas expertas y teclas aceleradoras para ciertas tareas. Sin embargo, las tcnicas expertas nunca deberan reemplazar a las tcnicas bsicas. Una interface debera disearse con un inexperto usuario en mente. Las tcnicas expertas deberan ubicarse por encima de las bsicas para mejorar la eficiencia de los expertos pero no deberan interferir con la facilidad de aprender o la simplicidad de las operaciones para los usuarios menos expertos. Para facilitar el aprendizaje, las teclas de comando equivalentes (teclas aceleradoras) deberan ser desplegadas prximas a los tems de men correspondientes. De igual manera, cuando una tecla de comando es presionada, el men en el cual dicho comando reside debera momentneamente adquirir brillo. Evitar el uso de modos: Un usuario introduce un modo cuando idnticos comandos o teclas aceleradoras (keystroke) tienen diferentes acciones en diferentes situaciones. Los modos deben evitarse porque fuerzan al usuario a pensar acerca de cmo la aplicacin trabaja y no en las tareas que est haciendo. Los modos no pueden ser evitados completamente, y en algunos casos incluso son deseables: las cajas de dilogo modales, tal como las que informan al usuario de una accin destructiva, son necesarias y apropiadas. Siempre permitir al usuario una forma clara de salir de un modo.
4.5. Fundamentos de la interaccin basada en objetos

En una interface grfica, tanto los datos como las posibles operaciones sobre los datos se hacen visibles al usuario. Los datos de la aplicaci n son representados mediante objetos de datos. Las actividades del usuario o las operaciones son representadas como controles visibles. Las interacciones son llevadas a cabo seleccionando objetos y activando controles con dispositivos de sealizacin (comnmente el mouse). Esto es llamado muchas veces como un estilo de interaccin "point & click".
Pgina 32 de 106
Un mouse no es requerido para una GUI, el teclado es usado para la entrada de datos textuales y muchas operaciones son mapeadas a teclas equivalentes y aceleradoras por lo que tareas de intensivo uso de teclado no requieren que el usuario permute entre dispositivos de entrada. El elemento clave en el diseo de un GUI es la visibilidad - haciendo visibles al usuario tanto los datos como las operaciones asociadas a los mismos a travs del uso de elementos grficos desplegables. Pero el diseador debe interesarse tanto en los objetos grficos como las tcnicas de entrada del usuario - formas en que el usuario puede expresar sus intenciones a la aplicacin. Para resumir, los principios fundamentales para el diseo de una interface grfica son: Representacin visible continua de objetos y acciones Acciones fsicas (por ejemplo arrastrar y soltar) u operaciones concretas (por ejemplo presionar un botn etiquetado) en vez de nombres de comandos. Operaciones reversibles rpidas y incrementables. Objeto: Un Objeto es un trmino general para cualquier elemento visible de una GUI. Un objeto puede ser cualquiera cosa visible en la pantalla, incluyendo iconos, ventanas, botones, menes, elementos de grficos interactivos, tems de listas, caracteres individuales de texto o datos y etiquetas. Se distinguen tres tipos de objetos: Controles de entrada de usuarios: son objetos que permiten al usuario realizar operaciones sobre los objetos de datos y manejar la aplicacin y los elementos de la interface. Los controles son activados por acciones de los usuarios. Los controles incluyen botones, sliders, botones de radio, barras de desplazamiento, iconos y men es. Objetos de salida de datos: representan elementos visibles de los datos de la aplicacin que no aceptan directamente la entrada del usuario. Iconos que representan elementos de una red son un ejemplo. Objetos de entrada de datos: permiten introducir texto o datos en la aplicacin. Por ejemplo las cajas de texto. Los objetos de entrada pueden ser llenados en muchas formas, incluyendo el teclado, actividades de la aplicacin, o como resultado de operaciones de cortar y pegar. Todo componente que caiga fuera de estas tres categoras se agrupa dentro de componentes de la interface. Acciones y Operaciones La entrada del usuario puede ser separada en dos categor as: acciones y operaciones. Las acciones de usuario son comportamientos fsicos que el usuario realiza con los dispositivos de entrada, tal como el mouse y el teclado. Ejemplos son el click del mouse y la presin de teclas. Las operaciones son el resultado de las acciones del usuario sobre los objetos de datos y los controles de interface de usuario. Representan las funciones que permiten al usuario manipular los objetos de datos, controlar la aplicacin y manipular los
Pgina 33 de 106
elementos de la interface de usuario. Ejemplos son la apertura de un archivo, encontrar una cadena en una lista, borrar un objeto movindolo al canasto de basura. Las acciones son hechas por los dispositivos de entrada. La realimentacin de las acciones es observada en la pantalla (por ejemplo el movimiento del puntero del mouse refleja los movimientos del mouse) pero las acciones no pueden ser representadas tan concretamente como controles visibles. Las acciones son necesarias para el nivel mas bajo de actividades tal como seleccin de objetos y para el estilo de interacciones de manipulacin directa. Las acciones solo pueden ser realizadas, no pueden ser activadas o seleccionadas en la forma en que pueden los controles. El significado de una acci n depende de las caractersticas fsicas del comportamiento del usuario (por ejemplo que botn del mouse fue presionado), de las caractersticas del objeto que es manipulado y el contexto de la aplicacin. Las operaciones toman su lugar cuando la accin de un usuario (el click del mouse o la presin de una tecla) activa el control. Las operaciones son concretamente representadas en controles y menes visibles de una GUI. El significado de una operacin es definido por una forma, una etiqueta y el comportamiento de un control. As, las barras de desplazamiento mueven el contenido de una ventana en forma vertical u horizontal, mientras que un botn realiza una operacin indicada por la etiqueta del botn. Las operaciones proveen los mecanismos bsicos para la manipulacin de datos y el control de la aplicacin. Una clase especial de operacin es encontrada en el estilo de interaccin de manipulacin directa, donde las operaciones son expresadas a travs de acciones fsicas con el mouse pero no son representadas concretamente en controles de interface. Las interacciones de manipulacin directa no tienen muchas caractersticas no-standard. Operaciones explcitas e implcitas Un modelo de objeto - accin generalmente sigue un modelo de operaciones explcitas. En el modelo de operaciones explcitas, toda operacin disponible es representada visiblemente y concretamente en la forma de un control de interface de usuario seleccionable. Tambin hay un modelo de operaciones implcitas, en el cual las operaciones son expresadas a travs de acciones de usuario particulares en vez de controles visibles. Los modelos implcitos son necesarios en interfaces de estilo de manipulacin directa, donde la semntica de una accin de arrastrar y soltar es dictada por el contexto - mover una icono de archivo en el cesto de basura implica una operacin diferente a mover el archivo a una carpeta de archivo. Sin embargo, los modelos implcitos tambin son encontrados en interfaces GUI basadas en operaciones seleccionables en vez de acciones de arrastrar y soltar. Dos ejemplo: (1) la operacin de bsqueda es realizada seleccionando una caja de texto, introduciendo una cadena y presionando la tecla ENTER en el teclado. Ningn control de bsqueda es visible en la interface; (2) un nuevo registro en una aplicacin de base de datos es creado al introducir una cadena inexistente en el campo clave - la aplicacin asume que el registro nuevo es creado. Las operaciones implcitas sin invisibles para los usuarios - estn ocultas en el dispositivo de entrada o en el comportamiento de la interface. Los usuarios esperan saber como realizar la operacin deseada. Si no saben, no hay forma de que lo descubran. Si son usuarios casuales de la aplicacin, no hay forma de un aprendizaje
incremental o que vuelvan a acordarse cosas que se han olvidado. Adems, las operaciones implcitas son casi siempre basadas en algn conjunto de suposiciones sobre las tareas y el usuario, que pueden no ser siempre vlidas. Las operaciones implcitas violan uno de los principios fundamentales de un diseo GUI - visibilidad en los datos y las operaciones. Por estas razones, las operaciones implcitas deben usarse solo para interacciones de manipulacin directa y para implementar tcnicas expertas que complementen las tcnicas bsicas basadas en operaciones explcitas. Operaciones genricas El mayor poder del modelo GUI proviene del uso de unas pocas operaciones genricas o universales que pueden ser aplicadas casi a cualquier clase de objeto en muchos contextos diferentes. Ejemplos conocidos pueden incluir deshacer, copiar, cortar y pegar del men de edicin. La universalidad de las operaciones hacen que la interface sea fcil de aprender y fcil de usar a travs de un amplio rango de tareas. En general el uso de operaciones genricas provee los siguientes beneficios: Mejoran la consistencia y predictibilidad de la interface: los usuarios siempre saben como borrar o copiar un objeto o donde encontrar una operacin. Impulsa al usuario a desarrollar un modelo objeto - accin consistente del funcionamiento de las tareas. Reduce el tamao del conjunto de comandos: la misma operacin puede ser usada en muchas tareas. Incremente la flexibilidad del diseo: las mismas operaciones estn siempre disponibles sin importar los cambios en la estructura de objetos de la aplicacin. Modelo de objeto - accin En un modelo objeto - accin (tambin conocido como paradigma de seleccionar y operar) los usuarios primero seleccionan un objeto luego realizan alguna accin sobre el objeto seleccionado. El modelo accin - objeto es opuesto, en el que los usuarios primero eligen la accin a realizar y luego seleccionan un objeto sobre el cual debe realizarse. La seleccin y operacin son tpicamente realizados con el mouse, pero tambin puede usarse el teclado. La aplicacin responde a cada operacin con realimentacin visible explcita. Si la operacin modifica un objeto, la apariencia visible del objeto cambia para reflejar el estado cambiado. Las tareas son logradas encadenando secuencias de seleccin y operacin, cada uno de los cuales puede deshacerse antes de proceder con el siguiente paso. Este modelo permite seleccionar mltiples objetos para una simple operacin o realizar mltiples operaciones sucesivas con un objeto simple. En la prctica, siempre es posible aplicar un modelo objeto - accin en toda interaccin de usuario en la aplicacin. En muchos casos una interacci n accin - objeto es necesaria e incluso deseable. Tcnicas bsicas y expertas Hay generalmente muchas formas de implementar una operacin dada o soportar una tarea. En caso general, hay dos formas para disear una interaccin: tcnicas bsicas y expertas.
Pgina 35 de 106
Tcnicas bsicas Las tcnicas bsicas siguen los principios del diseo de una GUI, el modelo de operaciones explcitas y el paradigma de seleccionar y operar. Estas tcnicas tienen las siguientes caractersticas: Todos los objetos de datos son visibles y todos los objetos de datos visibles pueden ser manipulados. Todas las operaciones disponibles pueden representarse concretamente en forma de botones, tems de menes o controles grficos. Cualquier operacin puede realizarse seleccionando un objeto de datos primeramente y luego activando el control apropiado. La seleccin de un objeto de datos restringe las operaciones disponibles a aquellas apropiadas para esos datos. Las operaciones desactivadas son indicadas visualmente con bajo brillo. Las tcnicas bsicas soportan el aprendizaje por exploracin, fcil reaprendizaje, consistencia y predictibilidad. Hacen posible que usuarios casuales puedan interactuar exitosamente con variadas aplicaciones. Estos beneficios se deben a: Todas las operaciones disponibles tienen inspeccin visual, tanto mirando la pantalla como navegando a travs del contenido de los menes. Todas las operaciones pueden ser realizadas usando el mouse o el teclado para activar los controles visuales. Ninguna operacin esta oculta en el teclado o en los botones del mouse. Tcnicas expertas Las tcnicas expertas son atajos para los usuarios experimentados. Estas generalmente siguen el modelo de operaciones implcitas, en las que las operaciones estn ocultas en el mouse u objetos invisibles tales como menes pop-up. Las tcnicas expertas tambin toman la forma de teclas aceleradoras, tales como teclas de atajo equivalentes a la seleccin de men o doble cliqueo del mouse sobre ciertos objetos de datos. Dependen de la tarea y el contexto de objeto para ayudar al usuario recordar la tcnica y aplicarla apropiadamente. Estas tienen las siguientes caractersticas: - son invisibles al usuario; no pueden aprenderse a travs de la exploracin. - particular o idiosincrsico a una tarea, aplicacin o contexto de datos - requieren de acciones de usuario especficas para invocarlas Las tcnicas expertas bien diseadas, pueden incrementar la eficiencia de la operacin de los usuarios expertos, dando flexibilidad al usuario en la performance de la tarea e incrementan el rendimiento de las operaciones repetitivas. Cuando se basa en un anlisis cuidadoso de las tareas pueden mejorar el mapeo entre el modelo conceptual del usuario de la tarea y su implementacin en una GUI. Gua general para usar Siempre disear la interface entorno a tcnicas bsicas primero, luego agregar tcnicas expertas y formas suplementarias de hacer las cosas. El uso de tcnicas bsicas es la clave para la consistencia. No se puede esperar que las tcnicas expertas sean consistentes a travs de las tareas o aplicaciones.
Pgina 36 de 106
4.6. Estilos de interaccin

Manipulacin Indirecta La manipulacin indirecta en donde el usuario especfica un objeto con una accin (por ejemplo la seleccin de un texto) y especfica la operacin a ser realizada sobre el objeto con una accin separada (por ejemplo cortar); se basa en el modelo de operacin explcita. Con manipulacin indirecta el usuario no manipula un objeto para realizar una operacin. La manipulacin indirecta es el estilo de interaccin ms comn en una GUI. Este estilo de interaccin es conceptualmente muy parecido a la interaccin orientada a comandos, excepto que los comandos son especificados mediante la seleccin y cliqueo de objetos visibles en vez de cadenas de caracteres. Manipulacin Directa En la manipulacin directa las operaciones interactivas son expresadas a travs de acciones fsicas realizadas con el mouse en vez de botones etiquetados o menes. La ms comn es la de arrastrar y soltar, en la que el usuario selecciona un objeto en la manera usual y luego usa el mouse para mover el objeto a un destino apropiado donde lo deposita. Al usarse manipulacin directa, el usuario interacta directamente con los objetos en la interface. Las operaciones son implcitas a la relacin existente entre los objetos de datos, las acciones del usuario y el contexto de la pantalla. Por lo tanto, el significado de arrastrar y soltar es determinado por el contexto en el cual la accin tiene lugar. Este tipo de operaciones pueden ser complicadas para el usuario porque, por su naturaleza, no son explcitas ni visibles. Sin embargo, si se usan las operaciones en el contexto apropiado, pueden ser poderosas y efectivas.
4.7. La met fora de escritorio

Las interfaces grficas de usuario permiten que los objetos se representen similarmente a objetos familiares del mundo real. Desde que las personas han experimentado con objetos familiares, las aplicaciones de computadoras pueden emular sus comportamientos, resultando en aplicaciones intuitivas y fciles de aprender. Por ejemplo, as como herramientas, tales como tijeras y cintas, estn disponibles en un escritorio real para llevar a cabo tareas de oficina, el escritorio de la computadora ofrece utilidades para cortar y pegar. La metfora de escritorio asume que se gana tiempo de entrenamiento aprovechando la ventaja de tiempo invertido por el usuario en aprender la operacin de una oficina tradicional con documentos y armario llenos. Una metfora de escritorio tiene las siguientes caractersticas: un archivo como lugar donde se almacena informacin relacionada; carpetas usadas para agrupar archivos de datos relacionados; los archivos se borran arrojndolos a cesto de basura; mltiples ventana solapadas que representan pilas de papeles comnmente encontradas sobre un escritorio. La habilidad de editar informacin en lnea ha resultado en la creacin de acciones adicionales que se han convertido en standard de facto, disponible en la mayora de las herramientas GUI comerciales. Las acciones ms comunes incluyen: Grabar, grabar como, imprimir, salir, deshacer, cortar, copiar, pegar.
Pgina 37 de 106
A primera vista, la metfora de escritorio puede parecer que no es lo mas apropiado para los usuarios de una determinada aplicacin, pero si todas las aplicaciones son accedidas mediante mecanismos que usan dicha metfora, se convierte en la forma fcil y natural de los usuarios, pudiendo generalizar su conocimiento a todas las aplicaciones. Esta metfora debe usarse para todas las aplicaciones. Esta debe usarse en el nivel mas alto de una aplicacin (por ejemplo en la apertura e interaccin con la ventana primaria) y debera ser mejorada con acciones de aplicaciones especficas o reemplazada por otras metforas apropiadas del mundo real. Por ejemplo, en una aplicacin de inventariado, las pantallas pueden reflejar el equipamiento que actualmente representan y el equipamiento puede ser ubicado o removido de sus localizaciones los cuales lucen como estantes con ranuras.
Pgina 38 de 106
Unidad 5: Gua de Referencia Standard

5.1. Interface
El primer paso para crear una aplicacin es crear la interface, la parte visible de una aplicacin con la cual el usuario interactuar . Tipos de Interfaces Hay dos tipos principales de interface de usuario: Interface de documente simple (SDI) e interface de mltiples documentos (MDI). En aplicaciones de tipo SDI, solo un documento puede estar abierto en un momento dado. Para abrir otro, se debe cerrar el que se tiene abierto en ese momento. Las aplicaciones de tipo MDI permiten desplegar mltiples documentos al mismo tiempo, cada uno en su propia ventana. Se puede reconocer una aplicacin MDI por la inclusin de un ttulo de men Windows con submenes para permutar entre ventanas a documentos. Para determinar que tipo de interface es la mas apropiada hay que analizar el propsito de la aplicacin. Una aplicacin para el procesamiento de reclamos de seguros debe ser de tipo MDI - es probable que un empleado trabaje con mas de un reclamo al mismo tiempo o incluso ser necesario que compare dos o ms reclamos. Desde otro punto de vista, una aplicacin de calendario es preferible que sea de tipo SDI - no es probable que uno necesite tener mas de un calendario abierto en un determinado momento; en el caso, poco frecuente, de que se necesite dos calendarios, se podra abrir una segunda instancia de la aplicacin SDI. Comentarios sobre aplicaciones MDI: En una aplicacin MDI, se pueden ver todos las ventanas hijas dentro de la ventana de rea de trabajo. El usuario puede mover y cambiar el tamao de las ventanas hijas pero siempre dentro del rea de trabajo. Una ventana puede minimizarse, apareciendo como un icono. Cuando se minimiza una ventana MDI, esta y todos las ventanas hijas se representan mediante un icono. Cuando se restaura la ventana MDI, tambin ser restauran todas las ventanas hijas en el mismo estado en que estaban antes de ser minimizadas. Cuando una ventana hija es maximizada, su etiqueta es combinada con la etiqueta de la ventana principal y desplegada en la barra de ttulo de esta ultima. Toda barra de men de una ventana hija es desplegada en la barra de men de la ventana MDI y no en ventana hija. Comentario: El tercer tipo de interface muy popular es la de tipo explorador. Esta es una simple interface conteniendo dos regiones, consistente en un rbol jerrquico a la izquierda y un rea desplegada a la derecha (como las de Microsoft Windows Explorer). Este tipo de interface por si misma permite navegar por gran nmero de documentos, imgenes o archivos.
5.2 Objetos de Interface

Las ventanas y los objetos de interface son los elementos b sicos usados para crear una interface; son los objetos con que se trabaja para crear una aplicacin. Las ventanas exponen propiedades (atributos) que definen su apariencia, mtodos (operacin) que definen su comportamiento y eventos (acciones) que definen su interaccin con el usuario.
Los objetos de interface estn contenidos en una ventana. Cada objeto de interface tiene sus propias propiedades, mtodos y eventos que son apropiados para propsitos particulares. Algunos controles son mas apropiados para introducir datos o desplegar texto. Comentario: Existen objetos de interface especficos que permiten acceder a otras aplicaciones o procesos de datos como si la aplicacin remota fuera parte de su cdigo. En general, las propiedades se refieren a los atributos de una objeto, los eventos a sus acciones y los mtodos a sus respuestas. Las propiedades incluyen atributos visibles (color, altura, dimetro), descripciones de estado (habilitado, inhabilitado) y otros atributos que no son visibles. Todo objeto tiene mtodos y acciones inherentes que pueden ser ejecutados. Tambin pueden tener respuestas a determinadas acciones. Ventanas Una ventana provee un contexto para una aplicacin; todos los objetos de interface son organizados y presentados en ventanas. Por ejemplo, un procesador de texto provee un espacio para el texto. Una ventana es la forma principal en que un usuario interact a con una aplicacin. + Una aplicacin puede proveer una o ms ventanas, cada una de las cuales provee diferentes vistas o informacin adicional al usuario. Tipos de ventanas Ventanas primarias Una ventana primaria localiza la principal interaccin del usuario con la aplicacin. + Una aplicacin puede tener mltiples ventanas primarias. Cada una de estas ventanas primarias de la aplicacin son independientes. + Se recomienda que toda aplicacin despliegue inicialmente una ventana primaria, lo cual permite establecer el contexto de la aplicacin para el usuario. Ventanas Secundarias Una ventana secundaria es un tipo de ventana que complementa la interaccin en una ventana primaria. Las cajas de dilogo son un tipo especial de ventanas secundarias que permiten completar comandos y pasar informacin al usuario. Una de las caractersticas principales de una ventana secundaria es sin es modal o no modal. * Al usarse una ventana secundaria debe estar relacionada a una ventana primaria. + Cuando se inicializa una ventana secundaria, debe ser desplegada y cubrir una porcin de la ventana activada. Esta no debera posicionarse sobre cualquier parte de la ventana que el usuario necesita ver para completar su tarea. + Las ventanas secundarias pueden llamar a otras ventanas secundarias para mas interaccin suplementaria, si es necesario. + Una ventana secundaria debera ser movible, si es posible. Las ventanas sin modo deben ser movibles, las ventanas modales no deben ser movibles. Ventana secundaria modal Una ventana secundaria modal requiere que el usuario realice alguna accin en la ventana antes de continuar trabajando en la aplicacin. Por ejemplo, cuando un usuario
Pgina 40 de 106
desea conectarse con un mdem, selecciona Dial... del men y la aplicacin presenta una ventana secundaria modal pidiendo que el usuario introduzca un nmero telefnico. Las ventanas modales pueden ser de tipo aplicaci n o de sistema. Una ventana secundaria modal es de modo aplicacin cuando requiere de informacin del usuario antes de continuar con al aplicacin actual, pero no para continuar con otras aplicaciones. Una ventana secundaria modal es de modo sistema cuando requiere de informacin del usuario antes de continuar con cualquier cosa. * Cuando se presenta una ventana secundaria modal, el usuario debe realizar una accin explcita para abandonarla, tal como seleccionar OK o Cancel. + Se recomienda usar este tipo de ventanas solamente para problemas serios, tal como agotamiento de memoria o error de algn dispositivo. Ventana secundaria no modal Una ventana secundaria no modal permite al usuario realizar otras operaciones sin que la ventana secundaria desaparezca. Generalmente se usa para comandos e informacin usada frecuentemente. * Cuando una paleta flotante o caja de herramientas es presentada como una ventana secundaria no modal debe permanecer completamente visible (por ejemplo debe permanecer sobre la ventana a la que se la aplica). + Este uso de ventanas es recomendado para dilogos que no requieren atencin inmediata o para comandos que no necesitan ser completados antes de continuar. Elementos Obligatorios Los elementos requeridos en una ventana son cuatro: borde, rea de cliente, men y ttulo.
Elementos requeridos para Windows y Motif (izquierda) y Macintosh (derecha). Borde El borde es un marco que rodea una ventana y contiene todos los elementos de una ventana. Dependiendo de la plataforma puede haber diferentes formas de manipular el borde. Por ejemplo, en algunas plataformas todos los bordes y esquinas pueden manipularse con el cursor y cambiar el tamao de la ventana. En otros solo hay una caja opcional ubicado en la esquina derecha para cambiar el tamao. * Toda ventana debe tener un borde.
Pgina 41 de 106
Area del Cliente El rea de cliente es donde los objetos de interface para la aplicacin son ubicados. * Toda ventana debe tener un rea de cliente. Men de control El men de control es un men de todas las operaciones posibles en la ventana. * El botn de men de control se localiza en el borde izquierdo de la barra de ttulo. + Se recomienda que toda ventana tenga su men de control. Ttulo El ttulo es una descripcin verbal corta del contenido de una ventana. * Toda ventana con barra de ttulo debe tener un ttulo centrar el ttulo en la barra de ttulo ubicado en la parte superior de la ventana. Para las cajas de dilogo que permiten completar comandos, empezar el ttulo en la esquina izquierda superior del rea del cliente. Comnmente el ttulo de una caja de dilogo para completar comandos es el mismo que el comando que inicializa dicha ventana. * En una ventana primaria, el ttulo debe ser el nombre de la aplicacin o de un archivo. En una ventana secundaria, el ttulo debe comenzar con el objeto bajo el foco y la operacin. * Si un usuario abre mas de una instancia de un objeto, al ttulo de cada instancia se le adjunta dos puntos y el nmero de la instancia. Por ejemplo, cuando abre un archivo por segunda vez, se agrega :1 al ttulo de la primera instancia y :2 se incluye en el ttulo de la segunda instancia. * Toda palabra significante del ttulo, con excepcin de las palabras definidas por el usuario, deberan tener la primer letra en maysculas. > En una aplicacin de base de datos se despliega mltiples vistas del mismo objeto por lo que es ms difcil asignar un ttulo. Una solucin es solicitar al usuario el nombre para cada vista requerida del mismo objeto y establecer dicho nombre como ttulo como sigue: aplicacin - nombre de archivo- nombre de vista. Elementos opcionales Los elementos opcionales significan que pueden no ser necesarios. Sin embargo, si se usan uno o ms de estos elementos deben comportarse de la forma estndar. Estos son especficos de acuerdo a la plataforma con que se trabaja. Se tomara como ejemplo el de Windows.
Pgina 42 de 106
Elementos opcionales de una ventana Windows Botn de Maximizar El botn de maximizar se localiza en la parte mas a la derecha de la barra de ttulo de una ventana primaria. Una ventana de tamao fijo no tiene botn de maximizacin. * Cuando un botn de maximizacin es presionado, agranda la ventana a su tamao ms grande o al tamao de visualizacin de la pantalla. Este botn debe estar habilitado cuando la ventana puede cambiar de tamao pero no esta actualmente maximizada. Cuando la ventana esta maximizada, se cambia el botn de maximizacin por el de restaurar. Una ventana secundaria no tiene botones de maximizacin. Botn de Minimizar Un botn de minimizar se localiza en la parte mas a la derecha de la barra de ttulo de una ventana primaria, justo a la izquierda del botn de maximizar/restaurar. * Cuando el botn de minimizar en presionado, remueve de la pantalla la ventana y todas las ventanas secundarias asociadas y los reemplaza por un icono en la pantalla. Las ventanas secundarias no tienen botones de minimizacin. Botn de Restaurar Un botn de restaurar es localizado en la parte mas a la derecha de una barra de ttulo. Este aparece cuando la ventana esta maximizada y la ventana puede cambiar de tamao. * Cuando el botn de restaurar es presionado, la ventana retorna a su tamao y posicin que tenia antes de ser maximizada. Cuando se restaura a partir de un estado minimizado, tambin se restaura cualquier ventana secundaria asociada con la ventana minimizada. Barra de Men La barra de men es el rea debajo de la barra de ttulo que contiene los encabezados de men de una sola palabra asociados a menes pull-down. Se debe usar la barra de men cuando la ventana usa menes standard: Archivo, Editar y Ventana. Si no se usa barra de men, todas las acciones deben ser provistas a travs de controles de ventana o en botones pegados en la ventana. Barras de Desplazamiento Las barras de desplazamiento son localizadas a la derecha y en la parte inferior de un rea de cliente que aparecen automticamente cuando el tamao del rea de cliente
Pgina 43 de 106
no es lo suficientemente grande como para acomodar todos los objetos dentro del rea de cliente. Caja de Divisin Una caja de divisin aparece al tope de una barra de desplazamiento vertical y a la izquierda de una barra de desplazamiento horizontal. El usuario puede cliquear en dicha caja y luego arrastrar dicha barra para dividir la ventana en dos partes en cualquier lugar a lo largo de la barra de desplazamiento. * Luego de dividir la ventana, la barra de desplazamiento aparece en ambas partes en que se dividi la ventana, de esta forma pueden ser manipuladas independientemente. Una ventana sin barras de desplazamiento no puede tener una caja de divisin. rea de informacin Se debe poner en casi todas las aplicaciones, un rea de informacin en la parte inferior de la pantalla, debajo de las barras de desplazamiento o a la izquierda de la barra de desplazamiento horizontal. + Un rea de informacin provee al usuario de una gua o de informacin acerca de las configuraciones usadas por la aplicaci n o los objetos a ser manipulados. Propiedades Activo/Inactivo Una ventana se activa al cliquear en cualquier lugar dentro del marco de la ventana o escogindola del men de ventana. (Este es el modelo de foco explcito. El otro modelo existente es el de foco implcito, en el que la ventana se activa simplemente posicionando el cursor en la ventana. Diferentes plataformas usan diferentes tipos de foco. Es recomendado que se use el modo expl cito en la mayora de los casos, especialmente para usuarios sin experiencia.
La ventana activa, es aquella en la cual el usuario esta trabajando en cualquier momento, la cual tiene el foco de entrada. Al activarse, la barra de ttulo se vuelva operativa, la ventana y su contenido se hacen visibles y todos los elementos de la ventana aparecen. Todos los elementos liberadas cuando la ventana se hizo inactiva vuelven a seleccionarse. La siguiente figura muestra una ventana activa y otra inactiva. * Cuando una ventana es activada, todas las otras ventanas se vuelven inactivas, a pesar de que pueden estar ocurriendo operaciones en ellas (procesamiento en segundo plano). Cuando la ventana se inactiva, las selecciones son liberadas, el ttulo se vuelva inoperativo, y los elementos desaparecen o cambian su apariencia.
Pgina 44 de 106
Navegacin Dentro de una ventana Una barra de desplazamiento permite al usuario ver cualquier parte de un rea de cliente que no esta visible en la pantalla. Si el rea de cliente no tiene informacin en la que desplazarse, debera inhabilitarse las barras de desplazamiento. Una barra de desplazamiento es rectangular con flechas de desplazamiento en ambos extremos. Una caja de desplazamiento se sita dentro de la barra de desplazamiento y muestra la localizacin relativa, en el documento entero, de la porcin que esta actualmente visible. Una barra de desplazamiento vertical mueve la ventana de arriba hacia abajo y una barra de desplazamiento horizontal mueve la ventana de izquierda a derecha. El usuario manipula la barra de desplazamiento (y as el rea del cliente) tanto cliqueando y moviendo la caja de desplazamiento, cliqueando las fechas de desplazamiento o cliqueando en el rectngulo arriba o debajo de la caja de desplazamiento. * Hacer que el tamao de la caja de desplazamiento represente la cantidad relativa desplegada del documento. Si el documento es corto, la cantidad desplegada es grande y por lo tanto tambin la caja de desplazamiento. Si el documento es largo, entonces la cantidad desplegada es pequea as como la caja de desplazamiento. Nota: la nica desventaja de cajas de desplazamiento proporcionales es que para un documento extremadamente largo, la barra de desplazamiento ser muy pequea. Por lo tanto, el tamao mnimo de la caja de desplazamiento debera ser el tamao por defecto de la caja de desplazamiento. Movimiento de la ventana en la pantalla Los usuarios mueven las ventanas cliqueando en la barra de ttulo y arrastrando el marco de la ventana a la nueva posicin. Cuando el usuario suelta el botn del mouse, la ventana es redibujada en la nueva posicin. * Una ventana nunca debe ser capaz de moverse fuera de la pantalla de tal modo que no pueda verse, a pesar de que puede ser completamente oculta por una o ms ventanas. Movimiento entre ventanas Los usuarios pueden tener muchas aplicaciones, ventanas primarias y secundarias disponibles en cualquier momento. Por lo tanto, el usuario debe ser capaz de navegar rpida y fcilmente entre ventanas. Las forma ms directa de navegar entre ventanas es cliqueando una de las ventanas inactivas con el puntero del mouse y hacer que se active. Otra forma de activar una ventana es seleccionar su nombre desde el men de ventana de la aplicacin. Algunas plataformas proveen el uso de comandos del teclado para navegar entre ventanas. Por ejemplo: ALT+TAB o ALT+ESC para moverse entre las ventanas en la pila de ventanas. Cajas de Dilogos Las cajas de dilogo, un tipo especial de ventana secundaria, ayudan a simplificar comandos y a proveer mas informacin al usuario acerca de una operacin. Son transitorias. Generalmente tienen dos tipos de uso. Primero, son usadas para obtener informacin para completar comandos, denominadas cajas de dilogo para completar comandos.
Segundo, son usadas para presentar mensajes al usuario y obtener respuestas del usuario. Se categorizan en cajas de dilogo de informacin, de advertencia y de error. * Las cajas de dilogo no pueden cambiar de tamao. No poseen botn de maximizacin/restauracin y de minimizacin.
Pgina 46 de 106
Las cajas de dilogo vienen en muchas formas con una variedad de formatos, pero la mayora de los tipos bsicos se encuentran en la tabla. Tipo general Completar comandos Entonces usar una caja de dilogo... Permitir al usuario hacer cambios simples y predecibles OK/Cancel para completar un comando Permitir al usuario hacer cambios a las propiedades de Propiedad un objeto donde se desea inmediata realimentaci n para completar un comando. Comunicar al usuario informacin importante del Mensaje sistema o de la aplicacin; presentar informacin al usuario para su confirmacin. Cierre Proveer al usuario de monitoreo de datos dinmicos. Pregunta Lograr que el usuario responda a una pregunta. Trabajo Informar al usuario que la aplicacin esta funcionando. Alerta al usuario una condicin que requiere una Advertencia decisin o alguna entrada antes de poder proceder. Comunica a usuario acerca de un error Error Si su propsito es...
Informacin
Advertencia Error
Tipos de Cajas de Di logo Cajas de Dilogo para Completar Comandos Las cajas de dilogo para completar comandos son usadas para obtener mayor informacin del usuario antes de que el comando sea completado. Estas cajas pueden ser modales o no modales. + Las etiquetas en los tems de comandos (por ejemplo botones e tems de men) que generan cajas de dilogos deben ser seguidas por puntos suspensivos (...). Caja de dilogo OK/Cancel La caja de dilogo OK/Cancel es usada para confirmar cambios que el usuario solicita. Los cambios son efectuados cuando el usuario presiona OK. Toda configuracin u otros procesos son cancelados si el usuario presiona Cancel. * La caja de dilogo desaparece cuando el usuario selecciona cualquiera de sus botones. + Este tipo de caja de dilogo se usa para cambios predecibles; esto es, cuando el usuario puede predecir como lucir el cambio o como proceder la accin. + Una caja de dilogo OK/Cancel tambin puede tener un botn de ayuda. + Secuencia de botones recomendados: OK OK Cancel OK Cancel Help
Pgina 47 de 106
Caja de Dilogo de Propiedad La diferencia principal entre la caja de dilogo de propiedad y la de OK/Cancel, es que la caja de dilogo de propiedad muestra los efectos al aplicar los comandos inmediatamente sin remover la caja de dilogo; una caja de dilogo OK/Cancel es removida cuando la accin es hecha. Presionando Apply, el usuario puede efectuar cambios inmediatamente. + Un botn de deshacer es recomendado cuando no hay forma de revertir f cilmente la accin para volver a seleccionar la opcin previa. Al usar Undo, permitir al usuario a rehacer (Redo) una accin. La figura muestra un ejemplo:
+ El ttulo de una caja de dilogo de propiedad deber tener el nombre de comando que la despleg. > Es una buena prctica etiquetar uno de los botones de la caja de dilogo con la misma etiqueta o similar a la etiqueta del botn del tem de men que despleg la caja. Por ejemplo, si el usuario selecciona Open... del men de archivo, debera haber un botn Open en la caja de dilogo en vez del botn OK o Apply. > Usar una caja de dilogo de propiedad, en oposicin una de OK/Cancel, cuando el usuario necesita una realimentacin inmediata de las acciones de la caja. Un botn de Done (en vez de OK) hace que la caja de dilogo se cierre. Esta clase de dilogo puede tener un botn de ayuda. Secuencia de botones recomendados: Apply Done Apply Done Help Apply Undo/Redo Done Apply Undo/Redo Done Help Cajas de Dilogo de informacin Las cajas de dilogo de informacin son usadas para proveer informacin de estado, hacer sugestiones tiles, dar consejos concretos y generar respuestas a simples preguntas. + La mayora de las cajas de informacin tienen tres elementos principales: un icono, un mensaje y un conjunto de botones. El icono de ubica a la izquierda, el mensaje a la derecha del icono y los botones debajo del mensaje. + Las cajas de informacin que proveen informacin critica deben ser acompaados por un beep. Nota: En la mayora de los casos se desea proveer un botn por defecto, pero no siempre es correcto o deseable como en el caso de informaciones criticas que el usuario
Pgina 48 de 106
debe leer. Una usuario impaciente o apurado puede presionar accidentalmente ENTER pasando por alto un mensaje importante y no disponer de la informacin importante. Si un botn por defecto es usado, debera ser la respuesta que ocasionara la accin menos destructiva y es el que debera ser seleccionado si el usuario presiona ENTER. Caja de Dilogo de Mensaje Una caja de dilogo de mensaje es usada para pasar informacin al usuario. La forma de afirmar que el usuario ha le do el mensaje es presionando un botn afirmativo. Toda informacin del sistema o de la aplicacin que el usuario necesita saber es pasada en cajas de dilogo de mensajes. * Las cajas de dilogo de mensajes son modales. El usuario debe escoger uno de los botones disponibles para poder continuar. La secuencia de botones recomendada es: OK OK Cancel OK Cancel Help Retry Cancel Retry Cancel Help Action Dont Action Action Dont Action Help
Caja de Dilogo de Cierre Una caja de dilogo de cierre es usada para monitorear datos dinmicos o para desplegar imgenes capturadas. Las cajas de dilogo de cierre son no modales y no asumen que el usuario ha procesado ninguna informacin en la caja de dilogo. Por ejemplo un reloj.
Caja de Dilogo de Pregunta Una caja de dilogo de pregunta requieren que el usuario responda a una pregunta que involucra acciones no destructivas. Las cajas de dilogo de pregunta son modales; el usuario debe contestar antes de continuar.
Pgina 49 de 106
Las secuencias de botones remendados son: Yes No Yes No Help Yes No Cancel Yes No Cancel Help Caja de Dilogo de Trabajo Una caja de dilogo de trabajo es un indicador progresivo que permite al usuario cancelar la continuacin de un proceso. En lo posible, son no modales. Cuando el usuario presiona Cancel el proceso expira y puede requerir que la aplicacin informe al usuario el estado del proceso. La secuencia de botones recomendados es: Cancel Cancel Help
Caja de Dilogo de Advertencia Una caja de dilogo de advertencia comunica al usuario acerca de una operacin destructiva potencial o no reversible o que el sistema no esta seguro de terminar normalmente. (Por ejemplo La impresin del trabajo puede no terminarse apropiadamente; chequear la salida y reimprimir si es necesario). Casi siempre una caja de advertencia permite que el usuario contine la accin, la reintente o la cancele. * Toda caja de advertencia tiene tres elementos: un icono, un mensaje y un conjunto de botones. Se coloca el icono a la izquierda, el mensaje a su derecha y el conjunto de botones abajo del mensaje. Si es deseable un botn por defecto, debera ser la respuesta que causa la accin menos destructiva y que debera ser seleccionada cuando el usuario presiona Enter. * Las cajas de advertencias deben contener el icono standard de advertencia del sistema y ser modales. El usuario debe escoger uno de los botones disponibles para continuar. * Una caja de advertencia debe ir acompaada de un sonido beep. + Una caja de advertencia debera tener una opcin que permita al usuario no realizar la accin que ha causado la condicin de advertencia, tal como Cancel. + Una caja de advertencia debera tener una opcin que permita al usuario continuar con la accin que ha causado la condicin de advertencia.
Pgina 50 de 106
La secuencia de botones recomendados es: Yes No Yes No Continue Cancel Continue Cancel Help OK Cancel OK Cancel Help Caja de Dilogo de Error Una caja de dilogo de error informa al usuario de un problema serio del sistema o de la aplicacin. Comnmente requiere que el usuario elija, entre las alternativas, un curso de accin. * Toda caja de error tiene tres elementos: un icono, un mensaje y un conjunto de botones. Se coloca el icono a la izquierda, el mensaje a su derecha y el conjunto de botones abajo del mensaje. Si es deseable un botn por defecto, debera ser la respuesta que causa la accin menos destructiva y que debera ser seleccionada cuando el usuario presiona ENTER. * Las cajas de error deben contener el icono standard de error del sistema y ser modales. El usuario debe escoger uno de los botones disponibles para continuar. * Una caja de error debe ir acompaada de un sonido beep. La secuencia de botones recomendada es: OK OK Help Continue Continue Help
Recomendaciones generales * Una caja de dilogo no debe tener mas de un botn por defecto. * El botn por defecto debe ser el menos destructivo. * El botn por defecto debe estar mas a la izquierda y en la esquina superior del conjunto de botones. * Siempre hacer que al desplegarse una caja de dilogo este completamente visible. Si es un problema tapar informacin ubicada atrs, hacer que la caja sea movible.
Pgina 51 de 106
+ Cuando se despliega una caja de dilogo, mostrar las configuraciones actuales de todos los controles de la caja de dilogo. + Una caja de dilogo debera abrirse prximo al control o condicin que ha causado el despliegue de dicho dilogo. Primero tratar de posicionar la caja de dilogo a la derecha del control. Si no hay suficiente espacio, entonces ubicar la caja de dilogo debajo del objeto. Si no pueden verse la totalidad de la caja de dilogo, centrar la caja de dilogo en la pantalla incluso si no deja claro el control que ha causado su despliegue. Botones de comando de Dilogo Standard Botn Yes Significado Respuesta afirmativa a una pregunta. Cuando se selecciona, la caja de di logo desaparece. Se usa cuando es la respuesta precisa y correcta a la pregunta. NO Respuesta negativa a una pregunta. Cuando se selecciona, la caja de dilogo desaparece. Se usa cuando es la respuesta precisa y correcta a la pregunta. OK Indica que el usuario ha ledo y entendido el mensaje o provoca cambios hechos en la caja de dilogo para ser aplicados en la aplicacin. Cuando se selecciona, desaparece la ventana. Done puede ser usada, si tiene mas sentido que un OK. Generalmente no se usa OK para responder una pregunta, sino YES y NO. Done Idem OK Apply Aplica los cambios hechos en la caja de dilogo, pero, a diferencia de OK, no desaparece la ventana. Action Realiza la accin implcita en el texto. Es el nico botn que realiza una accin y cierra la caja de dilogo. Undo Deshace los cambios hechos por Apply, OK, Done o Yes; no cierra la caja de dilogo. El botn cambia a Redo cuando es seleccionado. Retry Provoca que la accin en progreso se intente de nuevo. Cancel Cierra la caja de dilogo sin realizar los cambios del usuario. Si se usa con Apply, este no afecta los cambios ya aplicados. Options >> Se encuentra en aquellas cajas de dilogo que tienen caractersticas bsicas y otras mas avanzadas, especialmente en dilogos para completar comandos. La caja de dilogo se despliega con los botones bsicos y el botn de Options >>.
Cuando el usuario presiona este ultimo, la caja de dilogo incrementa de tamao y las opciones caractersticas avanzadas aparecen. Help
Despliega una ayuda sensitiva al contexto para la caja de dilogo y su contenido.
Menes Los menes son colecciones de comandos, atributos selectivos, separadores, y otros elementos que son selectivos. La mayora de las ventanas primarias tienen una barra de men que organiza una serie de menes pull-down. Los tems que aparecen en la barra de men no tienen ninguna accin asociada mas que la de desplegar el men pull-down. Los menes pulldown pueden tener menes secundarios asociados, llamados menes en cascada. Muchos menes pueden desprenderse del men pull-down en una barra de men y residir como una ventana en la pantalla; estos menes se llamas menes separables (tear-off mens).
Pgina 52 de 106
Tipos Hay una gran variedad de tipos de men. Sin embargo, para propsitos de diseo estndar solo se aceptan dos tipos: menes pull-down y en cascada. Men pull-down Los menes pull-down muestran un conjunto de comandos y atributos selectivos que estn relacionados al tem de la barra de men . Men en cascada Los menes en cascada contienen conjuntos de opciones que estn relacionadas con tems de men que generan su presentaci n.
Ejemplo de un men de Apple
Ejemplo de un men de Windows
Elementos requeridos Barra de Men Una barra de men es una coleccin de ttulos de men, organizada horizontalmente y ubicada en la parte superior de la ventana. * Ubicar la barra de men en la parte superior de la aplicacin justo debajo del rea de ttulo de la ventana. * Toda ventana primaria debe tener una barra de men con los menes necesarios. * Una barra de men debe extenderse en todo el ancho de la ventana primaria. * No usar mltiples filas en la barra de men cuando la aplicacin esta en estado standard. Ttulos de men Los ttulos de men son simples palabras descriptivas para reflejar la clase de comandos presentes en el men pull-down. * Si todos los tems en el men estn inhabilitados, entonces hay que inhabilitar el ttulo de men. Sin embargo, el usuario debe ser capaz de desplegar el men y ver los tems del men inhabilitados incluso si el men esta inhabilitado.
Pgina 53 de 106
tems de Men Los tems de men son comandos o atributos que el usuario tiene disponibles para controlar la aplicacin. * Los tems no disponibles no deben desaparecer sino inhabilitarse. * No deben agregarse o removerse tems de un men, a menos que el usuario solicite explcitamente la accin de agregar un remover un tem de la aplicacin. Excepciones: la etiqueta de un tem especfico puede permutar entre dos estados. Algunas plataformas permiten listas de los archivos mas recientes (MRU), el cual provee acceso rpido a los archivos recientemente usados, sin requerir que el usuario lo especifique a travs una caja de dilogo. El uso de MRU es aconsejable. * El men debe ser lo suficientemente ancho como para acomodar el tem de men mas largo as como sus los aceleradores, puntos suspensivos o indicadores de cascada. + Un tem de men no debe tener la misma etiqueta que el ttulo de men. Mnemnico Un mnemnico es un simple carcter subrayado en el ttulo del men o la etiqueta del tem de men. Los mnemnicos proveen un acceso rpido a los menes y los tems de men por medio del teclado. La mayora de las plataformas lo soporta. * Todo ttulo de men o tem de men debe tener un carcter mnemnico. * No enumerar los tems de men, excepto cuando el nmero de tems en el men pueden variar as como un men de ventana. El nmero entonces sirve como mnemnico. + Se prefiere como mnemnico el primer carcter de la etiqueta del tem de men. Si hay conflicto en la letra con otros mnem nicos del tem de men, el prximo carcter en la etiqueta deber usarse.
Ejemplo de un men de Windows. Cada grupo de men es agregado a la lista. Algunos tems se le ha dado n meros que se convierten en el mnemnico del tem de men. Puntos suspensivos Los puntos suspensivos (...) indican que se desplegara una caja de dilogo para completar el comando cuando se selecciona dicho tem de men. * Todo tem de men al que le sigue una caja de dilogo para completar el comando debe tener puntos suspensivos a continuaci n del tem. Indicador de cascada Un indicador de cascada comunica al usuario que un submen se desplegara cuando el tem es seleccionado. Esto es mostrado mediante una flecha apuntando a la derecha en la parte mas a la derecha del tem de men. Si el usuario selecciona el tem de men, el men en cascada aparece prximo al tem de men. * Todo men en cascada debe indicarse con un indicador de cascada.
Pgina 54 de 106
Separadores Los separadores son lneas en el men usadas para dividir los grupos de tems de men relacionados. Indicadores de desplazamiento Los indicadores de desplazamiento son flechas verticales apuntando hacia arriba o hacia abajo indicando al usuario que hay mas tems de men a ser visualizados si el usuario selecciona el indicador de desplazamiento. Si el usuario selecciona el indicador de desplazamiento, el men se desplaza en la direccin de la flecha. Marcadores de grupos de atributos Los marcadores de atributos mutuamente excluyentes se usan cuando el grupo de tems de men representa un grupo de atributos mutuamente excluyentes. Los marcadores de grupo de atributos no mutuamente excluyentes se usan cuando el grupo de tems de men representa un grupo de atributos no mutuamente excluyentes. Tipos de opciones Men Uno de muchos N de muchos de Apple Motif Windows
Elementos opcionales Aceleradores Los aceleradores proveen una forma de acceder a los elementos del men por medio del teclado sin desplegar el men. + El uso de teclas aceleradoras en aconsejable. * Las teclas aceleradoras deben aparecer a la derecha de un tem de men en una columna justificada a la izquierda. La columna de aceleradores debe comenzar en la posicin del primer tab luego del tem de men mas largo. * Los tems de men que tienen asociados menes en cascada no pueden tener aceleradores. + Se recomienda proveer un acelerador para los tems mas frecuentemente usados. Puede ser una tecla de funcin o una combinacin de teclas. Cuando dos o ms teclas deben ser presionadas al mismo tiempo, se usa el indicador de sistema standard (+ en Windows y Motif) para mostrar las mltiples teclas que deben ser presionadas. * Los nombres usados para las teclas aceleradoras deben coincidir exactamente con la forma en que estn escritos en el teclado. + Los aceleradores no deberan requerir que el usuario presione mas de tres teclas simultneamente. + Los aceleradores deberan tener valores asociados a los comandos. Por ejemplo, CTRL+F puede ser usado para el comando Find... Propiedades Habilitado / Inhabilitado Los comandos que estn disponibles al usuario estn habilitados. Comandos que no estn disponibles estn inhabilitados. Los comandos habilitados proveen
Pgina 55 de 106
realimentacin visual cuando el usuario mueve el cursor o en puntero sobre ellos; los comandos inhabilitados no proveen dicha realimentacin.
+ Los comandos deben estar habilitados (1) cuando son aplicados a objetos bajo el foco (por ejemplo el tem de men cut esta habilitado cuando un objeto es seleccionado) o (2) cuando son parte del entorno de una aplicacin (por ejemplo Open....). Los comandos deben inhabilitarse cuando no son aplicados a algn objeto o al entorno de la aplicacin. Navegacin, Menes Puntero del Mouse Seleccionar un tem de men disponible requiere que el usuario mueva el puntero a un tem de la barra del men y presione el botn el mouse. Esta accin despliega hacia abajo un men. Para seleccionar un tem, el usuario mueve el puntero hacia abajo en el men hasta el tem deseado y suelta el botn del mouse. El men desaparece sin ninguna accin si el usuario suelta el botn del mouse antes de mover el puntero hacia abajo en el men o moviendo el puntero fuera del men y soltando el botn del mouse. Excepcin: si el usuario mueve el cursor fuera de men el cual es un men separable y cuyos tems estn disponibles al usuario, el men se despliega en una paleta flotante. Algunas plataformas proveen una segunda forma de escoger un tem del men. Al cliquear en un tem de la barra de men, el men se despliega. El usuario selecciona un tem disponible moviendo el puntero hacia abajo en el men hasta el tem deseado y luego cliquea el botn del mouse. El men desaparece si el usuario cliquea el botn del mouse fuera del rea de men. Teclado Se puede desplegar un men presionando ALT y el mnemnico de un tem de la barra de men. Una vez desplegado el men las flechas de abajo y arriba en el teclado mueven el cursor en el men. Alternativamente, el usuario puede presionar una simple letra mnemnica de un tem de men que esta en el men desplegado. * Si el cursor esta al tope del men y el usuario presiona la fecha de arriba, el cursor debe posicionarse en el ultimo tem del men. Si el cursor esta en el ultimo tem del men y el usuario presiona la flecha de abajo, el cursor se posiciona en el primer tem del men. Otros controles Standard Cada administrador de ventanas provee un conjunto de controles que pueden ser usados en el rea de cliente de una aplicacin. Los principales controles son descriptos a continuacin.
Pgina 56 de 106
Botones de Comando Un botn de comando es usado para iniciar, interrumpir o terminar un proceso. Cuando un usuario cliquea un botn, no solo se realiza la operacin apropiada, si no que puede verse el efecto de ser presionado y luego liberado (realimentacin visual). La etiqueta debe ser simple, concisa y representativa de la operacin que realiza. Se puede usar la etiqueta para crear un mnemnico para acceso por un acceso mas directo al botn de comando. Un botn puede habilitarse o inhabilitarse dependiendo de la situaci n. En cada formulario, puede seleccionarse un botn de comando por defecto; esto es, siempre que el usuario presiona ENTER, el botn de comando es activado sin importar que control en el formulario tenga el foco. Tambin puede especificarse un botn de cancelacin por defecto, el cual se activa siempre que el usuario presiona la tecla ESC, sin importar que control en el formulario tenga el foco. Un botn de comando puede ser seleccionado usando tanto el mouse como el teclado de las siguientes formas: usando el mouse para cliquear el botn; moviendo el foco al botn presionando la tecla TAB, y luego eligiendo el botn presionando la barra espaciadora o ENTER.; presionando la tecla de acceso (ALT + la letra subrayada) para el botn de comando; si el botn de comando es un botn de comando por defecto en el formulario, presionando ENTER se selecciona el botn, incluso cuando el foco se encuentra en otro control; si el comando es un botn de cancelacin por defecto en el formulario, presionado ESC se selecciona el botn, incluso cuando el foco se encuentra en otro control. Marco Los marcos son usados para la identificacin grupal de otros controles. Por ejemplo, se puede usar un marco para dividir una ventana funcionalmente, separando grupos de botones de radio. En la mayora de los casos, se usa un marco pasivamente para agrupar otros controles y no necesita responder a eventos. Cuando se usa un marco para agrupar controles, primero se dibuja el marco y luego se agregan los controles. Esto permite mover el grupo de controles, con solo mover el marco. Botones de radio Los botones de radio son presentados en grupo que permiten configurar atributos que son mutuamente excluyentes, o lo que es lo mismo, solo uno de ellos puede ser seleccionado. Si uno de los botones de radio es seleccionado, todos los otros en el grupo son automticamente liberados. Todos los botones que se adhieren a un formulario se convierten en un grupo. Para agregar grupos opcionales, es necesario ubicarlos dentro de un marco o una caja de cuadro de controles. Un botn de opcin puede ser seleccionado de muchas maneras: cliqueando con el mouse, usando la tecla TAB para dar el foco al control, usando la tecla TAB para seleccionar un grupo de botones de opciones y luego usando las teclas de direcciones para seleccionar uno del grupo, creando una tecla de atajo en la etiqueta del botn, o poniendo su valor en verdadero. El valor indica si el botn esta seleccionado. Cuando se selecciona su valor cambia a verdadero.
Para hacer un botn de opcin por defecto, en tiempo de diseo debe ponerse el valor en verdadero. Un botn de radio tambin puede habilitarse o inhabilitarse.
Cajas de chequeo Las cajas de chequeo permiten configurar atributos no mutuamente excluyentes. Se usan para presentar al usuario una seleccin de Si/No o Verdadero/Falso. Tambin se usan en grupos para desplegar opciones mltiples que el usuario de las cuales puede seleccionar una o ms de una. La caja de chequeo es similar al botn de radio por ser ambos usados para indicar una seleccin hecha por el usuario. La diferencia es que solo un botn de radio en un grupo puede ser seleccionado en un momento dado. En un grupo de cajas de chequeo, sin embargo, cualquier nmero de cajas pueden ser seleccionadas.
Etiqueta Las etiquetas son usadas para desplegar texto y no pueden ser editadas por el usuario. Son usadas para identificar objetos, permitiendo una descripcin de lo que el control har si es activado. Pueden desplegar informacin en respuesta a un evento o proceso. Las etiquetas son usadas en muchas instancias y para diferentes propsitos. Comnmente se las usa para etiquetar controles que no tienen etiqueta propia (por ejemplo las cajas de texto, cajas de lista). Tambin son usadas para agregar texto descriptivo a una ventana (por ejemplo informacin de ayuda al usuario). Como una etiqueta no recibe el foco, puede crearse una tecla de acceso para el control que describe. Cajas de texto Las cajas de texto permite ver informacin introducida por el usuario. En general las cajas de texto son editables pero pueden configurarse de solo lectura. Una caja de texto puede permitir desplegar mltiples lneas, adaptar el texto al tamao del control o agregar un formato bsico. Si el texto excede los limites del control, se puede permitir que automticamente el texto sea desplegado en mltiples lneas y pueda ser recorridos por medio de barras de desplazamiento vertical, horizontal o ambas. Tambin es usada la caja de texto como caja de contrasea, la cual permite que el usuario introduzca su contrasea mientras se despliega un carcter determinado, comnmente asteriscos. Una caja de texto comnmente va acompaada de una etiqueta descriptiva de texto que debe introducirse.
Pgina 58 de 106
Cajas de lista Las cajas de lista contienen un conjunto de tems de los cuales el usuario puede seleccionar o navegar a travs de ellos. Las cajas de lista pueden soportar tanto seleccin mutuamente excluyente como no mutuamente excluyente. Por defecto, las opciones se despliegan verticalmente, pero puede optarse por columnas mltiples. Si el nmero de tems excede lo que la caja de lista puede desplegar, las barras de desplazamiento automticamente aparecen en el control. Una prctica recomendada es agregar un botn de comando para usar con la caja de lista, especialmente cuando aparece como parte de una caja de dilogo. Luego, el evento click sobre el botn har uso de la seleccin hecha en la caja de lista y realizara la accin apropiada. El doble click sobre el tem de la lista debera tener el mismo efecto que seleccionar el tem y luego cliquear el botn de comando. Esto provee al usuario un atajo. Una caja de lista es til cuando se limita la entrada a lo que hay en la lista.
Hay tres variaciones de listas: cajas combinadas, listas drop-down y cajas combinadas drop-down. Cajas combinadas Las cajas combinadas, como su nombre lo indica, combina las funciones de caja de lista y caja de texto. El usuario puede seleccionar un tem tanto tipeando el texto dentro de la caja texto ubicada en la parte superior del control o seleccionando un tem de la lista. Si no se pueden desplegar todos los tems, automticamente se agrega una barra de desplazamiento vertical. Su uso es apropiado cuando hay una lista de opciones de sugerencia pero el usuario tiene la opcin de ingresar un tem no existente en la lista. Cajas de lista Drop-Down Las Cajas de lista Drop-Down es como una lista comn - despliega una lista de tems a partir de la cual el usuario debe seleccionar. Se diferencia de una caja de lista debido a que la lista no se despliega hasta que se cliquea la flecha ubicada a la derecha del control. El usuario no puede introducir texto, solo puede seleccionar un tem de la lista. Por lo tanto se usa cuando hay poco espacio y el usuario tiene limita la entrada a lo que hay en la lista.
Pgina 59 de 106
Cajas combinada Drop-Down Las Cajas combinadas Drop-Down es como lista drop-down a la que se le agrega una caja de texto. El usuario puede introducir texto directamente o cliquear la flecha a la derecha del control para desplegar la lista de opciones. La seleccin de un tem lo inserta dentro de caja de texto ubicada en la parte superior del control. El usuario tambin puede abrir la lista presionando ALT+DOWN ARROW cuando el control tiene el foco. Men Pop-Up Un men pop-up es un men flotante que puede ser desplegado en una ventana, independientemente de la barra de men . Cuando los tems desplegados dependen de donde el puntero es localizado cuando se presiona el botn derecho del mouse, son tambin llamados menes de contexto. Cualquier men que tiene al menos un tem puede ser desplegado como un men pop-up. Es frecuente usar un men pop-up para acceder a opciones que no estn disponibles en la barra de men. Un men pop-up contiene conjuntos de opciones mutuamente excluyentes o no mutuamente excluyentes. Por ejemplo, una paleta de colores es un conjunto de opciones que puede ser contenido en un men pop-up. + A menos que haya una buena razn para usar menes pop-up para comandos, estos deben restringirse para presentar conjuntos de opciones.
Slider Un Slider es un control grfico que permite al usuario configurar un valor en un rango de valores posibles moviendo grficamente un brazo del slider.
5.3. Navegacin y Seleccin

Las formas principales en que una interface de usuario interacta con una aplicacin son un dispositivo apuntador, comnmente un mouse, y el teclado. El mouse controla un cursor en de pantalla usado para seleccionar objetos y fijar la localizacin de otros cursores, tal como el cursor de un editor de texto. El teclado usa para la navegacin las teclas de TAB, ALT, CTRL, SHIFT y de COMMAND que permiten ubicar el foco, hacer selecciones y ejecutar comandos. Navegacin con cursor Los cursores permiten mostrar la localizacin de la operacin (cursor de localizacin) y para seleccionar ciertos controles en la pantalla (cursor de posicin). El cursor de localizacin comnmente es I en aplicaciones de procesamiento de texto y
Pgina 60 de 106
de entrada de datos. El cursor de posicin es a menudo la flecha apuntado a la izquierda, usado para seleccionar menes, cliquear botones, redimensionar ventanas, posicionar el cursor de localizacin. El cursor indica la posicin de la operacin del usuario y en modo del sistema en la pantalla. + A menos que sea necesario, no crear formas de cursores especiales. Usar las formas de cursores provistas. + Una aplicacin debera usar tantas formas de cursores como sean necesarias para mantener al usuario completamente informado acerca de la localizacin del cursor, el modo actual, la actividad actual; demasiadas formas innecesarias confunden al usuario. Foco El foco es el control en la ventana que ser afectado por la entrada. Con el mouse, el foco es movido cuando el mouse es cliqueado sobre el control. Para el teclado, el foco es movido al prximo tem en el orden de tab cuando el usuario presiona TAB o cuando el usuario presiona ALT+ MNEMONIC para acceder a un control rndom. + El orden del TAB generalmente es desde el extremo izquierdo superior al extremo derecho inferior. + El control que recibe el foco debe dar al usuario realimentaci n de acuerdo a su tipo. Seleccin Varios controles permiten al usuario seleccionar tanto un simple tem o un grupo de tems. Por ejemplo, una caja de lista puede soportar que el usuario seleccione un tem, mltiples tems continuos o mltiples tems discontinuos. * No usar mtodos de seleccin no estndar a la plataforma usada. + Se debera permitir al usuario seleccionar desde el teclado en forma adicional al mouse. Otra prueba que se debe hacer a una aplicacin es desconectar el mouse y ver si la aplicacin entera es razonablemente til sin el mouse. Si no es as, mejorar las reas donde sea necesario. Seleccin Simple Solo un objeto es seleccionado en cualquier momento. Por ejemplo, el objeto que se esta apuntando o en el que el cursor esta posicionado se convierte en el objeto seleccionado. Los objetos previamente seleccionados son liberados. Es similar a uno de muchas opciones. Seleccin Mltiple El usuario puede seleccionar cualquier nmero de objetos en cualquier momento. Por ejemplo, el usuario presiona el botn del mouse y arrastrar el puntero sobre un conjunto de objetos. Todos los objetos se seleccionan. El usuario puede extender la selecci n, tpicamente presionando SHIFT o CTRL y luego seleccionando otro tem o rango. + El uso de seleccin mltiple continua y discontinua es aconsejable. Es similar a n de muchas opciones.
Pgina 61 de 106
5.4. Organizacin de la Interface

La organizacin de la interface no solo influye en la apariencia esttica, tambin tiene un impacto tremendo en la utilidad de la aplicacin. La organizacin incluye factores como la consistencia entre los elementos, simplicidad del diseo, uso de espacios libres, la ubicacin y agrupamiento de los controles, indicios o pistas, uso del color, letras, sonido, e imgenes e iconos. Consistencia entre los elementos de interface La consistencia es una virtud del diseo de interface de usuario. Un aspecto y sensacin de consistencia crea una aplicacin armoniosa - todo elemento parece estar conectado al resto. La falta de consistencia en la interface puede ser confuso, y darle un aspecto catico, desorganizado e incluso causar que el usuario dude de la confidencialidad o calidad de la aplicaci n. Para una consistencia visual, establecer una estrategia de diseo y convenciones de estilo antes de empezar el desarrollo. Los elementos de diseo tales como tipos de controles, estndares de tamao y agrupacin de los controles y la eleccin de letras deberan ser establecidos anticipadamente. Se pueden crear prototipos de posibles diseos que ayuden a tomar decisiones de diseo. La gran variedad de controles disponibles hacen que uno se tiente a usar a todos. Evitar esa tentacin; elegir un subconjunto que mejor se ajusten a la aplicacin particular a desarrollar. Mientras que para presentar listas de informacin, uno puede optar por una caja de lista, una caja combinada o una grida debe elegirse el estilo mas simple posible. Tambin, hay que tratar de usar los controles apropiadamente; mientras que una caja de control puede ser usada para solo lectura y desplegar texto, una etiqueta es mas apropiada para dicho propsito. Mantener consistencia en las propiedades de los controles - si se usa el blanco y negro para editar texto en un lugar, no usar gris en otro a menos que haya una buena razn. Consistencia entre diferentes ventanas en la aplicacin es importante para la utilidad. Si se usa un fondo gris y efecto tridimensional en una ventana y fondo blanco en otra, las ventanas parecern no relacionadas. Mantener simple la interface Quizs, uno de los principios ms importantes del diseo de una interface es la simplicidad. Cuando se entra en una aplicacin, si las interfaces lucen dificultosas, y probablemente lo sean. Un poco de presentimiento puede ayudar a crear una simple interface cuya apariencia haga que sea simple de usar. Tambin, desde un punto de vista esttico, un diseo claro y simple es siempre preferible. Un error comn en los diseos de interface es reproducir los objetos de la vida real. Por ejemplo, sea la creacin de una aplicacin para completar formularios de seguros. Una reaccin natural seria disear una interface que exactamente duplique el formulario de papel en la pantalla. Esto crea serios problemas: la forma y dimensiones del formulario en papel son muy diferentes a los de la pantalla. La reproduccin exacta limita el uso de cajas de texto y de seleccin y no hay real beneficio para el usuario. Es mucho mejor disear una interface propia, quizs proveyendo una impresin duplicada del formulario original. La creacin de agrupaciones lgicas de campos a partir del formulario original o usando una interface con muchos enlaces de formularios puede presentar toda la informacin sin requerir tener que desplazarse en el mismo. Se
Pgina 62 de 106
pude usar controles adicionales como cajas de listas que reducen la cantidad de informacin que el usuario debe introducir. Tambin se pueden simplificar muchas aplicaciones removiendo las funciones no usadas frecuentemente de ventanas de los propios usuarios. Proveer operaciones por defecto puede simplificar la aplicacin.; si nueve de diez usuarios eligen un texto en negrita, hacer el texto en negrita por defecto antes que forzar al usuario a elegirlo cada vez. La mejor prueba de la simplicidad es observar la aplicacin en uso. Si un usuario no puede inmediatamente realizar una tarea sin asistencia, un rediseo debe hacerse. Uso de Espacio en blanco El uso de espacio en blanco en la aplicacin puede ayudar a enfatizar los elementos y a mejorar la utilidad. El Espacio en blanco es definido como el nmero de localizaciones en la pantalla que no contiene ni caracteres ni grficos. Se refiere a espacio en blanco entre y alrededor de los controles de una ventana. Muchos elementos en una ventana pueden desordenar la interface, hacer que sea difcil la bsqueda de un campo o control individual. Es necesario incorporar espacio en blanco al diseo para enfatizar los elementos de diseo. Un espaciado consistente entre los elementos y alineaciones verticales y horizontales de los elementos pueden hacer que el diseo sea mas til. As como el texto de una revista es organizado ordenadamente en columnas con espaciado entre lneas, una interface ordenada hace que sea ms fcil de leer. Ubicacin y Agrupamiento de los elementos de interface En la mayora de los diseos de interfaces, no todos los elementos tienen la misma importancia. Un diseo cuidadoso es necesario para asegurar que los elementos ms importantes realmente lo aparenten para el usuario. Los elementos ms importantes o ms frecuentemente accedidos deberan tener una posicin importante o significativa; los elementos menos importantes deberan ubicarse en las posiciones menos llamativas o significativas. En la mayora de los lenguajes, se nos ha enseado a leer un pagina de izquierda a derecha y de arriba hacia abajo. Lo mismo se mantiene para una pantalla de computadora - la mayora de los usuarios posiciona su mira en la esquina izquierda superior de la pantalla al desplegarse por primera vez. Por lo tanto, los elementos ms importantes deben ubicarse all. Por ejemplo, en pantalla de informacin de un cliente, el nombre debera desplegarse donde primero ser visto. Los botones como OK o NEXT, deberan ubicarse en esquina derecha inferior de la pantalla; el usuario normalmente no acceder a ellos hasta que haya finalizado de trabajar con la ventana. El agrupamiento de elementos es tambin importante. Hay que tratar de agrupar la informacin lgicamente de acuerdo a su funcin o relacin. Debido a que las funciones de los botones para navegar una base de datos estn relacionadas deberan agruparse visualmente mas que estar esparcidos por toda la ventana. Lo mismo es aplicado a la informacin; los campos para el nombre y direccin son generalmente agrupados al estar estrechamente relacionados. En muchos casos, se usan controles de marcos para ayudar a reforzar la relacin entre los controles. Indicios o pistas Los indicios son claves de la funci n de un objeto. A pesar de que el trmino puede no ser familiar, ejemplos de pistas se encuentran en todo lo que le rodea a uno. El
Pgina 63 de 106
manubrio de una bicicleta tiene depresiones donde apoyar los dedos, es un indicio que hace obvio su creacin para ser agarrado. Los botones para presionar, los botones con sobre relieve o aquellos que tienes llaves de iluminacin son todos indicios - con solo mirarlos se puede discernir sus propsitos. Tambin el usuario hace uso de indicios. Por ejemplo, el efecto tridimensional usado para los botones de comando hacen que luzcan que son creados para ser presionados. Si uno diseara un botn de comando con un borde plano, se perdera el indicio y no seria claro para el usuario que es un botn de comando. Hay casos donde los botones planos pueden ser apropiados, tal como en un juego o aplicaciones multimedia; esto esta bien siempre y cuando se mantenga en toda la aplicacin. Uso del color El color en una interface puede agregar atraccin visual, pero es fcil abusar de el. Con muchas pantallas que pueden desplegar millones de colores, es una tentacin usarlos a todos. Los colores, como otros principios bsicos de diseo pueden ser problemticos si no se considera cuidadosamente en el inicio del diseo. Las preferencias a los colores varan ampliamente; el gusto del usuario no puede ser el mismo que el de uno mismo. Los colores pueden evocar emociones, y si se esta diseando para una audiencia internacional, algunos colores tienen significado cultural. Lo mejor es ser conservativo, usando colores suaves y mas neutrales. Por supuesto, la opcin de los colores puede tambin estar influenciada por las intenciones de la audiencia y el tono o el modo que se trata de transmitir. Pequeas cantidades de colores brillantes en las reas importantes pueden efectivamente enfatizar u obtener atencin. Como regla, se debera limitar el nmero de colores en la aplicacin y el esquema de colores debe permanecer consistente. Lo mejor a restringirse a la paleta de los 16 colores standard. Otra consideracin es la ceguedad al color. Muchas personas no incapaces de distinguir entre diferentes combinaciones de colores primarias tal como el rojo y le verde. Para alguien en estas condiciones, texto rojo con fondo verde seria invisible. Usos Standard de Colores El uso de colores agrega significado; mientras que los colores hacen a la esttica de la interface, esto es secundario. Usar colores para: discriminar entre diferentes reas mostrar elementos de la pantalla que estn funcionalmente relacionados mostrar relaciones entre los elementos de la pantalla identificar caractersticas cruciales. Principios generales de Diseo + Disear aplicaciones en blanco y negro; solo cuando la aplicacin esta terminada debera agregarse colores. Nota: Muchos usuarios no tienen monitores de color, 8% de la poblacin es deficiente en colores, y bajo escasa iluminacin los colores pueden ser difcilmente distinguidos por los ojos. + Se sugiere que los colores sean usados solo para suplementar otras tcnicas de iluminacin. Siempre debera haber letras, formas, localizaciones, o modelos que permitan distinguir los elementos de la pantalla en forma adicional a los colores. Demasiados colores pueden hacer que algo luzca ms complejo, en vez de simplificar su uso. Los estudios acerca de los usuarios indican que los usuarios solo pueden
Pgina 64 de 106
efectivamente seguir cuatro colores en la pantalla al mismo tiempo, y no mas de siete colores sobre la aplicacin total. + Permitir a los usuarios cambiar los colores y los cdigos de los colores usados por defecto. + Notar que el significado del color depende de la tarea. El color azul no significa lo mismo en una aplicacin medica que en una de mapas. Conocer el significado de los colores en el dominio en que la aplicacin se lleva a cabo. La siguiente tabla muestra los colores recomendados para ciertos objetos de interface y los colores usados para ciertos tipos de cdigo: Objeto Color recomendado Fondo Gris claro o blanco Texto Negro Bordes Negro Controles Negro Puntero Negro con borde blanco Colores recomendados para los objetos de interface Color Rojo y naranja Azul y verde Celeste Significado Usado para Atrae la atencin del usuario Alto, error, falla Adelante, Comunica al usuario una operaci n normal o que el listo proceso esta terminado y listo para la acci n. Hace pasar algo disimuladamente, como una grida de lneas. Colores recomendados para ciertas acciones Eligiendo las letras Las letras tambin son importantes como parte de la interface de usuario, porque a menudo comunican la informacin importante al usuario. Se necesita seleccionar letras que sern fcilmente legibles a diferentes resoluciones y en diferentes tipos de pantallas. Lo mejor es elegir letras tan fciles como sans serif o serif fonts como sea posible. Las letras script y otras decorativas lucen mejor en la impresin que en la pantalla y puede ser difcil leer con puntos de tamao pequeo. A menos que se planee en distribuir las letras con la aplicacin, se debera trabajar con letras standard con la plataforma en uso (en Windows: Arial, New Times Roman, o System). Si el sistema del usuario no incluye una letra especfica, el sistema har una substitucin, resultando una apariencia totalmente diferente que lo que se pretenda. Si se esta diseando para una audiencia internacional, se necesitara investigar que letras estn disponibles en los lenguajes involucrados. Incluso, se necesitara considerar la expansin de texto cuando el diseo para otras lenguas - las cadenas de texto pueden levar mas del 50% de expansin en algunos lenguajes. Nuevamente la consistencia es importante en la selecci n de las letras. En la mayora de los casos, en una aplicaci n no se debera usar mas de dos tipos de letras a dos o tres tamaos de punto diferentes.
Pgina 65 de 106
Uso del sonido Usar sonido para: asegurar al usuario acerca del estado de la computadora o la aplicacin alertar al usuario cuando algo inesperado ocurre notificar al usuario cuando la atencin inmediata es requerida Principios generales de diseo * Las cajas de dilogo de advertencia y de error deben ir acompaadas de sonido * Usar el sonido consistentemente. Si una seal es usada para cierta actividad o condicin de error, no usar dicho tono para otras situaciones. * No usar mas de dos notas en una alerta dada; evitar usar una meloda o sonido metlico. + Siempre permitir al usuario que grade el volumen o saque el sonido. + Ser cuidadoso de usar el sonido en demasa o el sonido ser ignorado o molesto. + Hacer que el sonido sea efectivo pero sutil. Siempre probar los sonidos con usuarios por extensos periodos y no en forma casual. + Se puede usar tanto como seis diferentes tones en una simple aplicacin, pero hacerlos significativamente diferentes para que el usuario pueda distinguirlos. + Las frecuencias de seal deberan estar entre 500 y 1000 hz. > Recordar que las computadoras son usadas en grupos; el sonido afecta a los otros usuarios mas que al que esta usando la aplicacin. Evitar el uso de sonidos fuertes. Uso de Imgenes e Iconos El uso de imgenes e iconos puede agregar inters a la aplicacin, pero nuevamente, ser cuidados con el diseo es esencial. Las imgenes pueden trasmitir informacin compacta sin necesidad de texto, pero las imgenes a veces se perciben diferentemente por diferentes personas. Las barras de herramientas con iconos para presentar varias funciones de dispositivo de interface muy til, pero el usuario puede no identificar realmente la funcin representada por un icono, incluso pueden ser contraproducente. Para el diseo de barras de herramientas de iconos, mirar otras aplicaciones para ver que estndares ya estn establecidos. Por ejemplo, muchas aplicaciones usan hoja de papel con una esquina superior doblada para indicar un nuevo archivo. Podra haber una mejor metfora para dicha funci n, pero la representacin diferente puede confundir al usuario. Es tambin importante considerar el significado cultural de las imgenes. Muchos programas usan la imagen de un caja de correspondencia de estilo rural con una bandera para representar funciones de correo. Este es principalmente un icono Americano; los usuarios en otros pases o culturas probablemente no lo reconocern como un caja de correspondencia. En el diseo de iconos e imgenes propias, tratar de mantenerlos simples. Imgenes complejas con muchos colores no son agradables cuando se despliegan en una barra de herramientas de iconos de 16 x 16 pixeles o cuando se despliega en pantallas de alta resolucin.
Pgina 66 de 106
Unidad 6: Gua para obtener la entrada del usuario

6.1. Seleccin a partir de un conjunto
6.1.1. Una de Muchas Opciones Muchas veces la aplicacin restringe al usuario a elegir un tem de un grupo de tems posibles. Hay uno de muchos grupos o grupos opcionales mutuamente excluyentes. Por ejemplo, en una aplicacin de dibujo el usuario puede tener una variedad de herramientas con que dibujar - un pincel, un lpiz, o una envase de spray. A pesar que todos ellos estn disponibles, el usuario puede usar solo una herramienta por vez. Otros ejemplos incluyen una lista de letras en un procesador de palabras, o el seteo del nivel de sonido. Una clase especial de opciones mutuamente excluyentes es la opcin binaria. Por ejemplo, el interruptor de una impresora puede estar activa o no. La eleccin de la interface correcta para grupos de opciones mutuamente excluyentes dependen de los siguientes criterios: frecuencia de uso nmero de tems en el grupo espacio disponible en la pantalla frecuencia en que los tems son agregados o borrados del grupo naturaleza de los atributos (por ejemplo: discretos o continuos) Cuando se usa opciones mutuamente excluyentes, lo que m s se debe tener en cuenta es el nmero de veces que el grupo de opciones mutuamente excluyentes es usado. Por ejemplo, si el usuario frecuentemente cambia los valores de los atributos, no usar caja de dilogo porque sera muy trabajoso. Sera mejor en este caso usar un men pulldown o un panel de iconos desplegado continuamente.
Pgina 67 de 106
La siguiente tabla presenta las condiciones para la seleccin de una forma de interface apropiada para opciones mutuamente excluyentes: Si los tems mutuamente exclusivos son... Atributos o valores que Son seleccionados frecuentemente Son un nmero limitado (2-8) Son mejor representados verbalmente Raramente cambian Atributos o valores que No son seleccionados frecuentemente Son un nmero limitado (2-8) No cambian frecuentemente Requieren poco espacio de pantalla Atributos, valores u objetos que No son seleccionados frecuentemente Son potencialmente grande en nmero Son mejor representados verbalmente Cambian frecuentemente Atributos, valores u objetos que No son seleccionado frecuentemente Son relativamente pocos en nmero (8 o menos) Tienen suficiente espacio de pantalla disponible No cambian Comandos que Son Seleccionados frecuentemente Tienen solo dos condiciones Comandos que No son seleccionados frecuentemente Tienen solo dos condiciones Atributos que Son seleccionados muy frecuentes Son limitados en nmero Son mejor representados grficamente Son discretos por naturaleza Cambian muy raramente Atributos o valores que Son mejor representados grficamente, donde otras formas no son aplicables. Formas de Interface Atributos en tems de men Los atributos en tems de men son atributos o valores, no comandos, que estn localizados en un men pull-down. El usuario elige un tem, seleccionando el men pull-down y moviendo el puntero al tem deseado y seleccionndolo. La marca de seleccin se borra eligiendo otro tem o volviendo a elegir el mismo tem. Uso apropiado + Usar un atributo de men cuando: Entonces usar las siguientes formas... Atributos en tems de men
Men pop-up Lista drop-down
Listas de seleccin simple
Botones de radio
tems de men permutables Botones de comandos permutables
Iconos, listas de iconos o paletas de iconos Controles grficos especializados
Pgina 68 de 106
Las opciones deben ser accedidas frecuentemente El nmero de opciones en el grupo es pequeo Los tems en el grupo raramente cambian Comentario: Mientras que un ptimo diseo de men para cualquier aplicacin depende de la tarea, investigaciones en el diseo de menes indican que el nmero ptimo de tems por grupo de men (Un grupo es cualquier grupo de tems. Un grupo en un men pull-down es cualquier cosa entre dos separadores o la lista total si no hay separadores en el men pull-down) es entre cuatro y ocho. Por otra parte, hay otra consideracin prctica: a medida que el nmero de tems del men aumenta, el men se alarga. Se sugiere limitar el tamao del men para que pueda ser desplegado completamente sin movimiento en sentido vertical . El smbolo usado para marcar la seleccin en el men difiere a travs de las plataformas. La figura muestra un ejemplo de atributos de men para configurar la letra. En este caso, la letra Athens es la seleccionada.
Variaciones Una variacin del men de atributos es poner las opciones de atributos en un men en cascada. Por ejemplo, muchos editores de texto usan el ttulo de men Text, dentro del cual se listan Font, Size, y Style en tres tems de men, cada uno con un men en cascada. En general, el uso de menes en cascada para opciones mutuamente excluyentes es aceptable con las siguientes tres advertencias. Primero, no usar debajo de un nivel de men en cascada; es difcil para que el usuario siga los pasos de todos las configuraciones o deshacer una configuracin errnea. Segundo, los tems de men en cascada deben ser atributos; no se deben poner comandos en un men en cascada. Tercero, analizar el uso de menes en cascada solo cuando tiene sentido usar un men pull-down, y la barra de men est muy llena como para otras entradas. Uso incorrecto * Los atributos en tems de men no deben usarse como comandos. Si el usuario frecuentemente acceder a un conjunto de opciones, considerar usar una paleta en vez de atributos de men. Men pop-up Los menes pop-up y las listas drop-down permiten al usuario seleccionar una de varias opciones. (En Windows, el trmino pop-up se refiere a menes flotantes). La figura muestra un men pop-up en una interface de usuario Macintosh; los menes popup lucen diferentes a otros objetos - botones y cajas de lista - porque tienen una sombra detrs y el cursor no cambia cuando el mouse se posiciona en el. Cuando se selecciona la caja, una lista de tems aparece y el usuario puede seleccionar moviendo el mouse a la opcin apropiada. El tem actualmente seleccionado tiene un diamante.
Pgina 69 de 106
La figura muestra un ejemplo de una lista drop-down. Cuando el usuario desea realizar una seleccin, cliquea la flecha asociada, las opciones de despliegan y el usuario selecciona el tem apropiado.
Uso apropiado + Usar los menes pop-up y las listas drop-down cuando: Los atributos y los valores en el men son raramente seleccionados Hay solo un nmero limitado de opciones disponibles El espacio en la pantalla es limitado + Los objetos en el grupo deberan cambiar raramente. > Si cambian frecuentemente, considerar una lista deslizable en su lugar. Uso Incorrecto * Usar menes pop-up y listas drop-down para conjuntos de atributos y valores; no deben contener comandos. * No usar menes pop-up cuando el nmero de opciones es potencialmente mayor a 15, usar una lista deslizable en su lugar. Listas Las listas proveen al usuario de grupos de atributos u objetos para elegir. El usuario ve la lista, encuentra el objeto de su inters (la mayora de las listas tienen barras de desplazamiento) y luego cliquea en l para seleccionarlo. Una vez seleccionado el objeto o atributo, la aplicacin puede habilitar otros comandos u opciones de atributos. Uso apropiado Usar listas para configurar atributos o elegir objetos cuando: Los tems no son seleccionados frecuentemente El conjunto de tems en grande Las opciones pueden cambiar frecuentemente La figura muestra una lista de la cual el usuario puede seleccionar un tem. Note que las barras de desplazamiento deben aparecer (incluso inhabilitadas) a pesar de que la lista no puede deslizarse. + Usar listas en cajas de dilogo donde el usuario debe seleccionar un archivo o un estilo predefinido.
Pgina 70 de 106
Variacin Una variacin en la lista en un botn giratorio (spin box) , el cual tiene una caja de texto y dos flechas que permite al usuario desplegar en secuencia una lista de opciones mutuamente excluyentes. + Este botn debera usarse solo para conjuntos de valores discretos altamente predecibles ( meses, das de la semana). Uso incorrecto Una caja de lista es lo suficientemente flexible para manejar la mayora de las clases de opciones mutuamente excluyentes. Sin embargo, requiere mas trabajo por parte del usuario comparado con otras clases de controles mutuamente excluyentes. Por lo tanto, la posibilidad de usar una caja de lista no significa que sea lo ideal. Consecuentemente, evitar el uso de una caja de lista si otro control es ms apropiado. Botones de radio Los botones de radio son probablemente la forma ms comn de presentar opciones mutuamente excluyentes al usuario. El usuario realiza una selecci n cliqueando el botn de uno de los tems en el grupo de botones de radio; seleccionando un tem libera el tem previamente seleccionado. Uso Apropiado * Las etiquetas en los botones no deben cambiar. + Usar los botones de radio para conjuntos de atributos o valores cuando: Hay ocho o menos opciones Hay suficiente espacio en la pantalla El usuario no necesita cambiar las configuraciones frecuentemente + Poner los botones de radio dentro de una caja de grupo para una separaci n visual, tal como indica la figura.
Los botones de radio proveen una clara y eficiente manera de configurar los atributos y valores especialmente cuando son discretos y pocos en n mero. * Si no hay suficiente espacio en la pantalla, considerar un men pop-up o una caja de lista. Uso incorrecto * Los botones de radio no deben usarse para comandos; sin embargo, la seleccin de un botn de radio puede ser usado para activar otros controles.
Pgina 71 de 106
* Los botones de radio mantienen una relacin entre una grupo de tems y no pueden existir por s solos; esto es, siempre debera haber mas de un botn de radio en un grupo. + Cuando de organiza un grupo de botones de radio, asegurarse de que las etiquetas de las opciones sean claras y visualmente cohesivas. La siguiente figura es un ejemplo de un diseo pobre: no queda claro que botn controla que configuracin de frecuencia.
+ En general, es ms fcil para los ojos recorrer una lista de botones de radio de arriba hacia abajo que de izquierda a derecha. tems de Men Permutables Un tem de men permutable es un tem de men simple que puede ser usado para caracterizar dos comandos opuestos (por ejemplo comandos binarios). La figura muestra una ejemplo de cmo un tem de men permutable trabaja. Dependiendo de la condicin (si la grida esta desplegada o no) el tem de men cambia para reflejar el comando indicando la accin opuesta.
Uso apropiado + Usar tems de men permutables para dos y solo dos comandos opuestos que son accedidos frecuentemente. + Al ser comandos los tems de men permutables, deben empezar con verbos (no adjetivos) que sin ambigedad representan el resultado del comando. Variaciones Una alternativa es poner dos controles en el men que sean representados por dos tems de men, inhabilitando y habilitndolos. Esta opcin no se aconseja porque requiere de dos tems de men en lugar de uno y aumenta la complejidad visual. Sin embargo, si dos comandos no son exactamente opuestos, la opcin de dos tems podra ser motivo de claridad. Uso incorrecto La diferencia entre un comando y un atributo puede ser confusa. Algunos comandos tienen el efecto de configurar atributos. En la figura, el men de alineado puede ser usado para alinear objetos de la aplicacin a una grida o a otros objetos. Debido a que la alineacin esta configurada a izquierda todo objeto nuevo es alineado lo mas cercano posible a la marca izquierda de la grida. Esto puede intentarse implementar como comandos permutables para configurar los atributos izquierda y derecha o arriba y abajo. Sin embargo, seria difcil usarlos. En los tems de men permutable, el verbo del comando cambia (Hide y Show). Cuando se configura atributos, el comando no cambia (Align), pero si los adjetivos (left vs. right). As, un tem de men de atributo es mas apropiado para configurar dichos comandos como atributos.
Pgina 72 de 106
Botones de Comandos permutables Un botn de comando permutable es un botn simple que puede ser usado para comandos opuestos(por ejemplo comandos binarios). Los botones de comandos permutables son similares a los tems de men permutables excepto que se aplican en cajas de dilogos o ventanas secundarias. Uso apropiado + Usar un botn de comando permutable cuando el usuario necesita uno de dos comandos opuestos mientras configura opciones y elige objetos en una lista. Por ejemplo, el usuario selecciona un objeto en una lista y dependiendo del estado del objeto, el botn de comando realizara una accin apropiada. En un estado, la etiqueta del botn indica una accin, tal como Agregar. Al igual que un tem de men permutable, la etiqueta debe ser un verbo y no un adjetivo. En un determinado momento, si el usuario selecciona un tem de una lista, el cual esta en la barra de men, la etiqueta de Delete es usada. Si el tem no esta en el men, el usuario puede agregarlo, seleccionando el tem y presionando Add. Iconos, Listas de Iconos y Paletas de Iconos Las listas de iconos son conjuntos de iconos que son ubicados en listas muy parecidas a las listas de texto, a partir de las cuales el usuario puede seleccionar un simple icono. Las paletas de iconos son conjuntos de iconos fijos en la ventana, tambin llamadas paletas flotantes o barra de herramientas que contienen acciones o atributos. Las paletas flotantes estn casi siempre disponibles a travs del men de aplicacin y pueden ser separadas del men, lo cual se consigue moviendo el puntero del mouse fuera del men con el botn presionado; luego un marco del men aparece en el lugar en el cual se suelta el bot n. Tanto las listas como las paletas de iconos son una forma efectiva de proveer opciones al usuario. Uso Apropiado + Usar paletas de iconos bajo las siguientes condiciones: Los usuarios deben cambiar los atributos frecuentemente. Los iconos deberan representar objetos concretos no ambiguos del mundo real. Si los iconos no tienen un significado claro, considere no usarlos o agregarles alguna etiqueta que los clarifique. La mejor manera de saber si los iconos son claros y no ambiguos es probando con los usuarios
Pgina 73 de 106
Los iconos pueden representar atributos o configuraciones actuales del entorno de la aplicacin. El panel izquierdo muestra un panel de iconos usado en un programa de dibujo. Cada una de dichas herramientas deben ser accedidas frecuentemente y pueden ser razonablemente representadas como iconos. En el panel derecho, los iconos muestran como el texto es justificado. Variaciones Los iconos pueden ser representados como paletas fijas o flotantes. Se usa una paleta fija si los atributos en la paleta necesitan estar disponibles todo el tiempo. Se usa paleta flotante para selecciones que se necesitan intensamente en ciertos momentos y raramente en otros. Uso incorrecto El uso de iconos es aconsejable cuando los iconos transmiten exacta y claramente el significado de una accin o un atributo, especialmente si representan atributos que el usuario puede escoger del men. Sin embargo, no usar iconos cuando las palabras hacen mejor el trabajo que los iconos (cuando los iconos son confusos). En tales casos, un men pop-up (u otro objeto mutuamente excluyente) debera ser ms apropiado. Controles grficos especializados Los controles grficos especializados pueden ser la forma mas apropiada de configurar atributos que tienen valores continuos (por ejemplo nivel del volumen o barra de deslizamiento). Al ser cada grfico nico deberan ser controlados diferentemente, pero la idea bsica es que un grfico facilita al usuario la interpretacin de cmo trabaja. Uso Apropiado + Usar un control grfico cuando: El conjunto de valores posibles es continuo con un gran rango El atributo se presta para un manejo grfico > Cuando se disean estos grficos mantener en mente: El grfico debe representar un objeto concreto del mundo real en forma no ambigua. No debera usarse un control grfico especializado si es mas complicado que otro objeto de interface en la barra de herramienta. Mantener el grfico simple.
La figura muestra el uso de una barra deslizante para manipular el tama o de un objeto. La figura tambin muestra la buena prctica de poner un valor preciso (50 %) en forma adicional a la barra. De hecho, el usuario puede poner directamente un valor en el campo editable sin tener que usar la barra deslizante. Formas incorrectas Hay muchas formas incorrectas de presentar una de muchas" opciones. continuacin se listan los errores ms comunes.
Pgina 74 de 106
Cajas de chequeo Las cajas de chequeo deben ser usadas en grupos de opciones no mutuamente excluyentes. Frecuentemente son usadas para opciones binarias mutuamente excluyentes, pero dicha prctica no es aconsejable. Una caja de chequeo, aislada, no es fcilmente interpretada como un par de botones de radio, especialmente para novatos o usuarios casuales. En la figura, una caja de chequeo requiere que el usuario interprete el significado de ambos estados de la red; con botones de radios los estados estn explcitamente.
6.1.2. N de Muchas Opciones Cuando los tems no son mutuamente excluyentes, el usuario puede seleccionar muchas opciones dentro de un mismo grupo, y todos los tems de dicho grupo pueden ser activados o aplicados simultneamente a un objeto bajo el foco. La opcin de la forma de interface recomendada depende de: el nmero de veces que una opci n es seleccionada el nmero de tems en el grupo el espacio disponible en la pantalla la frecuencia en que los tems son agregados o borrados de la lista de opciones disponibles. El desarrollador debera poner mayor peso a la frecuencia de seleccin. La siguiente tabla presenta las condiciones para seleccionar la forma de interface apropiada para opciones no mutuamente excluyentes: Si los tems no son mutuamente excluyentes.... Entonces usar la siguiente forma... Atributos o valores que - son seleccionados frecuentemente - son pocos en nmero (2 a 8 opciones) Atributos en tems de men - son mejor representados verbalmente - cambian raramente Atributos, valores u objetos que - no son seleccionados frecuentemente - son potencialmente muchos en nmero Listas de seleccin mltiple - son mejor representados verbalmente - pueden cambiar frecuentemente Atributos, valores u objetos que - no son seleccionados frecuentemente - son relativamente pocos en nmero (8 o Cajas de chequeo menos) - tienen suficiente espacio disponible en pantalla - no cambian Formas de Interface Atributos en tems de Men Los atributos en tems de men se localizan en un men pull-down que proveen al usuario de un conjunto de tems de los cuales pueden seleccionar varios. Los tems son
Pgina 75 de 106
atributos mas que acciones o comandos. Cuando se seleccionan, se mantienen en el mismo estado; se liberan cuando de selecciona cada uno por segunda vez. Uso apropiado + Usar un atributo de men para visualizar grupos de opciones no mutuamente excluyentes cuando: las opciones necesitan ser frecuentemente accedidas el nmero de opciones en el grupo es pequeo cuando las opciones mismas no cambian frecuentemente.
La figura muestra un ejemplo de un men de atributo. Nota: de acuerdo al standard estricto, no debera haber interdependencia entre las configuraciones en un grupo de opciones no mutuamente excluyentes. Sin embargo, en la figura el texto no puede ser tanto condensado como extendido al mismo tiempo, por lo que la seleccin de uno quita la seleccin del otro. Mientras que tcnicamente es una violacin al standard, en la prctica no mutuamente excluyente significa que no todas las combinaciones son posibles. > Incluir una opcin que libera todas las otras opciones (Plain Text en la figura). Si el usuario desea inhabilitar globalmente todas las configuraciones, tiene sentido permitir al usuario hacerlo con una simple accin. En situaciones donde dicha lgica tiene sentido, se aconseja emplear dicha opcin y crear dependencias. Variaciones Los atributos de men no mutuamente exclusivos pueden implementarse en menes en cascada, si el espacio del men es un factor limitante. Uso incorrecto Los atributos en tems de men no deberan usarse como comandos. Listas de Seleccin Mltiple Las listas de seleccin mltiple presentan al usuario un conjunto de atributos u objetos desde el cual seleccionar. Una vez seleccionados los tems, la aplicacin d al usuario una variedad de comandos y/o atributos opcionales que pueden aplicarse a los tems en la lista. Uso Apropiado + Usar las cajas de lista de seleccin mltiple para opciones no mutuamente excluyentes cuando: hay un gran nmero de tems disponibles al usuario
Pgina 76 de 106
necesidad de acceso no frecuente al grupo; desde el punto de vista del usuario, las cajas de listas pueden se incmodos pocas veces se las utiliza. + Las listas son una buena opcin si el usuario puede editar las etiquetas de tems que se muestran en la lista de desplazamiento vertical, o agregar o borrar tems. La mayora de las veces las cajas de lista son usadas para selecciones mutuamente excluyentes que involucran objetos. En la figura estn seleccionados diferentes tems a instalar dentro de la aplicacin
Uso incorrecto Notar que una lista solo se usa para seleccionar tems. No se usa para mostrar al usuario el estado de un grupo de configuraciones. Las cajas de chequeo y los atributos en tems de men no solo permiten la configuracin; tambin permiten al usuario ver su estado. Las cajas de lista no lo hacen. Una caja de lista puede ser usada para la mayora de las configuraciones no mutuamente excluyentes, pero eso no significa que sea lo ideal. No usar cajas de lista si las cajas de chequeo o atributos de men son ms apropiadas. Las cajas de lista simplemente requieren ms trabajo por parte del usuario que otros controles no mutuamente excluyentes. Cajas de chequeo Las cajas de chequeo son comnmente asociadas a opciones no mutuamente excluyentes; permiten al usuario elegir simultneamente entre un grupo de tems. La operacin es simple: cuando la caja esta marcada el atributo est activo; cuando no esta marcado, el atributo no esta activo. La figura muestra que los botones de propiedad Bold y Shadow estn activados y el resto inactivos.
Uso apropiado + Usar cajas de chequeo cuando: el usuario no cambia atributos frecuentemente cuando hay suficiente espacio en la pantalla + Las cajas de chequeo deben usarse en grupos de dos o m s. Uso Incorrecto * Las cajas de chequeo no deben usarse para comandos; sin embargo, la seleccin de una caja de chequeo puede usarse para activar otros controles.
Pgina 77 de 106
Para grupos pequeos de tems (8 o menos) un conjunto de cajas de chequeo es la forma correcta. Para grupos ms grandes, debe considerarse otro tipo de interface (Una lista probablemente no sea usada. El problema del uso de listas como forma alternativa a cajas de chequeo es que, generalmente las listas son la mejor forma de presentar objetos, no atributos de objetos) o, mas probablemente, pensar en c mo simplificar la tarea. + Las cajas de chequeo no deberan usarse en forma aislada para indicar opciones binarias mutuamente excluyentes. Formas incorrectas Hay muchas formas incorrectas de presentar N de Muchas opciones. Uno de los errores mas comunes es usar botones de radio como si fueran caja de chequeo. Puede haber confusin entre usar un par de botones de radio o una simple caja de chequeo para indicar la configuracin de un atributo binario. Es conveniente usar botones de radio y no una caja de chequeo.
6.2. Comandos
Los comandos son acciones que modifican las propiedades de los objetos o manipulan objetos de la manera descripta por la etiqueta del comando. Cuando el comando es seleccionado, se ejecuta la accin inmediatamente. Los menes y los botones son los dos objetos de interface que presentan comandos a los usuarios; tienen diferentes aspectos, pero cada uno es apropiado bajo ciertas condiciones. La eleccin de la correcta forma de interface depende de: el nmero total de comandos que la aplicacin tiene frecuencia en que los comandos son seleccionados si el comando es usado en asociacin con otros controles * No cambiar la funcin, el estilo de interaccin o apariencia de ningn comando que es parte del conjunto de herramientas standard. Usar los comandos predefinidos y sus funciones. * La seleccin de cualquier men o botn debe ir acompaado de una apropiada realimentacin para dicho control. + El uso de menes pop-up para comandos no es aconsejable. Los menes pop-up no proveen una pista de su existencia. Solo son visible cuando el usuario los selecciona. Considerar el uso de menes pop-up si el espacio es muy pequeo en el rea del cliente para un panel de botones. La siguiente tabla presenta los criterios de seleccin en la columna izquierda y la forma de interface recomendada en la columna derecha. Si se tiene... Seis o menos comandos Una aplicaci n simple Una aplicaci n que no requiere menes standard Mas de seis comandos (no contando los menes standard) que pueden ser organizados en grupos Comandos usados para otros controles Un comando complicado que requiere de informacin adicional para completarse Comandos que son seleccionados frecuentemente Entonces implementar comandos como.... Botones en la ventana tems de Men en un men pull-down Botones en una caja de dilogo
Pgina 78 de 106
afectando la totalidad de la ventana; esto es, Botones en la ventana cuando un tem de men es tan usado que es trabajoso usar en una barra de herramientas. Ocasional uso intensivo de comandos Paletas flotantes Etiquetas de comandos * Etiquetar cada comando * Cuando un comando no esta disponible, inhabilitarlo. * Usar puntos suspensivos para indicar que una caja de dilogo sigue a la seleccin de un comando. Excepcin: no usar puntos suspensivos cuando la siguiente caja de dilogo en una confirmacin o una advertencia. * Cuando se eligen los nombre para los tems de men de una aplicacin especfica y sus mnemnicos, primero se debe asignar todos los tems de men definidos por el sistema y sus mnemnicos. + Practicas recomendadas para etiquetar comandos: usar etiquetas que indican el propsito del comando o el resultado de lo que sucede cuando el comando es seleccionado usar palabras cortas, claras, concisas y familiares para el usuario; no usar oraciones como etiquetas utilizar ttulos de men distinguibles uno de otros usar letra mayscula en la primera letra de un tem de men. Con tems de men de mas de una palabra, usar letra mayscula en la primera letra de cada palabra importante, as como acrnimos y abreviaciones que se escriben en maysculas. + En ciertos contextos, el nombre del comando puede cambiar para clarificar el significado del comando. Navegacin y seleccin + Permitir al usuario varios mtodos de seleccin de comandos. Por ejemplo, un dispositivo de seleccin, teclas aceleradoras y teclas de acceso a menes y botones a travs de mnemnicos. Aceleradores y mnemnicos + Cuando se usan teclas para seleccionar tems de men o botones de comandos, hacer que la seleccin pueda hacerse tanto con letra minscula como mayscula. + No reasignar las teclas standard definidas en las gua de interface de usuario. No asignar teclas equivalentes por el sistema a otros comandos. + Las aplicaciones pueden usar combinaciones con las teclas ALT (o COMMAND y OPTION en Apple) SHIFT y CTRL para aceleradores. Sin embargo, las teclas CTRL y SHIFT deben estar juntas y no usarse individualmente para aceleradores. + En la asignacin de mnemnicos, hacer que las letras usadas tengan significado equivalente. Deben ser tanto la primera letra del comando o la primera letra de una palabra importante en le comando. Inhabilitacin + Cuando un comando no esta disponible, se prefiere la inhabilitacin a remover el botn o el tem de men. Los comandos de tareas crticas deben estar siempre disponibles al usuario. Si el usuario intenta seleccionar un tem inhabilitado, ubicar una
Pgina 79 de 106
nota en el rea de informacin explicando que la ayuda le indicara porque la opcin no esta disponible. rea disponible para el cursor + Hacer que el rea seleccionable de una opcin sea lo suficientemente grande para permitir al usuario seleccionar sin dificultad. Generalmente el rea disponible debera ser dos veces ms grande al tamao del cursor o seis milmetros cuadrados. + En una pantalla de tacto, hacer que el rea de tacto sea igual al tamao del botn ms medio carcter alrededor del la etiqueta, o no menos de 30 milmetros cuadrados. * Separar las reas de tacto por al menos cuatro milmetros. Botones Los botones ejecutan comandos que inicializan acciones, cambian objetos o alteran la interface. + Toda caja de dilogo debe tener al menos dos botones: uno que cierre la caja de dilogo y realiza la accin y el otro que cierra la caja de dilogo sin realizar la accin. Agrupacin + No usar una caja de grupo para un conjunto de botones. En su lugar usar una lugar libre y lneas sutiles para indicar un grupo de botones. + El nmero de botones en una caja de dilogo no debe superar a seis. Caractersticas especficas de etiquetado de botones * Los botones deben etiquetarse con letras soportadas por el sistema. * La etiqueta debe centrarse entre los bordes y al menos debe haber 2 pixeles entre etiquetas, botones y bordes de botones. Botones por defecto para las cajas de dilogo Marca de un botn por defecto + Un indicador por defecto debe identificar un botn por defecto. El indicador por defecto es casi siempre un borde ms grueso alrededor del botn. La mayora de las cajas de dilogo tienen un botn por defecto. Seleccin de un botn por defecto + Seleccionar como botn por defecto al menos destructivo. Si el usuario accidentalmente presiona Enter, no debera causar consecuencias no deseables. + El botn por defecto debe ser una respuesta positiva para un dilogo. Excepcin: cuando los resultados de una accin son destructivos (por ejemplo Esta seguro que desea borrar el archivo?), hacer que el usuario explcitamente seleccione la accin destructiva. + Si ningn botn es destructivo, asignar como botn por defecto al ms frecuentemente seleccionado por los usuarios. Lugar, Colocacin y Tamao Lugar y colocacin de botones + Ubicar los botones de comandos standard de una caja de dilogo (ej.: OK) en una lnea horizontal en la parte inferior de la caja de dilogo, separados del resto de la caja
Pgina 80 de 106
de dilogo por un separador. Los botones pueden ubicarse verticalmente en la parte derecha de la caja de dilogo. + Si el botn esta asociado con otro objeto de interface, poner el botn arriba o a la izquierda del objeto afectado. + Si una ventana pueden deslizarse, no permitir desplazar los botones. + No poner los botones en mas de una lnea o una columna. Evitar grandes conjuntos de botones que ofrecen gran cantidad de opciones. Tamao + El tamao de un botn es una funcin no solamente de la etiqueta, sino tambin de las recomendaciones de una plataforma GUI y la importancia de la opcin. + Los botones organizados horizontalmente deben tener todos el mismo alto; los botones organizados verticalmente deben tener todos el mismo ancho. Navegacin + Para botones de comandos que son frecuentemente seleccionados, asignarle un mnemnico para que el usuario pueda seleccionarlos por medio del teclado. Pero no asignar mnemnicos a botones que tienen ya una tecla asignada (ej.: ESC para Cancel). Menes Los menes permiten al usuario ubicar comandos y conjuntos de atributos. * Cada men debe tener al menos dos opciones. + Cada men debe tener diez o menos tems de men. Heurstica para construir un men + Usar la siguiente heurstica para construir un men: listar todos los comandos a ser implementados a travs del men identificar grupos de tems relacionados y luego identificar grupos de grupos de tems. Agrupar los tems relacionados en categoras convencionales o naturales conocidas por el usuario. Anlisis racional: cuanto mayor es el nmero de controles que contiene el men, mas es el tiempo que le lleva al usuario seleccionar el comando deseado. La agrupacin reduce el tiempo de seleccin y error. Agrupar como tems de men. (Por ejemplo, los comandos deben agruparse as como los tems de men mutuamente excluyentes, etc.). Usar separadores para separar visualmente los grupos. Identificar los ttulos de men. Ordenar las categoras de men que identifican grupos. Ordenar los grupos por la frecuencia de uso, importancia, relaci n lgica, etc. + Ubicar las opciones ms importantes primero en el grupo. + Organizar las selecciones por orden de uso; por ejemplo copiar antes de pegar. + Si el usuario esta acostumbrado a una secuencia de opciones particular, entonces usarla. + Ubicar funciones paralelas en forma adyacente en el orden de uso (ej.: importar/exportar). + Separar comandos potencialmente destructivos de los comandos frecuentemente seleccionados; esto ayuda evitar selecciones accidentales y accidentes. + Cuando hay ocho o menos tems para un grupo de tems de men y la frecuencia de uso de dichos tems puede ser estimada, poner las opciones mas frecuentemente usadas primero, de otro manera usar el orden alfabtico.
Pgina 81 de 106
Etiquetado Ttulo * Los ttulos de men deben ser palabras simples. + El ttulo de men debe reflejar el tipo de comando presente en el grupo de men. tems de Men + Los comandos deben redactarse de tal forma que representen acciones y comandos para el usuario, ms que preguntas al usuario. + Debido a que Undo acta con el escritorio y otros objetos ocultos, la palabra Undo debera cambiar para reflejar que es los que se har en un momento determinado. Disponibilidad * Los tems no disponibles no desaparecen, se inhabilitan. * Durante una operacin sin modo, los usuarios deben siempre ser capaces de pulldown un men y ver los nombres de las opciones, incluso si las opciones no estn disponibles en ese momento. * No agregar ni quitar opciones del men a menos de que el usuario realice la accin de agregar o quitar tems o el usuario permute entre menes cortos y completos. Iconos Los iconos son usados para representar comandos y atributos. Un icono grfico muestra un objeto concreto y claramente representa una accin a ejecutarse o el atributo a seleccionarse cuando el icono es seleccionado. Se asocian con el uso de botones la mayora de las veces, pero puede ser usado tambin en los menes. A pesar que los iconos no son usados en los menes comnmente, pueden ser una forma excelente de representar comandos. Uso + Usar iconos cuando representan smbolos bien conocidos o convenciones ampliamente usados en industria y su significado es claro. + Los iconos son recomendados cuando el usuario tiene diferente lingstica o cuando las habilidades de lectura de los usuarios es cuestionable. Problemas + Los iconos complejos son difciles de interpretar; mantener los iconos simples. > A pesar de que los iconos hacen que la aplicacin parezca mas til, el uso de muchos iconos no es aconsejable. Demasiados iconos pueden hacer que la aplicacin parezca ms obscura e inapropiada. Etiquetas y formas + Se recomienda que los iconos sean usados en botones de comandos; los botones tienen etiquetas e iconos. La escritura en al parte inferior de las etiquetas con iconos agregan desorden visual. Pero entre claridad y desorden visual se debera preferir la claridad. + Etiquetar iconos que tienen un aspecto idntico, pero representan instancias diferentes. + Hacer que los iconos sean visualmente distinguibles uno de otros y que su significado debe reconocerse fcilmente.
Pgina 82 de 106
> Los iconos deben estar separados al menos unos 10 milmetros. Se debe dejar al menos cuatro milmetros fuera del rea visible de cada icono. Cuanto ms grande el rea de seleccin de un icono, ms fcil la accin de seleccin y menor riesgo de error.
6.3. Obtencin de campos de entrada

Un campo de texto de entrada tiene componentes, buenas prcticas de diseo y una forma de organizar gran cantidad de campos. Elementos de campos de entrada Una campo de entrada contiene etiqueta, una caja de texto y a veces una ayuda del formato.
Etiquetas, campos de entrada Propsito Las etiquetas son descripciones cortas e informativas de los datos requeridos en caja de texto. Las etiquetas ayudan al usuario a entender la entrada que debe hacer. * Siempre usar la misma etiqueta para indicar la misma clase de datos de entrada. + Se recomienda que todas las cajas de texto sean acompaadas por etiquetas. Las etiquetas de algunas cajas de texto son implcitas por el contexto o son ubicadas tan comnmente dentro de un entorno de GUI que las cajas de textos individuales no son etiquetados. Ubicacin * Las etiquetas deben ir seguidas de dos puntos y un espacio. Cuando la etiqueta se ubica a la izquierda de la caja de texto, ubicar un espacio entre los dos puntos y la caja de texto. + Cuando una etiqueta esta asociada con una caja de texto, es recomendable que las etiquetas aparezcan a la izquierda de la caja de texto, mas que sobre la caja de texto. + Las cajas de texto pueden aparecer tanto en una lnea como en columna: para una orientacin lineal, ubicar la etiquetas a la izquierda de la caja de texto ubicada mas a la izquierda; como con campos de ocurrencia simple, separar la etiqueta de la caja de texto por dos puntos y un espacio. Separar las cajas de texto por, al menos, 5 espacios. Para una orientacin en columna, ubicar la etiqueta sobre la columna de las cajas de texto al ras del borde izquierdo de dicha columna.
Pgina 83 de 106
Otras recomendaciones y requerimientos * Usar letras minsculas y maysculas mezcladas, con la letra inicial en maysculas de cada palabra clave. * Hacer que las etiquetas identifiquen a las cajas de texto, controles de opciones y mensajes. No encerrar etiquetas dentro de cajas que les haga parecer como cajas de texto. Una etiqueta se debe diferenciar de una caja de texto por los dos puntos al terminar la etiqueta y por su ubicacin a la izquierda de la caja de texto. + Las palabras usadas en las etiquetas deben ser las utilizadas por la comunidad de usuarios. + Usar solo caracteres alfabticos standard: evitar contracciones, cortes de s labas, abreviaciones o formas cortas, excepto cuando sean de uso comn y entendidas por el usuario. Las abreviaciones o acrnimos no deben incluir puntuacin. Si el espacio permite, no presentar las palabras en columna. Excepcin: Unidades de medicin deben ubicarse debajo de la etiqueta. Cajas de texto Las cajas de texto permiten al usuario introducir informacin desde el teclado. * Siempre mostrar al usuario el texto que se introduce en la caja de texto excepto si es una password. Incluso si el usuario est tipeando una password, proveer realimentacin en cuanto a la cantidad de caracteres que el usuario ha introducido desplegando un carcter que nos sea de texto en su lugar (comnmente se usa *). * Si la ventana contiene los campos obligatorios, habilitar los botones de dilogo apropiados solo cuando dichos campos estn completos. (el usuario siempre debe permitir el botn de Cancel). * No obligar a que el usuario introduzca separadores especiales o delimitadores de caracteres, tal como -, $, etc. Esto puede hacerse usando la unidad de medida en la etiqueta o separando cajas de texto mltiple con los delimitadores apropiados. * El usuario nunca debe tener que justificar la entrada a la derecha o izquierda. Si la longitud es variable, proveer de justificacin automtica cuando el usuario deja el campo. * Los usuarios deben ser capaces de introducir el texto tanto en minsculas como maysculas el usuario no debe ser forzado a introducir texto en un modo especial a menos de que sea absolutamente requerido por el sistema operativo. * Permitir al usuario que las cajas de texto permitan las operaciones de copiar, cortar, pegar y deshacer. * La longitud de una caja de texto debera acomodar el 95 % de las entradas que el usuario introducir.
Pgina 84 de 106
+ Si el usuario tiene que introducir texto que no puede ser visto que tiene longitud fija, mostrar la longitud del campo con un carcter de texto no-standard. Por ejemplo, en la figura la caja es inicialmente llenada con una secuencia de puntos y a medida que el usuario tipea se reemplaza cada punto por una estrella, para dar al usuario realimentacin.
+ Usar un tamao constante para una texto de entrada de longitud fija. + Una caja de texto puede ser de una simple lnea o de mltiples lneas con barras de desplazamiento. Una caja de texto de lnea simple debe poder desplazarse horizontalmente, excepto cuando se restringe la longitud de la entrada. + No forzar al usuario a truncar campos de entrada, incluso si eligen trucarlo. + Divida la entrada y presentacin de nmeros largos y otras cadenas que no sean de palabras cada cuatro o cinco caracteres a travs de lneas de separacin, lneas punteadas o espacios. Razn: la habilidad del usuario de leer cadenas largas de letras y nmeros se degrada luego de cinco caracteres. En la figura, si el cdigo se presenta como una cadena larga, es mucho ms difcil introducir y leer que si estuviese dividido.
+ Se recomienda alinear el texto a izquierda y los nmeros a derecha o ajustados alrededor de un punto decimal. Similarmente, la entrada de los primeros ceros no deber requerirse. + Iluminar el campo en foco usando vdeo reverso. > Los valores actuales o por defecto deben ser desplegados en las cajas de texto cuando el dilogo es abierto; generalmente, el primer texto o el ms importante se destaca del resto con mayor iluminacin. > Maximizar el uso de datos almacenados. Si la aplicacin tiene informacin que es requerida en un campo, proveer de dichos datos a la caja de texto, pero permitir que el usuario la cambie. No haga que el usuario vuelva a introducir informacin existente. Ayuda del formato La ayuda del formato provee una indicacin acerca de la naturaleza de la respuesta deseada. Son principalmente usadas para campos en ventanas que no son frecuentemente usadas, o para clarificar el significado de la etiqueta. + En general, usar la ayuda de formato escasamente porque rpidamente entorpece la visual. + Ubicar los formatos de ayuda a la derecha de las cajas de texto antes que entre la etiqueta y la caja de texto. * Cuando una unidad de medida es asociada consistentemente a una caja de texto particular, incluir como parte de la etiqueta o como un formato de ayuda. Cuando se trabaja con distintas medidas del mismo dato, el usuario slo debe ingresar una de ellas y el resto ser actualizado automticamente.
+ Permitir que el formato de ayuda pueda habilitarse/inhabilitarse cuando es superflua. En el caso de la figura es necesario y no debera inhabilitarse.
Organizacin de los elementos desplegados Las aplicaciones casi siempre requieren de un conjunto de campos a ser desplegados al mismo tiempo en una ventana. Es necesario saber como disear buenas pantallas de texto de entrada. La figura muestra una tpica caja de dilogo de datos de entrada:
Ubicacin + Guiar al usuario a travs de la ventana con lneas implcitas y explcitas formadas por los elementos desplegados. Hacer uso de lneas sutiles para dividir la pantalla y lograr que la atencin del usuario se centre en la informacin ms importante. + Asegurarse de que el tamao de la ventana o de la caja de dilogo sea lo suficientemente larga o ancha para soportar una eficiente entrada y la edicin de texto. > Hacer que la localizacin en la pantalla sea compatible con la importancia. Ubicar los elementos ms importantes en la parte superior y a la izquierda. Cuando la ventana se despliega, proveer una punto de comienzo obvio en la esquina izquierda superior, dndole mayor brillo al campo ubicado all. > Organizar los campos de entrada y otros controles en agrupaciones lgicas. Hay muchas tcnicas comunes de agrupar informacin. Cada una es apropiada para ciertas aplicaciones. Cantidad de informacin + Proveer al usuario de todos los datos relacionados a una tarea en una ventana primaria o en ventanas secundarias. Proveer solo informacin que es esencial para tomar una decisin o un realizar una accin. No inunde a una persona con informacin. + La informacin debe ser presentada en una forma directamente til, evitando las referencias a documentacin, anexa. + Los mensajes de estado o error deben ser comunicados al usuario a travs de cajas de dilogo. No debe presentarse informaci n crtica en el rea de informacin en la esquina izquierda inferior de la ventana. + Proveer ayuda para los campos de entrada y otra gua de usuario debe ser provista al usuario a travs de la facilidad de ayuda. Toda pantalla de objetos debe tener ayuda disponible a travs del modo de seleccin directa (tecla F1 una vez seleccionado el
Pgina 86 de 106
objeto deseado), de la barra de men o como un botn de comando en una caja de dilogo. Alineado de campos + Alinear las cajas de texto y etiquetas en columnas. Justificar a izquierda las cajas de texto y a derecha las etiquetas, ubicadas delante de las cajas de texto. Nota: Es comn ver cajas de dilogo con las cajas de texto y etiquetas justificadas a izquierda. Mientras que no esta mal, puede ubicar a las etiquetas a una considerable distancia de la caja de texto. Esto incrementa el nmero de movimientos de los ojos que el usuario debe hacer e incrementa la probabilidad de error y esto disminuya la velocidad de interaccin del usuario. + Dejar un mnimo de cinco espacios entre la caja de texto mas larga en una columna y la etiqueta mas a izquierda de la columna adyacente. Encabezados A veces el usuario necesita mas gua que solo las etiquetas; los encabezados son necesarios. Los encabezados son etiquetas ms generales para los campos de entrada. Un registro que consiste en la entrada de campos para nombre, calle, ciudad, estado y cdigo postal pueden ser agrupados bajo el encabezado "Nombre y Direccin". + Hay muchas clases de encabezados, cada uno presenta una peque a diferencia. La siguiente figura muestra un ejemplo del uso apropiado de encabezados en un formulario de datos. * Todo grupo de entrada (caja de dilogo o marco) debe tener un ttulo. - Los encabezados de seccin se refieren a grupos locales de informaci n relacionada. - Los encabezados de seccin son localizados en el marco que rodea el grupo de texto de entrada. - Los encabezados de una subseccin se refieren a subgrupos dentro de las secciones. - Ubicar los encabezados de subsecciones a la izquierda de la fila superior de los campos relacionados. - Dentar las etiquetas luego de cinco espacios como mnimo del encabezado de subseccin. - Separar la columna de etiquetas del encabezado mas largo por cuatro espacios como mnimo.
Pgina 87 de 106
Navegacin * El usuario debe iniciar en forma explcita el proceso de introduccin de datos; no se puede iniciar el proceso como efecto de la introduccin de informacin en el ultimo campo de una caja de dilogo. * No permitir que el usuario se introduzca en campos protegidos; la tecla TAB debe posicionar al usuario en el prximo campo que puede editarse. + Cuando una ventana o caja de dilogo se despliega por primera vez, el cursor debe posicionarse automticamente en la primera caja de texto. El campo debe tener brillo y estar listo para la entrada del usuario. + Se recomienda que el usuario mueva el foco de una caja de texto a la siguiente de acuerdo al orden del tab (obviamente el mouse puede usarse para elegir aleatoriamente un control). La aplicacin no debe mover el cursor automticamente cuando el campo es completado. La nica excepcin a esto en cuando se usa campos de longitud fija en un entorno de produccin de alto volumen. > Minimizar las acciones del usuario requeridas para los movimientos del cursor de un campo al siguiente; la ubicacin de los campos obligatorios antes de los opcionales hacen que la entrada de datos sea mas eficiente. Chequeo de Edicin Una vez que el usuario ha seleccionado la OK o Done o un botn similar en la pantalla, la aplicacin realiza un chequeo o validacin de edicin de los datos introducidos. A continuacin se desarrolla una gua de cmo validar los datos: + Los datos deben chequearse automticamente luego de que el campo pierde el foco. Pero, si dos o ms campos estn relacionados, el chequeo debe hacerse cuando todas las contingencias puedan chequearse. Cuando se detecta un error, la aplicacin puede generar un beep (si es un error simple) o desplegar una caja de dilogo describiendo el error. Es posible que el mensaje de error sea desplegado en una caja de
Pgina 88 de 106
dilogo no modal para ayudar al usuario a que con el contenido pueda corregir el error. Cuando la caja de dilogo es cerrada o el foco vuelve a la ventana que contiene el error, el campo con error debe adquirir brillo. > La inhabilitacin de usuario para corregir el error no debe impedir la iniciacin de otra transaccin (esto es, permitir Cancel si no quiere continuar). Si es posible, la aplicacin debe almacenar la ultima transaccin (o conjunto de transacciones) que contienen un error para su posterior correccin. + Una gua en lnea o informacin de ayuda debe comunicar al usuario que chequeo se esta aplicando al campo. Formularios de datos Un formulario de datos (solo lectura) despliega un conjunto de campos de entrada.
General + Hacer la disposicin de los formularios de datos sea consistente a travs de las pantallas. Por ejemplo, no pedir el nombre seguido del apellido en una pantalla, y luego pedir el apellido seguido por el nombre en otra pantalla. * Cuando se usa el mismo formulario para introducir datos as como para desplegar datos, usar las mismas etiquetas y secuencia de los mismos. Uso de los Documentos Fuente Si se usan documentos para introducir datos, disear los formularios para que sean consistentes con la disposicin del papel fuente. Si el papel fuente se encuentra pobremente construido, considerar el rediseo de la forma del formulario para que haya una buena coincidencia entre el formulario computarizado y el formulario en papel. Si los datos de entrada no estn en ningn papel, agrupar los campos por funcin, secuencia de uso e importancia.
6.4. Organizacin de una Interface de Entrada

La organizacin de la interface para entrada del usuario en un aspecto muy importante del diseo de una buena interface. Una buena organizacin resulta de una buena tarea de anlisis y permite al usuario comprender la pantalla rpida y correctamente. Un buen diseo debe cumplir con las caractersticas: - Permite al usuario predecir como otra pantalla lucir.
Pgina 89 de 106
- Uso prudente de los objetos de interface y espacio en la pantalla. - Apariencia estticamente agradable a travs del uso de la simetra. - Ordenamiento lgico y armnico que gua los ojos del usuario a travs de la pantalla. - Simplicidad que se demuestra como resultado de una fcil comprensin de los objetos de interface. Las piezas claves para organizar la interface de entrada de usuario son la composicin de los elementos y navegacin entre los mismos. Buenas prcticas de Diseo de la Interface de Entrada Los principios bsicos para disear una ventana son los mismos que se utilizan para disear una caja de dilogo. > Un buen diseo de la pantalla depende de la cantidad correcta de informacin provista con una buena organizacin. Es ineficiente no proveer la informacin suficiente; es confuso proveer m s informacin que la necesaria. Es esencial que durante el diseo se examine cada control en la ventana o caja de dilogo y preguntarse si el objeto debe o no estar all y si otros controles pueden ser necesarios. > Hacer que los objetos y grupos de objetos sean visualmente distinguibles. Un nmero de factores impactan la comprensin por parte del usuario de la interface y la eficiencia de la interaccin con la misma: total de tems, grupos de tems, tamao de los tems, etiquetas de grupos, ordenamiento de tems y densidad de los grupos. La siguiente figura muestra ejemplos de estos conceptos.
Pgina 90 de 106
Hay algunas reglas basadas en la percepcin humana que permiten asegurar un buen diseo de la pantalla, algunas de las cuales se desarrollan a continuacin. Agrupacin de controles Los grupos son definidos como grupos de controles que estn conceptualmente relacionados o estructurados similarmente y rodeados de espacio en blanco y lneas sutiles. La agrupacin ayuda a recordar y da como resultado un procesamiento ms rpido. Ejemplos de grupos organizados son: un conjunto de botones de radio, una caja de lista o un men pop-up. Es una buena prctica encerrar botones de radio y de chequeo con cajas etiquetadas (marcos). Heursticas de agrupacin: funcin : toda informacin que se procesa en forma conjunta o el usuario comunica que esta relacionada es agrupada. Una vez que los tems son agrupados, otra tcnica de agrupacin es usada para tems y grupos secuenciales. Frecuencia de uso: la informacin es agrupada en orden a la frecuencia de uso, con los de mayor frecuencia primero. Secuencia de uso: desplegar la informacin en el mismo orden en que es requerida por la tarea del usuario. Localizacin o formato relacionado: la informacin es desplegada o solicitada en la misma posicin relativa en todo formato usado por la misma aplicacin o por el mismo usuario. Importancia: agrupar la informacin en un orden de importancia decreciente para el usuario. Secuencia habitual: agrupar la informacin en el orden en que el usuario normalmente la usa. Ordenar en forma alfabtica, numrica o cronolgica: solo si todas las tcnicas anteriores no se aplican, agrupar la informacin alfabtica, numrica o cronolgicamente. + Organizar no ms de veinte grupos, casi siempre menos, de informacin en una simple ventana o caja de dilogo. + Los grupos deben estar dentro del foco visual del usuario. La distancia entre grupos debe promediarse, resultando un tamao de 7 lneas de altura y 14 caracteres de ancho. + Cualquier ventana o caja de dilogo no debe tener mas del 40 % ocupado por palabras o grficos; debe contener al menos el 60% de espacio en banco. + El espaciado entre grupos y objetos en cajas de dilogo debe ser mayor que en una ventana. La razn es que los usuarios tienen que interactuar con ventanas mas que con cajas de dilogo. Consecuentemente, es mayor la necesidad de una ubicacin eficiente en las ventanas. Las cajas de dilogo, desde otro punto de vista, necesitan ser rpidamente interpretadas lo cual significa mejor uso de agrupacin, espaciado y diseo. El espaciado entre botones debe ser dos veces o mas en las cajas de dilogo que en las ventanas. Ttulos de Grupo * Los ttulos de grupo nos deberan estar subrayados. El subrayado hacen que la lectura sea ms difcil. + Los grupos de botones de comandos no deberan estar titulados. En su lugar, las operaciones deben se obvias por los ttulos de los mismos botones.
+ La mayora de los grupos de objetos deben tener ttulos. Los ttulos deberan reflejar la clase de informacin que es vista por el usuario. + Los ttulos deberan ser distinguibles unos de otros. Ubicacin de los Controles + Poner los controles ms importante y de uso ms frecuente en la parte superior izquierda de la ventana o caja de di logo. + Disear los controles y conjuntos de controles de tal manera que el flujo de la interaccin a travs de la ventana o caja de dilogo requiera el mnimo posible de navegacin del cursor. + Ubicar los botones de comandos que afectan la ventana entera o caja de dilogo horizontalmente en la parte inferior, centrando dicho grupo. + No poner botones en ms de dos filas. Si se tiene muchos botones, considerar el uso de men o una caja de herramientas. + Usar organizaciones y formatos de los datos que resulten familiares al usuario. Por ejemplo, la secuencia de nombre, direccin y nmero telefnico es ms familiar a los usuarios que direccin, nmero telefnico y nombre. Dependencias entre controles + Ubicar los controles de tal forma que los controles en la parte superior afecten el control de los que estn debajo. La ubicacin de los controles debe sugerir una secuencia lgica. Si un control habilita a otro, este debe ubicarse arriba o a la izquierda del control habilitado Tamao de la pantalla + En general no debe hacerse el tamao por defecto de la ventana, la pantalla completa. + Las cajas de dilogo no deben ser ms grandes que el tamao por defecto de la ventana primaria de la aplicacin. + La aplicacin determina si los controles dentro de una caja que cambia su tamao son truncados, modifican su tamao o son reorganizados. En general, no es buena idea permitir que el usuario cambie el tamao de las cajas de dilogo. Se debe definir un tamao mnimo para la ventana que contiene informacin esencial. + Si una caja de dilogo llama a otra, hacer que la ltima sea movible, si es posible. + Hacer que el tamao inicial de cada ventana sea lo suficientemente grande como para acomodar todos los datos que se pretende que un usuario t pico pueda ver y no necesite desplazarse a travs de la ventana. Si la ventana no es lo suficientemente grande, poner los controles menos frecuentemente usados fuera de la vista. + Cuando los datos exceden el rea de despliegue disponible, indicar al usuario el rea que en ese momento se puede ver, como un nmero de pagina en el rea de informacin, relativo al resto del documento. + Mantener los encabezados de columnas y fila cuando se pagina o desliza a travs de tablas. Navegacin + Cuando la ventana o caja de dilogo es abierta, el cursor debe posicionarse en el objeto con mayor probabilidad de ser cambiado o completado. Si el foco retorna a una ventana, el cursor deber ubicarse en el ltimo componente en la ventana en tener el cursor.
+ Al desplegar una ventana de entrada relacionada a una base de datos, s lo habilitar aquellos campos claves y los de cancelacin. Luego una vez introducida la informacin en dichos campos y chequeada, habilitar el resto de campos y botones, inhabilitando los campos claves. + Si el nuevo foco es una caja de texto de una simple lnea conteniendo texto editable, seleccionar todo el texto en la caja de texto cuando el foco se introduce en la caja de texto. Si no existe texto en la caja, entonces ubicar el cursor dentro la caja de texto. + Disear la aplicacin de tal manera que se minimice el nmero de veces que el usuario deba cambiar entre el teclado y el mouse. + Mover el foco del teclado con la tecla tab. + Todos los controles deben ser accesibles a travs del teclado + El movimiento del cursor de un objeto a otro y de un grupo a otro debe ir del extremo izquierdo superior al extremo derecho inferior. + Disear los controles y conjuntos de controles de manera que la interacci n a travs de ventanas y cajas de dilogo requieran un mnimo de navegacin del cursor como sea posible. + Si hay un botn por defecto en una ventana o caja de dilogo, la presin de la tecla ENTER o REURN debera dar entrada a todos los tems en la ventana o caja de di logo sin importar donde este ubicado el cursor.
Pgina 93 de 106
Unidad 7: Gua para proveer Salida al Usuario

7.1. Buenas Practicas de Diseo de la Interface de Salida
Consideraciones sobre la Interface de Salida La organizacin de una interface para desplegar datos al usuario es un en un aspecto muy importante del diseo de una buena interface. * No permitir al usuario cambiar datos de solo lectura. + Los datos desplegados deben ser directamente utilizables. Por ejemplo, no desplegar un campo en pies cuando el usuario necesita en metros o yardas. Si ms de una unidad es utilizada, mostrar los datos en todas las unidades usadas. + Las etiquetas y los datos deben estar en el vocabulario familiar del usuario. > Mantener formatos consistentes a travs de las pantallas. Usar consistentemente el vocabulario y la estructura gramatical de datos y etiquetas dentro y entre pantallas. Los ttulos y encabezados no deberan cambiar a travs de pantallas de mltiples pginas de la misma tabla o formulario. > Asegurarse que las etiquetas de campos son consistentes en las palabras elegidas, el formato y estilo en que se presenta la informacin. Por ejemplo, si la etiqueta del campo es " Apellido, Nombre:" los datos desplegados en el campo asociado debera presentarse " Smith, William" y no " William Smith". > Desplegar solo los datos relevantes para la tarea del usuario. No ubicar datos extraos en la pantalla. > Ubicar la informacin mas frecuentemente solicitada primeramente en la secuencia desplegada. > Cada pantalla debera proveer un contexto suficiente para interpretar la pantalla. Prcticamente, esto significa que cierta informacin debe repetirse para ayudar al usuario a mantener su orientacin. Evitar Desorden visual Un medida de desorden visual es la densidad del la pantalla. La densidad de la pantalla es determinada por el porcentaje de posiciones de caracteres en la pantalla que contienen datos. Tpicamente, la medida de densidad de la pantalla es usada para terminales de caracteres. El concepto puede extenderse a un entorno GUI asumiendo que una pantalla es una ventanal, y la densidad es medida en porcentaje de pixeles ocupado. Mientras que la densidad de la pantalla es una forma rudimentaria de evaluar el desorden visual es una regla til. + El nivel de densidad no debera ser mayor que el 40%. + Los tems y los grupos de tems deberan ser perceptivamente distinguibles. Por ejemplo, los elementos distintos no deberan tocarse unos con otros. La etiqueta de un botn no debera tocar el borde del botn. Agrupacin de datos Organizar los datos en el rea del cliente en grupos relacionados semnticamente. Algunas de las tcnicas comunes de agrupaci n de datos son: Secuencia de uso Funcional Importancia
Frecuencia Cronolgico Alfabtico + La secuencia de uso es la tcnica de agrupacin ms importante. El uso de un despliegue alfabtico solo usar para grandes conjuntos de datos (mas de 50 tems) o como ultimo recurso. + Los grupos deben estar dentro del foco visual del usuario. Un tamao ptimo para grupos de datos (no de texto continuo) es acerca de cinco grados el ngulo visual del usuario; esto corresponde a 7 lneas de altura y 14 caracteres de ancho (asumiendo un tamao de letra constante de 10 puntos tal como Courier). Nota: Obviamente, es irrazonable asumir que todos los datos podran o deberan respetar esta restriccin. Sin embargo, cuando el diseo permite flexibilidad, esta recomendacin debera tomarse seriamente. + Usar organizaciones de datos y formatos que le son familiares al usuario. Por ejemplo, la secuencia de nombre, direccin y nmero telefnico es ms familiar al usuario que usar direccin, nmero telefnico y nombre. Abreviaciones + Usar abreviaciones en etiquetas no es lo recomendado. Excepcin: las abreviaciones son aceptables si sern entendibles por todos los usuarios y/o hay serios problemas de restricciones de espacio. + Cuando las abreviaciones deben usarse: Asegurarse que todas las abreviaciones son nicas y comprendidas por todos los usuarios; Elegir abreviaciones comunes (familiares), pero Si no existe una abreviacin, disear la abreviacin de acuerdo a una regla consistente. El borrado de vocales (por ejemplo POLICY se convierte en PLCY) es casi siempre la mejor opcin para encabezados y etiquetas. La prueba de usuario de todas las nuevas abreviaciones es recomendado antes de ser incluidos en la aplicacin. El truncado (por ejemplo POLICY se convierte en POL) es casi siempre mejor cuando el usuario debe introducir en la entrada. + Si las abreviaciones son usadas, debera proveerse al usuario una lista electrnica de todas las abreviaciones en uso, quizs a travs de la facilidad de ayuda o en una paleta flotante. Iluminacin y Codificado Propsito y Uso La iluminacin hace que la informacin crtica o importante resalte perceptiblemente al usuario. Hay un nmero de formas para iluminar la informacin, por ejemplo usando color, forma, o atributos de texto. COMO iluminar algo es tan importante como CUANDO iluminar algo. + Usar iluminacin cuando hay que: Focalizar la atencin del usuario en valores de datos pocos usuales. Especificar informacin que necesita ser cambiada. Llamar la atencin de campos o mensajes de alta prioridad. Indicar la siguiente rea de entrada datos o comando.
Pgina 95 de 106
La codificacin se refiere a los niveles de diferenciaci n de una variable o propiedad de datos para que el usuario pueda tomar decisiones basada en dicho cdigo. Por ejemplo, en una caja de lista los tems no disponibles deben estar en gris o en letra itlica y los tems disponibles deberan estar en la letra regular del sistema. Recomendaciones + No mas del 10 % de la pantalla debera estar iluminado en cualquier momento. + Proveer al usuario una leyenda explicando la iluminacin y la codificacin. Una paleta flotante es una forma de proveer tal leyenda. + La iluminacin y la codificacin son la forma ms efectiva cuando se usa en forma discreta. + Uso del sonido como forma complementaria para desplegar informacin crtica. La siguiente tabla resume las recomendaciones sobre iluminacin y codificacin: Tcnica de Pro iluminacin/ codificacin Parpadeo Excelente capacidad para conseguir atencin Con Reduce la legibilidad Distrae Usado para
Alto brillo. Debera ser al menos dos veces mas brillante que el tem normal. Vdeo reverso Buena capacidad de conseguir atencin. Codificacin de colores
Iluminacin de situaciones que requieren atenci n urgente y respuesta rpida. Nota: asegurarse de desactivar el parpadeo luego de la respuesta del usuario. No hacer parpadear completamente la palabra o frase, sino alterando el brillo de normal a alto. O usar un tem (un asterisco) que no es parte del tem crtico y hacerlo parpadear. Buena capacidad de Puede ser difcil Iluminar errores o componentes conseguir atencin. discriminar diferentes de la pantalla. Menos molesto que entre niveles de Nota: No mas de dos niveles de un brillo total. brillo. brillo debera usarse. Puede reducir la legibilidad. Usar escasamente. Bueno para Puede ser difcil mostrar relaciones para discriminar entre elementos de colores. la pantalla. Los colores tienen significado esttico para los usuarios. Resalta el texto desplegado de las letras mezcladas o minsculas. Mas difcil de leer que las letras mezcladas Iluminar errores y objetos importantes de la pantalla. Codificacin de datos. Nota: limitar el nmero de colores a cuatro o menos. Debido a que tanto como el 8% de los usuarios pueden ser deficientes en colores, usar los colores como codificacin redundante con otro mtodo de codificacin. Desplegar etiquetas
Todos los caracteres en maysculas
Pgina 96 de 106
Caracteres mezclados Diferentes letras
Lo mejor para la lectura No Obstruye
Itlico
No obstruye
Desplegar encabezados y etiquetas. Puede ser difcil Diferenciar entre el texto que sea notorio desplegado por la aplicacin y el para el usuario. texto introducido por el usuario Las letras no o para codificar tems en listas y tienen tablas. significado Nota: limitar a tres el nmero de esttico. Toda letras diferentes para codificar. asociacin debe aprenderse. Tienen Codificar de tems en listas y significado tablas esttico marginal. Debe ser aprendido.
Nada
Subrayado
Duplicar el tamao de los caracteres.
Pobre obtencin No usar de atencin. Reduce la legibilidad Buena atencin; no Consume Desplegar ttulos y encabezados. obstruye espacio en la visualmente. pantalla Nada
Etiquetas Una etiqueta es un ttulo, frase o palabra descriptiva, consistentemente ubicada con un control o grupo de controles que identifica dichos controles. * Todo control debe etiquetarse. * Toda etiqueta debe distinguirse una de otra dentro y entre ventanas. Por ejemplo, "Nmero" no debe significar un nmero telefnico en una pantalla y el nmero de seguridad social en otra. Letras y Tamao de Letras * Usar las letras y tamaos standard del sistema para etiquetar todos los objetos de interface. La mayora de las letras de sistema son sans serif. + Usar diferentes estilos de letras para diferenciar entre texto de la aplicacin desplegado y el texto que el usuario controla. En general, las letras serif son ms lebles que las letras sans serif, y por lo tanto son recomendadas para la letra de usuario. Las letras recomendadas son Times, Roman o New Century Schoolbook. + En las cajas de texto que requieren la entrada de una longitud fija, usar un tamao de letra constante (por ejemplo Courier, Monaco, Geneva); hacer que la caja de texto solo acepte entradas de una longitud especfica. Nota: Esto elimina errores restringiendo al usuario la entrada de aquellas que estn conforme los requerimientos de longitud. + El ancho minino de una letra debera ser de 2 pixeles. + El tamao de la letra nunca debera ser menor a 10 puntos. + El espacio recomendado entre letras es de 2 pixeles. + El espacio recomendado ente lneas es de 10 pixeles.
Pgina 97 de 106
Bsqueda en textos y listas + Los usuarios deberan ser capaces de buscar cadenas especficas en grandes bloques de texto o largas listas. Los usuarios expertos podran desear buscar caracteres especiales o formatos. + Cuando se busca, las letras en maysculas y minsculas deberan tratarse de igual manera a menos que explcitamente lo solicite el usuario. + Los usuarios deberan se capaces de buscar globalmente y reemplazar una cadena por otra sin requerir confirmacin en cada cambio. Tambin permitir que deshaga todos los cambios inmediatamente seguido al reemplazo. + El caso de reemplazar una cadena debera ser el mismo a buscar una cadena.
7.2.Despliegue de informacin
Tablas Los datos son presentados al usuario a travs de tablas. La figura muestra el ejemplo de una tabla:
Disposicin Consideraciones generales En tablas que contienen mas de siete lneas, ubicar una lnea en blanco o un subrayado sutil luego de cada cinco filas. Nota: esto mejora considerablemente la lectura al facilitar un escaneo horizontal. + Cuando la tabla tiene un limitado espacio de despliegue disponible, pero hay muchas columnas que pueden ser desplegadas: Establecer mltiples vistas de los datos y permitir al usuario seleccionar entre ellos; Dar al usuario la capacidad de determinar que columnas de datos mostrar en la tabla; o Habilitar barras de desplazamiento horizontal para desplegar las otras columnas. En este caso, fijar la columna clave (por ejemplo la columna mas a la izquierda) y desplazarse con las otras. * Si dos o ms tems de datos deben ser comparados bsicamente carcter por carcter, ubicar un tem directamente sobre el otro. Etiquetas + Para datos en columna, ubicar las etiquetas sobre el borde izquierdo en la parte superior de las columnas (sin dos puntos) para datos alfanumricos y sobre el borde derecho para datos numricos que estn centrado alrededor de un punto decimal. + Cuando se numera filas y columnas o tems, comenzar con el nmero "1" y no "0". + Ubicar las unidades de medidas (entre parntesis) directamente debajo de la etiqueta o, si el espacio lo permite, a la derecha de la etiqueta.
Pgina 98 de 106
Organizacin + Desplegar la columna de referencia (muchas veces llamado "clave" o " ndice") en la columna mas a la izquierda de la tabla. Desplegar el resto de las columnas de izquierda a derecha de acuerdo a su importancia en relacin a la tarea. * Construir la tabla de manera que coincida con la organizacin que el usuario requiere o espera. * Si es posible, no separar las columnas que sern frecuentemente comparadas. Espaciado y justificacin en las tablas * Las columnas numricas de datos que no contienen puntos decimales deben justificarse a derecha; las columnas de datos que contienen un punto decimal deben ser justificadas respecto al punto decimal. Mantener todos los ceros significantes luego del punto decimal. * Las columnas alfanumricas de datos deben justificarse a izquierda; las columnas alfabticas de datos nunca deben centrarse. + Usar un espaciado consistente entre columnas y grupos de columnas. Mantener al menos tres espacios entre la entrada mas larga en una columna y el comienzo de la siguiente. Cuando las columnas se agrupan, ubican al menos cinco espacios entre grupos. El espaciado intergrupo debe ser mayor al espaciado intragrupo en al menos dos espacios.
+ El espaciado de columnas debera ser consistente entre una pantalla y la prxima, cuando datos similares son presentados. Navegacin * Si la numeracin de tems en una lista excede la pantalla disponible y el rea de paginado adquiere desplazamiento, los tems deben ser numerados continuamente desde el primer tem. * Mantener los encabezados de las columnas y las filas cuando se pagina o se desplaza a travs de las tablas que se extienden debajo del rea desplegada. + Si el usuario debe comparar tems en una pantalla y no puede verlos en la misma ventana al mismo tiempo, permitir que el usuario divida la ventana.
Pgina 99 de 106
Iluminacin y codificado, tems de Tablas en Tablas Proveer distinta codificacin para codificar los tems que requieren la atencin del usuario. Los atributos de color y texto son efectivos cuando se necesita codificar tems en las tablas. Por ejemplo, la informacin importante puede presentarse en negrita y la informacin no disponible en gris o en itlico. Texto A menudo es necesario presentar largos pasajes de texto al usuario. El tiempo de lectura es significativamente menor en la pantalla de una computadora que el requerido para leer copias en papel. Hay ciertos requerimientos y recomendaciones que mejoran los tiempos de lectura de texto desplegado en una computadora. General * Si el usuario debe leer un texto substancialmente grande en lnea, dar la posibilidad de imprimir una hoja especfica tanto como el texto completo. Organizacin * No justificar el margen derecho del texto desplegado. * Separar todos los prrafos por una lnea en blanco. * Usar una mezcla de letras en maysculas y minsculas. + Cuando se presentan muchos prrafos de texto, hacer que el tamao desplegado sea de una caja entre 4 y 17 lneas de alto. Idealmente, usar un espaciado entre lneas entre 1.5 a 2, evitando espaciado simple cuando los pasajes de texto son largos. + Para una velocidad de lectura ptima, hacer que las lneas tengan una longitud entre 50 y 78 caracteres. El texto continuo debera desplegarse en no menos de 50 caracteres por lnea. Es mejor desplegar unas pocas lneas largas de texto que muchas lneas cortas. + Usar encabezados y formateo para aislar secciones de texto importantes. Vocabulario y Estilo * No escribir el texto con guiones. + Usar puntuacin normal. + Evitar el uso de contracciones. + Usar sentencias cortas, simples y afirmativas. + Usar la voz activa. Es mucho ms fcil leer el texto escrito en voz activa que en voz pasiva. * Cuando el texto describe una secuencia, el orden de las palabras en el texto debe reflejar la secuencia de la tarea. Por ejemplo: Introducir la password antes de correr la aplicacin es mejor que la frase Antes de correr la aplicacin, introducir la password. > Cuando un pasaje o palabra debe enfatizarse, iluminarla usando una de las convenciones. + Usar encabezados que introducen y dan expectativas de lo que el usuario leer a continuacin. Listas de Texto + Desplegar tems relacionados en columna mas que en forma continua. Es mas fcil leer tems en forma vertical que en un prrafo, tal ves separados por comas. + Generalmente, si no se requiere que el usuario se desplace, presentar la lista de texto en una simple columna es mejor que en mltiples columnas. Por ejemplo, es
preferible presentar una lista de 20 tems que dos columnas de 10 tems cada una. Pero, no todas las listas pueden presentarse en una sola columna. + Cuando se presenta la lista de texto en mas de una columna, ordenar los tems verticalmente dentro de cada columna. > Adoptar la lgica del usuario cuando se ordena. Si son muchos los tems a ordenar o no hay otro principio a aplicar, entonces ordenar la lista alfabticamente. Flowcharts Propsito y uso Los flowcharts son diagramas que ilustran las relaciones secuenciales entre los elementos o eventos. Usar los flowcharts para la representacin esquemtica de la secuencia de la informacin. General + Los flowcharts deberan ser presentados en un orden lgico; este orden ser la secuencia de pasos requeridos para realizar una tarea. + En general, es mejor establecer convenciones para presentar elementos individuales. Por ejemplo, si se presenta un flowchart de datos, usar las formas convencionales de los elementos definidos por las organizaciones nacionales estndar. + Un usuario debera ser capaz de obtener informacin detallada acerca de un objeto particular del flowchart mediante el cliqueo del objeto y seleccionando la opcin de men mas informacin, o tal vez con solo un doble cliqueo del objeto. Dicha informacin debera contener una explicacin sobre que es el objeto, que hace y como es usado, as como informacin sensitiva al contexto. Organizacin + Organizar el flowchart de tal forma que pueda leerse de arriba hacia abajo y de izquierda a derecha. + Si es posible, en una decisin, adoptar la convencin de que si siempre este siempre en el lado derecho de la caja y no siempre este en el lado izquierdo. + Solo ubicar una decisin en cada paso. No combinar mltiples decisiones en una sola caja de decisin. + Usar el cdigo en un flowcharts con un propsito, tal como distinguir diferentes tipos de elementos o elementos fuera del rango normativo. Por ejemplo, el color puede ser usado para demostrar caminos particulares en un flowchart. El color es un buen mtodo de codificar flowcharts, pero ser cuidadoso en no usar muchos niveles de codificacin de color. Debido a la necesidad de redundancia cuando se usa la codificacin del color, se debera alterar el ancho de la lnea/borde o usar lneas punteadas en vez de lneas slidas.
7.3. Gua de Usuario

Una gua de usuario es informacin en demanda, tal como ayuda, o capacidades del sistema de asistir la interaccin del usuario con la aplicacin. El uso de una gua puede ser implcito o explcito. Una gua implcita esta integrada dentro de la interface a travs de un buen diseo de menes, con el rea de cliente y las propiedades de los objetos de la pantalla construidas inteligentemente.
Pgina 101 de 106
Una gua explcita est disponible a pedido, explicando el objeto o comando actual, y provee informacin de la aplicacin. Esta seccin se refiere a la gua explcita. General * Permitir al usuario obtener ayuda en cualquier momento, a travs de menes de ayuda o botones de ayuda. + Proveer informacin especfica relativa al contexto de una tarea ms que mensajes generales. Por ejemplo, si el usuario introduce informacin en un formato errneo, decir: El formato es dd/mm/aaaa y no Formato Invlido. + Ubicar las consecuencias de una accin antes de describir la accin. Por ejemplo, decir Para borrar un archivo, presionar Enter en vez de Presionar Enter para borrar un archivo . + Si una tarea tiene pasos secuenciales, presentar la tarea en el orden requerido para realizar la tarea. Estilo y Gram tica * No usar antropomorfismo. Esto es, no personificar la computadora. Por ejemplo, en vez de Continuar cuando usted haya presionado Enter decir Para continuar, presionar Enter. + Las palabras usadas en un gua de usuario deberan ser comunes, significativas, no ambiguas y completas (no usar contracciones ni abreviaciones). Evitar terminologa de computacin, no familiar y trminos esotricos. + En general, usar palabras positivas ms que negativas en las oraciones. Las oraciones negativas, sin embargo, son apropiadas para comunicar excepciones a las reglas. + Usar la voz activa, antes que la pasiva; usar construcciones gramticas consistentes; los mensajes deben ser oraciones cortas y simples. + Los puntos o hechos que deben recordarse deber an estar al principio del mensaje. + Usar dibujos para ilustrar texto siempre que sea posible. Manejo de errores de usuario Prevencin de Errores de Usuario Una aplicacin bien diseada minimiza el nmero y severidad de los errores. Cuanto mas satisface la aplicacin la tarea del usuario, con mayor probabilidad los errores son prevenidos. El uso de objetos de interface como botones de radio, cajas de seleccin, menes pop-up permiten prevenir errores, porque la aplicacin se apoya en el usuario para hacer una eleccin de los conjuntos predefinidos. * Se requiere que el usuario realice acciones explcitas para introducir informacin (por ejemplo un formulario de datos con mas de una caja de texto requerida, el usuario debera tener que presionar un botn OK o de afirmacin para completar le dilogo). * Si el usuario realiza alguna accin que causara la perdida del contenido de la actual rea de trabajo, sugerir al usuario para guardar la informacin actual, cancelar la accin solicitada o proceder sin guardar. > Hacer que la aplicacin sea tolerable a errores ortogrficos y tipogrficos comunes y predecibles.
Pgina 102 de 106
Deteccin y Correccin de Entradas Incorrectas Los errores incluyen mal funcionamiento de hardware y software y entradas de usuario que no son reconocidas por la aplicacin. La deteccin de error es la capacidad de la aplicacin de chequeo de la entrada; comunica al usuario el hallazgo de un error y las condiciones que ha causado el error y los efectos del error, si es posible. La correccin de error es la informacin provista por la aplicacin como causa de un error de entrada y los procedimientos para su recuperacin. Por ejemplo, la aplicacin puede requerir que el usuario reingrese el nombre de una archivo si la aplicacin no puede encontrar el archivo especificado por el usuario. * Cuando un error es detectado y requiere que el usuario cambie la informaci n, toda informacin previa que ha sido correcta debe ser mantenida intacta. En otras palabras, el usuario nunca debe ser forzado a reintroducir informacin correcta. + Detectar errores inmediatamente luego de un explcito OK, Send u otra accin apropiada realizada por el usuario para hacer desaparecer una caja de dilogo de error. + Cuando una aplicacin detecta un error presentar una caja de dilogo de error describiendo el error; ubicar la caja de dilogo, si es posible, de tal forma que no oculte el o los tems que causaron el error. Cuando el usuario confirma que ha ledo el mensaje (presionando OK), la caja de dilogo desaparece y la aplicacin ilumina los campos afectados y el cursor se posiciona en el campo ubicado en el extremo superior ms a la izquierda. Mensajes Mensajes de Error * Permitir acceder a la ayuda directamente desde el mensaje de error. * La documentacin debe incluir una lista descriptiva de todos los mensajes de error. + Hacer los mensajes de error: Breves, pero informativos. Comunicar qu est mal, dnde esta el error, y qu acciones correctivas pueden llevarse a cabo. Proveer informacin especfica a la tarea ms que genrica. No juzgar; no acusar al usuario; no personificar la computadora. Continuar tan pronto como el error ha sido corregido o el usuario haga desaparecer la caja de dilogo de error. + Cuando las acciones sucesivas del usuario resultan en un repeticin del mismo mensaje de error, cambiar la frase del mensaje de error para la tercera y todas las subsecuentes veces. Adicionalmente, para la tercera repeticin del mensaje de error, la aplicacin debera beep dos veces antes de presentar el mensaje de error. + Cuando el error involucra una unidad lgica de entrada (un texto en una caja de texto), la entrada afectada debera iluminarse cuando la caja de dilogo es removida. + Si el conjunto de entradas vlidas es pequeo, presentar el conjunto de alternativas en el mensaje de error. + Cuando hay muchos errores, comunicar al usuario que hay mltiples errores. Todos los campos que contienen errores deberan ser indicados simultneamente al usuario.
Pgina 103 de 106
rea de informacin Un rea de informacin es de slo lectura, no deslizable y ubicado en la parte izquierda inferior de una ventana primaria donde mensajes no esenciales e informativos aparecen (antes de que el usuario efectivamente selecciones el objeto o la accin) acerca de un objeto o una seleccin. + La mayora de las ventanas primarias deberan tener un rea informativa. + Cuando el cursor esta sobre un comando (un tem de men o un botn), usar el rea informativa para presentar el resultado de la accin del usuario si el comando es seleccionado. + Cuando el cursor esta sobre un objeto, usar el rea de informacin para sugerir la accin por defecto, la accin ms apropiada, o como realizar acciones disponibles. + Cuando el cursor esta en una caja de lista, usar el rea de informacin para comunicar al usuario cuantos tems se pueden seleccionar. + Dar mensajes al usuario acerca de terminaciones normales de una accin en le rea de informacin. + Permitir al usuario activar y desactivar el rea de informacin a travs de opciones del men. + Remover el mensaje del rea de informacin cuando ya no es relevante. Ayuda en lnea La ayuda en lnea provee directivas, explicaciones e informacin al usuario: Directivas para: ejecutar comandos, acceder y usar las capacidades de la aplicacin, lograr un objetivo especfico y manejar condiciones de error. Explicaciones de conceptos asociados con una tarea o componente de interface, comandos o componentes de dilogo y las acciones que realizan. Informacin en la sintaxis requerida para hacer la tarea, una lista de comandos disponibles y opciones, e indicaciones sobre rangos vlidos para los campos. Un usuario accede a la ayuda mediante acciones consistentes simples: en Apple presionando la tecla HELP o COMMAND-?; en Windows presionando la tecla F1 o SHIFT+F1; en Motif presionado F1. En general, los usuarios pueden acceder a la ayuda en dos instancias. Primero, los usuarios solicitan ayuda cuando tienen una problema especfico y desean una respuesta de contexto sensitivo. Alternativamente, muchos usuarios consideran la ayuda una forma segura y eficiente de aprender la aplicacin. De este modo, los usuarios pueden navegar la ayuda, slo para conocer la aplicacin, sin un objetivo o problema especfico en mente. El propsito principal de una ayuda en lnea, sin embargo es proveer soluciones de contexto sensitivo a los problemas de usuario. La ayuda de contexto sensitivo es informacin basada en la ubicacin del cursor en la pantalla, la aplicacin activa, el paso actual en el dilogo, ms recientes mensajes de errores, etc. La ayuda sensitiva al contexto es aplicable cuando: Los usuarios necesitan ayuda que es especfica a la tarea u objeto actual. La tarea tiene pasos secuenciales. La facilidad de la navegar la ayuda es hecha presentando al usuario un ndice; el usuario introduce un tpico de ayuda y lo selecciona de la lista. La navegacin de la ayuda es aplicable cuando:
Pgina 104 de 106
No hay ayuda contextual disponible para el objeto seleccionado Los usuarios tienen problemas de especificar exactamente el t pico de ayuda sin asistencia. * Los usuarios deben ser capaces de iniciar una solicitud de ayuda siempre que lo desea, obtener la ayuda en cualquier tpico que desee, controlar el tipo de informacin de ayuda, y salir de la ayuda en cualquier momento. Estilo + Mantener la escritura simple, concreta y natural. + Proveer informacin que se focalice en la tarea incluir toda la informacin necesaria, asegurndose que toda la informacin es correcta, y excluir todo lo que no es necesario. + Usar mucho espacio en blanco. En general, no mas del 40% de los pixeles deber an estar ocupados por palabras y figuras. > Anticipar las razones de una confusin y cmo el texto ayudar a clarificar dicha confusin. Escribir la ayuda en lnea con la comunidad de usuarios y con la aplicacin especfica en mente. Los usuarios casi siempre acceden a la ayuda porque no estn seguros de algo. > Si el usuario puede introducir un trmino para el cual desea una ayuda, la aplicacin debera aceptar sinnimos y coincidencia de deletreo. Contenido + Los siguientes encabezados y descripciones son recomendados para ayuda a nivel de campo y ayuda a nivel de ventana: Propsito: Comenzar explicando el propsito de una ventana o un campo, y cundo y cmo la informacin de dicha pantalla satisface el propsito del negocio. Continuar dicha descripcin con informacin descriptiva y procedural como sea requerida por la tarea. Concepto: usar el concepto del encabezado solo para campos complejos o confusos. Por ejemplo, si la aplicacin requiere que la informacin sea introducida en un orden particular o si es cierta informacin ya existente y donde la aplicacin la obtiene para desplegarla. Sintaxis: explicar todos los elementos de la pantalla en trminos de objetos. Describir la sintaxis o la forma en que la entrada es requerida en los campos. Tambin se puede informar la validacin de edicin que se realiza en un campo determinado. Una de las razones por la que el usuario accede a la ayuda a nivel de campo es porque la validacin de su edicin no fue satisfactoria. La ayuda comunica al usuario como introducir informacin correctamente. Ejemplos: proveer ejemplos en cmo el comando o la funcin es usada. Usar ejemplos concretos que expliquen tpicos abstractos. Los ejemplos son la parte ms importante de la ayuda. Mas informacin: proveer referencia cruzada a tpicos altamente relacionados a los que puedan accederse a travs de la ayuda en lnea. Nota: la ayuda en lnea debe explicar suficientemente los conceptos porque el manual puede no estar disponible cuando el usuario solicita ayuda. Notaciones: siempre que sea posible, proveer un campo editable con cada tpico de la ayuda para que el usuario pueda hacer anotaciones para su propia referencia.
Pgina 105 de 106
Realimentacin, Sugerencias e Indicaciones La realimentacin es la respuesta perceptible de la aplicacin que resulta de las acciones del usuario. La realimentacin indica el estado actual del hardware y software del sistema, tal como las aplicaciones disponibles, modos, procesos, etc. * Todo accin de usuario debera producir una realimentacin perceptible proveniente de la aplicacin. La mayora de los objetos de interface tienen la realimentacin construida dentro de su uso. * La aplicacin debe proveer realimentacin (por ejemplo cajas de dilogo) cuando: Hay entre 2 a 15 segundos de retardo en procesar el comando introducido cambiar la forma del cursor Una operacin que demora 15 segundos o mas proveer una caja de dilogo que indique el progreso El tiempo de procesamiento es desconocido cambiar la forma del cursor El usuario tiene entrenamiento mnimo o son usuarios no frecuentes de la aplicaci n usar el rea de informacin libremente. * Mostrar todos los caracteres (y controlar los caracteres que son ignorados) que el usuario tipea en la pantalla, excepto para las contraseas y otras razones de seguridad. + Es altamente recomendado que la aplicacin anticipe las fallas del sistema y las reporte a los usuarios; de otra manera, proveer al usuario de una caja de dilogo comunicndole al usuario de la falla (por ejemplo Memoria agotada Guardar y cerrar la ventana ahora ). + Luego de la interrupcin de una aplicacin, proveer realimentacin para que el usuario asuma que la aplicacin esta todava funcionando y que ha retornado al estado previo. + Proveer informacin de estado y error a solicitudes enviadas a mquinas remotas, por ejemplo una impresora. > La realimentacin no debera obstruir o demorar la tarea. > Si es posible adaptar la realimentacin al nivel de habilidad del usuario. Los usuarios novicios necesitan realimentacin ms cualitativa que los expertos. > Integrar la realimentacin en como el usuario trabaja con la tarea. Por ejemplo, si el usuario es propenso a distraerse y no mirar la pantalla, y la aplicacin necesita su atencin, la aplicacin debera generar un beep.
Pgina 106 de 106

Apunte Diseño Entrada Salida

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apunte Diseño Entrada Salida

Enviado por

Direitos autorais:

Formatos disponíveis

Universidad Tecnolgica Nacional

Facultad Regional Resistencia

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Diseo de Entradas y Salidas

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

DISEO DE ENTRADAS Y SALIDAS

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

1.2 Relacin del contenido de la salida con el mtodo de salida

1.3 La eleccin de la tecnologa de salida

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

1.4 Consideraciones al elegir la tecnologa de salida

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

1.5 Reconocer la manera en que el sesgo de la salida afecta al usuario

1.6 Diseo de la salida impresa

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Ejemplo de Reporte Impreso

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

DETALLE DE VENTAS MENSUALES

RPODUCTO ENERO FEBRERO MARZO ABRIL

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

He aqu el cuadro descriptivo de la estructura jerrquica:

Lnea Nombre (1 vez) Cabecera (1 vez)

Lnea Direcci n (1 vez)

Direccin (1 vez) Antiguo Saldo (1 vez) Descripcin Mov (1 vez)

Impreso Cliente (C veces) Cuerpo (1 vez) Lnea Movimiento (1 vez)

Lnea Totales y Saldo (1 vez)

Prof. Ing.Balbastro / A.U.S.Sierra

Diseo de Entradas y Salidas

Universidad Tecnolgica Nacional F.R.R.

Diseo de Interface de Usuario

Los propios inventores

Lenguajes orientados a Problemas; Planillas de Clculo

Mecanizaci n de las tareas de oficinas

Productivida d personal (computador a como herramienta)

WIMP (Windows, Iconos, Menes y dispositivo de sealizacin)

Computador as como Interfaces sin entretenimie comandos nto