Bunu baştan net söylemek lazım.

İyi bir mobil uygulama arayüzü; kullanıcının ne yapmak istediğini, hangi sırayla ilerleyeceğini, nerede zorlanacağını ve sistemin ona nasıl cevap vereceğini düşünür.

Yani iş sadece UI değil.

UX, product design, içerik, teknik sınırlar ve gerçek cihaz davranışı da işin içindedir.

Önce problemi anlamak gerekir

Mobil ekran tasarımına direkt Figma açarak başlamak çoğu zaman acele olur.

Önce ürünün ne çözdüğünü anlamak gerekir.

Kullanıcı kim?

Bu uygulamayı neden açıyor?

En önemli aksiyon ne?

Kullanıcı hangi noktada karar veriyor?

Başarılı kullanım ne demek?

Bu sorular net değilse tasarım güzel görünse bile ürün tarafında zayıf kalabilir.

Ben bu yüzden mobil uygulama arayüz tasarımına başlamadan önce kısa bir problem notu çıkarmayı severim.

Kullanıcı akışını çıkarmadan ekran çizme

Mobil uygulama arayüzü ekran ekran değil, akış akış düşünülmeli.

Mesela kayıt akışı, ödeme akışı, onboarding akışı, arama akışı veya profil düzenleme akışı.

Kullanıcı bir ekrandan diğerine neden geçiyor?

Geri dönerse ne oluyor?

Hata alırsa ne görüyor?

İşlem başarılı olursa nereye gidiyor?

Bu soruların cevabı yoksa ekranlar birbirinden kopuk olur.

İyi mobil tasarımda her ekran bir sonraki adımı hazırlar.

Wireframe ile başlamak daha sağlıklı

Wireframe, tasarımın iskeletidir.

Renk, gölge, ikon ve görsel detaylara girmeden önce ekranın mantığını kurarsın.

Bu aşamada amaç güzel görünmek değil, doğru yerleşimi bulmaktır.

Başlık nerede?

Ana aksiyon nerede?

Form alanları hangi sırada?

Liste nasıl akıyor?

Boş ekran ne söylüyor?

Wireframe bu soruları hızlı cevaplar.

Yeni başlayan tasarımcılar bazen direkt final UI’a geçiyor.

Bu da sonradan çok revizyon doğuruyor.

Component mantığını erken kur

Mobil uygulama arayüz tasarımında component sistemi çok önemlidir.

Button, input, card, tab bar, header, list item, modal, toast, empty state ve error state gibi parçalar erken düşünülmeli.

Çünkü ürün büyüdükçe her ekranı elle toparlamak zorlaşır.

Componentler tutarlı olursa tasarım daha hızlı büyür.

Geliştirici tarafı da daha rahat ilerler.

Bu noktada design system düşüncesi lüks değil, temel ihtiyaçtır.

Bu konuyu daha geniş okumak için Design Systems for Beginners yazısına bakabilirsin.

Mobil ekran boyutlarını kontrol et

Mobil uygulama arayüz tasarımı tek bir ekran boyutunda bitmez.

Figma’da tasarım güzel görünebilir ama küçük ekranda bozulabilir.

Keyboard açıldığında buton kaybolabilir.

Safe area dikkate alınmadığında alt aksiyon home indicator alanına fazla yaklaşabilir.

Bu yüzden en az şu üç kontrolü yapmak iyi olur:

• Küçük telefon ekranı
• Standart modern telefon ekranı
• Büyük telefon veya tablet ekranı

Güncel ölçüler için Mobil Arayüz Tasarımı Ekran Boyutları Nedir?, iPhone özelinde ise iPhone Ekran Boyutları yazılarına bakabilirsin.

State tasarımlarını atlama

Mobil uygulama arayüzünde sadece ideal ekranı tasarlamak yetmez.

Gerçek üründe her zaman ideal durum yaşanmaz.

Veri gelmeyebilir.

İnternet yavaş olabilir.

Kullanıcı yanlış bilgi girebilir.

İşlem başarıyla tamamlanabilir.

Bu yüzden şu state’ler düşünülmeli:

• Loading state
• Empty state
• Error state
• Success state
• Disabled state
• Validation state

Bunlar küçük detay gibi görünür ama ürün kalitesini ciddi etkiler.

Bu konu için UI/UX Tasarımda Empty State ve Error State Neden Önemli? yazısı iyi tamamlayıcı olur.

İçerik de arayüzün parçasıdır

Mobil uygulama arayüzünde metinler çok önemlidir.

Buton metni, hata mesajı, boş ekran açıklaması, onboarding cümlesi ve form label’ları tasarımın parçasıdır.

“Devam” mı yazmalı?

“Kaydet” mi?

“Hesap oluştur” mu?

Bu küçük kararlar kullanıcı davranışını etkiler.

Bu yüzden arayüz tasarımı yaparken metinleri sonradan doldurulacak alan gibi görmemek lazım.

Metin, kullanıcıyı yönlendiren en önemli UI parçalarından biridir.

Prototype ile akışı test et

Mobil uygulama arayüz tasarımında prototype sadece sunum için yapılmaz.

Akışın çalışıp çalışmadığını görmek için yapılır.

Kullanıcı ilk ekrandan hedefe rahat gidebiliyor mu?

Geri dönüş mantıklı mı?

Modal kapanınca kullanıcı nerede kalıyor?

Hata mesajı akışı kesiyor mu?

Prototype bu soruları erkenden yakalar.

Bu yüzden final UI’dan önce basit bir prototype bile çok iş görür.

Handoff sadece ekran teslim etmek değildir

Geliştiriciye sadece Figma linki vermek çoğu zaman yetmez.

İyi handoff, ekranın davranışını da anlatır.

Hangi alan scroll olur?

Buton sticky mi kalır?

Liste boşsa ne gösterilir?

Keyboard açılınca form nasıl davranır?

Hata mesajı nerede çıkar?

Bu notlar ürün geliştirme sürecini çok rahatlatır.

Mobil arayüz tasarımında iyi tasarımcı, sadece ekrana değil uygulanabilirliğe de bakar.

AI bu süreçte nasıl yardımcı olur?

AI mobil uygulama arayüz tasarımında iyi bir yardımcı olabilir.

Akış alternatifi çıkarabilir.

Boş state metni yazabilir.

Error state senaryosu üretebilir.

Component listesi toparlayabilir.

Handoff notlarını düzenleyebilir.

Ama yine aynı şeyi söyleyeceğim.

AI’a iyi sonuç aldırmak için hazırlığın iyi olmalı.

Problem, kullanıcı, hedef, ekran listesi ve component mantığı net değilse AI sadece hızlı ama dağınık fikir üretir.

AI destekli tasarım mantığını Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısında ayrıca anlattım.

Kısa mobil uygulama arayüz tasarım checklist

• Problem net mi?
• Kullanıcı tipi belli mi?
• Ana akış çıkarıldı mı?
• Wireframe ile iskelet kuruldu mu?
• Component listesi hazır mı?
• Safe area kontrol edildi mi?
• Küçük ve büyük ekran testi yapıldı mı?
• Empty, error, loading ve success state tasarlandı mı?
• Metinler kullanıcıyı yönlendiriyor mu?
• Handoff notları geliştirici için yeterli mi?

Benim düşüncem

Mobil uygulama arayüz tasarımı, güzel ekran üretme işi değildir.

Güzel ekran bunun sadece görünen kısmı.

Asıl iş, kullanıcının işini daha kolay yapmasını sağlayan sistemi kurmak.

Akış doğru değilse UI parlatmak yetmez.

Component mantığı yoksa ürün büyüdükçe tasarım dağılır.

Ekran boyutları düşünülmediyse gerçek cihazda problem çıkar.

Bu yüzden mobil uygulama arayüz tasarımında iyi başlangıç şudur:

Önce problemi ve akışı anla, sonra ekranı güzelleştir.

Bence tasarımcıyı güçlü yapan şey de tam olarak bu sırayı doğru kurabilmesi.

Daha temel arayüz tanımı için Arayüz Tasarımı Nedir?, mobil UI tarafındaki ana konu için Mobil Arayüz Tasarımı Nedir? yazılarını okuyabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – 10 Usability Heuristics for User Interface Design
• Nielsen Norman Group – Journey Mapping 101
• Figma Learn – Guide to Components in Figma
• Apple Human Interface Guidelines – Layout
• Material Design – Interaction States

The post Mobil Uygulama Arayüz Tasarımı Nasıl Yapılır? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Arayüz tasarımı denince çoğu kişinin aklına ilk olarak güzel görünen ekranlar geliyor.

Renkler, butonlar, ikonlar, kartlar, menüler.

Bunlar tabii ki işin içinde var.

Ama bence arayüz tasarımını sadece görsel düzen gibi düşünmek eksik kalıyor.

Arayüz, kullanıcının dijital ürünle konuştuğu yerdir.

Kullanıcı bir butona basar, sistem cevap verir.

Kullanıcı bir form doldurur, sistem onu yönlendirir.

Kullanıcı hata yapar, arayüz ona ne olduğunu anlatır.

Bu yüzden arayüz tasarımı sadece ekranda ne göründüğü değil, kullanıcının neyi nasıl anlayacağı ve nasıl hareket edeceğidir.

Arayüz tasarımı nedir?

Arayüz tasarımı, bir dijital ürünün kullanıcı ile temas ettiği katmanı tasarlama işidir.

Bu bir mobil uygulama olabilir.

Bir web sitesi olabilir.

Bir SaaS paneli, dashboard, ödeme ekranı, üyelik formu veya ayarlar sayfası olabilir.

Arayüz tasarımında amaç şudur:

Kullanıcı ürünü açtığında ne yapacağını anlamalı, doğru yere kolay gitmeli, hata yaptığında kaybolmamalı ve işlem sonunda ne olduğunu net görmelidir.

Yani arayüz tasarımı, görsel tasarım ile kullanım mantığının birleştiği yerdir.

UI tasarımı ile arayüz tasarımı aynı şey mi?

Günlük kullanımda çoğu zaman aynı anlamda kullanılıyor.

UI, yani User Interface, kullanıcı arayüzü demektir.

Butonlar, input alanları, menüler, ikonlar, listeler, kartlar, tab bar, modal, dropdown gibi parçalar UI tarafına girer.

Fakat iyi UI sadece bu parçaları güzel dizmek değildir.

İyi UI şu sorulara cevap verir:

• Bu buton burada ne işe yarıyor?
• Kullanıcı bu alanı görünce ne anlayacak?
• Bu bilgi şu anda gerekli mi?
• Hata mesajı yeterince açık mı?
• Bir sonraki adım belli mi?
• Aynı component farklı yerde aynı davranıyor mu?

Bunlar çözülmeden sadece güzel görünen bir ekran yapmak, gerçek ürün tarafında zayıf kalabilir.

UX tasarımı burada nereye giriyor?

UX, yani kullanıcı deneyimi, arayüzün daha geniş tarafıdır.

UI ekranda gördüğün ve dokunduğun katmansa, UX o ekranın kullanıcının hayatında nasıl çalıştığıdır.

Mesela bir ödeme ekranı düşünelim.

Kart alanları güzel olabilir.

Buton rengi iyi olabilir.

Tipografi temiz olabilir.

Ama kullanıcı neden hata aldığını anlamıyorsa, ödeme sonrası ne olacağını bilmiyorsa veya gereksiz adımlarla uğraşıyorsa UX tarafında problem vardır.

Bu yüzden arayüz tasarımı yaparken sadece ekran değil, akış da düşünülmeli.

Kullanıcı nereden geldi?

Ne yapmak istiyor?

Hangi bilgiyi bekliyor?

Nerede duraksar?

Nerede hata yapar?

Bu sorular arayüz tasarımını daha güçlü hale getirir.

Mobil arayüz tasarımı neden ayrı düşünülmeli?

Mobil arayüz tasarımı, web arayüzünden farklı bazı gerçeklere sahip.

Ekran daha küçük.

Dokunma alanları önemli.

Keyboard ekranı kapatabiliyor.

Safe area, notch, tab bar, gesture alanları var.

Kullanıcı çoğu zaman hızlı hareket ediyor.

Bu yüzden mobil arayüz tasarımında sadelik daha kritik hale geliyor.

Her şeyi ekrana doldurmak yerine doğru bilgi sırası kurulmalı.

Birincil aksiyon net olmalı.

Butonlar parmakla rahat basılacak şekilde tasarlanmalı.

Form alanları sıkıştırılmamalı.

Boş, hata, yükleniyor ve başarılı durumları ayrıca düşünülmeli.

Bu konuya yakın olarak daha önce Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısında ekran boyutları ve responsive mantığını anlatmıştım.

Arayüz tasarımında component mantığı neden önemli?

İyi bir arayüz tek tek ekranlardan oluşmaz.

İyi bir arayüz, tekrar kullanılabilir kararların birleşimidir.

Buton nasıl davranır?

Input hata alınca nasıl görünür?

Liste boşsa ne gösterilir?

Kart içindeki görsel oranı ne olur?

Primary ve secondary aksiyonlar nasıl ayrılır?

Bu kararlar sistemli olursa ürün büyüdükçe arayüz dağılmaz.

Burada design system mantığı devreye giriyor.

Figma tarafında component, style ve library yapıları bu yüzden önemli.

Çünkü arayüz tasarımı artık sadece bir ekran çizmek değil, tekrar edilebilir bir sistem kurmak.

Bu konuda daha temel bir başlangıç için Design Systems for Beginners yazısına da bakılabilir.

Arayüz tasarımında en sık yapılan hatalar

Benim gördüğüm en yaygın hata, arayüzü sadece estetik taraftan ele almak.

Güzel renk, güzel kart, güzel icon tek başına yetmiyor.

Arayüz kullanıcıyı yönlendirmiyorsa işini yapmıyor demektir.

Diğer sık hatalar şunlar:

• Her şeyi aynı anda göstermek
• Birincil aksiyonu net yapmamak
• Hata mesajlarını geçiştirmek
• Boş ekranları tasarlamamak
• Mobil ekran boyutlarını test etmemek
• Componentleri tutarsız kullanmak
• Metinleri tasarımın parçası gibi düşünmemek
• Kullanıcı araştırması yapmadan ekran üretmek

Özellikle kullanıcı araştırması konusu arayüz tasarımını çok etkiler.

Çünkü kullanıcıyı anlamadan çizilen ekran, çoğu zaman tasarımcının kendi varsayımı olur.

Bu konu için UI/UX Tasarımda Kullanıcı Araştırması Yapmadan Ekran Tasarlamak Neden Riskli? yazısı iyi tamamlayıcı olur.

Arayüz örneklerine nasıl bakmak gerekir?

Arayüz örneklerine bakmak faydalı.

Ama sadece “güzel mi?” diye bakarsan çok şey kaçırırsın.

Ben arayüz örneklerine bakarken şunlara dikkat etmeyi daha doğru buluyorum:

• Bilgi sırası nasıl kurulmuş?
• Kullanıcı ilk neyi görüyor?
• Ana aksiyon nerede?
• İkincil aksiyonlar nasıl sakinleştirilmiş?
• Hata ve boş durum düşünülmüş mü?
• Mobilde dokunma alanları rahat mı?
• Aynı componentler tutarlı mı?
• Metinler kullanıcıyı yönlendiriyor mu?

Bu şekilde bakınca arayüz örnekleri sadece ilham panosu olmaktan çıkar.

Gerçek bir öğrenme aracına dönüşür.

AI arayüz tasarımını nasıl değiştiriyor?

AI artık arayüz tasarımında ciddi bir yardımcı.

Ekran taslağı çıkarabilir.

Alternatif akış önerebilir.

Form metinlerini sadeleştirebilir.

Empty state ve error state fikirleri verebilir.

Design system için component listesi hazırlatılabilir.

Ama burada kritik nokta şu:

AI’a sadece “bana güzel bir ekran yap” demek yeterli değil.

İyi sonuç için iyi hazırlık gerekir.

Ürünün amacı, kullanıcı tipi, akış, içerik önceliği, component mantığı ve sınırlar net olmalı.

Yoksa AI hızlı ekran üretir ama o ekran gerçek üründe çalışmayabilir.

Bu yüzden AI çağında arayüz tasarımcısının değeri bitmiyor.

Bence daha da artıyor.

Çünkü iyi tasarımcı artık sadece ekran çizen kişi değil, AI’ın doğru yönde çalışmasını sağlayan karar verici kişi oluyor.

Bu çizgide Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısını da okuyabilirsin.

İyi arayüz tasarımı için kısa kontrol listesi

Bir arayüz tasarımını değerlendirirken ben basit bir kontrol listesiyle ilerlemeyi seviyorum.

• Kullanıcı bu ekranda ne yapacağını hemen anlıyor mu?
• Başlık ve açıklama yeterince net mi?
• Ana aksiyon görsel olarak ayrışıyor mu?
• Gereksiz bilgi var mı?
• Boş, hata, yükleniyor ve başarı durumları düşünülmüş mü?
• Mobilde dokunma alanları rahat mı?
• Farklı ekran boyutlarında yapı bozuluyor mu?
• Componentler tutarlı mı?
• Metinler kullanıcıya yardım ediyor mu?
• Bu ekran ürünün asıl amacına hizmet ediyor mu?

Bu soruların cevabı netse arayüz büyük ihtimalle daha sağlamdır.

Net değilse, sorun sadece görselde değil; karar yapısında olabilir.

Benim düşüncem

Arayüz tasarımı benim için güzel ekran üretmekten daha fazlası.

Arayüz, ürünün kullanıcıyla konuşma biçimi.

Bu konuşma net, sakin ve tutarlı olursa kullanıcı ürüne daha kolay güvenir.

Bu konuşma karışık olursa en güzel görsel stil bile ürünü kurtarmayabilir.

Özellikle mobil arayüz tasarımı, UI/UX ve product design tarafında çalışan biri için bu bakış çok önemli.

Çünkü gerçek dünyada tasarladığımız şey sadece bir ekran değil.

Bir akış, bir karar sistemi, bir davranış ve bir deneyim tasarlıyoruz.

O yüzden iyi arayüz tasarımı şuradan başlıyor:

Kullanıcı neyi anlamalı, neyi yapmalı ve sistem ona nasıl cevap vermeli?

Bu soruya doğru cevap verdiğinde görsel tasarım zaten daha anlamlı hale geliyor.

UI/UX ve product design üzerine diğer yazılar için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – 10 Usability Heuristics for User Interface Design
• Nielsen Norman Group – The Definition of User Experience
• Figma Learn – Guide to Components in Figma
• Figma – Components, Styles, and Shared Library Best Practices
• Material Design – Interaction States

The post Arayüz Tasarımı Nedir? UI/UX ve Mobil Uygulama Tasarımı Açısından Basit Anlatım first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Bazen asıl kalite, hiçbir veri yokken ya da bir şeyler yanlış gittiğinde ortaya çıkar.

Yani empty state ve error state dediğimiz alanlarda.

Bunlar küçük detay gibi görünür.

Ama kullanıcı açısından çok kritik anlardır.

Çünkü kullanıcı tam o anda şunu düşünür:

Burada ne oldu ve şimdi ne yapmam gerekiyor?

İyi tasarım bu soruya hızlı cevap verir.

Kötü tasarım ise kullanıcıyı boşlukta bırakır.

Empty state nedir?

Empty state, bir ekranda gösterilecek içerik henüz olmadığında ortaya çıkan durumdur.

Mesela yeni açılmış bir dashboard.

Henüz eklenmiş görev yok.

Arama sonucu bulunamadı.

Sepet boş.

Bildirim yok.

Kullanıcı tüm dosyaları sildi.

Bunların hepsi empty state olabilir.

Buradaki hata, bu ekranı sadece boş bırakmaktır.

Çünkü kullanıcı boş ekran görünce sistemin çalışıp çalışmadığından emin olamayabilir.

Bu gerçekten boş mu?

Yüklenmedi mi?

Ben mi yanlış yaptım?

Bu soruları düşündürmemek gerekiyor.

İyi empty state ne yapar?

İyi bir empty state üç şeyi net anlatır:

• Burada neden içerik yok?
• Normalde burada ne görünecek?
• Kullanıcı şimdi ne yapabilir?

Bu kadar.

Uzun açıklamaya gerek yok.

İyi bir boş durum ekranı kullanıcıyı sakinleştirir ve bir sonraki adıma taşır.

Mesela “Henüz proje yok” demek tek başına zayıf kalabilir.

Daha iyi yaklaşım şudur:

Henüz proje oluşturmadın. İlk projenle görevlerini, dosyalarını ve ekip akışını burada takip edebilirsin.

Sonra net bir aksiyon:

Yeni proje oluştur.

Bu kadar basit.

Error state nedir?

Error state, kullanıcı bir hata yaptığında ya da sistem bir işlemi tamamlayamadığında görünen durumdur.

Form hatası olabilir.

Ödeme hatası olabilir.

Dosya yüklenememiş olabilir.

Sunucu cevap vermemiş olabilir.

Bağlantı kesilmiş olabilir.

Burada kritik olan şey, kullanıcıyı suçlamadan doğru bilgi vermektir.

“Hata oluştu” demek genelde yetersizdir.

Kullanıcı şunu bilmek ister:

• Ne yanlış gitti?
• Bu benim düzeltebileceğim bir şey mi?
• Nasıl devam edeceğim?

İyi hata mesajı bu üç soruya cevap verir.

Kötü hata mesajı kullanıcıyı yorar

Bir form düşün.

Kullanıcı tüm alanları dolduruyor.

Kaydet diyor.

Sonra üstte küçük bir mesaj çıkıyor:

“Geçersiz bilgi.”

Hangi bilgi geçersiz?

Neden geçersiz?

Nasıl düzeltilecek?

Belli değil.

Bu durumda kullanıcı tekrar tekrar denemek zorunda kalır.

Bu da güveni azaltır.

Özellikle ödeme, kayıt, başvuru, rezervasyon gibi kritik akışlarda kötü error state direkt kayıp yaratabilir.

Form hatalarında en basit kural

Hata mesajı problemli alanın yanında ya da çok yakınında olmalı.

Kullanıcı hatayı aramamalı.

Ayrıca sadece kırmızı renk kullanmak yeterli değil.

Metin de olmalı.

Çünkü herkes rengi aynı şekilde algılamaz.

Accessibility tarafında bu çok önemli.

Örnek:

Zayıf mesaj: “Hatalı giriş.”

Daha iyi mesaj: “E-posta adresi @ işareti içermeli.”

Daha iyi mesaj kullanıcıya hem problemi hem çözümü verir.

Empty state sadece süs değildir

Bazı ürünlerde empty state alanları çok süslü illüstrasyonlarla geçiştiriliyor.

İllüstrasyon olabilir.

Ama tek başına yetmez.

Boş durumun amacı ekranı sevimli göstermek değil, kullanıcıya yön vermektir.

Bu yüzden önce metin ve aksiyon düşünülmeli.

Görsel sonra gelir.

Kullanıcı o ekranda neden olduğunu anlamıyorsa, görsel ne kadar güzel olursa olsun UX zayıf kalır.

Product design açısından neden önemli?

Empty state ve error state ürünün gerçek hayattaki davranışını gösterir.

Çünkü gerçek kullanıcı her zaman ideal senaryoda ilerlemez.

Veri olmayabilir.

Arama sonuç dönmeyebilir.

Form yanlış doldurulabilir.

İnternet kopabilir.

Yetki eksik olabilir.

İyi product design bu durumları baştan düşünür.

Sadece “happy path” tasarlamak yetmez.

Ürün, sorun çıktığında da kullanıcıyı taşıyabilmeli.

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 Design Systems for Beginners yazısına bakabilirsin.

UX writing burada çok belirleyici

Empty state ve error state iyi yazı ister.

Çünkü bu ekranlarda kullanıcıya konuşan şey çoğu zaman metindir.

Kısa, net ve sakin olmak gerekir.

Kullanıcıyı suçlayan dilden kaçınmak gerekir.

“Yanlış girdiniz” yerine “Bu alan 8 karakterden kısa olamaz” demek daha iyidir.

“Bir hata oluştu” yerine “Dosya yüklenemedi. İnternet bağlantını kontrol edip tekrar deneyebilirsin” demek daha açıklayıcıdır.

İyi UX writing kullanıcının yükünü azaltır.

Tasarımcı için pratik checklist

Bir ekran tasarlarken sadece dolu halini değil, şu durumları da kontrol etmek lazım:

• İlk kullanımda içerik yoksa ne görünecek?
• Arama sonucu yoksa kullanıcı nereye yönlenecek?
• Liste tamamen silinirse ekran nasıl kalacak?
• Formda hatalı alan nasıl gösterilecek?
• Hata mesajı problemi açık söylüyor mu?
• Kullanıcıya çözüm öneriliyor mu?
• Sadece renk değil, metin de kullanılıyor mu?
• Loading sonrası boş sonuç ile hata durumu karışıyor mu?
• Mobilde mesajlar okunabilir mi?
• Screen reader için anlamlı metin var mı?

Bu checklist küçük görünür ama ürünü ciddi şekilde güçlendirir.

Portfolio için de iyi bir detay

Junior ya da mid-level tasarımcı portfolio hazırlarken sadece ana ekranları gösteriyor.

Ama empty state, error state, loading state gibi detayları göstermek fark yaratır.

Çünkü bu detaylar senin gerçek ürün düşündüğünü gösterir.

Bir işe alım yapan kişi şunu görür:

Bu kişi sadece güzel ekran değil, ürün davranışı da düşünüyor.

Portfolio tarafındaki bu yaklaşımı Junior UI/UX Tasarımcılar 2026’da Nasıl Öne Çıkar? yazısında daha geniş anlatmıştım.

Benim düşüncem

Empty state ve error state tasarımın arka sokakları gibi görülüyor.

Ama bence ürün kalitesi en çok buralarda belli oluyor.

Çünkü kullanıcı tam bu anlarda desteğe ihtiyaç duyuyor.

İyi tasarım kullanıcıyı yalnız bırakmaz.

Ne olduğunu söyler.

Neden olduğunu açıklar.

Bir sonraki adımı gösterir.

Bu yüzden UI/UX tasarımda sadece güzel ana ekran yapmak yetmez.

Boş, hatalı, bekleyen ve başarılı durumları da düşünmek gerekir.

Gerçek ürün hissi burada başlar.

UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design ve Growth kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – Error-Message Guidelines
• Nielsen Norman Group – Form Error Guidelines
• Material Design – Empty States
• Baymard Institute – Inline Form Validation
• W3C WCAG – Error Identification

The post UI/UX Tasarımda Empty State ve Error State Neden Önemli? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Bunu kötü anlamda söylemiyorum.

Araçlar çoğaldı.

AI ile ekran üretmek kolaylaştı.

Figma bilen insan sayısı arttı.

Portfolio hazırlamak da eskisine göre daha erişilebilir hale geldi.

Bu yüzden artık junior tasarımcıyı öne çıkaran şey sadece “güzel ekran yapabiliyorum” cümlesi değil.

Bence asıl fark şurada başlıyor:

Sen o ekranı neden yaptığını anlatabiliyor musun?

Güzel ekran artık tek başına yetmiyor

Bugün birçok araç sana modern görünen ekranlar çıkarabiliyor.

Bir dashboard, landing page, mobil app ekranı veya onboarding akışı birkaç dakika içinde taslak olarak oluşabiliyor.

Bu güzel bir şey.

Ama aynı zamanda çıtayı da değiştiriyor.

Çünkü işe alım yapan kişi artık sadece görsele bakmıyor.

Şunu görmek istiyor:

• Problemi nasıl anladın?
• Kullanıcı kim?
• Bu akışı neden böyle kurdun?
• Hangi alternatifleri eledin?
• Hangi kararın ürüne etkisi var?
• Bu ekran gerçek hayatta nasıl çalışır?

Junior tasarımcı için en büyük fırsat burada.

Çünkü sadece ekran değil, düşünme biçimini de gösterebilirsin.

Portfolio bir galeri olmamalı

Yeni başlayanlarda en sık gördüğüm şey şu:

Portfolio sadece güzel ekranlardan oluşuyor.

Mockup var.

Telefon içine yerleştirilmiş ekran var.

Gradient var.

Ama hikaye yok.

Bu durumda portfolio Dribbble galerisi gibi duruyor.

Oysa junior bir tasarımcı için portfolio şu soruya cevap vermeli:

Bu kişi bir problemi alıp mantıklı bir tasarım sürecine çevirebiliyor mu?

Her projede uzun uzun yazmak zorunda değilsin.

Ama kısa da olsa süreç görünmeli.

Problem, hedef kullanıcı, akış, kararlar, final ekran ve öğrenilen şeyler net olmalı.

Bu konuyu daha önce İngilizce olarak UI/UX Portfolio Mistakes Junior Designers Should Avoid yazısında da anlatmıştım.

Case study kısa ama dolu olmalı

Case study dediğimiz şey illa 40 ekranlık dev bir sunum olmak zorunda değil.

Bazen 5-6 iyi bölüm yeterli olur.

Ben junior portfolio için şu yapıyı daha doğru buluyorum:

1. Problem neydi?
2. Kullanıcı kimdi?
3. İlk akış nasıl düşündün?
4. Hangi tasarım kararlarını aldın?
5. Final çözüm ne oldu?
6. Bu projeden ne öğrendin?

Bu yapı basit ama güçlü.

Çünkü işe alım yapan kişi senin sadece ne çizdiğini değil, nasıl düşündüğünü de görür.

AI kullan ama çıktıyı sorgula

2026’da junior tasarımcının AI araçlarını bilmesi avantaj.

Ama AI kullanmak tek başına seni iyi tasarımcı yapmaz.

AI sana fikir verebilir.

Alternatif ekran çıkarabilir.

Metni toparlayabilir.

Akış için öneri sunabilir.

Ama çıkan sonucu eleştirmek hâlâ senin işin.

Bu ekran gerçekten kullanışlı mı?

Hierarchy doğru mu?

Buton metni anlaşılır mı?

Boş ve hata durumları düşünülmüş mü?

Mobilde bu yapı çalışır mı?

AI çıktısını olduğu gibi portfolio’ya koymak zayıf durur.

AI çıktısını alıp iyileştirmek, kararlarını göstermek ve neden değiştirdiğini anlatmak daha güçlü durur.

Benzer konuyu AI Araçları Tasarımcı Çıtayı Yükseltti yazısında da ele almıştım.

Design system mantığı öğren

Junior seviyede herkes senden büyük bir design system kurmanı beklemeyebilir.

Ama sistemli düşünmeni bekler.

Butonların tutarlı mı?

Spacing kararların aynı mantıkta mı?

Tipografi ölçeğin var mı?

Input, card, modal, tab gibi parçalar tekrar kullanılabilir mi?

Bir ekranda başka, diğer ekranda başka davranan componentler varsa bu zayıf görünür.

Design system bilmek burada devreye girer.

En azından temel component mantığını, state durumlarını ve spacing sistemini öğrenmek gerekiyor.

Bu konuda İngilizce bir başlangıç yazısı da var: Design Systems for Beginners.

Figma bilmek önemli ama yeterli değil

Figma hâlâ önemli.

Auto layout, component, variant, prototyping, variables gibi konuları bilmek işini kolaylaştırır.

Ama Figma sadece araç.

Aracı iyi kullanmak seni hızlandırır.

Fakat tasarımcı yapan şey araç değil, karar kalitesidir.

Bir junior tasarımcı şunları da geliştirmeli:

• Kullanıcı akışı kurma
• Bilgi hiyerarşisi oluşturma
• Mobil ve desktop düşünme
• Basit kullanıcı araştırması yapma
• Metin ve mikro kopya yazma
• Geri bildirim alma ve revize etme

Bu konuya daha önce UI/UX Tasarımcı Olmak İçin Figma Bilmek Yeterli mi? yazısında değinmiştim.

Gerçek ürün hissi ver

Junior portfolio’da en güçlü farklardan biri gerçek ürün hissidir.

Sadece ana ekran göstermek yerine şu detayları da düşün:

• Empty state
• Error state
• Loading state
• Başarılı işlem mesajı
• Form validasyonu
• Responsive davranış
• Basit kullanıcı senaryosu

Bunlar küçük gibi görünür.

Ama tasarımcının ürünü gerçekten düşündüğünü gösterir.

Çünkü gerçek ürün sadece güzel ana ekrandan oluşmaz.

Bir alanda derinleşmek avantaj sağlar

Junior tasarımcılar çoğu zaman her şeyi yapmak istiyor.

Mobil app, web site, SaaS dashboard, e-commerce, branding, illustration, social media…

Hepsini denemek başlangıçta normal.

Ama portfolio tarafında bir alanda daha güçlü görünmek avantaj sağlar.

Mesela SaaS dashboard tasarımında iyiysen, 2-3 projeni bu yönde güçlendirebilirsin.

Mobil app akışlarında iyiysen, onboarding, ödeme, profil, ayarlar gibi gerçek akışlar çalışabilirsin.

Bir alan seçmek seni sınırlamaz.

Tam tersine daha net görünmeni sağlar.

Bu konuda Türkçe olarak UI/UX Kariyerinde Bir Alanda Uzmanlaşmak yazısını da yazmıştım.

Yeni başlayanlar için basit yol

Ben 2026’da junior UI/UX tasarımcı olmak isteyen birine şöyle ilerlemesini öneririm:

1. Figma temellerini öğren.
2. UX akış mantığını çalış.
3. Basit ama gerçekçi 2 proje seç.
4. Her proje için problem ve kullanıcı yaz.
5. Wireframe ile başla.
6. Component mantığını kur.
7. Final ekranları hazırla.
8. State ve responsive detayları ekle.
9. Case study olarak kısa ve net anlat.
10. AI kullandıysan nerede kullandığını ve nasıl iyileştirdiğini göster.

Bu yol basit görünür ama çoğu portfolio’da eksik olan şey tam olarak bu düzen.

Benim düşüncem

Junior tasarımcılar için 2026 kötü bir yıl değil.

Ama daha seçici bir yıl.

Çünkü araç bilen çok kişi var.

Ekran üreten çok kişi var.

AI ile hızlı çıktı alan çok kişi var.

Öne çıkmak için daha net düşünmek gerekiyor.

Benim gözümde güçlü junior tasarımcı şudur:

Az proje gösterir ama o projeyi neden yaptığını, nasıl düşündüğünü ve ne öğrendiğini net anlatır.

Bu kişi her zaman sadece güzel ekran gösteren kişiden daha güçlü durur.

UI/UX ve product design tarafında daha fazla içerik için UI/UX, Product Design, Growth ve AI kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Nielsen Norman Group – State of UX 2026
• Business Insider – Figma design lead on design candidates in 2026
• Interaction Design Foundation – UX portfolio examples
• Nielsen Norman Group – UX Design Portfolios
• MentorCruise – Entry-level UX designer jobs in 2026

The post Junior UI/UX Tasarımcılar 2026’da Nasıl Öne Çıkar? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

Not: Arayüz tasarımının daha genel mantığını, UI/UX ve mobil uygulama tasarımı tarafındaki yerini ayrıca Arayüz Tasarımı Nedir? UI/UX ve Mobil Uygulama Tasarımı Açısından Basit Anlatım yazısında daha geniş anlattım.

Mobil arayüz tasarımı, bir mobil uygulamanın kullanıcıyla temas ettiği ekranları, akışları ve etkileşimleri tasarlama işidir.

Ama bunu sadece “güzel ekran çizmek” gibi düşünmemek lazım.

Mobil arayüz tasarımı; kullanıcının neyi göreceğini, hangi sırayla hareket edeceğini, nerede karar vereceğini ve sistemden nasıl geri bildirim alacağını belirler.

Yani işin içinde görsel tasarım var.

Ama aynı zamanda kullanım kolaylığı, bilgi hiyerarşisi, dokunma alanları, ekran boyutları, boş durumlar, hata durumları ve kullanıcı akışı da var.

Mobil arayüz tasarımı nedir?

Mobil arayüz tasarımı, telefon ve tablet gibi mobil cihazlarda çalışan uygulamaların kullanıcı arayüzünü tasarlama sürecidir.

Bir mobil uygulamada gördüğümüz butonlar, formlar, kartlar, tab bar, navigation, liste yapıları, ikonlar, bildirimler ve ekran geçişleri bu tasarımın parçasıdır.

Fakat iyi bir mobil arayüz tasarımı sadece bu parçaları yan yana koymak değildir.

İyi mobil arayüz şu sorulara cevap verir:

• Kullanıcı bu ekranda ne yapacağını hemen anlıyor mu?
• Ana aksiyon yeterince net mi?
• İçerik küçük ekranda okunabilir mi?
• Butonlar parmakla rahat basılabilir mi?
• Form doldururken kullanıcı zorlanıyor mu?
• Hata olduğunda kullanıcı ne yapacağını anlayabiliyor mu?
• Farklı ekran boyutlarında tasarım bozuluyor mu?

Bunlar çözülmeden yapılan mobil tasarım sadece görsel bir çalışma olarak kalır.

Mobil arayüz tasarımı ne değildir?

Bence bu kısmı net söylemek önemli.

Mobil arayüz tasarımı sadece Dribbble’da güzel duran bir ekran hazırlamak değildir.

Sadece renk paleti seçmek değildir.

Sadece ikon ve kart yerleştirmek değildir.

Sadece Figma’da temiz bir frame çizmek de değildir.

Gerçek mobil arayüz tasarımı, kullanıcının uygulamayı gerçek cihazda kullanırken yaşayacağı deneyimi düşünür.

Mesela keyboard açılınca form alanı görünür kalıyor mu?

Alt buton safe area içinde doğru yerde mi?

Kullanıcı yanlış bilgi girdiğinde sistem ne söylüyor?

Liste boşsa ne gösteriliyor?

İnternet yavaşsa loading state nasıl çalışıyor?

Bu detaylar yoksa tasarım eksik kalır.

UI ve UX mobil arayüzde nasıl ayrılır?

UI, kullanıcının ekranda gördüğü ve dokunduğu katmandır.

Buton, input, ikon, renk, tipografi, spacing, kart yapısı, navigasyon gibi parçalar UI tarafında düşünülür.

UX ise kullanıcının o ekranlar arasında nasıl ilerlediği, nerede zorlandığı ve hedefe ne kadar rahat ulaştığıyla ilgilenir.

Mobil uygulamada bu ikisi ayrı gibi görünse de pratikte iç içedir.

Çünkü kötü yerleştirilmiş bir buton sadece UI problemi değildir.

Kullanıcının aksiyonu kaçırmasına sebep oluyorsa UX problemidir.

Karışık bir form sadece görsel problem değildir.

Kullanıcı formu terk ediyorsa ürün problemidir.

Mobil uygulama arayüzünde ekran boyutları neden önemli?

Mobil arayüz tasarımında ekran boyutları konusu çok kritik.

Çünkü tasarım sadece tek bir iPhone frame içinde yaşamıyor.

Küçük telefon, büyük telefon, farklı Android cihazlar ve tablet ekranları var.

Bu yüzden mobil arayüz tasarımında sadece bir ekran çizip bırakmak zayıf bir yöntem.

Tasarımın farklı cihazlarda nasıl davranacağını düşünmek gerekir.

Özellikle junior tasarımcılar için şu yaklaşım daha sağlıklı:

• Küçük mobil ekran kontrolü yap
• Standart mobil ekran kontrolü yap
• Büyük mobil veya tablet kontrolü yap
• Keyboard açıkken form davranışını düşün
• Safe area ve tab bar alanlarını ihmal etme

Bu konuda detaylı ölçü ve ekran mantığı için Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısına bakabilirsin.

Ayrıca responsive davranışı daha pratik anlattığım Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı da bu konuyu tamamlıyor.

Mobil arayüz tasarımında iyi UI nasıl olur?

İyi mobil UI tasarımı, kullanıcıyı yormadan yönlendiren tasarımdır.

Burada sadece estetik değil, netlik önemlidir.

İyi bir mobil UI için ben şu noktalara bakarım:

• Başlıklar kısa ve anlaşılır mı?
• Birincil aksiyon kolay fark ediliyor mu?
• Butonlar yeterince büyük mü?
• Renk kullanımı anlam taşıyor mu?
• Boşluklar ekranı rahatlatıyor mu?
• Componentler tutarlı mı?
• Liste, kart ve form yapıları tekrar edilebilir mi?

Mobil UI tarafında component mantığı önemlidir.

Çünkü ürün büyüdükçe her ekranı baştan tasarlayamazsın.

Buton, input, card, tab bar ve modal gibi parçaların sistemli olması gerekir.

Bu yüzden mobil arayüz tasarımı ile design system düşüncesi birbirinden kopuk değildir.

Mobil arayüz tasarımında iyi UX nasıl olur?

İyi mobil UX, kullanıcının hedefine daha az sürtünmeyle gitmesini sağlar.

Kullanıcı uygulamayı açtığında nerede olduğunu, ne yapabileceğini ve yaptığı işlemden sonra ne olacağını anlamalı.

Bu yüzden mobil UX tarafında akış çok önemlidir.

Onboarding ekranı fazla uzun mu?

Kayıt akışı gereksiz bilgi istiyor mu?

Ödeme ekranında kullanıcı güvende hissediyor mu?

Hata mesajı sorunu çözmeye yardım ediyor mu?

Boş ekran kullanıcıyı sonraki adıma taşıyor mu?

Bu sorular mobil arayüz tasarımının UX tarafını güçlendirir.

Özellikle empty state ve error state konusunu atlamamak gerekir. Bu konuda UI/UX Tasarımda Empty State ve Error State Neden Önemli? yazısı tamamlayıcı olur.

Mobil arayüz tasarım süreci nasıl ilerler?

Her projede süreç aynı olmaz ama genel mantık benzerdir.

Ben mobil arayüz tasarımında şu sırayı daha sağlıklı buluyorum:

1. Ürünün amacını netleştir
2. Kullanıcı tipini ve temel ihtiyacı anlamaya çalış
3. Ana akışları çıkar
4. Wireframe ile ekran iskeletini kur
5. UI componentlerini belirle
6. Farklı ekran boyutlarında kontrol et
7. Empty, error, loading ve success state tasarla
8. Prototype ile akışı test et
9. Geliştiriciye davranış notlarıyla teslim et

Bu sıra, sadece ekran üretmekten daha sağlıklı bir çalışma şekli sağlar.

Çünkü mobil uygulama tasarımında en pahalı şeylerden biri sonradan fark edilen davranış eksikleridir.

AI mobil arayüz tasarımında nasıl kullanılmalı?

AI artık mobil arayüz tasarımında ciddi şekilde yardımcı olabilir.

Fikir üretir.

Alternatif ekran akışı çıkarır.

Form metinlerini sadeleştirir.

Component listesi önerebilir.

Empty state ve error state senaryoları hazırlayabilir.

Ama yine aynı yere geliyoruz.

AI’a sadece “mobil uygulama ekranı tasarla” demek yeterli değil.

İyi sonuç için ürün amacı, kullanıcı, akış, component yapısı ve kısıtlar net olmalı.

Yani AI kolaylık sağlar ama tasarım kararını senin hazırlığın belirler.

AI destekli UI/UX mantığını ayrıca Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısında anlattım.

Junior tasarımcılar için kısa tavsiye

Mobil arayüz tasarımına yeni başlayan biriysen, her şeyi aynı anda çözmeye çalışma.

Önce temel akışları anlamaya çalış.

Sonra iyi component yapısı kur.

Sonra farklı ekran boyutlarında kontrol et.

En son görsel detayları parlat.

Sadece güzel ekran yapmaya çalışırsan konu yarım kalır.

Ama kullanıcı akışı, component mantığı ve mobil cihaz davranışlarını düşünürsen daha güçlü tasarımcı olursun.

Benim düşüncem

Mobil arayüz tasarımı, ürün tasarımının en görünür ama en kolay yanlış anlaşılan taraflarından biri.

Dışarıdan bakınca ekran tasarlamak gibi duruyor.

Ama içeride kullanıcı davranışı, sistem cevabı, ekran boyutu, component düzeni, UX akışı ve ürün hedefi var.

Bu yüzden iyi mobil arayüz tasarımı sadece estetik değil, karar kalitesidir.

Bence güçlü bir mobil arayüz şu üç şeyi aynı anda yapmalı:

• Kullanıcıya ne yapacağını anlatmalı
• Sistemin ne yaptığını göstermeli
• Farklı cihazlarda bozulmadan çalışmalı

Bunu başardığında mobil uygulama arayüzü sadece güzel görünmez.

Gerçekten çalışır.

UI/UX ve product design üzerine diğer içerikler için UI/UX, Product Design ve Technology kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Material Design – Layout
• Material Design – Interaction States
• Nielsen Norman Group – 10 Usability Heuristics for User Interface Design
• Figma Learn – Guide to Components in Figma

The post Mobil Arayüz Tasarımı Nedir? UI/UX Açısından Ne Değildir? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.