İki Panel Seçici: Liste ve Detayı Yan Yana Göstermek

İki panel seçici, solda listeyi sabit tutup sağda seçili öğenin detayını gösteren eski bir arayüz deseni. E-posta istemcilerinden dosya yöneticilerine kadar her yerde karşımıza çıkıyor, çünkü gezinme ile okuma arasındaki gidip gelmeyi ortadan kaldırıyor. Bedeli ise genişlik: iki panel aynı anda ekranda duracaksa ikisine de yeterli yer kalmalı, kalmadığında desen sessizce bozulur.

Aslında ne çözüyor

Liste ve detay ayrı ekranlardaysa kullanıcı her seçimde ileri gider, okur, geri döner, listedeki yerini yeniden bulur. Dört adım. İki panel bunu bire indiriyor: liste yerinde durur, yalnızca sağdaki alan değişir.

Asıl kazanç adım sayısında değil, hafızada. Kullanıcı "hangi öğedeydim" sorusunu ekrana bakarak cevaplıyor, kafasında tutmuyor. Slack'in kanal listesi, bir dosya yöneticisinin ağaç görünümü, gelen kutusu, hepsi aynı mantığın farklı kılıkları.

Genişlik bütçesi

Bu deseni tartışırken genelde "kullanıcı deneyimi" konuşulur, oysa ilk kısıt aritmetik. 16 piksellik gövde metninde ortalama karakter genişliği 8 piksel civarında oturur. Rahat okunan satır 60-70 karakter olduğuna göre detay paneli metni yaklaşık 520 piksel ister, iç boşluklarla 570. Listeye da 300 piksel verin: iki panel, aradaki ayırıcıyla birlikte 880 pikselin altında nefes almaz.

Yani 1024 piksel genişliğindeki bir tablet, kenar boşlukları da düşünce sınırın hemen üstünde geziniyor. Peki ya kullanıcı pencereyi yarıya indirirse? Desen o noktada iki dar sütuna dönüşür ve ikisi de işini yapamaz. Kırılma noktasını tasarım aşamasında seçin, tarayıcı sizin yerinize seçmesin.

Seçimi URL'de tutun

Panel yapısının en çok atlanan tarafı, seçili öğenin nerede saklandığı. Bileşen state'inde tutulursa geri tuşu listeyi sıfırlar, sayfa yenilendiğinde seçim uçar, kullanıcı gördüğü ekranı arkadaşına gönderemez.

Seçili kimliği adres çubuğuna taşıyın; çoğu çatıda birkaç satır iş çıkarır, karşılığında geri tuşu, yenileme ve bağlantı paylaşımı üçü birden bedavaya çalışır. Dar ekranda tek panele düşen sürüm de aynı adresi kullanabildiği için ayrı bir gezinme mantığı yazmaktan kurtulursunuz.

Üçüncü panel meselesi

İki panel işe yarayınca üçüncüsü cazip görünür: klasör, liste, detay. Burada aritmetik yine devreye giriyor, çünkü üç panel aynı satır uzunluğu hedefiyle 1200 pikselin üstünü ister ve pratikte ya detay paneli daralır ya yatay kaydırma çıkar.

Üçüncü seviyeye ihtiyaç varsa onu panel olarak değil, liste panelinin içinde daraltılabilir bir grup olarak kurmak daha sağlam duruyor. Ekranda kalıcı yer tutmaz, hiyerarşiyi de kaybetmezsiniz.

Ne zaman bu deseni bırakmalı

Detayda gösterilecek şey iki satırlık bir özetse iki panel gereksiz; o bilgi doğrudan listenin içinde durabilir, ikinci panel boşluğu doldurmak için bir şeyler uydurmaya başlar. Liste binlerce satırsa da sorun panelde değil, aramada: anlık filtre ve klavye ile gezinme olmadan sürekli görünen liste sadece sürekli kaydırılan liste demek.

Bir de alışkanlık tarafı var. Kullanıcı seçtiği öğeyi tam ekran okumaya alışkınsa detay panelini genişletebilmesi, hatta paneli kapatabilmesi gerekir. Ayırıcıyı sürüklenebilir yapın, oranı da kullanıcı başına saklayın; bu küçük ayar, deseni sevmeyen kullanıcıyı da kaybetmemenin en ucuz yolu.