Oysa bence iyi arayüz ile amatör görünen arayüz arasındaki farkın büyük kısmı boşluklardan geliyor.

Renk güzel olabilir.

Font iyi olabilir.

Butonlar modern görünebilir.

Ama boşluklar yanlışsa ekran yine yorucu görünür.

Çünkü boşluk sadece estetik değildir.

Boşluk, kullanıcının ekranda neyi önce göreceğini, neyi daha kolay okuyacağını ve hangi aksiyona daha rahat gideceğini belirler.

Boşluk tasarımın sessiz yönlendiricisidir

İyi kullanılan boşluk kullanıcıya bağırmaz.

Ama kullanıcıyı yönlendirir.

Başlık ile açıklama arasındaki mesafe, kartların birbirinden ayrılması, butonun çevresindeki alan, form elemanlarının nefes alması hep bu yönlendirme işine hizmet eder.

Bir ekranda her şey birbirine çok yakınsa kullanıcı neyin önemli olduğunu anlamakta zorlanır.

Her şey çok uzaksa da ekran kopuk ve dağınık görünür.

Yani mesele sadece boş alan bırakmak değil.

Doğru yerde, doğru miktarda boşluk bırakmak.

Okunabilirlik boşlukla başlar

Tipografi sadece font seçmek değildir.

Satır yüksekliği, paragraf aralığı, başlık mesafesi ve metin bloğunun genişliği de okunabilirliği etkiler.

Bir metin çok sıkışıksa kullanıcı okumak istemez.

Bir form alanı label, input ve hata mesajı ile birbirine karışıyorsa kullanıcı hata yaptığında ne olduğunu anlayamaz.

Boşluk burada tasarımı temizler.

İyi spacing sayesinde kullanıcı içeriği daha rahat tarar.

Bu yüzden UI tasarımda boşluk, görsel güzellikten önce okunabilirlik meselesidir.

Hiyerarşi sadece font boyutu ile kurulmaz

Yeni başlayanlar genelde hiyerarşiyi sadece font boyutu ile kurmaya çalışıyor.

Başlığı büyüt, açıklamayı küçült, butonu renklendir.

Bunlar doğru olabilir ama tek başına yetmez.

Boşluk da hiyerarşi kurar.

Bir başlık ile altındaki açıklama birbirine yakınsa, kullanıcı bunların aynı grup olduğunu anlar.

Bir bölüm ile diğer bölüm arasında daha fazla boşluk varsa, kullanıcı yeni bir konuya geçtiğini hisseder.

Yani boşluk ekranda görünmeyen bir ayraç gibi çalışır.

Kart tasarımında boşluk kaliteyi belirler

Card yapıları birçok arayüzde kullanılıyor.

Mobil uygulama, dashboard, SaaS, blog, ürün listeleme, ayarlar ekranı.

Ama kart tasarımında en sık yapılan hata içeriyi fazla doldurmak.

Başlık, açıklama, ikon, etiket, fiyat, buton, görsel derken kart nefes alamıyor.

İyi kart tasarımında içerik kadar içerik çevresindeki alan da önemlidir.

İç padding tutarlı olmalı.

Başlık ile açıklama mesafesi doğru olmalı.

Buton kartın içinde sıkışmamalı.

Kartlar birbirinden yeterince ayrılmalı.

Bunlar küçük gibi görünür ama ürünün algısını doğrudan etkiler.

Mobil arayüzde boşluk daha da kritik

Mobil ekranda alan sınırlı olduğu için boşluk daha zor bir konudur.

Çünkü çok boşluk bırakırsan içerik aşağı kayar.

Az boşluk bırakırsan ekran sıkışır.

Ayrıca dokunma alanları da burada devreye girer.

Kullanıcı parmağıyla butona, tab bar’a, input alanına ya da liste elemanına dokunur.

Bu yüzden mobilde boşluk sadece görsel değil, kullanım meselesidir.

Yanlış spacing, yanlış dokunma ve yanlış karar demek olabilir.

Mobil ekran ölçüleri tarafında daha detaylı okumak istersen Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısı işine yarayabilir.

Boşluk karar yükünü azaltır

Kullanıcı bir ekrana baktığında her şeyi aynı anda anlamak istemez.

Önce en önemli şeyi görmek ister.

Sonra detaylara iner.

Boşluk burada karar yükünü azaltır.

Örneğin bir ödeme ekranında başlık, ürün özeti, fiyat, ödeme yöntemi ve satın alma butonu net ayrılmışsa kullanıcı daha rahat ilerler.

Ama hepsi iç içe görünüyorsa kullanıcı yavaşlar.

İyi boşluk kullanımı ekrana sakinlik verir.

Kullanıcı neye bakacağını daha kolay anlar.

Spacing sistemi kurmak gerekir

Boşluğu rastgele kullanmak yerine küçük bir spacing sistemi kurmak daha sağlıklı.

Mesela 4, 8, 12, 16, 24, 32, 48 gibi değerler üzerinden ilerlemek işleri kolaylaştırır.

Her projede bu değerler aynı olmak zorunda değil.

Ama bir mantık olmalı.

Eğer bir yerde 13px, başka yerde 19px, başka yerde 27px kullanıyorsan tasarım zamanla dağılır.

Spacing sistemi hem tasarımcıya hem geliştiriciye yardımcı olur.

Design system konusunu İngilizce olarak burada anlatmıştım: Design Systems for Beginners.

Yeni başlayanların yaptığı boşluk hataları

Yeni başlayan tasarımcılarda en sık gördüğüm boşluk hataları şunlar:

• Her şeyi birbirine çok yakın koymak
• Kart içi padding’i çok az bırakmak
• Başlık ve açıklama ilişkisini yanlış kurmak
• Butonları ekrana yapıştırmak
• Mobilde dokunma alanlarını küçük bırakmak
• Bölümler arasında yeterli mesafe bırakmamak
• Her ekranda farklı spacing kullanmak

Bunlar normal hatalar.

Ama fark edildiğinde hızlı gelişim sağlar.

Çünkü spacing çalışmak gözünü çok geliştirir.

Boşluk kullanımı portfolio kalitesini de etkiler

Portfolio hazırlarken de boşluk çok önemli.

Case study sayfan temiz değilse, iyi ekranlar bile zayıf görünebilir.

Görsellerin, başlıkların, açıklamaların ve proje bölümlerinin nefes alması gerekir.

Portfolio bir tasarım işi değilmiş gibi düşünülmemeli.

Orası da kullanıcı deneyimi olan bir sayfa.

Portfolio hatalarıyla ilgili İngilizce yazdığım şu içeriğe de bakabilirsin: UI/UX Portfolio Mistakes Junior Designers Should Avoid.

Benim kısa tavsiyem

UI/UX tasarımda boşluk kullanımı öğrenmek için çok karmaşık şeylere gerek yok.

İyi arayüzlere bak.

Başlık ile açıklama mesafesini incele.

Kartların iç boşluğuna bak.

Butonların çevresindeki alanı incele.

Mobil ekranlarda dokunma alanlarını düşün.

Sonra kendi tasarımında aynı şeyi bilinçli uygula.

Figma bilmek önemli ama sadece araç bilmek yetmez. Bu konuya UI/UX Tasarımcı Olmak İçin Figma Bilmek Yeterli mi? yazısında da değinmiştim.

Sonuç

Boşluk, tasarımda boş kalan yer değildir.

Boşluk bir karar alanıdır.

Kullanıcıyı yönlendirir.

Okunabilirliği artırır.

Hiyerarşi kurar.

Mobil kullanımı iyileştirir.

Ürünün daha kaliteli görünmesini sağlar.

Bence iyi UI/UX tasarım öğrenmek isteyen biri spacing konusunu erken ciddiye almalı.

Çünkü bazen tasarımı daha iyi yapan şey daha fazlasını eklemek değil, doğru boşluğu bırakmaktır.

Yeni başlıyorsan UX Tasarıma Yeni Başlayanlar İçin Basit Bir Yol Haritası yazısı da iyi bir devam olabilir.

Diğer içerikler için UI/UX, Product Design ve Growth kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – The Power of White Space
• Nielsen Norman Group – Visual Hierarchy in UX
• Material Design – Understanding Layout
• Apple Human Interface Guidelines – Layout
• Figma – Design Systems 101

The post UI/UX Tasarımda Boşluk Kullanımı Neden Bu Kadar Önemli? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.