it-swarm.it

Come visualizzare la possibilità di trascinare e rilasciare?

La mia applicazione web contiene un elenco di elementi, che possono essere ordinati trascinandoli. In che modo questa funzione dovrebbe essere visivamente rappresentata dagli utenti?

56
Witek

Ho usato un po 'di trama "afferrabile" sulle cose per dimostrare che è trascinabile. Ecco la trama di Gmail:

enter image description here

37
Ken Mohnkern

Ho visto una presentazione di Sean Kane da Netflix qualche anno fa, in cui ha descritto come funziona la coda di DVD. Dovresti studiarlo se puoi (se hai un account o conosci qualcuno che lo fa).

Un paio di punti da notare:

  • Ha detto che il cursore di spostamento predefinito non ha funzionato molto bene, quindi sono passati a un cursore di acquisizione , come suggerito da GoodEnough .

  • Il trascinamento della selezione è un miglioramento progressivo. Puoi comunque ordinare compilando le caselle di testo nella colonna dell'ordine dell'elenco. Molti utenti non notano mai che la funzione di trascinamento della selezione è disponibile.

  • Non è presente la maniglia di trascinamento. Puoi iniziare il trascinamento con il mouse in qualsiasi punto della riga (tranne dove un altro oggetto, come un collegamento, è in primo piano) .

27

C'è un'icona standard di tre linee orizzontali una sopra l'altra che implica che gli oggetti possono essere trascinati e rilasciati.

Implica "attrito" o "maniglia" ed è un po 'simile alle linee diagonali nell'angolo in basso a destra di finestre o caselle di testo che consente di ridimensionarle.

14
Dan Barak

Il cursore di spostamento viene comunemente utilizzato con elementi trascinabili nelle app Web.

css:

cursor:move;
11
Sruly

Ti suggerisco di usare la lancetta piccola (aperta durante il passaggio del mouse, chiusa durante il trascinamento). Avere una sorta di icona avvincente (una maniglia) che assomiglia a qualcosa che può essere afferrata (in Gmail è una coppia di colonne di punti (4 punti per colonna).

Suggerirei anche di aggiungere una piccola animazione che mostri il comportamento ai nuovi utenti (o agli utenti esistenti se si tratta di una nuova funzionalità), ma non mostrare costantemente l'animazione ogni volta che un utente è nella tua app.

6
mbillard

Il trascinamento è un trascinamento. Dopo aver recentemente terminato di rinnovare un paio di interfacce utente con trascinamento della selezione, in realtà sono giunto alla conclusione che la prossima volta le cambierò in una sorta di "clic e rilascia". Avere un widget su ogni elemento su cui si fa clic per selezionarlo per lo spostamento. Quindi fai clic dove vuoi che vada. Questo sembra andare bene nei test finora.

5
Robert Fisher

Quando si sposta il cursore su oggetti trascinabili, dovrebbe essere cambiato in una mano aperta. Quando un oggetto viene afferrato, dovrebbe essere trasformato in una mano che afferra. Mentre si afferra un oggetto, le zone di rilascio consentite potrebbero essere enfatizzate dall'altro sfondo (cioè attraverso l'ombreggiatura o la colorazione).

1
txwikinger

Il simbolo universale del mulinello potrebbe essere ?.

L'applicazione desktop con cui lavoro consente di trascinare i file all'esterno delle applicazioni. Alcune applicazioni che consentono il trascinamento della selezione di solito hanno un'area di rilascio o un riquadro del contenuto; come una playlist in un lettore musicale. L'usabilità del trascinamento della selezione è una divulgazione progressiva, ma alcuni utenti non potranno mai accedervi in ​​modo intuitivo. In questi casi, il meglio che potrei pensare di pubblicizzare l'area di rilascio è avere uno sfondo con simbolo idromassaggio.

0
Vishnu Prasanth

Sto arrivando a questo problema da solo con un'applicazione desktop. La migliore soluzione che posso trovare al momento è quella di avere una freccia al passaggio del mouse, che indica semplicemente dove l'oggetto può essere trascinato, con del testo che dice trascinamento della selezione, o simile.

0
James Ludlow