Heurísticas de Construccción Voraces para el Problema de ...
Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.
-
Upload
novio-mena -
Category
Documents
-
view
220 -
download
0
Transcript of Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.
![Page 1: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/1.jpg)
Guías y Heurísticas de Diseño
![Page 2: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/2.jpg)
Estructura
Ventanas, Cajas de Diálogo y Menús
![Page 3: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/3.jpg)
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.
![Page 4: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/4.jpg)
Ventanas primarias y secundarias Evitar el scroll horizontal
InternetExplorer
![Page 5: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/5.jpg)
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
![Page 6: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/6.jpg)
Cajas de diálogo Corresponder el orden de navegación con el orden
de los campos
(Unisyn's Automate Pro)
![Page 7: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/7.jpg)
‘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
![Page 8: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/8.jpg)
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
![Page 9: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/9.jpg)
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
![Page 10: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/10.jpg)
Barra de menúes Los items no deben ser acciones ni abrir cajas de
diálogo
![Page 11: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/11.jpg)
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
![Page 12: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/12.jpg)
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)
![Page 13: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/13.jpg)
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)
![Page 14: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/14.jpg)
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
![Page 15: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/15.jpg)
Relaciones
El toolbar sólo debe proveer acceso rápido a items frecuentes, no a menues (usar el menú bar)(Internet Explorer)
![Page 16: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/16.jpg)
Interacción
Controles
![Page 17: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/17.jpg)
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
![Page 18: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/18.jpg)
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
![Page 19: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/19.jpg)
Command Buttons Los command buttons no deben activar menúes
![Page 20: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/20.jpg)
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
![Page 21: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/21.jpg)
Las listas largas de items deben usar drop-down lists.
Esto es un reporte de un proceso de desinstalación!
![Page 22: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/22.jpg)
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
![Page 23: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/23.jpg)
Check Boxes No deben usarse para selecciones exclusivas
Agrupar opciones relacionadas
Algunas opciones son exclusivas entre sí(Word)
![Page 24: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/24.jpg)
Check Boxes
El checkbox es innecesario, ya que es un requerimiento
![Page 25: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/25.jpg)
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
![Page 26: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/26.jpg)
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
![Page 27: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/27.jpg)
List Boxes No usar listas para pocos items
Microsoft’s File Manager
Vbasic 5.0
2000 entradas. Organizar datos!
![Page 28: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/28.jpg)
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’
![Page 29: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/29.jpg)
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
![Page 30: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/30.jpg)
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
![Page 31: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/31.jpg)
Presentación
![Page 32: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/32.jpg)
Presentación Muestra de datos en pantallas y ventanas
Considerar las acciones que efectuará el usuario con los datos
Comparaciones? Selecciones?
![Page 33: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/33.jpg)
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
![Page 34: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/34.jpg)
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.
![Page 35: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/35.jpg)
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.
![Page 36: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/36.jpg)
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)
![Page 37: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/37.jpg)
Tipografía
![Page 38: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/38.jpg)
Tipografía Estilo y apariencia del texto
1 punto = 1/72 pulgada 1 pica = 1/6 pulgada = 12 puntos
![Page 39: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/39.jpg)
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
![Page 40: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/40.jpg)
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
![Page 41: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/41.jpg)
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
![Page 42: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/42.jpg)
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’
![Page 43: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/43.jpg)
Factores determinantes de la legibilidad de un texto Espaciado
Espaciado entre líneas = aprox. 2 puntos
![Page 44: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/44.jpg)
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
![Page 45: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/45.jpg)
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
![Page 46: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/46.jpg)
Factores determinantes de la legibilidad de un texto
![Page 47: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/47.jpg)
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)
![Page 48: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/48.jpg)
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.
![Page 49: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/49.jpg)
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
![Page 50: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/50.jpg)
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
![Page 51: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/51.jpg)
Iconos
![Page 52: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/52.jpg)
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
![Page 53: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/53.jpg)
Asociación Visual
![Page 54: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/54.jpg)
Composición de un ícono Partes estandar de un icono
Borde Fondo Imagen Rótulo
![Page 55: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/55.jpg)
Principios de Diseño de Iconos Coherencia Legibilidad Reconocer y recordar Utilización correcta del color
![Page 56: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/56.jpg)
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
![Page 57: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/57.jpg)
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
![Page 58: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/58.jpg)
Niveles de realismo Desde fotografías a simples siluetas
Fotografías Dibujos Caricaturas Bosquejo Silueta
Seleccionar solo un nivel de realismo
![Page 59: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/59.jpg)
Nivel de abstracción Los iconos pueden ser dibujados en distintos
niveles de abstracción
![Page 60: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/60.jpg)
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]
![Page 61: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/61.jpg)
Lenguaje de iconos
Símbolos elementales
Tipos de Documentos
Aplicaciones
Documento Word
Template Word
Asistente template Word
Documento
Asistente
Template
Texto
MSWord
![Page 62: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/62.jpg)
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
![Page 63: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/63.jpg)
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)
![Page 64: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/64.jpg)
Silueta de un ícono La silueta (forma externa) de un icono
transmite la mayor información
![Page 65: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/65.jpg)
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
![Page 66: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/66.jpg)
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
![Page 67: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/67.jpg)
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
![Page 68: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/68.jpg)
No usar siempre iconos Para algunos conceptos abstractos, o
distinciones pequeñas, las representaciones textuales suelen funcionar mejor
![Page 69: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/69.jpg)
Algunas buenas ideas
![Page 70: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/70.jpg)
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)
![Page 71: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/71.jpg)
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
![Page 72: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/72.jpg)
Buenas ideas Lista de archivos abiertos recientemente
Listar directorios visitados recientemente (CoolEdit 95)
![Page 73: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/73.jpg)
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”)
![Page 74: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/74.jpg)
Buenas ideas Proveer una cuestión “hint” para casos de olvidos de
passwords
![Page 75: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/75.jpg)
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
![Page 76: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/76.jpg)
Buenas ideas Zoom in / out por medio de teclas y/o controles de
acceso rápido (web browser Opera)
![Page 77: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/77.jpg)
![Page 78: Guías y Heurísticas de Diseño. Estructura Ventanas, Cajas de Diálogo y Menús.](https://reader035.fdocumento.com/reader035/viewer/2022062322/5665b43e1a28abb57c9053eb/html5/thumbnails/78.jpg)