UX/UI

Yapay Zekanın Çizdiği Ekran Neden Belli Oluyor?

Son zamanlarda bazı arayüzlere baktığımda garip bir his geliyor. Ekran daha düşünülmüş görünmeden bitmiş görünüyor. Boşluklar temiz, kartlar düzgün hizalanmış, sayıların yanında küçük yeşil etiketler var. Bir köşede de genellikle kahveye biraz fazla para harcadığımı söyleyen akıllı bir içgörü duruyor. Ortada bariz bir hata yok. Yine de birkaç saniye sonra aklımdan aynı şey geçiyor: Bunu yapay zeka çizmiş olabilir.

Google Stitch, Gemini, ChatGPT ve Claude logolarını taşıyan büyük arayüz panellerinden oluşmuş gravür tarzı bir insan başını, çevresindeki ekran bloklarını kurup düzenleyen küçük işçilerle birlikte gösteren editoryal kolaj.
Farklı yapay zekâ araçları, şaşırtıcı derecede tanıdık arayüz kararları.Hüdaverdi Ural

Aslında neyi fark ettiğimi anlamak istedim. Northstar adında hayali bir kişisel finans ürünü için tek bir brief yazdım. Aynı promptu Google Stitch, ChatGPT, Claude ve Gemini'ye verdim. Renk paleti söylemedim. Font, köşe yuvarlaklığı, dark mode, kart stili, grafik tipi veya görsel referans vermedim. Aynı bilgileri istedim ve görsel kararların büyük bölümünü açık bıraktım.

Bu bir benchmark değil. Bilimsel bir test hiç değil. Tek prompt, tek tur çıktı ve zamanla değişecek dört araç var. Ama bence tam da bu nedenle ilginç. Ben burada kazanan aramıyorum. Kimse modele nasıl bir tasarımcı olması gerektiğini söylemediğinde hangi varsayımlara geri döndüğünü görmek istiyorum.

İlk şaşırtan şey her şeyin gayet makul görünmesi

Google Stitch bana yoğun ama inandırıcı bir finans paneli verdi. Karşılama alanı, hesap bakiyesi, aylık gelir ve harcama, kategori dağılımı, son işlemler, tasarruf hedefleri, akıllı içgörü ve bütçe takibi var. Bir ürün toplantısından çıkmış olabilecek kadar düzenli. Aynı zamanda daha önce defalarca gördüğüm bir ekran gibi.

İkinci hissi tarif etmek daha zor. Çünkü tek başına tuhaf olan bir karar yok. Finans ürününde mavi normal. Pozitif değerlerde yeşil normal. Yuvarlatılmış kartlar ve progress bar'lar normal. Sorun, ekranın tamamı güvenli kararlarla dolduğunda ortaya çıkıyor. Her blok ne olduğunu çok düzgün anlatıyor. Her metrik kendi kutusuna giriyor. Her durum küçük bir pill alıyor. Ekran temiz ama içinde pek sürtünme yok.

Google Stitch tarafından oluşturulan Northstar finans paneli; açık renkli arayüzde yuvarlak metrik kartları, mavi ve yeşil vurgular, ilerleme çubukları, işlem listeleri, içgörüler ve tasarruf hedefleri bulunuyor
Stitch tanıdık finans kalıplarından oldukça cilalı bir panel üretti.Google Stitch

Bunun kötü tasarım olduğunu düşünmüyorum. Bu ayrım önemli. Her yuvarlak karta “AI slop” demek de kolaycılık olur. Bunların hepsi üretken yapay zekadan önce vardı. Benim ilgimi çeken, sıradan parçaların neden bu kadar sık aynı oranlarda bir araya geldiği.

Benzerliğin düşündüğümden daha büyük kısmını prompt yaratıyor

Bu deneyin içinde bir tuzak var. Bakiye, gelir, harcama, işlemler, kategoriler, hedef ve içgörü istedim. Elbette çıktılar yapısal olarak benzeyecek. Aynı briefi bir tasarımcıya versek o da bazı benzer modüller kullanabilir.

Bu yüzden briefin zorunlu kıldığı şeylerle modellerin kendi kendine eklediği şeyleri ayırmaya çalıştım. Hiçbirine bütün paneli izole yuvarlak kartlardan kurmasını söylemedim. Büyük finansal sayıyı tepeye koymalarını istemedim. Ana vurgu renginin mavi olmasını söylemedim. “Insight” alanını ikonlu küçük bir kutuya çevirmek zorunda değillerdi. Pozitif rakamların yeşil olması veya hedeflerin progress bar ile anlatılması da promptta yoktu.

Yine de bu kararlar tekrar ediyor. Yapay zeka hissi benim için burada başlıyor. Model yalnızca ürün problemini cevaplamıyor. Boş bıraktığım her tasarım kararını yüksek olasılıklı bir cevapla tamamlıyor.

ChatGPT güvenli ürün paneli diline çok hızlı yerleşiyor

ChatGPT çıktısını tarif etmek için aklıma ilk gelen kelime “yetkin”. DM Sans ve Manrope kullanıyor. Açık gri bir sayfa, lacivert bakiye kartı, parlak mavi aksiyon, yuvarlak beyaz paneller, donut chart, progress bar, yumuşak gölgeler ve küçük renkli kategori ikonları var. Metin de aynı şekilde temiz. “Good morning, Alex.” “Here’s how your money is looking today.” “Move money.” Kullanıcıdan yeni bir görsel dil öğrenmesini isteyen hiçbir şey yok.

Bence işaret de burada.

Arayüz, iyi bir fintech panelinin nasıl görünmesi gerektiğine dair çok geniş bir ortalama biliyor. Ama belirli bir kurum, müşteri veya parayla kurulan belirli bir ilişkiyi bilmiyor. Muhafazakâr bir banka, gençlere yatırım anlatan bir ürün ve freelancer'lara bütçe yaptıran bir araç aynı bilgi mimarisinin bazı parçalarını paylaşabilir. Görsel olarak aynı sesle konuşmaları gerekmiyor.

ChatGPT tarafından oluşturulan Northstar HTML/CSS çıktısının sadeleştirilmiş rekonstrüksiyonu; lacivert bakiye kartı, beyaz yuvarlak paneller, mavi ana aksiyon, işlem listesi, donut grafik ve içgörü kartı bulunuyor
ChatGPT tanıdık modern-fintech diline hızlıca yerleşiyor.Hüdaverdi Ural

Neden bazı tasarımların ürünleri daha pahalı gösterdiğini yazarken de benzer bir yere gelmiştim. Gölge, gradient veya fazladan boşluk tek başına anlam taşımıyor. Etki, daha büyük bir vaadi desteklediğinde çalışıyor. Üretilen UI bazen vaatten önce efekti getiriyor.

Claude görünümü değiştiriyor ama iskelet yine tanıdık

Claude beni daha fazla şaşırttı. Schibsted Grotesk ile Newsreader'ı birlikte kullanmış. Gri sayfa, koyu lacivert hero, pirinç tonunda vurgu, daha sakin bir teal ve sıcak bir kil rengi var. Insight alanı serif tipe bile geçiyor. Diğerlerine kıyasla component library demosundan biraz daha uzak, editoryal bir sesi var.

Bu tercihi seviyorum. Daha önemlisi neden sevdiğimi anlatabiliyorum. Serif her yere serpiştirilmemiş. Ürün sayıları raporlamaktan çıkıp yorumlamaya başladığında ortaya çıkıyor. Böylece içgörünün sesi bakiyenin sesinden ayrılıyor. Gerçek bir finans ürününde bunu korur muydum emin değilim ama en azından tartışabileceğim görünür bir fikir var.

Claude tarafından oluşturulan Northstar HTML/CSS çıktısının sadeleştirilmiş rekonstrüksiyonu; koyu lacivert finans özeti, gri yüzey, pirinç tonu vurgu, işlem listesi, serif içgörü metni ve sade hedef ilerlemesi bulunuyor
Claude tonu değiştiriyor, alttaki tanıdık dashboard yapısı ise büyük ölçüde kalıyor.Hüdaverdi Ural

Bu bana iki şeyi ayırmayı öğretti. AI gibi görünen arayüz illa gradient veya glassmorphism kullanan arayüz değil. Bunlar yüzeysel sinyaller. Daha derindeki sinyal çoğu zaman ekranın makul bileşenlerden toplanmış olması ama zor ürün kararlarının izini taşımaması.

Gemini klişeyi görmeyi çok kolaylaştırıyor

Gemini'nin gönderilen HTML'i diğer yöne gidiyor. Inter kullanıyor. Koyu slate arka plan, cyan ve emerald vurgular, gradient butonlar, blur uygulanmış glass kartlar, parlayan gölgeler, status chip'leri ve Lucide ikonları var. Profilde “Pro Member” yazıyor. “Automated Smart Savings Active” diye ayrı bir banner eklenmiş. Bildirim noktasında animasyon bile var.

Biri benden 2026'da “AI tarafından üretilmiş SaaS dashboard klişesini çiz” dese muhtemelen buna yakın bir şey çizerdim.

Gemini tarafından oluşturulan Northstar HTML/CSS çıktısının sadeleştirilmiş rekonstrüksiyonu; koyu slate arayüz, cyan vurgular, glass benzeri yuvarlak kartlar, gradient aksiyonlar, durum etiketleri ve dashboard grafikleri bulunuyor
Gemini güncel AI-dashboard estetiğini özellikle görünür hâle getiriyor.Hüdaverdi Ural

Komik olan şu: Gemini de benden istediğim işi yapıyor. Talep ettiğim bilgilerin tamamını verdi ve açık bir ana aksiyon koydu. Sorun briefi takip edememesi değil. Tam tersine ekran, listedeki her maddeyi başarıyla tamamladığını göstermek için biraz fazla uğraşıyor gibi.

Üretilen arayüzlerde sık gördüğüm bir desen bu: hiçbir şey sıradan kalamıyor. Tasarruf özelliği “Smart Savings” oluyor. İçgörüye sparkle ikonu geliyor. Profil üyelik seviyesine kavuşuyor. Durum renkli bir badge alıyor. Basit aksiyon gradient ve gölge kazanıyor. Model ürün olgunluğu sinyalleri ekliyor ama briefte iş modeli, marka veya bu kadar karmaşık bir sistem olduğuna dair bilgi yok.

Asıl belirti her problemin bir componente dönüşmesi olabilir

Dört çıktıyı yan yana düşününce benim için en güçlü ortaklık bu oldu.

İnsan tasarımcı da kartları fazla kullanabilir. Fakat gerçek projelerde düzeni bozan baskılar vardır. Yasal bir açıklama uzun bir cümleyi kötü bir yere zorlar. Bir stakeholder belli bir rakamın diğerinden önce görünmesini ister. Eski bir hesap tipi yeni hiyerarşiye uymaz. Kullanıcı testi, şık bir ikonun anlaşılmadığını gösterir. Teknik bir kısıt güzel bir etkileşimi bozup uzlaşma yaratır. Sonra tasarımcı sistemi bunların etrafında yeniden kurar.

Prompta koymadığımız sürece üretilen arayüzlerde bu izler yok.

Bu yüzden ekranlar garip biçimde sürtünmesiz hissedebiliyor. Kategori dağılımı oturuyor. Hedef oturuyor. Insight oturuyor. İşlem listesi oturuyor. Her şey kart oluyor ve her kart design system'ın terbiyeli bir üyesi gibi davranıyor. Ekran, tutarlılığı hak etmeden önce tutarlı hâle geliyor.

Nielsen Norman Group, generative UI ile AI-assisted design arasında yararlı bir ayrım yapıyor. AI-assisted design tasarımcının üretim sürecini hızlandırıyor. Generative UI ise kullanıcının bağlamına göre arayüzün kendisini dinamik olarak oluşturmayı hedefliyor. Bence daha önemli olan, bunun tasarımcıyı arayüz nesnesinden çok sonuçlara ve kısıtlara odaklanmaya zorlayacağı fikri. Generative UI yazılarında bunu outcome-oriented design olarak çerçeveliyorlar.

Bugünkü jenerik görünümün kaynağı da biraz burada. Model nesneyi üretmekte iyi. Zor kısım, o nesnenin bu ürüne ait olması için yeterince kısıt vermek.

Training patternleri açıklamanın yalnızca bir kısmı

Her şeyi “AI aynı sitelerle eğitildiği için ortalamayı kopyalıyor” diye açıklamak çok cazip. Bunda doğruluk payı olduğunu düşünüyorum ama tek başına yetmiyor.

Araçlar aynı zamanda kullanışlı sonuç üretmeye çalışıyor. Tanıdık yerleşimler kolay anlaşılıyor. Yaygın component kalıplarını geçerli kod olarak üretmek daha kolay. Popüler kütüphaneler stabil parçalar sağlıyor. Gemini örneğinde Tailwind CSS, Chart.js, Lucide, Inter, rounded-xl sınıfları ve tanıdık slate/cyan tokenları çok kısa sürede tamamlanmış bir dashboard çıkarmayı kolaylaştırıyor. Bu kötü bir şey değil. Tasarım sistemlerini zaten karar sayısını azaltmak için kullanıyoruz.

Fark, tasarımcının sistemin ne zaman nötr kalmaması gerektiğine karar verebilmesi.

Gerçek kullanıcıların otomatik para transferlerine güvenmediğini biliyor olabiliriz. O zaman “smart” insight daha sessiz olmalı. Bir banka trading uygulaması gibi görünmek istemeyebilir. Aile finansı ürünü net worth yerine ortak kararları öne çıkarabilir. Bunlar dekorasyon değil. Kimliğin kaynağı bunlar.

Bu tür kısıtlar olmadığında model geniş bir kullanıcı kitlesi için kabul edilebilir kalıplara dönüyor. Geniş biçimde kabul edilebilir cevap, çok büyük ölçekte tekrarlandığında fark edilir bir stile dönüşüyor.

“AI gibi görünmesin” demek iyi bir brief değil

Daha iyi prompt rahatsız edici derecede spesifik olurdu.

Mesela: Kullanıcıların çoğu ürüne maaş gününde ve kiradan bir gün önce geliyor. Ay sonunda ana hesap sık sık sıfıra yaklaşıyor. Araştırmada kullanıcılar harcama konusunda yargılayıcı dili sevmediklerini söyledi. Yatırım özelliği yok, bu yüzden “net worth” bizim kelimemiz değil. Web ürününde zaten 4 piksellik köşe radius'u kullanıyoruz. Marka premium değil, sakin görünmek istiyor. Insight bakiyeyi hiçbir zaman bölmemeli. İşlem listesi kategori analizinden daha önemli.

Şimdi modelin itiraz etmek zorunda olduğu bir şey var.

Bu karşılaştırma bana eski internetin neden daha kişisel hissettirdiği sorusunu da hatırlattı. O sayfalar tutarsızlık otomatik olarak iyi olduğu için ilginç değildi. Kararların kalıntısı görülebildiği için ilginçti. Birisi garip bir sayfayı diğerlerinden daha çok önemsemişti. Bir renk seçmiş ve vazgeçmemişti. Site bir insanın karar verdiğine dair iz taşıyordu.

Bir ürün bunu taklit ederek dağınık olmak zorunda değil. Ama karar izi taşıyabilir.

En güçlü AI işareti belki de anlaşmazlık eksikliği

Kendi tasarımlarımda geriye dönüp baktığımda en çok hatırladığım ekranların çoğunda tartıştığım bir şey var. Belki analytics başka bir yolu gösterdiği için ana buton taşındı. Belki güzel görünen ama kimsenin ihtiyacı olmayan bir kartı kaldırdım. Belki stakeholder fold üstüne daha fazla bilgi istedi ve ben karşı çıktım. Son ekran, onu üreten konuşmadan daha az şey içeriyor.

Northstar çıktılarında böyle bir anlaşmazlık yok. Çünkü modellere tartışacak çok az şey verdim. Boşluğu konvansiyonla doldurdular.

Bu deney “AI-generated look” fikrini benim için değiştirdi. Önceden bunu daha çok estetik kategori gibi düşünüyordum: gradient, glassmorphism, dev yuvarlak kartlar, mavi-mor ışık ve jenerik illüstrasyonlar. Bunlar gerçek işaretler ama geçici. Modeller yeni modaları çok hızlı öğrenebilir.

Daha kalıcı işaret yapısal olabilir. Ekranda çok sayıda doğru cevap var ama çok az spesifik fikir var.

Claude ile Gemini birbirinden oldukça farklı görünüp yine de bu nedenle akraba hissedebiliyor. Stitch açık kalırken Gemini dark mode'a gidiyor ve ikisi de tanıdık geliyor. Dört ekran aynı değil. Benzer olan belirsizliği çözme biçimleri: bir container ekle, label ekle, status ekle, ilerleme göstergesi ekle, güvenli bir aksiyon ekle.

AI'ı tartışmaya daha hızlı ulaşmak için kullanırdım

Bu deneyden “tasarımcılar ekran üretmeyi bıraksın” sonucu çıkarmıyorum. Tam tersine, tek briefle birkaç dakika içinde dört makul yön görmek faydalı. Nielsen Norman Group'un AI ve UX üzerine önceki araştırmalarında da profesyonellerin üretken araçları fikir geliştirme, yazma ve destek işleri için yoğun biçimde kullandığı görülüyordu. Tasarım araçları o dönemde henüz daha sınırlıydı ama üretim hızının değeri zaten ortadaydı.

Benim yapmayacağım şey, ilk tutarlı çıktıyı tasarım yönü sanmak.

Üretilen ekranı soru sormaya başlamak için kullanırdım. Bakiye neden en büyük nesne? Donut chart neden var? Insight neden kart? “İyi” neden hep yeşil? Her hedef neden progress bar istiyor? Health score'u neden gösteriyoruz? Ürün 1024 piksele indiğinde hangi modül yok oluyor? İşletmenin istediği ama kullanıcının istemediği hangi bilgi var?

Bu sorular üretimden daha yavaş. Muhtemelen olması gereken de bu.

AI üretim sürtünmesinin büyük kısmını ortadan kaldırıyor. Neyin var olmayı hak ettiğine karar verme ihtiyacını ortadan kaldırmıyor. Hatta ekran üretmek ucuzladıkça “hayır, bu değil” diyebilmenin değeri artıyor.

Bir sonraki sefer bir ekran bana çok belli biçimde AI üretimi gibi geldiğinde gradientin ötesine bakacağım. Kimsenin vermek zorunda kalmadığı kararı bulmak istiyorum.

Kaynaklar

  1. Generative UI and Outcome-Oriented Design Generative UI, AI-assisted design ve sonuçlarla kısıtlar etrafında tasarım üzerine Nielsen Norman Group yazısı.
  2. AI UX-Design Tools Are Not Ready for Primetime UX profesyonellerinin 2024'te AI tasarım araçlarını nasıl kullandığına dair Nielsen Norman Group araştırması.
  3. AI as a UX Assistant UX profesyonelleri arasında üretken yapay zeka kullanımına dair anket araştırması.
  4. Generative AI enhances individual creativity but reduces the collective diversity of novel content Bireysel yaratıcılık kazanımı ve kolektif yenilik azalması üzerine 2024 Science Advances çalışması.
  5. Homogenizing effect of large language models on creative diversity İnsan ve GPT metinlerindeki çeşitliliği karşılaştıran 2025 açık erişim çalışması.
  6. The homogenizing effect of large language models on human expression and thought LLM'ler ile bilişsel ve stilistik homojenleşme üzerine 2026 değerlendirmesi.
  7. What is AI slop in UI design? Jenerik AI arayüzleri ve AI kullanımı ile denetlenmemiş çıktı arasındaki fark üzerine tasarım sektörü yazısı.
  8. no-slop-ui Yaygın generated-UI varsayımlarını sınırlamak için hazırlanmış açık kaynak tasarım guardrail'i.
UX/UI ve Ürün Tasarımcısı

Hüdaverdi, İstanbul’da yaşayan bir ürün tasarımcısı. 2017’den bu yana haber siteleri, e-ticaret ürünleri, bir fintech uygulaması ve çeşitli makine kontrol panelleri üzerinde çalıştı. Şu anda bir medya platformunda ürün tasarımcısı olarak çalışıyor; burada genellikle tasarım, teknoloji ve ürün deneyimleri üzerine yazıyor. Bunun yanında ilham, sanat ve gündelik hayat üzerine de yazıyor.

Birlikte bir şeyler
üretelim

Merhaba de!