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

È accettabile posizionare un pulsante di azione su una barra delle schede?

Si consideri una vista a due schede, in questo caso attività e partecipanti, per cui nella vista attività è possibile visualizzare le schede delle attività. All'interno di queste schede attività è possibile modificare il contenuto e assegnarlo ai partecipanti.

Sarebbe inoltre necessario creare nuove attività ed è qui che sorge la domanda: È accettabile avere il pulsante "crea nuova attività" nella scheda di navigazione "Attività"?

Ecco l'immagine in cui il pulsante blu navy sulla barra delle schede aggiungerà una nuova attività:

enter image description here

Sono riluttante a usare pulsante di azione mobile (FAB) perché:

  1. l'aggiunta di un'attività non è necessariamente l'azione più comune in questa vista e
  2. il FAB non è così comunemente usato su iOS, né nelle linee guida iOS.

Questo design è per entrambe le piattaforme mobili Android e iOS, quindi la risposta dovrebbe prendere in considerazione entrambe le pratiche dell'interfaccia utente.

24
RobbyReindeer

Dovresti separare le due azioni. Usa le schede solo per la selezione e per aggiungere un'attività dovresti attaccare l'azione alla parte inferiore dell'area visibile. Le attività possono essere visualizzate scorrendo all'interno delle schede e aggiungendo azione

Ecco il wireframe del concetto spiegato sopra.

enter image description here

44
Sheraz

La categoria di selezione e la sua azione possono essere separate, in quanto possono confondere la maggior parte degli utenti. Avere una chiara separazione tra loro sarà più chiaro e sarà anche una pratica standard per i dispositivi mobili. Puoi anche prendere in considerazione qualsiasi altra azione che gli utenti potrebbero richiedere sullo schermo e raggrupparli. Ho rapidamente modificato il wireframe precedentemente condiviso da 'Shaz' per spiegare lo stesso. enter image description here

24
Yobuddy

Sui dispositivi mobili, se possibile racchiudere un elemento touch all'interno di un altro elemento touch.

Le differenze nei display, nei sensori tattili e nell'anatomia dell'utente possono rendere difficile ad alcuni utenti l'attivazione coerente della regione desiderata.

I layout di Shaz e Yobuddy aderiscono a questo principio, quindi mi spingerei verso uno di essi. Il layout di Shaz è più semplice, ma il layout di Yobuddy sarà più pulito se mai supporterai un'interazione oltre 'crea nuova attività' lì.

3
DoubleD

Ho due suggerimenti da considerare, quindi per favore leggi attentamente e considera gli argomenti di ciascuno.

Pulsante di azione mobile

Un pulsante pulsante di azione mobile fornisce l'azione principale per la schermata in cui appare. Consiglio vivamente questo approccio, tuttavia hai espresso preoccupazione sull'utilizzo di questi nella domanda, quindi permettimi di affrontarli:

  1. l'aggiunta di un'attività non è necessariamente l'azione più comune in questa vista

Mentre potrebbe non essere ovviamente l'azione più comune esistente nella vista, può essere l'azione più importante per un elenco di attività. Prendi ciascuna delle altre azioni e rivedi ciò a cui si applicano come farò per il tuo mock up:

  • Schede Fanno parte della struttura di navigazione di livello superiore, consentono all'utente di accedere all'elenco ma non si applicano a l'elenco
  • task card L'utente può fare clic direttamente sulla task card per modificare o visualizzare quella singola attività, questa è una proprietà dell'attività all'interno dell'elenco in quanto consente l'utente a cambiare la carta ma non lo fa modifica l'elenco (tranne per l'aggiornamento del riepilogo visualizzato)
  • assegna come il punto precedente, ciò consente di modificare la scheda attività anziché l'elenco

Sebbene ci siano diverse azioni che l'utente potrebbe intraprendere (e probabilmente azioni che potrebbero essere utilizzate più dell'aggiunta di attività), la creazione di una nuova attività potrebbe essere l'unica azione che è un comportamento dell'elenco, piuttosto che qualcosa di specifico per una determinata attività. Se risulta essere l'unica proprietà che si applica direttamente all'elenco, un pulsante di azione mobile è probabilmente lo strumento più materiale per il lavoro, se non si considera la "Navigazione inferiore" di seguito.

  1. il FAB non è così comunemente usato su iOS, né nelle linee guida iOS

Sebbene sia vero che non è ancora comune, viene utilizzato e sta diventando sempre più popolare man mano che il design dei materiali si diffonde nel dominio di Apple, nonché da Android che mantengono un design a interfaccia singola. Diverse risposte su questa domanda mostra che il pulsante di azione mobile è in uso nelle applicazioni iOS tra cui Spotify, l'attuale interfaccia di Gmail (aggiornata per seguire l'interfaccia del materiale) e l'app Note di iOS 11.

Si noti inoltre che, come nel caso Spotify sopra, non è necessario un pulsante di azione mobile per sedersi nell'angolo in basso a destra. I documenti materiali ne hanno alcuni grandi esempi, ma a meno che qualche altro allineamento non si adatti alla tua interfaccia, consiglierei la posizione ordinaria per motivi di familiarità.

Navigazione inferiore

Questa è un'estensione su la grande risposta di Shaz per fornire un'alternativa. Se la mia offerta precedente non allevia le tue preoccupazioni sull'uso di un pulsante di azione mobile o ti accorgi che hai bisogno di ulteriori azioni sul tuo elenco (come ordinare/filtrare i contenuti), allora secondo il suggerimento di Shaz di posizionare l'opzione nella parte inferiore dello schermo .

Consiglierei di utilizzare la barra navigazione in basso per questa funzione. Questo è destinato alla navigazione, quindi anche se può avere senso passare a una schermata di "nuova attività", potrebbe essere fuori luogo "ordinare" da questa barra. Una soluzione qui potrebbe essere quella di utilizzare un foglio per fornire opzioni di ordinamento/filtro, in modo che il pulsante "passi" al foglio a tale scopo.

Pensieri finali

Il pulsante di azione mobile è l'approccio più materiale per includere questa opzione e potrebbe non essere così fuori posto in questo scopo come hai pensato. La navigazione in basso, sebbene non strettamente l'uso corretto del componente, renderà l'opzione adeguatamente visibile agli utenti di iOS o Android. Se nessuna di queste opzioni è sufficiente un semplice punto a tre men nella barra degli strumenti (come illustrato nella esempi di schede mobili ) sarebbe comunque più in linea con il design del materiale rispetto al posizionamento l'azione all'interno della navigazione.

3
lakevna

Mi piace la tua idea ma direi "dipende".

Se hai intenzione di avere le schede sempre visibili e scorrere le attività all'interno della scheda (suppongo che ci siano più attività di quante una schermata possa contenere) senza alcuna intestazione all'interno della scheda stessa, la scheda è il posto giusto. Se vuoi ridurre la sorpresa degli utenti con la funzione del pulsante (molti potrebbero aspettarsi di aggiungere una nuova scheda, non un'azione all'interno di una scheda) puoi aggiungere un fumetto con un semplice messaggio "Aggiungi una nuova attività" (potrebbe essere difficile per un'app mobile).
Pensa anche al posizionamento dell'attività appena creata: sono ordinate la più recente in alto o viceversa? In quest'ultimo è possibile scorrere immediatamente fino a un modulo sul posto per la creazione di attività.

Se, tuttavia, le tue schede vengono ridimensionate per adattarsi al contenuto completo di tutte le attività, l'intestazione scompare con lo scorrimento (non è chiaro se stai chiedendo un'applicazione autonoma o una pagina Web), quindi a meno che non ti trovi in ​​cima, non lo è possibile aggiungere una nuova attività.

Sono d'accordo che dovresti stare lontano da FAB: di recente stavo vivendo un'app di contabilità e quando la utilizzavo sul dispositivo mobile, il pulsante, sebbene posizionato nella parte inferiore dello schermo, oscura in parte l'elenco degli elementi.

2
Mike

Accettabile forse, ma non lo consiglio.

Se le persone sono alla ricerca di un modo per aggiungere una nuova attività, potrebbe non essere così facile da trovare poiché il pulsante non ha etichetta né alcun indizio contestuale. Questo design potrebbe essere soggetto a cecità disattenta: le persone non vedranno l'icona più poiché non hanno bisogno del pulsante di tabulazione. Questo può essere il caso delle persone che sanno di poter aggiungere un nuovo compito e delle persone che non lo sanno ancora.

Un semplice scorrimento potrebbe costare meno sforzo della scansione di ogni dettaglio sullo schermo per trovare qualcosa che potrebbe essere il pulsante. Questo può sembrare esagerato per qualcosa che è in bella vista e un'icona che è apparentemente ovvia, ma non stupirti se non lo è! Scorrere fino alla fine dell'elenco delle attività e vedere un pulsante direttamente evidente con un'etichetta chiara potrebbe essere la soluzione migliore. Dato che hai detto che questa non è l'azione più importante, è probabilmente accettabile che non sia sempre in vista. Anche se gli utenti hanno già aggiunto attività in passato; lascia che ricordino come farlo passando attraverso la stessa ricerca, potrebbe essere meglio che far loro ricordare dove/cosa era di nuovo il pulsante.

2
jazZRo

Vedo un problema nel significato di questo posto.

Un pulsante di azione su una scheda suggerisce che è possibile interagire con la scheda quando la scheda è inattiva.

L'esempio più comune è il pulsante di chiusura della scheda in un browser. Un'altra opzione è il nuovo pulsante della scheda alla fine della barra delle schede di un browser. Un altro possibile pulsante su tale scheda sarebbe "scheda duplicata".

Quando si desidera avere l'azione "Aggiungi attività" (nell'elenco delle attività in questa scheda), probabilmente non si deve fare nulla in background mentre si lavora in un'altra scheda, ma qualcosa che richiede il passaggio alla scheda attività.

Quindi opterei per un'altra soluzione come suggerito nelle altre risposte.

2
allo

Suggerirò di avere a ogni livello di attività lo spazio id, insieme al prossimo al titolo (che è nella tua progettazione) e come suggerimento di Shaz di rimanere in fondo come un singolo pulsante.
Solution:

1

Metterò solo la soluzione che alla fine ho trovato per questo problema in quanto differisce dalla risposta accettata.

Sono giunto alla conclusione che stavo esaminando il problema nel modo sbagliato e che inizialmente avrei dovuto concentrarmi sul fatto che le schede rappresentavano il problema e non il pulsante di azione "Aggiungi nuovo".

Pertanto, ho deciso di unire le schede "partecipanti" e "attività" in una pagina e dedicare le parti superiore e inferiore della pagina alle rispettive sezioni.

Ecco la soluzione a cui sono arrivato:

enter image description here

1
RobbyReindeer

Cosa c'è di sbagliato nell'usare un semplice pulsante più nella barra delle azioni come questo:

action bar with button

Il pulsante Più può aggiungere attività o partecipanti a seconda della scheda corrente. Puoi anche nascondere il pulsante più se non è necessario nella scheda Partecipante.

1
Qandeel Abbasi