Guías y Heurísticas de Diseño

Presentación del tema: "Guías y Heurísticas de Diseño"— Transcripción de la presentación:

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

2 Ventanas, Cajas de Diálogo y Menús
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
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

51 Iconos

52 Diseño de Iconos Icono Simbolo visual pequeño
“Una imagen vale por 1000 palabras” Iconos bien diseñados: ahorran espacio en pantalla son rapidamente reconocidos en un ambiente visual complejo facilmente recordados facilitan la internacionalización de las interfaces

53 Asociación Visual

54 Composición de un ícono
Partes estandar de un icono Borde Fondo Imagen Rótulo

55 Principios de Diseño de Iconos
Coherencia Legibilidad Reconocer y recordar Utilización correcta del color

56 Coherencia Diseñar un conjunto de iconos como un todo
El conjunto de iconos debe ser consistente en términos de tamaño, colores, metáforas, nivel de realismo, etc. Los iconos de un conjunto deben estar visualmente balanceados Las distinciones visuales deberían tener significado las decoraciones extrañas distraen

57 Balance de iconos Iconos visualmente no balanceados
ej. Primeras versiones de Paintbrush Los iconos inferiores son simples y visualmente livianos; los iconos superiores son mas pesados El rediseño de iconos en MSPaint es más balanceado y consistente

58 Niveles de realismo Desde fotografías a simples siluetas
Dibujos Caricaturas Bosquejo Silueta Seleccionar solo un nivel de realismo

59 Nivel de abstracción Los iconos pueden ser dibujados en distintos niveles de abstracción

60 Lenguaje de Iconos Un lenguaje icónico es una forma sistemática de combinar símbolos elementales en iconos más complejos Vocabulario: conjunto de símbolos primitivos Gramática: reglas para combinarlos Ej. Windows NT 4.0 (95) Se combinan símbolos primitivos para tipos de aplicaciones y documentos Documento = Aplicación + Tipo Documento [+ Template] [+ Asistente]

61 Lenguaje de iconos Asistente Documento Documento Word Template
Símbolos elementales Tipos de Documentos Template Word Texto Aplicaciones MSWord Asistente template Word

62 Legibilidad Dentro de lo posible, utilizar objetos grandes, lineas en negrita, y áreas simples Considerar la resolución de la pantalla y la distancia de visión del usuario Buen contraste entre el fondo y el frente La forma externa transmite la mayor información

63 Distancia de visión Distancias típicas: Monitor de escritorio: 60 cm.
Documento en papel: 45 cm. Pantalla de un computador portátil: 30 cm. Un icono de 30 x 30 pixels aparecerá mucho más grande a 30 cm en una pantalla portátil de 11 pulgadas (640x480), que a 60 cm, en un monitor de 17 pulgadas (1280x1024)

64 Silueta de un ícono La silueta (forma externa) de un icono transmite la mayor información

65 Reconocer y recordar En lo posible, utilizar una metáfora familiar al observador Utilizar objetos concretos Los conceptos y acciones abstractas son difíciles de visualizar Proveer rótulos textuales

66 Uso inteligente del color
Primero, diseñar el icono en blanco y negro; luego añadir los colores El uso indiscriminado del color sobrecarga al icono Utilizar escalas de grises, o uno o dos colores Ej. transición de MS Word, desde el uso de escalas de grises a un uso restringido del color

67 Aspectos culturales e internacionales
Ser cuidadoso con el uso de texto o caracteres alfabéticos dentro de un icono Requeriría diferentes versiones del icono (para los distintos lenguajes) Los símbolos usados varían mucho entre culturas Las metáforas no deberían depender de ninguna cultura particular ej. mailbox

68 No usar siempre iconos Para algunos conceptos abstractos, o distinciones pequeñas, las representaciones textuales suelen funcionar mejor

69 Algunas buenas ideas

70 Buenas ideas Notificación de la modificación de asociaciones archivos-aplicaciones (QuickTime 4.0 Player) Avisar que el ‘CapsLock’ puede interferir en el ingreso de Passwords (Eudora Pro para Macintosh)

71 Buenas ideas Proveer acceso rápido a la función “Find” (Microsoft C++)
Tarea muy frecuente en la programación Provee memoria de búsquedas recientes No requiere una ventana separada

72 Buenas ideas Lista de archivos abiertos recientemente
Listar directorios visitados recientemente (CoolEdit 95)

73 Buenas ideas Proveer un icono representativo del tipo de archivo (MS Visual Basic) Fácil identificación visual Indicar tipo de campos en una BD (HartPro) Atributos indexados (“i”), campos creados por usuario (“f”)

74 Buenas ideas Proveer una cuestión “hint” para casos de olvidos de passwords

75 Buenas ideas Proveer un “preview” del archivo a cargar
Posibilidad de deshabilitarlo para acelerar la búsqueda Visión simultánea de varias imágenes

76 Buenas ideas Zoom in / out por medio de teclas y/o controles de acceso rápido (web browser Opera)

77

78