Onboarding tasarımı

Kodsuz mobil uygulama onboarding builder’ı, kullanıcılarınıza en iyi onboarding deneyimini sunmanıza yardımcı olacak güçlü ve özelleştirilebilir bir araçtır. Harika sonuçlar elde etmek için geliştirici ya da tasarımcı olmanıza gerek yok.

Onboarding ekranları

Onboarding akışı, eklediğiniz ve tasarladığınız birden fazla ekrandan oluşur.

Kullanıcılar ekranlar arasında geçiş yapmak için butona dokunur.

Bazı kullanıcılarınızın biraz farklı bir akışa ihtiyacı varsa (örneğin bir fitness uygulamasında kullanıcının cinsiyetine göre farklı ‘hedef’ görselleri göstermek isteyebilirsiniz), ayrı onboardinglar oluşturmanıza gerek yoktur.

Bunun yerine bazı ekranları varsayılan olarak gizleyebilir ve yalnızca belirli senaryolarda gösterebilirsiniz.

Onboarding öğeleri

Onboarding öğeleri sol tarafta, gösterildikleri sırayla listelenir. Yeni bir öğe eklemek için sağ üstteki Add butonuna tıklayın.

Ekleyebileceğiniz öğe grupları şunlardır:

Containers: Container’lar esnek bir düzen oluşturmanıza olanak tanır. Örneğin iki sütunlu bir metin eklemek istiyorsanız Columns ekleyip ardından sol paneldeki Columns içine iki metin bloğu sürüklemeniz gerekir. Carousel eklemek için ise içindeki Media öğelerine resim eklemeniz gerekir.
Typography: Önceden biçimlendirilmiş metin blokları ekleyin ve görünümlerini ihtiyacınıza göre düzenleyin.
Media & Display: Resim ve videolara ek olarak, uygulamanızın değerini gösteren ve kullanıcıları teşvik eden animasyonlu grafikler ekleyebilirsiniz.

Desteklenen video formatları MP4 ve WebM’dir. Maksimum medya dosyası boyutu 15 MB’tır.

Desteklenmeyen animasyonlu bir öğe eklemek istiyorsanız (örneğin Lottie), bunu bir videoya dönüştürebilir (örneğin bu araçla) ve video olarak yerleştirebilirsiniz.
Quiz: Onboarding deneyimini kişiselleştirmek ve kullanıcılarınızı daha iyi tanımak için metin ve resim seçenekli kısa anketler oluşturun.
Inputs: Kullanıcılarınızın verilerini toplayın.
Buttons: Butonlar, kullanıcıların ekranlar arasında geçiş yapmasını, onboarding’i kapatmasını veya paywalla geçmesini sağlar. Kullanıcıların dikkatini çekmek ve kurulumu satın almaya dönüştürmek için parlak veya hareketli butonlar da ekleyebilirsiniz.
Loaders: Animasyonlu yükleyiciler, süreç boyunca kullanıcıların ilgisini canlı tutar.
User engagement: Referanslar, kullanıcı e-posta listeleri ve geri sayımlar ekleyin.

Media & Display grubu kapsamında, sağlanan özelleştirme seçenekleri yetmediğinde özel HTML kodu da ekleyebilirsiniz.

Ancak özel HTML öğeleri ne önceden yüklenir ne de önbelleğe alınır; bu nedenle Raw HTML’i yalnızca küçük ve hafif öğeler için kullanmanız önerilir.

Öğe kimliği ve eylem kimliği

Bir butonu özel eylemler için kullanmak istiyorsanız ona bir action ID atayın ve ardından kaynak kodunuzda bu kimliği kullanın. Eylem kimlikleri, aynı eylem kimliğine sahip farklı butonları aynı şekilde ele almanıza olanak tanır.

Belirli bir alandaki kullanıcı girişini işlemek istiyorsanız (örneğin yaş veya e-posta kaydetmek), alana bir element ID atayın ve ardından soruları yanıtlarla ilişkilendirmek için kaynak kodunuzda bu kimliği kullanın. Öğe kimlikleri onboarding’inizde yalnızca bir kez kullanılabilir.

Özelleştirme seçenekleri

Builder’da şu özelleştirme seçenekleri mevcuttur:

Styles sekmesi: Öğenin görünümünü ayarlayın.
Element sekmesi: Görünebilirlik, buton basma eylemleri veya öğenin görünümüyle ilgisi olmayan diğer özellikler gibi öğe niteliklerini ayarlayın.
Screen sekmesi: Başlık veya ekran sayacı gösterimi gibi genel ekran yapılandırmasını ayarlayın.

Ekranları ve öğeleri kopyalama

Bir onboarding oluşturdunuz ve bazı bölümlerini yeniden kullanmak ya da küçük değişiklikler yapıp A/B testleri çalıştırmak istiyorsanız, bir onboarding’den diğerine bir veya birden fazla ekran kopyalayabilirsiniz.

Ekranları kopyalamak için onboarding builder’ı açın ve şunlardan birini yapın:

Tek bir ekrana sağ tıklayın ve Copy seçeneğini seçin
İstediğiniz ekranı seçin ve Ctrl+C (Windows) veya ⌘+C (Mac) tuşlarına basın

Aynı onboarding içinde veya farklı onboardingler arasında tek tek öğeleri ya da metin bloklarını da kopyalayabilirsiniz.

Web-to-app hunilerinden ekran kopyalama

FunnelFox’ta oluşturulan web-to-app hunilerini kullanıyorsanız ve huni ekranlarını onboardinglerde kullanmak istiyorsanız, huni builder’ında ekranları kopyalayıp onboarding builder’ına yapıştırarak bunu hızlıca yapabilirsiniz:

FunnelFox huni builder’ında bir ekrana sağ tıklayın ve Copy seçeneğini seçin ya da ekranı seçin ve Ctrl+C/⌘+C tuşlarına basın.
Onboarding builder’ını açın.
Kopyalanan ekranı eklemek istediğiniz yere sağ tıklayın ve Paste seçeneğini seçin ya da seçili durumdayken Ctrl+V/⌘+V tuşlarına basın. Kopyalanan ekran, seçili ekranın altına eklenir.