UI Tasarımda Çok Duyduğumuz Bento Stili ve Bölümlendirme

Burak Turalı
Flow Founders
Published in
3 min readJan 21, 2024

Küçüklüğümüzde hepimiz annelerimizin hazırlamış olduğu beslenme çantaları ile okula gitmişizdir. Erkenden kalkarlar, günlük yiyecek ihtiyaçlarımızı o küçük beslenme çantalarımıza sığdırırlardı.

Aslında konu sadece yiyeceklerin hepsini çantaya sığdırmak değil, onları anlamlı ve amaca uygun olacak şekilde yerleştirmekle ilgilidir. Bu, bir çok yönüyle UI tasarımdaki ‘bölümlendirme’ ilkelerini yansıtıyor.

Paketlemenin Ötesinde: Bölümlendirme

UI tasarımda bölümlendirme, her elementin kullanılabilir, kolay erişilebilir olduğuyla alakalıdır. Her nesneyi belirli bir alana sığdırabiliriz ancak onun belirli bir amaca hizmet ettiğinden emin olmak gerekir. Yukarıda anlattığım gibi, annelerimiz beslenme çantalarımızı hazırlarken hangi yiyeceğin çantada nereye geleceğini, ezilebilecek ürünleri hassas bir şekilde çantaya eklediğini hatırlamak gerekir. Bizler de tasarımcılar olarak kullanıcıların en iyi deneyimi yaşamaları adına web sitelerinin veya uygulamaların ögelerini en iyi şekilde düzenleriz.

İyi tasarlanmış bir web sitesi ya da uygulamayı başka bir örnekle açıklayalım. Çekmecenizin düzenli olması sizi sezgisel olarak iyi hissettirir. Neyin nerede olduğunu kolaylıkla bulabilirsiniz. İşte UI tasarımda bölümlendirmenin kısa özeti bu şekildedir. Kullanıcıya zahmetsiz ve aradığını kolayca bulabileceği bir deneyim yaratmanızı sağlar.

Bento Tasarım Stili

Bento tasarım stili, web yada uygulamalarda kart tabanlı tasarım olarak adlandırılabilir. Bilgiler, net bir şekilde kullanıcıya farklı bölmelerde sunulur. Bu tasarım stili Japon mutfağının bento kutusu konseptinden ilham alınarak ortaya çıkmıştır. Bu bento kutuları, yemeklerin birbirlerine karışmamasını, her bir bölmesinde farklı türden yiyecekler olan dengeli ve görsel açıdan düzenli bir yemek kutusudur. Bento tasarım stiline sahip web siteleri veya mobil uygulamalar farklı özelliklere sahip bölmelere ayrılmıştır.

Apple’ın kullandığı bento tasarım sistemi
Bento grid örneği

Bu tasarım stilinin bu kadar kullanışlı olmasının nedeni görsel netlik sunuyor olmasıdır. Elementlerin veya içeriklerin Japon bento kutusu gibi ayrılması, kullanıcıların aradığı içerikte kaybolmamasını ve sıkılmamasını sağlar. Bunların yerine, çekmece örneğinde olduğu gibi aradığını kolaylıkla bulmasını sağlar. Tabiki sadece kullanım açısından değil, görsel açıdan da mükemmel bir görünüm sağlar.

Her tasarım stilinin artısı ve eksisi olduğu gibi bento tasarım stilinin de bazı eksi yönleri var. Kısaca bunlara bir göz atalım.

Artıları:

  • Kullanıcı Deneyimi: İçeriklerin net bir şekilde bölümlere ayrılması daha kolay ve hızlı bir deneyim sunabilir.
  • Görsel Düzen: Bento tasarım stili genelde görsel olarak çekici ve etkileyicidir.
  • Esnek Olması: Bento stili, farklı içerik türlerinde çok yönlü olarak kullanılabilir.

Eksileri:

  • Sınırlar: Bento tasarım stilindeki bölümlendirmeler, bölmelerde görüntülenecek olan içeriklerin sınırlanmasına neden olabilir.
  • Karmaşıklık: Özellikle karmaşık web sitelerinde dengeli bir görünüm yakalamak zor olabilir. Bu da görsel ve deneyim açısından zorlayıcı olabilir.
  • Aşırılık: Aşırı bir bölümlendirme, kullanıcı deneyimi açısından parçalanmalara yol açabilir.

Final;

Bento tasarım stili, bir uygulamanın ya da web sitesinin karışıklığını azaltmak, kullanıcıların aradıklarını kolayca bulabilmelerini sağlamakla ilgilidir. UI tasarımdaki her bölme, bento kutusundaki yemek gibidir. Hepsinin tadı farklıdır ancak uyumlu bir bütünün parçasıdır.

--

--