- UI tasarımı, sanatsal sezgiden çok tutarlı mantıksal kurallar uygulayarak yerleşim/boşluk/tipografi/renk kararları verildiğinde daha hızlı ve öngörülebilir şekilde iyileştirilebilir
- İlgili öğeleri boşlukla gruplayıp, aynı işlev için aynı biçimi kullanmak ve boyut/renk/kontrast/konumla net bir görsel hiyerarşi oluşturmak temeldir
- Dekoratif renkleri ve gereksiz kenarlıkları azaltmak, rengi de bağlantı ve düğme gibi etkileşime açık olup olmadığını iletmek için seçici biçimde kullanmak gerekir
- WCAG 2.1 AA standardına göre UI öğeleri için en az 3:1, küçük metinler için ise 4.5:1 kontrast oranı sağlanmalı; renk dışında alt çizgi veya biçim gibi ipuçları da sunulmalıdır
- Tek bir sans-serif yazı tipi ile regular/bold ağırlıkları etrafında sistem kurup, büyük x-height/cümle biçimi büyük-küçük harf/sol hizalama/1.5 ve üzeri satır yüksekliği kullanmak okunabilirliği ve tutarlılığı artırır
Mantıksal kurallarla UI nasıl iyileştirilir
- UI tasarımında yalnızca yerleşim/boşluk/tipografi/renk değil, kullanılabilirlik/erişilebilirlik/psikoloji de birlikte düşünülmelidir; bu yüzden seçimler kolayca karmaşıklaşabilir
- Öğeleri sezgisel biçimde taşıyıp hoş görünen bir durumu aramak yerine, yeniden kullanılabilir bir kural sistemi uygulanırsa daha hızlı ve gerekçeli kararlar alınabilir
- Örnek olarak kısa süreli kiralık konaklama detay ekranı ele alınıyor ve karmaşık, kullanımı zor ilk ekran adım adım düzeltiliyor
- Amaç marka süslemeleri eklemek değil; önce sezgisellik, erişilebilirlik ve temel görsel kaliteyi sağlamaktır
1. İlgili öğeleri boşlukla gruplayın
- Bilgiyi küçük ilgili gruplara ayırmak, ekran yapısını daha hızlı anlamayı ve hatırlamayı sağlar
- Öğeleri gruplamanın dört yolu vardır
- Aynı kapsayıcı içine yerleştirmek
- İlgili öğeler arasındaki boşluğu daraltmak
- Benzer şekillerle göstermek
- Sürekli bir çizgi boyunca hizalamak
- Kapsayıcılar en güçlü gruplama ipucudur, ancak ekranda gereksiz süslemeleri artırabilir
- Boşluk ve hizalama, daha incelikli olup ekranı sade tutabilen yöntemlerdir
- Örnekte içerikler arasındaki boşluk artırılarak farklı bilgi grupları net biçimde ayrılıyor
2. Tutarlı biçim ve davranış koruyun
- Benzer öğeler, yalnızca ürün içinde değil, kullanıcıların aşina olduğu diğer ürünlerle karşılaştırıldığında da benzer görünmeli ve çalışmalıdır
- Öngörülebilir davranış, kullanıcıların her seferinde kullanımı yeniden öğrenme ihtiyacını azaltır ve hata olasılığını düşürür
- Örnekteki ikonlarda dolu ve kontur biçimleri karışık kullanıldığı için, dolu ikonlar seçili durum sanılabiliyordu
- Tüm ikonlar yuvarlatılmış köşe ve 2pt konturla birleştirilerek görsel ağırlık dengeleniyor
- Anlamı yalnızca ikonla kavramakta zorlanan kullanıcılar ve ekran okuyucu kullananlar için metin etiketleri ekleniyor
- Aynı görünüme sahip öğelerin aynı şekilde çalışacağı varsayılır; bu yüzden işlev farklıysa görsel işlem de farklı olmalıdır
- Örnekte etkileşimsiz ikon kapsayıcısı
Book nowdüğmesi gibi göründüğü için mavi renk ve düğme stili kaldırılıyor
3. Net bir görsel hiyerarşi oluşturun
- Tüm bilgiler aynı öneme sahip olmadığından, önemli öğeler daha fazla öne çıkmalıdır
- Boyut/renk/kontrast/boşluk/konum/derinlik ayarlanarak kullanıcıların ekranı hızlıca tarayıp ilgi alanlarını bulması sağlanabilir
- Squint Test, gözleri kısarak ya da ekranı bulanık görerek bile önemli öğelerin ve ekranın amacının anlaşılır olup olmadığını kontrol etme yöntemidir
- İlk ekranda birçok öğe benzer güçte yarışırken, sol alttaki ana eylem düğmesi neredeyse fark edilmiyordu
- Ana düğmeye yüksek kontrastlı arka plan rengi ve kalın yazı tipi uygulanarak ekranın en belirgin öğesi haline getiriliyor
- Gövde açıklaması önemine kıyasla fazla vurgulandığı için, daha sonra renk ve tipografi ayarlanarak hiyerarşisi düşürülüyor
4. Gereksiz süslemeleri kaldırın
- Anlam iletmeyen veya öğeleri gruplamayan çizgi/renk/arka plan/animasyonlar dikkati dağıtabilir ve bilişsel yükü artırabilir
- Örnek görselin etrafındaki beyaz boşluk ve kenarlık bilgi iletimi için gerekli olmadığından kaldırılıyor
- Dekoratif öğeler azaltıldığında ekran sadeleşir, temel bilgi ve eylemlere odaklanmak kolaylaşır
5. Renge net bir rol verin
- Rengi süslemeden çok anlam iletmek için sınırlı biçimde kullanmak daha güvenlidir
- Siyah-beyazdan başlayıp yalnızca gerekli yerlere renk ekleyen yaklaşım etkilidir
- Marka rengini metin bağlantıları ve düğmeler gibi etkileşimli öğelerde kullanmak, neyin tıklanabilir olduğunu öğretmeyi kolaylaştırır
- Kart gibi kendi biçimiyle etkileşim olasılığını gösteren öğelere mutlaka renk eklemek gerekmez
- Örnekte mavi başlık ve yıldız puanı etkileşimsiz olmasına rağmen tıklanabilir gibi göründüğünden renk kaldırılıyor
- Sonuç olarak etkileşimli öğelerle genel bilgi arasındaki ayrım daha net hale geliyor
6. UI öğelerinde en az 3:1 kontrast kullanın
- Kontrast oranı, iki rengin algılanan parlaklık farkını
1:1ile21:1arasında bir oranla ifade eder - WCAG 2.1 AA standardında form alanı/ikon/düğme gibi UI öğeleri için en az 3:1 kontrast oranı gerekir
- Örnekte fotoğraf üzerindeki oklar, arka plan görseline göre zor seçilebilir durumdaydı
- Gri ikon ve opak beyaz arka plan uygulanarak, fotoğraftan bağımsız biçimde kontrast sağlanıyor
- Arka plan kapsayıcısı eklenince dokunulabilir alan da daha büyük ve net hale geliyor
- İlk ana düğmede de arka planla kontrast yetersizdi; düşük görme yetisine sahip kullanıcılar düğmenin biçimini ayırt etmekte zorlanabiliyordu
- Düğmenin kontrastı 3:1 ve üstüne çıkarılarak erişilebilirlik ve görsel hiyerarşi birlikte iyileştiriliyor
- Kontrast oranı WebAIM Contrast Checker veya Contrast Figma plugin ile ölçülebilir
7. Metinde yeterli kontrast sağlayın
- WCAG 2.1 AA standardı, metin boyutu ve ağırlığına göre farklı kontrast oranları ister
- 18px ve altındaki küçük metinler için en az 4.5:1 gerekir
- 18px üstü kalın metin veya 24px üstü regular metin için en az 3:1 gerekir
- Fotoğraf sayısı göstergesinde arka planla kontrast yetersiz olduğu için gri kapsayıcının opaklığı artırılıyor ve metin gölgesi ekleniyor
- Konum metni fazla açık renkli ve ince ağırlıklı olduğundan daha koyu griye çevriliyor
- Kontrast standardı karşılansa bile aşırı ince yazı tipleri okunması zor olabilir; bu yüzden ağırlık da ayrıca ayarlanmalıdır
8. Durumu yalnızca renkle ayırmayın
- Renk görme farklılığı olan kullanıcılar bazı renk kombinasyonlarını ayırt etmekte zorlanabilir veya rengi hiç algılamayabilir
- Anlam/durum/etkileşime açık olma bilgisi yalnızca renkle iletilmemelidir
- Örnekteki
Reviewsbağlantısı, mavi renk kaldırıldığında normal metinden ayırt edilemiyordu - Alt çizgi eklenerek, renk görünmese bile bunun bağlantı olduğu anlaşılır hale getiriliyor
9. Tek bir sans-serif yazı tipi kullanın
- Yazı tipi ailesi (typeface), Helvetica gibi ortak stile sahip bir yazı tipi grubudur; bold/regular gibi boyut ve ağırlık varyasyonları ise tekil fontlara karşılık gelir
- Arayüzlerde genellikle okunması kolay, nötr ve sade tek bir sans-serif yazı tipi kullanmak güvenli tercihtir
- Örnekte başlıktaki dekoratif serif yazı tipi okumayı zorlaştırıyor, ayrıca konaklama fotoğrafları veya hizmet havasıyla da uyumsuz olabiliyordu
- Gövdeyle aynı sans-serif yazı tipi kullanılarak kullanılabilirlik ve görsel tutarlılık artırılıyor
10. x-height değeri büyük bir yazı tipi seçin
- Küçük harf yüksekliğini gösteren x-height değeri büyük ve harf aralığı yeterli olan yazı tipleri, küçük boyutlarda daha kolay okunur
- Örnekteki League Spartan'ın x-height değeri görece düşüktü
- Daha büyük x-height sunan Inter'e geçilerek küçük gövde metninin okunabilirliği artırılıyor
11. Büyük harf kullanımını sınırlayın
- İnsanlar hızlı okumada tek tek harflerden çok kelimenin genel biçimini tanıma eğilimindedir
- Tamamı büyük harf yazılan sözcükler benzer dikdörtgen formlara dönüştüğünden, harfleri tek tek kontrol etmek gerekir ve okumak zorlaşır
- Konum bilgisi tamamen büyük harften sentence case biçimine çevrilerek yalnızca ilk sözcük ve özel adlar büyük harfle gösteriliyor
- Tamamı büyük harf, güçlü vurgu gerektiren kısa ifadeler dışında sınırlı kullanılmalıdır
12. Yalnızca regular ve bold ağırlıkları kullanın
- Bir yazı tipi birçok ağırlık sunsa da hepsini kullanmak ekranda görsel gürültüyü artırır ve tutarlı biçimde yönetmeyi zorlaştırır
- Tasarım sistemini regular ve bold etrafında sade tutmak daha iyidir
- Başlıklar ve vurgulu metinlerde bold kullanın
- Küçük normal metinlerde regular kullanın
- Bold fazla ağırsa semi-bold ile değiştirilebilir
- Çok ince veya çok kalın ağırlıkları küçük metinde değil, yalnızca büyük başlıklarda sınırlı kullanın
- Örnekteki konum metni light ağırlıktaydı; bu yüzden kontrast artırıldıktan sonra bile okumak zor olabilirdi
- Regular'a geçirilerek okunabilirlik artırılıyor ve kullanılan ağırlık çeşitleri azaltılıyor
13. Saf siyah metinden kaçının
- Saf siyah, beyaz arka planda çok yüksek kontrast oluşturur ve uzun süreli okumada göz yorgunluğunu artırabilir
- Beyaz arka planda saf siyah yerine koyu gri kullanmak daha güvenlidir
- Örnekteki çeşitli siyah öğeler koyu griye çevrilerek okunabilirlik ayarlanıyor
- Önemine göre fazla dikkat çeken konaklama açıklamasına ise daha açık gri uygulanarak görsel hiyerarşi düşürülüyor
14. Uzun metinleri sola hizalayın
- İngilizce soldan sağa okunur ve ekranı F biçiminde tarama eğilimi vardır; bu yüzden sol hizalama en güvenli seçenektir
- Başlıklar veya kısa cümleler ortalanmış olsa da hızlı okunabilir
- Uzun gövde metnini ortalamak, her satırın başlangıç noktası değiştiği için bir sonraki satırı bulmayı zorlaştırır
- İki yana yaslama ve ortalama, özellikle bilişsel engeli olan kullanıcılar için uzun metinleri okumayı güçleştirebilir
- Örnekte konaklama açıklaması ortalı hizadan sola hizaya alınarak üstteki metinlerle de tutarlılık sağlanıyor
15. Gövde metninde satır yüksekliğini 1.5 ve üstüne ayarlayın
- Satır yüksekliği, iki metin satırı arasındaki dikey mesafedir
- Uygun satır aralığı, aynı satırı yeniden okuma ihtiyacını azaltır ve uzun metinleri daha rahat okunur hale getirir
- Gövde metninde satır yüksekliği en az 1.5 (%150) olmalıdır; genel olarak 1.5 ile 2 aralığı uygundur
- Örnekte satır yüksekliği 1 (%100)'den 1.5 (%150)'e çıkarılarak okunabilirlik artırılıyor
Düzeltme sonucu ve uygulama ilkeleri
- 16 kural art arda uygulanarak karmaşık ekran daha sade, daha okunaklı ve daha erişilebilir bir yapıya dönüştürülüyor
- Marka karakterine uygun süslemeler daha sonra eklenebilir; ancak önce bilgi yapısı/etkileşim ayrımı/kontrast/tipografi gibi temeller düzeltilmelidir
- Öznel zevkler yerine nesnel kurallar kullanmak, sezgisel ve erişilebilir UI'ları daha hızlı tasarlamayı sağlar
- Tekrarlanan kurallar zamanla tasarım iş akışının doğal temeline dönüşür; bunun üzerine yeni anlatım biçimleri ve süslemeler denenebilir
Henüz yorum yok.