it-swarm.asia

Tab Overflow: Apa yang harus saya lakukan ketika saya kehabisan ruang untuk tab tahunan?

Saya memiliki halaman yang mencantumkan penerima penghargaan sebelumnya, dengan tab yang memisahkan pemenang setiap tahun.

  • Setiap tahun ada empat puluh penerima.
  • Nama penerima tercantum, bersama dengan jabatan dan perusahaannya.
  • Orang yang sama dapat dipilih hingga tiga tahun yang berbeda.
  • Pemenang tiga tahun masuk ke hall of fame, meskipun itu tidak diwakili di sini.
  • Saat ini, pemenang setiap tahun ditampilkan pada tab terpisah.

Masalahnya adalah saya kehabisan ruang. Setelah tahun depan, tidak akan ada ruang untuk menambahkan lebih banyak tab . Apa cara lain untuk mengatur data ini yang akan berfungsi dengan baik hingga 20 tahun total penghargaan?

Screenshot of tab interface

Catatan: Terima kasih Robert Fraser untuk nama " Tab Overflow ."

32

Bagaimana kalau hanya menunjukkan 10 tahun terakhir penghargaan dengan tab ke-11 untuk membawa Anda ke 10 tahun sebelumnya?

2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older

Kebanyakan orang hanya akan tertarik pada penghargaan terbaru, jadi memiliki penghargaan yang lebih tua dengan sekali klik saja seharusnya tidak menjadi masalah besar.

Mengklik "Lama" akan menampilkan halaman dengan tab berikut:

Recent | ... | 2000 | 1999

tetapi sebaliknya terlihat identik dengan halaman saat ini. Anda dapat mengubah skema warna hanya sebagai petunjuk visual tambahan, tetapi itu akan sampai pada "kekuatan yang ada".

40
ChrisF

Anda bisa memiliki tab '...' dan menggunakan beberapa JavaScript (yay jQuery) untuk "menggulir" ke kanan ketika Anda mengkliknya dan mengungkapkan tab lainnya. Kemudian Anda dapat memiliki panah di sebelah kiri sehingga Anda dapat kembali ke tab yang lebih baru. (TY @ChrisF untuk inspirasi)

11
LoganGoesPlaces

Sebagai catatan, saya suka jawaban @ ChrisF, tetapi hanya untuk iseng inilah cara Google Spreadsheets menanganinya.

alt text

8
jessegavin

Saya mungkin akan menambahkan bar di atas daftar dan meletakkan dropdown untuk memilih tahun di sisi kiri bar. Anda kemudian juga akan memiliki ruang untuk menambahkan opsi pemfilteran lain melalui dropdown, yaitu jika ada akan berguna.

6
LoganGoesPlaces

Tab mungkin bukan metafora yang tepat untuk digunakan untuk paginasi. Jika Anda ingin menghindari memuat ulang halaman untuk mendapatkan tahun yang tidak sesuai dengan ruang yang diberikan, daftar horizontal bergulir dapat bekerja lebih baik.

Lihatlah daftar produk di bagian atas halaman Mac Apple .

Daftar tahun Anda tidak akan pernah tumbuh sangat besar, jadi Anda tidak perlu khawatir tentang masalah pagination khas menyembunyikan halaman tidak langsung, dll:

"‹ ... 148 149 150 151 152 ... ›"

Mungkin yang terbaik adalah menemukan cara untuk membuat daftar semua tahun dan menutup yang tidak langsung relevan.

5
Brendan Berg

Jika tahun-tahun tidak banyak, Anda dapat menempatkan tahun 'lebih tua' di bawah menu drop-down di akhir.

enter image description here

3
Ades

Anda dapat melakukannya seperti Firefox. Ada gulir untuk tab tersembunyi. sehingga Anda dapat memuat tab lebih dari ruang yang Anda miliki. Atau Anda dapat melakukannya seperti Chrome, membuat tab lebih kecil dengan menambahkan lebih banyak tab (solusi ini tidak akan berfungsi untuk kasus Anda, karena membuat tab lebih kecil, menyebabkan label hilang). Saya pikir memiliki area gulir untuk tab adalah solusi terbaik. dengan cara ini pengguna tidak memiliki batasan. Anda dapat menambahkan daftar drop-down sehingga pengguna dapat beralih antar halaman dengan cepat.

2
Morteza Milani

Karena Anda memiliki set terikat untuk tab Anda (Anda menyebutkan nilai "20 tahun"), Anda dapat menggunakan "tab vertikal" - semacam seperti kebanyakan perangkat lunak blog memiliki "kategori" atau "arsip" di bilah sisi. Kemudian, jika perlu, Anda bisa meletakkan item lalu lintas paling penting/tinggi dalam format yang mudah digunakan di bagian atas di mana tab Anda saat ini.

Misalnya, situs web saya (templat out-of-the-box) memiliki daftar "Arsip" di sisi kiri.

http://www.aaronlerch.com/blog/

(Catatan saya tidak mencoba untuk mucikari situs saya, itu hanya apa yang terlintas dalam pikiran pertama karena saya tahu apa yang saya cari :))

2
Aaron Lerch

Seperti orang lain di sini, saya sarankan menjauh dari tab juga.

Tetapi jika Anda terjebak dengan mereka, Anda bisa menjejalkan lebih banyak tab ke baris dan mengecilkannya. (Saya sedang memikirkan tab Chrome.) Ketika labelnya terlalu sempit untuk masuk, potong labelnya. Dalam kasus Anda, Anda ingin memotong awal tahun:

| ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

Tentu saja tidak optimal, tetapi mungkin menenangkan klien sampai mereka setuju untuk membuang tab.

2
Ken Mohnkern

Mungkin tab bukan cara terbaik untuk menampilkannya. Tetapi jika Anda tidak ingin merusak navigasi klasik, Anda harus meletakkan 2 panah, satu mengarah ke kiri dan satu lagi ke kanan.

1
David Lalo Matus

Anda juga dapat menampilkan tab yang menurut Anda akan paling sering digunakan (atau hingga 10 tahun terakhir). Pada akhirnya, miliki tab yang bertuliskan "Lama" dan yang menampilkan daftar tahun-tahun yang tersisa saat diklik, menggunakan JavaScript. Pendekatan ini mungkin tidak berfungsi dengan baik jika pada akhirnya Anda memiliki begitu banyak tahun yang lebih tua untuk ditampilkan sehingga daftarnya sangat panjang. Ini juga tidak mempertimbangkan apa yang akan Anda lakukan untuk pengguna tanpa JS diaktifkan.

1
lori.lee

Semua tab itu juga membuatnya menjadi desain yang sangat sibuk dan berisik. Saya juga berpikir bahwa tab lebih cocok untuk mengelompokkan set data yang berbeda, bukan variasi yang sama.

Saya akan menyarankan sesuatu seperti drop-down dengan tombol sebelumnya/berikutnya di kedua sisi. Atau daftar di bilah sisi atau sesuatu.

Apakah Anda berharap pengguna menelusuri selama bertahun-tahun, hanya karena penasaran, atau apakah mereka ingin meninjau penghargaan tahun tertentu? Dalam kasus terakhir, bidang teks bahkan akan lebih cepat.

0
Peter Frings

Tab berikutnya, tab sebelumnya, halaman berikutnya tab, halaman sebelumnya tab, tombol diperlukan, tetapi tidak cukup.
- Menggulir ke tab jarak jauh akan sangat mengganggu.

Coba gunakan tab hierarkis - tab dekade dengan tab tahun di dalamnya.
Juga, biarkan pengguna melompat langsung ke tab yang diinginkan, dengan memasukkan tahun.

0
Danny Varod