Bento Grid, sayfadaki bilgiyi farklı boyutlarda ama aynı boşlukla dizilmiş kartlara bölen bir tasarım düzenidir. Adını Japon öğle yemeği kutusundan alır: her göz ayrı bir yemek tutar, hepsi tek kutuda durur. Teknoloji şirketlerinin ürün sayfalarında yaygınlaştığı için gözünüze çarpmış olabilir. Sitenize uygun olup olmadığı ise kartların neyi taşıdığına bağlı.
Düzen nasıl çalışıyor?
Klasik bir hizmet sayfası, başlık altında alt alta dizilmiş bölümlerden oluşur. Bento düzeninde aynı bilgi bir ızgaraya yerleşir. Bir kart büyüktür ve en önemli mesajı taşır. Yanındaki iki küçük kart destekleyici bilgi verir, altta geniş bir kart bir rakam ya da görsel gösterir. Kartların köşeleri yuvarlak, aralıkları eşittir. Gözün nereye gideceği boyuttan anlaşılır.
Bu yapı, birbirinden bağımsız birkaç bilgiyi tek ekranda göstermek istediğinizde işe yarar. Bir ajansın hizmet listesi, bir yazılımın özellikleri, bir klinikte tedavi türleri gibi.
Hız ve SEO tarafı
Bento’nun kendi başına bir SEO avantajı yok. Google kartların şeklini değil, sayfanın içeriğini, yükleme hızını ve yapısını değerlendirir. Yine de iyi kurulmuş bir ızgara üç konuda yardımcı olur.
Birincisi, kartlar CSS Grid ile kurulursa fazladan JavaScript gerekmez, bu da sayfayı hafif tutar. İkincisi, her kartın kendi başlığı olduğu için içerik net bölünür. Üçüncüsü, boyutlar baştan tanımlandığı için görseller yüklenirken sayfa kaymaz; Core Web Vitals içindeki yerleşim kayması (CLS) ölçüsü bundan olumlu etkilenir.
Dikkat edilmesi gereken yer şuysa: kartlara sığdırmak için metni kısaltırken sayfadaki yazı miktarını aşırı düşürmeyin. Bir hizmet sayfasında yalnızca kart başlıkları ve ikonlar varsa arama motoru neyle ilgili olduğunu anlamakta zorlanır. Her kartın altında en az bir iki cümlelik açıklama olsun, sayfanın alt kısmında da düz paragraflarla yazılmış bir anlatım bulunsun.
Mobilde ne olur?
Masaüstünde yan yana duran kartlar telefonda alt alta iner. Bu geçiş iyi planlanmazsa uzun, aynı boyutlu bir kart yığınına dönüşür ve bento’nun hiyerarşisi kaybolur. Mobil için ayrıca karar verin: hangi kart önce gelecek, hangisi gizlenecek, hangisi iki kolona yerleşecek? Telefon ekranında iki kolonlu küçük kartlar işe yarar, ama içindeki yazı en az 14 piksel okunur olmalı.
Parmakla kullanım için dokunma alanı da kartın tamamı olabilir. Kartın içindeki küçük bir “devamı” bağlantısı yerine kartın bütününe link vermek yanlış dokunmayı azaltır.
Hangi sitelerde mantıklı?
Hizmetleri birbirinden bağımsız, özellikleri ayrı ayrı gösterilebilir olan siteler için. Teknoloji markaları, ajans siteleri, uygulama tanıtım sayfaları, portfolyo sayfaları iyi örneklerdir.
Uzun metin okutmak isteyen sitelerde ise iyi çalışmaz. Bir avukat bilgilendirme yazısı, bir blog makalesi ya da ayrıntılı bir ürün dökümantasyonu düz akışla daha rahat okunur. Bento’yu bu sayfalarda ana sayfada kullanıp iç sayfalarda düz düzene dönmek en sağlıklı karar.
Kartlara ne yazılır?
Bir kartın başlığı fiil ya da somut bir isim olsun: “Randevu al”, “Fiyatları gör”, “Çalışma saatleri”. Altına tek bir cümle koyun. Kartta rakam göstereceksiniz, rakam gerçek olmalı; kuruluş yılı ya da teslim süresi gibi doğrulanabilir bir bilgi iyi örnektir. Aniba Digital için bu “2021’den beri” ya da “tek sayfa sitede teslim 1-2 gün” olabilir. Uydurma müşteri sayısı koymayın.
Sık yapılan hatalar
- Her şeyi kart yapmak. Sayfa bir mozaiğe dönüşür ve hiçbir şey öne çıkmaz.
- Kartlara aynı ağırlığı vermek. Boyut farkı bilginin önemini göstermeli.
- Kart içine çok yazı koymak. Bir kart bir fikir taşıyor.
- Mikro animasyonu abartmak. Üzerine gelince hafifçe yükselen bir kart yeterli, her kartın dönmesi gerekmiyor.
- Kontrastı unutmak. Açık gri zeminde açık gri yazı okunmaz.
Animasyon ve etkileşim
Bir kartın üzerine gelince hafifçe büyümesi ya da gölgesinin değişmesi kullanıcıya “bu tıklanabilir” der. Bu tür küçük geri bildirimler siteyi canlı gösterir. Ancak animasyon azaltma ayarı açık kullanıcılar için hareketi kapatan bir kural eklemek gerekir. Hareket hassasiyeti olan biri için sürekli kayan kartlar sorun yaratabilir.
Marka kimliğiyle uyum
Bento düzeni her markaya uymaz. Ciddi, geleneksel bir kurumsal imaj taşıyan bir firma için yuvarlak köşeli renkli kartlar fazla oyuncu kaçabilir. Köşeleri daha keskin, renkleri sakin tutarak aynı düzeni kurumsal bir tona taşımak mümkün. Renk paletini kimlik çalışmasından alın; karta özel yeni bir renk icat etmeyin.
Kurulum süresi ve maliyet
Bento düzenli bir sayfa, standart bir şablondan biraz fazla tasarım emeği ister, çünkü her kartın içeriği ve boyutu tek tek karar gerektirir. Aniba Digital’de 5-7 sayfalık tanıtım sitesi 25.000 ₺ (+ KDV), teslimi 3-5 gün. Kurumsal paket 40.000 ₺ (+ KDV), teslimi 5-7 gün. Bento ana sayfa istiyorsanız bunu başlangıçta söyleyin; tasarım aşamasında kart içeriklerini birlikte netleştiririz. Paket kapsamları için fiyatlar sayfasına bakabilirsiniz.
Karar vermeden önce kendinize sorun
Sayfada gösterilecek bilgi parçaları birbirinden bağımsız mı? Ziyaretçi bunları tek bakışta taramak istiyor mu? Telefonda alt alta dizildiğinde sıra mantıklı mı? Üçüne evet diyorsanız bento düşünülebilir. Biri hayırsa düz bir akış çoğu zaman daha iyi sonuç verir.
Sitenizin yenilenmesini ya da ana sayfanın yeniden kurulmasını düşünüyorsanız web tasarım hizmetimizi inceleyebilir, kart düzeni üzerine iletişim sayfamızdan yazabilir ya da 0540 022 64 22 numarasını arayabilirsiniz.