Eye Movement & White Balance in UI Design

UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi

Bugün tasarımlarınızda büyük etkisi olabilecek iki konudan bahsetmek istiyorum: beyaz dengesi ve içeriğin gözle takibi. Teorik bilgilerle sıkıcı olmamak adına, bu konuları örneklerle açıklamaya çalışacağım.

Yine bir pazartesi günüydü ve iş listemde yine bir ödeme ekranı tasarımı vardı. Benzer tasarımları tekrar tekrar yapmak çok erindiğim bir iş değildir. Tasarım trendlerinin değişmesi, deneyimimin zaman içinde artması sonucu, bu tür işleri yeni bir bakış açısıyla farklı bir şeyler yapabilme fırsatı olarak görürüm.

İstenen iş netti, kullanıcının poliçe detaylarını, ödeyeceği miktarı görebilmesi, kart bilgilerinin gireceği bir alanla, mesafeli satış sözleşmesi kutusunun eklenmesi gerekiyordu. Bunun üzerine hızlıca temel bir tasarım yaptım ve sizlere bahsedeceğim iki detayla ilgili farklı varyasyonlar çalıştım.

Şimdi bunlara bir göz atalım!

Beyaz Dengesi

Lined Inputs 473x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi

İlk örnek oldukça temiz ve düzenliydi ama belki de biraz “fazla temiz”di.

Bu yüzden metin giriş alanlarının stilini “çizgi” biçiminden “arka planı dolu” şekle çevirdim. Artan kontrast metin alanları ile diğer kısımları ayırmaya yardımcı olurken tasarımdaki yoğun çizgiselliği ve beyaz baskınlığını azalttı.

Titles without Icons 473x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi

İkoncanlar

İkonlar koyalım ve güzelleştirelim mi biraz?

dedi “müşteri”

Mevcut görünüm hoşuma gitse de ikonları denemek istedim. Sonuç beklediğim gibi karmaşık ve yoğun bir görüntüydü. İkonlar basitliği götürürken buna değecek bir fayda getirmiyordu.

Aşağıdaki örneklerde, ikonları eklediğim tasarımı ve gözün metinleri takibini görebilirsiniz. İkonların yarattığı yatay hareket, gözün sağa sola gitmesine sebep olup okunurluğu azalttı. Özellikle alt kısımlarda bu çok yoğun bir görünüme sebep oldu.

Titles with Icons 473x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi
comp1 473x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi
comp2 473x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi

İkonları koruyup, içeriği biraz daha içeri alıp metinlerin başlangıcını başlıklarınkiyle aynı hizaya getirebilirdim, ama bu içerik alanını daraltacaktı ve bu hiç istemediğim bir şeydi. Özellikle küçük ekranlı telefonlarda büyük bir kayıp olurdu.

Böylece ikonları çıkartmaya karar verdim. İkonlar ve görsellerin insan beyninde çok daha hızlı işlendiklerini, sıkıcı sayfaları genelde daha ilginç kıldıklarını ve bölümleri ayırmakta iyi olduklarını bilsek de, bu örnekte basitlik ve içeriğe odaklanmak benim daha fazla içime sindi.

aax 1024x1024 - UI Tasarımında Beyaz Dengesi ve İçeriğin Gözle Takibi

Size güzel günler dilerim!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir