Está en la página 1de 45

Documento

1.
a)Formulario estático para capturar datos.
b)Pantalla de entrada de datos.
1. ¿Cuál es el nombre de c/u dec) Formulario Web para capturar datos.
estos elementos? 2. La ENTRADA de DATOS
2. ¿Qué constituyen para 3. un
ENTRADA.
Sistema Información?
3. ¿La calidad de la salida es
determinada por la calidad de
la…? 2

Dr. Francisco
Dr. Francisco Ramírez
Ramírez Veliz
Veliz
Universidad Nacional del Callao
Diseño de una Entrada Efectiva

Dr. Francisco
Dr. Francisco Ramírez VelizVeliz
Ramírez
¿ Que le parece esta pantalla de registro de paciente de un hospital de veteranos?

Reporte de Examen Audiológico

Apellido del paciente Nombre

Estación de examen Fecha del examen


Número de paciente Número del seguro social
Primer examen Número de reporte
CONDUCCIÓN DE AIRE
Oído derecho Oído Izquierdo
500 1000 2000 4000 6000 6000
500 1000 2000 4000

CONDUCCIÓN DE HUESO
Oído derecho Oído Izquierdo
500 1000 2000 4000 6000 500 1000 2000 4000 6000

SECCIÓN DE AUDIOMETRÍA VOCAL Comentarios [ ]


LIMITE DE PERCEPCIÓN DEL HABLA
Oído derecho [ ]
Oído izquierdo [ ] Remitido por [ ]
DISCRIMINACIÓN DEL OÍDO DERECHO Razón de la remisión
% [ ] Bloqueo [ ] Audiólogo que examinó
DISCRIMINACIÓN DEL OÍDO IZQUIERDO Próxima cita
% [ ] Bloqueo [ ]

2
Se debe volver a diseñar para que sea más amigable con
el usuario. Se puede usar más de una página si es
Dr. Francisco Ramírez Veliz
necesario.
Diseño de una Entrada Efectiva

Diseño de una
Entrada Efectiva

1. Diseño de
2. Diseño Formularios 3. Diseño de páginas
Formularios de
Web y Pantalla De Intranet e Internet
Entrada Funcionales

Dr. Francisco Ramírez Veliz


Objetivos generales del diseño de la entrada efectiva

1. Efectividad Deben cumplir propósitos específicos en


el sistema

2. Precisión Se refiere al diseño que garantiza que


se va a contestar de manera apropiada
O
B
J 3. Facilidad de Uso Significa que las pantallas y formularios
E son sencillos y no se requiere tiempo
adicional para descifrarlo
T
I Implica que todos los formularios de captura
V 4. Consistencia deben agrupar los datos de forma semejante
O de una aplicación a otra
S
5. Simplicidad Mantener limpio estos diseños para
atraer la atención del usuario.

6. Atractivo Significa que los usuarios disfrutarán al usar los


formularios de entrada gracias a lo interesante del
diseño.
Dr. Francisco Ramírez Veliz
1. Diseño de Formularios Funcionales
Referido al documento en papel, diseñado por el
analista con el propósito de capturar información.
Para el diseño es importante ceñirse a 4
lineamientos:

1. Que los formularios sean fáciles de llenar.


2. Que cumplan con el propósito para el que se
diseñaron.
3. Que su diseño contribuya a que se completen
con precisión.
4. Mantenga atractivos los formularios.

Dr. Francisco Ramírez Veliz


1. Diseño de Formularios Funcionales
1. Hacer que los Formularios sean fáciles de llenar

 Para reducir los errores,


Encabezado Identificación y acceso

agilizar el proceso de Instrucciones


llenado, es importante
diseñar formularios
fáciles de llenar. Cuerpo

 El flujo apropiado puede


minimizar el tiempo y
esfuerzo que dedican los
empleados para
contestarlo.
 Fluye de izquierda a
derecha y de arriba hacia
abajo. Está constituido
por 7 secciones: Cuerpo Totales

 Importante que las


secciones aparezcan
agrupadas en un todo. Comentarios Dr. Francisco Ramirez Veliz

Dr. Francisco Ramírez Veliz


1. Diseño de Formularios Funcionales
2. Cumplir con el propósito previsto para el que fue diseñado.
 Satisfacerpropósitos como: Registrar, Procesar,
almacenar y Recuperar la información para la empresa.
 Formulario Especializado.- Referido a la manera en que la imprenta
prepara el formulario. Es bueno para proveer diferente información a
los departamentos, por ejemplo, recibos pre impresos, formulario de
alimentación continua. sin necesidad de intervención humana.

3. Asegurar que se llenen en forma precisa.


 A través de un buen diseño. Implementando el flujo correcto (de arriba
hacia abajo y de izquierda a derecha.) y que se apegue a la idea de las
7 secciones. Tomar en cuenta hoy en día a los empleados de servicio
que leen medidores o toman inventario usando dispositivo portátiles.
4. Que sean atractivos.
Se hace al final. Los formularios estéticos motivan a las personas para contestarlo.
Deben ser ordenados. Agrupar la información a recabar en categorías y subcategorías
separándolos con líneas gruesas y delgadas.
La distribución y el flujo apropiado contribuyen al atractivo del formulario.
Los tipos de letras y el grosor de las líneas son útiles para captar la atención del
usuario.
Dr. Francisco Ramírez Veliz
1. Diseño de Formularios Funcionales
 Actualmente hay
paquetes de diseño de
formularios disponibles
para PC.
 Mediante el uso de SW,
el analista puede
rápidamente
automatizar procesos de
negocios.
 Usando una caja de
herramientas, puede
configurar campos,
casillas de verificación,
líneas, cuadros y muchas
otras características.
 El mismo SW también
escanea (digitaliza) el
formulario en papel,
definir sus campos y
llenarlo en la PC. Dr. Francisco Ramírez Veliz
1. Diseño de Formularios Web y Pantallas

Cómo Controlar los formularios de la empresa

 Tarea importante a cargo de un


especialista. Si no lo hay , tiene que
hacerlo el Analista de sistemas.
 El formulario debe cumplir su
propósito específico por el cual fue
diseñado.
 Evitar la duplicación de la información
recopilada.
 Diseñar formularios eficaces y de
bajo costo (disponible en la Web para
su impresión).
 Cada formulario incluye un número
único y fecha de revisión (mes/año).

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Es otra forma de capturar datos.
Existe un cursor en la pantalla
que indica donde teclear los
datos. Con la tecla TAB se
avanza de recuadro en
recuadro.
Los lineamientos para el diseño
eficaz de la pantalla son:
1. Mantener la pantalla
simple.
2. Mantener consistente la
presentación de la
pantalla.
3. Facilitar el movimiento
del usuario entre las
pantallas y páginas
desplegadas.
4. Crear pantallas
atractivas y agradables.
Dr. Francisco Ramírez Veliz
2. Diseño de buenos Formularios Web y de Pantallas

 Gran parte de lo dicho en los


formularios estáticos, se puede
trasferir al diseño de pantallas y
web.
 Sin embargo hay diferencias
como la presencia del cursor.
 Otra es la ayuda sensible al
contexto (cuando el puntero del
mouse se coloca en un objeto y
en segundos aparece una
etiqueta).
 Esta practica reduce la
necesidad de las instrucciones
para cada línea.
 En la Web, se puede
aprovechar los hipervínculos
para dar ejemplos de “Cómo se
Debe llenar el formulario”.
 Veamos los cuatro (4)
lineamientos para diseño de
pantallas.
Dr. Francisco Ramírez Veliz
2. Diseño de buenos Formularios Web y de Pantallas
1.- Mantener la pantalla simple
 Sólo debe mostrar lo necesario para
realizar una acción en particular.
 El 50% debe contener información útil.
 Presenta tres secciones de pantalla:
1. Sección “encabezado”.- Título,
menú desplegable e íconos que
realizan tareas específicas..
2. Sección “cuerpo”.- Para la entrada
de datos y se organiza de arriba
hacia abajo y de izquierda a
derecha. (cultura occidental).
3. Sección “los comentarios y las
instrucciones”.- Permite hacer
recordar al usuario un menú básico
como cambiar páginas, guardar
archivos ó terminar la entrada
datos.
ejemplo
Utilizar ayuda sensible al contexto,
botones desplegables que revelen más
información. Usted también puede visualizar la ayuda sensitiva de
contexto, presionando el botón derecho del mouse
Dr. Francisco Ramírez Veliz sobre el ítem en el cuadro de diálogo
2. Diseño de buenos Formularios Web y de Pantallas
2.- Mantener la Pantalla consistente

 Se refiere a que se debe ubicar


la información en la misma área
cada vez que se accede a una
nueva pantalla (y también
estandarizar los nombres de los
títulos (etiqueta); tipo de fuente,
tamaño, etc.).
 Ordenar y agrupar la
información que tengan relación
lógica y de una misma
categoría (ej. Nombre y
dirección van juntos, etc.).
 Sí los usuarios trabajan con
formularios en papel para la Datos generales
captura de datos, la pantalla por un lado y
debe seguir lo que se muestra datos específicos
en otro.
en el papel. Dr. Francisco Ramírez Veliz Ordenamiento
lógico
2. Diseño de buenos Formularios Web y de Pantallas
3.- Facilitar el Movimiento Ventana emergente.
Solicita detalles para
 El usuario tiene la
comida
sensación de control
cuando se mueve a otra
nueva página usando la
tecla Av. Pág.
 Formularios basados en
web utilizan los
hipervínculos para
desplazarse a otra página.
 Ilusión de movimiento físico
entre pantallas se obtiene
mediante flechas, ventanas
emergentes sensibles al
contexto (clic con el botón
derecho aparece una
ventana emergente).
 La regla de los “tres clics”,
establece que el usuario
debe ser capaz de llegar a
la página que necesita en
tres clics o teclado como
máximo. Dr. Francisco Ramírez Veliz
Dr. Francisco Ramírez Veliz
Los Botones: deslizante y aumentar/disminuir son dos componentes
adicionales GUI que el analista puede utilizar para diseñar pantallas de
entrada (Figura 12.5)

Dr. Francisco Ramírez Veliz


2. Diseño de Formularios Web y Pantallas
Diseño de la Interfaz Gráfica de Usuario

 Deslizadores y
botones giratorios.
2. Diseño de buenos Formularios Web y de Pantallas
Diseño de la Interfaz Gráfica de Usuario - GUI
Mapas de imagen
 Se utilizan para
seleccionar valores
dentro de una imagen.
 Se hace clic dentro del
mapa y las coordenadas
x e y son enviadas al
programa.
 Se utilizan mucho al
crear páginas web.
 El mapa contiene
instrucciones para hacer
clic en cierta área y ver
un mapa detallado de la
región.

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Controles y valores de los formularios
 Cada uno de los controles incluidos en
la GUI tiene alguna forma de almacenar
los datos asociados con el control.
 En una página Web, se utiliza un par de
nombre y un valor, lo transmite al
servidor ó se envía en un correo
electrónico junto con el formulario de la
página web.
 El valor se define en el formulario web y
se trasmite al momento de enviar el
formulario.
 El valor consiste de caracteres
tecleados en los cuadros.
 Los valores se pueden usar para
cálculos mediante el uso de JavaScript
en el navegador, como operaciones
aritméticas o tomar decisiones.
Dr. Francisco Ramírez Veliz
2. Diseño de buenos Formularios Web y de Pantallas
Campos Ocultos

 Se llama así porque no son visibles al espectador.


 No ocupa espacio en página web y sólo contiene un
nombre y un valor.
 Se utiliza con la finalidad de almacenar los valores que
se envían de un formulario web al servidor.
 Generalmente se requiere incluir estos valores en un
segundo formulario cuando se requieren formularios
múltiples para completar la transacción.
 Otro ejemplo. Sería capturar el valor de la IP. La
podríamos guardar sin que el usuario la vea. O también
el nombre del usuario ( a través de su email.)
Dr. Francisco Ramírez Veliz
2. Diseño de buenos Formularios Web y de Pantallas
Campos Ocultos

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Páginas Web Dinámicas

 Se conoce con el nombre de página web dinámica a aquélla, cuyo


contenido se genera a partir de lo que un usuario introduce en
una web o formulario.
 El contenido de la página no está incluido en un archivo html
como en el caso de las páginas web estáticas.
 Las aplicaciones más conocidas de las páginas web dinámicas
son:
 Mostrar el contenido de una base de datos, con base en la
información que solicita un usuario a través de un
formulario de web.
 Actualizar el contenido de una base de datos.
 Generar páginas web de contenido estático.
 Mejorar la interacción entre el usuario y el sitio web.

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Páginas Web Tridimensionales
• Páginas Web que cambian a sí mismos como el
resultado de alguna acción del usuario
• Ventajas
– Rapidamente automodificables
• Desventajas
– No funciona si JavaScript esta desactivado
– Páginas Web dinámicas no pueden cumplir con la Ley
de Discapacidad de América.

• Utilice capas apiladas.


• Código se mueve delante de la página Web.
• Código puede ser creado usando JavaScript.
• Analista debe determinar cuándo usar capas.

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Páginas Web Tridimensionales

El analista debe determinar:


 ¿Cómo se construyó la capa?
¿Qué eventos provocaron que se creara la capa?
¿Qué elementos eliminan la capa, como un botón para
cerrar, hacer clic en una fecha, hacer clic fuera de la
región o seleccionar un hotel de la lista?
¿Dónde se debe colocar el bloque que aparezca?
¿Qué tan grande debe ser el bloque, medido en pixeles?
¿Cuáles deben ser los atributos de formato de región,
como color y borde?
¿Qué debe ocurrir al seleccionar una opción?
Dr. Francisco Ramírez Veliz
Páginas Web Tridimensionales
Actualización de
clientes asegurados

Ejemplo de una web


dinámica. El usuario cliclea
en Agregar nueva
Dr. Francisco Ramírez Veliz propiedad y aparece otra
página.
Ajax ( Java Script asíncrono y XML
 Permite construir una página web parecido a un programa de escritorio
tradicional.
 Se requieren nuevos datos, el navegador envía al servidor la petición.
Éste devuelve una pequeña cantidad de datos al navegador. Quien a su
vez actualiza la página.
 Por lo tanto la página Web no se vuelve a cargar. Sólo se actualiza en
forma dinámica.
 Suponiendo que un analista está diseñando una Web tradicional para
hacer reservaciones en un transbordador (crucero) europeo. Este sitio
puede tener varias páginas:
 La 1ra pregunta al cliente: origen, destino, fecha y Nº de
pasajeros
 Los precios varían en Nº de pasajeros y sus edades, entonces
aparece una 2da página para preguntar las edades de los
pasajeros.
 La 3ra página aparece para preguntar el tipo de vehículo deseado
para el transporte terrestre y así sucesivamente.
 Se puede obtener la misma información mediante el uso de la técnica
Ajax.
 Observe la figura que sigue:
Con técnica Ajax, una
página Web dinámica
responde más rápido
a la entrada corta del
usuario.
2. Diseño de buenos Formularios Web y de Pantallas
Uso de color en el Diseño de Pantallas

Las cinco combinaciones más legibles de un texto


en primer plano sobre un fondo son:
1. Negro sobre amarillo.
2. Verde sobre blanco.
3. Azul sobre blanco.
4. Blanco sobre azul.
5. Amarillo sobre negro.
Usar colores brillantes para el primer plano y
Fondo De la grilla negro
colores menos luminosos para el fondo.

Dr. Francisco Ramírez Veliz


2. Diseño de buenos Formularios Web y de Pantallas
Uso de color en el Diseño de Pantallas

Verde agua

Recuadro
rojo

Fondo De la grilla negro

¿Qué le parece el color de esta GUI?


3. Diseño de Páginas de Intranet e Internet
 Existen muchas sugerencias para diseñar formularios electrónicos para ser
contestados a través de la Web.
 Los lineamientos son los siguientes:
1. Proporcionar instrucciones claras para el llenado del formulario electrónico.
2. Tener una secuencia de entrada lógica, en especial para el llenado de
formularios.
3. Use variedad de botones, colores, menús desplegables, casillas de verificación,
cuadros de texto, etc.
4. Para el espacio requerido, utilice el cuadro de texto desplazable.
5. Dos botones básicos: Enviar y Borrar.
6. Si el formulario es largo, divídalo en varios formularios más simples en páginas
separadas.
7. Tomar en cuenta el llenado de los campos obligatorios, de lo contrario una
pantalla de retroalimentación debe aparecer que indique el rechazo (asterisco
rojo).
3. Diseño de Páginas de Intranet e Internet

Aplicaciones de Comercio
Electrónico
• Aplicaciones de comercio
electrónico implican algo más que
buenos diseños de sitios web.
• Los clientes necesitan tener
confianza en el sitio
– Carrito de compras
3. Diseño de Páginas de Intranet e Internet

Pantalla de pedidos
del sitio web
Merchants Bay.
Ejemplo de formulario
de entrada claro, fácil
y funcional.
3. Diseño de Páginas de Intranet e Internet

Proporciona un buen
ejemplo de un carrito
de compras
Dr. Francisco Ramírez Veliz
3. Diseño de Páginas de Intranet e Internet
Dr. Francisco Ramírez Veliz