VENTANAS 27/05/2006 DAI Características de una ventana z z z z z z z z z Nombre o título Altura y anchura Estado (accesible/activa) Visibilidad (parcial/total) Posición relativa Presentación Posibilidades de gestión y manipulación de la ventana Resalte de la parte seleccionada Función, tarea o aplicación para la que se crea 27/05/2006 DAI 1 Qué nos permiten las ventanas z z z z z z z z z Presentación de diferentes niveles de información Presentación de múltiples tipos de información Presentación secuencial de niveles o tipos de información Acceso a diferentes fuentes de información Combinar múltiples fuentes de información Realizar más de una tarea Recordatorio Monitorización Representaciones múltiples de una misma tarea 27/05/2006 DAI Componentes de una ventana z z z z z z z z z z z z z Frame Barra de título Icono de barra de título Botones de dimensiones de ventana Botón qué es esto Barra de menú Barra de estado Barras de scroll Divisor de ventana Barra de herramientas Área de comandos Área de trabajo Indicador de tamaño 27/05/2006 DAI 2 Ejemplo: Componentes Ventana 27/05/2006 DAI Estilos de presentación de ventanas z Distribución de ventanas en espacio – Pros z z z z z – El usuario no tiene que decidir sobre el tamaño Ventanas abiertas siempre visibles Percibidas como poco complejas Sencillas para usuarios poco expertos Mejor rendimiento de usuario en tareas de poca manipulación de ventanas Contras z z z z Número limitado de ventanas visibles Cambio de tamaño y posición de ventanas complica el aprendizaje Configuración potencialmente no la deseada por los usuarios Menos control de usuario 27/05/2006 DAI 3 Estilos de presentación de ventanas z Solapamiento de ventanas – Pros z z z z z z – Aspecto 3D, similar al entorno escritorio real Mayor control de usuario Ventanas de tamaño grande Tamaños y posiciones consistentes Posibilidad de menor complejidad visual Mejor para tareas con mucha manipulación de ventanas Contras z z z Más complejas al requerir más funciones de control Ocultamiento de información y ventanas La mayor libertad puede conllevar mayor complejidad en caso de malas decisiones 27/05/2006 DAI Estilos de presentación de ventanas z Ventanas en cascada – Pros z z z No hay ocultación total Facilidad para traer a primer plano cualquier ventana Presentación visual simple y limpia 27/05/2006 DAI 4 Eligiendo estilo de presentación z Distribución – – – – z Actividades monotarea Datos que han de ser vistos simultáneamente Tareas con poca manipulación de ventana Usuarios poco expertos Solapamiento – – – – Usuarios expertos Cambio de tareas Tareas que requieran manipulación de ventana Contenidos de visualización impredecible 27/05/2006 DAI Tipos de ventanas z Ventana primaria z Ventana secundaria z Diálogos z Mensajes z Pop-Up z Paleta 27/05/2006 DAI 5 Ventana primaria z Representan función o aplicación independiente z Presentan constantemente componentes de ventana y controles (ej: barra de menú) z Presentan información que se actualiza constantemente (ej: fecha y hora) z Proporcionan contexto a ventanas dependiente z No dividir una función independiente en dos o más ventanas primarias z No presentar funciones no relacionadas en una ventana primaria 27/05/2006 DAI Ventana secundaria z Para acciones subordinadas: – z z z Extensión de funciones en cuanto a complejidad y relacionadas con objetos de ventanas primarias Para presentar componentes de ventana usados ocasionalmente Acceso a través de componentes de ventanas primarias No debería ser más grande de 263x263 unidades de diálogo 27/05/2006 DAI 6 Modalidad en ventanas secundarias z z z z z z No deseamos permitir interacción con otra ventana Presentar información (ej: mensajes) Recibir entrada de usuario Preguntar al usuario Usar con cuidado al restringir al usuario No usarlas al requerir la tarea interacción con otras ventanas 27/05/2006 DAI Cascadas en ventanas secundarias z z z z z z Para proporcionar opciones avanzadas a menor nivel en un diálogo complejo Uso de botón de comando que nos lleve a un nuevo diálogo con … Presentar el diálogo adicional en forma de cascada No más de 2 cascadas por ruta No ocultar barra de título ni información relevante mostrada Cerrar la ventana secundaria que la abre si son independientes 27/05/2006 DAI 7 Desenrollamiento en ventanas secundarias z Proporciona opciones avanzadas al mismo nivel de complejidad z Uso de botón de comandos con >> z Expandir a la derecha o abajo 27/05/2006 DAI Diálogos z Presentar mensajes cortos y concretos z Pedir acciones específicas z Realizar acciones que se hagan en poco tiempo y no cambien frecuentemente z Botones a incluir: OK, Cancelar y otros que puedan ser necesarios 27/05/2006 DAI 8 Hojas e inspectores de propiedades z Ejemplo: Definir fecha y hora del sistema z Presentan el conjunto completo de propiedades para un objeto z Categorizar y agrupar páginas de propiedades en caso de ser necesario z Botones a incluir: OK, Cancelar, Aplicar, Reset y otros que puedan ser necesarios z En hojas simples, situar los botones en la hoja z En hojas con pestañas, poner los botones fuera de las pestañas z En caso de inspectores de propiedades: – Reflejar cambios dinámicos y mostrar las propiedades más comunes o más accedidas 27/05/2006 DAI Message Boxes z Se usan para mostrar un mensaje sobre una situación o condición particular z Botones a incluir: OK, Cancel, Ayuda, Sí/no, Parar, botones que corrijan la acción que provocó la aparición del mensaje z Permitir que desde la barra de título se pueda cerrar si el mensaje incluye botón de cerrar z Activar por defecto la opción más frecuente o menos destructiva 27/05/2006 DAI 9 Otros z Ventanas de paleta – – z Para presentar conjuntos de controles De tamaño ajustable Ventanas pop-up – – – Mostrar información adicional cuando la forma normal muestra la información abreviada Etiquetas textuales para controles gráficos Información de ayuda contextual 27/05/2006 DAI 27/05/2006 DAI 10 27/05/2006 DAI Gestión de ventanas: Interfaz mono documentos z z Ventana primaria con conjunto de secundarias Uso – – – – z Ventajas – – z Cuando objeto y ventana tienen relación 1:1 Cuando se presente el objeto como unidad Para facilitar vistas alternativas con un control que permita el cambio de vista Para permitir vistas simultáneas al dividir en varios paneles Uso común y enfoque centrado de datos Manipulación de ventanas fácil y poco confusa Inconveniente: Se muestra o edita la info en ventanas separadas 27/05/2006 DAI 11 Interfaz multidocumento (MDI) (I) z Técnica para gestionar un conjunto de ventanas que contienen documentos z Elementos: Ventana padre primaria y secundarias hijas z Uso – – – – Presentar múltiples ocurrencias de un objeto Comparar datos entre ventanas Presentar varias partes de una aplicación Ideal para ver tipos de objetos homogéneos y para segregar objetos y las ventanas usadas en una tarea 27/05/2006 DAI Interfaz multidocumento (II) z Ventajas – – – z Las ventanas hijas tienen los mismos componentes que la padre Útil para gestionar un conjunto de objetos Facilita agrupaciones y centrarse en un conjunto de actividades Desventajas – – – – – Refuerza el foco primario de una aplicación Las ventanas secundarias pueden ocultar contenido y oscurecer la relación entre ventanas No se puede mantener siempre el contexto Relación abstracta entre archivos y ventanas Restringir las ventanas hijas a las padres puede no ser adecuado 27/05/2006 DAI 12 Workbooks z Descripción – – – – z Uso – – – z Gestionar un conjunto de vistas de un objeto Rápida navegación de vistas múltiples Ordenar contenido de las secciones Ventajas – – z Consiste en un conjunto de vistas organizadas como cuaderno con pestañas Se presentan las vistas de objetos como secciones en la ventana primaria Cada sección representa una vista de los datos Las pestañas pueden servir para navegar entre secciones Combina la simplicidad del interfaz monoventana y la de no tener ventanas hijas Preserva algunas capacidades de gestión de MDI Inconvenientes – No hay simultaneidad de vistas 27/05/2006 DAI Proyectos z Descripción – – – z Uso – – z Gestión de objetos que no tienen por qué ser mostrados Cuando no se deba restringir ventanas hijas Ventajas – – z Consiste en un contenedor que tiene un conjunto de objetos, que se pueden abrir en ventanas primarias Cada ventana con su propio menú y elementos de interfaz “Hijos” no contenidos pero al cerrar el proyecto se cierran todos y al abrir se reabre el estado Preserva capacidades de gestión del MDI Gran flexibilidad en cuanto a colocación y disposición de ventanas Inconvenientes – Aumento de complejidad por la dificultad de diferenciar la ventana primaria del resto de ventanas del proyecto 27/05/2006 DAI 13 Organización de ventanas z Organizar la ventana para facilitar la tarea de usuario z Minimizar el número de ventanas para conseguir un objetivo z Ventanas primarias para: – – z Ventanas secundarias – z Interacciones principales Empezar una interacción y proporcionar contexto de alto nivel a las ventanas dependientes Extensión de interacción y obtener/mostrar información adicional relacionada con la ventana primaria Diálogos – Información no muy frecuente y “buena de conocer” 27/05/2006 DAI Operaciones de ventana z Ventana activa – z Diferenciar activas de no activas; activación en pocos pasos Pautas generales – – – – – Operaciones fáciles de usar y aprender (manipulación directa) Pocas operaciones para conseguir el efecto deseado Navegación entre ventanas sencillas Facilitar la tarea de recordar la configuración de las ventanas Posibilidad de configurar las ventanas 27/05/2006 DAI 14 Al abrir una ventana z Situar la ventana en primer plano y activarla z Adaptar la ventana al tamaño y forma del monitor z Asegurar la visibilidad de la barra de título z Ventana secundaria: – – – z situarla sobre la ventana primaria. mostrar las ventanas secundarias en cascada o por capas En caso de múltiples aplicaciones, las ventanas asociadas también se llevan a primer plano Si se ha seleccionado más de un objeto, mostrar cada objeto en una ventana diferente y activar la última en abrir 27/05/2006 DAI Tamaños de ventanas z Suficientemente grandes para: – – – – Mostrar toda la información relevante y esperada para la tarea Evitar ocultar información importante Evitar confusión visual Minimizar la necesidad de scroll z z Si es demasiado grande: – – z No usar toda la pantalla ¿Toda la información es necesaria? ¿Toda la información está relacionada? General, lo más pequeña posible: – – Texto: 12 líneas Alfanumérico: 7 líneas 27/05/2006 DAI 15 Posición de ventanas (I) z Parámetros a tener en cuenta: uso, dimensiones y motivo de aparición z Caso restauración: posición anterior z Nueva aparición – – – En la posición del cursor Posición buena para navegar a ella No ocultar información importante z Múltiples ventanas: Posición distinguible a cada una y mostrarlas en cascada z Múltiples monitores: Ventanas secundarias en el mismo monitor que su primaria 27/05/2006 DAI Posición de ventanas (II) z z z Otra situación: Centrar horizontalmente la secundaria sobre la primaria bajo el título y barra de menú No dejar al usuario mover la ventana a una posición donde no se pueda reubicar fácilmente Diálogos – – – Si está relacionado con todo el sistema, centrarlo en la pantalla Mantener visible la información básica Si un diálogo invoca a otro, la posición del segundo debería ser variable 27/05/2006 DAI 16 Separación y movimiento z Separación – – – z Borde sólido Fondo que lo distinga del fondo general de pantalla Posibilidad de sombrear el borde de la ventana Movimiento y cambio de tamaño – – – – – Posición/tamaño cambiable por usuarios Cambiar la forma del cursor para indicar el movimiento Permitir mover una ventana sin estar activa Mover toda la ventana conforme se mueve el puntero (o al menos el contorno) Permitir maximizar, minimizar y restaurar las ventanas 27/05/2006 DAI Cerrando una ventana z Cuando: – – – Usuario lo solicita Usuario completa la acción La ventana ya no tiene relevancia z Si se cierra la ventana principal, cerrar sus secundarias z Al cerrar la ventana, guardar su estado (tamaño y posición) para cuando se vuelva a abrir 27/05/2006 DAI 17 Entornos web: Marcos z Múltiples documentos en una página z Cuando el contenido puede cambiar frecuentemente z Los documentos se quieren ver, actualizar y hacer scroll independientemente z Permitir a usuario cambiar parte del contenido z Comparar múltiples piezas de información z Pautas – – – – z Pocos marcos al mismo tiempo Tamaños en función del tipo de información a mostrar Los usuarios no tienen que modificar tamaño No más de una región de scroll por página Contras: – – – Comportamiento distinto de otras páginas web (impresión, interacción,etc) No funcionan en todos los navegadores de la misma forma Mayor “agobio visual” 27/05/2006 DAI 18