Leccion 18 - Diseño de entradas

download Leccion 18 - Diseño de entradas

of 13

Transcript of Leccion 18 - Diseño de entradas

  • 7/29/2019 Leccion 18 - Diseo de entradas

    1/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 1

    LECCION 18 Diseo de Entradas

    Efectividad quiere decir que los formularios de entrada, las pantallas de entrada y ios formularios para contestar enla Web cumplen propsitos especficos en el sistema de informacion, mientras que la precisin se refiere al diseo quegarantiza que se con tostarn de manera apropiada. La facilidad de uso significa que los formularios y las pantallas son.sencillos y no se requiere tiempo adicional para descifrarlos. La consistencia implica i|iu: todos los formularios de entrada,

    independientemente de que sean pantallas de entrada o formularios para contestar en la Web, agrupan los datos de formasemejante de un aplicacin a otra, mientras que la simplicidad se refiere a mantener limpios estos mismos dsonos con olpropsito de atraer la atencin del usuario. El atractivo implica que los usuarios dislnitarn al usar los formularios de entradagracias a lo interesante de su diseo.

    DISEO DEUN BUEN FORMULARIO

    El analista de sistemas debe contar con la capacidad para disear formularios completos: y tiles. Es necesarioeliminar los formularios innecesarios que desperdicien los recursos de una organizacin.

    Los formularios son instrumentos importantes para dirigir el curso del trabajo. Son documentos previamenteimpresos que requieren respuestas estandarizadas por parte de los usuarios. Los formularios obtienen y capturan informacinsolicitada por los miembros de la organizacin, que con frecuencia servir de entrada a la computadora. A travs de esteproceso, los formularios sirven a menudo como documentos de origen para el personal de captura de datos o como entradapara las aplicaciones de comercio electrnico.

    Para disear formularios tiles, es necesario ceirse a los cuatro lineamientos siguientes:

    1. Haga formularios fciles de contestar.2. Asegrese de que los formularios cumplen el propsito para el cual se disearon.3. Disee formularios para garantizar que se contesten con precisin.4. Mantenga atractivos los formularios.

    Cada uno de estos cuatro lineamientos se considera por separado en las siguientes secciones.

    Para reducir los errores, acelerar el llenado y facilitar la entrada de datos, es esencial que los formularios sean fcilesde contestar. El costo de los formularios es mnimo en comparacin con el costo del tiempo que los empleados dedican acontestarlos y a ingresar los datos correspondientes en el sistema de informacin. Con frecuencia es posible eliminar elproceso de transcribir al sistema los datos que se capturan en un formulario recurriendo al envo por medios electrnicos. Coneste mtodo a menudo es necesario que los usuarios introduzcan datos por s mismos, a travs de sitios Web configuradospara realizar transacciones con propsitos informativos o de comercio electrnico.

    Flujo del formularioEl diseo de un formulario con el flujo apropiado puede minimizar el tiempo y el esfuerzo que dedican los

    empleados para contestarlo. Los formularios deben fluir de izquierda a derecha y de arriba abajo. El flujo carente de lgicarequiere tiempo adicional y es frustrante. Un formulario que requiere ir directamente al fondo y regresar al principio paracontestarlo refleja un flujo pobre.

    Siete secciones de un formularioUn segundo mtodo que facilita a los usuarios contestar correctamente los formularios es el agolpamiento lgico de

    la informacin. Las siete secciones principales de un formulario son las siguientes:

    1. Encabezado.2. Identificacin y acceso.3. Instrucciones.4. Cuerpo.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    2/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 2

    5. Firma y verificacin.6. Totales.7. Comentarios.

    Estas secciones deben aparecer agrupadas en una pgina como se muestra en la figura 12.1. Observe que las sietesecciones cubren la informacin bsica requerida en la mayora de los formularios. La cuarta parte superior del formulario sededica a tres secciones: el ttulo, la seccin de identificacin y acceso, y la seccin de las instrucciones.

    La seccin del ttulo normalmente incluye el nombre y direccin del negocio que origina el formulario. La seccinde identificacin y acceso incluye cdigos que pueden usarse para archivar el informe y acceder a l posteriormente. Estainformacin es muy importante cuando se requiere que una organizacin guarde el documento un nmero determinado de

    aos. La seccin de las instrucciones dice cmo debe contestarse el formulario y a dnde debe enviarse cuando se complete.La parte media del formulario constituye su cuerpo. Esta parte del formulario requiere el mayor detalle y desarrollo por partede la persona que lo contesta. El cuerpo es la parte del formulario que con mayor probabilidad contendr datos variables.

    La cuarta parte inferior del formulario est compuesta por tres secciones: firma y verificacin, totales y comentarios.Al requerir totales finales y un resumen de comentarios se da a la persona que contesta el formulario una manera lgica determinarlo.

    Ttulos

  • 7/29/2019 Leccion 18 - Diseo de entradas

    3/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 3

    La creacin de ttulos claros es otra tcnica que puede facilitar la tarea de contestar un formulario. Los ttulos leindican a la persona que contesta el formulario qu poner en una lnea, espacio o cuadro en blanco. En la figura 12.2 semuestran varias opciones para crear ttulos: dos tipos de ttulos con lneas, dos tipos de ttulos con casillas, y ejemplos dettulos en recuadros y ttulos en tabla.

    La ventaja de poner el ttulo abajo de la lnea es que hay ms espacio en la propia lnea para los datos. La desventaja

    es que a veces no es claro qu lnea est asociada con el ttulo: la lnea arriba o abajo del ttulo.Los ttulos con lneas pueden colocarse a la izquierda con espacios en blanco y en la misma lnea, o pueden disponerse abajode la lnea en la cual se ingresarn los datos.

    Otra manera para colocar ttulos es dentro de un recuadro en lugar de con una lnea. Los ttulos pueden ponersedentro, arriba o abajo del recuadro. Los recuadros son tiles en los formularios para que los usuarios ingresen los datos en ellugar correcto, e incluso facilitan la lectura al destinatario del formulario. Es importante utilizar un tamao de fuente pequeopara el ttulo de tal manera que no domine el rea de entrada de datos. Se pueden incluir marcas verticales en el recuadro si seplanea que los datos sirvan de entrada en un sistema de cmputo. Si no hay suficiente espacio en un registro para los datos, lapersona que contesta el formulario, en vez del operador que captura los datos, tiene libertad para abreviar los datos. Losttulos tambin pueden incluir notas para ayudar al usuario a ingresar correctamente la informacin, como Fecha(MM/DD/AAAA] o Nombre (Apellido, Nombre, Inicial del Segundo Nombre].

  • 7/29/2019 Leccion 18 - Diseo de entradas

    4/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 4

    Independientemente del estilo de ttulo con lneas que se elija, es importante emplearlos de forma consistente. Porejemplo, es confuso contestar un formulario que tenga ttulos tanto arriba como abajo de la lnea.

    Los ttulos con casillas son la mejor opcin cuando es necesario restringir las opciones de respuesta. Observe la listade mtodos de viaje que se muestra en el ejemplo de eleccin vertical de la figura anterior. Si slo se reembolsan al empleadolos gastos de viajes de negocios para los mtodos de viaje listados, un sistema de eleccin vertical es ms conveniente queuna lnea en blanco. Este mtodo tiene la ventaja adicional de recordar a la persona encargada de verificar los datos quebusque un taln de boleto de avin u otro recibo.

    Un ttulo con casillas horizontales tambin es mejor que un ttulo con lneas cuando la informacin que se requierees rutinaria y constante. Un ejemplo es un formulario que solicite los servicios de uno de los departamentos siguientes: elLaboratorio fotogrfico, el Departamento de impresin, Mantenimiento o Suministros. Los departamentos proporcionanservicios de manera rutinaria a otros en la organizacin y es poco probable que cambien con rapidez.

    Los ttulos de tabla son adecuados en el cuerpo de un formulario donde se requieren detalles. Cuando un empleadocontesta correctamente un formulario con ttulos de tabla, est creando una tabla para la prxima persona que recibe elformulario, con lo cual colabora a organizar coherentemente los datos.

    Una combinacin de ttulos tambin es eficaz. Por ejemplo, los ttulos de tabla se pueden usar para especificar

    categoras como la cantidad, y los ttulos con lneas pueden utilizarse para indicar dnde deben colocarse el subtotal, elimpuesto de ventas y el total. Puesto que los diversos ttulos tienen diferentes propsitos, por lo general es necesario emplearvarios estilos de ttulo en cada formulario.

    SATISFACCIN DEL PROPSITO PREVISTO

    Los formularios se crean para satisfacer uno o ms propsitos en el registro, el procesamiento, el almacenamiento yla recuperacin de informacin de las empresas. A veces es conveniente proporcionar informacin diferente a cadadepartamento o usuario, aunque compartiendo un poco de informacin bsica. En estos casos es donde son tiles losformularios especializados.

    El trmino formulario especializado tambin puede referirse tan slo a la manera en que la imprenta prepara losformularios. Entre los ejemplos de formularios especializados estn los formularios de mltiples partes que se usan para crear

    triplicados instantneos de los datos, los formularios continuos que corren por la impresora sin intervencin del usuario, y losformularios perforados que tienen un taln desprendible que sirve como registro.

    CMO ASEGURAR LA CONTESTACIN PRECISA

    Las tasas de error asociadas a la recopilacin de datos descendern considerablemente cuando los formularios sediseen para garantizar su contestacin precisa. El diseo es importante para lograr que los usuarios hagan lo correcto con elformulario siempre que lo utilicen. Cuando los empleados de servicios, como los encargados de tomar la lectura del consumode energa elctrica o los administradores de inventarios, usan dispositivos porttiles para examinar o teclear datos en el sitioapropiado, se evita el paso adicional de la transcripcin durante la captura de los datos. Los dispositivos porttiles usan latransmisin inalmbrica, o se conectan a sistemas de cmputo ms grandes en los que pueden descargar los datos que hayarecopilado el empleado de servicios. En estos casos no se requiere una transcripcin adicional de lo que haya ocurrido en elcampo.

    CMO HACER FORMULARIOS ATRACTIVOS

    Aunque el atractivo de los formularios se deja para el final, esto no significa que tiene menos importancia. Ms bien,se hace al ltimo porque la tarea de dar atractivo a los formularios se realiza aplicando las tcnicas que vimos en lassecciones anteriores. Los formularios estticos atraen a las personas y motivan a contestarlos.

    Los formularios deben tener una apariencia ordenada. Para ser atractivos, los formularios deben recabar lainformacin en el orden previsto: la convencin indica que se debe pedir nombre, calle, ciudad, estado y cdigo postal (eincluso pas, si fuera necesario). El diseo y flujo apropiados contribuyen al atractivo de un formulario.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    5/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 5

    El uso de diversos tipos de letra en el mismo formulario puede motivar a contestarlo. La separacin de categoras ysubcategoras con lneas gruesas y delgadas tambin puede acrecentar el inters en el formulario. Los tipos de letra y elgrosor de las lneas son elementos de diseo tiles para captar la atencin del usuario y darle la seguridad de que contestarcorrectamente el formulario.

    DISEO DE FORMULARIOS POR COMPUTADORA

    Existen numerosos paquetes de diseo de formularios para PCs. En la figura 12.4 se mencionan algunas de lascaractersticas del software de diseo de formularios electrnicos e impresos.

    La figura 12.5 es un ejemplo de pantalla de computadora creada con el software OmniForm de ScanSoft. Estesoftwar e es de gran utilidad para un analista que busca automatizar rpidamente procesos de negocios para los cuales yaexisten formularios impresos. Los formularios impresos pueden digitalizarse y despus publicarse en la Web . El analistapuede usar un conjunto de herramientas para preparar campos, casillas de verificacin, lneas, cuadros y muchas otrascaractersticas .

  • 7/29/2019 Leccion 18 - Diseo de entradas

    6/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 6

    CONTROL DE LOS FORMULARIOS DE NEGOCIOS

    El control de los formularios de negocios es una tarea importante. Los negocios a menudo tienen un especialista para

    controlar los formularios, pero algunas veces este trabajo recae en el analista de sistemas, quien establece e implementa elcontrol de los formularios.

    Las tareas bsicas para controlar los formularios incluyen asegurarse de que cada formulario en uso cumple supropsito especfico y que este propsito es integral para el funcionamiento de la organizacin, evitando la duplicacin de lainformacin recopilada y de los formularios que la recolectan, diseando formularios eficaces, decidiendo cmo reproducirlos formularios de la manera ms econmica y estableciendo procedimientos que hagan disponibles los formularios (cuandose necesiten] al costo ms bajo posible. A menudo esto implica hacer disponibles los formularios en la Web para suimpresin. Cada formulario debe incluir un nmero nico y la fecha de revisin (mes/ao), independientemente de si secontesta y enva de manera manual o electrnica.

    DISEO ADECUADO EN PANTALLAS Y FORMULARIOS PARA WEB

    Mucho de lo que ya hemos dicho sobre el diseo adecuado de formularios se puede aplicar al diseo de pantallas yal diseo de sitios Web y pginas Web. Una vez ms, el analista debe tener siempre presente al usuario al disear pantallas.Sin embargo, hay algunas diferencias y los analistas de sistemas deben esforzarse por comprender las cualidades especficasde las pantallas en lugar de adoptar ciegamente las convenciones de los formularios impresos. Una gran diferencia es laconstante presencia de un cursor [un bloque de luz u otro tipo de puntero] en la pantalla, que indica al usuario cul es laposicin actual para introducir datos. Conforme los datos se teclean en la pantalla, el cursor se mueve un carcter adelante,sealando la direccin.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    7/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 7

    Otra diferencia principal entre los formularios electrnicos, los destinados a la Web y los estticos consiste en quelos diseadores pueden incluir ayuda especfica dependiendo del contexto en que se encuentre en cualquier formulario que seconteste electrnicamente. Esta prctica puede reducir la necesidad de mostrar instrucciones en cada lnea, y eliminar enconsecuencia la apariencia desordenada del formulario y las llamadas al soporte tcnico. El uso de un enfoque basado en laWeb tambin permite al diseador aprovechar los hipervnculos, asegurando de esta manera que los formularios se contestencon precisin al proporcionar a los usuarios ejemplos a travs de hipervnculos hacia formularios contestados correctamente.En esta seccin presentamos lincamientos para un diseo eficaz de pantallas. Dichos lineamientos se presentan para ayudaren la realizacin de los objetivos globales del diseo de entrada de efectividad, precisin, facilidad de uso, simplicidad,consistencia y atractivo.

    Los cuatro lincamientos para el diseo de pantallas son importantes pero no minuciosos. Como vio en el captulo 11,incluyen lo siguiente:

    1. Mantener la sencillez de la pantalla.2. Mantener consistente la presentacin de la pantalla.3. Facilitar el movimiento del usuario entre las pantallas y pginas desplegadas.4. Crear pantallas atractivas.

    En las siguientes subsecciones, desarrollamos cada uno de estos lineamientos y presentamos muchas tcnicas dediseo para apegarse a los cuatro lineamientos.

    CMO MANTENER LA SENCILLEZ DE LA PANTALLA

    El primer lineamiento para el diseo adecuado de pantallas es mantener la sencillez. La pantalla slo debe mostrar loque sea necesario para emprender una accin particular. Para el usuario ocasional, 50 por ciento del rea de la pantalla debecontener informacin til.

    Tres secciones de pantallaLa salida de la pantalla se debe dividir en tres secciones. La parte superior presenta una seccin de "encabezado". El

    encabezado contiene los ttulos del software y de los archivos abiertos, de mens desplegables e iconos que realizan tareasespecficas.

    La seccin media se conoce como "cuerpo" de la pantalla. El cuerpo se puede usar para la entrada de datos y seorganiza de izquierda a derecha y de arriba abajo, debido a que las personas en las culturas occidentales mueven sus ojos enuna pgina de esta forma. En esta seccin se deben proporcionar ttulos e instrucciones que ayuden al usuario a teclear losdatos correctos en el lugar correspondiente. La ayuda especfica dependiendo del contexto tambin est disponible cuando elusuario hace clic con el botn derecho del ratn en la seccin del cuerpo de la pantalla.

    La tercera seccin de la pantalla corresponde a "los comentarios y las instrucciones". Esta seccin podra desplegarun men corto de comandos que le recuerdan al usuario ele mentos bsicos, por ejemplo cmo cambiar pginas o funciones,guardar el archivo o terminar la entrada. La inclusin de dichos elementos puede hacer que los usuarios inexpertos se sientaninfinitamente ms seguros sobre su habilidad para operar la computadora.

    Otra forma de mantener la sencillez de la pantalla es usar la ayuda sensible al contexto y otras ventanasdesplegables. Los usuarios pueden minimizar o maximizar el tamao de las ventanas conforme se requiera. De esta forma, losusuarios empiezan con una pantalla sencilla y bien diseada que pueden personalizar y controlar mediante el uso de ventanasmltiples. Los hipervnculos de un formulario completado en la Web cumplen un propsito similar.

    El segundo lincamiento para el diseo adecuado de pantallas es mantener consistentes las pantallas. Si los usuariosestn trabajando desde los formularios impresos, las pantallas deben seguir lo que se muestra en el papel. Las pantallas sepueden mantener consistentes al colocar informacin en la misma rea cada vez que se accede una nueva pantalla. Tambin,la informacin relacionada lgicamente se debe agrupar de forma consistente: el nombre y la direccin van juntos, no el

  • 7/29/2019 Leccion 18 - Diseo de entradas

    8/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 8

    nombre y el cdigo postal. Aunque la pantalla debe tener un movimiento natural de un rea a otra, la informacin no se debepasar de un grupo a otro. Usted no querra el nombre y la direccin en un rea y el cdigo postal en otra.

    El tercer lineamiento para el diseo adecuado de pantallas es hacerlo fcil de mover de una pgina a otra. La regla delos tres clics dice que los usuarios deben poder obtener las pginas que necesitan con slo tres clics del ratn o del teclado.Los formularios basados en la Web facilitan el movimiento con el uso de hipervnculos a otras pginas Web relevantes. Otromtodo comn para el movimiento es que los usuarios tengan la sensacin de que se estn moviendo fsicamente a unapgina nueva. Por lo menos hay tres formas en que esta ilusin de movimiento fsico se desarrolla en las pantallas:

    1. Desplazamiento usando las flechas de las teclas de PgDn (Av Pg).2. Ventanas emergentes sensibles al contexto.3. Dilogo en pantalla.

    El cuarto lineamiento para el diseo adecuado de pantallas es crear una pantalla atractiva para el usuario. Si losusuarios ven atractivas las pantallas, probablemente sean ms productivos, necesiten menos vigilancia y cometan menoserrores. Tambin, algunos de los principios de diseo usados para los formularios se aplican aqu, y algunos principios

    estticos ya han aparecido en un contexto ligeramente diferente.

    Las pantallas deben atraer a los usuarios hacia ellos y deben atrapar su atencin. Esta meta se realiza con el uso deun rea bastante abierta que incluye los campos de entrada de datos de manera que la pantalla logre una apariencia atractiva.Nunca atestara un formulario en papel; del mismo modo, nunca debe atestar una pantalla. Seguramente estar en una mejorsituacin si usa ventanas mltiples o hipervnculos que si amontona todo en una pgina. Al crear pantallas que a primera vistason fciles de entender, atrae tanto a los usuarios inexpertos como a los experimentados.

    Use flujos lgicos en el diseo de sus pginas desplegadas. Organice el material para aprovechar la forma en quetrabajan las personas de manera que puedan desenvolverse con facilidad. Tambin, divida de forma consistente lainformacin en las tres secciones ms pequeas detalladas anteriormente.

    Si la pantalla es necesariamente compleja, el grosor de las lneas de separacin entre las subcategoras puede variar

    para agregar distinciones ms detalladas. La variedad ayuda a que el usuario vea rpidamente el propsito de la pantalla y quelementos de datos se requieren.

    Con la llegada de las GUIs, es posible hacer pantallas de entrada de datos muy atractivas. Al usar color o cuadrossombreados y crear cuadros y flechas tridimensionales puede hacer formularios amigables y divertidos para el usuario. Lafigura 12.8 muestra un ejemplo de una pantalla eficaz de entrada de datos de pedidos. Estas caractersticas tambin se puedenaplicar a los formularios destinados a contestarse en la Web.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    9/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 9

    Vdeo inverso y cursores intermitentesOtras tcnicas tambin pueden mejorar eficazmente el atractivo de las pantallas, pero slo si se usan con

    moderacin. stas incluyen vdeo inverso, un cursor intermitente o campos y tipos de fuentes en varios estilos y tamaos.Cuando considera el uso de estas tcnicas, la simplicidad an es la clave. Primero disee una pantalla que incluir lainformacin bsica. Despus, si an se necesita una gran diferenciacin, los elementos fundamentales se pueden embellecer.

    Uso de diferentes tipos de fuenteEl estado presente de los sistemas de cmputo y del software permiten el uso de tipos de fuentes de diferentes estilos

    y tamaos. Los tipos de fuente son otra forma de hacer pantallas atractivas para los usuarios. Los diferentes estilos mejoran ladiferenciacin entre categoras. Por ejemplo, los estilos de fuente negrita y sans serif se pueden usar para denotar categorasprincipales y para dar a las pantallas una apariencia moderna. Las fuentes ms grandes pueden indicar los ttulos para loscampos de entrada de datos.

    Al considerar el uso de diferentes estilos y tamaos de fuente, pregntese a s mismo si realmente ayudan al usuarioa entender y aprobar la pantalla. Si atraen la atencin indebida al diseo de la pantalla o si sirven como una distraccin,omtalos. Est consciente que no todas las pginas Web se ven iguales en los diferentes navegadores. Pruebe sus formularioscon una variedad de combinaciones para ver si las combinaciones de color resultantes sern agradables o desagradables parala mayora de los usuarios.

    Los iconos son representaciones grficas en pantalla que simbolizan las acciones de la computadora y que losusuarios podran seleccionar usando un ratn, teclado, lpiz ptico o palanca de juegos. Los iconos cumplen funcionessimilares a las palabras y se podran reemplazar en muchos mens, debido a que su significado se entiende con mayor rapidezque las palabras.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    10/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 10

    Hay algunos lineamientos para el diseo de iconos eficaces. Las formas se deben reconocer con facilidad de maneraque al usuario no se le exija dominar un vocabulario nuevo. La mayora de usuarios actualmente conoce muchos iconos. Eluso de iconos estndar puede aprovechar rpidamente este conocimiento comn de sus significados. Un usuario podrasealar un archivero, "extraer" un icono de carpeta de archivo, "tomar" una parte del icono de papel y "tirarlo" en la papelera.Al usar los iconos estndar, diseadores y usuarios ahorran tiempo.

    Los iconos para una aplicacin particular se deben limitar aproximadamente a 20 figuras reconocibles, de maneraque el vocabulario del icono no sea abrumador y se pueda conseguir un esquema de codificacin importante. Use los iconosde forma consistente en las aplicaciones donde aparecern en conjunto para asegurar la continuidad y comprensibilidad. Porlo regular, los iconos son tiles si son significativos.

    DISEO DE LA INTERFAZ GRFICA DE USUARIO

    Una interfaz grfica de usuario (GUI) es la forma en que los usuarios interactan con los sistemas operativosWindows y Macintosh. A esto tambin se le conoce como interfaz de apuntar y hacer clic. Los usuarios pueden usar un ratnpara hacer clic en un objeto y arrastrarlo a una posicin. La interfaz grfica de usuario aprovecha las caractersticasadicionales en el diseo de pantallas tales como cuadros de texto, casillas de verificacin, botones de opcin, cuadros delistas y cuadros de listas desplegables, deslizadores y botones giratorios, mapas de imgenes y cuadros de dilogo con fichas.

    Cuadros de textoUn rectngulo representa un cuadro de texto, como se mencion anteriormente, y se usa para delinear la entrada de

    datos y los campos de pantalla. Se debe tener cuidado para asegurar que el cuadro de texto es lo suficientemente grande paraacomodar todos los caracteres que se deben teclear. Cada cuadro de texto debe tener un ttulo del lado izquierdo, que describelo que se debe teclear o lo que se debe desplegar en el cuadro. Los datos de carcter se deben alinear a la izquierda y los datosnumricos a la derecha.

    Casillas de verificacinEn el ejemplo de los controles GUI, se usa una casilla de verificacin para indicar el nuevo cliente. Las casillas de

    verificacin contienen una X o estn vacas, de acuerdo a si el usuario seleccion o no la opcin; se usan para opciones noexcluyentes en las cuales una o ms de las opciones se puede activar. Una notacin alternativa es usar un botn cuadrado conuna marca de verificacin (/) para indicar que la opcin se ha seleccionado. Observe que el texto de la casilla de verificacin,o etiqueta, normalmente se pone a la derecha de la casilla. Si hay ms de una casilla de verificacin, las etiquetas deben teneralgn orden con respecto a dichas casillas, ya sea alfabtico o con el elemento normalmente verificado en primer lugar de una

    lista. Si hay ms de 10 casillas de verificacin, agrpelas en un recuadro con borde.

    Botones de opcinUn crculo, llamado botn de opcin, se usa para seleccionar opciones excluyentes. Slo se puede elegir una de

    varias opciones. Nuevamente las opciones se ponen a la derecha del botn, normalmente en alguna secuencia. Si hay unaopcin que se elige con frecuencia, normalmente aparece de forma predeterminada cuando la pgina se despliega por primeravez. Comnmente hay un rectngulo, llamado grupo de opcin, que encierra a los botones de opcin. Si hay ms de seisbotones de opcin, considere el uso de un cuadro de lista o de un cuadro de lista desplegable.

    Cuadros de lista y cuadros de lista desplegableUn cuadro de lista despliega varias opciones que se podran seleccionar con el ratn. Un cuadro de lista desplegable

    se usa cuando hay poco espacio en la pgina. Un rectngulo sencillo con una flecha que apunta hacia abajo localizada dellado derecho del rectngulo. Al seleccionar esta flecha se despliega el cuadro de lista. Una vez que se ha seleccionado la

    opcin, sta se despliega en el rectngulo de seleccin desplegable y el cuadro de lista desaparece. Si una opcin seselecciona con frecuencia, normalmente aparece de forma predeterminada en la lista desplegable.

    Deslizadores y botones giratoriosstos se usan para cambiar datos que tienen un rango continuo de valores, dando a los usuarios mayor control al

    escoger los valores. Mover los deslizadores de una direccin a otra (izquierda/derecha o arriba/abajo) aumenta o disminuyelos valores.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    11/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 11

    Mapas de imagenLos campos de mapa de imagen se usan para seleccionar valores dentro de una imagen. El usuario hace clic en un

    punto dentro de una imagen y las coordenadasx/y correspondientes se envan al programa. Los mapas de imagen se usan alcrear pginas Web que contienen mapas con instrucciones para hacer clic en una cierta rea para mostrar un mapa detalladode la regin.

    reas de textoUn rea de texto se usa para introducir una gran cantidad de texto. Estas reas incluyen varias filas, columnas ybarras de desplazamiento que permiten al usuario introducir y ver el texto que excede el tamao del rea del cuadro. Hay dosformas de manejar este texto. Una es evitar el uso del pase automtico de palabras al siguiente rengln, obligando al usuario apresionar la tecla Enter para pasar a la siguiente lnea; el texto se desplazar a la derecha si excede el rea de texto. La otraopcin es permitir el pase automtico de palabras a la siguiente lnea sin necesidad de usar la tecla Enter.

    Cuadros de mensajestos se usan para mostrar advertencias y otros mensajes de retroalimentacin en un cuadro de dilogo, que con

    frecuencia aparecen sobre la pantalla. Estos cuadros de mensaje tienen formatos diferentes. Cada uno debe aparecer en unaventana rectangular y debe explicar claramente el mensaje.

    Botones de comandoUn botn de comando desempea una accin cuando el usuario lo selecciona con el ratn.Calcular el total,

    Agregar pedido y Aceptar son ejemplos. El texto se centra dentro del botn, el cual tiene una forma rectangular. Si hay unaaccin predeterminada, el texto se encierra con una lnea discontinua. El botn tambin se puede sombrear para indicar que esel predeterminado. Al presionar la tecla Enter se selecciona el botn predeterminado.

    El color es una forma atractiva y consolidada para facilitar la entrada de datos a la computadora. El uso apropiado decolor en las pantallas desplegadas le permite contrastar el color de primer plano y el de fondo, resaltar los camposimportantes en los formularios, destacar los errores, resaltar la entrada de cdigo especial y poner atencin a muchos otrosatributos especiales.

    Se deben usar colores muy contrastantes para desplegar el color de primer plano y el de fondo para que los usuariospuedan comprender con rapidez lo que se presenta. El color de fondo afectar la percepcin del color de primer plano. Por

    ejemplo, el verde oscuro podra parecer un color diferente si se quita de un fondo blanco y se pone en uno amarillo.

    Las cinco combinaciones ms legibles de un texto en primer plano sobre un fondo son [empezando con lacombinacin ms legible]:

    1. Negro sobre amarillo.2. Verde sobre blanco.3. Azul sobre blanco.4. Blanco sobre azul.5. Amarillo sobre negro.

    Los menos legibles son rojo sobre verde y azul sobre rojo. Como se puede deducir de estas combinaciones de colorde primer plano y de fondo, se deben usar colores brillantes para el primer plano, con colores menos luminosos para el fondo.Los colores que contrastan fuertemente se deben asignar primero para los campos que se deben diferenciar; despus sepueden asignar otros colores.

    Use el color para resaltar los campos importantes en las pantallas. Los campos que son importantes se puedencolorear de forma diferente que los dems. Tenga en cuenta las normas culturales. Normalmente el rojo significa peligro,pero "en nmeros rojos" tambin significa que una compaa pierde dinero. El verde significa "siga" y es un color seguro enlos pases occidentales.

  • 7/29/2019 Leccion 18 - Diseo de entradas

    12/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 12

    Como con cualquier mejora, los diseadores necesitan cuestionar el valor agregado de usar color. El uso de color sepuede exagerar; una regla heurstica til es no ms de cuatro colores para usuarios principiantes y slo hasta siete paraexperimentados. Los colores irrelevantes distraen a los usuarios y disminuyen su desempeo. Sin embargo, en muchos casosse ha mostrado que el color facilita el uso de formas muy especficas. El color se debe considerar una forma importante decontrastar primeros planos y fondos, resaltar los campos importantes, sealar los errores y permitir codificacin especial deentrada.

    DISEO DE PGINAS DE INTRANET E INTERNET

    Hay ms sugerencias sobre el diseo de un adecuado formulario para contestar en Internet o una Intranet que sedeben observar ahora que ya conoce algunos de los aspectos elementales del diseo de formularios y pantallas de entrada. Lafigura 12.14 muestra una pgina de pedido con un formulario que presenta muchos elementos del diseo adecuado para Web.Los lineamientos incluyen lo siguiente:

    1. Proporcione instrucciones claras, ya que los usuarios Web podran no estar familiarizados con la terminologa de lacomputadora.2. Demuestre una secuencia de entrada lgica para los formularios, sobre todo porque los usuarios podran tener quedesplazarse a un rea de la pgina que al principio puede no ser visible.3. Use una variedad de cuadros de texto, botones de comando, mens desplegables, casillas de verificacin y botones deopcin para realizar funciones especficas y crear inters en el formulario.4. Proporcione un cuadro de texto desplazable si no sabe con certeza cunto espacio necesitarn los usuarios para responder auna pregunta o qu lenguaje, estructura o forma utilizarn los usuarios para introducir datos.5. Prepare dos botones bsicos en cada formulario que se contestar en la Web: Enviar y Limpiar contenido.

    6. Si el formulario es largo y los usuarios se deben desplazar en forma excesiva, divida el formulario en varios formulariossimples en pginas separadas.7. Cree una pantalla de retroalimentacin que indique que se rechaza el envo de un formulario a menos que los camposobligatorios estn completados correctamente. La pantalla de formulario devuelta puede proporcionar comentarios detalladosal usuario en un color diferente. El rojo es apropiado aqu. Por ejemplo, podra ser necesario que un usuario complete elcampo de pas, o que indique un nmero de tarjeta de crdito si ese tipo de pago se ha activado.

    Las aplicaciones de comercio electrnico implican ms que slo un diseo adecuado de sitios Web. Los clientesnecesitan sentirse seguros de que compran la cantidad correcta, que consiguen el precio correcto y de que el costo total deuna compra de Internet, incluyendo los gastos de envo, es lo que esperan. La forma ms comn de establecer esta confianza

  • 7/29/2019 Leccion 18 - Diseo de entradas

    13/13

    [FUNDAMENTOS Y DESARROLLO DE SISTEMAS] IDSYSTEMS 2013

    LECCION 18 Diseo de entradas Pgina 13

    es usar la metfora de un carrito o bolsa de compras. La figura 12.15 muestra los contenidos de un carrito de compras para uncliente que hace una compra. Una caracterstica importante del carrito de compras es que el cliente puede revisar la cantidaddel artculo pedido o puede quitar el artculo por completo.

    Las aplicaciones de comercio electrnico agregan ms demandas al analista quien debe disear los sitios Web paracumplir varios objetivos del negocio, incluyendo la publicacin de la misin corporativa y de los valores con respecto a laconfidencialidad, privacidad y devolucin de productos; el procesamiento eficaz de transacciones; y establecer buenasrelaciones con el cliente.