Kullanıcı Arayüzü Tasarımına Psikolojik Bir Bakış Açısı: Gestalt Teoremi
Hepimizin çocukken karanlıkta gördüğü gölgeleri canavarlara, yere uzanıp izlediği bulutların şekillerini birer hayvana benzettiği zamanlar olmuştur. Peki bu benzetmelerin nedenini hiç merak ettiniz mi?
Bunlar beynimizin bizlere oynadığı küçük oyunlardan sadece birisi!
Beynimiz her zaman parçaları birleştirerek gördüklerini anlamlandırmaya çalışır. Gördüğümüz şekilleri bir şeye benzetme ihtiyacını duymamız tamamen beynimizin görselleri algılamasıyla alakalıdır. İnsan, görsel algı sayesinde çevresindeki nesneleri, renkleri, hareketleri fark eder, seçer, anlamlandırır ve yorumlar. Geçmişte gördüğü şekilleri ise kodlar ve yeni anlamlar yaratır.
Kısaca, görsel algı ve psikoloji birbiriyle bağlantılıdır ve birbirini etkileyebilir. Gestalt ilkeleri ise bu bağlantıları anlamamıza ve kontrol etmemize yardımcıdır.
Tasarım dünyasında sıklıkla kullanılan bir psikoloji teorisi olan Gestalt ilkeleri, beynimizin görselleri nasıl anlamlandırdığını tanımlar. Biz farkında olmasak da bu ilkeler, marketten aldığımız ürünlerin ambalajlarındaki logolarda, sosyal medyada dolaşırken, hatta çok beğenerek evimizin duvarına astığımız bir tabloda bile karşımıza çıkabilir.
Tüm bunların dışında son dönemde Gestalt prensiplerinin sıklıkla kullanıldığı bir alan daha var; Arayüz Tasarımı.
Kullanıcı deneyimi ve arayüz tasarımı her zaman psikolojiyle bağlantılıdır. Kullanıcının bir sonraki adımını tahmin etme, kullanılan ikonların ve renklerin kullanıcıya verdiği hissiyat ya da butonun yüksekliğinin ne kadar olması gerektiği gibi arayüz tasarımında artık kalıplaşmış bilgilerin odağında bile kullanıcı, yani insan vardır. Bu yazıda hep birlikte tasarım ilkelerini ve bunların arayüz tasarımında nasıl kullanıldıklarını inceleyeceğiz.
Konuyu biraz daha açmadan önce kısaca Gestalt’ın tarihine ve teoremine göz atalım;
Gestalt kuramları, 1920’lerde Alman psikolog grubu tarafından ortaya atılmış, algısal psikolojiyi ele alan bir disiplindir. İnsanların görsel bilgileri nasıl algıladıkları ve anlamlandırdıklarını açıklamak için kullanılır.
Almanca bir kelime olan Gestalt, “bütün” anlamına gelir. Aynı zamanda “figür, şekil, form” gibi anlamlara da gelmektedir. Bu teoriye göre; “bir bütün kendisini oluşturan parçalardan bağımsızdır”. Bu, zihinlerimizin görselleri otomatik olarak basitleştirmeye çalıştığı ve sonuç olarak münferit parçalar yerine bütünün anlamını gördüğümüz anlamına gelir. Her bir parça farklı anlamlara sahip olabilirken, parçalar bütünleşerek tamamen yeni bir anlam kazanabilir.
Biraz daha açmak gerekirse; her parçanın farklı anlam ifade etmesi ve bu parçaların birleşmesiyle yeni bir parçanın ortaya çıkması da diyebiliriz. Yani Gestalt, “parçadan bütüne gitmektir.”
Bu teorinin temeli nesnelerin form, negatif -pozitif alan, boyut ve perspektif gibi biçimsel özellikleri ile farklı görüntü illüzyonları yaratmasına dayanır. Gestalt ilkelerine göre nesneleri görsel olarak algılama şeklimizi birkaç kural yönetir. Bu kuralları şöyle sıralayabiliriz;
- Yakınlık
- Benzerlik
- Ortak Bölge
- Periyodiklik
- Tamamlama
- Şekil- Zemin İlişkisi
Şimdi hep birlikte bu ilkelerin arayüz tasarımında nasıl kullanıldığına bakalım;
Yakınlık İlkesi
Nesneler birbirine yakın olarak yerleştirildiğinde bunları bir grup olarak algılamamızdır. Tasarımda çok fazla nesne olsa bile, daha yakın olan nesneler daha uzağa yerleştirilen elemanlardan daha ilişkili gibi görünür.
Yakınlık İlkesi Arayüz Tasarımında Nasıl Kullanılır?
UI tasarımında boşluk kullanımı ve denge çok önemlidir. Beyaz boşluklar ögeler arasındaki bağlantıyı oluşturur. Yakınlık ilkesinin arayüz tasarımında kullanılması sayesinde, tasarımdaki ögelerin arasındaki ilişki güçlenir ve kullanıcılar tarafından algılanması daha kolay içerikler oluşturulur. Ayrıca sayfalar daha kolay ve hızlı bir şekilde taranabilir ve kullanıcı hedeflerini daha hızlı şekilde gerçekleştirebilir.
Yukarıdaki örnekte aynı bileşenlerin doğru ve yanlış kullanımları vardır. Doğru kullanıma dikkatli baktığımızda boşluk ve dengenin ön planda olduğunu ve böylece hem yazıların daha kolay okunmasını hem de bütün ögelerin algılanmasının netliğini anlayabiliyoruz.
Yanlış kullanımda ise boşluklar olmadığı için bütün bileşenler tek bir öge gibi algılanıyor. Bu da gözün yazıları takip etmesine ve anlaşılabilirliğin azalmasına neden oluyor.
Benzerlik İlkesi
Benzer görsel görünüme sahip ögeler, aynı nitelikleri paylaşmayanlardan daha ilgili veya gruplandırılmış gibi görünür. Benzerlik izlenimini artıran temel özellikler boyut, şekil ve renktir. Benzerlik, aynı zamanda insan algısının da en güçlü yanlarından biridir.
Benzerlik İlkesi Arayüz Tasarımında Nasıl Kullanılır?
Benzerlik ilkesi doğru olarak uygulandığında UI Tasarımını güçlendirecek en önemli ilkelerden birisidir. “Benzer” ögeler grubunda, önce renk benzerliğine, daha sonra boyuta ve son olarak aynı şekillere sahip nesneleri görme eğilimindeyiz. Bu yüzden tipografi, renk ve şekil benzerlik ilkesinin en önemli üç maddesidir.
Kullanıcılar genellikle kullanıcı arayüzünde benzer bir öge fark ettiğinde, bunları belirli gruplar olarak sınıflandırırlar. Böylece tasarım objelerini hızlıca tanıyarak kolayca adapte olurlar. Bu nedenle, birincil butonların ve başlıkların her sayfada aynı görünmesi çok önemlidir.
Örnekte benzerlik ilkesinin doğru ve yanlış kullanımları verilmiştir. Doğru kullanımda tipografi, renk ve şekillerle ögelerle benzerlik ayırt edici şekilde gruplanmıştır. Bu gruplama kullanıcının kullanımını kolaylaştırarak kullandığı ürüne daha çabuk uyum sağlamasının önünü açar.
Yanlış kullanımda ise görüldüğü üzere ayırt edici hiçbir özellik bulunmamakta ve her şey birbirine benzemekte. Kullanıcı böyle bir arayüzde ne yapacağını bilemez ve kaybolur. Bu da ürünü kullanmamasına sebebiyet verir.
Ortak Bölge İlkesi
Tasarımda aynı kapalı bölgeye yerleştirilen nesneler tek bir grupta toplanmış gibi algılanır. Ortak alan ilkesi, yakınlık ilkesine son derece benzemektedir.
Ortak Bölge İlkesi Arayüz Tasarımında Nasıl Kullanılır?
Bu ilke arayüz tasarımı için en çok kullanılan ve etkili olan ilkelerden biridir. Özellikle “card” tasarımlarında kullanılan bu ilke navigasyon tasarımında, menü tasarımlarında, form ve tablolarda da sıklıkla uygulanır.
Ortak bölge ilkesinin asıl amacı ise aynı içerik için kullanılacak buton, başlık, metin blokları ve görsel öğelerin tek bir alan içerisinde toplanmasıdır. Böylece içerik yapılanır ve kullanıcı tarafından kolay takip edilebilir.
Yukarıda bulunan örnekte Ortak Bölge İlkesini doğru ve yanlış kullanımlarıyla görmekteyiz. Doğru kullanımda aynı özellikleri taşıyan bileşenler tek bir yerde toplanarak bir arkaplan kullanılarak diğerlerinden ayrılmıştır.
Yanlış kullanımda ise tüm bileşenler özelliklerini dikkat edilmeksizin karışık bir sırayla dizilmiştir. Burada görüyoruz ki; Ortak Bölge İlkesi arayüz tasarımında doğru uygulandığında ortaya daha kolay anlaşılan ve temiz arayüzler çıkar.
Periyodiklik İlkesi
Periyodiklik İlkesi, aynı mesafelerle; tek bir düzlemde, periyodik bir şekilde ilerleyen öğelerin birbirine bağlı olması halidir. Daha detaylı anlatmak gerekirse aşağıdaki görselde bulunan karmaşık dairelerden ziyade aynı düzlemde giden çizgiler birbiriyle daha bağlantılı görünüyor. Algımız sayesinde bu çizgileri birbiriyle gruplarken, dairelere baktığımızda sadece karmaşa görüyoruz. Bu devamlılık ilkesini en net görebileceğimiz örneklerden biridir.
Periyodiklik İlkesi Arayüz Tasarımında Nasıl Kullanılır?
Periyodiklik, kullanıcıların arayüz tasarımında kullanılan bileşenleri tanımasına yardımcı olur. Bu kural genel olarak tab’lerde kullanılır (öğeler aynı hizada yerleştirilir). Devamlılık ilkesi bir websitenin bölümlerinde hizayla birlikte bütünlük oluşturmak için de kullanılabilir.
Verilen örnekte yine doğru ve yanlış kullanımları görüyoruz. Doğru kullanımda öğelerin bir sıralama ve kullanılan ayrıştırıcı başlıklar sayesinde akışının daha düzgün olduğunu görüyoruz.
Yanlış kullanımda ise herhangi bir ayrıştırıcı kullanılmaksızın sadece bileşenler sıralanmıştır. Görüntü olarak her ne kadar düzenli görünse de ayrıştırıcılık bakımından kullanıcı dostu olmayan bir görüntü ortaya çıkmıştır.
Tamamlama İlkesi
Tamamlama ilkesine göre nesneler eksik olsalar bile, genellikle bir bütün olarak algılanırlar. Çünkü zihnimiz boşlukları doldurur ve belirli bir şeyin şeklini bulmamıza yardımcı olur. Beynimizin bu şekilde parçaları tamamlamasına Gestalt prensiplerinde Tamamlama İlkesi denir.
Tamamlama İlkesi Arayüz Tasarımında Nasıl Kullanılır?
Tamamlama İlkesi genel olarak yüklenme göstergesi gibi parçalı olan bileşenlerin kullanıcı için daha anlaşılır halde olması gereken yerlerde kullanılır. Tamamlamanın diğer kullanımı ise negatif boşluktur. Aslında bu ilkenin kullanımını arayüz tasarımından ziyade logo ve ikonlarda daha fazla görürüz. Tamamlama ilkesi tasarımı daha kolay okunabilir (algılanabilir) ve eğlenceli hale getirmektedir.
Tamamlama ilkesi için verilen bu örnekte de doğru kullanımda dairesel şeklin bir kısmı olmadığı halde çizgi bir düzlem üzerinde gittiği için gözümüz daireyi ister istemez tamamlamakta.
Hatalı kullanımda ise şekiller arasında herhangi bir bağlayıcılık bulunmadığı ve rastgele dizildikleri için gözümüz daireyi algılamadığı gibi ortaya anlamsız bir görüntü ortaya çıkmaktadır.
Şekil-Zemin İlişkisi İlkesi
İnsan gözü, odaklanarak bir nesneyi farklı planlarda ayırabilir. Şekil-Zemin İlişkisi ilkesi de hangi öğelerin ön planda, hangi öğelerin arka planda olduğunu algıladığımızı söyler.
Şekil-Zemin İlişkisi İlkesi Arayüz Tasarımında Nasıl Kullanılır?
Girdiğimiz her websitesinde, kullandığımız mobil aplikasyonlarda karşılaştığımız ekranlarda veya karşılaştığımız pop-up’larda ön ve arka planda neler olduğunu algılamaya çalışırız. Bu Şekil-Zemin İlişkisinin en net örneklerindendir.
Şekil-Zemin İlkesi için verilen iki örnekte bu ilkenin doğru ve yanlış kullanımlarını görmekteyiz. Doğru kullanımda pop-up’ı zeminden ayırabilmek için farklı renkte, saydam bir arkaplan kullanılmıştır. Pop-up zeminin tam ortasına, dikkat çekecek bir şekilde yerleştirilmiştir. Bu kullanımda odağı istediğimiz yere çektiğimiz için hem pop-up’ın kullanımına doğru hizmet etmiş oluruz hem de şekil-zemin ilişkisi ilkesini doğru bir şekilde kullanırız.
Yanlış kullanım örneğinde ise pop-up diğer bileşenlerin arasında kullanılmıştır. Bu kullanım yanlış olmakla birlikte kesinlikle kullanıcının dikkatini çekmeyecektir.
Sonuç olarak,
Gestalt ilkeleri psikoloji ve tasarımın olduğu kadar, arayüz tasarımının da önemli bir parçasıdır. Kullanılan her prensip, tasarımı bir adım ileri taşımaktadır. Kullanıcı dostu ve temiz arayüzler çıkarmak istiyorsak Gestalt prensiplerinden olabildiğince yararlanmamız gerekir.
Ayrıca, birçok tasarımcı tarafından kimi zaman sezgisel olarak kullanılan bu ilkeleri bilmek daha doğru ve bilinçli kararlar almamızı sağlayacaktır.
