stringtranslate.com

Ventana modal

En el diseño de interfaz de usuario , una ventana modal es un elemento de control gráfico subordinado a la ventana principal de una aplicación .

Una ventana modal crea un modo que desactiva la interacción del usuario con la ventana principal, pero la mantiene visible, con la ventana modal como una ventana secundaria frente a ella. Los usuarios deben interactuar con la ventana modal antes de poder regresar a la ventana principal . Esto evita interrumpir el flujo de trabajo en la ventana principal. Las ventanas modales a veces se denominan ventanas pesadas o cuadros de diálogo modales porque a menudo muestran un cuadro de diálogo .

Las interfaces de usuario suelen utilizar ventanas modales para controlar la atención del usuario y mostrar estados de emergencia, aunque los diseñadores de interacción sostienen que son ineficaces para ese uso. [1] Las ventanas modales son propensas a errores de modo . [1] [2] [3]

En la Web, a menudo se muestran imágenes en detalle, como las implementadas por la biblioteca Lightbox , o se utilizan para anuncios flotantes . [4] [5]

El opuesto de modal es no modal . Las ventanas no modales no bloquean la ventana principal, por lo que el usuario puede cambiar el foco entre ellas, tratándolas como ventanas de paleta .

Relevancia y uso

Casos de uso

Los usos frecuentes de las ventanas modales incluyen:

Hojas modales en Mac OS X

Muchas de las características que normalmente se representan mediante ventanas modales se implementan como paneles transitorios modales llamados "Hojas" [9] en Mac OS X. Las ventanas transitorias se comportan de manera similar a las ventanas modales: siempre están sobre la ventana principal y no se muestran en la lista de ventanas, pero no deshabilitan el uso de otras ventanas en la aplicación. Las hojas se deslizan fuera de la barra de título de la ventana y, por lo general, deben descartarse antes de que el usuario pueda continuar trabajando en la ventana, pero el resto de la aplicación sigue siendo utilizable. Por lo tanto, crean un modo dentro de la ventana que las contiene, pero no tienen modo con respecto al resto de la aplicación.

Control del flujo de interacción

Las ventanas modales son comunes en los conjuntos de herramientas de GUI para guiar el flujo de trabajo del usuario. Alan Cooper sostiene que la importancia de exigirle al usuario que preste atención a cuestiones importantes justifica restringir su libertad y que la alternativa aumentaría su frustración. [10]

Interrupciones inesperadas

Los cuadros de diálogo de alerta inesperados son culpables particulares de errores de modo [1] con consecuencias potencialmente graves. Los expertos en usabilidad recomiendan que las acciones peligrosas se puedan deshacer siempre que sea posible; un cuadro de alerta que aparece inesperadamente o se descarta por hábito no protege contra la acción peligrosa. [11] Una barra de información sin modo se considera cada vez más preferible a un cuadro de diálogo porque no interrumpe las actividades del usuario, sino que le permite leer información adicional en su propio tiempo.

Un enfoque propuesto es diseñar cada elemento de entrada como una interacción autónoma y orientada a tareas , guiada por sus propios requisitos específicos en lugar de por el estado global de toda la aplicación. Por ejemplo, los elementos obligatorios pueden ir precedidos de un asterisco , los elementos con datos no válidos pueden adquirir un borde rojo, y así sucesivamente. Con este enfoque, los usuarios realmente se benefician de ver muchos elementos de entrada a la vez: pueden ingresar datos de una manera que tenga sentido para ellos, en lugar de tener todos los demás elementos no relacionados bloqueados hasta que se complete una secuencia de ingreso de datos predefinida.

Problemas

Una ventana modal bloquea todos los demás flujos de trabajo en el programa de nivel superior hasta que se cierra la ventana modal, a diferencia de los cuadros de diálogo sin modalidad que permiten a los usuarios operar con otras ventanas. [12] Las ventanas modales están destinadas a captar toda la atención del usuario. [13] Los usuarios pueden no reconocer que una ventana modal requiere su atención, lo que genera confusión sobre la falta de respuesta de la ventana principal o causa la pérdida de la entrada de datos del usuario destinada a la ventana principal (consulte Error de modo ). En casos graves, la ventana modal aparece detrás de otra ventana controlada por el mismo programa, lo que potencialmente hace que todo el programa no responda hasta que se pueda localizar la ventana modal manualmente.

Sin embargo, muchos diseñadores de interfaces han tomado recientemente medidas para hacer que las ventanas modales sean más obvias oscureciendo el fondo detrás de la ventana o permitiendo que cualquier clic del ratón fuera de la ventana modal fuerce el cierre de la misma (un diseño llamado Lightbox [5] ), aliviando así esos problemas. Jakob Nielsen afirma que una ventaja de los diálogos modales es que mejoran la conciencia del usuario: "Cuando hay que arreglar algo, es mejor asegurarse de que el usuario lo sepa". Para este objetivo, el diseño Lightbox proporciona un fuerte contraste visual del diálogo sobre el resto de elementos visuales. La técnica Lightbox es ahora una herramienta común en el diseño de sitios web.

Las ventanas modales se implementan comúnmente de manera que bloquean la posibilidad de mover, minimizar, convertir en icono o empujar hacia atrás esa ventana, y captan el foco de entrada, lo que a menudo impide el uso de las funciones de cortar, copiar y pegar de un sistema. Esto puede interferir con el uso de sus aplicaciones principales al bloquear el acceso a otras ventanas y datos dentro de la misma aplicación, en particular en los casos en que la ventana modal requiere que el usuario ingrese información que solo está disponible en una de las ventanas que cubre.

Para los usuarios que utilizan áreas de trabajo virtuales más grandes que sus pantallas reales, las ventanas modales pueden provocar un comportamiento no deseado adicional, incluida la creación del modal en una parte de la pantalla virtual que no está en la pantalla o el cambio abrupto de la pantalla de aquello en lo que estaba trabajando el usuario a una sección completamente diferente.

Las ventanas modales tienden a crear una desviación abrupta de la entrada de texto, especialmente la entrada escrita destinada a otros programas, hacia sí mismas. Además, las ventanas modales suelen interpretar la pulsación de la tecla Intro (o en casos excepcionales la presencia de una nueva línea en la entrada pegada) como una señal para aceptar la entrada y procesarla, o, en casos excepcionales, pueden interceptar un clic del ratón destinado a una aplicación diferente que de repente ha sido cubierta. Esta interceptación, denominada robo de foco (o robo de foco), puede comprometer las prácticas de privacidad y seguridad, así como capturar una entrada inapropiada y fuera de contexto que puede causar resultados indefinidos y arbitrarios en el programa que generó la ventana modal.

Dependiendo de las particularidades de la implementación, las ventanas modales pueden violar el principio de mínima sorpresa .

Recomendaciones

Los diálogos modales forman parte de un flujo de tareas y se ofrecen recomendaciones para ubicarlos en el lugar donde se encuentra el foco en ese flujo. Por ejemplo, la ventana podría ubicarse cerca del elemento de control gráfico que desencadena su activación. [14]

El uso de un fondo oscuro semitransparente puede oscurecer la información de la ventana principal, por lo que es mejor usarlo solo cuando dicha información pueda distraer. Se puede hacer que un fondo semitransparente sea menos intrusivo haciendo que toda el área del fondo funcione como un botón de cierre: esto es estándar en la mayoría de los sistemas operativos móviles, evita que el usuario se sienta atrapado y hace que las ventanas modales parezcan menos ventanas emergentes maliciosas.

El diseño debe seguir las prácticas comunes de la plataforma en la que se ejecuta el programa. Microsoft Windows utiliza controles estándar para los cuadros de diálogo de las ventanas modales , con botones de acción afirmativa en la parte inferior derecha del panel. Mac OS X utiliza hojas modales con botones de acción afirmativa como el comando más a la derecha. [15]

Véase también

Referencias

  1. ^ abcd "Nunca utilices una advertencia cuando quieras decir deshacer". alistapart.com . Consultado el 9 de octubre de 2015 .
  2. ^ Raskin, Jef (2000). The Humane Interface. Estados Unidos: Addison Wesley. ISBN 0-201-37937-6.
  3. ^ "Nitpicker / The Humane Interface". nitpicker.pbworks.com . Regla 1a . Consultado el 9 de octubre de 2015 .
  4. ^ Explorador de patrones de UX de Quince. "Panel modal". Archivado desde el original el 27 de febrero de 2010.La popular biblioteca JavaScript Lightbox utiliza un enfoque de panel modal para mostrar las imágenes.
  5. ^ por Jakob Nielsen, Alertbox. "Las 10 mejores interfaces de usuario de aplicaciones".
  6. ^ Joel Spolsky , Diseño de interfaz de usuario para programadores: diseño para personas que tienen mejores cosas que hacer con sus vidas
  7. ^ Raymond Chen , The Old New Thing: La respuesta predeterminada para cada cuadro de diálogo es "Cancelar"
  8. ^ Jeff Atwood, Coding Horror: enseñar a los usuarios a leer
  9. ^ "Hojas de cálculo - Presentación - Componentes - Pautas de interfaz humana - Diseño - Apple Developer". Apple Developer . Consultado el 7 de septiembre de 2022 .
  10. ^ Cooper, Alan (17 de marzo de 2003). About Face 2.0: The Essentials of Interaction Design [Acerca de la cara 2.0: los fundamentos del diseño de interacción]. Wiley. ISBN 0-7645-2641-3.
  11. ^ Raskin, Jef (2000). La interfaz humana. Addison Wesley. ISBN 0-201-37937-6.
  12. ^ "Cómo utilizar la modalidad en los cuadros de diálogo". Oracle Corporation .
  13. ^ "Panel modal". quince.infragistics.com . Archivado desde el original el 6 de mayo de 2013.
  14. ^ "Panel modal: implementación". quince.infragistics.com . Archivado desde el original el 6 de mayo de 2013.
  15. ^ Inc., Apple. «Temas - macOS - macOS - Directrices de interfaz humana - Apple Developer». developer.apple.com . Consultado el 18 de septiembre de 2018 . {{cite web}}: |last=tiene nombre genérico ( ayuda )