risposta-alla-domanda-sullo-sviluppo-web-bd.com

Ricerche sullo scorrimento all'interno modale (web)? Pro e contro?

Dal punto di vista dell'interfaccia utente Web, esistono ricerche o best practice definite per quanto riguarda lo scorrimento all'interno di una finestra modale? Fornisci link specifici, studi, ecc.

Sono della scuola che un modale dovrebbe sempre essere vincolato (all'interno) del viewport dell'utente e se il contenuto è più lungo, il contenuto dovrebbe scorrere all'interno del modale.

Tuttavia, un collega si sporge di più per non scorrere mai all'interno di un modale - che il modale può estendersi (altezza) oltre il viewport e l'utente utilizza lo scorrimento del browser per accedere al contenuto del modale sotto la piega.

Ecco un confronto wireframe per l'illustrazione (in un contesto Web mobile/portatile): A visual side-by-side comparison of the options regarding scrolling and modal views described in this question, using mobile web context

Dovrei prefigurare la mia domanda con il fatto che penso che i modali debbano essere usati solo come previsto, per piccole informazioni o interazioni, tuttavia abbiamo casi in cui questo non è rispettato.

Modificare:

possibile approccio. Mantiene distintamente solo una barra di scorrimento e può indirizzare i pro ei contro di ogni approccio: https://trello.com/card/complete-trello-api-v1/4d5ea62fd76aa1136000000c/1397

29
Jason

Sono d'accordo con il tuo collega, principalmente per motivi che sono al di fuori del tuo controllo. Sono anche particolarmente contrario alla soluzione che Trello utilizza nella sua app mobile, quindi è interessante che tu lo abbia menzionato.

Il mio ragionamento è il seguente:

  1. Se si utilizza la barra di scorrimento del browser per tutti i casi, l'elemento attivo non è altrettanto importante quando l'utente scorre verso il basso. Nella maggior parte dei browser (tutti?), Aprire un modale con una barra di scorrimento su una pagina senza barra di scorrimento e premere la freccia giù o le funzioni di pagina giù fa no scorrere il contenuto nel modale a meno che l'utente non faccia clic all'interno (o schede) del modale stesso prima di provare a scorrere. Ciò è particolarmente fastidioso quando il modale occupa una grande percentuale della finestra (quindi c'è una ragionevole aspettativa da parte dell'utente che premendo il tasto Pagina giù si scriverà il contenuto nel modo modale).

  2. Evita il problema del doppio scorrimento. Come menzionato da altri commenti e risposte qui, il comportamento previsto dello scorrimento di un riquadro del contenuto in una pagina che può scorrere è in qualche modo indefinito. Questo era un notevole problema con Windows 8 (fino a Windows 8.1) in quanto lo scorrimento della rotellina del mouse in un'app Metro faceva scorrere nativamente l'intera visualizzazione dell'app in senso orizzontale, fino a quando il cursore del mouse non entrava nella zona di uno dei sottopiani scorrevoli verticalmente di l'app (quando il comportamento è passato immediatamente allo scorrimento verticale del sottopiano). Ciò significava che l'utente non poteva invertire l'azione che avevano eseguito per entrare in quella situazione per tornare indietro out di esso. È anche un problema quando l'utente scorre attivamente il sottopiano fino alla fine e quindi continua a scorrere (ad es. Su un dispositivo con scorrimento inerziale); la pagina dovrebbe iniziare immediatamente a scorrere una volta che il sottopiano viene fatto scorrere fino alla fine? In tal caso, ciò rimuove il solito effetto "snapback" nel sottopiano.

  3. Sul cellulare, ho l'abitudine di scorrere usando solo il bordo del touchscreen. Poiché il mio dito scorre su e giù su un bordo relativamente duro (il bordo del dispositivo), è molto più semplice limitare lo scorrimento verso l'asse verticale senza scorrere accidentalmente in orizzontale (il che può essere un dolore, soprattutto quando ho toccato due volte per ingrandire una colonna di testo sulla pagina, in cui lo scorrimento in orizzontale allontanerebbe la colonna dal centro). Se si introduce uno spazio arbitrario tra il lato del pannello a sfioramento e la sezione scorrevole (come fa Trello), la mia aspettativa di poter scorrere lungo il bordo della finestra è rotta e devo spostare il dito su un punto relativamente insolito posto per scorrere il riquadro. In generale, hai reso il bersaglio colpito molto, molto più piccolo per me (anche se il bordo dello schermo su un dispositivo mobile è un bersaglio fisico relativamente piccolo, è eccezionalmente facile mirare con un dito reale perché posso usare i miei muscoli memoria da sola: non ho bisogno di elaborare dove il riquadro di scorrimento effettivamente è).

A parte tutto ciò, sono contrario all'idea di aprire interfacce modali in un piccolo frame, soprattutto su dispositivi mobili di piccolo schermo (cioè telefoni). Lo spazio dello schermo è già limitato e c'è già una chiara aspettativa che ogni vista dettagliata successiva occupi l'intero schermo. Quando apri una vista di dettaglio in una piccola schermata di popover, stai effettivamente spostando il pulsante "Indietro" lontano da dove è previsto (almeno su iOS) e introducendo un frame inutile di chrome = intorno al contenuto.

5
Kit Grose

La vista modale dovrebbe sempre contenere una breve informazione, scoraggiando una vista di scorrimento. Principalmente a causa del motivo per cui i modali sono per lo più fastidiosi e le persone vorrebbero sbarazzarsene il più rapidamente possibile, ecco perché i modali hanno un pulsante Annulla molto pronunciato. Anche la sezione modale HIG (linee guida per l'interfaccia umana) di Apple tratta questo argomento.

Evitare di creare un messaggio di avviso troppo lungo. Se possibile, mantieni il messaggio abbastanza corto da essere visualizzato su una o due righe. Se il messaggio è troppo lungo, scorrerà, il che non è una buona esperienza utente. - Da Apple Linee guida per l'interfaccia umana

3
Nash Vail

Anche se concordo sul fatto che un modale dovrebbe in genere essere molto focalizzato e avere solo una piccola quantità di contenuti, questo non sempre funziona. Ci sono molte situazioni in cui ha molto senso avere una grande finestra modale con un sacco di interazioni. Il tuo esempio è uno, hai il pop-up fotografico su Facebook che mostra anche una conversazione. Ho utilizzato questo modello in numerosi progetti e tende a funzionare bene. Quindi, sebbene i modali non siano perfetti, le altre opzioni come una sovrapposizione non modale o la navigazione verso una nuova schermata non sono sempre disponibili o migliori.

Detto questo, DA01 ha già sottolineato che dovresti cercare di avere sempre solo una barra di scorrimento.

Una barra di scorrimento fa due cose: indica che c'è contenuto fuori dallo schermo ed è il controllo per visualizzare quel contenuto. In quanto tale, credo che la barra di scorrimento dovrebbe avere una chiara connessione a quel contenuto, anche visivamente. L'esempio di Trello è strano in quanto sembra che la barra di scorrimento debba scorrere l'intera finestra perché è completamente a destra, ma scorre solo il popup.

Non ho una ricerca specifica per questa situazione, ma è una delle regole di base nella progettazione dell'interfaccia che il controllo che influenza una cosa dovrebbe essere vicino e chiaramente correlato a quella cosa. Esistono molti altri esempi di modali con la barra di scorrimento all'interno o in prossimità del modale, rispetto a quelli con la barra di scorrimento sul bordo del viewport: popup di foto di Facebook, modalità lettore Safari, app di composizione OSX modale, sovrapposizione di composizione Gmail, ecc.

3
Koen Lageveen

Penso che l'unica barra di scorrimento all'interno di un modale dovrebbe trovarsi in una porzione di quel modale, come le conversazioni di Facebook in un teatro fotografico come ha detto Koen. Se stai pensando di utilizzare uno scroll "globale" nel tuo modale, forse devi pensare a creare una nuova schermata per quel contenuto.

0
Alex