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.

Şu iPad kaç piksel, şu Android tablet kaç inç, şu cihazın çözünürlüğü ne?

Bunlar tabii ki lazım.

Ama UI/UX tasarımcı için asıl mesele sadece cihaz ölçüsü bilmek değil.

Asıl mesele, tablet ekranında arayüzün nasıl davranacağını doğru düşünmek.

Çünkü tablet, telefon gibi tek kolon davranmak zorunda değil.

Aynı zamanda desktop gibi sınırsız alan da vermiyor.

Bu yüzden tablet arayüz tasarımı, mobil ve desktop arasında ayrı düşünülmesi gereken bir alan.

Tablet ekran boyutları neden önemli?

Tablet ekran boyutları, özellikle mobil uygulama ve responsive ürün tasarımında önemli.

Çünkü tablet ekranında genellikle daha fazla yatay alan vardır.

Bu alanı doğru kullanırsan ürün daha rahat çalışır.

Yanlış kullanırsan ekran ya çok boş kalır ya da telefon tasarımının büyütülmüş hali gibi görünür.

Ben tablet tasarımında şu sorulara bakmayı seviyorum:

• Bu ekran tek kolon mu kalmalı?
• İki panel layout daha doğru olur mu?
• Liste ve detay aynı anda gösterilebilir mi?
• Navigation bottom bar mı kalmalı, nav rail mi olmalı?
• Kartlar kaç kolona bölünmeli?
• Form alanları fazla uzuyor mu?
• Landscape ve portrait davranışı farklı mı olmalı?

Bu sorular cihaz listesinden daha değerlidir.

Güncel iPad ekran boyutları

iPad tarafında güncel yaygın ölçüler şöyle düşünülebilir:

Burada önemli bir not var.

UI tasarım yaparken sadece fiziksel piksele takılmak doğru değil.

Figma’da çalışırken point, viewport, scale ve safe area gibi kavramları da düşünmek gerekir.

Yani “cihaz 2752 x 2064 piksel” bilgisi tek başına tasarım kararını vermez.

Android tabletlerde breakpoint mantığı

Android tarafında cihaz çeşitliliği daha fazla.

Bu yüzden tek tek model ezberlemek yerine window size class mantığı daha sağlıklı.

Android Developers dokümanında genişlik sınıfları kabaca şöyle ayrılıyor:

• Compact: 600dp altı, daha çok telefon portrait
• Medium: 600dp – 839dp, küçük tablet veya büyük foldable alanı
• Expanded: 840dp – 1199dp, tablet landscape ve geniş ekranlar
• Large: 1200dp – 1599dp, büyük tablet veya desktop benzeri alan
• Extra large: 1600dp ve üstü, desktop / çok geniş ekran

Bence tasarımcı için bu yaklaşım çok daha kullanışlı.

Çünkü kullanıcı tableti portrait kullanabilir.

Landscape kullanabilir.

Split screen açabilir.

Foldable cihazda pencere boyutu değişebilir.

Yani önemli olan cihaz adı değil, uygulamanın elindeki gerçek alan.

Tablet tasarımında tek kolon her zaman doğru değil

Telefon ekranlarında tek kolon çoğu zaman doğal çalışır.

Ama tablet ekranında aynı yapıyı büyütüp ortaya koymak bazen zayıf görünür.

Özellikle şu ekranlarda iki panel düşünmek faydalı olabilir:

• Mesajlaşma uygulamaları
• E-posta uygulamaları
• CRM ve dashboard ekranları
• Ayarlar ekranları
• Dosya veya içerik yönetimi
• Liste ve detay ilişkisi olan ürünler

Mesela solda liste, sağda detay göstermek tablet için çok doğal bir davranış olabilir.

Telefonda bu iki ekran ayrı ayrı açılır.

Tablette ise aynı anda gösterilebilir.

Bu yüzden tablet UI tasarımında “daha büyük telefon” gibi düşünmek yerine “daha fazla bağlam gösterebilen ekran” gibi düşünmek daha doğru.

Portrait ve landscape ayrı kontrol edilmeli

Tablet tasarımında portrait ve landscape davranışı önemlidir.

Portrait kullanımda ekran daha dar hissedilebilir.

Landscape kullanımda ise yatay alan ciddi şekilde artar.

Bu fark navigation kararını bile değiştirebilir.

Portrait modda bottom tab bar iyi çalışırken, landscape modda nav rail daha mantıklı olabilir.

Portrait modda tek kolon kalan bir ekran, landscape modda liste + detay yapısına dönebilir.

Bu yüzden sadece bir tablet frame çizip bırakmak yeterli değil.

En azından portrait ve landscape kontrolü yapılmalı.

Tablet UI tasarımında spacing ve grid

Tablet ekranlarında boşluk kullanımı çok hassas.

Telefon tasarımındaki spacing değerlerini aynen büyütürsen ekran fazla seyrek kalabilir.

Desktop spacing mantığını aynen getirirsen de dokunmatik kullanım zayıflayabilir.

Ben tablet tasarımında şu dengeyi ararım:

• Dokunma alanları rahat kalmalı
• İçerik gereksiz uzamamalı
• Formlar çok geniş olmamalı
• Kartlar kontrollü kolonlara ayrılmalı
• Okuma alanı fazla satır uzunluğuna kaçmamalı

Bu konuda daha genel responsive mantık için Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın yazısı iyi tamamlayıcı olur.

Tablet için hangi ekranları mutlaka test ederim?

Bir mobil uygulamanın tablet davranışını kontrol ederken her ekranı aynı detayda incelemek gerekmeyebilir.

Ama bazı ekranları kesinlikle kontrol ederim:

• Home veya dashboard ekranı
• Liste ekranı
• Liste detay ekranı
• Form ekranı
• Onboarding ekranı
• Ayarlar ekranı
• Empty state ve error state
• Modal, bottom sheet veya popup davranışı

Bu ekranlar tablet tarafında problem çıkarma ihtimali yüksek alanlardır.

Özellikle form ve detay ekranlarında genişlik fazla büyüdüğünde okunabilirlik bozulabilir.

Tablet ekran boyutları SEO için değil, ürün kalitesi için önemli

Bu konuyu özellikle tasarımcı gözüyle ele almak istiyorum.

Tablet ekran boyutları sadece Google’da aranan bir teknik bilgi değil.

Gerçek ürün kalitesini etkileyen bir tasarım konusu.

Kullanıcı tabletiyle ürünü açtığında uygulama büyük ekrana uyum sağlamıyorsa amatör hissedebilir.

Telefon ekranının büyütülmüş hali gibi duran bir tablet arayüzü, ürünün algısını düşürebilir.

Bu yüzden tablet tasarımı, özellikle SaaS, dashboard, eğitim, sağlık, finans ve üretkenlik uygulamalarında önemlidir.

Benim kısa tablet tasarım kontrol listem

• Portrait ve landscape kontrol edildi mi?
• 600dp, 840dp ve 1200dp kırılımları düşünüldü mü?
• Tek kolon mu, iki panel mi daha doğru?
• Navigation bottom bar, nav rail veya side menu olarak değişmeli mi?
• Liste ve detay aynı anda gösterilebilir mi?
• Form genişliği okunabilir kalıyor mu?
• Kart gridleri fazla dağılmadan çalışıyor mu?
• Safe area ve system bar alanları hesaba katıldı mı?
• Boş, hata ve loading state tablet için de tasarlandı mı?

Bu liste çoğu projede hızlı kontrol sağlar.

Benim düşüncem

Tablet ekran boyutları ezberlenecek bir liste değil.

Tablet tasarımında asıl konu, ekran büyüdüğünde arayüzün nasıl daha akıllı davranacağıdır.

Telefon tasarımını büyütmek yerine, tablet ekranında kullanıcıya daha fazla bağlam göstermek gerekir.

Bazen bu iki panel olur.

Bazen daha iyi grid olur.

Bazen daha sakin bir form düzeni olur.

Bazen de sadece boşluğu doğru yönetmek olur.

İyi tablet UI tasarım, cihaz ölçüsünü bilmekle başlar ama orada bitmez.

Gerçek iş, o ölçüyü ürün kararına çevirebilmektir.

Mobil arayüz tasarımı tarafındaki temel mantık için Mobil Arayüz Tasarımı Nedir? ve daha genel arayüz mantığı için Arayüz Tasarımı Nedir? yazılarını da okuyabilirsin.

Kaynak Sinyalleri

• Apple – iPad Pro Technical Specifications
• Apple – iPad Air Technical Specifications
• Apple – iPad 11-inch Technical Specifications
• Apple – iPad mini Technical Specifications
• Android Developers – Window Size Classes
• Android Developers – Canonical Layouts

The post Tablet Ekran Boyutları: UI Tasarımcılar İçin Güncel Ölçü Rehberi first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.

iPhone küçük, iPhone büyük, Android başka, tablet başka.

Bir de işin içine safe area, notch, navigation bar, tab bar, keyboard, landscape, responsive ve adaptive gibi kavramlar girince konu daha zor görünmeye başlıyor.

Ama bence burada panik yapmaya gerek yok.

Mobil app UI tasarımında amaç her cihazı tek tek ezberlemek değildir.

Asıl amaç, arayüzün farklı ekranlarda nasıl davranacağını doğru düşünmektir.

Bu mantık oturduğunda ekran boyutları korkutucu olmaktan çıkar.

Her cihaz için ayrı tasarım yapmak zorunda değilsin

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

“Her telefon boyutu için ayrı ekran mı çizeceğim?”

Hayır.

Tabii bazı kritik ekranları farklı boyutlarda kontrol etmek gerekir.

Ama her cihaz için baştan ayrı tasarım yapmak doğru yöntem değil.

Mobil UI tasarımda temel yaklaşım şudur:

• İçerik nasıl büyür?
• Alan daralınca ne olur?
• Buton nerede kalır?
• Liste uzayınca nasıl davranır?
• Keyboard açılınca form bozulur mu?
• Tablet ekranda aynı yapı çok boş kalır mı?

Bunları düşünürsen tek tek cihaz kovalamak yerine sistemli ilerlersin.

Responsive sadece web sitesi için değil

Responsive denince çoğu kişinin aklına web tasarım geliyor.

Ama mobil app tarafında da benzer bir düşünme biçimi var.

Ekranın genişliği, yüksekliği, güvenli alanları ve kullanılan componentler tasarım kararını etkiler.

Bir kart yapısı küçük telefonda tek kolon olabilir.

Daha geniş bir ekranda iki kolon gibi çalışabilir.

Bir bottom sheet küçük ekranda daha dikkatli kullanılmalı.

Tablet tarafında ise aynı içerik split view ya da daha geniş layout ile daha rahat sunulabilir.

Yani responsive düşünmek sadece “ekran küçülünce küçült” demek değildir.

İçeriğin önceliğini ve davranışını yeniden düşünmektir.

Adaptive design mantığını erken öğren

Responsive ve adaptive kavramları bazen karışıyor.

Basit düşünelim.

Responsive tasarım, arayüzün alana göre esnemesidir.

Adaptive design ise farklı ekran bağlamlarına göre layout kararının değişmesidir.

Mesela telefonda alt menü kullanırken tablette yan menü kullanmak adaptive bir yaklaşımdır.

Mobilde tek kolon, tablette iki panel göstermek de buna örnek olabilir.

Google tarafında Material Design bu konuyu breakpoint ve window size class mantığıyla ele alıyor.

Apple tarafında da Human Interface Guidelines içinde layout, safe area ve platform davranışları önemli yer tutuyor.

Yeni başlayan bir tasarımcı için bu belgeleri ezberlemek gerekmiyor.

Ama mantığını bilmek çok iş görür.

Xcode ve Android Studio burada neden önemli?

Bir UI/UX tasarımcı doğrudan kod yazmak zorunda olmayabilir.

Ama mobil app tasarlıyorsa geliştirici araçlarının nasıl düşündüğünü biraz anlamalı.

Mesela Xcode içinde SwiftUI Preview ile farklı cihazlarda ekranın nasıl göründüğü kontrol edilebilir.

Android Studio ve Jetpack Compose tarafında da preview ve farklı ekran sınıflarıyla layout kontrolü yapılabilir.

Bu tasarımcı için şu anlama gelir:

Sen Figma’da sadece güzel bir ekran çizmezsin.

Geliştirici o ekranı farklı cihazlarda yaşatmak zorunda kalır.

Bu yüzden tasarım kararın kod tarafında nasıl davranacak, bunu biraz düşünmen gerekir.

Button fixed mi kalacak?

Liste scroll olacak mı?

Header yüksekliği sabit mi?

Image alanı oranla mı büyüyecek?

Form alanı keyboard altında kalacak mı?

Bunları tasarım aşamasında düşünmek geliştiriciyle iletişimi çok rahatlatır.

Figma’da sadece tek frame çizip bırakma

Figma’da mobil app UI tasarlarken tek bir popüler ekran boyutu seçip bütün işi orada bitirmek zayıf kalabilir.

Ben olsam en az üç kontrol yapardım:

• Küçük telefon ekranı
• Orta / standart telefon ekranı
• Büyük telefon veya tablet benzeri geniş ekran

Bu üç kontrol sana çoğu problemi gösterir.

Metin taşıyor mu?

Buton aşağıda kayboluyor mu?

Card alanları fazla mı sıkışıyor?

Liste öğeleri okunuyor mu?

Boşluklar küçük ekranda fazla mı lüks kalıyor?

Büyük ekranda içerik çok mu dağınık duruyor?

Bunları erken fark etmek sonradan düzeltmekten daha kolaydır.

Güncel ekran ölçüleri için daha önce yazdığım Mobil Arayüz Tasarımı Ekran Boyutları Nedir? yazısına bakabilirsin.

Safe area konusu küçük ama önemlidir

Mobil arayüz tasarımında safe area çok önemli.

Çünkü ekranın her alanı rahat kullanılabilir alan değildir.

Üstte kamera alanı olabilir.

Altta home indicator olabilir.

Sistem gesture alanları olabilir.

Keyboard açıldığında içerik yukarı taşınmak zorunda kalabilir.

Yeni başlayanlar bazen butonu ekranın en altına fazla yaklaştırıyor.

Ya da header içeriğini üstteki sistem alanına çok yakın bırakıyor.

Bu küçük detaylar gerçek cihazda kötü hissettirir.

Figma’da güzel görünen bir ekran, cihazda rahatsız çalışabilir.

Bu yüzden mobil UI tasarımda safe area rehberlerini açık kullanmak iyi alışkanlık.

Component mantığı ekran boyutlarını kolaylaştırır

Farklı ekran boyutlarıyla çalışmayı kolaylaştıran şeylerden biri component mantığıdır.

Buton, card, input, tab bar, navigation, list item gibi parçalar sistemli kurulursa farklı ekranlarda davranış daha kontrollü olur.

Mesela bir kart componentinin minimum genişliği, iç boşluğu, görsel oranı ve metin davranışı belliyse tasarım daha rahat ölçeklenir.

Her şeyi elle yerleştirirsen küçük bir ekran değişikliğinde bütün yapı bozulur.

Bu yüzden mobil app UI tasarlarken design system düşüncesi lüks değil, iş kolaylaştıran bir temel.

Bu konu için Design Systems for Beginners yazısı iyi bir başlangıç olabilir.

Junior tasarımcılar nerede hata yapıyor?

Yeni başlayanlarda gördüğüm birkaç tipik hata var.

Birincisi, sadece en güzel görünen cihaz boyutunda çalışmak.

İkincisi, uzun metinleri hiç test etmemek.

Üçüncüsü, keyboard açılınca ne olacağını düşünmemek.

Dördüncüsü, empty state ve error state gibi gerçek ürün durumlarını atlamak.

Beşincisi, geliştiriciye sadece final ekran görseli verip davranışı açıklamamak.

Oysa iyi mobil UI tasarımda ekranın davranışı da anlatılmalı.

Şu alan scroll olur.

Bu buton sticky kalır.

Bu görsel oranını korur.

Bu liste boşsa empty state görünür.

Bu hata durumunda input mesaj gösterir.

Bunları yazmak ve göstermek seni daha profesyonel gösterir.

Responsive mobil UI için basit kontrol listesi

Bir mobil app ekranını teslim etmeden önce şu liste işe yarar:

• Küçük ekranda içerik okunuyor mu?
• Büyük ekranda layout fazla boş kalıyor mu?
• Safe area dikkate alındı mı?
• Keyboard açılınca form alanları görünür kalıyor mu?
• Uzun metinler taşmadan çalışıyor mu?
• Butonlar dokunulabilir boyutta mı?
• Liste, kart ve görsel alanları esneyebiliyor mu?
• Empty state ve error state tasarlandı mı?
• Tablet veya geniş ekran davranışı düşünüldü mü?
• Geliştiriciye davranış notları verildi mi?

Bu listeyi alışkanlık haline getirmek, farklı ekran boyutları korkusunu bayağı azaltır.

AI burada nasıl yardımcı olabilir?

AI bu konuda da yardımcı olabilir.

Mesela bir ekran için farklı responsive senaryoları sorabilirsin.

Küçük ekranda hangi alanlar öncelikli olmalı diye fikir alabilirsin.

Form akışında keyboard davranışı için kontrol listesi çıkarabilirsin.

Geliştiriciye vereceğin handoff notlarını toparlatabilirsin.

Ama AI’a sadece “bu ekranı responsive yap” demek yeterli değil.

Önce sen ekranın mantığını bilmelisin.

Hangi alan sabit, hangi alan esnek, hangi alan scroll, hangi alan gizlenebilir?

Bu kararlar sende net değilse AI da karışık sonuç verir.

AI destekli UI/UX konusunda Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısı da bu düşünceye yakın bir yerden ilerliyor.

Benim düşüncem

Mobil UI tasarımda farklı ekran boyutları göz korkutmamalı.

Çünkü mesele cihaz ezberlemek değil.

Mesele layout mantığını anlamak.

Safe area’yı bilmek.

Componentleri sistemli kurmak.

Responsive ve adaptive davranışı düşünmek.

Ve tasarımın geliştirici tarafında nasıl hayata geçeceğini biraz anlamak.

Xcode, Android Studio, preview araçları ve platform rehberleri tasarımcı için yabancı dünyalar gibi görünmemeli.

Hepsini kod seviyesinde bilmek zorunda değilsin.

Ama bu araçların neden farklı ekranları kontrol ettiğini anlarsan daha doğru UI kararları verirsin.

Bence junior tasarımcı için güzel hedef şu:

Tek bir güzel ekran değil, farklı ekranlarda bozulmadan çalışan bir arayüz düşünmek.

Gerçek mobil UI tasarım burada başlıyor.

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

Kaynak Sinyalleri

• Apple Human Interface Guidelines – Layout
• Apple Human Interface Guidelines – Designing for iOS
• Material Design 3 – Layout
• Material Design 3 – Breakpoints
• Android Developers – Adaptive Layout with Material Design

The post Mobil UI Tasarımda Farklı Ekran Boyutları Göz Korkutmasın 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.