Uygulamalarda kurulum tamamlanmasını sağlayan boş durum tasarımı

Neden boş durumlar kurulumda belirleyici olur

Boş bir ekran tarafsız değildir. İnsanların ne yapacağını tahmin etmeye başladığı, bir adımı kaçırıp kaçırmadıklarını veya ürünün çalışıp çalışmadığını sorguladıkları bir duraklama yaratır. Kurulum sırasında bu duraklama pahalıdır. "Başlıyorum"ı "daha sonra gelirim"e çevirir.

Boş durum, kullanıcı hiçbir şey oluşturmadığında, içe aktarmadığında veya bağlamadığında görünen ekrandır. Bu bir yükleniyor ekranı, hata mesajı veya izin uyarısı değildir. Değerin hemen öncesindeki andır; uygulamanın kullanıcıyı ilk anlamlı sonuca ulaşması için yardımcı olması gerekir.

İyi bir boş durumun bir işi vardır: kullanıcıyı olabildiğince az düşünme ile bir sonraki başarılı eyleme taşımak. "Başarılı" önemlidir. Bir sonraki adım gerçek bir sonuç üretmelidir (ilk proje, bağlı bir veri kaynağı, oluşturulmuş ilk öğe), ölü bir form veya belirsiz bir ürün turu değil.

Bu anlar ekiplerin beklediğinden daha sık çıkar: kayıt sonrası ilk oturum, yepyeni bir çalışma alanı, henüz öğe olmayan bir özellik sekmesi (projeler, müşteriler, dosyalar) veya içe aktarma atlandığında hiçbir şeyin olmadığı bir kurulum yolu.

Boş durum işini iyi yaptığında üç soruyu hızlıca yanıtlar:

• Bu ekran nedir?
• Neden boş?
• Şimdi ne yapmalıyım?

Örnek: Koder.ai'de yeni bir kullanıcı taze bir çalışma alanı açıp henüz uygulama olmadığını görebilir. Güçlü bir boş durum açıkça hiçbir şey oluşturulmadığını söyler, "İlk uygulamanızı oluşturun" gibi bir sonraki belirgin eylemi sunar ve küçük bir güvence notu ekler (örneğin, kaynak kodu dışa aktarma ve snapshot'ların başlangıçtan sonra mevcut olduğu). Amaç "burada hiçbir şey yok"u "ilk çalışan sonuca ulaşabilirim"e çevirmektir.

Kullanıcılar boş ekran gördüğünde ne düşünüyor

İlk kez gelen bir kullanıcı için boş ekran uygulamanın takıldığını veya kendilerinin bir hata yaptığını hissettirebilir. Zihin boşluğu hızla doldurur ve genelde sizin lehinize olmaz.

Çoğu insan sessizce aynı soru setini sorar:

• Bu sayfa ne için?
• İlk olarak ne yapmalıyım?
• Bunu yaptıktan sonra ne olur?
• Bir şeyi bozacak mıyım?
• Sonra değiştirebilir ya da geri alabilir miyim?

Bu soruların arkasındaki duygular davranışı yönlendirir. Belirsizlik insanları bekletir. Yanlış yapma korkusu birincil düğmeden uzak tutar. Sabırsızlık, net bir sonraki adım birkaç saniye içinde görünmezse uygulamayı kapatmalarına neden olur.

Yeni kullanıcı boş durumları ile ileri düzey kullanıcı boş durumları farklı sorunları çözer. Yeni kullanıcılar bağlama ve güvenceye ihtiyaç duyar çünkü henüz sizin sözlüğünüzü bilmiyorlar. Dönen kullanıcılar hız ister: başka bir öğe oluşturmanın, veri içe aktarmanın veya tanıdık bir eylemi tekrarlamanın hızlı bir yolu.

Kurulum boş durumları ayrıca hata ve yükleniyor durumlarından farklıdır. Yükleniyor "bekleyin, bir şey oluyor" der. Hata "bir şey başarısız oldu, nedeni bu" der. Kurulum ise "henüz bir şey yok, bu normal" der ve "başlamak için işte yol" der.

Somut bir örnek: birisi Koder.ai'de yeni bir çalışma alanı açıp Boş "Projeler" sayfası görürse, özellikleri düşünmüyor olurlar. "Bir prompt'tan mı başlayayım, kod mu içe aktarayım, yoksa bir şablon mu seçeyim ve bu bir şeyi bozacak mı?" diye düşünüyorlar. Boş durumunuz bunları dokümantasyona yönlendirmeden cevaplamalı.

İşleyen basit bir yapı: açıkla, yönlendir, güven ver

İyi bir boş durum boş hissettirmez. Bir yol gösterici gibi davranır: "Burası ne için, ve bir sonraki tıklama burada."

Çoğu kurulum akışında işe yarayan yapı üç parçadan oluşur:

• Anlamı açıklayın: bu alanın ne için olduğunu söyleyen kısa bir cümle.
• Bir sonraki adımı yönlendirin: en yaygın sonraki harekete uyan tek bir birincil eylem.
• Güvence verin: algılanan riski veya çabayı azaltan kısa bir satır.

Açıklamayı sıkı tutun. Ekranı açıklamak için bir paragraf gerekiyorsa kullanıcıdan çok fazla düşünmesini istiyorsunuz demektir. "İlk projenizi ekleyin" veya "İlk çalışma alanınızı oluşturun" gibi sade kelimelerle 1–2 kısa cümle hedefleyin.

Sonra bir sonraki adımı tek bir birincil butonla bariz kılın. Üç eşit buton gösterirseniz kullanıcıdan sayfayı anlamadan bir yol seçmesini istemiş olursunuz. Alternatifler sunmanız gerekiyorsa (içe aktar, şablon, atla), bunları görsel olarak birincil eylemden daha sessiz tutun.

Güvence satırını yaygın korkuları ortadan kaldırmak için kullanın: yanlış yapma, zaman kaybı veya teknik beceri gereksinimi. Sonrasında ne olacağı ve bunun geri alınabilir olduğu hakkında küçük ipuçları uzun açıklamalardan daha fazla yardımcı olur.

İlk kez "Projeler" ekranı için örnek kopya:

Başlık: İlk projenizi başlatın

Açıklama: Projeler uygulama kurulumunuzu ve sürümlerinizi tutar.

Birincil eylem: Proje oluştur

Güvence: Yaklaşık 2 dakika sürer. İstediğiniz zaman yeniden adlandırabilirsiniz.

Ürününüz birden fazla başlama yolu destekliyorsa (sohbetten oluşturma, içe aktarma veya şablon gibi Koder.ai benzeri araçlarda olduğu gibi), varsayılan olarak "Oluştur"u koruyun ve "İçe aktar" ile "Bir şablon kullan"ı birincil eylemin altında ikincil olarak yerleştirin.

Karmaşayı azaltan metin kalıpları

Boş durumlar, metin özellikle kullanıcıya ne elde edeceğini söylemek yerine özelliklerden bahsettiğinde başarısız olur. Sözleriniz hızlıca şu soruları yanıtlamalı: Bu ekran ne? Neden burada bir şey yapmalıyım? Sonra ne yapmalıyım?

Basit bir başlık formülü Sonuç + nesnedir. Sonucu ve oluşturacakları şeyi adlandırın, dahili özellik adınızı değil.

• İyi: "İlk müşterinizi ekleyin" veya "İlk projenizi oluşturun"
• Zayıf: "Müşteriler" veya "Proje modülü"

Gövde metni için nedir + neden önemliyi 1–2 cümlede kullanın:

"Müşteriler, satış yaptığınız kişilerdir. Şimdi birini ekleyin ki fatura gönderip ödemeleri takip edebilesiniz."

CTA'lar bir fiil ile başlamalı ve belirli bir isim içermeli. Birden fazla yol olduğunda belirsiz butonlar olan "Başlayın" gibi ifadelerden kaçının.

• "Proje oluştur"
• "Kişileri içe aktar"
• "Bir şablon seç"
• "Ödeme hesabı bağla"
• "Bir ekip üyesi davet et"

Riskli görünen seçeneğin hemen yanına mikro metin ekleyin. Küçük güvence notları uzun açıklamalardan daha çok işe yarar:

• "Bunu sonra değiştirebilirsiniz."
• "Yaklaşık 2 dakika sürer."
• "İstediğiniz zaman silebilirsiniz."

Ürününüz kullanıcı için çıktı üretiyorsa (Koder.ai gibi), insanların nihai sürüme commit etmediklerini bilmeleri için beklentiyi ayarlayın: "İlk taslağı oluşturacağız. Yayınlamadan önce inceleyip düzenleyebilirsiniz."

Bir sonraki eylemi bariz kılan düzen kalıpları

İyi bir boş durum bir yol gösterici gibi okunmalı, poster gibi değil. Düzen, insanların bir bakışta anlamasını ve harekete geçmesini sağlayacak net bir sıra sunmalıdır.

Gözün sayfayı tarama şeklini eşleştiren basit bir hiyerarşi kullanın: başlık, kısa bir cümle, birincil CTA, sonra daha sessiz ikincil eylem (içe aktar, şablon, atla).

Birincil butonu mesaja yakın tutun. Kullanıcı okumak, kaydırmak ve sonra karar vermek zorunda kalırsa çoğu zaman durur. Yaygın bir desen başlık + gövde + CTA sıkı bloğudur; bu bloğun etrafında ise gezinme, footer, yan panellerden daha fazla boşluk bırakılır.

İkonlar ve küçük illüstrasyonlar taramaya yardımcı olabilir, ama yalnızca anlam katıyorlarsa. "Hiç proje yok" yanında bir klasör ikonu faydalı olabilir. Rastgele bir maskot ise genelde değil. İllüstrasyon kullanıyorsanız küçük tutun ve başlığın üstünde konumlandırın ki CTA ile rekabet etmesin.

En güçlü kalıplardan biri başarıya küçük bir önizleme göstermektir: örnek bir kart, tabloda tek bir demo satırı veya soluk bir örnek kutu. Koder.ai gibi bir araçta boş "Uygulamalar" ekranı bir örnek uygulama kartı (isim, durum, son güncelleme) gösterebilir; böylece kullanıcılar ne yaratacaklarını anlarlar.

Doğru yolu seçin: oluştur, içe aktar veya şablondan başla

Boş bir ekrana gelen biri genelde üç şeyden birini ister: sıfırdan başlamak, veriyi taşımak veya bir başlangıç paketiyle hızlıca ilerlemek. İyi boş durumlar bu yolları netleştirir ama kullanıcıyı incelemeden karar vermeye zorlamaz.

Oluştur-öncelikli: iş sıfırdan başlamaksa

İlk gerçek kazanım yeni bir şey yaratmaksa (proje, çalışma alanı, sayfa veya ilk kayıt) "Oluştur"u öne çıkarın. Bu, kullanıcı hızlıca bitirebiliyorsa ve eylem geri alınabiliyorsa en iyi sonucu verir.

Oluşturma daha uzun sürüyorsa onu daha küçük bir ilk adıma bölün (örneğin "Taslağı oluştur") ki kullanıcı kilitlenmiş hissetmeden ilerleyebilsin.

İçe aktar-öncelikli: kullanıcıların zaten verisi varsa

Yeni kullanıcıların çoğu mevcut bir sistem, dosya veya hesapla geliyorsa "İçe aktar"ı öne çıkarın. Boş durum, içe aktarmanın neleri desteklediğini ve sonrasında neler elde edeceklerini belirtmelidir (örneğin, alanların eşlenmesi ve öğelerin oluşturulması).

Birincil CTA'yı seçmenin pratik yolu bağlama bakmaktır. Kullanıcı göç içeriğiyle geliyorsa İçe aktar'ı vurgulayın. Boş bir "yeni proje" butonuna tıklamışlarsa Oluştur'u vurgulayın. Kurulum karmaşıksa Şablon'u vurgulayın.

Şablon-öncelikli: hız kontrolden daha önemliyse

Ürününüz yaygın başlangıç noktalarına sahipse ve kullanıcılar tasarlamak yerine uyarlamak istiyorsa şablonla başlayın. Şablonları sonuç adıyla adlandırın ("Satış hattı", "Haftalık planlayıcı"), özelliklerle değil.

"Örnek verilerle dene" güvenli bir seçenek korkuyu azaltır. Silinebileceğini açıkça belirtin. Sohbet-öncelikli bir oluşturucuysa (Koder.ai gibi) örnek bir proje kullanıcıların kendi promptlarını yazmadan önce çalışan bir uygulamanın şekline bakmasını sağlar.

Adım adım: kurulum tamamlama için boş durum tasarlamak

Boş ekranlar tarafsız değildir. En iyi olanlar bir sonraki başarılı eylemi bariz, güvenli ve hızlı hissettirir.

Tekrar kullanılabilir 5 adımlık yöntem

1. Harekete geçirilecek tek bir kurulum kilometre taşını seçin. Kullanıcıya değer verdiğini kanıtlayan tek eylemi seçin (ilk projeyi oluşturmak, ilk ekip üyesini eklemek, ilk veri kaynağını bağlamak). Üç hedefi aynı anda desteklemeye çalışırsanız kullanıcılar donar.
2. Girdileri en aza indirin. O kilometre taşına ulaşmak için sadece gerekli olanları tutun. Opsiyonel alanlar ilk kazanımdan sonra "Detay ekle"in arkasına konabilir.
3. Temel öğeleri şu sırayla yazın:
   • Başlık: bu alan ne için (sade kelimeler, slogan yok)
   • Gövde: eylemden sonra ne olur (1 cümle)
   • Birincil CTA: kilometre taşına uyan bir fiil
   • Bir yedek eylem: içe aktar, örnek veri veya şablon (açıkça ikincil)
4. Güvence ve bir kaçış yolu ekleyin. "Bir şeyi bozacak mıyım?" sorusunu cevaplayın: "Bunu sonra düzenleyebilirsiniz" gibi kısa bir satır ve geri alma/düzenleme/silme yolları çekinceleri azaltır.
5. 3 kişiyle test edin, sonra tamamlamayı izleyin. Nerede durakladıklarını ve ilk hangi şeye tıkladıklarını izleyin. Yayından sonra boş durum görüntülemelerini, birincil CTA tıklamalarını ve kilometre taşına ulaşma oranını takip edin.

Örnek: birisi yeni bir CRM açıp "Kişiler" sekmesinin boş olduğunu görürse en hızlı kazanım "İlk kişinizi ekleyin"dir. Adı + e-posta ile sınırlayın, geri plan olarak "CSV içe aktar" sunun ve alanları daha sonra güncelleyebileceklerini güvence verin.

Kullanıcıların takılı kalmasına neden olan yaygın hatalar

Çoğu "takılmış" boş durumun başarısız olmasının nedeni tek: bir sonraki hareketi riskli veya belirsiz hissettirmeleri.

1) Yarışan CTA'lar

Üç eşit görünümlü düğme gösterirseniz kullanıcı durur. Birincil eylem ve bir ikincil eylem seçin. Diğer seçenekleri "Daha fazla seçenek"in arkasına koyun.

2) Sonuç yerine özellikleri satan metin

"Güçlü panolar, esnek roller, gelişmiş ayarlar" insanlara şimdi ne yapılacağını söylemez. Bunun yerine tıklamadan sonra elde edecekleri sonucu söyleyin.

Örnekler:

• "İlk müşterinizi ekleyin, satış takibini başlatın (yaklaşık 1 dakika)"
• "İlk build'i üretmek için reposunu bağla"

3) İlk kazanç öncesi çok fazla bilgi istemek

Boş durumda uzun formlar taahhüt gibi gelir. Detayları sonra kazanın. İlk görünür şeyi üretecek en küçük adımla başlayın.

İsim, şirket büyüklüğü, rol ve hedefleri istemek yerine önce sadece "Proje adı" isteyip ilk ekran oluşturulduktan sonra diğer alanları isteyin.

4) Ne olacağını saklayan muğlak veya şaka metinleri

Mizah iyidir ama kullanıcı netlik isterken değil. "Burada görülecek bir şey yok" anı boşa harcar. Tıklamadan sonra ne olacağını ve ne olmayacağını net söyleyin.

5) Birincil eylem engellendiğinde yedek yol olmaması

Bazı kullanıcılar sıfırdan oluşturamaz. Gerçek bir yedek yol sunun: içe aktar, şablon başlatma veya örnekle deneme. Örneğin Koder.ai'de fikri hazır olmayan bir kullanıcı için "Örnek bir uygulamayla başla" onları yazılı tam bir spesifikasyon girmeden çalışan bir ekrana götürebilir.

Yayına almadan önce hızlı kontrol listesi

Yeni bir kullanıcı ekranın ne olduğunu, neden önemli olduğunu ve şimdi ne yapması gerektiğini yaklaşık beş saniyede anlamalıdır.

• Birincil CTA açık ve spesifik olmalı. "İlk projenizi oluşturun" veya "İlk müşterinizi ekleyin" gibi fiil + nesne kullanın; "Devam" veya "Tamam" demeyin.
• Sadece bir eylem birincil görünsün. Boyut, renk ve konum bir sonraki adımı bariz kılmalı.
• İkincil seçenekler ikincil hissettirmeli. "İçe aktar" veya "Şablon kullan" sunuyorsanız bunlar birincilden daha sessiz olmalı.
• Ekran hızlıca kendini açıklamalı. Bir kısa başlık + bir kısa cümle: ne boş, tıklayınca ne olur?
• İlk kazanıma hızlı bir yol olmalı. Şablonlar, örnek veriler veya rehber başlangıçlar kullanıcıların ağır kurulum yapmadan değeri görmesini sağlar.

Güvence tereddüdü eyleme dönüştürür. CTA'nın yanında "Bunu sonra değiştirebilirsiniz" veya "Onaylayana kadar hiçbir şey yayınlanmaz" gibi sakin ve spesifik kısa bir satır ekleyin.

Basit bir test: bir ekip arkadaşına ekranı beş saniye bakıp ana düğmeye tıkladığında ne olacağını söylemesini isteyin. Cevap veremezse metni veya hiyerarşiyi sıkılaştırın.

Koder.ai gibi sohbet-öncelikli oluşturucularda aynı kontrol listesi geçerlidir. Boş durum bir başarılı sonraki eyleme davet etmeli: şablondan başla, veriyi içe aktar veya düzenleyebileceğiniz ilk çalışan sürümü üret.

Gerçekçi bir örnek: yeni bir uygulama için ilk kurulum

Yalnız bir kurucu Koder.ai'ye kaydolur ve yeni bir çalışma alanı açar. Projeler ekranına gelir ama hiç uygulama yoktur ve "iyi"nin ne olduğu hakkında fikri yoktur.

Boş tablo yerine boş durum kısa bir vaat, net bir sonraki adım ve küçük bir güvenlik notu gösterir. İşte biri için örnek kopya ve CTA (zaman tahminlerini doğrulamanız gerekir):

Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.

[Create your first app]
Secondary: Import existing code  |  Browse templates
Note: You can export the source code anytime.

Kurucu Create your first appe tıkladıktan sonra sonraki ekran basit bir soru sorar: "Ne inşa ediyorsunuz?" tek bir giriş alanı ve iki örnek prompt ile (örneğin "Küçük bir ajans için CRM" veya "Kayıtlı kullanıcı alanı olan bir landing page"). Yolu dar tutun: bir bariz alan, bir bariz düğme.

İkinci ekran kısa bir plan incelemesi (özellikler, sayfalar, veriler) olabilir, ardından bir oluşturma adımı ve çalışan bir önizleme. İlk başarı anı kullanıcı önizlemede gerçek bir şey yapabildiğinde olur; örneğin bir kayıt eklemek veya test bir signup göndermek.

Veri oluştuktan sonra geri gelen kullanıcılar aynı boş durumu bir daha görmemeli. Projeler ekranı "son uygulamalar" görünümüne dönebilir ve bir hızlı eylem (örneğin Yeni uygulama) ile daha küçük eylemler (örneğin Snapshots veya Deploy) kullanıcının son yaptığına göre gösterilebilir.

Boş durumun işini yapıp yapmadığını bilmek için birkaç metriği izleyin:

• İlk başarıya süre (ilk ziyaret ile çalışan önizlemeye kadar)
• Boş durum ile ilk oluşturma adımı arasındaki düşüş oranı
• CTA tıklama oranı (birincil vs ikincil eylemler)
• 7 gün içinde tekrar kullanım
• Destek pingleri veya boş ekran alanındaki öfke tıklamaları

Sonraki adımlar: bir akışı iyileştirin, sonra deseni ölçeklendirin

Bu hafta bir kurulum akışını iyileştirmek için bir tane seçin. En büyük düşüşü olanı veya yeni kullanıcıların ilk uğradığı akışı seçin. Boş durumunu yeniden yazın ki üç soruyu hızlı cevaplasın: Bu ne? Neden şimdi yapmalıyım? Bir sonraki tıklama ne?

Değişikliği küçük tutun. Onboarding'i yeniden tasarlamıyorsunuz. İlk başarılı eylemi bariz hale getiriyorsunuz.

Basit bir haftalık plan:

• Ölçüm: o kurulum adımının tamamlanma oranını (ve tamamlama süresini) 3–7 gün boyunca kaydedin.
• Yeniden yazma: başlığı, bir yol gösterici cümleyi ve birincil düğme etiketini ayarlayın.
• Riski azaltın: bir güvence satırı ekleyin (sonra ne olur, geri alınabilir mi, ne kadar sürer).
• Test: küçük bir oranda yeni kullanıcılara yayınlayın, sonra tamamlamayı ve destek taleplerini karşılaştırın.
• Sabitleme: kazanırsa bunu diğerlerinin kopyalayabileceği yeniden kullanılabilir bir şablona dönüştürün.

Bir başarınız olduğunda standardize edin. Boş durumlar için kısa bir dahili desen oluşturun: boşluklandırma, başlık stili, ikon/illüstrasyon kuralları ve tutarlı bir CTA düzeni. Ekipler aynı yapıyı takip ettiğinde kullanıcılar bunu bir kez öğrenir ve her yerde daha hızlı ilerler.

Yeni bir uygulama inşa ediyorsanız ve kurulum adımlarını hızlı prototiplemek istiyorsanız, Koder.ai (koder.ai) Planning Mode'da bir akış taslağı oluşturup ilk versiyonu test etmek ve insanların nerede durakladığına göre yinelemek için yardımcı olabilir.