Bir iş analisti olarak yeni bir ekran tasarlarken amaç çoğu zaman kusursuz bir arayüz ortaya çıkarmak değildir. Asıl amaç; ihtiyacı somutlaştırmak, kullanıcı akışını göstermek ve geliştirici, ürün sahibi ve diğer paydaşların aynı ekran hakkında konuşmasını sağlamaktır.
Wireframe ve mockup araçları bu noktada uzun zamandır önemli bir ihtiyacı karşılıyor. Ancak yapay zeka destekli geliştirme araçlarının yaygınlaşmasıyla birlikte ekran tasarımında farklı bir çalışma şekli mümkün hale geldi:
Ekranı çizmek yerine, ihtiyacı tarif ederek çalışan bir prototip oluşturmak.
Basit Bir Mockup Neden Zaman Alıyor?
Moqups gibi araçlarla bir ekran hazırlamak teknik olarak zor değildir. Bir form ekranı tasarladığımızı düşünelim. Ekrana metin alanları ekleriz, butonları yerleştiririz, başlıkları düzenleriz, tabloları oluştururuz ve bileşenlerin konumlarını ayarlarız.
Bunların hiçbiri tek başına zor işler değil.
Fakat zaman alırlar.
Üstelik ekran üzerinde değişiklik yapılması gerektiğinde aynı işlemlerin bir kısmını tekrar yapmak gerekir. Bir alanın eklenmesi, butonların yeniden konumlandırılması veya farklı bir ekran alternatifinin hazırlanması küçük işler gibi görünse de analiz sürecinde ciddi zaman kaybına dönüşebilir.
Tam da burada yapay zeka önemli bir hızlandırıcı olabilir.
Çizmek Yerine Anlatmak
Örneğin aşağıdaki gibi bir ihtiyaç düşünelim:
Müşteri arama ekranı oluştur. Üst bölümde VKN/TCKN ve müşteri adı ile arama yapılabilsin. Alt bölümde sonuçlar tablo halinde gösterilsin. Tabloda müşteri adı, VKN/TCKN, durum ve işlem kolonları bulunsun. Kullanıcı bir müşterinin detayını görüntüleyebilsin.
Klasik yöntemde bu gereksinimi aldıktan sonra mockup aracını açıp bileşenleri tek tek yerleştirmeye başlarız.
Yapay zeka destekli yöntemde ise aynı açıklamayı modele vererek HTML ve CSS tabanlı ilk ekran taslağını birkaç dakika içerisinde oluşturabiliriz.
Daha da önemlisi, ilk tasarımın mükemmel olması gerekmez.
“Arama alanını küçült.”
“Tabloyu daha modern yap.”
“Durum alanını badge olarak göster.”
“Detay butonu yerine üç noktalı işlem menüsü kullan.”
“Bu ekranın mobil görünümünü de hazırla.”
gibi doğal dilde verdiğimiz talimatlarla prototipi iteratif şekilde geliştirebiliriz.
Buradaki kazanç yalnızca kod yazdırmak değildir. Asıl kazanç, fikrin görsel karşılığını oluşturmak için harcadığımız süreyi azaltmaktır.
Statik Mockup’tan Dinamik Prototipe
Yapay zeka ile hazırlanan HTML tabanlı ekranların bence en önemli avantajlarından biri burada ortaya çıkıyor.
Moqups gibi klasik mockup araçlarında oluşturduğumuz tasarım çoğunlukla ekranın nasıl görüneceğini anlatır. Bazı prototipleme ve etkileşim özellikleri kullanılabilse de temel çalışma mantığı tasarım odaklıdır.
HTML, CSS ve JavaScript ile oluşturulan bir prototip ise ekranın yalnızca nasıl görüneceğini değil, nasıl davranacağını da gösterebilir.
Örneğin kullanıcı:
Arama butonuna basabilir,
Tabloyu filtreleyebilir,
Bir modal açabilir,
Dropdown’dan seçim yapabilir,
Form doğrulama mesajlarını görebilir,
Sekmeler arasında geçiş yapabilir,
Başarılı ve hatalı senaryoları deneyebilir.
Bu durumda ortaya çıkan çalışma artık yalnızca bir ekran çizimi değildir. Gereksinimin davranışını anlatan çalışan bir prototipe dönüşür.
Bu ayrım özellikle iş analizi açısından oldukça değerli.
Bir butonun nerede duracağını tartışmakla, o butona basıldığında ne olacağını birlikte deneyimlemek arasında ciddi fark vardır.
“Bunu Böyle Hayal Etmemiştim” Problemini Azaltmak
Analiz çalışmalarında sık karşılaşılan durumlardan biri, yazılı gereksinimin herkes tarafından farklı yorumlanmasıdır.
Dokümanda “Kullanıcı müşteri seçerek detay ekranına ilerler.” yazabilir.
Analist başka bir şey, geliştirici başka bir şey, ürün sahibi ise tamamen başka bir şey hayal edebilir.
Çalışan prototip burada ortak bir referans noktası oluşturur.
Toplantıda ekranı açıp:
“Kullanıcı buraya VKN giriyor, Ara butonuna basıyor, sonuçlar burada geliyor ve bu satıra tıkladığında detay açılıyor.”
diyebilmek, uzun açıklamalardan çok daha etkili olabilir.
Hatta toplantı sırasında bir paydaş “Burada müşteri adıyla da arayabilmeliyiz.” dediğinde değişikliği not edip daha sonra prototipe eklemek yerine, yapay zeka yardımıyla kısa sürede yeni versiyonu oluşturmak mümkün hale gelir.
Yapay Zeka Analistin Yerini Değil, Zamanını Değiştiriyor
Burada önemli bir ayrım yapmak gerekiyor.
Yapay zekanın hızlı şekilde güzel bir ekran oluşturabilmesi, doğru ekranı oluşturduğu anlamına gelmez.
Hangi alanların gerekli olduğu, hangi kullanıcıların ekranı kullanacağı, validasyonların nasıl çalışacağı, hangi iş kurallarının uygulanacağı, hata senaryolarının neler olduğu ve kullanıcının hangi adımlardan geçeceği hâlâ analiz edilmesi gereken konulardır.
Yani yapay zeka:
“Ne yapılmalı?” sorusunun cevabını bizim yerimize otomatik olarak vermez.
Fakat doğru şekilde kullanıldığında:
“Bunu nasıl hızlıca görünür ve denenebilir hale getirebiliriz?” sorusunda ciddi avantaj sağlar.
Bu nedenle yapay zekayı analistin yerine geçen bir araçtan çok, analistin üretim hızını artıran bir yardımcı ekip arkadaşı olarak görmek daha doğru olabilir.
Asıl Kazanç: Daha Fazla Alternatif Deneyebilmek
Bence yapay zeka destekli ekran tasarımının gözden kaçan avantajlarından biri de bu.
Eskiden bir mockup hazırlamak 30-40 dakika sürüyorsa, ikinci ve üçüncü alternatifi hazırlamak için tekrar zaman ayırmak gerekiyordu. Bu nedenle çoğu zaman ilk kabul edilebilir tasarım üzerinden ilerliyorduk.
Üretim maliyeti düştüğünde ise yaklaşım değişiyor.
Aynı ekran için:
Versiyon A: tablo ağırlıklı,
Versiyon B: kart tabanlı,
Versiyon C: sol tarafta filtre, sağ tarafta sonuçlar
gibi farklı yaklaşımları çok daha hızlı deneyebiliriz.
Yani yapay zeka yalnızca mevcut işi hızlandırmıyor; daha fazla fikir denemeyi ekonomik hale getiriyor.
Bu da doğrudan tasarım ve analiz kalitesine katkı sağlayabilir.
Prototip ile Gerçek Ürün Arasındaki Çizgi
Burada dikkat edilmesi gereken bir konu da var.
Yapay zekanın oluşturduğu HTML ekran tarayıcıda çalışıyor diye bunu production-ready bir uygulama olarak değerlendirmemek gerekir.
Gerçek geliştirme sürecinde erişilebilirlik, responsive davranışlar, güvenlik, performans, tasarım sistemi, API entegrasyonları, hata yönetimi, yetkilendirme ve kod kalitesi gibi çok daha fazla konu devreye girer.
Bu nedenle benim için en güçlü kullanım alanlarından biri:
Gereksinim → Yapay zeka → Çalışan prototip → Paydaş geri bildirimi → Netleştirilmiş gereksinim → Geliştirme
akışıdır.
Burada yapay zeka geliştirmenin yerine geçmez. Analiz ile geliştirme arasındaki boşluğu küçültür.
Yapay zekanın iş hayatındaki en büyük katkılarından biri, zor işleri yapabilmesinden ziyade bazen kolay ama zaman alan işleri çok daha hızlı yapabilmesidir.
Mockup hazırlamak bunun güzel örneklerinden biri.
Bir iş analisti birkaç saatini ekranları çizmek ve düzenlemek için harcamak yerine, ihtiyacını doğru şekilde tarif edip yapay zeka ile çalışan bir HTML prototipi oluşturabilir. Kalan zamanını ise iş kurallarını anlamaya, istisnaları keşfetmeye, kullanıcı deneyimini değerlendirmeye ve doğru soruları sormaya ayırabilir.
Bence yapay zeka destekli çalışmanın gerçek değeri de burada ortaya çıkıyor:
Daha az zamanda daha fazla çıktı üretmek değil; insanın zamanını daha değerli işlere ayırabilmesini sağlamak.
Not: Bu blog yazısının hazırlanması ve düzenlenmesi sürecinde yapay zeka desteğinden yararlanılmıştır. 🦾