Kafa karışıklığını azaltan ve kullanıcıları bir sonraki başarılı kurulum adımına yönlendiren boş durum tasarım kalıpları; hızlıca uygulayabileceğiniz metin, düzen ve kontrol listeleriyle.
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:
Ö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.
İ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 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ı.
İ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:
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.
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.
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.
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:
Ü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."
İ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.
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.
İ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.
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.
Ü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.
Boş ekranlar tarafsız değildir. En iyi olanlar bir sonraki başarılı eylemi bariz, güvenli ve hızlı hissettirir.
Ö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.
Çoğu "takılmış" boş durumun başarısız olmasının nedeni tek: bir sonraki hareketi riskli veya belirsiz hissettirmeleri.
Üç 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.
"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:
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.
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.
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.
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.
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.
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:
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:
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.
Boş durum, kullanıcıların henüz bir şey oluşturmadığı, içe aktarmadığı veya bağlamadığı için gösterecek hiçbir içerik olmadığı anda görünen ekrandır. Ekrabın ne için olduğunu açıklamalı ve kullanıcının tahmin yürütmesini engelleyip bir sonraki başarılı eyleme yönlendirmelidir.
Yükleniyor ekranı “bekleyin, bir şey oluyor” der; hata durumu “bir şey başarısız oldu, nedeni şu” der. Kurulum boş durumu ise “henüz bir şey yok, bu normal” der ve ardından kullanıcıyı oluşturma, içe aktarma veya bir şablondan başlatma gibi bir ilk gerçek sonuca götürür.
Hızlıca üç şeyi cevaplamayı hedefleyin: bu ekran ne, neden boş ve şimdi ne yapmalıyım? Kullanıcılar bu soruları birkaç saniye içinde anlayamazsa duraklar, yanlış bir şey yaptığını düşünebilir veya uygulamayı terk edebilir.
Basit bir yapı kullanın: alanın ne için olduğunu belirten kısa bir açıklama, bir belirgin birincil eylem ve korkuyu/çabayı azaltan bir güvence satırı. Metni sıkı tutun ki kullanıcı neye tıklayacağını öğrenmek için uzun paragraf okumak zorunda kalmasın.
Varsayılan olarak birincil adıma odaklanan tek bir düğme tercih edin; diğer seçenekleri açıkça ikincil yapın. Birden fazla eşit görünümlü düğme gösterirseniz kullanıcılar hangi yolun “doğru” olduğunu bilemedikleri için donma yaşar.
İlk gerçek kazanım hızlıca yeni bir şey yaratmaksa (ilk proje veya kayıt gibi) birincil harekete “Oluştur” ile başlayın. Çoğu yeni kullanıcı zaten başka bir yerde veriyle geliyorsa “İçe aktar” ile başlayın. Hızın kontrolü tercih ettiği durumlarda ise şablonları öne çıkarın.
Başlığı “sonuç + nesne” formunda yazın; örneğin “İlk projenizi oluşturun” gibi. Gövde metni için ise tıklamadan sonra ne olacağını bir cümlede söyleyin ki kullanıcı sonucu öngörebilsin.
Başlık, bir kısa cümle ve birincil düğmeyi sıkı bir blok halinde yerleştirin. İkincil eylemler daha sessiz görünmeli ve ana düğmeyi sayfanın altına sıkıştırmayın; kullanıcıların okuması ve sonra karar vermesi gerekiyorsa çoğu zaman dururlar.
Eylemin yanında kısa bir güvenlik notu koyun: “Bunu sonra değiştirebilirsiniz” veya “Onaylayana kadar hiçbir şey yayınlanmaz” gibi. Koder.ai gibi araçlarda geri alma/örnekleme veya kaynak kodu dışa aktarma gibi geri döndürülebilir eylemlerden bahsetmek de yardımcı olur.
Boş ekranı kaç kişinin gördüğünü, birincil CTA'ya tıklama oranını ve hedeflenen kilometre taşının tamamlanma oranını izleyin. Ayrıca ilk başarıya ulaşma süresi ve boş durum ile bir sonraki adım arasındaki düşüş oranına bakın; çünkü bir boş durum tıklama alıp yine de sonuç üretmeyebilir.