Thiết kế onboarding

Trình tạo onboarding ứng dụng di động không cần code là một công cụ mạnh mẽ và linh hoạt, giúp bạn mang lại trải nghiệm onboarding tốt nhất cho người dùng. Bạn không cần phải là lập trình viên hay designer để có được kết quả tuyệt vời.

Màn hình onboarding

Flow onboarding bao gồm nhiều màn hình mà bạn thêm vào và thiết kế.

Người dùng sẽ nhấn nút để điều hướng giữa các màn hình.

Nếu một số người dùng cần một flow hơi khác (ví dụ: trong ứng dụng fitness, bạn có thể muốn hiển thị hình ảnh “mục tiêu” khác nhau tùy theo giới tính của người dùng), bạn không cần tạo các onboarding riêng biệt.

Thay vào đó, bạn có thể ẩn một số màn hình theo mặc định và chỉ hiển thị chúng trong một số trường hợp nhất định.

Các thành phần onboarding

Các thành phần onboarding được hiển thị ở bên trái theo thứ tự chúng xuất hiện. Nhấn Add ở góc trên bên phải để thêm thành phần mới.

Có các nhóm thành phần sau mà bạn có thể thêm:

Containers: Container cho phép bạn thiết lập bố cục linh hoạt. Ví dụ: nếu bạn muốn thêm văn bản hai cột, bạn cần thêm Columns rồi kéo hai khối văn bản vào Columns trên bảng bên trái. Hoặc nếu bạn đang thêm carousel, bạn cần thêm hình ảnh vào các thành phần Media bên trong.
Typography: Thêm các khối văn bản được định dạng sẵn và tùy chỉnh giao diện theo nhu cầu.
Media & Display: Ngoài hình ảnh và video, bạn có thể thêm các biểu đồ động thể hiện giá trị ứng dụng của mình và khuyến khích người dùng.

Các định dạng video được hỗ trợ là MP4 và WebM. Kích thước file media tối đa là 15 MB.

Nếu bạn muốn thêm một thành phần hoạt hình không được hỗ trợ (như Lottie), bạn có thể chuyển đổi nó thành video (ví dụ: với công cụ này) và nhúng vào dưới dạng video.
Quiz: Tạo các bảng câu hỏi ngắn với tùy chọn văn bản và hình ảnh để tùy chỉnh trải nghiệm onboarding và hiểu người dùng của bạn hơn.
Inputs: Thu thập dữ liệu từ người dùng.
Buttons: Nút cho phép người dùng điều hướng giữa các màn hình, đóng onboarding hoặc chuyển đến paywall. Bạn cũng có thể thêm nút bóng bẩy hoặc chuyển động để thu hút sự chú ý của người dùng và chuyển đổi lượt cài đặt thành giao dịch mua.
Loaders: Các loader có hoạt ảnh giữ cho người dùng tập trung trong quá trình chờ.
User engagement: Thêm lời chứng thực, danh sách email người dùng và đếm ngược.

Trong nhóm Media & Display, bạn cũng có thể thêm mã HTML tùy chỉnh nếu các tùy chọn tùy chỉnh hiện có chưa đủ.

Tuy nhiên, các thành phần HTML tùy chỉnh không được tải trước hay lưu vào bộ nhớ cache, vì vậy nên sử dụng Raw HTML chỉ cho các thành phần nhỏ, nhẹ.

ID thành phần và ID hành động

Nếu bạn muốn sử dụng một nút cho các hành động tùy chỉnh, hãy gán cho nó một action ID rồi sử dụng nó trong mã nguồn của bạn. Action ID cho phép bạn xử lý các nút khác nhau có cùng action ID theo cùng một cách.

Nếu bạn muốn xử lý dữ liệu nhập của người dùng trong một trường cụ thể (ví dụ: lưu tuổi hoặc email của họ), hãy gán cho nó một element ID rồi sử dụng nó trong mã nguồn để liên kết câu hỏi với câu trả lời. Element ID chỉ được sử dụng một lần trong onboarding của bạn.

Tùy chọn tùy chỉnh

Bạn có các tùy chọn tùy chỉnh sau trong trình tạo:

Tab Styles: Điều chỉnh giao diện của thành phần.
Tab Element: Đặt các thuộc tính của thành phần, như khả năng hiển thị, hành động khi nhấn nút hoặc các thuộc tính khác không liên quan đến giao diện của thành phần.
Tab Screen: Thiết lập cấu hình màn hình chung, như tiêu đề hoặc hiển thị bộ đếm màn hình.

Sao chép màn hình và thành phần

Nếu bạn đã tạo một onboarding và muốn tái sử dụng một phần của nó, hoặc nếu bạn muốn thực hiện các thay đổi nhỏ và chạy A/B test, bạn có thể sao chép một hoặc nhiều màn hình từ onboarding này sang onboarding khác.

Để sao chép màn hình, mở onboarding builder và thực hiện một trong các cách sau:

Nhấp chuột phải vào một màn hình và chọn Copy
Chọn màn hình mong muốn và nhấn Ctrl+C (Windows) hoặc ⌘+C (Mac)

Bạn cũng có thể sao chép các thành phần hoặc khối văn bản riêng lẻ, trong cùng một onboarding hoặc giữa các onboarding khác nhau.

Sao chép màn hình từ web-to-app funnel

Nếu bạn sử dụng các web-to-app funnel được tạo trong FunnelFox và muốn sử dụng các màn hình từ funnel trong onboarding, bạn có thể thực hiện nhanh chóng bằng cách sao chép màn hình trong funnel builder và dán vào onboarding builder:

Trong FunnelFox funnel builder, nhấp chuột phải vào một màn hình và chọn Copy, hoặc chọn màn hình và nhấn Ctrl+C/⌘+C.
Mở onboarding builder.
Nhấp chuột phải vào màn hình mà bạn muốn chèn màn hình đã sao chép và chọn Paste, hoặc chọn nó và nhấn Ctrl+V/⌘+V. Màn hình đã sao chép sẽ được chèn bên dưới màn hình đang chọn.