Memperjelas item mana dalam daftar panjang yang dipilih

Gunakan pola Navigasi Faceted . Amazon.com bekerja dengan sangat baik:

(tangkapan layar dari ini hasil pencarian untuk Nintendo DS - perhatikan bahwa Anda dapat membuat Anda lebih pendek jika Anda memiliki kendala vertikal)

Beberapa hal yang perlu diperhatikan:

• Komunikasi yang sangat jelas tentang apa item yang saat ini dipilih di setiap sisi (dalam hal ini, hitam tebal vs biru untuk tautan)
• Keterbacaan yang hebat dengan tidak menjadikan setiap item hyperlink, meskipun semuanya hyperlink - dalam hal ini, lebih bermanfaat untuk memprioritaskan keterbacaan atas pola garis bawah hyperlink
• Setiap aspek menampilkan berapa banyak hasil yang tersedia jika Anda mengkliknya. Agak rumit untuk diterapkan kadang-kadang, tergantung pada backend pencarian Anda.
• Kontrol yang tepat tergantung pada segi jenis apa yang Anda hadapi, serta copywriting yang bagus dan kata-kata yang tepat ("30 hari terakhir" untuk tanggal, karena Anda tidak peduli dengan tanggal tertentu dalam kasus ini, dll)
• Kemampuan untuk naik satu tingkat dengan setiap sisi, pada dasarnya "membatalkan" pilihan Anda di sisi itu. Perhatikan penggunaan < sebagai lawan dari palang merah (x) seperti yang dimiliki banyak situs lain.
• Kombinasikan ini dengan pola navigasi remah roti seperti yang telah dilakukan Amazon untuk dimensi kegunaan tambahan jika orang memindai dari atas ke bawah dan tidak melihat di kolom kiri/kanan

Jangan khawatir terlalu banyak tentang tidak bisa melihat setiap hal yang dipilih jika banyak yang dipilih - ini adalah perangkap navigasi segi umum untuk jatuh ke dalam. Pengguna akan mendapatkan bahwa ada lebih banyak pilihan yang dipilih di bagian bawah halaman jika mereka telah membuat banyak pilihan (bayangkan memilih salah satu dari setiap sisi dalam contoh Amazon). Untuk mengimbangi sedikit hal, Anda dapat mengelompokkan aspek yang dipilih di bagian atas seperti yang disarankan @onnodb, meskipun saya tidak akan menyembunyikannya di belakang klik (seperti pada kontrol select).

Menurut saya masuk akal untuk membuat 'daftar sekunder' dari tag yang dipilih di bagian atas daftar, seperti: (ide bagus, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Berikan tag yang dipilih warna latar belakang yang berbeda, tambahkan tombol "(X)" untuk menghapusnya, dan saya akan mengatakan Anda memiliki UI yang sangat bisa digunakan untuk ini.

Karena Anda memiliki real estat terbatas untuk bekerja, Anda dapat menerapkan yang berikut ini. Tempatkan daftar tag dalam dropdown dan memiliki tombol tambah yang menambahkan baris lain dengan dropdown tag. Dengan cara ini, satu-satunya tag yang ditampilkan adalah yang telah dipilih pengguna.

Saya tahu ini pertanyaan yang cukup lama, tetapi masih berlaku untuk aplikasi saat ini menurut saya.

Untuk jawabannya saya mendapat inspirasi dari bilah gulir vertikal Visual Studio:

• tinggi slider sesuai dengan ukuran area di layar dibandingkan dengan total panjang konten
• garis biru tipis horizontal menunjukkan di mana kursor ditempatkan
• bilah kuning gelap menandai garis tempat istilah pencarian ditemukan

Untuk pertanyaan OP - jika Anda memiliki daftar item yang melebihi kapasitas layar Anda harus menggunakan slider. Anda dapat menggunakan bilah geser untuk menunjukkan di mana item yang dipilih ada dalam daftar.

Tak jauh dari kepala saya ...

Opsi 1: Ubah atribut 'judul' untuk menampilkan item yang dipilih saat mengarahkan kursor. Opsi 2: Gunakan jquery untuk menambahkan hover event untuk daftar yang melintasi elemen dan daftar item yang dipilih.

Ya ada beberapa cara untuk melakukan ini:

1) Seperti yang Anda sebutkan, Anda dapat menyorot tag yang dipilih, sambil tetap mempertahankan urutannya dalam daftar. Untuk mengatasi masalah pengguna yang tidak menyadari bahwa tag yang dipilih tidak ditampilkan pada halaman, Anda dapat melakukan sesuatu untuk menarik perhatian mereka - sesuatu seperti panah yang berkedip di bagian bawah bagian tag pada halaman untuk memberi tahu mereka bahwa ada sesuatu penting jika mereka gulir ke bawah

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

Tanda == menandai tag yang disorot dan vv adalah panah yang berkedip

2) Anda juga dapat membuat daftar tambahan di bagian atas, tetapi menghapus tag dari aslinya, sehingga Anda selalu memiliki ketinggian yang konsisten ke bagian tag

3) Anda dapat menampilkan tag yang dipilih sebagai daftar vertikal di bawah judul hasil pencarian.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Catat xs kecil di sebelah setiap nama Tag; ini akan memungkinkan pengguna untuk menghapus tag dengan cepat dan hasilnya akan berubah sesuai.

Saya lebih suka opsi 2 atau 3. 3 Mungkin lebih baik, karena pengguna mungkin akan sedikit terkejut bahwa daftar tag berubah urutan karena mereka terus memilih tag.