Este documento ofrece recomendaciones para el diseño de formularios y diálogos en interfaces de usuario. Explica diferentes tipos de controles como cuadros de texto, áreas de texto, contraseñas, casillas de verificación, botones de opción, botones de acción y listas desplegables. También brinda consejos sobre el tamaño, posición, etiquetas y estándares visuales para mejorar la usabilidad de los formularios.

1. Formularios o diálogos Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/introprogra Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados

2. Diálogos Interactuamos con la computadora Dialogamos con la computadora Preguntas y respuestas

3. A veces no tan diálogo...

4. Diálogos modales Cambian el “modo” de interacción Obligan a atenderlos No se puede trabajar en otra cosa Diálogos no modales También “sin modo” Permiten trabajar en otra cosa O ignorarlos

5. Diálogos sin modo

6. Cuadros de texto Entrada libre de texto Cantidad pequeña Una sola línea

7. Formas incorrectas

8. Area de texto Entrada libre de texto De mayor tamaño Varias líneas

9. Password Para ingreso de palabra clave Datos que no deben ser vistos Números de tarjeta de crédito PIN

10. En todo caso Cuidar el tamaño adecuado Cuidar la posición y orden Usar etiquetas significativas Mantener estándar de etiquetas Alineación Mayúsculas Dos puntos

12. Checkboxes Cuadros de chequeo Indican sí o no, encendido o apagado De acuerdo o no, etc. Importante: valor por omisión

13. Checkboxes

14. Botones de radio Seleccionar entre opciones Pocas: 5 o 6 máximo Pero más de 2 Agrupados Valor por omisión

15. Botones de radio

16. Botones de radio Uso incorrecto

17. Botones de acción Permiten realizar una acción Aceptar, Cancelar, Imprimir, Salir, etc. Mejor si llevan imagen Estandarizar

18. Botones de acción

19. Botones de acción Asignar uno para “Enter” La acción predeterminada Asignar uno para “Escape” La acción de cancelar Ojo con lo que se escribe Y con los iconos

20. Botones de acción

21. Botones de acción

22. Listas desplegables Escoger de una lista de opciones Lista relativamente larga 5 en adelante

23. Listas desplegables Valor por omisión Ancho de la lista Orden dentro de la lista

24. Problemas Seleccionar la imagen correcta Para botones u otros Estandarizar De tamaño adecuado

25. Problemas Ingreso de fechas Ver sitios web Prensa Libre, elPeriódico Formularios de registro Yahoo, Hotmail, etc. Fecha de nacimiento ¿Un solo cuadro? ¿Tres cuadros? Ingreso de horas

26. Problemas Seleccionar el control adecuado El menor número de movimientos Pocas acciones “finas” Sustituír dos o más controles por un botón O por un hipervínculo Ordenarlos adecuadamente Mantener la tabulación correcta

27. Problemas Listas demasiado largas País de origen Producto Hipervínculos a grupos alfabéticos

28. Problema Tome los dígitos de su carné Súmelos hasta que le quede un número de un dígito Si el dígito es 1, 2, o 3 Diseñe un formulario para ingreso de datos generales de colegios Si el dígito es 4, 5, o 6 Diseñe un formulario para ingreso de datos generales de automóviles Si el dígito es 7, 8, o 9 Diseñe un formulario para ingreso de datos generales de municipios de Guatemala