Diseño de una entrada efectiva

Los usuarios merecen una salida de calidad. En buena

medida, la calidad de la entrada del sistema determina la
calidad de su salida. Es vital que los formularios de entrada,
pantallas y documentos Web interactivos se diseñen teniendo
en cuenta esta relación crítica.
Los formularios de entrada, las pantallas y los formularios
interactivos para llenar a través de la Web bien diseñados
deben cumplir con los objetivos de efectividad, precisión,
facilidad de uso, consistencia, simpleza y atracción. Para
alcanzar todos estos objetivos debemos apegarnos a los
principios básicos de diseño, conocer lo que se requiere como
entrada para el sistema y comprender la forma en que los
usuarios responden a los distintos elementos de los
formularios y pantallas.
Diseño de buenos formularios:

Para diseñar formularios útiles debemos tener en cuenta los

siguientes cuatro lineamientos de diseño de formularios:

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

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

Aunque dotar a los formularios de atractivo se deja al último,

esto no significa que sea menos importante: se hace de esta
forma debido a que para producir formularios atractivos hay
que aplicar las técnicas descritas en las secciones anteriores.
Los formularios estéticos atraen a las personas y éstas se
sienten animadas para completarlos.
Los formularios deben lucir ordenados. Para ser atractivos,
deben solicitar la información en el orden esperado: la
convención dicta que se debe pedir nombre, dirección, ciudad,
estado y código postal (y país, de ser necesario). La
distribución y el flujo apropiados contribuyen al atractivo de
un formulario.
Los formularios se crean para servir a uno o más propósitos
en los procesos de registrar, procesar, almacenar y recuperar
la información para las empresas. Algunas veces es
conveniente proveer distinta información a los diferentes
departamentos o usuarios y compartir al mismo tiempo cierta
información básica. Aquí es donde son útiles los formularios
especializados.
Una interfaz gráfica de usuario (GUI) es la forma en que los
usuarios interactúan con los sistemas operativos Windows y
Macintosh. Esto también se conoce como interfaz de apuntar
y hacer clic (point-and-click). Los usuarios pueden usar un
ratón para hacer clic en un objeto y arrastrarlo hasta una
posición específica. Las interfaces gráficas de usuario
aprovechan las características adicionales en el diseño de
pantallas, como los cuadros de texto, las casillas de
verificación, los botones de opción, los cuadros de lista y de
lista desplegable, los controles deslizantes y botones
aumentar/disminuir, los cuadros de diálogo con controles en
pestañas y los mapas de imagen.
La figura es una pantalla de entrada de Microsoft Access que
muestra varios controles de GUI.

Las páginas Web dinámicas también se pueden usar para

mostrar información de manera temporal, como un bloque de
información de ayuda, un calendario con fechas en las que se
pueda hacer clic para ayudar con los campos para introducir
fechas, los códigos de aeropuertos y demás información
relacionada. Esta información se puede almacenar mediante el
uso de una serie de capas apiladas (que utilizan la propiedad
de índice z de estilos en cascada) en el diseño de la página
Web, cada una encima de la otra.
Páginas web tridimensionales Las páginas web dinámicas
también se pueden usar para mostrar información de manera
temporal, como un bloque de información de ayuda, un
calendario con fechas en las que se pueda hacer clic para
ayudar con los campos para introducir fechas, los códigos de
aeropuertos y demás información relacionada.

Ajax (javascript asíncrono y XML) Ajax es una técnica que

funciona en los navegadores web más recientes. Implica el
uso de javascript y el lenguaje marcado extensible (XML).
Ajax permite a los desarrolladores web construir una página
web construir una página web que funcione en forma más
parecida a un programa de escritorio tradicional.
Uso de color en el diseño de pantallas El color es una forma
atractiva y comprobada de facilitar a los usuarios las tareas
que requieren la entrada de datos en la computadora. Hay que
usar colores de alto contraste para mostrar el primer plano y
fondo, de manera que los usuarios puedan comprender
rápidamente lo que se presenta.
2. Contestar las preguntas de repaso.

1. ¿Cuáles son los objetivos de diseño para los formularios de

entrada en papel, las pantallas de entrada o los formularios
para llenar en Web?
La entrada bien diseñada debe lograr los objetivos de
efectividad, precisión, facilidad de uso, simplicidad,
consistencia y atractivo.
2. Mencione los cuatro lineamientos para el diseño de buenos
formularios.
a. Haga formularios fáciles de contestar.
b. Asegúrese de que los formularios cumplen el propósito
para el cual se diseñaron. Diseñe formularios para garantizar
que se contesten con precisión.
c. Mantenga atractivos los formularios.

3. ¿Qué es el flujo apropiado de un formulario?

Los formularios deben fluir de izquierda a derecha y de arriba

abajo. El flujo carente de lógica requiere tiempo adicional y
es frustrante. Un formulario que requiere ir directamente al
fondo y regresar al principio para contestarlo refleja un flujo
pobre.
4. ¿Cuáles son las siete secciones de un buen formulario?
a. Encabezado.
b. Identificación y acceso.
c. Instrucciones.
d. Cuerpo.
e. Firma y verificación.
f. Totales.
g. Comentarios
5. Mencione cuatro tipos de leyendas para usar en los
formularios.
a. leyendas de línea
b. leyendas de verificación
c. leyendas de tabla
d. leyenda enmarcada

6. ¿Qué es un formulario especializado? ¿Cuáles son algunas

desventajas de usar formularios especializados?
El término formulario especializado también puede referirse
tan sólo a la manera en que la imprenta prepara los
formularios. Entre los ejemplos de formularios especializados
están los formularios de múltiples partes que se usan para
crear triplicados instantáneos de los datos, los formularios
continuos que corren por la impresora sin intervención del
usuario, y los formularios perforados que tienen un talón
desprendible que sirve como registro.
7. Mencione los cuatro lineamientos para el buen diseño de
pantallas.
a. Mantener la sencillez de la pantalla.
b. Mantener consistencia en la pantalla.
c. Facilitar el movimiento.
d. Diseñar una pantalla atractiva.
8. ¿Cuáles son las tres secciones útiles para simplificar una
pantalla?
1. La parte superior o encabezado.
2. La sección media que se conoce como “cuerpo”.
3. La tercera sección corresponde a los “comentarios e
instrucciones”.
9. ¿Cuáles son las ventajas de usar ventanas en pantalla?
• Llenar parcial o totalmente la pantalla con nueva
información.
• Minimizar o maximizar el tamaño de las ventanas
conforme se necesita.
• Hacer ventanas disponibles que faciliten captura rápida y
correcta
• Producir automáticamente una nueva ventana si el código
dado es incorrecto.
• Permitir a los usuarios suspender la captura de datos y
revisar otro archivo.
• Obtener detalles sobre cómo debe continuar la captura de
datos.
• Calcular un valor en pantalla y luego regresar a la captura
de datos
10. . ¿Cuáles son las desventajas de usar ventanas en
pantalla?
o Permiten que el usuario complique una pantalla simple.
o Si se incluyen demasiadas operaciones de ventanas, el
diseñador puede estar invitando a la creación de una pantalla
de apariencia caótica que pueda dar como resultado que un
usuario se sienta perdido y frustrado por todo el
amontonamiento
11. Mencione dos formas en que se puede mantener la
consistencia en las pantallas
o Ubicando la información en la misma área cada vez que es
accesada una nueva pantalla.
o La información que está asociada lógicamente debe estar
agrupada consistentemente: el nombre y la dirección van
juntos, y no el nombre y el código postal
12. Mencione tres formas para facilitar el movimiento
entre las páginas de visualización.
o Desplazamiento
o Petición de más detalles
o Dialogo en pantalla.
13. Mencione cuatro elementos de diseño de interfaz
gráfica. Describa a un lado de cada elemento cuándo sería
apropiado incorporarlo en un diseño de pantalla o en un
formulario para llenar en Web.
o Cuadros de texto Un rectángulo representa un cuadro de
texto, como se mencionó anteriormente, y se usa para delinear
la entrada de datos y los campos de pantalla.
o Botones de opción Un círculo, llamado botón de opción, se
usa para seleccionar opciones excluyentes. Sólo se puede
elegir una de varias opciones.
o Cuadros de lista y cuadros de lista desplegable Un cuadro
de lista despliega varias opciones que se podrían seleccionar
con el ratón. Un botón de comando desempeña una acción
cuando el usuario lo Selecciona con el ratón.
14. ¿Cuándo se deben usar las casillas de verificación?
Si queremos definir opciones que el usuario debe elegir o
escoger, en muchos casos lo más apropiado suele ser utilizar
casillas de verificación o botones de opción (botones de
radio). Las casillas de verificación permiten mostrar al
usuario la posibilidad de marcar una opción como activada,
verdadera o afirmativa, o dejarla sin marcar, lo que representa
una opción desactivada, falsa o negativa.
15. . ¿Cuándo se deben usar los botones de opción?
Los botones de radio se suelen utilizar cuando el usuario debe
elegir sólo una opción específica de varias disponibles.
16. . ¿Cuáles son las dos formas distintas en que se
utilizan los valores de un formulario?
o Se utiliza los datos para actualizar la base de datos.
o Se puede usar en cálculos mediante el uso de JavaScript en
el navegador.
17. ¿Para qué se utilizan los campos ocultos en un
formulario Web?
Los campos ocultos se utilizan para 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 capturar todos
los datos de la transacción.
18. Mencione cuatro tipos de eventos.
o Cambiar un valor.
o Enfocar el campo.
o Enfocar el campo.
o Cargar la página Web.
19. . ¿Qué son las páginas Web dinámicas?
Son aquellas en las que la información presentada se genera a
partir de una petición del usuario de la página.
20. ¿Qué son las páginas Web tridimensionales?
Se usa para mostrar información de manera temporal de un
bloque de información de ayuda, un calendario con fechas en
las que se pueda hacer clip, para ayudar en los campos para
introducir fechas.
21. ¿Cómo mejora Ajax una página Web que cambia en
 base a las acciones de los usuarios?
Tiene la ventaja de hacer que la web funciones con más
rapidez y proporcionar a los usuarios una experiencia visual
más uniforme.
22. Mencione las cinco combinaciones más legibles de
colores de primer plano y de fondo para usarlas en las
pantallas.
o Negro sobre amarillo.
o Verde sobre blanco.
o Azul sobre blanco.
o Blanco sobre azul.
o Amarillo sobre negro.
23. Defina lo que significa el término máscaras cuando
se utilizan en el diseño Web.
Son revestimientos divertidos que los clientes pueden agregar
a lo que pueden ser.
24. ¿Cuáles son las cuatro situaciones en las que el
color puede ser útil para el diseño de pantallas y de
formularios para llenar en Web?
o Mantener la pantalla simple.
o Mantener la presentación de la pantalla consistente.
o Facilitar el movimiento del usuario entre las pantallas
o [Link] una pantalla atractiva y agradable.
25. Mencione los siete lineamientos de diseño para un
formulario de llenado basado en Web.

1. Proveer instrucciones claras.

2. Demostrar una secuencia de entrada lógica para los
formularios de llenado.
3. Usar varios cuadros de texto, botones, menús desplegables,
casillas de verificación y botones de opción para funciones
específicas y crear interés en el formulario.
4. Proveer un cuadro de texto desplazable si no está seguro
sobre cuánto espacio necesitarán los usuarios para responder a
una pregunta.
5. Preparar dos botones básicos en todos los formularios de
llenado en Web: Enviar y Borrar formulario.
6. Si el formulario es extenso y los usuarios se deben
desplazar con mucha frecuencia.
7. Crear una pantalla de retroalimentación que se niegue a enviar un
formulario a menos que se llenen los campos obligatorios correctamente.
 Preguntas de repaso del capítulo 12

1. ¿Cuáles son los objetivos de diseño para los formularios de entrada en

papel, las pantallas de entrada o los formularios para llenar en Web?
La entrada bien diseñada debe lograr los objetivos de efectividad, precisión, facilidad de
uso, simplicidad, consistencia y atractivo.

2. Mencione los cuatro lineamientos para el diseño de buenos

formularios.
1. [Link] formularios fáciles de contestar.
2. Asegúrese de que los formularios cumplen el propósito para el cual sediseñaron.
[Link]ñe formularios para garantizar que se contesten con precisión.
4. Mantenga atractivos los formularios.

3. ¿Qué es el flujo apropiado de un formulario?

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

4. ¿Cuáles son las siete secciones de un buen formulario?

➢ Encabezado.
➢ Identificación y acceso.
➢ Instrucciones.
➢ Cuerpo.
➢ Firma y verificación.
➢ Totales.
➢ Comentarios

5. Mencione cuatro tipos de leyendas para usar en los formularios.

➢ leyendas de línea
➢ leyendas de verificación
➢ leyendas de tabla
➢ leyenda enmarcada
6. ¿Qué es un formulario especializado? ¿Cuáles son algunas
desventajas de usar formularios especializados?
El término formulario especializado también puede referirse tan sólo a la manera en que
la imprenta prepara los formularios. Entre los ejemplos de formularios especializados
están los formularios de múltiples partes que se usan para crear triplicados instantáneos
de los datos, los formularios continuos que corren por la impresora sin intervención del
usuario, y los formularios perforados que tienen un talón desprendible que sirve como
registro.

7. Mencione los cuatro lineamientos para el buen diseño de pantallas.

1. Mantener la sencillez de la pantalla.
2. Mantener consistencia en la pantalla.
3. Facilitar el movimiento.
4. Diseñar una pantalla atractiva.

8. ¿Cuáles son las tres secciones útiles para simplificar una pantalla?
1. La parte superior o encabezado.
2. La sección media que se conoce como “cuerpo”.
3. La tercera sección corresponde a los “comentarios e instrucciones”.

9. ¿Cuáles son las ventajas de usar ventanas en pantalla?

➢ Llenar parcial o totalmente la pantalla con nueva información.

➢ Minimizar o maximizar el tamaño de las ventanas conforme se necesita.
➢ Hacer ventanas disponibles que faciliten captura rápida y correcta
➢ Producir automáticamente una nueva ventana si el código dado es incorrecto.
➢ Permitir a los usuarios suspender la captura de datos y revisar otro archivo.
➢ Obtener detalles sobre cómo debe continuar la captura de datos.
➢ Calcular un valor en pantalla y luego regresar a la captura de datos

10. ¿Cuáles son las desventajas de usar ventanas en pantalla?

➢ Permiten que el usuario complique una pantalla simple.
➢ ·Si se incluyen demasiadas operaciones de ventanas, el diseñador puede estar
invitando a la creación de una pantalla de apariencia caótica que pueda dar como
resultado que un usuario se sienta perdido y frustrado por todo el
amontonamiento.
11. Mencione dos formas en que se puede mantener la consistencia en
las pantallas.
➢ Ubicando la información en la misma área cada vez que es accesada una nueva
pantalla.
➢ La información que está asociada lógicamente debe estar agrupada
consistentemente: el nombre y la dirección van juntos, y no el nombre y el
código postal

12. Mencione tres formas para facilitar el movimiento entre las páginas
de visualización.
➢ Desplazamiento
➢ Petición de más detalles
➢ Dialogo en pantalla.

13. Mencione cuatro elementos de diseño de interfaz gráfica. Describa a

un lado de cada elemento cuándo sería apropiado incorporarlo en un
diseño de pantalla o en un formulario para llenar en Web.
➢ Cuadros de texto Un rectángulo representa un cuadro de texto, como se
mencionó anteriormente, y se usa para delinear la entrada de datos y los campos
de pantalla.
➢ Botones de opción Un círculo, llamado botón de opción, se usa para seleccionar
opciones excluyentes. Sólo se puede elegir una de varias opciones.
➢ Cuadros de lista y cuadros de lista desplegable Un cuadro de lista despliega
varias opciones que se podrían seleccionar con el ratón.
➢ Un botón de comando desempeña una acción cuando el usuario lo Selecciona
con el ratón.

14. ¿Cuándo se deben usar las casillas de verificación?

Si queremos definir opciones que el usuario debe elegir o escoger, en muchos casos lo
más apropiado suele ser utilizar casillas de verificación o botones de opción (botones de
radio).
Las casillas de verificación permiten mostrar al usuario la posibilidad de marcar una
opción como activada, verdadera o afirmativa, o dejarla sin marcar, lo que representa
una opción desactivada, falsa o negativa.
15. ¿Cuándo se deben usar los botones de opción?
Los botones de radio se suelen utilizar cuando el usuario debe elegir sólo una opción
específica de varias disponibles.

16. ¿Cuáles son las dos formas distintas en que se utilizan los valores de
un formulario?
➢ Se utiliza los datos para actualizar la base de datos.
➢ Se puede usar en cálculos mediante el uso de JavaScript en el navegador.

17. ¿Para qué se utilizan los campos ocultos en un formulario Web?

Los campos ocultos se utilizan para 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 capturar todos los
datos de la transacción.

18. Mencione cuatro tipos de eventos.

➢ Cambiar un valor.
➢ Enfocar el campo.
➢ Enfocar el campo.
➢ Cargar la página Web.

19. ¿Qué son las páginas Web dinámicas?

Son aquellas en las que la información presentada se genera a partir de una petición del
usuario de la página.

20. ¿Qué son las páginas Web tridimensionales?

Se usa para mostrar información de manera temporal de un bloque de información de
ayuda, un calendario con fechas en las que se pueda hacer clip, para ayudar en los
campos para introducir fechas.

21. ¿Cómo mejora Ajax una página Web que cambia en base a las
acciones de los usuarios?
Tiene la ventaja de hacer que la web funciones con más rapidez y proporcionar a los
usuarios una experiencia visual más uniforme.

22. Mencione las cinco combinaciones más legibles de colores de primer

plano y de fondo para usarlas en las pantallas.
➢ Negro sobre amarillo.
➢ Verde sobre blanco.
➢ Azul sobre blanco.
 ➢ Blanco sobre azul.
➢ Amarillo sobre negro.

23. Defina lo que significa el término máscaras cuando se utilizan en el

diseño Web.
Son revestimientos divertidos que los clientes pueden agregar a lo que pueden ser.

24. ¿Cuáles son las cuatro situaciones en las que el color puede ser útil
para el diseño de pantallas y de formularios para llenar en Web?
1. Mantener la pantalla simple.
2. Mantener la presentación de la pantalla consistente.
3. Facilitar el movimiento del usuario entre las pantallas
4. Crear una pantalla atractiva y agradable.

25. Mencione los siete lineamientos de diseño para un formulario de

llenado basado en Web.
1. Proveer instrucciones claras.
2. Demostrar una secuencia de entrada lógica para los formularios de llenado.
3. Usar varios cuadros de texto, botones, menús desplegables, casillas de
verificación y botones de opción para funciones específicas y crear interés en el
formulario.
4. Proveer un cuadro de texto desplazable si no está seguro sobre cuánto espacio
necesitarán los usuarios para responder a una pregunta.
5. Preparar dos botones básicos en todos los formularios de llenado en Web: Enviar
y Borrar formulario.
6. Si el formulario es extenso y los usuarios se deben desplazar con mucha
frecuencia.
7. Crear una pantalla de retroalimentación que se niegue a enviar un formulario a
menos que se llenen los campos obligatorios correctamente.