UI Tasarımında Işık ve Karanlık: Renk Şeması Seçimi
Daha önce UI tasarımı konusunda renk kullanımından ve rengin UI tasarımında ne denli önemli olduğundan bahsetmiştim. Şimdi rengin bir adım ötesine geçiyor ve tasarımcıların şu sorusuna cevap arıyorum; UI tasarımı yaparken nasıl bir renk şeması kullanmalıyım? Karanlık mı, aydınlık mı? Bu yazıda koyu ve açık renk şemalarıyla ilgili önemli noktalara değineceğim.
Seçim yapmak ve bu seçimin etkileri
Arayüz tasarımında renk şemaları ile ilgili herkes bir şey söylüyor. Renk şemalarıyla ilgili evrensel bir standart oluşturmak isteyenler bile var. Fakat aslında ortadaki durum şu; proje neyi gerektiriyor, tasarımcı ne düşünüyor? (renk şeması özelinde bahsediyor olsam da UI tasarımının her noktasında geçerlidir bu) Aynı proje için bir tasarımcı aydınlık bir renk şeması seçebilirken, bir diğeri karanlık tarafa geçebilir. Önemli olan her iki tarafın da artılarını eksilerini iyi tahlil etmek. Bir arayüz tasarlarken genel renk şemasını seçmek için en başta dikkate alınması gereken birkaç husus var. Değinelim.
Belirginlik Kullanıcı, ekrandaki tüm detayları görebilmeli ve arayüz içindeki elementleri açıkça ayırt edebilmeli. Seçilen renk şeması ve bunların kombinasyonları arayüzün kolay ve sezgisel kullanımını desteklemeli işlevsel özellikleri ön plana çıkarmalıdır. Eğer kullanıcı arayüzle etkileşime girmekte zorluk çekiyorsa seçilen renk şeması ne olursa olsun, sonuç başarısız demektir. (Böylesi bir durumda tek suçlu renk şeması olmayabilir. İşlevsel elementler düzgün şekilde yerleştirilmemiş olabilir; fakat bu adıma kadar her şeyin düzgün yapıldığını varsayıyorum.) Renk şemasının belirginliğe olan başarılı katkısını görmek için tasarımın geneline biraz “blur” efekti verip bakın. İşlevsel elementler kendilerini belli ediyorlar mı? Bulanık bir görüntüde bile elementler kendilerini belli ediyorlarsa doğru bir netken zaten belli edeceklerdir.
Okunabilirlik (yine) Daha önce de bahsettiğim gibi okunabilir olmak bir arayüzün en önemli özelliğidir. Çünkü arayüz kendini yazılı olarak ifade eder. Ekran için arkaplan seçimi çok yüksek ihtimalle okunabilirliği etkileyecektir. Özellikle metin odaklı UI tasarımı yaparken ilk dikkat etmeniz gereken nokta budur. Eğer arayüzünüzün okunabilirliği zayıfsa, kullanıcı büyük bir çaba harcamak zorunda kalacaktır. Büyük bir çaba harcamak zorunda kalan kullanıcının, bu çabayı harcamak yerine alternatiflere yöneleceğini söylemeye bile gerek yok.
Erişilebilirlik Bir arayüzün önemli amaçlarından biri de mümkün olduğunca fazla kişiye erişebilmektir. Sonrasında ise erişebildiği bu kişileri etkileşime geçirme aşaması gelir. Kişilerin kullanıp kullanmama kararının da istekleri ve ihtiyaçlarından çok fiziksel yetenekleri ve yeterliliklerine dayandığını düşünürsek, tasarımınız mümkün olduğunca çok erişilebilir – etkileşime geçilebilir yapmanız gerekiyor. Renk şemanız, bunu etkileyen ana faktörlerden biridir. Çok geniş bir yaş aralığını, özel ihtiyaçları, kişilerin engeli olup olmadığını göz önünde bulundurmalısınız.
Duyarlılık (responsive) Kişilerin çok çeşitli olması gibi, bu kişilerin kullandığı cihazlar ve ekran boyutları da çok çeşitlidir. Yüksek çözünürlüklü kocaman bir ekranda zarif, şık ve çekici görünen bir çizginin düşük çözünürlüklü bir ekranda leke gibi görünebileceğini dikkate almalısınız. Ya da seçtiğiniz renk şeması çoğu cihaz ve ekranda olması gerektiği gibi görünmeyebilir. Her projeniz için çeşitli cihaz ve çözünürlüklü ekranlarda test yapmak için zaman ayırmalısınız. Ayıracağınız bu vakit sizi sonradan karşılaşabileceğiniz problemlerden ve ekstra iş yükünden kurtaracaktır.
Çevre Renk şeması seçiminde dikkate almanız gereken bir başka etmen de kullanıcıların arayüzünüzü hangi ortamlarda daha çok kullanacağı. Kullanıcılar daha çok doğal ışık alan dış mekanlarda mı kullanacaklar yoksa iç mekan yapay ışıkta mı? Çok mu aydınlık yoksa çok mu karanlık? Örneğin; parlak bir güneş altında sıkça kullanılacak bir uygulama arayüzü için koyu bir şema seçmeniz ekranda yansıma oluşmasına yol açabilir. Renk şeması seçerken arayüzün kullanılacağı ortamı dikkate almak hayati bir önem taşır.
Renk şeması seçiminde adım adım süreç Bu adımları izleyerek renk şeması seçimininin altından başarıyla kalkabilirsiniz.
Arayüzün amacını net olarak belirleyin. Kullanıcı, sizin arayüzünüzle ne amaçla etkileşime geçeceğini iyice anlayın. Bu bir blog gibi metin ağırlıklı bir arayüz mü olacak? Bu durumda açık renklerden oluşan bir şema daha faydalı olabilir. Yoksa görsellerin yoğunlukta olduğu bir arayüz mü yapıyorsunuz? Koyu renkli bir renk şeması görsellerinizin daha iyi görünmesini sağlayabilir.
Newsfeed – Shekh Al Raihan
Hedef kitleyi iyi analiz edin
Daha önceki yazılarımda da sıkça söylediğim gibi kullanıcılarınızı iyi anlayın. Çünkü bir arayüz kullanıcıya ulaşmıyorsa, onu etkileşime katamıyorsa bitmiş sayılmaz. Kullanıcınızı tanıdığınızda arayüzünüz sağlam temeller üzerine kurulacaktır. Orta yaşlı insanlar alışılmışlığın getirdiği açık renkli bir arkaplanı sevme eğilimindedirler. Genç yetişkinler daha orijinal ve koyu tonlarda şemalardan hoşlanırlar. Çocuklar kendilerine komik gelen detaylarla dolu parlak renkli arayüzleri severler. Arayüzünüzün hedef kitlesi tasarımınıza direkt olarak etki eder. Bunu unutmayın.
Çok yüksek ihtimalle UI tasarımı yaptığını ürün, aplikasyon ya da web sitesi piyasadaki tek ürün, aplikasyon ya da web sayfası değil. Kullanıcılar sizin sunduğunuz ürün ya da hizmeti hali hazırda bir başkasından temin ediyor. Bu yüzden mevcut arayüzleri araştırmak sizi onlardan öne çıkartacak tasarımı oluşturmanızda epey fayda sağlayacaktır.
Mümkün olduğu kadar test yapın
Bu ana kadar bahsedilen her şey tek bir ekran, tek bir çözünürlük için geçerli olabilir; fakat ya ekran değişince? O yüzden yapabildiğiniz kadar farklı cihazlar, çözünürlükler, koşullar altında test yapın. Düşük çözünürlükte düşük ışıklandırmalı bir ortamda kullanıldığında, yüksek çözünürlükte ve yüksek doğal ışıkta kullanıldığında aynı performansı sağlıyor mu? Tüm bu test sürecini atlamanız arayüzünüzün çıkartacağı problemleri, güçlü ve zayıf yönlerini, verimsiz tasarım işlemlerini görmeden yayına almanıza, o da kullanıcının başka alternatiflere yönelmesine sebep olabilir.
Etiketler: arayüz tasarımı, renk kullanımı, renk seçimi, ui tasarımı, ux tasarımı, web tasarım