Tasarım Prensipleri #1: Bütünlük, Baskınlık ve Beyaz Alan

Tasarım Prensipleri #1: Bütünlük, Baskınlık ve Beyaz Alan

Bir heykeltıraş, önce yapacağı eseri hayal eder, sonra onu ete kemiğe büründürecek malzemeleri seçer. Seçeceği malzemelerin hangi özelliklerde olduğunu, şekillendirmek için kullanacağı araçları gözü kapalı bilir. Ya da bir ahşap ustası, hangi eşyada hangi ağaç türünün kullanılacağını, dayanıklılığına ya da bunun gibi birçok kritere göre belirler. Bunun için de ağaç türlerini ve özelliklerini bilmesi gerekir.

Peki bir tasarımcı, tasarıma başlamadan önce hangi etkenleri bilmelidir? Tasarımını daha güçlü bir temele oturtmak için neleri göz önünde bulundurmalıdır? Aslında bu soruların tek kelimelik bir cevabı var; o da kullanıcı.

Aşağıdaki kullanıcı odaklı başlıklar göz önünde bulundurularak hazırlanan bir tasarım, daha kolay deneyimlenebilen bir arayüz hazırlamanıza olanak sağlayacaktır.

Bütünlük

Arayüzde oluşturduğunuz bütünlük, tutarlılığı ve kimlik algısını da beraberinde getirir. Tutarlılık ise, arayüz elementleri ile kullanıcının iletişimini maksimum seviyede tutarak deneyim akışının önündeki taşları tek tek ortadan kaldırır. Böylece, ilk sayfada kullanıcının karşısına çıkan arayüz konumlandırma ve stilleri diğer sayfalarda da devam ettirildiğinde, kullanıcı artık ne yapması gerektiğini düşünmeden, sezgisel olarak kavrayabilir. Bu açıklamayı 3 başlık ile detaylandırmak gerekirse;

  • Renk
    Renk aralığının belirlenmesi en önemli faktörlerden biridir. Birçok firmanın görsel kimlik rehberi mevcuttur ve bu dokümanlarda hangi renklerin kullanılacağına yer verilir. Böylece bir markayı, sadece gördüğünüz renklerden tanıyabilirsiniz. Hazırlayacağınız arayüzde de, yazı renkleri, birincil ve ikincil butonlar gibi elementleri aynı tutarlılıkla devam ettirebilirsiniz.
  • Tekrarlama
    Bu başlığı da, aynı işlevi gören elementlerin her zaman aynı şekilde görüntülenmesi olarak ifade edebiliriz. Örneğin bir combobox stili belirlediyseniz, sayfadan bağımsız olarak her zaman aynı stilin kullanılmış olması, kullanıcının sezgisel algısının oluşmasına yardımcı olacaktır.
  • Hizalama
    Hizalama, sadece metinsel içerik ya da görsellerin kullanımı için değil, aynı zamanda arayüz elementlerinin kategorizasyonunun sağlanmasında ve daha anlaşılabilir bir içerik gösterimine olanak sağlar. Örneğin, şu an bulunduğunuz sayfada post içeriği sayfanın solunda, kategoriler ya da etiketler gibi içerikler de sayfanın sağına konumlandırılmıştır. Buna benzer bir ayrışmayı sağlamak için de, hizalamayı, belirleyeceğiniz grid yapılarına göre kullanmak gerekir.

Beyaz Alan

Her ne kadar isminde beyaz (whitespace) kelimesi geçiyor olsa da, beyaz alanı, renklerden bağımsız olarak, basitçe arayüz elementleri arasındaki boşluklar olarak tanımlayabiliriz. Kolay okunabilir, kolay anlaşılır ve görsel olarak da kullanıcıyı tatmin edecek bir tasarım için beyaz alanı doğru şekilde kullanmak, tasarımcılar açısından son derece önemlidir.

Boşlukların yeteri kadar kullanılmaması, içeriğin karışık bir şekilde görüntülenmesine ve her şeyin iç içe geçmesine neden olacaktır. Dolayısıyla, arayüz elementleri ve layout’lar arasındaki boşlukları, tutarlılığı da göz önünde bulundurarak mümkün olduğunca ayrıştırıcı oranda kullanmak, hem görsel hem de kullanılabilirlik açısından doğru yolda olmanızı sağlayacaktır.

Beyaz alanın anlatıldığı UX Efsanesi 28’i de şuradan okuyabilirsiniz.

Baskınlık

Arayüzde öncelikli olarak görünmesini istediğiniz ve kullanıcının aksiyon alacağı öğeleri diğerlerinden ayrıştırmak, tasarımın bir akış doğrultusunda ilerlemesine ve kullanıcının izleyeceği yolu daha rahat bulabilmesine olanak sağlar. Ancak, ayrıştırmak istediğiniz bölümleri olabildiğince az sayıda tutmanız gerekir. Çünkü; tüm öğelerin aynı tekdüzelikte olduğu görünüm ile, farklılık yaratmak istediğiniz çok fazla baskın öğe barındıran bir görünüm arasında herhangi fark yoktur. İkisi de aynı karmaşıklığı taşır.

100$ indirim fırsatı! Springboard UX Design kurs programı 100$ indirimli! İndirim kodunu almak için giriş yap ya da kayit ol.

Ne demiş atalarımız? “First things first.

    Bugün ilk makalen bizdendi.

    Daha fazlası için SHERPA Blog okuru olmalısın.
    Giriş Yap Ücretsiz kaydol

    Benzer Yazılar

    İLGİNİ ÇEKEBİLİR
    “Benim bugün burada olmamı bir ketçap sağladı.”

    “Benim bugün burada olmamı bir ketçap sağladı.”

    Gizle
    KEŞFETMEYE DEVAM ET
    Sohbet robotları için doğal etkileşimli arayüzler tasarlamak

    Sohbet robotları için doğal etkileşimli arayüzler tasarlamak

    Gizle