it-swarm.asia

Memperjelas item mana dalam daftar panjang yang dipilih

Saya mencoba merancang sebagian antarmuka web yang memungkinkan pengguna untuk menandai item dan melihat semua item dengan tag atau set tag di dalamnya - pikirkan gmail, jika gmail memungkinkan Anda untuk dengan mudah memilih beberapa tag untuk melihat semua pesan dengan semua dari tag tersebut. Apa cara terbaik untuk menunjukkan kepada pengguna tag mana yang sedang mereka lihat?

Penyorotan sederhana berfungsi untuk satu tag, tetapi jika daftar tag lebih panjang dari layar, mereka tidak akan dapat melihat semuanya sekaligus, sehingga tidak jelas tag mana yang dipilih pengguna. Menambah masalah ini, saya punya sedikit ruang untuk bekerja - seluruh antarmuka tag dan item adalah sekitar 300x500 piksel, jadi menampilkan tag yang dipilih dalam daftar horizontal yang panjang bukanlah pilihan.

Saya sedang berpikir untuk membuat daftar sekunder di atas daftar tag dengan tag yang dipilih (semacam seperti itu daftar drop-down yang memiliki USA dan negara-negara lain ditekankan ), tapi saya bertanya-tanya apakah ada alternatif yang lebih baik.

13
sslepian

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

Amazon faceted navigation

(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).

7
Rahul

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.

5
onnodb

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.

enter image description here

3
Denzo

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:

MS Visual Studio scroll bar

  • 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.

0
Mike

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.

0
Babak Naffas

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.

0