Dieses Thema dient der Erfassung von Feedback zum Styling des Vollbild-Logins / der Kontoerstellung, das auf meta verfügbar ist unter: Discourse Design team experimentation topic
7 „Gefällt mir“
Wird es vorab geladen?
Ich mag es sehr. Kleine Modals sind bei den gängigen Apps für Internetnutzer schon seit einer Weile veraltet.
6 „Gefällt mir“
Es fühlt sich wirklich gut an! Sehr schön. 
Einige Rückmeldungen:
- Desktop – Die Breite der Social-Media-Buttons auf großen Bildschirmen könnte zu groß und aufdringlich sein. Wenn Sie sie jedoch verkleinern, kann dies mehr Aufwand erfordern, um die visuelle Harmonie zwischen der linken und rechten Seitenleiste zu gewährleisten.
- Desktop – Die Farbe des Schließsymbols benötigt möglicherweise mehr Kontrast für die Barrierefreiheit.
Screenshots
- Mobil – Sehr wählerisch
. Es scheint, dass die Zeilenhöhe vielleicht etwas zu hoch ist
- Mobil – Ich bin mir bei diesem nicht sicher. Es hängt vom Bildschirmkontrast ab. Die Rahmenfarbe der Social-Media-Buttons scheint kaum sichtbar zu sein (das erste, was mir auf meinem Handy aufgefallen ist, sieht aber auf meinem zweiten Bildschirm in Ordnung aus). Ich verstehe, wenn es zu viel ist; es wird sicherlich überwältigend sein. Vielleicht hilft die Verwendung von
primary-300ein wenig.
6 „Gefällt mir“
Vielen Dank für Ihr detailliertes Feedback!
2 „Gefällt mir“
Vorerst ist es hier auf Meta installiert, während wir experimentieren und Feedback erhalten. Wenn die Dinge gut aufgenommen werden, würden wir dies schließlich zum Standard im Kernprodukt machen.
4 „Gefällt mir“
Ich finde, oben ist viel Leerraum. Warum muss ich scrollen, damit der Login-Button erscheint? Wie Sie am Ende sehen können, passt der gesamte Text perfekt auf den Bildschirm.
2 „Gefällt mir“
Auf Safari unter iOS ist der Text „Willkommen“ abgeschnitten.
Wischen nach oben oder unten behebt das Problem ebenfalls nicht. Beachten Sie auch, dass das X des Modals über dem Emoji liegt.
Ich frage mich, ob die beste Option hier darin besteht, eine maximale Breite für die vollständige Seitenbehandlung des Modals festzulegen. Über eine bestimmte Breite hinaus ist es wahrscheinlich nicht sinnvoll, weiterhin den gesamten Ansichtsbereich zu nutzen.
2 „Gefällt mir“
Weißt du, ich glaube, das könnte daran liegen, dass ich mich an das Links|Rechts-Layout halte, das wir im Modal hatten, als Anmeldeoptionen vorhanden waren.
Ich werde untersuchen, wie die alternativen Anmeldeoptionen in den Hauptanmeldebereich integriert werden können.
2 „Gefällt mir“
Ich habe einige Anpassungen vorgenommen, die den Großteil dieses Feedbacks berücksichtigen. Schau es dir an und lass mich wissen, was du denkst
@pmusaraj schau dir das auch an, ich bin vom 2-Spalten-Layout abgewichen und habe zu einer einzigen Ansicht in der Mitte eines Vollbilds zusammengeführt, ähnlich wie bei Google und vielen anderen Anmeldeseiten.
3 „Gefällt mir“
Es ist eine interessante Idee, aber ehrlich gesagt bin ich noch nicht ganz überzeugt. Vielleicht ist es bei mir eine Art Muskelgedächtnis, denn ich habe mich definitiv an die Aufteilung in Weiß/Blau (oder Schwarz/Blau für dunkle Designs) auf diesen Bildschirmen gewöhnt, aber für mich ist das auch Teil der Discourse-Identität geworden. Es fühlt sich wie ein großer Schritt an, sie zu entfernen.
Ich werde ein paar nebeneinanderliegende Screenshots posten, das hilft, die Dinge in den Kontext zu setzen (es sind unterschiedliche Instanzen, aber es geht nur darum, die Idee der Änderung zu vermitteln).
Darüber hinaus ist im Anmelde-Modal der CTA “Create Your Account” hinter einem Scrollbalken verborgen, man sieht ihn nicht sofort.
Außerdem, etwas anderes, worüber man nachdenken sollte: Auf allen Vollbild-Anmeldebildschirmen fehlt das Logo der Website. Benutzer wissen normalerweise, wo sie sich befinden, aber das Logo ist eine wichtige zusätzliche Bestätigung, dass Sie tatsächlich sensible Daten (eine E-Mail, ein Passwort) auf der richtigen Website eingeben. Auf den alten Bildschirmen ist es, sozusagen, dank des Modalrahmens vorhanden.
8 „Gefällt mir“
Hier ist etwas Feedback!
Es sieht gut aus. Ich denke, es fehlt ein wenig visuelle Identität. 
. (EDIT: Ich habe definitiv das gleiche Gefühl wie Penar bezüglich der Identität)
Mobil
Im Hochformat sieht es gut aus.
Einige Probleme im Querformat:
- Die Kopfzeile ist abgeschnitten. Sie können nicht nach oben scrollen, aber Sie können nach unten scrollen.
Screenshot
Das passiert auch im Hochformat.
Die Tastatur schiebt den Inhalt auf der Anmeldeseite nach oben. Auf der Registrierungsseite passiert das nicht.
Zum Querformat. Die meisten Leute werden es nicht benutzen, aber es kann passieren, und es ist keine gute Benutzererfahrung. Ich denke, Sie können ein paar CSS anpassen, damit die Blöcke um die Willkommensnachricht schweben. Nicht ideal, aber es ist in Ordnung:
Am ansprechendsten finde ich jedoch, die Anmeldedaten und sozialen Schaltflächen zu halbieren:
- Nicht direkt damit verbunden. Auf Mobilgeräten ist die erste Eingabe fokussiert, und es öffnet sich direkt die Tastatur. (Ich weiß nicht, ob das überall das gleiche Verhalten ist)
Ich denke, das verschlechtert die Benutzererfahrung aus zwei Gründen:
- Sie sehen die gesamte Seite nicht auf den ersten Blick, und es ist nicht einladend.
- Sie sehen nicht alle Anmeldeoptionen. (Besonders für Benutzer, die sich über soziale Medien anmelden – Sie müssen jedes Mal die Tastatur schließen)
Desktop
Es sieht größtenteils gut aus, mit einigen Problemen.
- Im mittleren Bildschirmformat sieht es gut aus:
- Auf großen Bildschirmen bin ich mir nicht sicher. Es sieht gut aus; jedoch, während alle sozialen Schaltflächen in einer Zeile praktisch erscheinen, sieht es ungewöhnlich aus (kleiner Inhalt zentriert, darunter großer Inhalt). Es ist nicht falsch, und es sieht in Ordnung aus – es könnte eine Gewohnheit vom vorherigen Stil sein, da Ihre Aufmerksamkeit auf einen zentrierten Bereich gerichtet ist.
Was Sie vorher gemacht haben, war tatsächlich ziemlich elegant, und wie Penar vorschlug, würde eine maximale Breite ausreichen, um es gut aussehen zu lassen. Es würde mir nichts ausmachen, auf einem großen Bildschirm zwei Spalten zu sehen, die dann automatisch unter einem bestimmten Limit umbrechen.
- Auf der responsiven Seite – unter einer bestimmten Mindesthöhe erhalten Sie eine Scrollleiste im linken Bereich. Ich kann nicht auf einem echten Gerät testen, ob das auch passiert. Ich denke, es wäre für den Benutzer natürlicher, die Seite zu scrollen, anstatt die interne Komponente.
Allgemein
- Die Foren-Scrollleiste ist sichtbar, wenn das Anmelde-Modal geöffnet ist, und Sie können damit spielen. Es könnte den Benutzer verwirren, zu denken, dass etwas da ist, wo nichts ist. Es kann verwirrend sein, wenn gleichzeitig die Scrollleiste des Modals erscheint.
Beispiel
4 „Gefällt mir“
Ein weiterer Satz von Anpassungen und Änderungen wurde heute hinzugefügt
4 „Gefällt mir“
Alt:\n\n
\n\n\nNeu:\n\n\n\n\nDie Anmeldung mit einem sozialen Konto wirkt auf einem schmalen Bildschirm jetzt extrem unterdrückt. Ich stimme zu, dass es optisch besser aussieht, aber diese Aktionen werden jetzt nicht mehr hervorgehoben.\n\n\n—\n\nSeitenleiste… Bei der Anmeldung möchten wir den Text wahrscheinlich in „Mit Google anmelden“ ändern. Außerdem ist es verwirrend, dass einige „anmelden“ und andere „einloggen“ sind.
4 „Gefällt mir“
dies würde auch gegen ihre Richtlinien für soziale Anmeldungen verstoßen. Einige Websites wurden in der Vergangenheit wegen nicht konformer Facebook-Schaltflächen benachrichtigt (Anforderungen für soziale Anmeldungen könnten auch der Grund sein, warum einige „anmelden“ statt „einloggen“ sagen, obwohl ich mir da nicht 100% sicher bin).
4 „Gefällt mir“
Es sieht aus wie weitere Teilen/Folgen-Icons im Footer. Überhaupt nicht gut und ich bin mir absolut sicher, dass die meisten Benutzer nicht erkennen, dass diese eigentlich zum Anmelden sind.
1 „Gefällt mir“
Los geht’s.
Mobil
- Im Hochformat sieht es gut aus!
Mögliche Verbesserungen:
-
Die Social-Buttons erscheinen auf meinem Handy recht klein (Android, FDH+, 2220x1080). Zum Vergleich: Meine Fingerbreite beträgt ca. 1,5 cm, und die Buttonbreite beträgt 0,5 cm auf meinem Handybildschirm. Dies könnte ein Barrierefreiheitsproblem sein. Ich würde versuchen, sie etwas größer zu machen (auch den Abstand).
-
Wenn die Tastatur sichtbar ist, verschiebt sie das Modal nach oben. Ich glaube, das hängt mit dieser kürzlichen Änderung zusammen: FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – Ich glaube jedoch nicht, dass dies auf das Vollbild-Login-Modal angewendet werden sollte. Ein Layout-Shift ist nicht gut.
-
Im Querformat wird es vermutlich unverändert sein. Hier wäre etwas Liebe nötig.
Desktop
Sieht insgesamt gut aus!
Ich wäre definitiv für dieses Design. Danke, dass Sie es zurückgebracht haben!
Großer Bildschirm
Ich habe zwei Bedenken:
- Diese beiden Panels sind immer noch etwas zu weit voneinander entfernt.
- Die Social-Buttons sind etwas zu groß.
Zu 2. – Sie könnten mehr Breakpoints einführen.
@media screen and (min-width: 1536px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 70%;
}
}
@media screen and (min-width: 1920px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 60%;
}
}
@media screen and (min-width: 2560px) {
.d-modal.create-account #login-buttons .btn, .d-modal.login-modal #login-buttons .btn {
width: 50%;
}
}
Bei 2K-Auflösung sieht es so aus:
Zu 1. – Ich bin mir nicht sicher. Hier ist eine mögliche Alternative. Die Vorteile sind, dass die Ansicht des Benutzers immer zentriert ist und die visuelle Identität beibehalten wird. Die Breite des blauen Panels könnte angepasst werden. Dies ist nicht ganz das gleiche Gefühl, aber es kommt dem ziemlich nahe.
Hinweis: Mit der reduzierten Buttonbreite bin ich mit dem aktuellen Design ziemlich zufrieden. Ich teile diesen Vorschlag für den Fall, dass Sie sich davon inspirieren lassen. Ich mag es irgendwie.
Ein paar CSS, die mir aufgefallen sind:
- Das linke Panel hat einen
padding-topvon3rem– das scheint nicht nützlich zu sein und bewirkt, dass das Panel im Vergleich zum rechten Panel nicht zentriert ist.
.login-left-side {
padding: 0 3rem 0 3rem
}
- Das Registrierungsformular ist nicht vertikal zentriert. Es verwendet dieses CSS. Gibt es einen Grund dafür?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Zentriert sieht es für mich gut aus.
- Der Farbkontrast des Schließen-Buttons muss möglicherweise aus Gründen der Barrierefreiheit angepasst werden. Ich würde stattdessen
--primary-very-highverwenden.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
Das ist alles von meiner Seite!
3 „Gefällt mir“
Das ist der Grund. Ich denke, das letzte Mittel für soziale Anmeldungen auf kleinen Bildschirmen ist nur die Anzeige des Logos, aber das muss ich überprüfen lassen / selbst überprüfen.
2 „Gefällt mir“
Ich kann es jetzt nicht mehr anders sehen, danke, dass du das angesprochen hast!
Hmmm…
Sieht so aus, als ob die einzigen Styleguides, die ich für den Button finden konnte, für Facebook und Google waren.
Facebook möchte nur, dass Sie einen rechteckigen Button mit „Log In With Facebook“ haben. Sie möchten auch nicht, dass Sie viele Optionen haben, sich mit anderen Diensten als Facebook zu authentifizieren.
Google ist damit einverstanden, nur sein Logo als Login-Button zu verwenden, falls erforderlich.
Ich habe mir das hier auf Meta kurz angesehen und es sieht cool aus. Mich wird es aber nicht wirklich betreffen, da das Hauptforum, auf dem ich bin, nur SSO ist.
1 „Gefällt mir“