Guías y Heurísticas de Diseño

1. Guías y Heurísticas de Diseño

2. Estructura Ventanas, Cajas de Diálogo y Menús

3. Ventanas primarias y secundarias • Fondos (‘backgrounds’) utilizados por los controles • Utilizar ventanas en cascada • Usar “tiling” sólo cuando la información necesita ser visualizada simultáneamente • Ajustar el tamaño de las ventanas secundarias a la cantidad de información contenida.

4. Ventanas primarias y secundarias • Evitar el scroll horizontal InternetExplorer

5. Cajas de diálogo • Permiten al usuario completar un conjunto de acciones de una tarea particular • Usar diálogos modales para tareas discretas y pequeñas • Usar diálogos no modales para permitir continuar el trabajo con otras ventanas • Usar diálogos expandidos, en lugar de varias ventanas en cascada

6. Cajas de diálogo • Corresponder el orden de navegación con el orden de los campos (Unisyn's Automate Pro)

7. ‘Tabs’ • Usarlos para categorías discretas de información • Un conjunto de tabs debe relacionarse a un objeto específico • Convenientes cuando el orden de la información depende del usuario o tarea • La información debe ser independiente entre tabs • Usar solo 1 o 2 filas de tabs • Colocar los tabs en una ventana o caja de diálogo

8. Menúes • Roles: • Principal forma de navegación • Brindan un modelo mental al usuario • Rotular los ítems con mucho cuidado y testeo • Utilizar una inicial mayúscula • Seguir los estándares de la plataforma

9. Barra de Menúes • Contienen la principal funcionalidad de la aplicación • Corresponder los elementos de la barra con el flujo de trabajo del usuario • Dar mayor peso a las tareas críticas o frecuentes • Colocar los ítems específicos de cada menú donde mejor sean localizados por el usuario • Utilizar sólo una palabra por item • Usar sólo una línea para la barra de menúes • No deshabilitar items en la barra • Los items en la barra siempre deben activar un menú drop-down

10. Barra de menúes • Los items no deben ser acciones ni abrir cajas de diálogo

11. Menúes Drop-down • Proporcionan mayor información a los usuarios • Utilizar más de un item en cada menú • No usar el mismo nombre del item en la barra • Limitar el tamaño a lo sumo una pantalla • Colocar los items críticos o frecuentes en el tope • Usar barras separadoras • No use más de dos niveles de cascada • Utilizar ‘(...)’ para indicar diálogos • Utilizar aceleradores para tareas frecuentes • Utilizar aceleradores consistentemente

12. Menúes Pop-up • Proveen ‘shortcuts’ para usuarios expertos • Los items del menú deben estar relacionados con el contexto en el que se activó el menú • Las acciones del menú pop-up deben estar colocadas también en otros lugares de la interfaz Algunas acciones sólo pueden ser accedidas mediante pop-ups (Visual Labels)

13. Barras de herramientas (‘toolbars’) • Proporcionan ‘shortcuts’ o controles difíciles de expresar en palabras • Consistencia: usar el mismo gráfico para la misma función • Permitir mover las barras • Permitir la personalización de las barras • Usar ‘tooltips’ Cada icono activa un menú No existe indicación del estado (SimCity)

14. Relación toolbars, botones y menúes • ‘Toolbars’ • Acciones frecuentes, entre distintas pantallas • Botones • Acciones más frecuentes y críticas • Barra de menúes y menúes drop-down • Todas las acciones: frecuentes, críticas, e infrecuentes

15. Relaciones El toolbar sólo debe proveer acceso rápido a items frecuentes, no a menues (usar el menú bar) (Internet Explorer)

16. Interacción Controles

17. Controles • La efectividad de la elección de un control depende de: • Si el control es apropiado para la tarea a efectuar • Las reglas de consistencia utilizadas

18. Command Buttons • Acciones • Mirando los botones, el usuario debiera comprender fácilmente las acciones a realizar. • Utilizarlos para acciones inmediatas, frecuentes o críticas. • Prestar atención al rótulo de los botones • Rotular los botones consistentemente • Intente reemplazar la palabra ‘Ok’ con un término más específico • Colocar tamaños similares para los botones • Separar los botones del resto de la caja de diálogo • Agrupar los botones • Colocar y ordenar los botones consistentemente • Utilizar ‘(...)’ donde se necesite entrada de datos • El botón por defecto debiera ser no destructivo

19. Command Buttons • Los command buttons no deben activar menúes

20. Radio Buttons • Selección de un ítem en una lista • Rotular items con cuidado • Agrupar botones, y rotular al grupo • Alinearlos verticalmente • Limitar la cantidad a 6 o menos • Elegir el orden de los botones (frecuencia, tarea, alfabetico) • Evitar botones binarios

21. Las listas largas de items deben usar drop-down lists. Esto es un reporte de un proceso de desinstalación!

22. Check Boxes • Selecciones múltiples • ‘Toggling’ de un valor • Rotular items con cuidado • Agruparlos, y rotularlos • Alinearlos verticalmente • Limitarlos a 10 o menos • Elegir un orden

23. Check Boxes • No deben usarse para selecciones exclusivas • Agrupar opciones relacionadas Algunas opciones son exclusivas entre sí (Word)

24. Check Boxes El checkbox es innecesario, ya que es un requerimiento

25. Cajas de texto • Principal forma de ingresar datos • Utilizar un borde para indicar la entrada de datos • Mostrar los datos read-only sin un borde • Deshabilitar campos temporalmente protegidos • Utilizar una longitud similar a la de los posibles datos • Alinear, agrupar y rotular las cajas de texto • Colocar los rótulos a la izquierda • Colocar ‘:’ luego de los rótulos

26. List Boxes • Alternativa a listas de radio buttons extensas • Utilizarlos para datos dinámicos • Rotular cada lista • Utilizar filtros para listas largas • Utilizar listas drop-down para ahorrar espacio

27. List Boxes • No usar listas para pocos items Microsoft’s File Manager Vbasic 5.0 2000 entradas. Organizar datos!

28. List Boxes con selección múltiple • Utilizarlas como alternativas en lugar de múltiples check boxes • Proveer instrucciones al usuario • Considerar una caja de selección ‘resumen’ • Considerar la posibilidad de incluir botones ‘select all’ o ‘deselect all’

29. Tablas • Ingreso de grandes cantidades de información simultánea • Utilizar tablas para comparaciones entre datos • Rotular todas las columnas • Justificar a izquierda los rótulos

30. Sliders • Selección visual de valores • Utilizarlos para rangos de datos • Mostrar el valor actual • Permitir el ingreso de un valor exacto • Proveer flechas para incrementos pequeños

31. Presentación

32. Presentación • Muestra de datos en pantallas y ventanas • Considerar las acciones que efectuará el usuario con los datos • Comparaciones? • Selecciones?

33. Layout • Organizar las ventanas y diálogos, de acuerdo al flujo de trabajo • Utilizar una cantidad apropiada de información • Organizar información dentro de una ventana • Elegir un flujo horizontal o vertical • Agrupar datos similares • Minimizar los márgenes diferentes

34. Fuentes • Utilizar un font Sans Serif (ej. Arial) • No utilizar cursivas o subrayados • Evitar el uso de fonts coloreados • Utilizar negrita para enfatizar • Evitar cambiar el tamaño del font • Utilizar una fuente de tamaño 8 (mínimo) • Minimizar el número de fonts diferentes.

35. Colores • Cuidado con los colores: generalmente distraen al usuario, y no incrementan la usabilidad • Utilizar colores para obtener la atención • Emplear colores con ‘highlighting’ redundante • Utilizarlos cuidadosamente en los toolbars (íconos) • Respetar los significados culturales del color • Utilizar fondos claros para las áreas principales • Evitar combinaciones dificiles de leer o textos azules • Permitir la personalización de los colores.

36. Colores Falta de contraste (puede no ser percibido por algunos usuarios) Quick Time 4.0 Player Mensajes muy parecidos (error y éxito) (Easy CD Creator)

37. Tipografía

38. Tipografía • Estilo y apariencia del texto • 1 punto = 1/72 pulgada • 1 pica = 1/6 pulgada = 12 puntos

39. Factores determinantes de la legibilidad de un texto • Tipo de Fuente • Las fuentes proporcionales consumen menos espacio, y son más legibles que las fuentes de ancho fijo

40. Factores determinantes de la legibilidad de un texto • Tamaño de la fuente • 10 puntos es legible, 11 o 12 puntos es mejor • La distinción entre tamaños debería ser al menos 2 puntos • Los cambios menores suelen no ser percibidos claramente

41. Factores determinantes de la legibilidad de un texto • Mayúsculas vs. Minúsculas • La combinación de mayúsculas y minúsculas es más compacta y legible que la utilización de mayúsculas solamente • La utilización sola de mayúsculas decrementa la velocidad de lectura en un 12% • El reconocimiento de las palabras se basa parcialmente en la forma de la palabra. • Las palabras con mayúsculas y minúsculas tienen formas más irregulares, y por lo tanto más reconocibles

42. Factores determinantes de la legibilidad de un texto • Espaciado • El espaciado depende muchísimo de la fuente utilizada • Espaciado entre palabras = aprox. el tamaño de una ‘n’

43. Factores determinantes de la legibilidad de un texto • Espaciado • Espaciado entre líneas = aprox. 2 puntos

44. Factores determinantes de la legibilidad de un texto • Longitud de líneas • aprox. 10 palabras (60 caracteres) por línea para libros • aprox. 5 palabras (30 caracteres) por línea para periódicos

45. Factores determinantes de la legibilidad de un texto • Justificación • Inserción de espacios extra dentro de una línea para crear una línea ajustada a los márgenes derecho e izquierdo • La justificación sin guiones lentifica la lectura debido a los espacios entre palabras • Utilizar justificación a izquierda, o justificado con guiones

46. Factores determinantes de la legibilidad de un texto

47. Factores determinantes de la legibilidad de un texto • Ambiente textual global • Máximo de: • 2 fuentes • 2 estilos (normal, itálico) • 2 pesos (medio, negrita) • 4 tamaños (titulo, subtítulo, texto, nota al pie)

48. Factores determinantes de la legibilidad de un texto • Layout • Utilizar una grilla espacial subyacente para asegurar una localización consistente de textos, columnas, títulos, ilustraciones, etc.

49. Factores determinantes de la legibilidad de un texto • Márgenes • Evitar el “síndrome de los procesadores de texto” (texto alineado junto al borde de la ventana) • utilizar márgenes amplios

50. Factores determinantes de la legibilidad de un texto • Distinción Tipográfica • Información = “cualquier diferencia que hace realmente una diferencia” [Gregory Bateson] • Utilizar distinción tipográfica (negrita, itálica, cambio de fuente, etc.) sólo si implica información extra