İstanbul UI/UX tasarım ve Figma-to-code

İyi arayüzün ölçüsü: karar yükü

Bir arayüzün başarısı görselliğiyle değil, kullanıcıyı ne kadar az düşündürdüğüyle ölçülür. Her ek seçenek, her ek alan, her ek onay ekranı kullanıcıdan bir karar ister — ve her karar vazgeçme ihtimalini artırır.

Bu ilkenin en somut örneği ürün konfigüratörleridir. Castor Coffee vakasında kişiselleştirme aracı bilinçli olarak dar tutuldu: tek ürün, tam genişlik, az sayıda anlamlı seçim. Amaç kullanıcıya sonsuz özgürlük vermek değil, birkaç tıkla iyi görünen bir sonuca ulaştırmaktı. Seçenek sayısı arttıkça bu tür araçların dönüşümü düşer.

Aynı ilke satın alma ve form akışlarında da geçerli: sormadığınız her alan bir dönüşüm kazancıdır.

Baskı altında çalışan arayüzler

Tasarımın en zor sınavı, sakin bir masada değil baskı altında verilir. Kasada yoğun saatte çalışan bir ekran, mutfakta elleri dolu bir personelin bir buçuk metre uzaktan baktığı bir panel, kuryenin tek eliyle kullandığı bir liste — bunların hiçbiri estetik değil refleks problemi.

Bu tür arayüzlerde geçerli kurallar:

• Dokunuş sayısı ölçüttür. En sık yapılan işlem en az adımda tamamlanmalı; en sık yapılan hata tek dokunuşla geri alınabilmeli.
• Renk okumadan anlaşılan tek sinyaldir. Geciken bir siparişi metinle değil renkle belli etmek gerekir.
• Onay ekranları azaltılır. Onay yalnızca geri alınamayan işlemler için; ürün eklemek için değil.
• Ekran titrememelidir. Kendini tazeleyen bir panelde tüm listeyi yeniden çizmek, personelin ekranı okumayı bırakmasına yol açar — sahada paneli terk ettiren ayrıntı budur.

Sisa Atelier POS vakası ve POS mimarisi notu bu kararları ayrıntısıyla anlatıyor.

Figma-to-code: resim değil sistem

Tasarım dosyası bir resim koleksiyonu olarak teslim edildiğinde, geliştirme aşamasında sürekli tahmin yürütülür: bu boşluk 16 mı 20 mi, bu gri hangi gri, buton basılıyken ne oluyor? Sonuç, tasarımdan yavaş yavaş ayrışan bir ürün olur.

Bunu önleyen şey, dosyanın bir sistem olarak kurulmasıdır:

• Tasarım belirteçleri: renk, tipografi ölçeği ve boşluk değerleri isimlendirilmiş değişkenler olarak tanımlanır; koda birebir aktarılır.
• Bileşenler ve durumlar: her bileşenin normal, üzerine gelme, basılı, devre dışı, yükleniyor ve hata durumları tanımlanır. Eksik durum, geliştiricinin uydurduğu durumdur.
• Boş ve hata ekranları: "hiç kayıt yok" ve "bir şeyler ters gitti" ekranları tasarlanır. Bunlar atlandığında kullanıcı en kırılgan anında tasarlanmamış bir ekranla karşılaşır.
• Kırılma noktaları: mobil, tablet ve masaüstü davranışı belirtilir; "responsive olsun" ifadesi bir tarif değildir.

Erişilebilirlik: sonradan eklenmez

Erişilebilirlik ayrı bir aşama değil, tasarım kararlarının bir parçasıdır. Pratikte en çok fark yaratanlar:

• Kontrast oranı — açık gri üzerine açık gri metin, düşük ışıkta veya güneş altında telefonda okunamaz.
• Dokunma hedefi boyutu — parmakla kullanılacak öğeler yeterince büyük olmalı.
• Klavye ile gezinme — form ve pencerelerde sekme sırası ve odak görünürlüğü çalışmalı.
• Platformun kendi bileşenlerini kullanmak — açılır pencereyi sıfırdan yazmak yerine tarayıcının dialog öğesini kullanmak, klavye ve ekran okuyucu uyumunu ücretsiz getirir. Nest Worldwide vakasında proje detay pencereleri bu şekilde kuruldu.