<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Form Validation - Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım</title>
	<atom:link href="https://poryaz.com/tag/form-validation/feed/" rel="self" type="application/rss+xml" />
	<link>https://poryaz.com</link>
	<description>Mobil Arayüz Tasarımı, Mobile Ui/UX Designer, Mobile Interface Design, Web Arayüz Tasarımı, Burak Poryaz</description>
	<lastBuildDate>Thu, 23 Jul 2026 17:04:34 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>

<image>
	<url>https://poryaz.com/wp-content/uploads/2023/11/cropped-favicon-1-32x32.png</url>
	<title>Form Validation - Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım</title>
	<link>https://poryaz.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>UI/UX Tasarımda Empty State ve Error State Neden Önemli?</title>
		<link>https://poryaz.com/ui-ux-tasarimda-empty-state-error-state/</link>
		
		<dc:creator><![CDATA[poryaz]]></dc:creator>
		<pubDate>Thu, 23 Jul 2026 17:04:34 +0000</pubDate>
				<category><![CDATA[Growth]]></category>
		<category><![CDATA[Product Design]]></category>
		<category><![CDATA[Türkçe]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[Design System]]></category>
		<category><![CDATA[Empty State]]></category>
		<category><![CDATA[Error State]]></category>
		<category><![CDATA[Form Validation]]></category>
		<category><![CDATA[UI/UX Tasarım]]></category>
		<category><![CDATA[UX Writing]]></category>
		<guid isPermaLink="false">https://poryaz.com/ui-ux-tasarimda-empty-state-error-state/</guid>

					<description><![CDATA[<p>UI/UX tasarımda empty state ve error state çoğu zaman küçük detay gibi görünür ama gerçek ürün kalitesini, kullanıcı güvenini ve tamamlanma oranını doğrudan etkiler.</p>
<p>The post <a href="https://poryaz.com/ui-ux-tasarimda-empty-state-error-state/">UI/UX Tasarımda Empty State ve Error State Neden Önemli?</a> first appeared on <a href="https://poryaz.com">Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>Bir ürünün kalitesi sadece ana ekranda belli olmaz.</p>
<p>Bazen asıl kalite, hiçbir veri yokken ya da bir şeyler yanlış gittiğinde ortaya çıkar.</p>
<p>Yani empty state ve error state dediğimiz alanlarda.</p>
<p>Bunlar küçük detay gibi görünür.</p>
<p>Ama kullanıcı açısından çok kritik anlardır.</p>
<p>Çünkü kullanıcı tam o anda şunu düşünür:</p>
<p><strong>Burada ne oldu ve şimdi ne yapmam gerekiyor?</strong></p>
<p>İyi tasarım bu soruya hızlı cevap verir.</p>
<p>Kötü tasarım ise kullanıcıyı boşlukta bırakır.</p>
<h2>Empty state nedir?</h2>
<p>Empty state, bir ekranda gösterilecek içerik henüz olmadığında ortaya çıkan durumdur.</p>
<p>Mesela yeni açılmış bir dashboard.</p>
<p>Henüz eklenmiş görev yok.</p>
<p>Arama sonucu bulunamadı.</p>
<p>Sepet boş.</p>
<p>Bildirim yok.</p>
<p>Kullanıcı tüm dosyaları sildi.</p>
<p>Bunların hepsi empty state olabilir.</p>
<p>Buradaki hata, bu ekranı sadece boş bırakmaktır.</p>
<p>Çünkü kullanıcı boş ekran görünce sistemin çalışıp çalışmadığından emin olamayabilir.</p>
<p>Bu gerçekten boş mu?</p>
<p>Yüklenmedi mi?</p>
<p>Ben mi yanlış yaptım?</p>
<p>Bu soruları düşündürmemek gerekiyor.</p>
<h2>İyi empty state ne yapar?</h2>
<p>İyi bir empty state üç şeyi net anlatır:</p>
<ul>
<li>Burada neden içerik yok?</li>
<li>Normalde burada ne görünecek?</li>
<li>Kullanıcı şimdi ne yapabilir?</li>
</ul>
<p>Bu kadar.</p>
<p>Uzun açıklamaya gerek yok.</p>
<p>İyi bir boş durum ekranı kullanıcıyı sakinleştirir ve bir sonraki adıma taşır.</p>
<p>Mesela “Henüz proje yok” demek tek başına zayıf kalabilir.</p>
<p>Daha iyi yaklaşım şudur:</p>
<p>Henüz proje oluşturmadın. İlk projenle görevlerini, dosyalarını ve ekip akışını burada takip edebilirsin.</p>
<p>Sonra net bir aksiyon:</p>
<p>Yeni proje oluştur.</p>
<p>Bu kadar basit.</p>
<h2>Error state nedir?</h2>
<p>Error state, kullanıcı bir hata yaptığında ya da sistem bir işlemi tamamlayamadığında görünen durumdur.</p>
<p>Form hatası olabilir.</p>
<p>Ödeme hatası olabilir.</p>
<p>Dosya yüklenememiş olabilir.</p>
<p>Sunucu cevap vermemiş olabilir.</p>
<p>Bağlantı kesilmiş olabilir.</p>
<p>Burada kritik olan şey, kullanıcıyı suçlamadan doğru bilgi vermektir.</p>
<p>“Hata oluştu” demek genelde yetersizdir.</p>
<p>Kullanıcı şunu bilmek ister:</p>
<ul>
<li>Ne yanlış gitti?</li>
<li>Bu benim düzeltebileceğim bir şey mi?</li>
<li>Nasıl devam edeceğim?</li>
</ul>
<p>İyi hata mesajı bu üç soruya cevap verir.</p>
<h2>Kötü hata mesajı kullanıcıyı yorar</h2>
<p>Bir form düşün.</p>
<p>Kullanıcı tüm alanları dolduruyor.</p>
<p>Kaydet diyor.</p>
<p>Sonra üstte küçük bir mesaj çıkıyor:</p>
<p>“Geçersiz bilgi.”</p>
<p>Hangi bilgi geçersiz?</p>
<p>Neden geçersiz?</p>
<p>Nasıl düzeltilecek?</p>
<p>Belli değil.</p>
<p>Bu durumda kullanıcı tekrar tekrar denemek zorunda kalır.</p>
<p>Bu da güveni azaltır.</p>
<p>Özellikle ödeme, kayıt, başvuru, rezervasyon gibi kritik akışlarda kötü error state direkt kayıp yaratabilir.</p>
<h2>Form hatalarında en basit kural</h2>
<p>Hata mesajı problemli alanın yanında ya da çok yakınında olmalı.</p>
<p>Kullanıcı hatayı aramamalı.</p>
<p>Ayrıca sadece kırmızı renk kullanmak yeterli değil.</p>
<p>Metin de olmalı.</p>
<p>Çünkü herkes rengi aynı şekilde algılamaz.</p>
<p>Accessibility tarafında bu çok önemli.</p>
<p>Örnek:</p>
<p>Zayıf mesaj: “Hatalı giriş.”</p>
<p>Daha iyi mesaj: “E-posta adresi @ işareti içermeli.”</p>
<p>Daha iyi mesaj kullanıcıya hem problemi hem çözümü verir.</p>
<h2>Empty state sadece süs değildir</h2>
<p>Bazı ürünlerde empty state alanları çok süslü illüstrasyonlarla geçiştiriliyor.</p>
<p>İllüstrasyon olabilir.</p>
<p>Ama tek başına yetmez.</p>
<p>Boş durumun amacı ekranı sevimli göstermek değil, kullanıcıya yön vermektir.</p>
<p>Bu yüzden önce metin ve aksiyon düşünülmeli.</p>
<p>Görsel sonra gelir.</p>
<p>Kullanıcı o ekranda neden olduğunu anlamıyorsa, görsel ne kadar güzel olursa olsun UX zayıf kalır.</p>
<h2>Product design açısından neden önemli?</h2>
<p>Empty state ve error state ürünün gerçek hayattaki davranışını gösterir.</p>
<p>Çünkü gerçek kullanıcı her zaman ideal senaryoda ilerlemez.</p>
<p>Veri olmayabilir.</p>
<p>Arama sonuç dönmeyebilir.</p>
<p>Form yanlış doldurulabilir.</p>
<p>İnternet kopabilir.</p>
<p>Yetki eksik olabilir.</p>
<p>İyi product design bu durumları baştan düşünür.</p>
<p>Sadece “happy path” tasarlamak yetmez.</p>
<p>Ürün, sorun çıktığında da kullanıcıyı taşıyabilmeli.</p>
<p>Bu konu design system tarafıyla da bağlantılı. Çünkü hata, boş durum, loading ve success state gibi yapılar component mantığı içinde düşünülürse ürün daha tutarlı olur. Bu temel için <a href="https://poryaz.com/design-systems-for-beginners-ui-ux-designers/">Design Systems for Beginners</a> yazısına bakabilirsin.</p>
<h2>UX writing burada çok belirleyici</h2>
<p>Empty state ve error state iyi yazı ister.</p>
<p>Çünkü bu ekranlarda kullanıcıya konuşan şey çoğu zaman metindir.</p>
<p>Kısa, net ve sakin olmak gerekir.</p>
<p>Kullanıcıyı suçlayan dilden kaçınmak gerekir.</p>
<p>“Yanlış girdiniz” yerine “Bu alan 8 karakterden kısa olamaz” demek daha iyidir.</p>
<p>“Bir hata oluştu” yerine “Dosya yüklenemedi. İnternet bağlantını kontrol edip tekrar deneyebilirsin” demek daha açıklayıcıdır.</p>
<p>İyi UX writing kullanıcının yükünü azaltır.</p>
<h2>Tasarımcı için pratik checklist</h2>
<p>Bir ekran tasarlarken sadece dolu halini değil, şu durumları da kontrol etmek lazım:</p>
<ul>
<li>İlk kullanımda içerik yoksa ne görünecek?</li>
<li>Arama sonucu yoksa kullanıcı nereye yönlenecek?</li>
<li>Liste tamamen silinirse ekran nasıl kalacak?</li>
<li>Formda hatalı alan nasıl gösterilecek?</li>
<li>Hata mesajı problemi açık söylüyor mu?</li>
<li>Kullanıcıya çözüm öneriliyor mu?</li>
<li>Sadece renk değil, metin de kullanılıyor mu?</li>
<li>Loading sonrası boş sonuç ile hata durumu karışıyor mu?</li>
<li>Mobilde mesajlar okunabilir mi?</li>
<li>Screen reader için anlamlı metin var mı?</li>
</ul>
<p>Bu checklist küçük görünür ama ürünü ciddi şekilde güçlendirir.</p>
<h2>Portfolio için de iyi bir detay</h2>
<p>Junior ya da mid-level tasarımcı portfolio hazırlarken sadece ana ekranları gösteriyor.</p>
<p>Ama empty state, error state, loading state gibi detayları göstermek fark yaratır.</p>
<p>Çünkü bu detaylar senin gerçek ürün düşündüğünü gösterir.</p>
<p>Bir işe alım yapan kişi şunu görür:</p>
<p>Bu kişi sadece güzel ekran değil, ürün davranışı da düşünüyor.</p>
<p>Portfolio tarafındaki bu yaklaşımı <a href="https://poryaz.com/junior-ui-ux-tasarimcilar-2026-nasil-one-cikar/">Junior UI/UX Tasarımcılar 2026’da Nasıl Öne Çıkar?</a> yazısında daha geniş anlatmıştım.</p>
<h2>Benim düşüncem</h2>
<p>Empty state ve error state tasarımın arka sokakları gibi görülüyor.</p>
<p>Ama bence ürün kalitesi en çok buralarda belli oluyor.</p>
<p>Çünkü kullanıcı tam bu anlarda desteğe ihtiyaç duyuyor.</p>
<p>İyi tasarım kullanıcıyı yalnız bırakmaz.</p>
<p>Ne olduğunu söyler.</p>
<p>Neden olduğunu açıklar.</p>
<p>Bir sonraki adımı gösterir.</p>
<p>Bu yüzden UI/UX tasarımda sadece güzel ana ekran yapmak yetmez.</p>
<p>Boş, hatalı, bekleyen ve başarılı durumları da düşünmek gerekir.</p>
<p>Gerçek ürün hissi burada başlar.</p>
<p>UI/UX ve product design tarafında daha fazla içerik için <a href="https://poryaz.com/category/ui-ux/">UI/UX</a>, <a href="https://poryaz.com/category/product-design/">Product Design</a> ve <a href="https://poryaz.com/category/growth/">Growth</a> kategorilerine bakabilirsin.</p>
<h2>Kaynak Sinyalleri</h2>
<ul>
<li><a href="https://www.nngroup.com/articles/error-message-guidelines/" rel="nofollow">Nielsen Norman Group &#8211; Error-Message Guidelines</a></li>
<li><a href="https://www.nngroup.com/articles/errors-forms-design-guidelines/" rel="nofollow">Nielsen Norman Group &#8211; Form Error Guidelines</a></li>
<li><a href="https://m2.material.io/design/communication/empty-states.html" rel="nofollow">Material Design &#8211; Empty States</a></li>
<li><a href="https://baymard.com/blog/inline-form-validation" rel="nofollow">Baymard Institute &#8211; Inline Form Validation</a></li>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html" rel="nofollow">W3C WCAG &#8211; Error Identification</a></li>
</ul><p>The post <a href="https://poryaz.com/ui-ux-tasarimda-empty-state-error-state/">UI/UX Tasarımda Empty State ve Error State Neden Önemli?</a> first appeared on <a href="https://poryaz.com">Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım</a>.</p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
