Etkileşim Tasarımı (Interaction Design) Nedir?
Kısa tanım
Etkileşim tasarımı (IxD), kullanıcının bir arayüzle nasıl iletişim kurduğunu, yani hangi eylemi nasıl yapabildiğini ve sistemin bu eyleme nasıl tepki verdiğini tasarlama disiplinidir. Butonların, formların, menülerin ve animasyonların davranışını; yükleme, hata ve başarı gibi durumları ve geri bildirimin zamanlamasını kapsar. Amaç, kullanıcının ne yapabileceğini ve ne olduğunu her an anlayabilmesidir.
Diğer adları: IxD, interaction design, mikro etkileşim
Bir etkileşimin anatomisi
Her etkileşim aynı döngüden geçer: kullanıcı bir şeyi fark eder, ona bir eylem uygular, sistem tepki verir ve kullanıcı sonucu yorumlar. Etkileşim tasarımcısı bu döngünün her adımında belirsizliği azaltmaya çalışır.
- Fark edilebilirlik: Tıklanabilir olan şey tıklanabilir görünmeli. Altı çizili metin, buton biçimi, ok simgesi gibi işaretler kullanıcıya bir eylemin mümkün olduğunu söyler. Düz metinle aynı görünen bir bağlantı, işlevsel olsa da fark edilmez.
- Eşleme: Kontrol ile sonucu arasındaki ilişki sezgisel olmalı. Kaydırıcı sağa çekildiğinde değerin artması gibi.
- Geri bildirim: Her eylem bir iz bırakmalı: butonun basılı hâli, sepete eklenen ürün sayısının artması, gönderilen formun onay mesajı.
- Kısıtlar ve geri alma: Hatalı eylemi baştan önlemek (geçmiş bir tarihi seçtirmemek) veya sonradan düzeltmeyi mümkün kılmak (silinen öğe için "Geri al").
Durumları tasarlamak: tek form, altı an
Tasarım dosyalarında genellikle yalnızca formun boş hâli çizilir. Oysa kullanıcı aynı formu farklı durumlarda görür ve sorunların çoğu bu ara durumlarda çıkar:
| Durum | Kullanıcının bilmesi gereken |
|---|---|
| Boş | Hangi alan zorunlu, hangi formatta ne bekleniyor? |
| Odakta | Şu anda hangi alana yazıyorum? (görünür odak çerçevesi) |
| Doğrulama hatası | Neyi yanlış girdim ve nasıl düzeltirim? Hata, alanın yanında ve metinle anlatılmalı. |
| Gönderiliyor | İsteğim alındı mı? Buton devre dışı ve bir yükleme göstergesi, çift gönderimi önler. |
| Başarılı | Ne oldu, bundan sonra ne olacak? |
| Sunucu hatası | Girdiğim bilgiler kayboldu mu, tekrar deneyebilir miyim? |
Bu durumların her biri bir UI bileşeni düzeyinde bir kez tanımlanırsa, sitedeki tüm formlar aynı şekilde davranır.
Zamanlama ve algılanan hız
Kullanıcı açısından bir arayüzün "hızlı" olması, ilk tepkinin ne kadar çabuk geldiğiyle ilgilidir. Google'ın Core Web Vitals metriklerinden INP, bir sayfadaki etkileşimlere görsel yanıtın ne kadar sürede geldiğini ölçer; web.dev'e göre 200 milisaniye ve altı iyi kabul edilir. İşlem uzun sürecekse bile bu süre içinde bir şey göstermek (butonun basılı hâli, iskelet ekran, ilerleme çubuğu) kullanıcının tekrar tıklamasını ve sayfayı terk etmesini azaltır.
Animasyon da zamanlamanın bir parçasıdır: bir panelin açıldığı yönü göstermek veya eklenen öğenin nereye gittiğini anlatmak için kullanılır. Süslemek için eklenen uzun geçişler ise her etkileşimi yavaşlatır. Hareketten rahatsız olan kullanıcılar için işletim sistemindeki "hareketi azalt" ayarına uyulmalıdır:
@media (prefers-reduced-motion: reduce) {
.panel { transition: none; }
}Tek bir giriş yöntemi varsaymamak
Fareyle tasarlanan bir arayüz, dokunmatik ekranda ve klavyede farklı davranır. Dokunmatik cihazlarda hover yoktur; yalnızca üzerine gelince açılan bir menü telefonda erişilemez kalabilir. Klavye kullanıcıları için her etkileşimli öğeye Tab ile ulaşılabilmeli ve odak görünür olmalıdır. WCAG 2.2'nin 2.5.8 kriteri (AA), istisnalar dışında dokunma hedeflerinin en az 24×24 CSS pikseli olmasını ister. Bu konuların tamamı web erişilebilirliği ile kesişir.
UI, UX ve etkileşim tasarımı nerede ayrışır?
UI tasarımı bir ekranın nasıl göründüğüne, UX tasarımı deneyimin bütününe odaklanır; etkileşim tasarımı ikisinin arasında, ekranın zaman içinde nasıl davrandığıyla ilgilenir. Küçük ekiplerde bu işleri aynı kişi yapar. Etkileşim kararları statik ekran görüntüleriyle tam anlatılamadığı için tıklanabilir prototipler ve kısa hareket örnekleri bu disiplinin temel çıktılarıdır. Kullanıcıyı istemediği bir seçime yönlendiren davranışlar ise iyi etkileşim tasarımı değil, karanlık desen örneğidir.