it-swarm-eu.dev

Come si indicano i progressi per gli utenti in un modulo in più passaggi?

Cosa ne pensi del seguente design del modulo che ho preparato?

  • c'è una barra di avanzamento nella parte superiore
  • sul lato destro sono elencati i passaggi e ogni volta lo stato corrente è indicato dalla selezione

testo alternativo http://kepfeltoltes.hu/110210/form_progress_indicator_www.kepfeltoltes.hu_.jpg

Usi qualcos'altro? È sufficiente? (in questo caso il modulo è progettato per una banca)

17
Roland Pokornyik

... o è già troppo? Chiediti: perché hai bisogno di un indicatore di progresso?

In genere, si indicano i progressi in modo che l'utente possa stimare quanto tempo impiegherà, se può finire in un determinato momento. Vorrei provare a minimizzare gli elementi "contestuali".

barra di avanzamento

Rispetto alle altre opzioni, ha senso solo nei seguenti casi:

  • il tempo richiesto per i singoli passaggi/pagine varia in modo significativo (più di, diciamo, un fattore 3) e tale varianza è indipendente dall'utente
  • hai progressi per pagina, ad es. quali pulsanti di opzione erano già stati riempiti. Nella maggior parte dei casi, sarebbe solo un bel trucco, non proprio necessario.

Step i/N

Questo è sufficiente se l'utente non ha la possibilità di saltare ai singoli passaggi e può avanzare avanti/indietro.

Jump List

Una jump list di singoli argomenti è un vantaggio definitivo se l'utente può saltare determinati passaggi o un ordine di elaborazione non sequenziale è un caso d'uso comune. (Non riesco a pensare a uno che non sembra costruito).

Elenco statico

Un elenco statico (cioè non per la navigazione, solo un indicatore) aiuta ancora in alcuni casi. Innanzitutto, fornisce all'utente una stima che può essere molto migliore di un Step i/N o di una barra di avanzamento. In secondo luogo, fornisce suggerimenti su ciò di cui l'utente ha bisogno per completare tutte le pagine. Se il penultimo passaggio è "Dettagli della carta di credito", so che ho bisogno di una carta di credito.

Conoscere i requisiti è particolarmente importante quando non riesco a salvare una sequenza incompleta e continuare in seguito. Un elenco statico è meno indottrinante di una pagina che spiega.

Un elenco statico non ha molto senso come anteprima, se, in base all'input dell'utente, si ramificano e si saltano parti significative. Una jump list ha ancora senso in questo caso se ti consente di tornare indietro, l'annuncio potrebbe visualizzare in anteprima i passaggi successivi.


Esistono scenari più complessi, come la compilazione di moduli fiscali, in cui è necessario fornire un feedback dettagliato sulla mancanza o sulla validità di alcuni campi. Questo può essere mescolato molto bene con un indicatore di progresso.

13
peterchen

Ho trovato questo post su SmashingMagazine abbastanza illuminante. Questo è un estratto del post :

I tracker di progresso sono progettati per aiutare gli utenti attraverso un processo in più passaggi ed è essenziale che tali tracker siano ben progettati al fine di tenere informati gli utenti su quale sezione si trovano attualmente, quale sezione hanno completato e quali attività rimangono.

Usi dei tracker di progresso

  1. Ordinazione online: L'applicazione di gran lunga più comune dei tracker di avanzamento è congiunta all'acquisto online, poiché di solito comporta più passaggi.

  2. Guide guidate delle funzioni: I tracker dei progressi vengono anche utilizzati per guidare gli utenti attraverso le funzionalità dei prodotti e dei servizi online, come dimostrato nei seguenti esempi:

  3. Moduli a più passaggi: Se un modulo richiede molti input da parte dell'utente, potrebbe essere meglio suddividere il modulo in più passaggi.

Best Tracking in Progress Tracker Design

  1. Indicazione di una progressione logica: La maggior parte dei tracker di avanzamento sono progettati per visualizzare i passi da sinistra a destra. Nella maggior parte dei paesi, le persone leggono da sinistra a destra, quindi ha senso che i tracker dei progressi seguano quel modello. Tuttavia, ciò non è abbastanza: deve esserci qualcosa che informa l'utente che stanno eseguendo un processo in più passaggi.

  2. Mantenere l'utente informato della propria posizione: Un aspetto chiave della buona progettazione del tracker di avanzamento è tenere l'utente informato su dove si trova l'utente nel processo. Ciò completa la progressione logica perché l'utente saprà dove si trovano in relazione a dove sono stati e quali sezioni devono seguire.

  3. Posizionamento: Poiché i tracker di avanzamento sono una forma di navigazione, è meglio posizionarli sotto la navigazione principale e secondaria (come il pangrattato) e sopra il contenuto a cui fa riferimento il tracker di avanzamento. Inoltre, mentre un tracker di avanzamento può fungere da titolo di una pagina, è meglio posizionare il titolo della sezione corrente sotto il tracker di avanzamento, per rafforzare la posizione corrente.

Leggi post completo per errori di progettazione da evitare , come implementare e esempi grafici .

Esempio di codice

Puoi vedere l'html/css che ho usato (jsfiddle) che rende il seguente (nessuna immagine usata):

Steps in a multi-step form

10
Naoise Golden

Poiché matematicamente la barra di avanzamento percentuale rappresenta un intervallo di numeri reali tra 0 e 100, in realtà non si presta a una situazione in cui hai un numero discreto di passaggi che devi compiere.

Invece della barra di avanzamento percentuale potresti avere qualsiasi variazione sul "tema 1/6" come

(O) ---- (x) ---- (o) ---- (o) ---- (o) ---- (o)

che penso sarebbe più appropriato in questo caso.

Naturalmente, si potrebbe sostenere che la percentuale è effettivamente (numero di campi completati)/(numero di campi totali) nel qual caso visualizzerà la posizione nel modulo in modo molto accurato. L'unica cosa qui è di non creare confusione per l'utente quando visualizza la barra percentuale al 50% ed essere ancora al punto 1.

7
Liviu A

Una barra di avanzamento ha lo scopo di dare all'utente un'idea di quanto siano lontani. Trovo che il tuo sia troppo "preciso". Che ne dici di qualcosa del genere:

enter image description here

Notare l'assenza delle etichette "0%" e "100%".

2
Hisham

Per l'utente, il problema sta davvero progredendo? O completezza? Quindi, invece di mostrare loro quanto tempo ci vorrà (barra di avanzamento), mostra loro cosa è rimasto da fare (icona di completezza). Ho appena lavorato su una serie di fili per un flusso di lavoro di registrazione iniziale per un prodotto di servizi finanziari e ho deciso di mostrare completezza.

In questo caso - un processo di circa 30 minuti che richiedeva all'utente di avere a portata di mano molte informazioni esterne - era più importante mostrare all'utente cosa avevano fatto (un'icona controllata) e cosa avevano lasciato da fare (nessun controllo icona), visualizzato accanto ai titoli nelle schede che organizzano l'attività dell'utente.

0
abennoschmidt

Sembra che tu stia specificando troppo i progressi avendo una barra e anche i passaggi a destra. Utilizzare su o l'altro. Probabilmente in questo caso, poiché i progressi sono discreti piuttosto che continui, sarebbe più appropriato usare i passaggi.

Inoltre, i passaggi dovrebbero essere sul lato sinistro. La convenzione è che il pannello di sinistra è usato per informazioni di "ordine superiore" (cioè navigazione, menu o altre informazioni di alto livello) mentre il lato destro è usato per informazioni/voci di "dettaglio".

0
Simon Woodside