it-swarm-eu.dev

Il modo migliore per selezionare un sottoinsieme di elementi in un lungo elenco

Uno dei nostri clienti vuole che creiamo un'applicazione Web per condividere informazioni sulle riviste che pubblica. Ogni edizione di una rivista contiene un numero variabile di inserzionisti. Questi inserzionisti provengono da un pool centrale di inserzionisti. Questo pool contiene (al momento) circa 150 inserzionisti. Ogni edizione di una rivista contiene un sottoinsieme (circa 70-80) di questi inserzionisti.

Il nostro cliente vuole che gli venga in mente un modo per aggiungere 70-80 inserzionisti da questo elenco di 150 a un'edizione di una rivista. Deve essere il più veloce possibile, il più semplice possibile e il più intuitivo possibile.

Quale sarebbe una soluzione ideale qui? Stavo pensando a qualcosa nelle linee dell'immagine qui sotto.

  1. Elenco di inserzionisti disponibili.
  2. Elenco di inserzionisti selezionati. Gli inserzionisti hanno un pulsante Elimina.
  3. Casella di testo con suggerimento automatico per gli inserzionisti nell'elenco a sinistra. <Invio> rimuove l'inserzionista dall'elenco di sinistra e lo aggiunge a quello di destra. La casella di testo viene cancellata e rimane attiva.

I miei colleghi hanno suggerito il trascinamento della selezione o solo un elenco con una casella di controllo per ciascun inserzionista, ma questi approcci costringono l'utente a fare molte ricerche e fare clic. Con il mio approccio l'utente può semplicemente continuare a digitare.

Qualche altro suggerimento per questa situazione?

My idea to transfer items between lists

36
Kristof Claes

Il tuo design Kristof è già abbastanza buono. Hai inchiodato cose molto importanti come fermare questa quarta e quarta azione del mouse e della tastiera - questo rovinerà l'esperienza. E sono con te nel trascinamento della selezione - yuk!

Ho appena perfezionato un po 'la tua idea:

alt text

  • Ovviamente i clic del mouse sugli elementi a sinistra li aggiungeranno a destra.
  • Vorresti che il filtro di testo fosse Google Style, ad es. multi-word, corrispondenza parziale. Come nell'input di ricerca "rce bm" corrisponderebbe al terzo elemento mostrato nel diagramma. Questo è facile da fare e offre all'utente un modo potente e intuitivo di cercare nomi. Il filtro di seconda classe (come l'inizio della stringa) frustrerà solo gli utenti e li rimanderà dal riutilizzarlo. Poiché il filtro è così critico per l'interfaccia, è meglio che funzioni bene.
  • Un altro modo per risparmiare tempo per l'utente (come suggerito da qualcun altro) sarebbe quello di avere un elenco parzialmente completato nella parte "inserzionisti selezionati". Se pensavi che ci fosse una buona possibilità che gli inserzionisti "primi 10 più utilizzati" avrebbero avuto un successo del 70% o maggiore, allora potresti anche scaricarli nell'elenco a destra al caricamento giusto? Nel peggiore dei casi, l'utente deve eliminare uno o due (1 clic del mouse ciascuno) dei primi 10 e i restanti 7 elementi desiderati li hanno salvati cercandoli. Modifica i numeri in questa idea per alleviare l'utente di più lavoro.

Ricorda: più lavoro t puoi fare per l'utente; per ridurre il loro clic, aspetto e ricerca, più veloce, facile e simpatica sarà la tua interfaccia.

34
cottsak

Lavoro per un'azienda che pubblica riviste, quindi conosco un po 'il tuo dominio.

Immagino che l'elenco degli inserzionisti non cambi molto da un problema all'altro, quindi vorrei che gli inserzionisti del numero precedente fossero selezionati per impostazione predefinita.

Dato che hai solo 150 inserzionisti e circa la metà di essi sarà selezionata, non mi preoccuperei di una ricerca. Vorrei iniziare con un semplice elenco di caselle di controllo e vedere come funziona. Assicurati che gli elementi selezionati siano visivamente distinti (ad esempio, rendili audaci) in modo che sia facile da scansionare.

7

Il mio primo post, quindi per favore sii gentile e farò lo stesso :-)

Mentre ci sono alcune buone idee qui, non credo che nessuno di loro soddisfi abbastanza i requisiti del poster originale:

"Il nostro cliente vuole che ci venga in mente un modo per aggiungere 70-80 inserzionisti da questo elenco di 150" - Kristof Claes .

Sono certamente d'accordo con molte delle idee intelligenti in cui gli utenti sarebbero in grado di filtrare i risultati e aggiungerli all'elenco Inserzionisti selezionati , abbiamo ancora bisogno di un modo a aggiungi in blocco circa 70 inserzionisti alla selezione. Mentre le idee di filtro sono abbastanza buone, porterebbe semplicemente a un'applicazione molto simile a qualsiasi applicazione di posta elettronica in cui l'utente sta specificando i destinatari nel campo "a". Immagina di dover aggiungere 70 destinatari a mano!

Idealmente, non vorremmo il seguente flusso di lavoro:

  1. Tipo di frase su cui cercare
  2. (Vengono visualizzati i risultati)
  3. Utilizzare o premere invio per l'elemento completato automaticamente o selezionare uno o più elementi dall'elenco visualizzato
  4. Ripeti i passaggi da 1 a 3 fino a quando sono stati aggiunti circa 70 inserzionisti

Vedo alcuni bei post qui di molte persone che conoscono davvero le loro cose, ma penso che alcuni siano stati forse fuori tema e sono in qualche modo focalizzati sulle tecnologie di implementazione piuttosto che sulla psicologia del buon "design dell'interfaccia utente".

Il mio ultimo pensiero su questo thread è - forse una sorta di meccanismo per aggiungere "gruppi" alla selezione in quanto ciò ridurrebbe sicuramente la ripetizione dello stesso flusso di lavoro 70 volte. Alcuni software che ho visto selezioneranno gli inserzionisti con un approccio "round robin". Certamente questo potrebbe aiutare ad alcune delle selezioni; inoltre, potresti avere gruppi predefiniti che potresti sempre voler aggiungere, magari un elenco dei tuoi inserzionisti più pagati o annunci per prodotti "nuovi".

E ora qualcosa di leggermente fuori tema ...

Matty, ti vedo menzionato Apple e in particolare l'iPhone -

... possiamo imparare dall'iPhone ... la chiave sta nel fare ipotesi ragionevoli che si verificano nelle decisioni prese per l'utente ...

Non sono sicuro di cosa tu voglia dire dopo i nostri discorsi dell'altro giorno. Non solo i dispositivi touch sono forse meno utilizzabili, ma Apple in genere ha una storia nella creazione di software che ti fa chiederti cosa pensano davvero della loro base di utenti. Un primo esempio - se desideri rinominare sul tuo dispositivo iPad, per prima cosa dovrai collegarlo a un computer che ha inoltre iTunes software. Perché mai non riesco semplicemente ad andare nelle impostazioni Generali dell'iPad, chiunque può immaginarlo.

Le migliori interfacce utente sono dello stile - "progettazione induttiva dell'interfaccia utente", al contrario di - "progettazione deduttiva dell'interfaccia utente" o, in altre parole, "prova ed errore". I dispositivi touch rientrano in quest'ultima categoria. Lasciatemi spiegare:

Se qualcosa tocca i dispositivi resi popolari da Apple come in iTouch, iPhone, e ora i iPad hanno qualcosa se lanciato l'usabilità del software nell'età della pietra delle "interfacce utente deduttive". Come un glifo progettato molto male su un pulsante, lasciando all'utente di pensare: " mio Dio, cosa significa?", fissando lo schermo di un dispositivo touch, non è immediatamente evidente che l'uso di due dita consente all'utente di ingrandire o ridurre; o il mio preferito: quello tenendo premuto il dito e un'icona per due secondi circa mette il dispositivo in "modalità di eliminazione".

Allo stesso modo in cui un'icona mal progettata rientra nella categoria di - " Non so cosa significhi, ma dopo averlo usato per la prima volta, di solito mi ricordo cosa fa ", molti dispositivi touch rientrano nella categoria delle interfacce utente deduttive perché l'utente deve dedurre ciò che il programma può effettivamente fare" giocando con esso "riducendo quindi la sua usabilità immediata.

Continuate così!

Pensieri casuali di MickyD

6
MickyD

L'intero elenco di inserzionisti dovrebbe avere il filtro sopra di esso ( fondamentalmente mettendo il tuo "3" in cima al tuo "1" e avere "3" effetto dinamico del contenuto di "1" ):

  • Cerca (al volo restringe l'elenco)
  • Gruppi ("Ultimo utilizzo", "Moda", "Elettronica", ecc.)

Nota: se la tua ricerca è abbastanza potente, puoi utilizzare solo un controllo, quindi la ricerca di "moda" restituirebbe tutti gli inserzionisti che hanno "moda" nel loro nome o che sono stati taggati come appartenenti alla categoria "moda".
L '"Ultimo utilizzo" può essere una casella di controllo.

Vantaggio principale:
Restringendo rapidamente l'elenco, è possibile selezionare tutti gli elementi pertinenti e spostarli.

Esempio: si digita "elettronica", si ottiene un elenco di tutti gli inserzionisti collegati all'elettronica, li si seleziona tutti (con il mouse, ctrl + A o qualsiasi altro metodo) e li si sposta immediatamente nell'elenco a destra.

4
Dan Barak

Ho questa interfaccia utente che potrebbe essere pertinente.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Potrebbe essere utilizzabile se gli inserzionisti fossero in qualche modo organizzati in categorie e l'utente sapesse in quale categoria appartiene ciascuna.
È un'interfaccia utente solo per il mouse, che richiede un solo clic per inserzionista.
Può essere utilizzato con la tastiera, ma il menu si chiude e deve essere nuovamente espanso per ogni selezione. Questo può essere risolto non chiudendo il menu su invio.

3
Juan Lanus

Sono d'accordo con Micky Duncan : Penso che la ricerca/raggruppamento/filtro non siano adatti a questo compito.

Non vuoi cercare e selezionare alcuni elementi da un grande elenco. Si desidera selezionare circa metà di tutti gli elementi nell'elenco. Se l'utente deve selezionare la metà degli articoli, l'utente dovrà assicurarsi di aver selezionato tutti i candidati e di non perdere nessuno. Quindi il flusso di lavoro è più simile al seguente:

Immagina di avere l'Elenco di 150 inserzionisti su carta. Passeresti attraverso l'elenco dall'alto verso il basso e deciderai per ognuno "voglio questo inserzionista?" E poi dare un segno di spunta o uno sciopero -through e alla fine sei sicuro di averli valutati tutti.

Quindi il design dovrebbe essere così:

Selector mockup

L'attenzione si concentra sull'elemento in alto nell'elenco centrale e l'utente può utilizzare i tasti freccia sinistra e destra per scartare l'elemento o inserirlo nell'elenco selezionato. Quindi può rapidamente esaminare l'intero elenco premendo a sinistra oa destra a seconda dell'inserzionista ed è sicuro di aver pensato a ciascuno e di non averne perso nessuno.

2
Falco

Sembra che la tua soluzione sia piuttosto buona. Rimuoverei la lista di sinistra poiché non aggiunge alcuna informazione (è solo una lunga lista, e sarà difficile dire che qualcosa è appena evaporato dopo aver premuto Invio) e offrirei un campo di ricerca con il completamento automatico ( anche se ci dovrebbe essere un menu a discesa da quel campo in modo che gli utenti possano ancora vedere quali opzioni sono disponibili) e aggiungere un grande pulsante "Aggiungi inserzionista all'elenco" nel caso in cui i tuoi utenti non sappiano premere Invio.

Portalo al prototipo in fase di funzionamento al più presto (usando dati simulati) e poi dimostralo con il tuo client e fallo scorrere. Ottenere il loro feedback il più presto possibile è fondamentale poiché saranno quelli che lo usano frequentemente e quindi devono sentirsi a proprio agio con esso.

1
Rahul

Sono d'accordo con i punti sollevati da MickyD e Patrick . Tutto dipende da come viene effettuata la selezione degli inserzionisti. Il cliente utilizzerà l'interfaccia utente per selezionare gli inserzionisti che dovrebbero trovarsi in un problema specifico o il cliente ha già un elenco con gli inserzionisti nel problema specifico? Non penso che il filtro sia la soluzione migliore in entrambi i casi.

Se il client utilizza l'interfaccia utente per selezionare gli inserzionisti, dovrebbe funzionare molto meglio per presentare un elenco con uno stato selezionato/non controllato. Come ha scritto Patrick, è una buona idea far risaltare lo stato selezionato. È anche possibile rendere più chiaro lo stato non selezionato piuttosto che mettere semplicemente in grassetto lo stato selezionato. Il client si sposta nell'elenco usando il tasto su/tasto giù e selezionando/deselezionando usando lo spazio (o un tasto simile).

Se il cliente ha un elenco con gli inserzionisti che compaiono nel problema specifico, il primo approccio dovrebbe essere quello di verificare se tale elenco potrebbe essere ricevuto in formato digitale e importato automaticamente. Se ciò non è possibile, forse l'elenco viene ordinato in qualche modo e quindi l'interfaccia utente dovrebbe ordinare gli inserzionisti allo stesso modo.

La terza opzione è che il cliente cerchi il problema alla ricerca di inserzionisti o che abbia un elenco non ordinato. In questo caso ha senso avere una funzione filtro.

Il punto è che senza conoscere l'obiettivo e le circostanze che circondano l'attività può essere davvero difficile fornire una buona soluzione.

0
Robert Höglund

Vorrei usare due elenchi e due pulsanti. L'utente può contrassegnare singoli elementi nell'elenco a sinistra con un clic del mouse, il doppio clic sposta l'elemento nell'elenco a destra.

Può fare clic tenendo premuto il tasto Maiusc, fare clic su Contrassegna un intervallo e con il pulsante [>] trasferisce tutti gli elementi contrassegnati a destra. Con Ctrl un singolo elemento può essere commutato dallo stato contrassegnato a non contrassegnato e viceversa.

Ctrl-a segnerebbe tutti gli elementi. Tutto è noto da altre interfacce di programma.

Gli elementi alfabetici ordinati renderebbero più semplice trovare una voce, il primo carattere potrebbe essere usato come tasto di scelta rapida per navigare verso quella voce, se lo scorrimento è necessario.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo è ora contrassegnato sulla sinistra. Con [>] l'utente li sposta a destra.

Tali interfacce sono piuttosto veloci, facili da usare e facili da capire. Forse puoi aggiungere un testo descrittivo o nominare i pulsanti "sposta su Elenco degli elementi selezionati" e "rimuovi dall'elenco degli elementi selezionati".

Dopo essersi spostato in un altro elenco, è necessario ricorrere a questo elenco.

0
user unknown