Web tasarımı

Kullanıcı arayüzü tasarımının ilkeleri

İyi bir kullanıcı arayüzü, kullanıcının bir sonraki adımı düşünmeden anladığı arayüzdür ve bunu dört şey kurar: hiyerarşi, kontrast, boşluk ve tutarlılık. İlk üçü ölçülebilir; dördüncüsü ise satış amaçlı bir sayfada yaratıcılıktan daha çok iş görür.

  • Ders 6 / 12
  • Başlangıç
  • Ücretsiz, kayıt yok

Bir arayüzü ayakta tutan dört sütun

İlk üç sütunun sayısı vardır ve ölçülebilir. Dördüncüsünün sayısı yoktur ve kontrolü en kolay olandır.

Kullanılabilir bir arayüzkullanıcı bir sonraki adımı düşünmeden anlar

  • Hiyerarşi

    Gözün ilk düştüğü yer. Boyut, ağırlık, konum ve renk. Her ekranda tek birincil eylem.

  • Kontrast

    Neyin görüleceği. WCAG e göre normal metin için en az 4.5 e 1.

  • Boşluk

    Neyin neyle ilişkili olduğu. Etiket, sonraki alandan çok kendi alanına yakın durur.

  • Tutarlılık

    Bir şey her ekranda aynı görünür ki kullanıcı onu iki kez öğrenmesin.

Dördünü de sağlamak sayfanın işlediğini garanti etmez. Düğmenin üstündeki kelimelerin de doğru olması gerekir ve bu dört ilke kelimeler hakkında hiçbir şey söylemez.

Son kontrol: Bu dersteki bilgiler ve araç adları bu tarihte kaynaklarıyla yeniden doğrulanır.

Bir kullanıcı arayüzü aslında ne işe yarar?

Tek bir iş: bir sonraki adımı apaçık kılmak. Kullanıcı arayüzü, kişinin gördüğü ve dokunduğu katmandır; yani düğmeler, formlar, menü, renkler ve boşluklar. Biri ekranınızın başında durup şimdi ne yapayım diye soruyorsa, ne kadar güzel olursa olsun arayüz başarısız olmuştur.

Bu işi dört şey yapar, gerisi ayrıntıdır. Hiyerarşi gözün ilk nereye düşeceğini söyler. Kontrast neyin görüleceğini söyler. Boşluk neyin neyle ilişkili olduğunu söyler. Tutarlılık ise bir şeyin her ekranda aynı görünmesi gerektiğini söyler ki kullanıcı onu iki kez öğrenmesin.

İlk üçü ölçülebilir ve onları zevkten ayıran şey budur. Kontrast bir sayıdır. Boşluk bir sayıdır. Dokunulması gereken şeyin boyutu da bir sayıdır. Tutarlılığın sayısı yoktur ama kontrolü en kolay olandır: iki ekranı yan yana koyun ve birincil düğmenin ikisinde de aynı olup olmadığına bakın.

Jakob Nielsen 1994'te etkileşim tasarımı için hâlâ referans olan on genel ilke yazdı; dördüncüsü tam olarak budur: tutarlılık ve standartlar. O listeyi bir kez okuyun. Bugün tasarım toplantılarında tekrarlanan tartışmaların çoğu otuz yıl önce orada yazılmıştı.

Yaratıcılık ve tutarlılık, hangi sayfanın hangisini istediği

İkisi de kötü değil. Hata, birini diğerini isteyen sayfaya koymaktır.

Yaratıcılığın yeri

  • Özgün fotoğraf ve illüstrasyon
  • Yazının tonu ve bölüm adları
  • Hakkımızda sayfası ve portfolyo
  • Bir işi bitirmek için kimsenin ihtiyaç duymadığı ayrıntılar

Tutarlılığın yeri

  • Birincil düğme, her ekranda aynı
  • Formlar, sepet ve ödeme yolu
  • Menü ve aramanın alışıldık yeri
  • Hata mesajları ve yükleme durumları

Bu ayrım, üzerinde yapılacak bir işi olan siteler içindir. Bir sergi işi ya da görsel portfolyo için denklem değişir ve tutarlılık birinciliği kaybeder.

Göz ilk nereye düşer?

Karar verdiyseniz, karar verdiğiniz yere. Hiyerarşi tam olarak budur: boyut, ağırlık, konum ve renkle neyin önce, neyin sonra görüleceğini siz seçersiniz. Dört aracınız var ve dördünü birden kullanmanız gerekmez; genelde ikisi yeter, dördünü tek bir öğeye yüklemek onu öne çıkarmaz, bağırtır.

En çok etki eden ve en az uygulanan kural: her ekranda tek bir birincil eylem. En güçlü olan tek bir düğme, kalanlar daha düz ve daha sessiz. Eşit ağırlıkta üç düğme yan yana durduğunda hiçbiri birincil değildir ve kullanıcı tek başına karar vermek zorunda kalır; o birkaç saniyelik duraklama satış sayfasında paraya mal olur.

Yazı boyutu da hiyerarşidir. Sayfa başlığı, bölüm başlığı ve gövde metni birbirine yakın üç boyuttaysa göz sınırları bulamaz. Aralarında hissedilir bir fark bırakın ve site genelinde aynı ölçeğe bağlı kalın. Bu tek karar, bir tasarım sisteminin yaptığının yarısını yapar.

Son araç boşluktur. Bir öğenin çevresindeki boş alan, ona hiçbir şey eklemeden onu daha önemli gösterir. Yeni başlayanlar genelde burada yanılır: boş alan onlara israf gibi göründüğü için sayfayı doldururlar. İsraf değildir; göze nerede duracağını söyleyen şeydir.

Kontrast ve boşluk: en çok şikâyeti üreten ikisi

Kontrastın bir sayısı var ve bu tartışmayı bitirir. WCAG standardı, metin ile arka planı arasındaki kontrast oranının en az 4.5 e 1 olması gerektiğini, büyük metin için 3 e 1 in yeterli olduğunu söyler. Bir tasarım portföyünde zarif duran beyaz üstüne açık gri genelde bu sayıyı geçmez ve ucuz bir ekranda ya da güneş altında hiç okunmaz.

Boyutun da bir sayısı var. Aynı standarttaki başka bir ölçüt, işaretçi hedeflerinin çevresinde yeterli boşluk yoksa en az 24 çarpı 24 CSS piksel olmasını söyler. Altbilgideki sosyal medya simgeleri ve bir açılır pencerenin kapatma düğmesi, bunun her zaman çuvalladığı iki yerdir.

Boşluğun ise standart bir sayısı yok; kuralı var. Göz, birbirine en yakın duranı bir grup olarak görür; bu yüzden bir etiketten kendi alanına olan mesafe, o alandan sonrakine olan mesafeden küçük olmalıdır. Tersini yaparsanız formunuz, her etiket altındaki alana aitmiş gibi görünür ve kullanıcı anlayana kadar bir alanı yanlış doldurur.

Çok vakit kazandıran pratik bir kural: her durum için ayrı bir boşluk seçmek yerine küçük bir ölçek seçin ve yalnızca onu kullanın. Dört beş sayı yeter. Bütün boşluklar tek bir ölçekten geldiğinde sayfa, kimse nedenini söyleyemeden derli toplu görünür; gelmediğinde ise kimse nedenini söyleyemeden dağınık görünür.

Farsça: sağdan sola, rakamlar ve cümle ortasındaki Latin metni

Sağdan sola gitmek, yalnızca metni hizalamak değil, tüm yerleşimi aynalamaktır. Menü, ok simgeleri, ilerleme çubuğu, onay ve iptal düğmelerinin sırası, hepsi dönmelidir. Bunun yolu da sağdan sola için ikinci bir CSS dosyası yazmak değildir: mantıksal özellikleri kullanın. margin-left yerine margin-inline-start, padding-right yerine padding-inline-end ve right yerine text-align: start. Tarayıcı yönü html etiketindeki dir özniteliğinden okur, gerisi otomatiktir.

Rakamlar Farsçanın ayrıştığı ikinci yerdir. Farsça rakamlar kendi karakter kümesidir (U+06F0 ile U+06F9 arası) ve Farsça metinde doğru olanlar bunlardır, ama iki şeye dikkat gerekir. Birincisi yazı tipinin bunları gerçekten içermesi; içermezse tarayıcı başka bir yazı tipinden ödünç alır ve rakamların biçimi ile yüksekliği cümlenin geri kalanından birden farklılaşır. İkincisi ve daha önemlisi, hiçbir standart doğrulayıcı onları rakam olarak tanımaz.

Bu ikincisi gerçek bir tuzaktır ve kendini formlarda gösterir. JavaScript'te \d deseni yalnızca 0 ile 9 arasındaki Latin rakamlarını eşler, PHP'de [0-9] da aynısını yapar. Yani bir kullanıcı telefon numarasını Farsça klavyeyle yazar ve siz onu replace(/\D/g, "") ile temizlerseniz, dize tamamen boş çıkar ve form numaranın geçersiz olduğunu söyler; oysa kullanıcı gayet doğru bir numara girmiştir. Çözüm tek satır: doğrulamadan önce Farsça ve Arapça rakamları Latin rakamlara çevirin. Farsça bir arayüzün sayısal girdi aldığı her yerde bu dönüşüm ilk yapılan şey olmalıdır.

Üçüncüsü, Farsça bir cümlenin içindeki Latin metin. Sağdan sola bir cümlenin içinde duran bir marka adı, dosya adı ya da adres, noktasını veya parantezlerini yanlış tarafta gösterebilir. Latin bir parçayı <span dir="ltr"> içine alın, tarayıcı sınırlarını doğru saptasın. Tek bir kelime için genelde gerekmez; tam bir adres ya da bir komut için gerekir.

Yalnızca Farsça bir arayüzde bozulan şeyler

Farsça arayüz kontrol listesisağdan sola

Bunları kontrol edin

  • Sayısal girdiler doğrulamadan önce Farsça rakamları çeviriyor
  • Yazı tipi Farsça rakamları gerçekten içeriyor
  • Ok simgeleri ve ilerleme çubuğu da aynalanmış
  • Latin adresler ve komutlar dir ltr li bir span içinde
  • Onay ve iptal sırası sayfa yönüyle okunuyor

Bunları yapmayın

  • Yalnızca sağdan sola için ikinci bir CSS dosyası yazmak
  • Yerleşimde margin-left ve padding-right kullanmak
  • Tek bir tabloda Latin ve Farsça rakamları karıştırmak
  • Farsça yazıyı Latin yazının boyutuna küçültmek

Bunların hiçbirini otomatik bir araç bulmaz. Sayfayı Farsça okuyan birine verin ve bir form doldurmasını isteyin.

Satış amaçlı bir sayfada tutarlılık neden yaratıcılığı yener?

Burada bir tavır alıyoruz, çünkü tasarım toplantılarında sevilen bir görüş değil: birinin bir şey satın alması ya da bir form doldurması beklenen bir sayfada yaratıcılık masraf, tutarlılık gelirdir. Kullanıcı arayüzün tadını çıkarmaya değil, bir işi bitirmeye geldi. Beklenmedik biçimdeki her öğe fazladan bir an düşünmeyi ister ve o an sizin payınızdan gider.

Pratikte bu şu demek: birincil düğme her ekranda tek renk ve tek biçim. Bağlantılar bağlantıya benzer. Formlar tek bir yerleşimi paylaşır. Simgeler tek bir aileden gelir. Hepsinden önemlisi, kullanıcının başka sitelerden zaten bildiği öğeleri yeniden tasarlamayın: sepet sepete benzer, arama alanı arama alanına benzer. Nielsen'in dördüncü ilkesi tam olarak budur.

Peki yaratıcılığın yeri neresi? Kimliği kuran ama işi kesmeyen şeylerde: fotoğraf, yazının tonu, illüstrasyon, hakkımızda sayfası, kimsenin bir işi bitirmek için ihtiyaç duymadığı küçük ayrıntılar. Bir reklam ajansının ana sayfası tuhaf olabilir; ödeme formu olamaz.

Bu kararın daha az konuşulan bir yan etkisi: biçimler az ve yazılı olduğunda kod üretme araçlarının çıktısı da denetlenebilir hale gelir. Düğme, yarıçap on beş deyin; herkes ve her araç aynı şeyi üretir. Söylemeden bırakın; her biri kendininkini üretir ve altı ay sonra elinizde beş çeşit düğmesi olan ve kimsenin nedenini hatırlamadığı bir site kalır.

Yapay zekayla hızlı yol

Çok kipli modellerin gerçekten iyi olduğu ve çoğu kişinin hiç denemediği bir iş var: ekran görüntüsü eleştirisi. Ona ekranınızın bir resmini verin ve görüş değil, dikkatinin sayfada hangi sırayla ilerlediğini isteyin. Yanıt genelde sizin amaçladığınız sıradan farklıdır ve o fark sizin hiyerarşi raporunuzdur. Bu iş yargı ister; o yüzden ucuz bir model değil güçlü bir model koyun. Güncel tercihimiz <a class="text-link" href="/tr/ai/">yapay zeka bölümünde</a>.

  1. Ekranın kırpılmış değil, tam boy bir görüntüsünü alın. Model göremediğine hüküm vermez ve kırpmanın kendisi yanıtı yönlendirir.
  2. Bir şey sormadan önce, gözün hangi sırayla ilerlemesini beklediğinizi kâğıda yazın. Önce modelin yanıtını görürseniz artık dürüstçe karşılaştıramazsınız.
  3. Aşağıdaki tarifi çalıştırın. Sıfat değil, bir sıra vermeye zorlayacak biçimde sorun.
  4. Söylediklerinden ikisini gözle değil araçla kontrol edin: kontrast oranlarını bir kontrast denetleyiciyle, düğme boyutlarını tarayıcı denetleyicisiyle. Model bir sayıdan söz ediyorsa o sayıyı kendiniz ölçün.
  5. Yalnızca tek bir şeyi değiştirin ve yeniden ekran görüntüsü alın. Aynı anda beşini değiştirirseniz hangisinin işe yaradığını bilemezsiniz.

Kopyalamaya hazır şablon

Bu ekran görüntüsü bir {sayfa türü: açılış / ürün / form} sayfasıdır. Kullanıcının tamamlaması gereken görev: {hedef}.

Şu sırayla yanıtla ve sıfatlardan kaçın:
1) Dikkatinin gittiği öğeleri, gidiş sırasıyla listele. En fazla altı.
2) Sayfanın birincil eyleminin hangi öğe olduğunu düşündüğünü ve bunu hangi işaretten çıkardığını söyle.
3) Eşit ağırlıkta iki öğenin yan yana durup birbiriyle yarıştığı her yeri adlandır.
4) Boşlukların yanlış gruplama ima ettiği her yeri adlandır.
5) Kontrastın yetersiz olduğundan şüphelendiğin her yerde yalnızca nerede ölçeceğimi söyle. Sayı uydurma.

Güzellik, zevk ya da marka rengi hakkında hiçbir görüş bildirme.

Çıktıya güvenmeden önce: Model ölçmediğini bilmez. Sıkıştırılmış bir görüntüden kontrast oranı hesaplamaz, klavye odak sırasını görmez ve bir düğmeye başparmakla basılıp basılamayacağını bilmez. Yani bu tarifin çıktısı bir rapor değil, nereye bakılacağının listesidir. Son üç maddesini bir araçla ve bir insanla kontrol edin.

Bu işte yapay zeka

Arayüz tasarımında yapay zeka iki işte gerçekten yararlı, birinde tehlikelidir. Yararlı: yukarıda anlatılan ekran görüntüsü eleştirisi ve bir bileşenin unutulan durumlarını üretmek; yani ilk taslakta kimsenin çizmediği boş durum, yükleniyor durumu ve hata durumu. Tehlikeli: renk ve genel yerleşim seçimi, çünkü çıktısı her yere benziyor.

Gerçekten işe yarayan araçlar

  • Claude Ekran görüntüsü eleştirisinde ve bir bileşenin unutulan durumlarını yazmakta iyi. İran, Anthropic'in desteklenen ülkeler listelerinin hiçbirinde yok; bunu Anthropic'in kendi sayfasında okuduk.
  • Gemini Görselleri iyi okur ve Farsçayı da anladığı için Farsça bir ekranı incelemeye uygundur. Google'ın kendi sayfası Gemini web uygulamasının 230'dan fazla ülke ve bölgede çalıştığını söylüyor ve İran o listede yok.
  • ChatGPT En yaygın seçim ve ekran görüntüsü eleştirisi için kabul edilebilir. Erişimi ya da fiyatı hakkında burada bir iddiada bulunmuyoruz: OpenAI'nin desteklenen ülkeler sayfası sunucumuza 403 dönüyor ve arkasında bir şey olmayan iddia yazmayız.

Nerede geri teper

İki risk var ve ilki göründüğünden ciddi. Modeller aynı birkaç yılın çokça tekrarlanmış tasarımları üzerinde eğitildi; bir kart ya da açılış sayfası istediğinizde çıktı, eğitimli bir gözün anında tanıdığı bir şey oluyor. Bu bizim görüşümüz, bilimsel bir iddia değil; ama yarısı tam da bu sitede görülebilir: kendi yazım kurallarımızda iki deseni, üretilmiş tasarımın parmak izi olarak adıyla yasakladık; bir kartın bir kenarı boyunca uzanan renkli şerit ve 99 piksellik kapsül. Birincisi için her seferinde çalıştırılan bir bekçi grep tutuyoruz. Sorun, hakkında kural yazmak zorunda kalacağımız kadar gerçekti.
İkinci risk daha teknik: model ölçmediğine hüküm verir ve bunu güvenle söyler. Bir kontrast oranı resimden hesaplanamaz ve W3C'nin kendi Easy Checks rehberi otomatik incelemenin insan incelemesinin yerini tutmadığını söyler. Konumumuz: modelden nereye bakacağınızı söylemesini isteyin, sizin adınıza hüküm vermesini değil. Her aracın İran'dan nasıl ödenebileceği için satın alma rehberine bakın.

Kaynaklar: W3C: Understanding SC 1.4.3 Contrast (Minimum) W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

Bu tavsiyenin sınırı

Bu dört ilke biçimden söz eder ve kelimeler hakkında hiçbir şey söylemez. Dördünü de sağlayan bir sayfa, düğmesinde devam yazıyorsa ve kullanıcı bundan sonra ne olacağını bilmiyorsa yine de başarısız olur. İkincisi, ilkeler gerçek bir insanın yerini tutmaz; bir hipotez üretirler ve onu sınayan şey kullanıcı deneyimidir. Üçüncüsü, bir sanat projesi ya da görsel portfolyo için tutarlılığı yaratıcılığın önüne koyma tavsiyesi düpedüz yanlıştır; orada engel olunacak bir iş zaten yoktur.

Kendi işimizden

Tutarlılık sayılabilir ve biz onu kendi sitemizde saydık. rgb.ir temasının main.css dosyasında, sitedeki her biçimin köşe yarıçapını dört sayıya indiren kısa bir blok var: normal düğme on beş, büyük düğme on yedi, çip on iki ve durum etiketi dokuz. Site bütünüyle bu dört sayıyı kullanıyor. Yanı sıra, otuz bir sayfa şablonunun tamamı ortak tek bir başlık bileşenini çağırıyor ve hiçbir sayfa kendi başlığını yeniden biçimlendirmiyor; barındırma sayfasıyla SEO sayfasının içerikleri hiç örtüşmediği hâlde tek bir aileden görünmelerinin sebebi bu. Ve başka yerde pek görmeyeceğiniz bir karar: bir kartın bir kenarı boyunca uzanan renkli şerit bu sitenin kurallarında yasak, çünkü onu üretilmiş tasarımın işareti sayıyoruz; bu yüzden izin verilen durumları sayan bir bekçi grep tutuyoruz ve bunun üstündeki her sayı birinin yeni bir şerit eklediği anlamına geliyor. Tutarlılık burada zevk değil; yazılı ve denetleniyor.

Gerçek devam soruları

UI ile UX arasındaki fark nedir?

Kullanıcı arayüzü, gördüğünüz ve dokunduğunuz katmandır. Kullanıcı deneyimi ise kişinin adınızı duymasından geldiği işi bitirmesine kadar kat ettiği yolun tamamıdır. Güzel bir arayüz kötü bir deneyimin parçası olabilir; örneğin bir adım gereksizse.

Farsça bir site için hangi yazı tipini seçmeliyim?

Tek bir en iyisi yoktur ve aksini söyleyen kendi zevkini satıyordur. Asıl önemli olan: yazı tipi Farsça rakamları kendisi içermeli, hiyerarşi mümkün olsun diye en az üç ağırlığı olmalı, web lisansı taşımalı ve dosya küçülsün diye altkümelenmeli. Bu dördü sağlanıyorsa birkaç iyi yazı tipi arasında seçim zevk meselesidir.

Bir sitenin kaç renge ihtiyacı var?

Sandığınızdan az. Metin için bir, arka planlar ve yüzeyler için bir iki, birincil eylem için bir vurgu ve başarı ile hata için iki renk. Renklerin sorunu sayıları değil; çoğaldıklarında hiçbirinin artık belirli bir anlamı kalmaması ve vurgu renginin görünmez olmasıdır.

Öğrenmeye devam et