Ürün Akışlarını Bir Tiyatro Sahnesi Gibi Kurgulamak: Freytag Piramidi

Aylarca kodladığınız, her bir edge case’ini kusursuz mantıksal akışlarla bağladığınız o muazzam ürünü yayına alıyorsunuz. Figma dosyası bir sanat eseri, backend tıkır tıkır çalışıyor, veritabanı sorguları şiir gibi…

Ertesi sabah heyecanla Analytics ekranını açıyorsunuz ve o da ne: Kullanıcıların %70'i 30. saniyede ürünü terk etmiş.

Sorun yazdığınız kodda değildi. Sorun UI’ın piksellerinde de değildi. Sorun, kullanıcıya bir hikaye yaşatmak yerine, eline dijital bir “kullanma kılavuzu” tutuşturmamızdaydı.

Tam bu noktada durup, her ürün tasarımcısının & geliştiricisinin dürüstçe ekrana bakıp sorması gereken bir soru var:

Eğer bir ürünün nasıl kullanılacağını “açıklama” ihtiyacı hissediyorsak, o ürün gerçekten bitmiş midir?

İyi bir arayüzü fıkra gibi düşünebiliriz; eğer açıklamak zorunda kalıyorsak, yeterince iyi değildir. Benzer şekilde eğer ürününüzün ilk ekranına 4 farklı tooltip, yanıp sönen 3 pop-up ve 2 dakikalık bir “Nasıl Kullanılır?” videosu koymak zorunda kaldıysanız; siz bir ürün inşa etmemişsinizdir. Siz, kendi kafa karışıklığınızın haritasını çıkarıp faturasını kullanıcıya kesmişsinizdir.

Kaynak: https://tenor.com/tr/view/cat-is-sick-of-his-food-gif-18116422787692633583

Kullanıcının o ekranda bir kılavuza değil, bir kancaya ihtiyacı vardı.

Ürünü geliştirme aşamasında, veri tabanları ve API’lar dünyasında kaybolurken bazen çok temel bir insani gerçeği atlayabiliyoruz: İnsan beyni veriyi işlemez, hikayeyi yaşar. Bir kullanıcının uygulamanızı silmemesini sağlayan şey sunduğunuz fonksiyonun ne kadar mühendislik harikası olduğu değil; o fonksiyonu kullanırken geçtiği duygusal arkın bizzat kendisidir.

(Tam bu noktada küçük bir parantez açayım: Bu satırları bir tiyatro teorisyeni ya da dramaturg kimliğiyle değil; sahne ışıkları kapandığında koltuğa çakılı kalma hissine, iyi bir müzikalin insana yaşattığı o kusursuz serüvene aşık bir izleyici gözüyle yazıyorum. Çünkü bana göre harika bir dijital ürün kullanmak ile harika bir oyun izlemek arasında, sandığımızdan çok daha güçlü bir bağ var.)

İşte bu bağı kurabilmek için, modern UI kütüphanelerinden veya Figma auto-layout’larından çok daha eski bir framework’e sığınmamız gerekiyor: 1863 yılına ve Gustav Freytag’a.

5 Aşamalı Dramatik Yapı: Freytag Piramidi

Alman yazar Gustav Freytag, Antik Yunan trajedilerini ve Shakespeare oyunlarını incelerken şunu fark eder: İnsan hafızasında yer eden ve “tatmin” yaratan her başarılı anlatı, hiç de tesadüfi olmayan 5 aşamalı bir piramit izliyor.

Kaynak: https://ixdf.org/literature/article/freytags-pyramid-ux-ui-design-case-study?r=eda-hazal-tumer

1. Serim (Exposition): Dünya tanıtılır, atmosfer sakindir.
2. Yükselen Tansiyon (Rising Action): İlk problem belirir, merak tetiklenir.
3. Zirve / Düğüm (Climax): Geri dönüşü olmayan o büyük an. Çatışmanın en yüksek noktası.
4. Düşüş / Çözülme (Falling Action): Sonuçlar netleşir, taşlar yerine oturur, tansiyon düşer.
5. Çözüm (Resolution): Yeni “normal” kurulur. Kahraman artık dönüşmüştür.

Şimdi tiyatro dürbünlerini kenara bırakalım. Bu beş maddeyi alıp, yeni indirdiğiniz bir SaaS ürününün ilk 3 dakikasına haritalayalım.

Ruhsuz tasarlanmış bir ürün akışı düz bir çizgidir: Giriş yap -> Butona bas -> Veriyi gör. Bu akışta duygu yoktur, dolayısıyla bağlılık da yoktur. Gelin karmaşık bir veri otomasyonu aracı tasarladığımızı varsayalım ve Freytag’ı ekrana çağıralım:

1. Serim: “Sakin Karşılama” (Calm Onboarding)

• Tiyatroda: Perde açılır, sahnedeki dekoru ve ışığı görürüz. Karakterin kim olduğunu anlarız.
• Üründe: Landing Page veya ilk açılış ekranı.

Kullanıcıyı “Hemen üye ol! Bak bu da var, şu entegrasyonu da yaptık, yıllık alırsan %20 indirim!” gürültüsüyle boğmadığınız yer. Sakin bir tipografi, etrafında bolca nefes payı bırakılmış net bir değer teklifi. Calm Tech felsefesinin kalbi buradadır: Bana ne yapacağımı söyleme, sadece doğru yerde olduğumu hissettir. Kullanıcının omuzlarındaki “yeni bir uygulama öğrenme” gerginliğini aldığınız ilk saniye.

Kullanıcıyı karşılamak ona broşür dağıtmak değildir; paltosunu asacağı yeri gösterip tezgahın başına geçmesine izin vermektir.

2. Yükselen Tansiyon: “Sürtünmeyi Amaca Dönüştürmek”

• Tiyatroda: Kahramanın karşısına ilk engeller çıkar, “Acaba çözecek mi?” deriz.
• Üründe: Kullanıcının ilk eforu sarf ettiği, form doldurduğu yer.

Ürün tasarımında en büyük dogmalardan biri “kullanıcının önüne asla engel koyma” kuralıdır. Oysa mesele engelin varlığı değil; büyüklüğü ve ‘amacıdır’. Doğru kurgulanmış, amaçlı bir sürtünme (Purposeful Friction), kullanıcıyı hikayenin içine çeker.

Örneğin; “Hangi veri tabanını bağlamak istiyorsun?” veya “Sana en çok zaman kaybettiren 3 kaotik senaryoyu seç” dediğiniz an, kullanıcı kendi probleminin ağırlığıyla yüzleşir. Tansiyon yükselir. Merak kancası takılmıştır; çünkü vereceğiniz cevabın onun derdine derman olmasını beklemektedir.

Sol taraf “Seni tanımak istiyorum” der. Sağ taraf ise “Seni anlıyorum” der. Hangisine güvenirsiniz?

3. Zirve (Climax): Meşhur “Aha!” Anı

• Tiyatroda: Luke Skywalker’ın Death Star’ın zayıf noktasına füzeyi bıraktığı saniye.
• Üründe: Kullanıcının “Sihri Başlat” butonuna bastığı an.

Arka planda çalışan o kaotik n8n akışlarının, yazdığınız binlerce satır asenkron kodun saniyeler içinde veriyi derleyip topladığı yer. Bu anı asla dümdüz dönen bir “Yükleniyor…” spinner’ı ile harcayamazsınız.

Zirve; arayüzün verdiği o anlık nefes tutma hissiyle, amaca hizmet eden bir mikro-animasyonla ve bittiğinde ekranda beliren o tatmin edici görsel geri bildirimle kutlanmalıdır. Kullanıcı o saniye ekrana bakıp şunu demelidir: “Oha, cidden çözdü.” (Ya da buna yakın, kullanıcının omuzlarını iki santim aşağı düşüren bir tatmin cümlesi)

Kötü tasarım sizi kapıda bekletir; iyi tasarım mutfağa alır, yemeğin pişişini izletir.

4. Düşüş / Çözülme: Dopamin Sonrası Güvence

• Tiyatroda: Savaş biter, duman dağılır, yaralılar sayılır ve eve dönüş yolu başlar.
• Üründe: İşlem bitti, ekrana 40 satırlık bir analiz döküldü.

Şimdi ne olacak? Kullanıcıya o “kaybolma ve panik” hissi gelmeden hemen devreye girmelisiniz: “Verilerin 4 farklı lokasyona başarıyla sync edildi. Her şey güvende.” Karmaşık ayar panellerinin gizlendiği, arayüzün sükunete kavuştuğu, sadece tertemiz bir “Sonuç Özeti”nin kaldığı o derli toplu liman.

İkisi de işi bitirdi. Ama sol taraftaki size bir ‘Rapor’ sundu; sağ taraftaki ise bir ‘Zafer’.

5. Çözüm: “Yeni Kimlik”

• Tiyatroda: Kahraman köyüne döner; o artık filmin başındaki sıradan çocuk değildir.
• Üründe: Kullanıcının browser sekmesini kapattığı an.

Uygulamanızı açmadan önce “Bu karmaşık tablolarla nasıl baş edeceğim?” diyen kurban kimliğinden; “Ben bu işi tek tıkla çözen bir fatihim” kimliğine geçiş. İnsanlar sizin yazdığınız kod bloklarına veya seçtiğiniz hex renk kodlarına aşık olmazlar; sizin ürününüz sayesinde büründükleri o “yetenekli ve akıllı insan” kimliğine aşık olurlar.

Kaynak: https://tenor.com/tr/view/thor-marvel-meme-what-heroes-do-gif-14703930

Masadan Hangi Bilgiyle Kalkıyoruz?

Yarın sabah Figma’da yeni bir Frame açtığınızda veya VS Code’da boş bir page.tsx dosyasına bakarken kendinize şu turnusol sorusunu sorun:

“Ben şu an ekrana statik bir veri mi döküyorum, yoksa kullanıcının içinden geçeceği tünelin bir istasyonunu mu çiziyorum?”

Eğer tasarımınızın her yeri kırmızı bildirimler, her köşesi patlayan konfetiler ve her modalı “Hemen Upgrade Et” butonlarıyla doluysa, orada bir Zirve yoktur; sadece sağır edici bir görsel gürültü vardır. Gustav Freytag 163 yıl öteden bize şunu der ki: Zirve, ihtişamını serim aşamasındaki sessizliğe ve çözülme aşamasındaki sükunete borçludur.

Yani Gustav Hoca’nın 1863 Almancasından günümüz ürün argosuna serbest çevirisiyle: “Saçmalama evladım; elindeki o 15 adımlı tooltip turunu sakince yere bırak, Allah aşkına o yersiz patlayan konfetileri de topla…”

Şimdi kendi ürününüze dürüstçe dışarıdan bir bakın.

Sizin meşhur “Climax” (Zirve) anınız tam olarak hangi ekranda yaşanıyor? Ve daha acı olanı; kullanıcıyı o zirveye ulaştırana kadar yolda kaç tane gereksiz input alanıyla hırpalıyorsunuz?

(Sahne sizin.)

Originally published at https://www.linkedin.com.