Gu

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

Microsofts 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
• Fotografías
• 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 Word
Documento
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
(No Transcript)
78
(No Transcript)