it-swarm-eu.dev

L'usabilità di "UI lightbox"

I lightbox stanno diventando molto più diffusi nel web design tradizionale. Conosci l'esercitazione: fai clic su un collegamento, lo sfondo diventa più scuro e su viene visualizzata un'interfaccia utente per interagire con un oggetto, apportare una modifica, visualizzare una galleria di immagini ecc.

Rendono molto ovvio cosa sta succedendo e dove l'attenzione dell'utente deve essere in qualsiasi punto dell'esperienza. Tuttavia, spesso non consentono all'utente di aprire immagini o eseguire tale attività in una nuova scheda del browser, ad esempio, che può frustrare molti.

Sembra esserci un po 'di resistenza da parte di alcuni noti sviluppatori di software Web:

Quindi, qualcuno ha fatto test utente/test di usabilità con le UI lightbox e come si sono comportati? Quali sono le insidie? Dove fanno bene? Dove lo fanno male?


Modifica: ho visto un uso interessante di una lightbox l'altro giorno, facendo acquisti per l'assicurazione auto. Ho pensato che funzionasse abbastanza bene: hai selezionato opzioni aggiuntive sulla pagina per aggiungere elementi come la copertina dettagliata alla politica di base, fare clic su Aggiorna e il lightbox si è sbiadito e ha mostrato l'avanzamento dell'aggiornamento. Pulito, diretto, ovvio cosa stava succedendo.

enter image description here

49
Alastair J

Non ho dati diversi da alcune osservazioni personali, ma i lightbox analiticamente modali hanno problemi di usabilità così importanti rispetto all'alternativa che non riesco a immaginare a cosa potrebbero andare bene.

Le persone hanno confrontato le lightbox con le finestre di dialogo modali, che costringono l'utente a completare o annullare un atto prima di procedere, pur consentendo agli utenti di vedere il contenuto precedente come riferimento. Supponendo che in realtà sia una buona idea forzare gli utenti a fare qualcosa (e di solito non lo è), questo dimentica che le finestre di dialogo hanno un grande vantaggio rispetto alle lightbox: sono completamente mobili. I lightbox che ho visto non possono essere spostati, quindi l'utente non può vedere tutto ciò che è dietro per riferimento. Anche se un lightbox fosse mobile, non saresti in grado di spostarlo fuori dal telaio della finestra, quindi occlude sempre qualcosa.

Se hai bisogno di qualcosa di modale in un sito web, passa a una nuova pagina. Come una finestra di dialogo modale, quando l'utente passa a una nuova pagina, l'utente è costretto a completare ciò che è necessario o a annullare (tramite Indietro). Nielsen potrebbe parlare di come un lightbox catturi l'attenzione dell'utente, ma non può competere nel presentare all'utente una pagina completamente nuova. Se è necessario un contesto dalla pagina precedente, copiare il contenuto appropriato nella nuova pagina.

Rispetto a una nuova pagina, le lightbox aggiungono un carico di lavoro mentale, costringendo l'utente a imparare e ricordare ancora un altro modo di navigare. È abbastanza grave che ci siano tre modi incoerenti di eliminare alcuni contenuti per tornare ai contenuti precedenti. È possibile che l'utente debba utilizzare il pulsante Indietro o chiudere la finestra corrente o chiudere la scheda corrente. Ora aggiungiamo la chiusura della lightbox, con i suoi controlli idiosincratici. Gli utenti non hanno bisogno di questa complessità.

Peggio ancora, rompe il pulsante Indietro. Se si lascia il pulsante Indietro abilitato, gli utenti possono fare clic su di esso con l'intenzione di uscire dalla lightbox per tornare alla pagina sottostante (o per tornare indietro di una pagina all'interno della lightbox, ad esempio durante la visualizzazione di una presentazione). Invece, facendo clic su Indietro si sposta indietro la pagina sottostante, costringendo l'utente ad andare avanti e a reimpostare tutto. Se disabiliti il ​​pulsante Indietro, gli utenti potrebbero ritenere che il contenuto del lightbox sia aperto in una nuova scheda o finestra, quindi fanno clic sul pulsante Chiudi finestra/scheda per tornare indietro, spazzando via la pagina sottostante, la sua cronologia e forse il intera sessione del browser.

Le lightbox non sembrano finestre pop-up, quindi erano un modo per aggirare gli utenti che respingevano nuove finestre come pubblicità, ma ora gli inserzionisti utilizzano elementi simili a lightbox, quindi il vantaggio sta sbiadendo se non già perdita. Inoltre, le nuove finestre non sono modali, quindi sono per una situazione diversa rispetto alle lightbox modali di cui stiamo parlando qui.

In sintesi, i lightbox rappresentano una cattiva reinvenzione della finestra di dialogo senza alcun vantaggio e nuovi svantaggi migliorati.

25

Recentemente abbiamo effettuato alcuni test degli utenti che ci hanno fatto ripensare l'approccio in stile lightbox, principalmente a causa della dipendenza dai controlli del browser nel nostro mercato di riferimento. Sembrava soddisfare i requisiti così bene nella fase iniziale di progettazione, ma gli utenti erano completamente confusi.

Mi chiedevo se la mancanza di progettazione grafica fosse un fattore (stavamo testando su wireframe) ma anche modificare le pagine in modo che lo sfondo fosse più scuro, scatole più grandi ecc. Non aiutava a chiarire come dovevano essere usate per il nostro particolare gruppo di partecipanti.

Ancora un'altra lezione che un pubblico diverso si comporta in modi molto diversi.

8
Ali

Una cosa che mi ha colpito è: perché i lightbox sono così popolari se sono così inutilizzabili? È una cosa di moda, come la grande debacle di Frame alla fine degli anni '90? O è perché sono più facili da programmare per gli sviluppatori? O è perché agli utenti piacciono?

Il tempo lo dirà. Sospetto che se fossero davvero inutilizzabili non avrebbero il livello di adozione di cui attualmente godono.

5
dave

Questa è solo un'osservazione personale, ma le finestre di dialogo modali in stile lightbox hanno diversi attributi utili:

  1. Sottolineano la relazione contestuale con la pagina in cui appaiono (la visualizzazione del contenuto del lightbox in una nuova pagina interromperebbe quel collegamento concettuale)

  2. La visualizzazione di una finestra di dialogo lighbox è molto più rapida rispetto alla navigazione in una nuova pagina (non è necessario sostenere la latenza di un round trip del server)

  3. Rimanendo sulla pagina corrente, non vi è alcun problema di memorizzazione dello stato della pagina (le modifiche in corso di un utente dovrebbero memorizzare da qualche parte se dovessimo navigare in una nuova pagina invece di mostrare il popup).

Le lightbox sono sicuramente un miglioramento dell'usabilità, soprattutto se mantenute piccole e concise.

4
Tony the Pony

Trovo la popolarità di queste implementazioni abbastanza sconcertante e un passo indietro rispetto al tentativo di far sentire l'utente sotto controllo. Spesso hanno anche lunghe animazioni che ostacolano un flusso di lavoro. Le gallerie di immagini con ingrandimenti in stile lightbox tendono a far sì che l'utente attenda il caricamento dell'immagine più grande e durante l'attesa: l'utente non è in grado di continuare a scansionare la galleria o fare qualsiasi cosa con il resto della pagina.

In genere utilizzo finestre di dialogo non modali in applicazioni Web chiaramente definite in modo da una finestra del desktop, trascinabili e normalmente possibili per aprirne multipli, ad esempio un elenco di elementi che hanno dettagli o possono essere modificati.

C'è anche una piccola biblioteca ordinata chiamata Highslide JS per le gallerie di immagini in questo modo. L'interfaccia utente di JQuery ha un semplice stile di finestra di dialogo popup che può essere utilizzato sia per finestre popup modali sia per finestre non modali più importanti che sembrano simili.

Non sono ancora sicuro che questo sia il modo migliore di procedere. Sharepoint 2010 ha i suoi popup che coprono l'intera pagina come se fosse una nuova pagina (anche se tecnicamente non lo è). Ciò fornisce un interessante grado di attenzione al modulo o alla finestra di dialogo delle impostazioni che viene visualizzata senza effettivamente passare attraverso un ciclo di ricarica della pagina - ma ha senso solo se l'utente è garantito che si concentri completamente su quell'attività da solo e può sopportare qualsiasi tempo di caricamento il incorre in lightbox. Navigare in una galleria di immagini sembra un mondo completamente diverso ...

4
Oskar Duveborn

Idee interessanti Michael - sembra sicuramente che non ci sia ancora consenso riguardo al bene/al male dei lightbox. Non sarei d'accordo con quanto segue però:

Se è necessario un contesto dalla pagina precedente, copiare il contenuto appropriato nella nuova pagina.

Cosa succede quando tutto il contenuto di una pagina è pertinente? Dovrebbe essere tutto duplicato, risultando in siti Web ingombranti con molte pagine duplicate.

Se hai bisogno di qualcosa di modale in un sito web, passa a una nuova pagina. Come una finestra di dialogo modale, quando l'utente passa a una nuova pagina, l'utente è costretto a completare ciò che è necessario o a annullare (tramite Indietro).

Se la pagina contiene informazioni sensibili al contesto (moduli di immissione dati, ecc.), La navigazione verso una nuova pagina può causare incertezza nell'utente sul fatto che i dati siano stati salvati o meno. Con una lightbox l'utente può vedere che i suoi dati sono ancora al sicuro e saranno lì quando avranno affrontato il modale.

Solo i miei due anni lì.

2
Jonny Martyr

Immagino non tanto una buona pratica, ma qualcosa da considerare.

I popup basati su lightbox per il marketing aumentano i tassi di conversione di una percentuale molto considerevole (a seconda delle implementazioni che ho visto aumentare personalmente del 60-153%).

Mentre la domanda è buona per l'utente finale è valida ... l'altra domanda è buona per il proprietario del sito. E in queste circostanze c'è un clamoroso sì.

Esempio di caso d'uso -

  1. persona colpisce il tuo sito per la prima volta per leggere un post sul blog
  2. attendere 180 secondi, se sono ancora nella pagina - popup
  3. se ti piace, iscriviti per ricevere i blog via e-mail gratuitamente

Direi che questo è positivo anche per l'utente perché se hanno trascorso 3 minuti sul sito a leggere il post sul blog è stato qualcosa di valore. Non tutti comprendono l'RSS e molte persone ignorano la pubblicità/ecc.

1
Chris Kluis

Vedi la mia risposta l'ultima volta che questa domanda è stata posta - Mi sento ancora allo stesso modo: Quando dovresti usare una finestra di dialogo modale?

Volevo anche commentare una parte della tua domanda:

Tuttavia, spesso non consentono all'utente di aprire immagini o eseguire tale attività in una nuova scheda del browser, ad esempio, che può frustrare molti.

Il punto della lightbox è che queste azioni non sono davvero necessarie: non è necessario aprire una nuova scheda quando non si esce dalla pagina per iniziare.

0
Charles Boyung

Sto lavorando all'implementazione di una pagina Web che deve sentirsi come un'app Web flessibile. Esistono più moduli che l'utente può compilare.

Per i miei scopi e utenti, ecco alcuni ipotesi (concordati da parti interessate e PMI, ma possono essere annullati nei test degli utenti):

  1. Gli utenti che arrivano a questa app Web sanno cosa vogliono fare . Stanno arrivando per completare un compito specifico noto in anticipo. Questo è lo scopo di questa pagina. Gli utenti non vengono qui per guardarsi intorno.
  2. Poiché sanno cosa stanno facendo, conoscono le informazioni richieste per compilare i moduli necessari.

Ho suggerito l'uso di moduli lightboxed. Normalmente sarei contrario all'utilizzo di Windows modale, ma sono anche MOLTO contrario a inviare l'utente a nuove pagine ogni volta che tentano un semplice aggiornamento o aggiunta. E non penso che le fisarmoniche siano la soluzione corretta qui (anche se potrebbero essere un'opzione alternativa).

Nel nostro contesto, i moduli lightbox vengono visualizzati solo su richiesta dell'utente. Consentono fuga/chiusura rapida e facile. Concentrano l'utente sull'azione che hanno appena richiesto in modo che non ci siano sorprese per il cambiamento nella pagina. Gli utenti non vengono rimossi dalla pagina/app in cui stanno lavorando.

Una delle forme ha tre (3) passaggi discreti. Quindi stiamo usando una procedura guidata nella lightbox con il monitoraggio dei progressi. Questo è stato in realtà un punto di sfida significativo con una sola persona nel nostro gruppo, che (giustamente) è decisamente contraria alle modali multi-pannello. Di solito sono d'accordo per intero.

In questo caso, una procedura guidata è un modello accettato per questo tipo di interazione. Gli utenti sanno cosa stanno cercando di fare e i passaggi necessari per farlo. La lightbox focalizza l'utente sull'azione richiesta senza uscire dalla pagina di panoramica (che fornisce informazioni sulle selezioni e sugli input dell'azione precedente), ma consente una chiusura rapida.

Anche se concordo sul fatto che modali/overlay/lightbox/etc dovrebbero essere usati con parsimonia, non sono per natura cattivi o cattivi UX. Le versioni richieste dall'utente per un'attività mirata sono un caso d'uso valido e in molte situazioni possono essere superiori alle alternative se implementate con cura.

0
Jeff