it-swarm.asia

Bagaimana cara memvisualisasikan kemungkinan drag'n'drop?

Aplikasi web saya berisi daftar elemen, yang dapat diurutkan dengan drag'n'drop. Bagaimana seharusnya fitur ini diwakili secara visual kepada pengguna?

56
Witek

Saya telah menggunakan sedikit tekstur "grippable" pada barang-barang untuk menunjukkan bahwa itu dapat diseret. Berikut tekstur Gmail:

enter image description here

37
Ken Mohnkern

Saya melihat presentasi oleh Sean Kane dari Netflix beberapa tahun yang lalu, di mana ia menggambarkan cara kerja antrian DVD. Anda harus mempelajarinya jika Anda bisa (jika Anda memiliki akun atau kenal seseorang yang memilikinya).

Beberapa hal yang perlu diperhatikan:

  • Dia mengatakan kursor pindahkan default tidak menguji dengan sangat baik, sehingga mereka beralih ke kursor ambil , seperti yang disarankan oleh GoodEnough .

  • Seret-dan-jatuhkan adalah peningkatan progresif. Anda masih dapat mengurutkan dengan mengisi kotak teks di kolom urutan daftar. Banyak pengguna tidak pernah memperhatikan fitur seret-dan-jatuhkan tersedia.

  • Tidak ada handle drag. Anda dapat memulai drag dengan mousedown di mana saja di baris (kecuali di mana objek lain, seperti tautan, berada di latar depan) .

27

Ada ikon standar tiga garis horizontal satu di atas yang lain yang menyiratkan item dapat diseret dan dijatuhkan.

Ini menyiratkan "gesekan" atau "pegangan" dan agak mirip dengan garis diagonal di sudut kanan bawah jendela atau kotak teks yang memungkinkan untuk mengubah ukurannya.

14
Dan Barak

Kursor bergerak biasanya digunakan dengan item yang dapat diseret di aplikasi web.

css:

cursor:move;
11
Sruly

Saya sarankan Anda menggunakan tangan kecil yang mencengkeram (buka saat melayang, ditutup sambil menyeret). Memiliki semacam ikon mencengkeram (pegangan) yang terlihat seperti sesuatu yang bisa diambil (di Gmail itu adalah sepasang kolom titik (4 titik per kolom).

Saya juga menyarankan agar Anda menambahkan sedikit animasi yang menunjukkan perilaku pengguna baru (atau pengguna yang sudah ada jika itu fitur baru), tapi jangan terus-menerus menampilkan animasi setiap kali pengguna berada di aplikasi Anda.

6
mbillard

Menyeret adalah hambatan. Setelah baru saja menyelesaikan pembenahan beberapa UI drag-and-drop, saya benar-benar sampai pada kesimpulan bahwa lain kali saya akan mengubahnya menjadi semacam "klik dan lepas". Memiliki widget pada setiap item yang Anda klik untuk memilihnya untuk dipindahkan. Lalu Anda klik ke mana Anda ingin pergi. Ini tampaknya berjalan baik dalam pengujian sejauh ini.

5
Robert Fisher

Saat memindahkan kursor ke objek yang dapat diseret, kursor harus diubah menjadi tangan yang terbuka. Ketika sebuah benda dicengkeram, benda itu harus diubah menjadi tangan yang memegang. Saat meraih objek, zona jatuhkan yang diizinkan dapat ditekankan dari latar belakang lainnya (mis. Melalui naungan, atau pewarnaan).

1
txwikinger

Simbol Whirlpool Universal mungkin?.

Aplikasi desktop saya bekerja dengan memungkinkan file di luar aplikasi dapat diseret ke. Aplikasi tertentu yang memungkinkan drag-n-drop biasanya memiliki area drop atau panel konten; seperti daftar putar di pemutar musik. Kegunaan drag-n-drop adalah pengungkapan progresif tetapi beberapa pengguna tidak akan pernah melakukannya secara intuitif. Dalam kasus seperti itu, hal terbaik yang dapat saya pikirkan tentang mengiklankan drop-area adalah dengan memiliki latar belakang simbol pusaran air.

0
Vishnu Prasanth

Saya datang ke masalah ini sendiri dengan aplikasi desktop. Solusi terbaik yang dapat saya temukan saat ini adalah memiliki panah di hover, yang hanya menunjuk ke tempat objek dapat diseret, dengan beberapa teks yang mengatakan seret dan lepas, atau serupa.

0
James Ludlow