Deyimsel tasarımı geri getirelim

 (essays.johnloeber.com)
1 puan yazan GN⁺ 17 일 전 | 1 yorum | WhatsApp'ta paylaş
  • Kullanıcı tarafından anında anlaşılabilen tasarım deyimleri, öğrenme yükünü azaltır ve tutarlı etkileşimleri mümkün kılar
  • Geçmişte masaüstü yazılım çağında, işletim sistemi ve kılavuzlar sayesinde menü yapıları ve kısayollar gibi arayüzler standartlaşmıştı
  • Buna karşılık tarayıcı tabanlı yazılım çağında, framework'lerin ve özel implementasyonların yaygınlaşmasıyla arayüzlerdeki tutarlılık çöktü
  • Apple ve Substack, sınırlı özelleştirme ve birleşik tasarım sistemleriyle modern deyimlerin başarılı örneklerini gösteriyor
  • Ürün tasarımcıları mevcut deyimleri izlemeli, açıklık ve tutarlılığı önceliklendirerek web genelinde standartlaşmış bir kullanıcı deneyimine yönelmelidir

Tasarım deyimleri

  • Onay kutusu, kullanıcının ayrı bir öğrenme süreci olmadan hemen anlayabildiği tipik bir tasarım deyimi olarak sunuluyor
    • Oturumu açık tutup tutmama sorusu farklı giriş biçimleriyle sorulabilir, ancak pratikte her zaman onay kutusu kullanılır
    • Bu, hem kullanıcılar hem de geliştiriciler için tanıdık bir standart etkileşim kalıbı olarak işler

Homojen arayüzler

  • Arayüz, kullanıcının sistemle etkileşime girdiği araçtır ve ne kadar az düşünmeyi gerektirirse o kadar iyi kabul edilir
    • Örneğin kopyalama işlevi için Command+C kısayolu her yerde aynı şekilde çalışmalıdır
  • Ancak günümüzün web yazılımı ortamında arayüz tutarlılığı ortadan kalktı
    • Tarih seçimi, kart numarası girişi gibi temel işlevler bile her sitede farklı uygulanıyor
    • Kısayollar ve etkileşim biçimleri uygulamadan uygulamaya değiştiği için kullanıcı her seferinde “nerede neye tıklamalıyım?” sorusunu yeniden öğrenmek zorunda kalıyor

Masaüstü yazılım çağı

  • Windows 95~7 dönemi masaüstü yazılımları, yüksek arayüz tutarlılığını koruyordu
    • “File, Edit, View” menü yapısı tüm programlarda aynı şekilde bulunuyordu
    • Menü öğelerindeki altı çizili harfler klavye kısayollarını ifade ediyor, ALT+F, N gibi kombinasyonlarla kullanılabiliyordu
    • Alttaki durum çubuğu (status bar) mevcut durumu (sayfa, kelime sayısı, mod vb.) açıkça gösteriyordu
    • Metin tabanlı menüler merkezdeydi; ikonlar yalnızca anlamları net olduğunda kullanılıyordu
  • Bu deyimler yalnızca Microsoft Word'de değil, tüm Windows ekosisteminde tutarlıydı
    • Windows XP'nin oturumu kapatma ekranında bile tüm düğmeler görsel olarak düğme olduklarını açıkça belli ediyor ve kısayollar gösteriliyordu
  • Bu tutarlılık, işletim sistemi ile GUI kütüphanelerinin kısıtları sayesinde mümkündü; Microsoft da yüzlerce sayfalık tasarım kılavuzları dağıtarak geliştiricileri bunlara uymaya yönlendiriyordu

Tarayıcı yazılımı çağı

  • Günümüzün web uygulaması çağı, heterojen arayüzlerin dönemi olarak tasvir ediliyor
    • Figma ve Linear gibi başarılı web uygulamalarında bile ortak ikonlar veya kısayollar yok
    • Her uygulama kendi içinde iyi tasarlanmış olsa da birbirinden farklı etkileşim kalıplarına sahip
    • Aynı şirket içinde bile Gmail, GSuite ve Google Docs deneyimleri birbirinden farklı
    • Sonuç olarak kullanıcı, üretken akış (flow) yerine kontrolün nerede olduğunu aramakla zaman harcıyor

  • Mobil geçişin etkisi

    • Dokunmatik ekranların ortaya çıkışıyla, fare ve klavye merkezli tasarım kalıpları yeniden icat edildi
    • Mobil ve masaüstünü aynı anda destekleme gerekliliği, ara formda kusurlu UI'ların yayılmasına yol açtı
    • Örnek: mobil için tasarlanan hamburger menünün masaüstünde de aynen kullanılması
    • Modüler bileşen yeniden kullanım kültürü, hatalı kalıpları kopyalayarak kalite düşüşüne neden oldu
    • 10 yılı aşkın birikimin sonucu olarak UI/UX kalitesinde kuşaksal bir aşınma meydana geldi

  • HTML'in ötesinde deyim eksikliği

    • İlk web döneminde mavi altı çizili bağlantılar gibi net deyimler vardı; bugün ise stiller siteden siteye değişiyor
    • HTML/CSS standartları katı olsa da pratikte çoğu sistem React·TypeScript tabanlı build sistemleri kullanıyor
    • Sonuç olarak standart HTML öğeleri yerine özel implementasyonlar çoğalıyor ve bu durum erişilebilirlik sorunlarına da yol açıyor
    • Örnek: <a> yerine onclick eklenmiş bir <span> kullanılması, screen reader işlevlerini bozuyor
    • Figma gibi, WebAssembly tabanlı olup HTML'i tamamen geride bırakan uygulamalar da var
    • Tarayıcının geri butonu, kısayollar gibi temel işlevleri göz ardı ediliyor ve yeni bir insan-bilgisayar etkileşimi paradigması yeniden kuruluyor
    • Frontend geliştirme hız ve olanaklar etrafında ilerledikçe, tutarlı deyimlerin yerleşmesi zorlaşıyor
    • Çok sayıda framework ve etkileşim biçimi bulunduğundan tek bir standardın yerleşmesi yapısal olarak zor

Deyimsel tasarımın başarılı örnekleri

  • Apple, günümüzde güçlü tasarım deyimlerini koruyan başlıca örneklerden biri olarak gösteriliyor
    • Fontlar, düğmeler, renkler ve genel tasarım sistemi birleşik; bu da iOS genelinde tutarlı bir etkileşim deneyimi sunuyor
    • Bu tutarlılık, “it just works” türü bir güven duygusu oluşturuyor
  • Substack de sınırlı özelleştirme ve önceden belirlenmiş estetik varsayılanlar sayesinde istikrarlı bir kullanıcı deneyimi sunuyor
    • Apple ve Substack'in tasarım ilkeleri, başarıları sayesinde sektör standardına yayılıyor ve sonunda yeni deyimler haline geliyor

Ürün tasarımcılarının izlemesi gereken ilkeler

  • Ürün geliştiriciler için, mümkün olduğunca mevcut tasarım deyimlerini takip etmek kullanılabilirliği ve uyumluluğu artırmanın yolu olarak sunuluyor
    • HTML/CSS'nin temel deyimlerine uyun: bağlantılar altı çizili, renkli, işaretçi imleçli ve <a> etiketiyle uygulanmalı
    • Temel HTML öğelerini JavaScript ile yeniden implemente etmeyin; örneğin React Button yerine <button> kullanın
    • Tarayıcı deyimlerine uyun: geri butonu çalışmalı, URL kopyalandığında aynı arayüze erişilebilmeli, CTRL+tıklama yeni sekmede açmalı
    • Genel deyimlerden sapılacaksa, en azından kurum içinde tutarlı kurallar korunmalı
    • Önce metin, minimum ikon; ikonlar yalnızca evrensel olarak anlaşılabildiğinde kullanılmalı
    • Görsel unsurlarda açıklık, estetik güzelliğin önüne geçmeli
    • Karar vermek zor olduğunda iyi web sitesi örneklerine ve geçmiş arayüz tasarımı kitaplarına başvurulmalı
  • Nihai olarak, web üzerindeki tüm tarih seçicilerin veya kart giriş formlarının aynı şekilde çalıştığı bir gelecek hedefleniyor; on yıllar süren tekrar ve iyileştirme sonunda en iyi deyimlerde yakınsayan bir web ortamı amaçlanıyor

İlgili okumalar

1 yorum

 
GN⁺ 17 일 전
Hacker News görüşleri

  • Bazı uygulamalarda Enter gönderme, Ctrl+Enter satır sonu ekleme anlamına geliyor (ör. Slack); başka yerlerde ise tam tersi geçerli (ör. GitHub)
    Bu tutarsızlık, kullanıcı açısından oldukça kafa karıştırıcı. “İdiyomatik tasarımı geri getirelim” deniyor ama asıl sorun, ortada ortak bir idiomun pek olmaması

    • Eskiden Return ve Enter farklı tuşlardı. Return satır sonu, Enter ise gönderme içindi.
      Şimdi bu tuşlar tek bir tuşta birleşti; genel olarak çok satırlı giriş alanlarında Enter satır sonu, Ctrl+Enter gönderme oluyor.
      Buna karşılık sohbet uygulamalarında kısa mesaj girişi daha yaygın olduğu için bunun tersi tercih ediliyor. İyi uygulamalar bunu ayarlardan değiştirmenize izin veriyor
    • Teams’te iki mod var. Varsayılan olarak Enter gönderiyor, Shift+Enter satır sonu ekliyor; ancak biçimlendirme araçlarını açınca tam tersine dönüyor.
      Hangi kısayolun satır sonu olduğu gösteriliyor ama yine de kafa karıştırıcı
    • Slack daha da karmaşık. Markdown açıkken Shift+Enter satır sonu ekliyor; ama kod bloklarının (```) içinde Enter satır sonu, Shift+Enter ise gönderme yapıyor.
      Niyet anlaşılır ama kullanılabilirlik berbat
    • İdeal çözüm, Ctrl+Enter’ın her zaman gönderme, Shift+Enter’ın her zaman satır sonu olması; Enter’ın ise bağlama göre varsayılan davranışı izlemesi olabilir
    • Ben de Shift+Enter’ın satır sonu olduğunu düşünüyordum; bu da sorunun tam olarak bu parçalanmış UX olduğunu gösteriyor

  • Günümüz yazılımları artık eskisi gibi özenli tasarımcılar tarafından yapılmıyor.
    Bunun yerine aceleyle terfi ettirilmiş PM’ler ya da ürün tarafı yön veriyor; hatta gelir için dark pattern kullanımının teşvik edildiği bir ortam var

    • Bir mobil mühendisi olarak, paydaşlara “bunu sadece fikirdeki gibi yapamayız” dediğimde sık sık boş bakışlarla karşılaşıyorum.
      UX tutarlılığı ile bilgi mimarisinin (IA) önemini vurgulamak gerekiyor. Tasarımcıların da problem çözücü olduğunu unutmamak gerek
    • Ama bu eleştiri fazla parçalı. Gerçekte çevrimiçi basit bir form yapmak bile cehennem gibi.
      Örneğin kredi kartı formu hazırlarken kopyala/yapıştır izni verilip verilmeyeceği, eski tarayıcı desteği, erişilebilirlik ve güvenlik dengesi gibi sayısız değişken var.
      Bu arada Steve Yegge’nin platform yazısı da bu karmaşıklığı iyi anlatıyor
    • 2010’larda deneyimli UX tasarımcıları sektörden çekilirken, baskı ya da grafik kökenli uzman olmayan tasarımcılar büyük ölçüde doldurdu ve kalite düştü
    • Elbette kötü teşvikler ve sıkışık takvimler de var ama bunu yalnızca beceriksizlik ya da kötü niyetle açıklamak zor. Sistemin kendisi değişti
    • Bugün bile PM’lerin tüm mimariyi ve sürüm yol haritasını bizzat tasarlamaya çalıştığını görünce, bu sözün yanlış olmadığını hissediyorum

  • Sistem çerçeveleri, idiyomatik UI üretmenin temeliydi.
    Win32, AppKit ve UIKit en ince ayrıntılara kadar ilgileniyor, böylece geliştiriciler doğal olarak tutarlı bir UX izliyordu.
    Web’de ise böyle bir temel yok; her şeyi baştan uygulamak gerekiyor ve sonuçta yarım yamalak tamamlanmış UI’lar ortaya çıkıyor

    • Ama yazı web’deki tutarsızlığın nedenini yanlış teşhis etmiş. “Masaüstü çağı” aslında fiilen Windows çağıydı ve Win32 varsayılan olduğu için herkes onu izliyordu.
      Web en başından beri belge merkezliydi, bu yüzden standart bir yaklaşım yoktu; daha sonra Bootstrap gibi şeylerle geçici standartlar oluştu
    • HTML ve CSS vardı ama bugünlerde WebAssembly gibi araçlarla bunların etrafından dolaşılıyor.
      Oysa tarih seçici ve kart girişi gibi şeylerde temel HTML kontrolleri kullanılmalı.
      Böylece tarayıcı, işletim sistemi düzeyindeki güvenlik ve kolaylıkları sunabilir (ör. Safari’de Apple Wallet, Android’de Google Pay entegrasyonu)
    • İşletim sisteminin tutarlı davranışlarına alışkın geliştiriciler doğal olarak o ortamı taklit etmeye çalışır.
      Ama web ve mobil tamamen farklı kutulanmış ortamlar olduğu için bu tutarlılık bozuldu.
      Örneğin masaüstündeki sağ tıklamayı mobilde uzun basma ile birleştirmek için fırsat vardı ama bu tutarlı biçimde uygulanmadı
    • Web’in temel sorunu hâlâ belge merkezli paradigma içinde kalması.
      Uygulama UI’ı yapmak için belge UI’ının üstüne katman eklemek gerekiyor ve bu da çakışma yaratıyor.
      Tarayıcılar bunu hafifletti ama kökten bir iyileşme değil
    • Bu arada AppKit’te de düğme yüksekliğini değiştirmek mümkün. Sadece pek açık değil

  • Tarih seçici gerçekten bir UX kâbusu.
    Kullanıcı tarihini elle girmek isteyince buna izin vermeyip zorla tıklatmaya çalışan çok yer var.
    Sadece hatalı girişleri yakalamak yeterliyken gereksiz yere kullanımı zorlaştırıyorlar

    • Doğum tarihi girmek için onlarca yıllık takvimi geri geri çevirmek, insana hayatın boşunalığını hissettiriyor
    • Mobildeki saat seçiciler de birbirinden farklı. Bazen bir kaydırmada 12:00’dan 11:50’ye gidiyor, bazen gitmiyor.
      Analog saat tipi seçiciler daha sezgisel; keşke bunlar standart olsa
    • Tarih biçimi de sorunlu. 03/04/2026’nın 3 Nisan mı 4 Mart mı olduğu belirsiz.
      Uluslararası kullanıcılar için YYYY-MM-DD biçimi daha güvenli
    • Doğum tarihi girerken, gelecekteki planlamalar için kullanılan aynı tarih seçiciyi kullanan siteler en kötüsü.
      Sizi 50 yıl geriye kaydırmaya zorluyor ve sadece yaşınızı daha çok hissettiriyor
    • Her doğum tarihi girişinde yaşı kaydırarak hissettirmek resmen işkence gibi

  • Son dönemde UX kalitesi düşüşü çok belirgin; özellikle banka sitelerinde.
    Kaydırma çubuklarının gizlenmesi, boşa harcanan boşluklar, düz düğmeler, kafa karıştırıcı ikonlar derken eski masaüstü UI’larından çok daha kullanışsız bir hale geldi

    • Kaydırma çubuklarını gizlemek gerçekten anlaşılmaz. Muhtemelen sadece “güzel görünsün” diye yapılan estetik bir tercih
    • Material UI’ın birçok sektöre zarar verdiğini düşünüyorum.
      GCP ve Google araçları gereksiz yere karmaşıklaştı; çerçevesiz giriş alanları gibi tercihlerle UX’i bozdu.
      Neyse ki bugünlerde bu tarz artık eski moda görülüyor

  • Eski Mac’lerden gelen kavramlardan biri şuydu: bir düğme metninin sonunda üç nokta (…) varsa, bu ek giriş gerektiği anlamına gelirdi.
    Buna karşılık üç nokta olmayan düğmeler tıklanır tıklanmaz işlemi tamamlar

  • “İkonlardan çok kelimeleri tercih et” sözüne katılıyorum.
    Çoğu insan için kelime tanıma hızı, ikon tanımaktan daha yüksektir

    • Elbette gerçek nesneleri betimleyen ikonlar sorun değil ama bugün çok fazla soyut ve çizgisel ikon var.
      Metin açıklaması olmayınca, ne işe yaradığını anlamak için adeta Rus ruleti oynar gibi tıklamak gerekiyor
    • HN’deki “unvote/undown” gibi, aynı önek yüzünden karışan örnekler de var. Her tıklamada tekrar kontrol etme ihtiyacı doğuyor
    • İkon küçükse ya da konumu sık değişiyorsa kelimeler daha iyi olabilir; ama sabit bir ortamda ikonlar daha hızlı da olabilir

  • Kısa süre önce CSS diye yeni bir teknoloji keşfettim; yerleşimi bildirime dayalı şekilde tanımlamaya ve DOM tabanlı olarak hiyerarşik stiller uygulamaya yarıyor.
    İstemci ve sunucu yükünü azaltabiliyor, stil sayfalarını paylaşmayı ya da kullanıcıya özel temalar oluşturmayı da kolaylaştırıyor.
    Buna “no-framework” UI paradigması demek istiyorum
    Örnek görsel

    • Denedim ve tam bir kâbustu. Hangi stilin nereye uygulandığını anlamak mümkün değil; DOM yapısı değişince stiller tamamen bozuluyor.
      Üstelik “istemci yükünü en aza indirme” de sadece bir efsane. Pratikte daha yavaş
    • Bu fikri vanilla-js framework ekibine önermek iyi olabilir

  • Kaybettiğimiz ortak işlevlerden bazıları:
    Undo/Redo, yardım (F1), mouseover ipuçları, kısayol özelleştirme, ana menü, dosya/dizin, ESC ile kapatma, sürükle-bırak vb.
    Bir zamanlar yenilikçi olan bu özellikler artık mobil ve web’de neredeyse yok olmuş durumda

  • Sorunların çoğu, görsel tasarımcıların ürün tasarımına geçmesinden kaynaklanıyor.
    Tasarım rollerindeki kafa karışıklığı hâlâ çözülmedi; hatta gerçekte “tasarımcı” gerekmeyen projelere bile fazlasıyla insan sokuluyor