Arayüz (UI) İnceleme
Bu arayüz (UI) tasarımını eleştir
Kıdemli bir ürün tasarımcısı gibi davranın. Bu arayüz (UI) tasarımını eleştirin:
[ekranı açıklayın veya bir açıklama/ekran görüntüsü yapıştırın]
Değerlendirme kriterleri: görsel hiyerarşi, boşluklandırma (spacing), tipografi, renk kullanımı ve tutarlılık. Nelerin iyileştirilmesi gerektiğini ve nedenini somut olarak belirtin.
Erişilebilirlik denetim kontrol listesi
Bu arayüzü WCAG 2.1 AA standartlarına göre erişilebilirlik sorunları açısından denetleyin:
[arayüzü açıklayın veya bileşenlerini listeleyin]
Şunları kontrol edin: renk kontrastı, klavye navigasyonu, odak durumları (focus states), ekran okuyucu uyumluluğu, dokunma hedefi (touch target) boyutları ve ARIA kullanımı. Sorunları önem derecesine göre listeleyin.
Mobil uyumluluk incelemesi
Bu arayüz tasarımını mobil uyumluluk (responsiveness) açısından inceleyin:
[yerleşimi açıklayın veya bileşenleri listeleyin]
Tespit edin: iyi ölçeklenmeyecek öğeler, çok küçük dokunma hedefleri, taşma yapacak içerikler ve küçük ekranlardaki boşluklandırma sorunları. Somut düzeltme önerileri sunun.
Görsel hiyerarşi analizi
Bu arayüzün görsel hiyerarşisini analiz edin:
[ekran yerleşimini ve öğelerini açıklayın]
Tespit edin: kullanıcının gözünün ilk nereye odaklanacağı, hiyerarşinin hedeflenen kullanıcı amacıyla örtüşüp örtüşmediği ve taramayı/kavramayı kolaylaştırmak için hangi değişikliklerin yapılabileceği.
Kullanıcı Deneyimi (UX) Araştırması
Kullanıcı mülakatı soruları yaz
[Konuyu veya özelliği, örn. 'insanların kişisel finanslarını nasıl yönettikleri'] araştırmak için bir kullanıcı mülakat rehberi hazırlayın.
Şunları dahil edin: 3 ısınma sorusu, 8–10 temel soru ve 2 kapanış sorusu. Açık uçlu ifadeler kullanın. Katılımcıyı yönlendirmekten (leading questions) kaçının.
Kullanıcı personası oluştur
[Ürün veya özellik] için gerçekçi bir kullanıcı personası oluşturun.
Hedef kullanıcı: [genel olarak tanımlayın, örn. 'serbest çalışan grafik tasarımcılar, 28–40 yaş']
Şunları ekleyin: isim, yaş, meslek, hedefler, hayal kırıklıkları/zorluklar, temel davranışlar ve kısa bir alıntı. Gerçekçi ve aksiyon alınabilir olsun.
Kullanılabilirlik testi senaryosu
[Özellik veya akış, örn. 'ödeme akışı'] için bir kullanılabilirlik testi senaryosu yazın.
Şunları dahil edin: kolaylaştırıcı (moderator) girişi, onay/izin hatırlatması, gerçekçi bağlama sahip 4–6 görev senaryosu ve her görevden sonra sorulacak derinlemesine takip soruları. Doğru yolu doğrudan belli etmekten kaçının.
Özellik geri bildirimi anketi tasarımı
[Özellik, örn. 'yeni kullanıcı karşılama (onboarding) akışımız'] hakkında geri bildirim toplamak için bir kullanıcı anketi tasarlayın.
Şunları ekleyin: 1 NPS veya CSAT sorusu, 4–6 puanlama veya çoktan seçmeli soru ve 2 açık uçlu soru. Doldurma süresini 3 dakikanın altında tutun. En mantıklı soru sıralamasını önerin.
Tasarım Sistemleri
Bileşen isimlendirme standardı
Tasarım sistemimizdeki arayüz bileşenleri için bir isimlendirme kuralı (naming convention) önerin.
Bağlam: [örn. 'React ve Figma kullanıyoruz; atomik ve birleşik bileşenlerin bir karışımına sahibiz']
Şunları kapsayın: bileşen adları, varyant isimlendirmeleri, prop adlandırmaları ve Figma'daki dosya/katman isimlendirmeleri. Button, Modal ve Form Field bileşenleri için örnekler verin.
Bileşen dokümantasyonu yaz
Bu arayüz bileşeni için açık ve anlaşılır bir dokümantasyon yazın:
Bileşen: [bileşen adı, örn. 'Toast bildirimi']
Props/varyantlar: [bunları listeleyin]
Kullanım bağlamı: [nerede kullanıldığı]
Şunları ekleyin: açıklama, ne zaman kullanılmalı / kullanılmamalı, prop tablosu, erişilebilirlik notları ve bir kullanım örneği.
Design token yapısı
[Ürün veya tasarım sistemi adı] için bir design token yapısı önerin.
Marka renkleri: [temel renkleri listeleyin]
Tipografi: [yazı tiplerini veya ölçeği listeleyin]
Bağlam: [örn. web uygulaması, mobil uygulama veya her ikisi]
Token'ları şu şekilde düzenleyin: renk, tipografi, boşluk (spacing), kenar yuvarlama (border radius), gölge ve hareket (motion). Hem ilkel (primitive) hem de anlamsal (semantic) token örnekleri gösterin.
Model kütüphanesi (Pattern library) denetimi
Bileşen ve model kütüphanemizdeki tutarsızlıkları denetlememe yardımcı olun.
İşte mevcut bileşenlerimizin ve varyantlarımızın listesi:
[bileşen listesini yapıştırın]
Şunları tespit edin: aynı amaca hizmet eden mükerrer modeller, isimlendirme tutarsızlıkları, yeniden kullanılabilir bir bileşenin eksik olduğu boşluklar ve yeniden kullanılabilir olamayacak kadar spesifik kalmış bileşenler.
Tel Çerçeve ve Akış (Wireframing)
Özellik için kullanıcı akışı
[Özellik, örn. 'şifre sıfırlama'] için kullanıcı akışını (user flow) haritalandırın.
Kullanıcı hedefi: [kullanıcının neyi başarmak istediğini açıklayın]
Giriş noktası: [kullanıcının başladığı yer]
Kullanıcının attığı her adımı, karşılaştığı kararları ve olası hata veya uç durum yollarını listeleyin. Gerektiğinde dallanmalar içeren numaralandırılmış bir akış olarak biçimlendirin.
Uygulama bölümü bilgi mimarisi
[Uygulama bölümü, örn. 'bir SaaS panelinin ayarlar alanı'] için bilgi mimarisini (IA) önerin.
Kullanıcı türleri: [birden fazlaysa listeleyin]
Kullanıcıların gerçekleştirdiği temel görevler: [4–6 görevi listeleyin]
Üst düzey bölümler, alt bölümler ve her birinin içindeki içerik veya eylemlerle birlikte bir gezinme (navigation) yapısı önerin. Gruplandırmalarınızın gerekçelerini açıklayın.
Gezinme (Navigasyon) yapısı önerisi
[Ürün, örn. 'bir B2B proje yönetim aracı'] için bir gezinme (navigasyon) yapısı önerin.
Temel özellikler: [ana özellikleri listeleyin]
Kullanıcı rolleri: [varsa rolleri listeleyin]
Şunları önerin: birincil gezinme öğeleri, ikincil gezinme ve role dayalı erişimin nasıl yönetileceği. Hem masaüstü yan menü (sidebar) hem de mobil alt menü (bottom nav) modellerini göz önünde bulundurun.
Kullanıcı alıştırma (Onboarding) akışı tasarımı
[Ürün, örn. 'alışkanlık takip eden bir mobil uygulama'] için bir onboarding (kullanıcı karşılama) akışı tasarlayın.
Yeni kullanıcının hedefi: [değer elde etmek için neyi başarmaları gerektiği]
Gerekli temel kurulum adımları: [zorunlu adımları listeleyin, örn. 'ilk alışkanlığı oluştur']
Şunları önerin: ekran sırası, neyin hemen sorulacağı vs. neyin erteleneceği, ilerleme göstergesi ve atlama/daha sonra yap seçeneklerinin nasıl yönetileceği. Değere ulaşma süresini (time-to-value) mümkün olduğunca kısa tutun.
Mikro Metinler (Microcopy)
Hata mesajları yazımı
Bu senaryolar için net ve kullanıcı dostu hata mesajları yazın:
[hata senaryolarını listeleyin, örn. 'geçersiz e-posta biçimi', 'dosya çok büyük', 'oturum süresi doldu']
Her biri için şunları yazın: hata başlığı, neyin yanlış gittiğine dair sade dille bir açıklama ve kullanıcının atması gereken adım. Ton: [örn. samimi, profesyonel, yalın].
Boş durum (Empty state) metinleri
Bu arayüz durumları için boş durum (empty state) metinleri yazın:
[durumları listeleyin, örn. 'arama sonucu yok', 'henüz bildirim yok', 'yüklenmiş dosya yok']
Her biri için: bir başlık, 1–2 cümlelik açıklama ve uygunsa bir eylem çağrısı (CTA) yazın. Ton: [örn. teşvik edici, nötr, eğlenceli]. 'Burada görülecek bir şey yok' gibi klişe dolgu ifadelerden kaçının.
Buton ve CTA metin varyasyonları
[Eylem veya özellik, örn. 'ücretsiz deneme başlatma'] için buton ve CTA metni varyasyonları yazın.
Bağlam: [butonun nerede göründüğü, örn. 'fiyatlandırma sayfası', 'boş durum ekranı', 'modal başlığı']
Ton: [örn. doğrudan, fayda odaklı, düşük sürtünmeli]
En iddialı olandan en az iddialı olana doğru sıralanmış 6–8 etiket seçeneği sunun. Avantaj ve dezavantajlarını açıklayın.
İpucu (Tooltip) ve yardımcı metinler
Bu arayüz öğeleri için ipucu (tooltip) ve yardımcı metinler yazın:
[öğeleri listeleyin, örn. 'API anahtarı alanı', 'fatura dönemi anahtarı', 'bildirim sıklığı ayarı']
Her biri için: kısa bir ipucu (15 kelimenin altında) ve satır içi kullanım için isteğe bağlı daha uzun bir yardımcı metin yazın. Zekice görünmekten ziyade netliğe öncelik verin.
Sunum ve Paydaş İletişimi
Tasarım kararı gerekçelendirmesi
Bu tasarım kararı için net bir gerekçe yazmama yardımcı olun:
Karar: [neye karar verildiğini açıklayın, örn. 'Sekmeli yerleşimden tek bir kaydırılabilir sayfaya geçtik']
Bağlam: [hangi sorunu çözdüğü veya bunu hangi veri/içgörünün tetiklediği]
Değerlendirilen alternatifler: [1–2 tane listeleyin]
Paydaşlarla paylaşabileceğim; sorunu, kararı, neden doğru tercih olduğunu ve varsa ödünleşimleri (trade-offs) kapsayan öz bir açıklama yazın.
Tasarım inceleme sunumu taslağı
[Özellik veya proje adı] için bir tasarım inceleme sunumu taslağı oluşturun.
Hedef kitle: [örn. 'ürün ekibi + mühendislik liderleri']
İncelemenin amacı: [örn. 'teslim öncesi onay almak' veya 'tasarım yönü hakkında geri bildirim toplamak']
Aşama: [örn. 'erken konsept', 'olgunlaştırılmış taslaklar', 'nihai tasarımlar']
Şunları ekleyin: önerilen bölümler, her birinde nelerin gösterileceği, süre dağılımı ve geri bildirim talebinin nasıl çerçeveleneceği.
Öncesi/sonrası karşılaştırma anlatısı
Bu tasarım iyileştirmesi için bir öncesi/sonrası anlatısı yazın:
Öncesi: [eski tasarımı ve sorunlarını açıklayın]
Sonrası: [yeni tasarımı ve nelerin değiştiğini açıklayın]
Metrikler veya kullanıcı geri bildirimi (varsa): [varsa yapıştırın]
Bir vaka analizinde (case study) veya paydaş güncellemesinde kullanabileceğim; sorunu, içgörüyü ve değişikliğin etkisini açıklayan kısa bir hikaye yazın.
Paydaş geri bildirim özeti
Tasarım incelemesinden çıkan paydaş geri bildirimlerini özetlememe ve sentezlememe yardımcı olun:
[ham notları veya geri bildirimleri yapıştırın]
Şunlara göre düzenleyin: ana temalar, somut uygulanabilir talepler, netleştirilmesi gereken sorular ve birbiriyle çelişen geri bildirimler. Kullanıcı araştırması veya tasarım ilkeleriyle çelişen maddeleri işaretleyin.