it-swarm.asia

Desain UI untuk memesan item dalam daftar

Desain komponen/UI apa yang akan Anda gunakan untuk memesan item dalam daftar (tabel dengan tombol naik/turun)?

6
padis

Seret & lepas item mungkin adalah yang terbaik untuk sebagian besar UI. Sayangnya, sulit untuk membuat fitur ini dapat ditemukan. Area "grabber" yang dekat dengan setiap item membantu. Umpan balik visual sambil menyeret serta menggulir otomatis ketika sebuah item diseret ke Edge diperlukan dalam UI penyortiran drag & drop yang baik.

Adalah baik untuk menyediakan move up dan move down tombol, selain untuk menarik & melepas. Tidak ada ikon/gaya "grabber" yang secara universal dan langsung dikenali. Untuk antarmuka yang jarang digunakan, waktu yang dihabiskan menggunakan tombol yang agak canggung mungkin kurang dari waktu bagi pengguna untuk menemukan fungsionalitas drag & drop yang lebih efisien.

Selain itu, dengan seret & lepas ada banyak detail halus yang membuat frustasi pengguna jika tidak dilakukan dengan benar (mis. Autoscroll). Tombol tidak efisien dalam penggunaan yang sering, tetapi jelas, mudah digunakan dan lebih mudah untuk dikodekan.

5
dbkk

Seret dan lepas dapat dianggap 'manipulasi langsung', di mana klik langsung pada daftar memiliki efek, vs 'manipulasi tidak langsung' di mana Anda memiliki tombol terpisah atau tindakan lain yang berpengaruh pada daftar.

Tergantung pada apa yang ada dalam daftar Anda, keduanya mungkin sesuai.

Apa pun yang Anda lakukan, ingatlah nasihat bijak dari 10 Kesalahan Desain Aplikasi Top Jakob Nielsen :

Desain drag-and-drop seringkali merupakan pelanggar terburuk ketika tidak jelas bahwa sesuatu dapat diseret atau di mana sesuatu dapat dijatuhkan. (Atau apa yang akan terjadi jika Anda melakukan drag atau drop.) Sebaliknya, kotak centang sederhana dan tombol perintah biasanya membuatnya sangat jelas apa yang dapat Anda klik.

Jadi, jika Anda memberikan kemampuan manipulasi langsung pada daftar, berikan isyarat visual seperti:

  1. area 'grabber' visual (serangkaian titik atau garis) yang menunjukkan 'grabbability'
  2. perubahan kursor
  3. umpan balik saat Anda bergerak. Lihat demo ini meskipun perhatikan bagaimana poin saya (1) tidak didukung dan jadi tidak jelas bahwa daftar ini dapat diurutkan.
4
Julian H

Saya setuju bahwa manipulasi elemen secara langsung mungkin lebih disukai sekarang.

Terlepas dari tuduhan bahwa 37 Sinyal sedikit di sisi sombong, Basecamp mereka adalah aplikasi yang sangat berguna. Hampir semua daftar dalam aplikasi itu memungkinkan pemesanan ulang elemen melalui drag n 'drop.

Pertama, Anda harus mengklik untuk masuk ke mode pemesanan ulang, melalui tautan teks di sudut atas. Lalu ada gambar kecil yang dengan jelas menyarankan 'grabbability' yang Anda klik dan tahan lalu manipulasi untuk memindahkan item. Lihat Lampiran.

alt text

2
jameswanless

Tombol atas/bawah OK, tetapi tren mengarah ke operasi pada data secara langsung, yaitu dapat mengklik (atau mengetuk) pada item dan kemudian memindahkannya. Contoh yang menonjol adalah antrian Netflix. Ini dapat bekerja bahkan ketika memilih beberapa item dalam daftar.

0
Hisham

Preferensi saya adalah menggunakan seret dan lepas dengan pemilih seret yang jelas yang muncul di mouseover. Dalam aplikasi kami, kami menggunakan panah naik/turun ganda yang muncul untuk menunjukkan bahwa item dapat disusun ulang.

Cukup mengubah kursor cukup baik untuk kerumunan yang mengerti teknologi, tetapi untuk aplikasi tujuan umum Anda menginginkan sesuatu yang lebih jelas.

0
Sam