Questo argomento serve a raccogliere feedback per lo stile di accesso/creazione account a schermo intero reso disponibile su meta tramite: Discourse Design team experimentation topic
7 Mi Piace
Verrà precaricato?
Mi piace moltissimo. I modali di piccole dimensioni sono obsoleti nelle app comuni per utenti internet da un po’.
6 Mi Piace
Mi sento benissimo! Molto bello. 
Alcuni feedback:
- Desktop – la larghezza dei pulsanti social su schermi grandi potrebbe essere troppo grande e imponente. Tuttavia, se li rimpicciolisci, potrebbe essere necessario più sforzo per armonizzare l’aspetto visivo tra i pannelli di sinistra/destra.
- Desktop – Il colore dell’icona di chiusura potrebbe necessitare di più contrasto per l’accessibilità.
Screenshot
- Mobile – Molto pignolo
. Sembra che l’altezza della linea possa essere un po’ troppo alta
- Mobile – Non sono sicuro di questo. Dipende dal contrasto dello schermo. Il colore del bordo dei pulsanti social sembra appena visibile (la prima cosa che ho notato sul mio cellulare, ma sembra ok sul mio secondo schermo). Capisco se è troppo; sarebbe sicuramente opprimente. Forse usare
primary-300potrebbe aiutare un po’.
6 Mi Piace
Grazie per il feedback così dettagliato!
2 Mi Piace
Per ora è installato qui su meta mentre sperimentiamo e raccogliamo feedback. Se le cose saranno ben accolte, alla fine lo renderemo predefinito nel prodotto principale.
4 Mi Piace
Penso che ci sia molto spazio bianco in alto. Perché devo scorrere per far apparire il pulsante di accesso? Come puoi vedere, alla fine tutto il testo si adatta perfettamente allo schermo.
2 Mi Piace
Su Safari su iOS, il testo “Welcome” è tagliato.
Scorrere verso l’alto o verso il basso non risolve il problema. Si noti inoltre che la x della modale si trova sopra l’emoji.
Mi chiedo se l’opzione migliore qui sia quella di avere un limite di larghezza massima per il trattamento a pagina intera della modale. Oltre una certa larghezza, probabilmente non ha senso utilizzare ancora l’intera viewport.
2 Mi Piace
Sai, penso che questo possa essere dovuto al fatto che sto mantenendo il layout sinistra|destra che avevamo nella modale quando erano presenti le opzioni di accesso all’autenticazione.
Esplorerò la possibilità di portare le opzioni di accesso alternative sotto la zona di accesso principale.
2 Mi Piace
Ho apportato alcune modifiche tenendo conto della maggior parte di questi feedback, dai un’occhiata e fammi sapere cosa ne pensi
@pmusaraj dai un’occhiata anche tu, ho abbandonato il layout a 2 colonne e sono passato a una singola visualizzazione al centro di una schermata intera, simile a quella di Google e di molte altre pagine di accesso ai siti.
3 Mi Piace
È un’idea interessante, ma ad essere onesti non mi convince del tutto. Forse è una questione di memoria muscolare da parte mia, sicuramente mi sono abituato alla divisione bianco/blu (o nero/blu per i temi scuri) in queste schermate, ma per me quella è diventata anche parte dell’identità di Discourse. Sembra un passo importante rimuoverla.
Lascerò degli screenshot affiancati, aiuta a mettere le cose in contesto (sono istanze diverse, ma serve solo a dare un’idea del cambiamento).
Inoltre, nella finestra di registrazione, la CTA “Crea il tuo account” è nascosta dallo scroll, non la vedi subito.
Inoltre, qualcos’altro a cui pensare, in tutte le schermate di accesso a schermo intero manca il logo del sito. Gli utenti di solito sanno dove si trovano, ma il logo è un’ulteriore importante validazione che stai effettivamente inserendo dati sensibili (un’email, una password) sul sito giusto. Nelle vecchie schermate c’è, in un certo senso, per gentile concessione del frame modale.
8 Mi Piace
Ecco alcuni feedback!
Sembra buono. Penso che manchi un po’ di identità visiva, però. 
. (EDIT: Ho esattamente la stessa sensazione di Penar riguardo all’identità)
Mobile
Sembra buono in modalità verticale.
Alcuni problemi in modalità orizzontale:
- L’intestazione è tagliata. Non puoi scorrere verso l’alto, ma puoi scorrere verso il basso.
Screenshot
Succede anche in modalità verticale.
La tastiera spinge il contenuto verso l’alto nella pagina di accesso. Non succede nella pagina di registrazione.
Riguardo alla modalità orizzontale. La maggior parte delle persone non la userà, ma può succedere e non è una grande esperienza utente. Penso che tu possa regolare un po’ di CSS per far fluttuare i blocchi attorno al messaggio di benvenuto. Non è l’ideale, ma va bene:
Tuttavia, quello che mi sembra più visivamente accattivante è dividere le credenziali e i pulsanti social a metà:
- Non direttamente correlato. Su mobile, il primo input è a fuoco e apre direttamente la tastiera. (Non so se sia lo stesso comportamento ovunque)
Penso che peggiori l’esperienza utente per due motivi:
- non vedi l’intera pagina all’inizio, e non è accogliente.
- non vedi tutte le opzioni di accesso. (soprattutto per gli utenti che utilizzano il social login – devi chiudere la tastiera ogni volta)
Desktop
Per lo più sembra buono, con alcuni problemi.
- Sembra buono su schermi di medie dimensioni:
- Su schermi grandi, non sono sicuro. Sembra buono; tuttavia, mentre avere tutti i pulsanti social su una riga sembra conveniente, appare insolito (contenuto piccolo centrato, con sotto un contenuto grande). Non è sbagliato, e sembra ok – potrebbe essere un’abitudine dal precedente stile poiché la tua attenzione è concentrata su un unico punto centrale.
Quello che hai fatto prima era in realtà piuttosto elegante, e come suggerito da Penar, una larghezza massima sarebbe sufficiente per farlo sembrare buono. Non mi dispiacerebbe vedere due colonne su uno schermo grande, poi si adatta automaticamente sotto un certo limite.
- Sul lato responsive – sotto una certa altezza minima, ottieni una barra di scorrimento sul pannello sinistro. Non posso testare su un dispositivo reale se succede anche lì. Penso che sarebbe più naturale per l’utente scorrere la pagina invece del componente interno.
Comune
- La barra di scorrimento del forum è visibile quando la modale di accesso è aperta e puoi interagire con essa. Potrebbe confondere l’utente facendogli pensare che ci sia qualcosa quando non c’è. Può essere strano se appare anche la barra di scorrimento della modale allo stesso tempo.
Esempio
4 Mi Piace
Un altro giro di modifiche e aggiustamenti è stato aggiunto oggi
4 Mi Piace
Vecchio:
Nuovo:
La registrazione con account social risulta ora estremamente limitata su uno schermo stretto. Concordo che visivamente sia migliore, ma ora queste azioni non vengono più evidenziate.
Barra laterale… alla registrazione probabilmente vogliamo cambiare il testo in “registrati con Google”. Inoltre, è confuso che alcuni siano “sign in” e altri “log in”.
4 Mi Piace
questo andrebbe anche contro le loro linee guida per gli accessi social, abbiamo avuto alcuni siti notificati in passato per pulsanti di Facebook non conformi (i requisiti di accesso social potrebbero anche essere il motivo per cui alcuni dicono “accedi” invece di “registrati”, anche se non ne sono sicuro al 100%).
4 Mi Piace
Sembra un’altra icona di condivisione/follow nel footer. Non va affatto bene e sono totalmente sicuro che la maggior parte degli utenti non si renda conto che servono effettivamente per il login.
1 Mi Piace
Iniziamo.
Mobile
- In modalità verticale, ha un bell’aspetto!
Possibili miglioramenti:
-
I pulsanti social appaiono piuttosto piccoli sul mio telefono (Android, FDH+, 2220x1080). Per fare un confronto, la larghezza del mio dito è di circa 1,5 cm e la larghezza del pulsante è di 0,5 cm sullo schermo del mio telefono. Questo potrebbe essere un problema di accessibilità. Proverei a renderli un po’ più grandi (anche lo spazio).
-
Quando la tastiera è visibile, sposta la modale verso l’alto. Credo che sia correlato a questa recente modifica qui FIX: Modals on Android when keyboard is visible by pmusaraj · Pull Request #24442 · discourse/discourse · GitHub – Tuttavia, non credo che questo dovrebbe essere applicato alla modale di accesso a schermo intero. Sperimentare uno spostamento del layout non è ottimale.
-
In modalità orizzontale, presumo che non sia stata toccata. Servirebbe un po’ di attenzione in quest’area.
Desktop
Nel complesso ha un bell’aspetto!
Sarei decisamente a favore di questo design. Grazie per averlo ripristinato!
Schermo grande
Ho due preoccupazioni al riguardo:
- Quei due pannelli sono ancora un po’ troppo distanti
- I pulsanti social sono un po’ troppo grandi.
Riguardo al punto 2 – Potresti introdurre più breakpoint
@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%;
}
}
Alla risoluzione 2K, appare così:
Riguardo al punto 1 – Non sono sicuro. Ecco un’alternativa possibile. I vantaggi sono che la visuale dell’utente è sempre centrata mantenendo l’identità visiva. La larghezza del pannello blu potrebbe essere regolata. Non è la sensazione esatta, ma ci si avvicina molto.
Nota: Con la larghezza dei pulsanti ridotta, sono abbastanza soddisfatto del design attuale. Condivido questo suggerimento nel caso in cui tu abbia un’ispirazione per esso. Mi piace abbastanza.
Alcuni CSS che ho notato:
- Il pannello sinistro ha un
padding-topdi3rem– questo non sembra utile e fa sì che il pannello non sia centrato rispetto al pannello destro.
.login-left-side {
padding: 0 3rem 0 3rem
}
- Il modulo di registrazione non è centrato verticalmente. Utilizza questo CSS. C’è un motivo?
.d-modal.create-account .login-left-side {
height: calc(80% - 6rem);
@media screen and (max-width: 900px) {
height: calc(100% - 6rem);
}
}
Centrato ha un bell’aspetto per me.
- Il contrasto di colore del pulsante di chiusura potrebbe dover essere regolato per motivi di accessibilità. Userei invece
--primary-very-high.
.d-modal__header .modal-close .d-icon {
color: var(--primary-very-high);
}
Questo è tutto da parte mia!
3 Mi Piace
Questo è il motivo. Penso che l’ultima risorsa per gli accessi social su schermi piccoli sia semplicemente mostrare il logo, ma devo essere verificato / fare qualche controllo a riguardo.
2 Mi Piace
Ora non riesco a non vederlo così, grazie per averlo segnalato!
Hmmm…
Sembra che le uniche guide di stile che ho trovato sul pulsante fossero per Facebook e Google.
Facebook vuole solo che tu abbia un pulsante rettangolare con “Accedi con Facebook”. Inoltre, non vogliono che tu abbia molte opzioni per autenticarti con servizi diversi da Facebook.
Google va bene se si utilizza solo il proprio logo come pulsante di accesso, se necessario.
Ho dato una rapida occhiata qui su meta e sembra fantastico. Non mi influenzerà molto, dato che il forum principale su cui sono è solo SSO.
1 Mi Piace