it-swarm.asia

Desain interaksi untuk menyalin subtree

Misalkan kita memiliki dua pohon data A dan B divisualisasikan dalam UI di sepanjang baris ini:

enter image description here

Pengguna ingin menyalin node subtree yang disorot dari A ke B. Kedua pohon memiliki beberapa node bersama seperti yang ditunjukkan oleh id.

Bagaimana Anda mendesain interaksi untuk skenario ini? Salah satu pendekatan yang mungkin adalah menempatkan kotak centang di sebelah node yang tidak dibagikan dan tombol "jalankan"/"salin" di antara kedua pohon, tetapi apakah ini solusi terbaik ketika memilih keluar dari drag'n'drop?

Apakah Anda punya ide untuk desain alternatif?

6
agib

Itu wajar untuk pohon memungkinkan Anda untuk drag-n-drop ke mengatur ulang node; namun, Anda tampaknya ingin mempertahankan hierarki dan hanya menggabungkan hasil ...

Oleh karena itu, mungkin bermanfaat bagi aplikasi untuk hanya mengidentifikasi perbedaan dan kemudian mengizinkan pengguna memilih/melakukan setiap perubahan (masukkan, perbarui atau hapus.)

1
Nescio

Kecuali saya kehilangan beberapa kendala, saya akan menggunakan drag-and-drop.

1
Hisham

Sintaksis pemilihan objek aksi seperti yang Anda sarankan adalah pendekatan GUI standar umum yang baik digunakan jika Anda akan memperluasnya ke perintah selain menyalin (misalnya, menghapus, memindahkan, properti). Ini membuat UI yang sederhana, konsisten, namun kuat. Namun, saya tidak begitu yakin saya akan merekomendasikan kotak centang untuk seleksi. Dengan asumsi pengguna biasanya hanya menyalin satu node tingkat atas pada suatu waktu, saya akan meniru perilaku pada manajer file seperti Windows Explorer dan menggunakan ikon yang dipilih secara default, tetapi mendukung multi-seleksi melalui metakeys (Shift dan Ctrl) dan seleksi seret. Memilih node harus menyoroti node itu dan semua sub-node untuk membantu memperjelas apa yang dipilih pengguna. OTOH, kotak centang mungkin lebih disukai jika pengguna biasanya perlu menyalin beberapa node yang tidak terkait, terutama jika Anda tidak yakin mereka terbiasa dengan metode pilihan ganda standar.

Alternatif untuk sintaks pemilihan objek-tindakan adalah pendekatan kontrol objek-khusus di mana Anda menyertakan kontrol Salin kecil untuk setiap node. Satu klik dan itu disalin. Ini mungkin lebih disukai jika menyalin adalah satu-satunya hal yang dapat dilakukan pengguna dengan node. Sebaliknya, memiliki kontrol Salin, Pindah, Hapus, Properti, dll yang terpisah untuk setiap node mungkin akan terlalu berantakan. Jika Anda menggunakan kontrol khusus objek, Anda dapat menyajikan kontrol Salin hanya untuk node dalam A yang memiliki node bersama di B, memberikan indikasi yang jelas tentang apa yang dapat disalin.

Dalam contoh Anda, sepertinya fitur Salin Anda terbatas pada menyalin ke node bersama di antara pohon-pohon. Apakah hanya itu yang bisa diizinkan? Apakah selalu ada lebih dari satu pohon tujuan? Jika demikian, tombol Salin tunggal Anda mungkin yang terbaik, dan Anda berhak untuk menjauh dari seret dan lepas. Seret dan lepas memiliki kemampuan menemukan yang buruk dan lebih sulit dilakukan daripada hanya mengklik tombol Salin. Seret dan lepas juga dapat membuat pengguna berpikir mereka dapat melakukan penyalinan sewenang-wenang (mis., Masukkan Node 4 di Tree A di bawah Node 18 di Tree B, atau bahkan memindahkan simpul sekitar dalam Pohon B).

Namun, jika memungkinkan dan menguntungkan untuk mendukung penyalinan sewenang-wenang, maka pertimbangkan untuk memiliki dua tombol untuk menggunakan idiom Salin dan Tempel (tambahkan tombol Potong ketiga untuk mendukung pemindahan). Jika Anda mendukung penyalinan sewenang-wenang, maka ada baiknya juga mempertimbangkan seret dan letakkan sebagai pintasan ahli untuk Menyalin dan menempel.

1
Michael Zuschlag