11. SınıfGrafik ve Fotoğraf / Tasarım

Kullanıcı Deneyimi

Grafik ve Fotoğraf / Tasarım · 11. Sınıf · Arayüz Tasarımı

Konu Anlatımı

Kullanıcı Deneyimi

Kullanıcı deneyimi; bir ziyaretçinin kampanya sayfasına giriş anından hedefine ulaşmasına kadar yaşadığı bütünün adıdır. Estetik bu deneyimin yalnızca bir parçasıdır; sayfanın açılış hızı, metnin okunabilirliği, düğmelerin konumu ve kullanıcının kendini kaybolmuş hissedip hissetmemesi de aynı derecede belirleyicidir. 11. sınıf düzeyinde konu, tek ekranlı afiş mantığından çıkarılarak çok adımlı dijital süreçlerin tasarımı olarak ele alınır.

1. Brief'ten Deneyime: Sürecin Yeri

Tasarım işi, müşterinin beklentilerini içeren brief ile başlar. Geçerli bir brief dört soruyu yanıtlar: kim (hedef kitle), ne (iletilecek tek ana mesaj), nerede (yayın ortamı) ve ne zaman (teslim takvimi). Bu bilgiler yazılmamışsa tasarımcı varsayım yapar; varsayım revizyon sayısını artırır, revizyon da takvimi kaydırır. Hedef kitle, persona adı verilen kurgusal kullanıcı kartında somutlaştırılır: yaşı, bütçesi, günde geçirdiği süre ve en sık kullandığı cihaz gibi ayrıntılar kartta yer alır.

Kullanıcı tek bir anda değil, yolculuğun tamamında değerlendirilir. Ziyaretçi farkındalık, karşılaştırma, karar ve dönüşüm adımlarından geçer; her adımda farklı bilgi ihtiyacı doğar. Tasarımcı bu dört adım için ekranı ayrı ayrı kutu içi (wireframe) çizimlerle kurar, sonra bütünün akışını ziyaretçi gözüyle tekrar gezer.

2. Temel Kavramlar ve Ölçülebilir Göstergeler

Kullanılabilirlik, bir görevin hatasız ve az çabayla bitirilebilmesidir; erişilebilirlik, görme, işitme ya da motor kısıtları olan kullanıcıların da aynı görevi yapabilmesidir; memnuniyet ise deneyimin subjektif değerlendirmesidir. Bunlar ezberlenmez, ölçülür. Aşağıdaki tabloda yaygın kabul gören asgari ölçütler verilmiştir.

ÖlçütAsgari DeğerGerekçe
Normal metin kontrast oranı4,5: 1Beyaz zemin üzerine açık gri metin çoğu zaman bu sınırın altında kalır
Büyük metin kontrast oranı3: 124 px üzeri ya da 18,66 px üzeri kalın yazılar bu sınırla yetinir
Dokunma alanı44 x 44 pikselKüçük hedeflerde parmak hatalı basar, hüsran artar
Gövde metni boyutu16 piksel ve üzeriKüçük yazıda kullanıcı yakınlaşmak zorunda kalır
Sistem yanıt süresi1 saniyenin altında1 ile 10 saniye arasında dikkat dağılır, akış korunamaz

Kontrast oranı, tonların göreli parlaklığı üzerinden hesaplanır: (açık ton + 0,05) / (koyu ton + 0,05). Beyaz ile siyahın oranı 21: 1'dir. Beyaz zemin üzerine #999999 gri metin yaklaşık 2,85: 1 verir ve AA sınırının altına düşer; aynı metin #767676 koyuluğuna indiğinde oran yaklaşık 4,54: 1 olur ve sınır geçilir.

3. Adım Adım Yöntem: Brief'ten Prototipe

Tekrarlanabilir bir iş sırası hem zamanı hem de revizyonu azaltır:

  1. Brief'i dört başlıkta özetle ve tek cümlelik hedefi müşteriden yazılı teyit al.
  2. Hedef kitlenin ihtiyacını persona kartı ile senaryoya dönüştür.
  3. Bilgi mimarisini site haritası olarak çiz; her bilgi en fazla üç tıklamada erişilebilir olsun.
  4. Yerleşimi gri tonlardaki kutu içi çizimde kur; renk, fotoğraf ve logo bu aşamaya sonra girer.
  5. Yüksek çözünürlüklü prototipi en az beş kullanıcıyla test et; yaygın bulguya göre beş kullanıcı, sorunların yaklaşık %85'ini ortaya çıkarır.
  6. Testte tekrar eden sorunları sıklık ve şiddete göre önceliklendir, arayüzü düzelt, ancak ondan sonra görsel süsleme aşamasına geç.

4. Örnek Uygulama: Kamp Kayıt Sayfası

Bir yaz kampının kayıt sayfasında tek mesaj erken kayıt indirimidir. İlk ekranda kampanya görseli, indirim oranı ve Kayıt Ol düğmesi bulunur; telefon numarası ekranın altına sabitlenir, form ise ad-soyad, veli telefonu ve okul bilgisi olmak üzere üç alanla sınırlandırılır. Ödeme adımına geçildiğinde adım göstergesi kullanıcının nerede olduğunu sürekli gösterir. Böylece kullanıcı kaybolmaz, hata yaparsa hangi adımda olduğunu anında görür.

5. Sınav ve Atölye Odaklı Değerlendirme

Sınavda konu; ölçütlerin değeri, adımların sırası ve kontrast oranı benzeri küçük hesaplarla ölçülür. Atölye çıktısı ise brief özeti föyü, persona kartı, site haritası, kutu içi çizim ve test raporudur. Bu beş çıktı birlikte değerlendirilir; yalnızca güzel görünen ama test edilmemiş arayüz tam iş sayılır.

Ne Öğreneceğiz

11. sınıf arayüz tasarımında brief, hedef kitle, erişilebilirlik ölçütleri ve prototip-test akışını kapsar. Bu konuda ögrenme çıktıları:

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Beyaz zemin üzerinde #999999 koyuluğunda metin kullanılmıştır. WCAG AA normal metin sınırı 4,5: 1'dir. Durumu değerlendirip düzeltme öneriniz.

  1. Adım 1: Beyazın göreli parlaklığı 1,00, #999999 için yaklaşık 0,319 alınır.
  2. Adım 2: Oran = (1,00 + 0,05) / (0,319 + 0,05) = 1,05 / 0,369 ≈ 2,85: 1 hesaplanır.
  3. Adım 3: 2,85 değeri 4,5 sınırının altında kaldığından metin koyulaştırılır; #767676 ile oran yaklaşık 4,54: 1 olarak sınırın üstüne çıkar.

Sonuç/cevap: Cevap: Oran yaklaşık 2,85: 1 olduğundan metin uygundur; renk #767676 koyuluğuna indirilerek (yaklaşık 4,54: 1) düzeltilir.

İleri Örnek

Daha ileri bir uygulama:

Soru: Her kullanıcı 30 dakika test ve 10 dakika görüşme yapacaktır. Beş kullanıcının test süresine 2 saatlik raporlama süresi eklendiğinde toplam iş süresi kaçtır?

  1. Adım 1: Kullanıcı başına süre 30 + 10 = 40 dakika bulunur.
  2. Adım 2: Beş kullanıcı için 5 x 40 = 200 dakika, yani 3 saat 20 dakika hesaplanır.
  3. Adım 3: 120 dakikalık raporlama süresi eklenince 200 + 120 = 320 dakika, yani 5 saat 20 dakika olur.

Sonuç/cevap: Cevap: Test turları 3 saat 20 dakika, raporlama ile birlikte toplam 5 saat 20 dakikadır.

Karşılaştırma Tablosu

KavramAçıklama
Kullanıcı deneyimi yalnızca renk ve tipoKullanıcı deneyimi yalnızca renk ve tipografi değil; hız, düzen, geri bildirim ve güven bileşenlerinin tamamıdır.
Brief yazıya dökülmeden tasarım başlamazBrief yazıya dökülmeden tasarım başlamaz; sözlü beklenti revizyon tartışmasının en yaygın nedenidir.
Renk seçimi ve yerleşim, kontrast ölçütüRenk seçimi ve yerleşim, kontrast ölçütü sağlandıktan sonra yapılır; estetik ölçüyü geçmez.
Her etkileşim öğesi bir geri bildirim veHer etkileşim öğesi bir geri bildirim verir: basılmış, yükleniyor, hata oldu ya da tamamlandı.
Erişilebilirlik sonradan eklenen bir katErişilebilirlik sonradan eklenen bir katman değil, taslak aşamasında karar verilen bir durumdur.
Test bulguları sıklık ve etkiye göre öncTest bulguları sıklık ve etkiye göre önceliklendirilir; tek kullanıcının bulgusu da kayda geçer.

Sık Yapılan Hatalar

Kontrast oranını renk seçildikten sonra kontrol etmek: Oran sınırsın altındaysa palet baştan değişmelidir, aksi hâlde tüm görseller yeniden düzenlenir.

Brief'i sözlü alıp yazıya dökmemek: Hatırlanan brief ile istenen iş farklıdır; revizyon tartışmalarının en sık kaynağı budur.

Kutu içi çizim yerine doğrudan renkli tasarıma başlamak: Yerleşim hatası renkli tasarımda fark edilmez, düzeltme maliyeti katlanır.

Erişilebilirliği ayrı bir özellik saymak: Görme kısıtlı kullanıcı ekran okuyucu ile okur; sıra dışı başlık atlamaları ve kontrastsız metin okumayı imkânsız kılar.

Testi tasarımcının kendisiyle yapmak: Tasarımcı işin nasıl çalıştığını bildiği için adımları tamamlar; gerçek bulgu ancak işi ilk kez gören kullanıcıdan gelir.

Kendini Dene

Soru: Bir müşteriden şu brief alınmıştır: 15-18 yaş öğrenciler için yaz kampı tanıtımı, Instagram story ve web sayfası, tek mesaj erken kayıt indirimi, 5 Haziran teslimi. Brief'i kim, ne, nerede ve ne zaman başlıklarıyla ayrıştırarak yazınız; ardından ana sayfada gövde metninin 14 piksel, kayıt düğmesinin dokunma alanının 38 x 38 piksel olduğu görülmüştür. Bu iki bulguyu WCAG ölçütüne göre değerlendirip düzeltme önerilerinizi belirtiniz.

Örnek cevap: Puanlama anahtarı: Kim başlığının 15-18 yaş öğrenci ve velisi olarak yazılması 2 puan; ne başlığının yaz kampı tanıtımı ve tek mesajın erken kayıt indirimi olması 3 puan; nerede başlığının Instagram story ve web sayfası olarak yazılması 2 puan; ne zaman başlığının 5 Haziran teslimi olarak yazılması 1 puan; gövde metni 14 pikselin 16 piksel sınırının altında olduğunun tespiti ve en az 16 piksele çıkarılması önerisi 4 puan; dokunma alanının 38 x 38 pikselin 44 x 44 piksel sınırının altında olduğunun tespiti ve büyütülmesi önerisi 4 puan; iki bulgunun da erişilebilirlik ölçütüne dayandırılarak gerekçeli yazılması 4 puan. Toplam 20 puan.

Özet

Kullanıcı deneyimi; brief ile başlayan, persona ve kullanıcı yolculuğu ile şekillenen, bilgi mimarisi, kutu içi çizim ve prototiple kurulan, kullanılabilirlik testiyle doğrulanan ölçülebilir bir süreçtir. Kontrast 4,5: 1, dokunma alanı 44 x 44 piksel, erişim en fazla üç tıklama ve test beş kullanıcı gibi sayısal ölçütler, deneyimin kalitesini fikir düzeyinden çıkarıp denetlenebilir hâle getirir.

Kullanıcı Deneyimi — Sık Sorulan Sorular

Kullanıcı Deneyimi nedir?

Kullanıcı deneyimi; bir ziyaretçinin kampanya sayfasına giriş anından hedefine ulaşmasına kadar yaşadığı bütünün adıdır. Estetik bu deneyimin yalnızca bir parçasıdır; sayfanın açılış hızı, metnin okunabilirliği, düğmelerin konumu ve kullanıcının kendini kaybolmuş hissedip hissetmemesi de aynı derecede belirleyicidir…

Kullanıcı Deneyimi konusunda ne öğrenilir?

Kullanıcı deneyimi yalnızca renk ve tipografi değil; hız, düzen, geri bildirim ve güven bileşenlerinin tamamıdır.

Kullanıcı Deneyimi konusunda sık yapılan hatalar nelerdir?

Kontrast oranını renk seçildikten sonra kontrol etmek: Oran sınırsın altındaysa palet baştan değişmelidir, aksi hâlde tüm görseller yeniden düzenlenir. Brief'i sözlü alıp yazıya dökmemek: Hatırlanan brief ile istenen iş farklıdır; revizyon tartışmalarının en sık kaynağı budur.

Kullanıcı Deneyimi için hangi formüller ve kurallar kullanılır?

Kontrast oranı = (açık tonun göreli parlaklığı + 0,05) / (koyu tonun göreli parlaklığı + 0,05). · Beyaz ile siyah arasındaki kontrast 21: 1, AA normal metin sınırı 4,5: 1, büyük metin sınırı 3: 1'dir. · Brief dört soruya bağlanır: kim, ne, nerede, ne zaman; dördü de yazılı olmalıdır. · Bilgi erişimi en fazla üç…

Kullanıcı Deneyimi kazanımları nelerdir?

Müşteri brief'ini hedef kitle, tek mesaj, yayın ortamı ve teslim takvimi başlıklarıyla ayrıştırır. Persona ve kullanıcı yolculuğu haritası ile hedef kitlenin karar adımlarını belirler. WCAG kontrast oranı ve dokunma alanı ölçütlerini erişilebilir bir arayüzde uygular.

Kullanıcı Deneyimi Kazanımları

Örnek Sorular ve Çözümleri

Örnek Soru 1 kolay

Bir kullanıcı deneyimi projesinde doğru ilk adım aşağıdakilerden hangisidir?

  1. A) Brief'i dört başlıkta özetleyip tek cümlelik hedefi yazılı teyit almak
  2. B) Doğrudan yüksek çözünürlüklü kampanya görselini tasarlamak
  3. C) Renk paletini belirleyip logo kullanımını planlamak
  4. D) Yazı tipi denemeleri yapıp müşteriye üç seçenek sunmak
Cevabı göster

Doğru cevap: A) Brief'i dört başlıkta özetleyip tek cümlelik hedefi yazılı teyit almak

Brief'i dört başlıkta kavramı Kullanıcı Deneyimi konusunun temel bir kavramıdır. Detaylar konu anlatımında verilmiştir.

Örnek Soru 2 orta

Beyaz zemin üzerinde #999999 koyuluğunda metnin kontrast oranı yaklaşık kaçtır ve AA sınırını geçer mi?

  1. A) 21: 1, geçer
  2. B) 4,5: 1, geçer
  3. C) 3: 1, geçmez
  4. D) 2,85: 1, geçmez
Cevabı göster

Doğru cevap: D) 2,85: 1, geçmez

Beyazın parlaklığı 1,00, #999999 için yaklaşık 0,319'dur; oran (1,05 / 0,369) ≈ 2,85: 1 çıkar. Bu değer 4,5: 1 sınırının altında kaldığından metin AA ölçütünü geçmez.

Örnek Soru 3 zor

Bir arayüzde işlemin sonucunun 4 saniye sonra görünmesi kullanıcı deneyimini nasıl etkiler?

  1. A) 1 saniyenin altında kaldığı için akış sorunsuz devam eder
  2. B) Yalnızca renk paetini etkiler, akış bozulmaz
  3. C) 1 ile 10 saniye aralığında dikkat dağıldığı için akış korunamaz
  4. D) Etkisi yoktur, kullanıcı beklemeye alışkındır
Cevabı göster

Doğru cevap: C) 1 ile 10 saniye aralığında dikkat dağıldığı için akış korunamaz

1 ile 10 kavramı Kullanıcı Deneyimi konusunun temel bir kavramıdır. Detaylar konu anlatımında verilmiştir.

Sıradaki adım

Konu anlatımları hesapsız okunur. Quiz, slayt ve deneme için hesap gerekir.

DersTeders ile devam et

Grafik ve Fotoğraf / Tasarım için çalışma yolu

  1. OkuKonu anlatımını bu sayfada bitir.
  2. Soru çözÖrnekleri çöz, cevabı açıklamayla karşılaştır.
  3. Quiz ile pekiştirHesapla kendini ölç.

Slaytla adım adım öğren · Tüm dersler · Ana sayfa

Hesap açTüm dersleri keşfet

Konu anlatımları hesapsız okunur; quiz, slayt ve deneme için hesap gerekir.

Bu sayfa Kullanıcı Deneyimi konusunun anlatımını, kazanımlarını ve örnek sorularını içerir. Konuyla ilgili tüm sorular için testi çöz, diğer konular için DersTeders ana sayfasına geçebilirsin.

Bu konunun öğretmen materyallerini (ders planı, çalışma kâğıdı, çözümlü soru bankası, rubrik) yazdırabilirsin: Yazıcı çıktısı modülünü aç