Bir kullanıcı internet sitesini, mobil uygulamayı veya dijital ürünü kullanırken yalnızca ekrandaki renkleri ve görselleri incelemez. Kullanıcı bir butona dokunur, menüyü açar, form doldurur, sayfalar arasında geçiş yapar, hata mesajı görür ve yaptığı işlemin sonucunu anlamaya çalışır.
Kullanıcı ile dijital ürün arasında gerçekleşen bu karşılıklı iletişim etkileşim tasarımının temelini oluşturur.
Etkileşim tasarımı, kullanıcıların bir dijital ürünle nasıl iletişim kuracağını, hangi işlemleri gerçekleştireceğini ve sistemin bu işlemlere nasıl karşılık vereceğini planlayan tasarım disiplinidir.
İngilizcede Interaction Design olarak ifade edilen bu kavram, sıklıkla IxD kısaltmasıyla kullanılır.
Etkileşim tasarımı şu sorulara cevap arar:
- Kullanıcı hangi işlemleri gerçekleştirebilir?
- Kullanıcı işlem yapacağını nasıl anlar?
- Butona tıkladığında ne olur?
- Sistem kullanıcıya nasıl geri bildirim verir?
- Hata meydana geldiğinde hangi mesaj gösterilir?
- Kullanıcı işlemi geri alabilir mi?
- Sayfalar arasındaki geçiş nasıl gerçekleşir?
- Kullanıcının dikkatini hangi alan yönlendirir?
- Bir işlem ne kadar sürede tamamlanır?
- Kullanıcı yanlış işlem yapmaktan nasıl korunur?
- Mobil cihazlarda dokunma hareketleri nasıl çalışır?
- Dijital ürün farklı kullanıcı gruplarına nasıl uyum sağlar?
Başarılı etkileşim tasarımı, kullanıcının ürünü düşünmeden ve zorlanmadan kullanabilmesini amaçlar. Kullanıcı hangi butona basacağını, işlemin tamamlanıp tamamlanmadığını ve bir sonraki adımda ne yapması gerektiğini kolayca anlayabilmelidir.
Dijital ürünlerde kullanıcıların beklentilerini anlamak için öncelikle kapsamlı bir hedef kitle analizi yapılmalıdır.
Etkileşim Tasarımı Nedir?
Etkileşim tasarımı, kullanıcı ile sistem arasında gerçekleşen bütün eylemlerin, tepkilerin ve geri bildirimlerin planlanmasıdır.
Etkileşim tasarımı yalnızca bir butonun nasıl göründüğüyle ilgilenmez. Butonun:
- Hangi durumda görüntülendiği
- Tıklanabilir olduğunun nasıl anlaşıldığı
- Üzerine gelindiğinde nasıl değiştiği
- Tıklandığında ne yaptığı
- İşlem sürerken ne gösterdiği
- İşlem tamamlandığında nasıl geri bildirim verdiği
- Hata oluştuğunda nasıl davrandığı
da tasarlanmalıdır.
Örneğin bir e-ticaret sitesindeki Sepete Ekle butonunu ele alalım.
Kullanıcı butona bastığında:
- Buton kısa süreliğine değişebilir.
- Ürünün sepete eklendiğini gösteren mesaj çıkabilir.
- Sepet simgesindeki ürün sayısı artabilir.
- Kullanıcı sepete yönlendirilebilir.
- Ürün stokta değilse hata mesajı gösterilebilir.
- İşlem sürerken yüklenme göstergesi kullanılabilir.
Bütün bu davranışlar etkileşim tasarımının parçasıdır.
Interaction Design Ne Demektir?
Interaction, etkileşim; design ise tasarım anlamına gelir.
Interaction Design, kullanıcıların ürünle kurduğu iletişimin bilinçli biçimde planlanmasını ifade eder.
Bu iletişim yalnızca tıklamalardan oluşmaz.
Kullanıcılar dijital ürünlerle:
- Tıklayarak
- Dokunarak
- Kaydırarak
- Sürükleyerek
- Sesli komut vererek
- Klavyeyle yazarak
- Kamera kullanarak
- Hareket ederek
- Bildirimlere cevap vererek
- Fiziksel cihazlarla bağlantı kurarak
etkileşime geçebilir.
Bu nedenle etkileşim tasarımı yalnızca web sitesi ve mobil uygulamalarla sınırlı değildir.
Etkileşim Tasarımı Nerelerde Kullanılır?
Etkileşim tasarımı kullanıcı ile sistem arasında iletişim bulunan bütün ürünlerde kullanılabilir.
Başlıca kullanım alanları:
- İnternet siteleri
- Mobil uygulamalar
- E-ticaret siteleri
- Yönetim panelleri
- SaaS uygulamaları
- ATM ekranları
- Akıllı televizyonlar
- Otomobil bilgi ekranları
- Oyunlar
- Akıllı ev sistemleri
- Giyilebilir cihazlar
- Bankacılık uygulamaları
- Kiosklar
- Rezervasyon sistemleri
- Sağlık uygulamaları
- Eğitim platformları
- Sesli asistanlar
- Artırılmış gerçeklik uygulamaları
- Sanal gerçeklik sistemleri
Her ürünün kullanım biçimi ve kullanıcı beklentisi farklı olduğu için etkileşimler de ürünün koşullarına göre tasarlanmalıdır.
Etkileşim Tasarımının Amacı Nedir?
Etkileşim tasarımının temel amacı, kullanıcıların ürün içerisinde yapmak istediği işlemleri kolay, anlaşılır, güvenli ve verimli biçimde tamamlamasını sağlamaktır.
Diğer amaçlar şunlardır:
- Kullanıcının ne yapacağını anlamasını sağlamak
- Karmaşık işlemleri sadeleştirmek
- Hatalı işlemleri azaltmak
- Sistem durumunu görünür hâle getirmek
- Kullanıcıya kontrol hissi vermek
- Öğrenme süresini kısaltmak
- İşlem tamamlama süresini azaltmak
- Dijital ürüne duyulan güveni artırmak
- Kullanıcı memnuniyetini geliştirmek
- Dönüşüm oranını desteklemek
- Ürünün erişilebilirliğini artırmak
- Marka deneyimini güçlendirmek
Etkileşim tasarımı yalnızca estetik değil, aynı zamanda işlevsel ve ticari bir süreçtir.
Etkileşim Tasarımı Neden Önemlidir?
Bir dijital ürün teknik olarak çalışıyor olsa bile kullanıcılar ürünü nasıl kullanacağını anlamıyorsa başarılı kabul edilemez.
Zayıf etkileşim tasarımı şu sorunlara neden olabilir:
- Kullanıcıların yanlış butona basması
- Formların yarıda bırakılması
- Sepet terk oranının artması
- Mobil uygulamanın silinmesi
- Müşteri desteği taleplerinin yükselmesi
- Kullanıcının işlem sonucunu anlayamaması
- Yanlış veya tekrarlanan işlemler
- Kullanıcı güveninin azalması
- Satış ve dönüşüm kaybı
- Olumsuz müşteri yorumları
İyi etkileşim tasarımı ise kullanıcının sistemi daha az düşünerek kullanmasını sağlar.
Etkileşim Tasarımının Temel Unsurları
Etkileşim tasarımını oluşturan başlıca unsurlar şunlardır:
| Unsur | Açıklama |
|---|---|
| Kullanıcı | Ürünle etkileşime geçen kişi |
| Hedef | Kullanıcının tamamlamak istediği işlem |
| Arayüz | Kullanıcının gördüğü ve kullandığı alan |
| Eylem | Tıklama, kaydırma veya yazma gibi kullanıcı hareketi |
| Tepki | Sistemin kullanıcı eylemine verdiği karşılık |
| Geri bildirim | İşlemin sonucu hakkında sunulan bilgi |
| Zaman | Etkileşimin ne kadar sürdüğü |
| Bağlam | Ürünün hangi ortam ve koşulda kullanıldığı |
| Kısıtlar | Kullanıcı hatalarını önleyen sınırlar |
| Akış | Kullanıcının hedefe ulaşmak için izlediği adımlar |
Etkileşim Tasarımının Beş Boyutu
Etkileşim tasarımı farklı boyutlar üzerinden değerlendirilebilir.
Kelimeler
Butonlar, menüler, hata mesajları ve açıklamalar içerisinde kullanılan metinlerdir.
Örnekler:
- Satın al
- Kaydet
- Devam et
- Geri dön
- İşleminiz tamamlandı
- Lütfen geçerli bir e-posta adresi girin
Kelimeler kısa, açık ve kullanıcının anlayacağı biçimde olmalıdır.
Görsel Öğeler
Kullanıcıya bilgi veren görsel unsurlardır.
Örnekler:
- İkonlar
- Renkler
- Butonlar
- Tipografi
- Görseller
- Boşluklar
- Çizgiler
- Kartlar
Görsel öğeler etkileşimin nasıl kullanılacağını desteklemelidir.
Fiziksel Nesneler ve Alan
Kullanıcının ürünü hangi cihaz ve ortamda kullandığını ifade eder.
Örnekler:
- Telefon
- Bilgisayar
- Tablet
- Akıllı saat
- Dokunmatik kiosk
- Otomobil ekranı
Telefon ekranında çalışan bir etkileşim, akıllı saat veya masaüstü bilgisayar için uygun olmayabilir.
Zaman
Animasyon, geçiş, yüklenme ve geri bildirim sürelerini kapsar.
Örnekler:
- Buton animasyonu
- Sayfa geçişi
- Yüklenme göstergesi
- Bildirim süresi
- Geri sayım
- Video ve ses
Etkileşimler gereğinden uzun sürdüğünde kullanıcı deneyimini yavaşlatabilir.
Davranış
Kullanıcıların ne yaptığı ve sistemin nasıl cevap verdiğiyle ilgilidir.
Örnek:
- Kullanıcı formu gönderir.
- Sistem alanları kontrol eder.
- Eksik bilgi varsa hata gösterir.
- Bilgiler doğruysa işlemi tamamlar.
- Başarı mesajı sunar.
Etkileşim Tasarımı ile UI Tasarımı Arasındaki Fark
UI tasarımı, kullanıcı arayüzünün görsel görünümüne odaklanır.
Etkileşim tasarımı ise arayüzün kullanıcı hareketlerine nasıl cevap verdiğini planlar.
| Kriter | Etkileşim tasarımı | UI tasarımı |
|---|---|---|
| Temel odak | Davranış ve işleyiş | Görsel görünüm |
| Temel soru | Kullanıcı işlem yaptığında ne olur? | Arayüz nasıl görünür? |
| Alanlar | Akış, tepki, geri bildirim | Renk, tipografi, ikon ve düzen |
| Çıktı | Etkileşim akışı ve prototip | Görsel ekran tasarımları |
| Örnek | Butona basınca açılan pencere | Butonun rengi ve biçimi |
Başarılı dijital ürünlerde UI ve etkileşim tasarımı birlikte ele alınmalıdır.
Güzel görünen ancak nasıl çalıştığı anlaşılmayan arayüzler kullanıcıları zorlayabilir. Benzer biçimde iyi çalışan ancak görsel hiyerarşisi zayıf arayüzler de güven problemi oluşturabilir.
Etkileşim Tasarımı ile UX Tasarımı Arasındaki Fark
UX tasarımı, kullanıcının ürünle yaşadığı bütün deneyimi kapsar.
Etkileşim tasarımı ise UX tasarımının önemli bir bölümüdür.
| Kriter | Etkileşim tasarımı | UX tasarımı |
|---|---|---|
| Kapsam | Kullanıcı ve sistem etkileşimleri | Bütün kullanıcı deneyimi |
| Odak | Eylem, tepki ve geri bildirim | Araştırma, ihtiyaç, deneyim ve memnuniyet |
| Süreç | Akış ve prototip | Araştırmadan kullanım sonrasına kadar |
| Çıktı | Etkileşim modeli | Kullanıcı yolculuğu ve ürün deneyimi |
| Örnek | Ödeme butonunun davranışı | Bütün ödeme deneyimi |
UX tasarımı:
- Kullanıcı araştırması
- Bilgi mimarisi
- İçerik
- Etkileşim tasarımı
- Kullanılabilirlik
- Erişilebilirlik
- Müşteri deneyimi
gibi daha geniş alanları kapsar.
Etkileşim Tasarımı ile Grafik Tasarım Arasındaki Fark
| Kriter | Etkileşim tasarımı | Grafik tasarım |
|---|---|---|
| Temel amaç | Kullanıcı eylemlerini planlamak | Görsel iletişim oluşturmak |
| Ortam | Etkileşimli ürünler | Basılı ve dijital görseller |
| Kullanıcı hareketi | Temel unsurdur | Her zaman bulunmayabilir |
| Çıktı | Prototip ve kullanıcı akışı | Poster, logo ve görsel |
| Zaman boyutu | Bulunur | Genellikle sabittir |
Grafik tasarım daha çok görsel mesaj üzerine odaklanırken etkileşim tasarımı ürünün davranışını planlar.
Etkileşim Tasarımının Temel İlkeleri
Başarılı etkileşim tasarımında bazı temel ilkeler uygulanmalıdır.
Görünürlük
Kullanıcı gerçekleştirebileceği işlemleri görebilmelidir.
Örneğin:
- Butonlar arka plandan ayrılmalı
- Menü simgesi anlaşılır olmalı
- Tıklanabilir alanlar görünür olmalı
- Seçili durum açıkça gösterilmeli
- Pasif butonlar farklı görünmelidir
Gizlenmiş veya anlaşılmayan işlevler kullanıcının ürünü keşfetmesini zorlaştırır. Tasarımın herkes için kullanılabilir olması konusunda web sitesi erişilebilirliği ve WCAG rehberimize de bakabilirsiniz.
Geri Bildirim
Sistem, kullanıcının yaptığı işlemin sonucunu göstermelidir.
Geri bildirim örnekleri:
- Buton renginin değişmesi
- Yüklenme animasyonu
- Başarı mesajı
- Hata uyarısı
- Titreşim
- Ses
- İlerleme göstergesi
- Sepet sayısının artması
Kullanıcı butona bastığında hiçbir değişiklik olmazsa işlemin gerçekleşip gerçekleşmediğini anlayamaz ve aynı butona tekrar basabilir.
Tutarlılık
Benzer işlemler ürünün bütün alanlarında benzer biçimde çalışmalıdır.
Örneğin:
- Bütün ana CTA butonları aynı görsel yapıda olmalı
- Geri düğmesi her sayfada aynı davranmalı
- Silme işlemleri aynı onay sistemini kullanmalı
- Form hata mesajları aynı yerde gösterilmeli
- İkonların anlamları değişmemelidir
Tutarlılık, kullanıcının sistemi daha hızlı öğrenmesini sağlar.
Kullanıcı Kontrolü
Kullanıcı yaptığı işlemler üzerinde kontrol sahibi olmalıdır.
Kullanıcıya şu seçenekler sunulabilir:
- Geri alma
- İptal
- Düzenleme
- Önceki adıma dönme
- Bildirimi kapatma
- Otomatik işlemi durdurma
- Onay verme
Özellikle silme ve ödeme gibi kritik işlemlerde kullanıcı kontrolü önemlidir.
Kısıtlamalar
Kısıtlamalar, kullanıcının yanlış işlem yapmasını önlemeye yardımcı olur.
Örnekler:
- Zorunlu alan doldurulmadan butonun aktif olmaması
- Tarih seçiminde geçmiş günlerin kapatılması
- Stokta olmayan ürünün seçilememesi
- Geçersiz dosya türünün yüklenememesi
- Yetkisiz kullanıcının belirli alana erişememesi
Kısıtlamalar kullanıcıyı gereksiz yere engellememeli, hata riskini azaltmalıdır.
Haritalama
Kontrollerle sonuçlar arasındaki ilişkinin anlaşılır olmasıdır.
Örneğin:
- Sağ ok bir sonraki sayfaya gider.
- Sol ok önceki sayfaya döner.
- Yukarı kaydırma içeriği aşağıdan gösterir.
- Ses düğmesi sağa çevrildiğinde ses artar.
Kontrol ve sonuç arasında doğal ilişki kurulmalıdır.
Affordance
Affordance, bir öğenin nasıl kullanılacağına dair ipucu vermesidir.
Örneğin:
- Kabartmalı bir buton basılabilir görünür.
- Altı çizili metin bağlantı izlenimi verebilir.
- Tutma noktaları nesnenin sürüklenebileceğini gösterir.
- Metin alanındaki imleç yazı yazılabileceğini anlatır.
Dijital tasarımda görünüm, işlev hakkında doğru beklenti oluşturmalıdır.
Signifier Nedir?
Signifier, kullanıcıya bir öğenin nasıl kullanılacağını gösteren işarettir.
Örnekler:
- Buton üzerindeki “Gönder” yazısı
- Arama alanındaki büyüteç ikonu
- Sürüklenebilir alan üzerindeki çizgiler
- Form alanındaki örnek metin
- Geri ok simgesi
Affordance bir öğenin olası kullanımını, signifier ise bu kullanımın kullanıcıya nasıl gösterildiğini açıklar.
Etkileşim Tasarımında Mikro Etkileşimler
Mikro etkileşim, kullanıcının tek ve küçük bir işlemini destekleyen kısa etkileşimdir.
Mikro etkileşim örnekleri:
- Beğeni butonuna basıldığında oluşan animasyon
- Parola gücü göstergesi
- Bildirim simgesindeki sayı
- Form alanının doğru doldurulduğunu gösteren işaret
- Sepete ekleme animasyonu
- Açma-kapama düğmesi
- E-posta gönderildi bildirimi
- Yenilemek için aşağı çekme hareketi
Mikro etkileşimler yalnızca dekoratif animasyon değildir. Kullanıcıya bilgi vermeli veya işlemi kolaylaştırmalıdır.
Mikro Etkileşimin Bileşenleri
| Bileşen | Açıklama |
|---|---|
| Tetikleyici | Etkileşimi başlatan kullanıcı veya sistem olayı |
| Kurallar | Etkileşimin nasıl çalışacağını belirleyen yapı |
| Geri bildirim | Kullanıcının gördüğü, duyduğu veya hissettiği cevap |
| Döngü ve mod | Etkileşimin tekrar ve durum davranışı |
Mikro Etkileşim Örneği
Tetikleyici: Kullanıcı bildirim düğmesini açar.
Kural: Bildirim izni varsa özellik aktif edilir.
Geri bildirim: Düğme renk değiştirir ve onay mesajı görünür.
Döngü: Ayar kullanıcı tekrar kapatana kadar açık kalır.
Animasyonlar Nasıl Kullanılmalıdır?
Animasyonlar:
- Durum değişimini göstermek
- Kullanıcının dikkatini yönlendirmek
- Sayfalar arasındaki ilişkiyi anlatmak
- Yüklenme süresini görünür kılmak
- İşlem sonucunu açıklamak
için kullanılabilir.
Ancak gereksiz animasyonlar:
- Kullanıcıyı yavaşlatabilir.
- Dikkati dağıtabilir.
- Erişilebilirlik sorunu oluşturabilir.
- Mobil cihaz performansını düşürebilir.
- Ürünün profesyonel algısını zayıflatabilir.
Animasyon işlevi desteklemeli, işlevin önüne geçmemelidir.
Etkileşim Durumları Nelerdir?
Bir arayüz öğesi farklı durumlara sahip olabilir.
Buton durumları:
- Default
- Hover
- Focus
- Active
- Disabled
- Loading
- Success
- Error
Buton Durumları Tablosu
| Durum | Açıklama |
|---|---|
| Default | Normal görünüm |
| Hover | İmleç üzerindeyken |
| Focus | Klavye veya erişilebilirlik odağı |
| Active | Tıklama anı |
| Disabled | Kullanılamayan durum |
| Loading | İşlem devam ediyor |
| Success | İşlem tamamlandı |
| Error | İşlem başarısız oldu |
Yalnızca normal buton tasarlamak yeterli değildir. Kullanım sırasında karşılaşılabilecek bütün durumlar düşünülmelidir.
Etkileşim Tasarımında Kullanıcı Akışı
Kullanıcı akışı, kullanıcının belirli bir hedefe ulaşmak için takip ettiği adımları gösterir.
Örnek e-ticaret akışı:
- Kullanıcı ana sayfaya gelir.
- Kategori açar.
- Ürün seçer.
- Ürün detayını inceler.
- Sepete ekler.
- Sepeti açar.
- Teslimat bilgilerini girer.
- Ödeme yapar.
- Sipariş onayını görür.
Her adımda:
- Kullanıcının amacı
- Kullanabileceği seçenekler
- Sistem tepkisi
- Hata ihtimalleri
- Geri dönüş yolları
planlanmalıdır.
Kullanıcı Akışı ve Kullanıcı Yolculuğu Arasındaki Fark
| Kriter | Kullanıcı akışı | Kullanıcı yolculuğu |
|---|---|---|
| Kapsam | Ürün içerisindeki adımlar | Markayla kurulan bütün ilişki |
| Odak | Görev tamamlama | Deneyim ve duygular |
| Süre | Genellikle kısa | Uzun olabilir |
| Başlangıç | Ürün içerisinde | Marka farkındalığından başlayabilir |
| Örnek | Ödeme tamamlama | Araştırmadan satış sonrasına kadar |
Etkileşim Tasarımı Nasıl Yapılır?
Etkileşim tasarımı kullanıcı araştırmasıyla başlayan ve testlerle devam eden sistemli bir süreçtir.
Temel aşamalar:
- Kullanıcı araştırması
- Problem tanımlama
- Kullanıcı hedeflerini belirleme
- Görev analizi
- Bilgi mimarisi
- Kullanıcı akışı
- Wireframe
- Etkileşim durumları
- Prototipleme
- Kullanılabilirlik testi
- Geliştirme
- Performans ölçümü
Kullanıcı Araştırması Yapın
Etkileşim tasarımı varsayımlara değil, kullanıcı ihtiyaçlarına dayanmalıdır.
Araştırma yöntemleri:
- Kullanıcı görüşmesi
- Anket
- Gözlem
- Kullanılabilirlik testi
- Müşteri destek kayıtları
- Web analitik verileri
- Isı haritası
- Oturum kaydı
- Rakip analizi
- Günlük çalışmaları
Araştırmada şu sorulara cevap aranabilir:
- Kullanıcı ne yapmak istiyor?
- Hangi sorunlarla karşılaşıyor?
- Ürünü hangi cihazda kullanıyor?
- Hangi işlemleri sık yapıyor?
- Hangi aşamalarda zorlanıyor?
- Kullanıcının teknik deneyimi ne düzeyde?
- Hangi hata durumları tekrarlanıyor?
Kullanıcı Personası Oluşturun
Persona, hedef kullanıcıyı temsil eden örnek profildir.
Persona Örneği
İsim: Zeynep
Yaş: 31
Meslek: Dijital pazarlama uzmanı
Cihaz: Mobil telefon ve dizüstü bilgisayar
Hedef: Kampanya sonuçlarını hızlıca görmek
Sorun: Karmaşık rapor ekranlarında zaman kaybetmek
Beklenti: Basit, hızlı ve özelleştirilebilir dashboard
Etkileşimler bu kullanıcının hedefleri ve kullanım koşullarına göre planlanabilir.
Görev Analizi Yapın
Görev analizi, kullanıcının bir işlemi tamamlamak için hangi adımları izlediğini belirler.
Örnek görev:
Uçak bileti satın almak
Adımlar:
- Kalkış yeri seçilir.
- Varış noktası belirlenir.
- Tarih seçilir.
- Yolcu sayısı girilir.
- Uçuşlar listelenir.
- Uçuş seçilir.
- Yolcu bilgileri doldurulur.
- Ek hizmetler seçilir.
- Ödeme yapılır.
- Bilet görüntülenir.
Gereksiz adımlar ve tekrarlar azaltılmalıdır.
Bilgi Mimarisi Oluşturun
Bilgi mimarisi içeriklerin nasıl gruplandırılacağını ve kullanıcıların bu içeriklere nasıl ulaşacağını belirler.
Bilgi mimarisinde:
- Menü
- Kategoriler
- Sayfalar
- Filtreler
- Arama
- Etiketler
- Sayfa hiyerarşisi
planlanır.
Bilgi mimarisi zayıf olduğunda iyi tasarlanmış etkileşimler bile kullanıcı hedefini destekleyemez.
Wireframe Hazırlayın
Wireframe, ekranın temel yerleşimini gösteren sade taslaktır.
Wireframe üzerinde:
- Başlık
- Menü
- Buton
- Form
- Görsel alanı
- Kartlar
- Alt bilgi
- Navigasyon
yerleştirilir.
Wireframe aşamasında görsel detaylardan önce kullanıcı akışı ve işlevler değerlendirilir.
Prototip Hazırlayın
Prototip, ekranlar arasındaki etkileşimlerin test edilebildiği örnek üründür.
Prototip türleri:
- Kâğıt prototip
- Düşük detaylı prototip
- Orta detaylı prototip
- Yüksek detaylı prototip
- Kodlanmış prototip
Prototip Türleri Karşılaştırması
| Prototip | Avantajı | Kullanım zamanı |
|---|---|---|
| Kâğıt | Hızlı ve düşük maliyetli | İlk fikir aşaması |
| Düşük detay | Akışa odaklanır | Erken tasarım |
| Orta detay | Temel davranışları gösterir | Tasarım geliştirme |
| Yüksek detay | Gerçeğe yakın deneyim | Kullanıcı testi ve sunum |
| Kodlanmış | Teknik davranışı test eder | Geliştirme öncesi veya sırasında |
Prototip sayesinde yazılım geliştirme başlamadan önce önemli sorunlar tespit edilebilir.
Kullanılabilirlik Testi Yapın
Kullanılabilirlik testi, gerçek veya hedef kullanıcıların ürün üzerindeki görevleri tamamlamasının gözlemlenmesidir.
Testte kullanıcılardan şu görevler istenebilir:
- Üye olun.
- Belirli ürünü bulun.
- Filtre uygulayın.
- Sepete ürün ekleyin.
- Randevu oluşturun.
- Hesabınızın şifresini değiştirin.
- Siparişi iptal edin.
Test sırasında:
- Görev tamamlama oranı
- Tamamlama süresi
- Hata sayısı
- Kullanıcının zorlandığı alanlar
- Yardım ihtiyacı
- Kullanıcı yorumları
kaydedilebilir.
Etkileşim Tasarımında Geri Bildirim Türleri
| Geri bildirim türü | Örnek |
|---|---|
| Görsel | Renk değişimi ve başarı mesajı |
| İşitsel | Bildirim sesi |
| Dokunsal | Telefon titreşimi |
| Metinsel | Hata açıklaması |
| Hareket | Buton animasyonu |
| Durum | İlerleme çubuğu |
Geri bildirim, kullanıcının işlemin sonucunu anlayacağı kadar açık olmalıdır.
Hata Önleme ve Hata Mesajları
Başarılı etkileşim tasarımı hatayı yalnızca açıklamaz, mümkün olduğunda önler.
Hata Önleme Örnekleri
- Telefon alanında yalnızca sayı girişi
- Zorunlu alanların açıkça gösterilmesi
- Parola koşullarının önceden açıklanması
- Silme işleminde onay alınması
- Kullanılamayan tarihlerin seçime kapatılması
- Kredi kartı numarasının otomatik biçimlendirilmesi
İyi Hata Mesajının Özellikleri
İyi hata mesajı:
- Sorunu açıklar.
- Kullanıcıyı suçlamaz.
- Çözüm önerir.
- Hatanın bulunduğu alanı gösterir.
- Teknik kodlarla sınırlı kalmaz.
Zayıf hata mesajı:
Hata 3027.
Daha iyi hata mesajı:
Ödeme işlemi tamamlanamadı. Kart bilgilerinizi kontrol ederek tekrar deneyin veya farklı bir ödeme yöntemi seçin.
Empty State Nedir?
Empty state, henüz veri veya içerik bulunmayan ekran durumudur.
Örnekler:
- Boş sepet
- Henüz sipariş yok
- Mesaj bulunmuyor
- Arama sonucu yok
- Proje oluşturulmamış
- Favori ürün eklenmemiş
İyi bir empty state yalnızca boşluğu göstermez, kullanıcıya sonraki adımı açıklar.
Örnek:
Henüz favori ürününüz bulunmuyor. Ürünleri inceleyerek beğendiklerinizi favorilerinize ekleyebilirsiniz.
CTA:
Ürünleri İncele
Loading State Nedir?
Loading state, işlem devam ederken kullanıcıya sistemin çalıştığını gösterir.
Kullanılabilecek yöntemler:
- Spinner
- İlerleme çubuğu
- Skeleton ekran
- Yüzdelik ilerleme
- Bilgilendirici metin
Kullanıcıya ne kadar bekleyeceği hakkında mümkün olduğunda bilgi verilmelidir.
Skeleton Screen Nedir?
Skeleton screen, içerik yüklenmeden önce sayfanın temel yapısını gösteren geçici yerleşimdir.
Avantajları:
- Sayfa daha hızlı yükleniyormuş hissi verebilir.
- İçerik düzenini önceden gösterir.
- Ani ekran değişimlerini azaltabilir.
- Kullanıcının bekleme deneyimini iyileştirebilir.
Skeleton ekran gerçek performans sorunlarının yerine kullanılmamalıdır. Sayfanın teknik hızı ayrıca optimize edilmelidir.
Form Etkileşim Tasarımı
Formlar dijital ürünlerde dönüşüm açısından kritik alanlardır.
İyi form tasarımında:
- Yalnızca gerekli alanlar istenir.
- Etiketler açıkça gösterilir.
- Örnek girişler sunulur.
- Hatalar alanın yanında açıklanır.
- Klavye türü alana göre değişir.
- Kullanıcı bilgileri kaybolmaz.
- İlerleme görünür olur.
- Mobil kullanım dikkate alınır.
- Buton metni açık olur.
Zayıf ve İyi Form Karşılaştırması
| Zayıf form | İyi form |
|---|---|
| Çok sayıda gereksiz alan | Yalnızca gerekli bilgiler |
| Hata sayfanın üstünde | Hata ilgili alanın yanında |
| Belirsiz buton metni | Açık eylem ifadesi |
| Veriler hata sonrası silinir | Girilen bilgiler korunur |
| Zorunlu alanlar belli değil | Zorunlu alanlar açık |
| Mobilde küçük alanlar | Dokunmaya uygun alanlar |
Mobil Etkileşim Tasarımı
Mobil cihazlarda kullanıcılar fare yerine parmaklarıyla etkileşim kurar.
Dikkat edilmesi gerekenler:
- Dokunma alanları yeterince büyük olmalı
- Butonlar birbirine çok yakın olmamalı
- Tek elle kullanım düşünülmeli
- Kaydırma davranışları anlaşılır olmalı
- Mobil klavye türü alana göre seçilmeli
- Açılır pencereler ekranı kaplamamalı
- Kritik CTA’lar erişilebilir yerde olmalı
- Yatay ve dikey kullanım kontrol edilmeli
- Geri hareketi doğru çalışmalıdır
Mobil sayfaların teknik ve kullanıcı deneyimi açısından değerlendirilmesi için mobil SEO çalışmaları da uygulanmalıdır.
Gesture Tasarımı
Gesture, kullanıcının dokunmatik ekran üzerinde yaptığı fiziksel harekettir.
Örnek hareketler:
- Dokunma
- Çift dokunma
- Uzun basma
- Sağ veya sola kaydırma
- Yukarı veya aşağı kaydırma
- Sıkıştırma
- Büyütme
- Sürükleme
Hareketler kullanıcıların alışkanlıklarına uygun olmalıdır. Kritik işlevler yalnızca keşfedilmesi zor bir harekete bağlanmamalıdır.
Örneğin silme işlemi yalnızca sola kaydırmayla yapılabiliyorsa kullanıcılar bu özelliği fark etmeyebilir. Ek olarak görünür bir seçenek sunulabilir.
Erişilebilir Etkileşim Tasarımı
Etkileşim tasarımı farklı fiziksel, görsel ve bilişsel özelliklere sahip kullanıcıları desteklemelidir.
Erişilebilirlik için:
- Klavye ile kullanım sağlanmalı
- Focus durumları görünür olmalı
- Yalnızca renkle bilgi verilmemeli
- Form alanlarında açık etiket kullanılmalı
- Ekran okuyucu uyumu düşünülmeli
- Yeterli renk kontrastı sağlanmalı
- Animasyonları azaltma seçeneği dikkate alınmalı
- Dokunma alanları yeterli büyüklükte olmalı
- Hata mesajları açık olmalı
- Zaman sınırlamaları yönetilebilir olmalıdır
Erişilebilirlik yalnızca belirli bir kullanıcı grubu için değil, bütün kullanıcılar için daha anlaşılır ürünler oluşturur.
Etkileşim Tasarımında İçerik ve Mikro Metinler
Mikro metin, kullanıcıyı yönlendiren kısa arayüz metinleridir.
Örnekler:
- Buton yazıları
- Form açıklamaları
- Hata mesajları
- Onay mesajları
- Boş ekran metinleri
- Bildirimler
- İzin talepleri
Zayıf mikro metin:
Tamam
Daha açık mikro metin:
Siparişi Onayla
Zayıf hata metni:
Geçersiz giriş
Daha iyi metin:
Telefon numaranızı başında sıfır olmadan 10 haneli olarak girin.
Etkileşim Tasarımında Görsel Hiyerarşi
Görsel hiyerarşi, kullanıcıların hangi öğeyi önce fark edeceğini belirler.
Hiyerarşi şu araçlarla oluşturulabilir:
- Boyut
- Renk
- Kontrast
- Boşluk
- Konum
- Tipografi
- Hareket
- Gruplama
Ana eylem ile ikincil eylem birbirinden ayrılmalıdır.
Örnek:
- Satın Al butonu ana eylem
- Favorilere Ekle ikincil eylem
- İptal daha düşük önemdeki eylem
Bütün butonların aynı görünmesi kullanıcının karar vermesini zorlaştırabilir.
Etkileşim Tasarımında Tasarım Sistemi
Tasarım sistemi, arayüz öğelerinin görsel ve davranışsal kurallarını bir araya getirir.
Tasarım sisteminde:
- Buton durumları
- Form davranışları
- Bildirimler
- Modal pencereler
- Menüler
- Animasyon süreleri
- Hata mesajları
- Yüklenme durumları
- Mobil hareketler
- Erişilebilirlik kuralları
tanımlanabilir.
Bu sistem sayesinde farklı ekranlarda benzer etkileşimler tutarlı biçimde uygulanır.
Etkileşim Tasarımı Araçları
Etkileşim tasarımında farklı araçlardan yararlanılabilir.
| Araç türü | Kullanım amacı |
|---|---|
| Wireframe aracı | Temel ekran yapısı |
| Prototipleme aracı | Tıklanabilir akış |
| Beyaz tahta aracı | Fikir ve kullanıcı yolculuğu |
| Analiz aracı | Kullanıcı davranışları |
| Test aracı | Kullanılabilirlik değerlendirmesi |
| Görev yönetimi | Tasarım ve geliştirme takibi |
| Tasarım sistemi aracı | Ortak bileşen yönetimi |
Araç seçimi:
- Projenin büyüklüğüne
- Ekip yapısına
- Test ihtiyacına
- Geliştirici iş birliğine
- Prototip detayına
göre yapılmalıdır.
Etkileşim Tasarımının Yazılımcıya Aktarılması
Tasarım tamamlandığında yazılım ekibine yalnızca görsel ekranlar gönderilmemelidir.
Teslimde şu bilgiler bulunmalıdır:
- Tıklanabilir alanlar
- Buton durumları
- Sayfa geçişleri
- Animasyonlar
- Yüklenme durumları
- Hata durumları
- Empty state ekranları
- Form doğrulamaları
- Mobil hareketler
- Yetki durumları
- Bildirim davranışları
- Geri alma işlemleri
Etkileşim Belgesi Örneği
| Öğrenci | Durum | Davranış |
|---|---|---|
| Sepete Ekle | Normal | Ürün sepete eklenir |
| Sepete Ekle | Loading | Buton pasifleşir ve gösterge çıkar |
| Sepete Ekle | Başarılı | Sepet sayısı artar |
| Sepete Ekle | Stok yok | Uyarı mesajı gösterilir |
| Sepete Ekle | Bağlantı hatası | Tekrar deneme seçeneği sunulur |
Etkileşim Tasarımı Nasıl Ölçülür?
Etkileşim tasarımının başarısı kullanıcı davranışı ve görev sonuçlarıyla ölçülebilir.
Takip edilebilecek metrikler:
- Görev tamamlama oranı
- Görev tamamlama süresi
- Hata oranı
- Form terk oranı
- Tıklama oranı
- Dönüşüm oranı
- Kullanıcı memnuniyeti
- Destek talebi
- Geri dönüş oranı
- Özellik kullanım oranı
- Kullanıcının hedefe ulaşmak için attığı adım sayısı
Görev Tamamlama Oranı
Formül:
Görev tamamlama oranı = Görevi tamamlayan kullanıcı / Göreve başlayan kullanıcı × 100
Örnek:
- Ödemeye başlayan kullanıcı: 1.000
- Ödemeyi tamamlayan kullanıcı: 720
720 / 1.000 × 100 = %72 görev tamamlama oranı
Kalan yüzde 28’lik kaybın nedenleri analiz edilmelidir.
Form Terk Oranı
Formül:
Form terk oranı = Formu tamamlamayan kullanıcı / Forma başlayan kullanıcı × 100
Örnek:
- Forma başlayan: 800
- Formu tamamlayan: 480
- Terk eden: 320
320 / 800 × 100 = %40 form terk oranı
Terk oranı yüksekse:
- Alan sayısı
- Hata mesajları
- Mobil kullanım
- Form hızı
- Güven unsurları
- Zorunlu bilgiler
incelenebilir.
Kullanıcıların sayfalardaki davranışları Google Analytics üzerinden ölçülebilir.
Etkileşim Tasarımı Örneği
Bir restoran rezervasyon uygulaması için etkileşim tasarımını ele alalım.
Kullanıcı Hedefi
Belirli tarih ve saatte masa ayırtmak.
Akış
- Kullanıcı restoranı seçer.
- Tarih belirler.
- Kişi sayısını girer.
- Uygun saatleri görür.
- Saat seçer.
- İletişim bilgilerini girer.
- Rezervasyonu onaylar.
- Başarı mesajı alır.
Tasarlanması Gereken Durumlar
- Uygun masa bulunmaması
- İnternet bağlantısı kesilmesi
- Saatin başka kullanıcı tarafından alınması
- Telefon numarasının yanlış girilmesi
- Rezervasyonun iptal edilmesi
- Tarihin değiştirilmesi
- Hatırlatma bildirimi
- Restoranın rezervasyonu reddetmesi
Sadece başarılı rezervasyon akışını tasarlamak yeterli değildir.
E-Ticaret Etkileşim Tasarımı Örneği
Bir e-ticaret sitesinde şu alanlar etkileşim tasarımı açısından önemlidir:
- Arama
- Filtreleme
- Ürün karşılaştırma
- Ürün varyasyonu seçimi
- Sepete ekleme
- Kupon kullanımı
- Adres seçimi
- Ödeme
- Sipariş takibi
- İade
Ürün Filtreleme Örneği
İyi filtreleme sistemi:
- Seçilen filtreleri görünür gösterir.
- Sonuç sayısını günceller.
- Filtreleri kolayca kaldırır.
- Mobilde açılıp kapanabilir.
- Sonuç bulunmadığında öneri sunar.
- Sayfa yenilendiğinde seçimleri koruyabilir.
Etkileşim Tasarımının Avantajları
Kullanılabilirliği Artırır
Kullanıcıların ürün içerisinde daha kolay hareket etmesini sağlar.
Hataları Azaltır
Kısıtlamalar ve açık geri bildirimler yanlış işlemleri önleyebilir.
Dönüşümü Destekler
Form, satın alma ve üyelik süreçlerinin tamamlanmasını kolaylaştırabilir.
Öğrenme Süresini Kısaltır
Tutarlı ve anlaşılır etkileşimler kullanıcıların ürünü daha hızlı öğrenmesini sağlar.
Müşteri Desteği İhtiyacını Azaltır
Kullanıcılar işlemleri bağımsız biçimde tamamlayabilir.
Kullanıcı Güvenini Artırır
Sistem durumunun açıkça gösterilmesi belirsizliği azaltır.
Marka Deneyimini Güçlendirir
Akıcı ve tutarlı ürün deneyimi markaya yönelik olumlu algı oluşturabilir.
Geliştirme Hatalarını Azaltır
Etkileşimler prototip aşamasında test edildiğinde yazılım geliştirme sırasında daha az değişiklik gerekebilir.
Etkileşim Tasarımının Zorlukları
Kullanıcı Davranışları Değişebilir
Farklı kullanıcı grupları aynı etkileşimi farklı yorumlayabilir.
Bütün Durumları Planlamak Zordur
Hata, bağlantı, yetki ve cihaz durumları kapsamlı çalışma gerektirir.
Tasarım ve Yazılım Uyumu Gerektirir
Hazırlanan etkileşimlerin teknik olarak uygulanabilir olması gerekir.
Aşırı Animasyon Riski Bulunur
Görsel etki amacıyla eklenen hareketler kullanılabilirliği azaltabilir.
Erişilebilirlik İhmal Edilebilir
Fareyle kolay çalışan etkileşim klavye veya ekran okuyucuyla kullanılamayabilir.
Test Maliyeti Oluşturabilir
Kullanıcı testleri zaman ve kaynak gerektirir.
İyi ve Kötü Etkileşim Tasarımı Karşılaştırması
| Kötü etkileşim | İyi etkileşim |
|---|---|
| Kullanıcı işlem sonucunu anlayamaz | Açık geri bildirim verilir |
| Butonların işlevi belirsizdir | Eylem metinleri açıktır |
| Hatalar işlem sonunda gösterilir | Hatalar zamanında belirtilir |
| Kullanıcı geri dönemaz | Geri alma ve iptal sunulur |
| Animasyonlar süreci yavaşlatır | Animasyonlar işlevi açıklar |
| Mobil dokunma alanları küçüktür | Dokunmaya uygun boyut kullanılır |
| Sadece başarılı durum tasarlanır | Hata ve boş durumlar planlanır |
| Etkileşimler sayfalarda değişir | Tutarlı davranışlar kullanılır |
| Yalnızca renk ile bilgi verilir | Metin ve ikonla desteklenir |
| Kullanıcı test edilmez | Gerçek kullanıcılarla test yapılır |
Etkileşim Tasarımında Yapılan Hatalar
Görsel Tasarımı Etkileşim Tasarımı Sanmak
Arayüzün güzel görünmesi, kolay kullanıldığı anlamına gelmez.
Geri Bildirim Vermemek
Kullanıcı işlemin gerçekleşip gerçekleşmediğini anlayamaz.
Yalnızca Normal Durumu Tasarlamak
Loading, error, disabled ve success durumları unutulur.
Kullanıcı Alışkanlıklarını Görmezden Gelmek
Bilinen simgeler ve hareketler farklı anlamlarda kullanılabilir.
Aşırı Animasyon Kullanmak
Animasyonlar kullanıcıyı yavaşlatabilir ve dikkatini dağıtabilir.
Kritik İşlevleri Gizlemek
Kullanıcılar özelliği keşfedemez.
Geri Alma Seçeneği Sunmamak
Yanlış işlemler ciddi kullanıcı sorunlarına neden olabilir.
Hata Mesajlarını Teknik Yazmak
Kullanıcı sorunun ne olduğunu ve nasıl çözeceğini anlayamaz.
Mobil Deneyimi Sonradan Düşünmek
Masaüstü etkileşimleri küçültülerek mobil tasarıma dönüştürülemez.
Erişilebilirliği İhmal Etmek
Ürün bazı kullanıcılar için kullanılamaz hâle gelebilir.
Kullanıcı Testi Yapmamak
Tasarım ekibinin varsayımları gerçek kullanıcı davranışlarıyla karşılaştırılmaz.
Etkileşim Tasarımı Kontrol Listesi
| Kontrol alanı | Yapılması gereken |
|---|---|
| Kullanıcı | Hedef kullanıcı profili belirlenmeli |
| Hedef | Kullanıcının tamamlamak istediği görev açıklanmalı |
| Akış | Gereksiz adımlar azaltılmalı |
| Görünürlük | Tıklanabilir alanlar anlaşılır olmalı |
| Geri bildirim | Her önemli işlem cevap vermeli |
| Tutarlılık | Benzer öğeler benzer çalışmalı |
| Kullanıcı kontrolü | İptal, düzenleme ve geri alma sunulmalı |
| Kısıtlamalar | Hatalar işlem öncesinde önlenmeli |
| Buton durumları | Default, focus, loading ve error tasarlanmalı |
| Formlar | Açık etiket ve hata mesajı kullanılmalı |
| Empty state | Boş ekranlarda yönlendirme yapılmalı |
| Loading | Bekleme durumu görünür olmalı |
| Hata | Sorun ve çözüm açıklanmalı |
| Mobil | Dokunma alanları kontrol edilmeli |
| Erişilebilirlik | Klavye ve ekran okuyucu düşünülmeli |
| Animasyon | İşlevi desteklemeli |
| Prototip | Etkileşimler test edilebilir olmalı |
| Kullanıcı testi | Gerçek kullanıcılarla doğrulanmalı |
| Yazılım teslimi | Bütün davranışlar belgelenmeli |
| Ölçüm | Tamamlama, hata ve dönüşüm izlenmeli |
Etkileşim Tasarımı Hakkında Sıkça Sorulan Sorular
Etkileşim tasarımı nedir?
Etkileşim tasarımı, kullanıcıların bir dijital ürünle nasıl iletişim kuracağını ve sistemin kullanıcı eylemlerine nasıl cevap vereceğini planlayan tasarım disiplinidir.
Interaction Design ne demektir?
Interaction Design, Türkçede etkileşim tasarımı anlamına gelir ve IxD şeklinde kısaltılabilir.
Etkileşim tasarımının amacı nedir?
Kullanıcıların hedeflerini kolay, hızlı, anlaşılır ve güvenli biçimde tamamlamasını sağlamaktır.
Etkileşim tasarımı nerelerde kullanılır?
Web siteleri, mobil uygulamalar, ATM’ler, kiosklar, otomobil ekranları, giyilebilir cihazlar ve diğer dijital ürünlerde kullanılır.
Etkileşim tasarımı ile UI aynı mı?
Hayır. UI görsel arayüze, etkileşim tasarımı ise arayüzün nasıl çalıştığına odaklanır.
Etkileşim tasarımı ile UX aynı mı?
Hayır. Etkileşim tasarımı, daha geniş kapsamlı UX tasarımının bölümlerinden biridir.
IxD neyin kısaltmasıdır?
IxD, Interaction Design ifadesinin yaygın kısaltmasıdır.
Mikro etkileşim nedir?
Beğeni, bildirim, form doğrulama veya açma-kapama gibi tek ve küçük bir kullanıcı işlemini destekleyen etkileşimdir.
Affordance nedir?
Bir nesnenin nasıl kullanılabileceğine dair sunduğu işlevsel ipucudur.
Signifier nedir?
Kullanıcıya bir öğenin nasıl kullanılacağını gösteren görsel veya metinsel işarettir.
Kullanıcı akışı nedir?
Kullanıcının belirli bir hedefe ulaşmak için ürün içerisinde izlediği adımların sıralamasıdır.
Prototip nedir?
Ekran ve etkileşimlerin yazılım tamamlanmadan önce test edilebildiği örnek üründür.
Wireframe ile prototip aynı mı?
Hayır. Wireframe temel ekran yerleşimini gösterir. Prototip ise ekranlar arasındaki etkileşimleri çalışır biçimde gösterebilir.
Geri bildirim neden önemlidir?
Kullanıcının yaptığı işlemin gerçekleşip gerçekleşmediğini anlamasını sağlar.
Loading state nedir?
İşlem devam ederken sistemin çalıştığını gösteren yüklenme durumudur.
Empty state nedir?
Henüz veri, içerik veya sonuç bulunmayan ekran durumudur.
Skeleton screen nedir?
İçerik yüklenmeden önce sayfanın temel yerleşimini gösteren geçici yüklenme tasarımıdır.
Hata mesajı nasıl olmalıdır?
Sorunu açıkça anlatmalı, kullanıcıyı suçlamamalı ve çözüm için yönlendirme sunmalıdır.
Etkileşim tasarımında animasyon gerekli mi?
Her zaman gerekli değildir. Animasyon, durum değişimini veya kullanıcı işlemini açıklıyorsa kullanılmalıdır.
Etkileşim tasarımı dönüşümü etkiler mi?
Form, ödeme ve üyelik süreçlerinin daha kolay tamamlanmasını sağlayarak dönüşüm oranını destekleyebilir.
Mobil etkileşim tasarımında ne önemlidir?
Dokunma alanları, tek elle kullanım, mobil klavye, kaydırma hareketleri ve ekran boyutu önemlidir.
Gesture tasarımı nedir?
Dokunma, kaydırma, sürükleme ve sıkıştırma gibi kullanıcı hareketlerinin planlanmasıdır.
Etkileşim tasarımı erişilebilir olmalı mı?
Evet. Klavye, ekran okuyucu, renk kontrastı ve hareket hassasiyeti gibi farklı kullanıcı ihtiyaçları dikkate alınmalıdır.
Etkileşim tasarımı nasıl test edilir?
Kullanılabilirlik testi, prototip testi, analitik veriler, ısı haritaları ve kullanıcı görüşmeleriyle test edilebilir.
Görev tamamlama oranı nedir?
Bir göreve başlayan kullanıcıların ne kadarının görevi başarıyla tamamladığını gösteren metriktir.
Etkileşim tasarımcısı ne yapar?
Kullanıcı akışları oluşturur, prototip hazırlar, etkileşim durumlarını tanımlar, testler yapar ve tasarımın kullanıcı davranışlarına uygun çalışmasını sağlar.
Etkileşim tasarımı için kod bilmek gerekir mi?
Zorunlu değildir. Ancak web ve mobil teknolojilerin temelini bilmek uygulanabilir tasarımlar hazırlamayı kolaylaştırır.
Etkileşim Tasarımıyla Kullanıcı ve Ürün Arasında Güçlü Bağ Kurun
Etkileşim tasarımı, kullanıcının dijital ürün içerisinde yaptığı her işlemi ve sistemin bu işleme verdiği karşılığı planlar.
Bir butonun görünümü UI tasarımının konusu olabilir. Butonun tıklandığında nasıl davranacağı, işlem sürerken ne göstereceği ve hata oluştuğunda kullanıcıyı nasıl yönlendireceği ise etkileşim tasarımı kapsamında değerlendirilir.
Başarılı bir etkileşim tasarımı:
- Kullanıcı hedeflerini anlamalı
- Gereksiz adımları azaltmalı
- Sistem durumunu görünür göstermeli
- Açık geri bildirim sunmalı
- Hataları önlemeli
- Kullanıcıya kontrol vermeli
- Mobil ve erişilebilir kullanımı desteklemeli
- Gerçek kullanıcılarla test edilmelidir
Etkileşim tasarımı yalnızca başarılı senaryoyu planlamamalıdır. İnternet bağlantısının kesilmesi, kullanıcının yanlış bilgi girmesi, ürünün stokta olmaması veya işlemin tamamlanamaması gibi alternatif durumlar da tasarlanmalıdır.
Mikro etkileşimler, animasyonlar ve geçişler işlevi desteklediği sürece kullanıcı deneyimini geliştirebilir. Yalnızca görsel etki amacıyla kullanılan hareketler ise ürünü yavaşlatabilir ve kullanıcıyı zorlayabilir.
Etkileşimlerin başarısı yalnızca tasarım ekibinin görüşüyle değerlendirilmemelidir. Görev tamamlama oranı, hata sayısı, form terk oranı, dönüşüm ve kullanıcı geri bildirimleri düzenli biçimde ölçülmelidir.
Kullanıcıların sayfalara nasıl ulaştığını, hangi alanlarla etkileşime geçtiğini ve nerede ayrıldığını değerlendirmek için site içi davranışlar, teknik yapı ve site içi SEO optimizasyonu birlikte ele alınmalıdır.
Dijital ürünlerin teknoloji, iş süreçleri ve kullanıcı ihtiyaçlarıyla ortak biçimde geliştirilmesi için etkileşim tasarımı kapsamlı bir dijital dönüşüm yaklaşımının parçası olarak değerlendirilmelidir.
Etkileşim tasarımının web tasarımdaki UX ve UI ayrımıyla ilişkisini daha ayrıntılı incelemek isteyenler Web Tasarımda UX/UI Nedir, Neden Önemlidir? içeriğine de göz atabilir.
