Etkileşim tasarımı, UI, UX ve görsel tasarım aynı problem değildir.
IxD eylem ve sistem davranışını; UI görünür kontrol katmanını; UX tüm deneyimi; grafik tasarım ise bilgi ve görsel hiyerarşiyi çözer.
Kullanıcı ne yapar, sistem nasıl cevap verir, durum nasıl değişir?
Hangi kontrol, düzen, bileşen ve visual durum kullanılacak?
Research, journey, service ve tüm kullanım deneyimi.
Type, grid, icon, renk, image ve hareket behavior.
Aynı arayüz farklı kullanıcı, ortam ve cihaz koşulunda farklı çözüm gerektirir.
Kullanıcı özellikleri, görev, kullanım sıklığı, ışık, hareket, network, input, gizlilik ve risk düzeyi brief'e girer.
Deneyim, erişilebilirlik need, dil ve cihaz alışkanlığı.
Hangi hedef ne sıklıkta ve hangi hata maliyetiyle yapılıyor?
Güneş, gürültü, hareket, eldiven veya tek el kullanımı.
Ekran boyutu, sensor, input ve performance koşulları.
çevrimdışı, latency ve data cost tasarım davranışını etkiler.
Bankacılık/sağlık/industrial control ile social app aynı risk mantığını taşımaz.
Ekran listesi değil, kullanıcı hedefi ve karar noktaları tasarlanır.
Happy path yanında exception, cancellation, interruption, timeout, permission, empty ve unavailable durum akışları da haritalanır.
Akış feature listesiyle değil kullanıcı hedefiyle başlar.
Her adımın kullanıcıya gerekli olup olmadığı sorgulanır.
Seçenek sayısı, risk ve bilgi yükü dengelenir.
Network, permission, invalid input veya unavailable durum tasarlanır.
Call/app switch/session timeout sonrası hatadan dönüş planlanır.
Cancel, back, undo ve abandon yolları açık olmalıdır.
Her bileşen ve ekranın başlangıç, süreç, sonuç ve hata durumları vardır.
Default, üzerine gelme/odak, pressed, disabled, yükleniyor, başarılı, hata, empty, çevrimdışı ve destructive durum'ler tasarım sisteminin parçasıdır.
Eylem öncesi normal durum.
Keyboard/pointer ile hangi öğenin aktif olduğu anlaşılır.
Input'ın alındığını anlık olarak gösterir.
Sistem eylemi aldığını ve ilerlediğini açıklar.
Sonuç ve sonraki eylem açık olmalıdır.
Sorun kadar düzeltme yolu görünür olmalıdır.
Kullanıcı eylemin alındığını ve sistemin ne yaptığını anlamalıdır.
Visual durum, hareket, haptic, sound ve text geri bildirim birlikte kullanılabilir; kritik durumda yalnız renk veya animation'a güvenilmez.
Tap/click sonucu gecikmeden bir işaret verir.
Uzun işlemde determinate veya indeterminate progress seçilir.
Başarılı sonuç gereksiz modal bombardımanı olmadan anlaşılır olmalıdır.
Dokunsal geri bildirim görsel/sesle birlikte kullanılabilir.
Uyarı veya durum değişiminde yardımcıdır; tek kanal olmamalıdır.
Başarısızlık sonrası bir sonraki yapılabilir adım açıkça gösterilir.
Navigasyon bilgi mimarisi ile kullanıcının zihinsel modelini bağlar.
Global/local gezinme, tabs, back, search, deep link, breadcrumb ve system back davranışları platform ve ürün yapısına göre seçilir.
Kategori ve etiket kullanıcı diliyle sınanır.
Ürünün ana bölgelerine kalıcı erişim sağlar.
Bir bölümün alt içerikleri arasında hareket sağlar.
Önceki durum ile parent hierarchy dönüşü karıştırılmamalıdır.
Kullanıcı doğrudan alt durum'e geldiğinde bağlam korunmalıdır.
Büyük bilgi alanında gezinme'ı tamamlar.
Mobil UI küçültülmüş desktop değildir.
Touch target, thumb reach, virtual keyboard, orientation, notch/güvenli alan, permission, sensor, interrupted use ve network değişkenleri tasarımı etkiler.
Ödeme
Boyut ve boşluk motor doğruluğu destekler.
Sık kullanılan action tek elle erişilebilirlik açısından değerlendirilir.
Form ve CTA keyboard açıkken kullanılabilir kalmalıdır.
Notch, home indicator ve system chrome ile çakışma önlenir.
Camera, location, accelerometer ve biometric permissions bağlam içinde istenir.
Connection loss ve app switching normal durum olarak tasarlanır.
Form tasarımı veri istemek değil, hatasız görev tamamlama sistemidir.
Label, input type, autofill, validation timing, hata message, required/optional, gizlilik ve keyboard type birlikte tasarlanır.
Placeholder tek başına kalıcı label yerine geçmemelidir.
Email, phone, date, number gibi alanlar doğru semantics taşımalıdır.
Standart field semantics tekrar girişi azaltabilir.
Hata ilgili field yakınında ve hatadan dönüş ile gösterilir.
Beklenti form başlangıcından anlaşılmalıdır.
Gereksiz kişisel veri istemek tasarım problemi ve riskidir.
bileşen görsel kutu değil, anatomi + durum + içerik + behavior sözleşmesidir.
Button, input, dialog, list, card veya gezinme bileşen için anatomy, states, variants, erişilebilirlik, içerik rules ve code parity tanımlanır.
bileşen iç parçaları ve zorunlu/opsiyonel öğeler.
Default/odak/pressed/disabled/yükleniyor/hata vb.
Size, emphasis, icon position veya bağlam varyantları kontrollüdür.
Label uzunluğu, ikon kullanımı ve localization sınırları.
Name, role, durum, keyboard ve odak behavior tanımlanır.
Design tasarım varlığı ile üretim bileşen davranışı yakın tutulur.
tasarım sistemi bileşen kütüphanesinden daha büyük yönetişim sistemidir.
Foundation, tasarım belirteçleri, components, patterns, içerik, erişilebilirlik, contribution, sürümleme, release ve deprecation birlikte yönetilir.
Type, renk, boşluk, grid, icon ve hareket ilkeleri.
Semantic design decisions code-friendly değerlere dönüşür.
bileşen kombinasyonları yaygın task çözümlerini tanımlar.
UI dili ve terminology sistemleştirilir.
Kim değiştirir, review eder ve release eder?
Eski bileşen sürümleri geçiş planıyla kaldırılır.
Erişilebilirlik nihai kontrol değil, bileşen ve flow tasarımının temelidir.
Contrast, odak, keyboard, ekran okuyucu name/role/açık-koyu değeri, target size, zoom, reflow, hata identification, captions ve hareket preferences düşünülür.
Odak görünür ve sıralı olmalı.
WCAG 2.2 minimum target-size koşulu bağlama/istisnalara göre değerlendirilir.
⚠ Geçerli bir adres girin.
Hata yalnız renkle gösterilmez.
Keyboard/odak order görsel order ile anlamlı ilişki kurmalıdır.
Icon-only controls anlamlı programatik isim taşımalıdır.
Motor erişilebilirlik için yeterli hit area sağlanır.
Text enlargement ve duyarlı reflow içerik kaybı yaratmamalıdır.
Hata yalnız renk ile gösterilmemeli; metinle tanımlanmalıdır.
Reduced-hareket preference ve flashing riskleri desteklenir.
Prototip nihai UI değil, soruyu test edecek kadar gerçekçi modeldir.
Paper, clickable, coded, sensor/AR veya high-fidelity prototype farklı riskleri test eder. Fidelity araştırma sorusuna göre seçilir.
Bilgi mimarisi ve görev akışı ucuzca test edilir.
gezinme ve screen-durum ilişkileri test edilir.
Performance, real data, keyboard ve platform behavior daha gerçekçi test edilir.
Camera, sensor, haptic veya mekânsal input gerçek donanımda test edilir.
Yüksek fidelity her zaman daha iyi değildir; yanlış soruda pahalıdır.
Prototype gösterir; spec uç durum ve rule'ları ayrıca açıklar.
Tasarımcının kendi arayüzünü kullanabilmesi kullanıcı kanıtı değildir.
Görev, başarılı criteria, participant örneklem, facilitator behavior, observation, hata, severity ve iteration planı önceden tanımlanır.
Katılımcıya çözüm yolunu söylemeden gerçekçi hedef verilir.
Söylenen kadar yapılan, hata ve tereddüt de kaydedilir.
Hedef kullanıcı bağlamı test sorusuna uygun seçilir.
Impact, frequency ve criticality ile bulgular önceliklendirilir.
Düzeltme sonrası kritik flow yeniden test edilir.
Yönlendirici soru ve yardım gerçek problemi gizleyebilir.
Arayüz dili görsel tasarım kadar etkileşim davranışını belirler.
Button label, hata, empty durum, confirmation, permission, gizlilik ve onboarding copy kısa ama bağlama özgü olmalıdır.
‘Tamam’ yerine gerçek eylemi adlandırmak belirsizliği azaltabilir.
Ne oldu + neden mümkünse + nasıl düzeltilecek.
Boşluğun nedenini ve ilk yapılabilir eylemi açıklar.
Sonucun ne olduğunu açıklar; kullanıcıyı gereksiz durdurmaz.
marka voice kritik hata veya risk bilgisini hafife almamalıdır.
Metin uzunluğu, grammar, plural ve date/number formats düzen'u etkiler.
Güvenlik davranışını anlaşılır kılmak UI sorumluluğudur.
Permission, authentication, destructive action, session, sensitive data, consent ve deceptive pattern tasarımın içindedir.
İzin ihtiyaç anında bağlamıyla açıklanmalı; gereksiz istekten kaçınılmalıdır.
MFA/hatadan dönüş güvenlik ile kullanılabilirlik arasında denge ister.
Timeout, remember-me ve sensitive screens kullanıcının beklentisiyle uyumlu olmalıdır.
Undo mümkünse confirm yerine daha düşük maliyetli hatadan dönüş sunabilir.
Seçenekler simetrik ve anlaşılır sunulmalı; karanlık desenlerden kaçınılmalıdır.
İşlev için gereksiz kişisel veri istenmemelidir.
AI arayüzleri belirsizlik, değişken kalite ve düzeltme ihtiyacını açıkça tasarlamalıdır.
Capability boundary, confidence/uncertainty, kaynak/provenance, edit, regenerate, undo, kullanıcı control ve geri bildirim loop görünür olmalıdır.
Sistem neyi yapabildiğini ve neyi yapamadığını açıklar.
Olasılıksal sonucu kesin gerçek gibi sunmamak gerekir.
Bilgi iddiasında kaynak visibility güveni destekleyebilir.
Kullanıcı sonucu düzenleyebilmeli veya geri alabilmelidir.
Yeni sonuç üretmek kullanıcının önceki emeğini silmemelidir.
Kullanıcı sistem davranışını iyileştirecek açık geri bildirim verebilir.
Tasarım teslimi ekran görüntüsü değil, davranış ve edge-case bilgisidir.
Interaction spec, durum table, duyarlı behavior, içerik rules, erişilebilirlik, analytics event ve QA acceptance criteria birlikte aktarılır.
Trigger → durum change → geri bildirim → failure/hatadan dönüş tanımlanır.
Breakpoint kadar içerik reflow ve behavior adaptation açıklanır.
Name/role/durum, odak order ve keyboard behavior development'a aktarılır.
Ölçüm için event isimleri gizlilik ve product goal ile uyumlu olmalıdır.
‘Doğru çalışıyor’ ölçütü tasarım/geliştirme arasında paylaşılır.
Yeni ekip üyesinin sistemi anlayabileceği sürekli güncellenen dokümantasyon tutulur.
İyi arayüz kullanıcının sistemin nasıl çalıştığını tahmin edebilmesini sağlar.
Affordance, signifier, mapping, constraint, feedback ve consistency kavramları ekrandaki görsel kararın davranışla ilişkisini açıklar.
Kontrol eylemi mümkün kılar; görünür biçim kullanıcıya ipucu verir.
sol = az · sağ = çok
Kontrolün yönü ile sonucun ilişkisi sezgisel olmalıdır.
Affordance bir nesnenin mümkün eylemleridir; signifier ise kullanıcıya o eylemi görünür kılan ipucudur. Butonun kabartılı görünmesi veya link'in altı çizili olması signifier olabilir.
Mapping kontrol ile sonuç arasındaki ilişkidir. Ses slider'ının sağa hareket ettikçe sesin artması güçlü mapping örneğidir.
Constraint hatalı eylem alanını sınırlar. Tarih seçicide geçmiş tarihin disabled olması veya dosya yüklemede uygun formatların belirtilmesi bunun örneğidir.
Feedback, sistemin girdiyi aldığını ve ne olduğunu gösterir. Renk değişimi, progress, haptic, sound veya açıklayıcı metin bir arada kullanılabilir.
Mobil arayüz; küçük ekran, dokunma, tek elle kullanım, sanal klavye ve kesintili bağlam nedeniyle kendine özgü tasarım kalıpları taşır.
Desktop bileşenini küçültmek mobil tasarım değildir.
Alt gezinme çubuğu sık kullanılan 3–5 ana hedef için güçlü olabilir; her üründe zorunlu değildir ve bilgi mimarisiyle doğrulanmalıdır.
Modal bottom sheet, mobilde bağlamı koruyarak kısa seçim veya ayrıntı sunabilir; uzun görevleri küçük sheet'e sıkıştırmak hatadır.
Swipe jestleri görünmez olabilir; kritik eylem yalnız gizli gesture'a bırakılmamalı ve alternatif control sunulmalıdır.
Keyboard açıldığında CTA, field ve hata görünür kalmalı; form tasarımı yalnız kapalı keyboard ekranına göre yapılmamalıdır.
System back, app içi back ve parent hierarchy aynı davranış değildir; platform convention ile ürün mimarisi birlikte düşünülmelidir.
Bir bileşen sadece çizilmiş kutu değil; içerik, durum, erişilebilirlik ve davranış sözleşmesidir.
Button, input, card, dialog veya gezinme bileşeni için normal durum kadar edge case'ler de tasarlanmalıdır.
label · icon · hit area · focus ring · loading
label · value · helper · error · autofill
title · description · actions · focus trap · dismiss
Buton: label, optional icon, hit area, odak, pressed, disabled, yüklenme ve destructive varyantları tanımla.
Input: visible label, helper text, placeholder, value, validation, hata ve başarı durum'leri ile keyboard/autofill davranışını tanımla.
Dialog: title, description, actions, odak trap, escape/back behavior ve destructive action riskini tanımla.
Card: gerçekten bir container semantiği gerekiyorsa kullan; her içerik parçasını kart içine almak hiyerarşi oluşturmaz.
gezinme: active durum, unread badge, disabled/unavailable hedef, deep-link girişi ve overflow davranışını test et.
Profesyonel UI, ideal örnek içerikle değil uç durumlarla sağlamlaşır.
Çok uzun isim, sıfır sonuç, yavaş ağ, permission reddi, oturum süresi, çok büyük sayı ve çok dilli içerik gerçek sistemin parçasıdır.
12 sonuç
Kısa isim · network var · içerik dolu.
0 sonuç · çevrimdışı · session timeout
Ürün ancak bu koşullarda test edilince sağlamlaşır.
Empty durum yalnız boş kutu değildir: neden boş olduğunu ve ilk yapılabilir eylemi açıklamalıdır.
yüklenme süresi bilinmiyorsa spinner; ilerleme ölçülebiliyorsa progress bar tercih edilebilir. Skeleton her içerik için zorunlu değildir.
hata mesajı ‘bir hata oluştu’ demekle bitmez; ne olduğu, kullanıcının ne yapabileceği ve verinin korunup korunmadığı açıklanır.
Permission reddedildiğinde sistem kullanıcıyı cezalandırmamalı; neden gerektiğini ve alternatif akışı göstermelidir.
Offline durumunda okunabilir cache, retry, queued action veya açık unavailable durum ürün gereğine göre tasarlanır.
Tasarım teslimi ekran görüntüsü değil, çalışan davranışın tanımıdır.
durum table, duyarlı davranış, içerik rule, accessibility, analytics ve acceptance criteria birlikte aktarılmalıdır.
Her kritik akış için trigger → durum → feedback → başarı/hata → hatadan dönüş zincirini belgeleyin.
Breakpoints'ten çok içerik davranışını tarif edin: ne sarılır, ne gizlenir, sıra ne zaman değişir, hangi bileşen başka varyanta dönüşür?
Keyboard odak order, accessible name/role/durum ve hata announcement geliştirme ekibine açıkça aktarılmalıdır.
Analytics event'leri kullanıcı gizliliği ve ürün hedefiyle uyumlu olmalı; tasarım her click'i ölçmek için kurulmaz.
Acceptance criteria; yüklenme, localization, accessibility, small screen ve interruption gibi edge case'leri içermelidir.
Doğrulanmış kaynaklar.
Bu sayfa kaynaklara geri dönülebilecek bir akademik/teknik başvuru noktası olarak tasarlanmıştır.
Öncelik; standart kuruluşları, resmi teknik dokümantasyon, müze/arşiv koleksiyonları ve akademik/mesleki güvenilir kaynaklardadır. Koşula bağlı teknik değerler evrensel kural gibi sunulmaz.