pengembangan-web-mp-pd.com

Bagaimana cara mengoptimalkan ruang yang digunakan oleh tag di kolom kanan situs StackExchange?

Di pertanyaan meta ini tentang seperti apa tampilan situs StackExchange UI , saya sedang mengerjakan (baca: main-main dengan) desain untuk situs tersebut. Saya menggunakan alat berbasis web untuk mengedit halaman CSS, yang memberi saya banyak kebebasan untuk mengubah hal-hal sambil membatasi saya ke HTML yang tersedia yang diberikan oleh server.

Sambil mengubah dan mengatur kembali berbagai hal (terutama elemen seperti tipografi dan berat visual), saya menyadari bahwa kolom sebelah kanan seperti yang ditunjukkan pada hampir setiap situs web StackExchange sangat tidak efisien. Begini tampilannya di situs meta:

How the tags look on beta sites

Tag (dan di bawah, lencana) adalah benda kecil yang panjangnya lebih besar secara horizontal daripada vertikal. Masing-masing memiliki beberapa atribut:

  • Nama objek
  • Frekuensi tag telah diberikan atau anggota yang telah diberi lencana
  • Unsur visual untuk memperkuat gagasan tentang objek
  • Lebar horizontal yang berbeda tergantung pada panjang nama

Cara mengatur semuanya sekarang terasa sangat tidak efisien:

  • Setiap tag/badge memakan satu baris ruang, meskipun tidak perlu seluruh lebar horizontal.
  • Representasi visual tag dan lencana pada halaman ini terasa tidak memadai. Sementara tag dan lencana dirancang untuk ditampilkan sendiri, misalnya tag pada pertanyaan, atau lencana pada profil anggota, dalam kasus ini mereka disertai dengan metadata: berapa kali tag telah diterapkan, atau anggota lencana diberikan kepada. Tetapi representasi visual masih mengasumsikan aplikasi generik.
  • Pada sebagian besar situs StackExchange, elemen-elemen ini memiliki batas yang kuat, yang menciptakan banyak ruang negatif yang canggung di antara setiap elemen saat ia duduk di garis.

Di desain ulang saya Saya telah berhati-hati untuk mengurangi kekuatan tag (belum menangani lencana) untuk mengurangi kebisingan visual itu, tetapi saya belum menemukan cara yang baik untuk mewakili tag dalam kombinasi dengan berapa kali diterapkan. Saya punya beberapa ide, tetapi tidak ada yang merasa benar:

  • Jadikan mereka dalam tag cloud. Ini akan menggunakan lebih banyak ruang horisontal dan kurang vertikal. Namun, tag cloud sebagian besar dapat dipindai dan tidak dapat dibaca. Tidak yakin apakah itu masalah.
  • Pertimbangkan representasi visual baru untuk kombinasi tag dengan jumlah aplikasi. Mungkin dengan memasukkan nomor dalam tag: <diskusi] x14 akan menjadi <diskusi | 14]. Atau dengan meningkatkan ketinggian elemen tag dan menempatkan "14" di bawah nama. Itu akan memakan lebih banyak ruang vertikal secara keseluruhan, tetapi memungkinkan untuk beberapa tag di setiap baris.
  • Hapus referensi ke sejumlah aplikasi tertentu dan gunakan metafora visual untuk menunjukkan berapa kali diterapkan. Mungkin dengan menggunakan palet termometer: tag "hot" bisa lebih merah, dan yang dingin lebih biru. Ini tidak akan segera terlihat bagi pengguna baru.
  • Hapus referensi ke jumlah aplikasi tertentu dan gunakan lebar untuk menunjukkan panas. Semakin lebar tag (di kolom kanan), semakin populer. Akan tetapi, seperti di atas, ini agak membingungkan pada awalnya.

Waktu pertanyaan: Apa yang akan menjadi cara yang efektif untuk mendesain ulang cara tag dan lencana ditampilkan di kolom sebelah kanan, mengingat bahwa saya hanya dapat memodifikasi CSS dan tidak dapat mengutak-atik HTML?

listscssoverflowstackexchangeoptimisation
8
Rahul

Kudos atas usaha - sangat bagus!

Saya punya beberapa komentar tentang daftar di akhir:

  • Secara pribadi saya merasa tag cloud tidak terlalu berguna.
    Urutan antara elemen tidak jelas, tidak selalu mudah untuk melihat mana yang lebih besar dan Anda tidak tahu tag apa yang diurutkan.
  • Adapun saran kedua Anda, saya mungkin memiliki peningkatan kecil, tetapi tidak terasa benar juga - Gunakan lebar, tetapi jangan hanya membuat tag lebih luas - susun mereka!
    Yaitu. cukup tunjukkan "bayangan" di sebelah kanan setiap tag untuk setiap instance.
    alt text
    Secara alami Anda akan menetapkan batas dan apa pun di atas 10 atau lebih akan memiliki Ellipsis (...)
    Jika Anda mau, Anda bisa memasukkan jumlah penampilan di atas tumpukan, tetapi itu bisa membuat kekacauan.
7
Dan Barak

Mungkin menggunakan pendekatan font-size-weighted atau font-color?


(sumber: ljplus.r )

4
Kostya

Saya pikir daftar tag yang menakutkan di situs ini membuat saya menghindari karena secara tidak sadar membuat saya takut dengan menjadi begitu lama. Saya pikir membatasi ke sepuluh dengan opsi untuk melihat semuanya akan membuat pengguna memindai dengan cepat dan melihat apa yang terjadi dalam hitungan detik.

Juga, saya tidak pernah bisa memahami bagaimana tag diurutkan. Tampaknya bagi saya bahwa mereka diurutkan berdasarkan angka di sebelah kanan daripada kebaruan. Oleh karena itu, saya pikir memindahkan angka ke kiri dan menyelaraskannya (angka) ke kanan akan menciptakan kepastian bahwa mereka diurutkan berdasarkan itu. Menghapus tanda "x" yang berulang dan grafik di sekitar setiap tag akan mengacaukan daftar dan meningkatkan kemampuan scannability.

Selain itu, membuat tag tampak seperti tautan akan menandakan bahwa tag itu dapat diklik dan akan membawa Anda ke halaman lain.

enter image description here

4
Denzo

Beberapa ide, lebih banyak untuk spark ide-ide out-of-the-box lainnya daripada yang lain:

  • Slider (panel tag memudar masuk dan keluar secara berurutan)
  • Tick-ticker dari tag
  • Bagan tag statis
  • Bagan tag interaktif
  • Sesuatu yang mirip dengan visualisasi di Digg Labs .
0
Virtuosi Media