Yönetim paneli, bir yazılım projesinin en az konuşulan ama en çok kullanılan parçasıdır. Müşteri uygulamayı bir kez inceler, operasyon ekibi ise paneli günde yüzlerce kez açar. Ekranda yüzlerce satır, onlarca sütun ve durum rozeti olduğunda "güzel görünmek" ile "hızlı okunmak" ayrı hedefler haline gelir.
Önce soruyu belirleyin: bu ekranda kim, ne arıyor?
Veri yoğun bir ekran tasarlamaya sütunları sıralayarak başlamayın. Önce kullanıcının bu ekranda cevap aradığı soruyu yazın. Örneğin bir araç takip panelinde operatör "hangi araç şu an sorunlu?" sorusunu soruyor. Bu durumda ilk sütun plaka ya da kayıt numarası değil, durum olmalı. Ekranın en değerli alanı, kullanıcının en sık sorduğu soruya ayrılır.
Tipografi ve hizalama: sayılar için ayrı kurallar
Tablolarda okunabilirliğin yarısı hizalamadan gelir. Metin sola, sayısal değerler sağa hizalanır; böylece basamaklar alt alta gelir ve gözle karşılaştırma mümkün olur. Web tarafında bunun için font-variant-numeric: tabular-nums kullanın: tüm rakamlar aynı genişliği alır, sütun titremez. Flutter karşılığı FontFeature.tabularFigures() özelliğidir.
- Para birimi ve ondalık basamak sayısı sütun boyunca sabit kalsın.
- Uzun metinleri kesin, ama tamamını tooltip veya genişleyen satırda gösterin.
- Başlık satırı kaydırmada sabit kalsın; yüzüncü satırda sütunun ne olduğunu unutturmayın.
- Satır yüksekliğini kullanıcıya bırakın: rahat ve sıkışık olmak üzere iki yoğunluk çoğu ekip için yeterlidir.
Renk bilgi taşır, süs değil
Durum rozetlerinde kırmızı, sarı, yeşil kullanmak doğal görünür ama tek başına yetmez. Renk körlüğü olan kullanıcı için ve yazıcı çıktısında renk kaybolur. Her durum rengine bir ikon veya kısa metin eşlik etsin. Ayrıca bir ekranda aynı anda çok fazla renkli öğe bulunursa hiçbiri öne çıkmaz. Kural olarak sakin bir nötr zemin kullanıp rengi yalnızca dikkat gerektiren satırlara saklıyoruz; sağlıklı kayıtlar sessiz, sorunlu kayıtlar görünür olur.
Filtre, arama ve sıralama: veriyi küçültmeden okunur kılmak
Yoğun ekranın çözümü her zaman daha az veri göstermek değildir; kullanıcının veriyi kendi sorusuna göre daraltabilmesidir. Sık kullanılan filtreleri tablonun hemen üstünde, seyrek kullanılanları ise "gelişmiş filtre" altında tutun. Seçili filtreler çubuk halinde görünür kalmalı ve tek tıkla kaldırılabilmelidir; aksi halde kullanıcı neden az kayıt gördüğünü anlayamaz. Filtre durumunu adres çubuğundaki sorgu parametrelerine yazmak da küçük bir yatırımdır: ekibe "şu görünümü bak" diye bağlantı gönderilebilir.
Sayfalama konusunda da net olun. Binlerce satırda sonsuz kaydırma kullanıcıyı konumsuz bırakır. Numaralı sayfalama ya da toplam kayıt sayısını gösteren bir imleç daha öngörülebilirdir. Sunucu tarafında ise sayfalama ve sıralama veritabanında yapılmalı; tarayıcıya tüm kayıtları gönderip orada süzmek ilk günlerde çalışır, ilk büyük müşteride çöker.
Boş, yüklenen ve hatalı durumlar da tasarımdır
Panel ekranlarının çoğunun tasarımı, verinin dolu olduğu mutlu senaryo için yapılır. Oysa kullanıcı boş sonuçla, yavaş yanıtla ve hata mesajıyla da karşılaşır. İskelet (skeleton) satırlarıyla yükleme, "bu filtreyle kayıt bulunamadı, filtreleri temizle" gibi eyleme yönlendiren boş durum metni ve hatada tekrar dene düğmesi, panelin güvenilir hissettirmesini sağlar.
Beş saniye testi. Tasarımı bitirdiğinizde ekranı bir meslektaşınıza beş saniye gösterip kapatın, sonra neyi hatırladığını sorun. Eğer en belirgin şey dekoratif bir öğe ya da başlık çubuğuysa, vurgu yanlış yerdedir. Gerçek kullanıcılarla, gerçek veriyle ve gerçek satır sayısıyla deneyin; örnek verideki üç kısa satır, canlıdaki iki yüz uzun satırı asla temsil etmez. Panel tasarımını bu yüzden her zaman gerçekçi veriyle test ediyoruz. Bir de erişilebilirlik tarafı var: klavye ile satırlar arasında gezinebilmek, odaktaki satırın belirgin görünmesi ve yeterli renk kontrastı, yalnızca engelli kullanıcılar için değil, hızlı çalışan her operatör için de verimlilik sağlar. Kısayol tuşlarıyla filtreye gitmek ya da satırı açmak, günde yüzlerce kez kullanılan bir ekranda toplamda saatler kazandırır.
Operasyon ekibinizin her gün kullandığı paneli daha hızlı ve hatasız hale getirmek ya da sıfırdan veri yoğun bir yönetim arayüzü tasarlatmak isterseniz iletişim sayfamızdan bize yazın. Admin panellerinde edindiğimiz 500'ün üzerinde proje tecrübesi, güzel ekranla kullanılabilir ekran arasındaki farkı ilk çizimde görmemizi sağlıyor.