it-swarm.com.de

Wann sollten abgedunkelte Hintergründe hinter modalen Fenstern verwendet werden?

Ich erstelle ein modales Fenster, das einen Benutzer anweist, sich in einem Geschenkformular dafür anzumelden. Ich überlege, ob ich den Bildschirm auch hinter dem modalen Fenster abdunkeln soll oder ob sich dieser Effekt eher wie ein "Hindernis" anfühlt.

Wann ist es gut, den Bildschirm hinter einem modalen Fenster abzudunkeln, und wann ist es schlecht?

HINWEIS ZU ANTWORTEN :

Stellen Sie für zukünftige Leser sicher, dass Sie alle Antworten unten besuchen - ich muss eine auswählen, aber es gibt dort unten viele großartige Antworten. Bleib nicht bei dem, den ich ausgewählt habe!

18
johnnietheblack

Das Abdunkeln des übergeordneten Fensters ist im Wesentlichen ein visueller Indikator für den Benutzer, dass das Fenster inaktiv ist. Wenn sich das übergeordnete Fenster beim Anzeigen des Modals nicht visuell ändert, glaubt der Benutzer, dass der Bildschirm dahinter noch aktiv ist. Wenn der Benutzer auf etwas klickt, wird er frustriert, dass es ohne ersichtlichen Grund nicht funktioniert.

Überlegen Sie, was ein modaler Dialog ist und welchen Zweck er hat. Design-Modalitäten sollen den Fokus vollständig auf das übergeordnete Fenster richten. Der Benutzer soll nichts anderes tun. Daher empfiehlt es sich, den Status des übergeordneten Fensters zu ändern, um sie darüber zu informieren, dass dies der Fall ist. Heutzutage ist es am gebräuchlichsten, das übergeordnete Fenster leicht grau zu machen.

Wenn Ihre Benutzer die Informationen im übergeordneten Fenster anzeigen und gleichzeitig das modale Fenster verwenden müssen, sollten Sie generell darüber nachdenken, die Interaktion auf eine andere Weise durchzuführen, um dies für den Benutzer zu vereinfachen.

11
ArchieVersace

Ich denke, der abgedunkelte Bildschirm hinter der Modal Window Convention kam aus Kinos. Wenn der Film startet, wird das Licht gedimmt, sodass Sie dem hellen Bildschirm natürlich mehr Aufmerksamkeit schenken.

Wenn die Funktion im Modal eine Schlüsselkomponente ist (Anmeldung, Warnung usw.), denke ich, dass es in Ordnung ist. Ich würde diese Behandlung nur für wichtige Funktionen reservieren und nicht übertreiben. Wenn Sie alles betonen, wird nichts betont.

Wir verwenden diese Behandlung derzeit auf dieser Website zum Verknüpfen einer URL oder eines Bildes. Sie können selbst testen, wie es funktioniert.

Die Höhe der Deckkraft in% liegt bei Ihnen. Wenn die Informationen der übergeordneten Seite für das Modal relevant sind, verdunkeln Sie sie nicht zu stark oder überhaupt nicht. Außerdem wäre es benutzerfreundlicher, wenn der Benutzer das Modal herumziehen könnte.

7
Jin

Es ist ein Mechanismus auf halbem Weg zwischen einem Informations-Popup-Fenster und der plötzlichen Verschiebung, einen völlig anderen Bildschirm anzuzeigen.

Ohne den Bildschirm abzudunkeln, sagen Sie ' Dies ist ein vorübergehender Dialog innerhalb Ihres Workflows und Sie können jederzeit zum Hauptfenster zurückkehren '. Dies wäre die Norm.

Indem Sie den Bildschirm abdunkeln, stellen Sie eine fast separate Umgebung für das Formular bereit - sagen Sie ', warten Sie einen Moment - bevor Sie fortfahren, werden wir Sie nur aus dem Workflow herausnehmen, weil Sie es brauchen um dies zu tun, aber wir werden dich platzen lassen genau dort, wo du warst wenn du fertig bist '.

Abgedunkelte Bildschirme für Bilder unterscheiden sich geringfügig, da Mechanismen wie ein Leuchtkasten auch dazu dienen, ein Bild ohne die Unordnung des Bildschirms dahinter gut einzurahmen.

5
Roger Attrill

Wir hatten kürzlich die gleiche Diskussion: Unsere alten Websites verwenden den abgedunkelten Hintergrund. Wir wollten ihn entfernen, um ein freundlicheres und saubereres Erscheinungsbild zu erzielen. Ein Problem trat jedoch sofort auf: Die Schaltfläche im Dialogfeld konkurrierte um Aufmerksamkeit die Schaltflächen der Seite. Und deshalb haben wir wieder einen abgedunkelten Hintergrund verwendet.

4
Phil

Meines Wissens gibt es keine Studie, die angibt, warum eine Situation aus wahrnehmungsbezogener/kognitiver Sicht der anderen vorzuziehen wäre.

Nach einem Gespräch mit einem Kollegen fühlt es sich jedoch intuitiv so an:

  • Es wäre gut, den Bildschirm hinter dem Modalfenster abzudunkeln, wenn Ihr Modalfenster sich direkt auf Daten auswirkt, die im übergeordneten Fenster angezeigt werden, und das übergeordnete Fenster nicht dynamisch aktualisiert wird.

  • Wenn der Benutzer in der Lage sein muss, Daten schnell aus dem übergeordneten Fenster zu lesen, ist natürlich keine Schattierung das Richtige.

  • In den meisten anderen Fällen ist standardmäßig wahrscheinlich keine Schattierung die bessere Option.

3
Bitgarden

wenn sich dieser Effekt eher wie ein "Hindernis" anfühlt.

Das Verdunkeln des Bildschirms hinter modalen Fenstern/Popups/Warnungen (wie auch immer Sie sie nennen möchten!) Ist meiner Erfahrung nach auf Websites fast allgegenwärtig. Fragen Sie sich - haben Sie es jemals als "Hindernis" empfunden? Persönlich habe ich nicht.

Es gibt größere Diskussionen über die Verwendbarkeit von Funktionen vom Typ "Leuchtkasten" und hier bereits viele Punkte. Für mich bedeutet das Abdunkeln des Hintergrunds eine Sache, deren Wichtigkeit von Ihrem Kontext abhängt - den Fokus. Der Benutzer wird visuell dazu gebracht, das Popup zu betrachten und sich auf das zu konzentrieren, was darin enthalten ist - ob es sich um Informationen oder eine Aktion handelt oder was auch immer. Das kann das Richtige für Sie sein oder auch nicht (für die Anmeldung würde ich davon ausgehen, dass dies der Fall ist).

Ich würde diese Art von Lightbox-Funktion für etwas belassen, auf das der Benutzer definitiv achten muss, obwohl Sie das sowieso zu tun scheinen.

3
Sam K

dieser Effekt wird sich eher wie ein "Hindernis" anfühlen.

Wenn überhaupt, ist der modale Dialog das Hindernis, nicht der Effekt.

Ich stimme nicht einmal zu, dass es ein Hindernis ist. Für den durchschnittlichen Geek ist die Auswahl gut. Für den durchschnittlichen Benutzer ist die Anleitung wichtiger.

Der dunkle Hintergrund gibt ein klares Signal: Ich möchte Ihre Aufmerksamkeit hier. Eine große, freundliche Schaltfläche zum Abbrechen ist das einzige, was Sie für Ihre Benutzer benötigen, die sich nicht anmelden möchten, um glücklich zu sein.


lassen Sie mich die beiden Argumente, die ich vor dem dunklen Hintergrund konstruieren kann, abschießen:

1. Es gibt Anwendungsfälle: Benutzer A klickt auf "Anmelden" und fährt damit fort. Benutzer B klickt auf "Anmelden", merkt dann aber, dass er lieber auf den Link "Was ist heiß" klicken möchte.

Für Benutzer B ist der dunkle Hintergrund gut: Er weiß, dass er auf Abbrechen klicken muss, bevor er auf "Was ist neu" klicken kann. Wenn Sie modal sind, ist der Hintergrund sowieso nicht interaktiv.

Benutzer A würde die Einschränkung niemals bemerken. Selbst für sie führen Sie ihren Fokus jedoch zu den Anmeldesteuerelementen (das obige Argument "Anleitung").

2. Sehen, was dahinter steckt. Es gibt modale Dialoge, für die Sie, um sie zu vervollständigen, sehen müssen, was sich im Hauptfenster/darunter befindet. Aber das ist eine schlechte Benutzerfreundlichkeit: Die Anwendungsdaten, die der Benutzer zum Ausfüllen eines modalen Formulars benötigt, sollten über das Formular verfügbar sein. Wenn Sie z. Bei einem Diagramm ist eine Anordnung nebeneinander normalerweise besser.

3
peterchen

Es ist eine große Hilfe, den Hintergrund hinter einem modalen Fenster zu ändern.

Aber Verdunkelung der Hintergrund fühlt sich für mich immer bedrohlich an: Warum trübt sich der Sturm plötzlich? Stattdessen möchten Sie möglicherweise Aufhellung den Hintergrund berücksichtigen, indem Sie die Textfarbe beispielsweise von 0x333333 (nicht ganz schwarz) ändern. bis 0xd0d0d0 (sehr hellgrau). Auf diese Weise ist das Modal deutlich sichtbar und der Benutzer weiß, was zu tun ist. Und es ist nicht so trostlos wie ein dunkler Hintergrund.

Es ist ein bisschen einfacher, den Text aufzuhellen, als mit Deckkraft herumzuspielen: Es geht darum, die Klasse bestimmter Elemente auf der Hauptseite zu ändern:

.text {
  color: 0x333333;
}
.text-faded {
  color: 0xd0d0d0;
}

Nur meine Meinung, aber für mich sieht es attraktiver aus.

2
Pete Wilson