Administración de ventanas

Nota:

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

En este artículo se describe la ubicación predeterminada de las ventanas cuando se muestran inicialmente en la pantalla, su orden de apilamiento en relación con otras ventanas (orden Z), su tamaño inicial y cómo afecta su visualización al foco de entrada.

Para obtener las instrucciones siguientes:

  • Una ventana de nivel superior no tiene ninguna ventana de propietario y se muestra en la barra de tareas. Ejemplos: ventanas de aplicación. En Windows Vista y versiones posteriores, los cuadros de diálogo sin ventanas de propietario y hojas de propiedades también se consideran de nivel superior.
  • Una ventana propiedad tiene una ventana de propietario y no se muestra en la barra de tareas. Ejemplos: cuadros de diálogo modales, cuadros de diálogo modeless.
  • Se muestra una ventana iniciada por el usuario como resultado directo de la acción de un usuario. De lo contrario, se inicia el programa si lo inicia un programa o un sistema si Microsoft Windows inicia . Por ejemplo, se inicia un cuadro de diálogo Opciones, pero se inicia un aviso de reunión.
  • Una ventana contextual es una ventana iniciada por el usuario que tiene una relación sólida con el objeto desde el que se inició. Por ejemplo, las ventanas mostradas por menús contextuales o iconos de área de notificación son contextuales, pero las ventanas mostradas por las barras de menú no son.
  • El monitor activo es el monitor donde se ejecuta el programa activo.
  • El monitor predeterminado es el que tiene el menú Inicio, la barra de tareas y el área de notificación.

Conceptos de diseño

La administración de ventanas es una de las actividades de usuario más fundamentales. Antes de Windows Vista, las ventanas a menudo recibieron tamaños predeterminados pequeños y se colocaron en medio de la pantalla. Este enfoque funciona bien para monitores individuales y de baja resolución más antiguos, pero no para hardware de vídeo moderno.

Windows está diseñado para admitir hardware de vídeo moderno, que a menudo se ejecuta con resoluciones significativamente mayores que la resolución de pantalla mínima admitida y puede tener varios monitores. Para ello:

  • Permite a los usuarios beneficiarse por completo de su hardware avanzado.
  • Requiere menos esfuerzo de los usuarios para mover el mouse a través de mayores distancias.
  • Hace que la colocación de ventanas sea más predecible y, por tanto, sea más fácil de encontrar.

Resolución de pantalla mínima admitida

La resolución de pantalla mínima efectiva compatible con Windows es de 800 x 600 píxeles. Esto significa que las ventanas de tamaño fijo deben mostrarse completamente en la resolución mínima (mientras se reserva espacio para la barra de tareas), pero las ventanas de tamaño redimensionable se pueden optimizar para una resolución efectiva de 1024 x 768 píxeles siempre que sean funcionales en la resolución mínima.

Aunque actualmente las resoluciones de pantalla física más comunes para los equipos de Windows son de 1024 x 768 píxeles o superior, el destino de 800 x 600 píxeles permite Windows:

  • Funciona bien con todo el hardware moderno, incluidos equipos portátiles pequeños.
  • Admite la configuración de ppp alto (puntos por pulgada).
  • Compatibilidad con fuentes más grandes para la accesibilidad.
  • Compatibilidad con hardware usado de forma global.

La elección de la resolución mínima para admitir requiere alcanzar el equilibrio adecuado. El destino de una resolución más alta provocaría una experiencia poco óptima para un porcentaje significativo de hardware moderno, mientras que el objetivo de una resolución inferior impediría que los diseñadores aprovechen al máximo el espacio de pantalla disponible.

Si cree que los usuarios de destino usan resoluciones significativamente mayores que las Windows mínimas, puede diseñar el programa para aprovechar al máximo el espacio de pantalla adicional mediante ventanas redimensionables que se escalan bien.

Directrices

General

  • Admita la resolución mínima Windows efectiva de 800 x 600 píxeles. En el caso de interfaces de usuario críticas (UIs) que deben funcionar en modo seguro, admita una resolución eficaz de 640 x 480 píxeles. Asegúrese de tener en cuenta el espacio utilizado por la barra de tareas reservando 48 píxeles relativos verticales para ventanas mostradas con la barra de tareas.
  • Optimice los diseños de ventana redimensionables para una resolución eficaz de 1024 x 768 píxeles. Cambie automáticamente el tamaño de estas ventanas para resoluciones de pantalla inferiores de una manera que sigue funcionando.
  • Asegúrese de probar las ventanas en 96 ppp (100 por ciento) a 800 x 600 píxeles, 120 ppp (125 por ciento) a 1024 x 768 píxeles y 144 ppp (150 por ciento) a 1200 x 900 píxeles. Compruebe si hay problemas de diseño, como el recorte de controles, texto y ventanas, y la extensión de iconos y mapas de bits.
  • Para programas con escenarios de uso táctil y móvil, optimice para 120 ppp. Actualmente, las pantallas con valores altos de ppp son frecuentes en equipos táctiles y móviles.
  • Las ventanas redimensionables ya no deben mostrar el glifo de cambio de tamaño en la esquina inferior derecha, porque:
    • Todos los lados y bordes de una ventana son redimensionables, no solo en la esquina inferior derecha.
    • El glifo requiere que se muestre una barra de estado, pero muchas ventanas de tamaño redimensionable no proporcionan barras de estado.
    • Los bordes de ventana redimensionables y los punteros de cambio de tamaño son más eficaces para comunicar que una ventana es redimensionable que el glifo de cambio de tamaño.

Controles de barra de título

Use los controles de barra de título de la siguiente manera:

  • Casi. Todas las ventanas principales y secundarias con un marco de ventana estándar deben tener un botón Cerrar en la barra de título. Hacer clic en Cerrar tiene el efecto de cancelar o cerrar la ventana.

screen shot of dialog box with no close button

En este ejemplo, el cuadro de diálogo no tiene un botón Cerrar en la barra de título.

  • Minimizar. Todas las ventanas principales y las ventanas secundarias de modelos de larga duración (como los diálogos de progreso) deben tener un botón Minimizar. Al hacer clic en Minimizar, se reduce la ventana al botón de la barra de tareas. Por lo tanto, las ventanas que se pueden minimizar requieren un icono de barra de título.
  • Maximizar o restaurar hacia abajo. Todas las ventanas redimensionables deben tener un botón Maximizar o restaurar hacia abajo. Al hacer clic en Maximizar se muestra la ventana en su tamaño más grande, que para la mayoría de las ventanas está a pantalla completa; mientras que al hacer clic en Restaurar hacia abajo se muestra la ventana en su tamaño anterior. Sin embargo, algunas ventanas no se benefician del uso de una pantalla completa, por lo que estas ventanas deben maximizarse a su tamaño útil más grande.

Tamaño de la ventana

  • Elija un tamaño de ventana predeterminado adecuado para su contenido. No tenga miedo de usar tamaños de ventana inicial más grandes si puede usar el espacio de forma eficaz.
  • Use ventanas de tamaño redimensionable siempre que sea práctico para evitar barras de desplazamiento y datos truncados. Windows con contenido dinámico y listas se benefician más de ventanas de tamaño redimensionable.
  • En el caso de los documentos de texto, considere una longitud máxima de línea de 65 caracteres para facilitar la lectura del texto. (Los caracteres incluyen letras, signos de puntuación y espacios).
  • Ventanas de tamaño fijo:
    • Debe ser completamente visible y de tamaño para caber dentro del área de trabajo.
  • Ventanas de tamaño redimensionable:
    • Puede optimizarse para resoluciones más altas, pero reducir el tamaño según sea necesario en tiempo de visualización a la resolución de pantalla real.
    • Para tamaños de ventana progresivamente más grandes, debe mostrar progresivamente más información. Asegúrese de que al menos una parte o control de ventana tiene contenido redimensionable.
    • Debe evitar tamaños restaurados predeterminados maximizados o casi maximizados. En su lugar, elija un tamaño predeterminado que suele ser el más útil sin tener pantalla completa. Supongamos que los usuarios maximizarán la ventana en lugar de cambiar el tamaño para convertirlo en pantalla completa.
    • Debe establecer un tamaño de ventana mínimo si hay un tamaño por debajo del cual el contenido ya no se puede usar. En el caso de los controles de tamaño redimensionable, establezca tamaños mínimos de elemento redimensionables en sus tamaños funcionales más pequeños, como los anchos de columna funcional mínimos en las vistas de lista.
    • Debe cambiar la presentación si hace que el contenido se pueda usar con tamaños más pequeños.

screen shot of media player buttons

En este ejemplo, Reproductor multimedia de Windows cambia su formato cuando la ventana se vuelve demasiado pequeña para el formato estándar.

Ubicación de la ventana

  • Para las instrucciones siguientes, "centrar" significa inclinar la posición vertical ligeramente hacia la parte superior del monitor, en lugar de colocarse exactamente en el medio. Coloque el 45 por ciento del espacio entre la parte superior del monitor o el propietario y la parte superior de la ventana, y el 55 por ciento entre la parte inferior del monitor o propietario y la parte inferior de la ventana. Haz esto porque el ojo está naturalmente sesgado hacia la parte superior de la pantalla.

    figure of window placed slightly above center

    "Centrar" significa inclinar la posición vertical ligeramente hacia la parte superior del monitor.

  • Si una ventana es contextual, mostrarla siempre cerca del objeto desde el que se inició. Colóquelo fuera del camino para que el objeto de origen no esté cubierto por la ventana.

    • Si se muestra con el mouse, cuando sea posible, colóquelo hacia abajo y hacia la derecha.

    figure of contextual window placed right of object

    Mostrar ventanas contextuales cerca del objeto desde el que se inició.

    figure of notification area window

    Windows se muestran los iconos del área de notificación cerca del área de notificación.

  • Si se muestra con un lápiz, cuando sea posible colóquelo para que no esté cubierto por la mano del usuario. Para los usuarios a la derecha, se muestra a la izquierda; de lo contrario, se muestra a la derecha.

    figure of contextual window placed left of object

    Cuando se usa un lápiz, también se muestran ventanas contextuales para que no estén cubiertos por la mano del usuario.

  • Desarrolladores: Puede distinguir entre eventos de mouse y eventos de lápiz mediante la API GetMessageExtraInfo . Puede determinar la entrega del usuario mediante la API SystemParametersInfo con SPI_GETMENUDROPALIGNMENT.

  • Coloque los diálogos de progreso fuera del camino en la esquina inferior derecha del monitor activo.

    figure of progress bar in lower-right corner

    Coloque los diálogos de progreso en la esquina inferior derecha.

  • Si una ventana no está relacionada con el contexto actual o la acción del usuario, colóquela fuera de la ubicación del puntero actual. Si lo hace, se evita la interacción accidental.

  • Si una ventana es una aplicación o documento de nivel superior, siempre en cascada su origen de la esquina superior izquierda del monitor. Si lo crea el programa activo, utilice el monitor activo; De lo contrario, use el monitor predeterminado.

    figure of three windows cascading from upper left

    Ventanas de aplicación o documento de nivel superior en cascada de la esquina superior izquierda del monitor.

  • Si una ventana es una utilidad de nivel superior, mostrarla siempre "centrada" en el monitor. Si lo crea el programa activo, utilice el monitor activo; De lo contrario, use el monitor predeterminado.

    figure of utility window centered in the monitor

    Ventanas de utilidad de nivel superior del centro.

  • Si una ventana es una ventana de propiedad, mostrarla inicialmente "centrada" en la parte superior de la ventana del propietario. Para la presentación posterior, considere la posibilidad de mostrarla en su última ubicación (relativa a la ventana del propietario) si es probable que sea más conveniente.

    figure of owned window centered over owner window

    Ventanas propiedad del centro inicialmente en la parte superior de la ventana del propietario.

  • En el caso de los cuadros de diálogo modeless, siempre se muestra inicialmente en la parte superior de la ventana del propietario para que sean fáciles de encontrar. Sin embargo, si el usuario activa la ventana del propietario, esto puede ocultar el cuadro de diálogo modelado.

    figure of modeless dialog box over owner window

    Muestra los cuadros de diálogo modeless inicialmente en la parte superior de la ventana del propietario para que sean fáciles de encontrar.

  • Si es necesario, ajuste la ubicación inicial para que toda la ventana esté visible en el monitor de destino. Si una ventana de tamaño cambia de tamaño es mayor que el monitor de destino, reduzca su ajuste.

Orden de ventana (orden Z)

  • Coloque siempre las ventanas propiedad en la parte superior de su ventana de propietario. Nunca coloque ventanas propiedad en sus ventanas propietarias, ya que lo más probable es que los usuarios no los vean.
  • Respeta la selección de pedidos Z de los usuarios. Cuando los usuarios seleccionan una ventana, traiga solo las ventanas asociadas a esa instancia del programa (la ventana más las ventanas propietarias o propietarias) a la parte superior del pedido Z. No cambie el orden de ninguna otra ventana, como instancias independientes del mismo programa.

Activación de ventanas

  • Respeta la selección del estado de la ventana de los usuarios. Si una ventana existente necesita atención, flashe el botón de la barra de tareas tres veces para llamar la atención y dejarla resaltada, pero no haga nada más. No restaure ni active la ventana. No uses ningún efecto de sonido. En su lugar, permita a los usuarios activar la ventana cuando estén listos.
    • Excepción: Si la ventana no aparece en la barra de tareas, tráela en la parte superior de todas las demás ventanas y flashe su barra de título en su lugar.
  • Restaurar una ventana principal también debe restaurar todas sus ventanas secundarias, incluso si esas ventanas secundarias tienen su propio botón de barra de tareas. Al restaurar, coloque las ventanas secundarias encima de la ventana principal.

Foco de entrada

  • Windows que muestran las acciones iniciadas por el usuario deben realizar el foco de entrada, pero solo si la ventana se representa inmediatamente (en un plazo de 5 segundos). Una vez representada la ventana, puede tomar el foco de entrada una vez.
    • Si una ventana se representa lentamente (más de 5 segundos), es probable que los usuarios realicen otra tarea mientras esperan. Centrarse en este punto sería una molestia, especialmente si se hace más de una vez.
  • Windows que no se muestran ni muestran inmediatamente mediante una acción iniciada por el sistema no deben tener el foco de entrada. En su lugar, se muestra en la parte superior sin foco y permite a los usuarios activarlos cuando estén listos.
    • Excepción: Administrador de credenciales.

Persistencia

  • Cuando se vuelve a mostrar una ventana, considere la posibilidad de mostrarla en el mismo estado que la última vez que se ha accedido. Al cerrar, guarde el monitor usado, el tamaño de la ventana, la ubicación y el estado (maximizado frente a la restauración). Al volver a mostrar, restaure el tamaño, la ubicación y el estado de la ventana guardados mediante el monitor adecuado. Además, considere la posibilidad de que estos atributos persistan entre instancias de programa por usuario. Excepciones:
    • No guarde ni haga que estos atributos persistan en las ventanas cuando su uso sea tal que es mucho más probable que los usuarios quieran empezar por completo.
    • Para los programas que es probable que se usen en equipos Tecnología táctil y Tablet PC de Windows, guarde dos estados de ventana para los modos horizontal y vertical. Para obtener más información, vea Diseño de tamaños de pantalla variables.
  • Si la configuración del monitor actual impide mostrar una ventana con su último estado:
    • Intente mostrar la ventana con su último monitor.
    • Si la ventana es mayor que el monitor, cambie el tamaño de la ventana según sea necesario.
    • Mueva la ubicación hacia la esquina superior izquierda para ajustarse al monitor según sea necesario.
    • Si los pasos anteriores no resuelven el problema, vuelva a las directrices de selección de ubicación de ventana predeterminadas. Considere la posibilidad de restaurar el tamaño anterior, si es posible.