Thiết kế trạng thái trống giúp hoàn thành thiết lập trong ứng dụng

Tại sao trạng thái trống quyết định việc hoàn thành thiết lập

Một màn hình trống không phải là trung lập. Nó tạo ra một khoảng dừng nơi người dùng bắt đầu đoán phải làm gì, liệu họ có bỏ sót bước nào không, hoặc liệu sản phẩm có hoạt động hay không. Trong quá trình thiết lập, khoảng dừng đó rất tốn kém. Nó biến “tôi đang bắt đầu” thành “tôi sẽ quay lại sau.”

Trạng thái trống là những gì người dùng thấy khi chưa có gì để hiển thị vì họ chưa tạo, nhập hay kết nối bất cứ thứ gì. Nó không phải màn hình chờ, không phải thông báo lỗi, cũng không phải cảnh báo quyền truy cập. Nó là khoảnh khắc ngay trước khi có giá trị, khi ứng dụng cần giúp người dùng đạt tới kết quả ý nghĩa đầu tiên.

Một trạng thái trống tốt có một nhiệm vụ: đưa người dùng tới hành động thành công tiếp theo với càng ít suy nghĩ càng tốt. “Thành công” quan trọng ở đây. Bước tiếp theo nên tạo ra kết quả thực (một dự án đầu tiên, một nguồn dữ liệu được kết nối, một mục đầu tiên được tạo), chứ không phải một biểu mẫu không dẫn tới đâu hoặc một tour sản phẩm mơ hồ.

Những khoảnh khắc này xuất hiện thường hơn đội ngũ nghĩ: lần đăng nhập đầu sau khi đăng ký, một workspace hoàn toàn mới, một thẻ tính năng chưa có mục nào (dự án, khách hàng, tệp), hoặc một lộ trình thiết lập nơi việc nhập đã bị bỏ qua và không có gì tồn tại.

Khi trạng thái trống làm tốt nhiệm vụ, nó trả lời nhanh ba câu hỏi:

• Đây là màn hình gì?
• Tại sao nó trống?
• Bây giờ tôi nên làm gì?

Ví dụ: trong Koder.ai, một người dùng mới mở một workspace mới và chưa có app nào. Một trạng thái trống mạnh mẽ sẽ nói thẳng rằng chưa có gì được tạo, đề xuất một hành động tiếp theo rõ ràng như “Tạo app đầu tiên của bạn,” và thêm một ghi chú an toàn nhỏ (ví dụ: có thể xuất mã nguồn và snapshots khi họ bắt đầu). Mục tiêu là biến “không có gì” thành “tôi có thể đạt tới kết quả làm việc đầu tiên.”

Người dùng nghĩ gì khi thấy màn hình trống

Với người dùng lần đầu, một màn hình trống có thể khiến họ nghĩ app bị treo hoặc họ làm sai điều gì đó. Bộ não lấp đầy khoảng trống rất nhanh, và thường không nghiêng về phía bạn.

Hầu hết mọi người âm thầm hỏi cùng một bộ câu hỏi:

• Trang này để làm gì?
• Tôi nên làm gì trước tiên?
• Chuyện gì xảy ra sau khi tôi làm?
• Tôi có làm hỏng điều gì không?
• Tôi có thể thay đổi hoặc hoàn tác sau không?

Cảm xúc đằng sau những câu hỏi đó thúc đẩy hành vi. Sự không chắc chắn khiến người dùng dừng lại. Sợ làm sai khiến họ tránh nút chính. Sự thiếu kiên nhẫn khiến họ đóng app nếu không thấy bước tiếp theo rõ ràng trong vài giây.

Trạng thái trống cho người mới và cho người dùng cao tay giải quyết những vấn đề khác nhau. Người mới cần ngữ cảnh và cảm giác an toàn vì họ chưa quen với từ vựng của bạn. Người quay lại muốn tốc độ: cách nhanh để tạo mục khác, nhập dữ liệu, hoặc lặp lại hành động quen thuộc.

Trạng thái trống cho thiết lập cũng khác với trạng thái lỗi và chờ. Chờ nói “đợi đã, có thứ đang diễn ra.” Lỗi nói “có lỗi, đây là lý do.” Thiết lập nói “chưa có gì ở đây, điều đó là bình thường. Đây là cách bắt đầu.”

Một ví dụ cụ thể: nếu ai đó mở một workspace mới trong Koder.ai và thấy trang Projects trống, họ không nghĩ về tính năng. Họ nghĩ, “Tôi bắt đầu từ prompt, nhập mã, hay chọn mẫu, và liệu điều đó có làm hỏng gì không?” Trạng thái trống của bạn nên trả lời những điều đó mà không ép họ đọc tài liệu hướng dẫn.

Một cấu trúc đơn giản hiệu quả: giải thích, hướng dẫn, trấn an

Một trạng thái trống tốt không cảm thấy trống. Nó hoạt động như biển chỉ dẫn: “Đây là cái này, và đây là cú nhấp tiếp theo.”

Một cấu trúc hiệu quả cho hầu hết các luồng thiết lập gồm ba phần:

• Giải thích ý nghĩa: một câu ngắn nói khu vực này để làm gì.
• Hướng dẫn bước tiếp theo: một hành động chính phù hợp với bước tiếp theo phổ biến nhất.
• Trấn an: một dòng nhỏ giảm cảm nhận rủi ro hoặc công sức.

Giữ phần giải thích ngắn gọn. Nếu bạn cần một đoạn để giải thích màn hình, bạn đang yêu cầu người dùng suy nghĩ quá nhiều. Hướng tới 1–2 câu ngắn với từ ngữ đơn giản như “Thêm dự án đầu tiên” hoặc “Tạo workspace đầu tiên.”

Sau đó làm cho bước tiếp theo rõ ràng với một nút chính duy nhất. Nếu bạn hiển thị ba nút ngang hàng, bạn đang bắt người dùng phải chọn đường trước khi họ hiểu trang. Nếu phải cung cấp lựa chọn thay thế (nhập, mẫu, bỏ qua), hãy làm cho chúng nhìn lặng hơn về mặt hình ảnh so với hành động chính.

Dùng dòng trấn an để loại bỏ nỗi sợ phổ biến: làm sai, lãng phí thời gian, hoặc thiếu kỹ năng kỹ thuật. Những gợi ý nhỏ về chuyện gì xảy ra tiếp theo và có thể hoàn tác giúp hơn là lời giải thích dài.

Ví dụ copy cho màn hình “Projects” lần đầu:

Tiêu đề: Bắt đầu dự án đầu tiên của bạn

Giải thích: Projects lưu cấu hình app và các phiên bản phát hành.

Hành động chính: Tạo dự án

Trấn an: Khoảng 2 phút. Bạn có thể đổi tên bất kỳ lúc nào.

Nếu sản phẩm của bạn hỗ trợ nhiều cách bắt đầu (xây từ chat, nhập mã, hoặc mẫu, như Koder.ai), giữ “Tạo” làm mặc định và đặt “Nhập” và “Dùng mẫu” làm hành động phụ phía dưới.

Mẫu câu giảm nhầm lẫn

Trạng thái trống thất bại khi phần copy nói về tính năng thay vì điều người dùng nhận được. Lời của bạn nên trả lời nhanh: Đây là màn hình gì? Tại sao tôi nên làm gì ở đây? Tôi nên làm gì tiếp theo?

Một công thức tiêu đề đơn giản là Kết quả + đối tượng. Gọi tên kết quả và thứ họ sẽ tạo, không phải tên tính năng nội bộ.

• Tốt: “Thêm khách hàng đầu tiên của bạn” hoặc “Tạo dự án đầu tiên”
• Yếu: “Khách hàng” hoặc “Module dự án”

Với phần thân, dùng đây là gì + tại sao quan trọng trong một hoặc hai câu:

"Khách hàng là những người bạn bán hàng cho. Thêm một người bây giờ để bạn có thể gửi hóa đơn và theo dõi thanh toán."

CTA nên bắt đầu bằng động từ rõ ràng và kèm theo danh từ cụ thể. Tránh nút mơ hồ như “Bắt đầu” khi có nhiều đường đi.

• "Tạo dự án"
• "Nhập danh bạ"
• "Chọn mẫu"
• "Kết nối tài khoản thanh toán"
• "Mời đồng đội"

Thêm microcopy ngay cạnh lựa chọn gây cảm giác rủi ro. Những lời trấn an nhỏ thường hiệu quả hơn giải thích dài:

• "Bạn có thể chỉnh sửa sau."
• "Khoảng 2 phút."
• "Bạn có thể xóa bất kỳ lúc nào."

Nếu sản phẩm của bạn sinh ra nội dung cho người dùng (như Koder.ai), hãy đặt kỳ vọng để người ta biết họ không cam kết với phiên bản cuối cùng: "Chúng tôi sẽ tạo bản nháp đầu tiên. Bạn có thể xem và chỉnh sửa trước khi triển khai."

Mẫu bố cục khiến bước tiếp theo hiển nhiên

Trạng thái trống tốt nên đọc như biển chỉ dẫn, không phải poster. Bố cục cần thứ tự rõ ràng để người dùng có thể liếc qua, hiểu, và hành động.

Dùng thứ tự đơn giản theo cách mắt quét trang: tiêu đề, một câu ngắn, CTA chính, rồi hành động phụ lặng hơn (nhập, mẫu, bỏ qua).

Giữ nút chính gần với thông điệp. Nếu người dùng phải đọc, cuộn rồi quyết định, họ thường dừng. Một mẫu phổ biến là một khối gọn (tiêu đề + mô tả + CTA), với nhiều khoảng trắng giữa khối đó và các phần còn lại (điều hướng, chân trang, cột bên).

Icon và minh họa nhỏ có thể giúp quét, nhưng chỉ khi chúng thêm ý nghĩa. Icon thư mục cạnh “Chưa có dự án” thì hữu ích. Mascot ngẫu nhiên thì không. Nếu dùng minh họa, giữ nhỏ và đặt phía trên tiêu đề để không cạnh tranh với CTA.

Một trong những mẫu mạnh nhất là hiển thị bản xem trước nhỏ của thành công: một thẻ mẫu, một hàng demo trong bảng, hoặc ô ví dụ mờ. Trong công cụ như Koder.ai, màn hình trống “Apps” có thể hiển thị một ô app mẫu (tên, trạng thái, cập nhật lần cuối) để người dùng ngay lập tức hiểu họ sắp tạo gì.

Chọn đường đi phù hợp: tạo, nhập hay dùng mẫu

Khi người dùng gặp màn hình trống, họ thường muốn một trong ba điều: bắt đầu mới, đưa dữ liệu vào, hoặc chạy nhanh với điểm khởi đầu. Trạng thái trống tốt làm rõ các đường đó mà không ép người dùng nghiên cứu sản phẩm.

Tạo trước: khi bắt đầu từ con số 0 là mục tiêu

Dẫn đầu bằng “Tạo” khi chiến thắng thực sự đầu tiên là tạo một thứ mới: dự án, workspace, trang, hoặc bản ghi đầu tiên. Cách này hiệu quả nhất khi người dùng có thể hoàn thành nhanh và hành động có thể hoàn tác.

Nếu việc tạo mất thời gian hơn, chia thành bước nhỏ trước (ví dụ “Tạo nháp”) để họ tiến lên mà không cảm thấy bị khoá.

Nhập trước: khi người dùng đã có dữ liệu ở nơi khác

Dẫn đầu bằng “Nhập” khi hầu hết người dùng mới đến với hệ thống hiện có, tệp, hoặc tài khoản cần kết nối. Trạng thái trống nên ghi rõ nhập hỗ trợ những gì và người dùng nhận được sau đó (ví dụ các trường được ánh xạ và mục được tạo).

Cách thực tế để chọn CTA chính là dùng ngữ cảnh. Nếu người dùng đến từ nội dung di cư, làm nổi bật Nhập. Nếu họ bấm nút “tạo dự án mới” trống, làm nổi bật Tạo. Nếu việc thiết lập phức tạp, làm nổi bật Mẫu.

Mẫu trước: khi tốc độ quan trọng hơn kiểm soát

Dẫn đầu bằng mẫu khi sản phẩm có các điểm khởi đầu phổ biến và người dùng chủ yếu muốn điều chỉnh hơn là thiết kế. Đặt tên mẫu theo kết quả (“Bán hàng”, “Lịch tuần”), không theo tính năng.

Một lựa chọn an toàn “Thử với dữ liệu mẫu” giảm nỗi sợ. Làm rõ rằng có thể xóa. Với bộ dựng hướng chat như Koder.ai, một dự án mẫu có thể cho thấy hình dạng của một app hoạt động trước khi người dùng viết prompt riêng.

Bước theo bước: thiết kế trạng thái trống để hoàn thành thiết lập

Màn hình trống không trung lập. Cái tốt nhất làm cho hành động thành công tiếp theo trở nên hiển nhiên, an toàn và nhanh.

Phương pháp 5 bước bạn có thể tái sử dụng

1. Chọn một mốc thiết lập để hướng tới. Chọn một hành động duy nhất chứng minh người dùng đang nhận giá trị (tạo dự án đầu tiên, thêm đồng đội đầu tiên, kết nối nguồn dữ liệu đầu tiên). Khi bạn cố gắng hỗ trợ ba mục tiêu cùng lúc, người dùng sẽ đóng băng.

2. Giảm các trường nhập xuống mức tối thiểu. Giữ chỉ những gì cần để đạt mốc đó. Trường tuỳ chọn có thể để phía sau “Thêm chi tiết” sau khi thắng đầu tiên.

3. Viết các thành phần cốt lõi theo thứ tự này:

   • Tiêu đề: khu vực này dùng để làm gì (từ ngắn gọn, không khẩu hiệu)
   • Thân: chuyện gì xảy ra sau hành động (1 câu)
   • CTA chính: động từ phù hợp với mốc
   • Một hành động dự phòng: nhập, dữ liệu mẫu, hoặc mẫu (rõ ràng là phụ)

4. Thêm trấn an và lối thoát. Trả lời nỗi lo thầm lặng: “Tôi sẽ làm hỏng gì chứ?” Một dòng ngắn như “Bạn có thể chỉnh sửa sau” cộng với cách rõ ràng để hoàn tác, sửa hoặc xóa giảm do dự.

5. Thử với 3 người, rồi theo dõi hoàn thành. Quan sát nơi họ dừng và họ bấm gì trước. Sau khi ra mắt, theo dõi lượt xem trạng thái trống, lượt bấm CTA chính và tỉ lệ hoàn thành mốc.

Ví dụ: nếu ai đó mở CRM mới và thấy tab “Contacts” trống, chiến thắng nhanh nhất là “Thêm contact đầu tiên.” Giữ chỉ tên + email, cung cấp “Nhập CSV” làm phương án dự phòng, và trấn an rằng họ có thể cập nhật trường sau.

Sai lầm phổ biến khiến người dùng bị mắc kẹt

Hầu hết trạng thái trống “mắc kẹt” thất bại vì một lý do: họ khiến bước tiếp theo trông rủi ro hoặc mơ hồ.

1) CTA cạnh tranh

Nếu bạn hiển thị ba nút trông ngang nhau, người dùng dừng lại. Chọn một hành động chính và một phụ. Đặt mọi thứ khác sau một dòng “Tùy chọn khác” yên tĩnh.

2) Copy bán tính năng thay vì kết quả

“Bảng điều khiển mạnh mẽ, vai trò linh hoạt, cài đặt nâng cao” không nói người dùng phải làm gì ngay. Thay bằng kết quả họ nhận được sau khi bấm.

Ví dụ:

• "Thêm khách hàng đầu tiên để bắt đầu theo dõi doanh số (khoảng 1 phút)"
• "Kết nối repo của bạn để tạo bản build đầu tiên"

3) Yêu cầu quá nhiều trước khi thắng đầu tiên

Biểu mẫu dài trong trạng thái trống giống như cam kết. Nếu bạn cần chi tiết, hãy lấy chúng sau. Bắt đầu với bước nhỏ nhất tạo ra điều nhìn thấy được.

Thay vì yêu cầu tên, quy mô công ty, vai trò và mục tiêu trước khi gìn, chỉ hỏi “Tên dự án” và để phần còn lại là tuỳ chọn sau khi màn hình đầu tiên xuất hiện.

4) Văn phong mơ hồ hoặc đùa cợt che điều sẽ xảy ra

Hài hước ổn, nhưng không phải nơi người dùng cần rõ ràng. “Không có gì ở đây” phí thời gian. Nói chính xác điều xảy ra sau cú nhấp và điều gì sẽ không xảy ra.

5) Không có phương án dự phòng khi hành động chính bị cản

Một số người không thể tạo mới. Cung cấp đường dự phòng thực: nhập, dùng mẫu, hoặc thử dữ liệu mẫu. Ví dụ, nếu ai đó dùng Koder.ai mà chưa có ý tưởng, “Bắt đầu với app mẫu” giúp họ tới màn hình làm việc mà không phải viết spec đầy đủ.

Checklist nhanh trước khi phát hành

Người dùng mới nên hiểu màn hình là gì, vì sao quan trọng và phải làm gì tiếp theo trong khoảng năm giây.

• CTA chính rõ ràng và cụ thể. Dùng động từ cộng danh từ, như “Tạo dự án đầu tiên” hoặc “Thêm khách hàng đầu tiên,” không phải “Tiếp tục” hay “OK.”
• Chỉ một hành động trông là chính. Kích thước, màu sắc và vị trí nên làm cho bước tiếp theo hiển nhiên.
• Tùy chọn phụ trông phụ. Nếu bạn đưa “Nhập” hoặc “Dùng mẫu,” giữ chúng yên tĩnh hơn nút chính.
• Màn hình tự giải thích nhanh. Một tiêu đề ngắn và một câu ngắn nên trả lời: gì đang trống, và chuyện gì xảy ra sau khi bấm.
• Có con đường nhanh tới chiến thắng đầu tiên. Mẫu, dữ liệu mẫu, hoặc khởi tạo hướng dẫn giúp người dùng thấy giá trị mà không cần cài đặt nặng.

Sự trấn an biến do dự thành hành động. Thêm một dòng nhỏ cạnh CTA giảm lo như “Bạn có thể chỉnh sửa sau” hoặc “Chưa có gì được xuất bản cho đến khi bạn xác nhận.” Giữ lời bình tĩnh và cụ thể.

Một bài kiểm tra đơn giản: nhờ đồng nghiệp liếc màn hình trong năm giây, sau đó bảo họ nói điều họ nghĩ sẽ xảy ra nếu bấm nút chính. Nếu họ không trả lời được, siết lại copy hoặc thứ tự hiển thị.

Nếu bạn xây luồng thiết lập trong bộ dựng hướng chat như Koder.ai, checklist trên vẫn áp dụng. Trạng thái trống nên mời một hành động thành công: bắt đầu từ mẫu, nhập dữ liệu, hoặc tạo phiên bản làm việc đầu tiên bạn có thể chỉnh sửa an toàn.

Ví dụ thực tế: thiết lập lần đầu cho một ứng dụng mới

Một nhà sáng lập cá nhân đăng ký Koder.ai và mở một workspace mới. Họ vào trang Projects với số lượng app = 0 và không biết “tốt” là gì.

Thay vì một bảng trống, trạng thái trống hiển thị một lời hứa ngắn, bước tiếp theo rõ ràng và một ghi chú an toàn nhỏ. Đây là một ví dụ về copy và CTA (thời gian chỉ là ước lượng cần kiểm chứng):

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.

Sau khi nhà sáng lập bấm Create your first app, màn hình tiếp theo hỏi một câu đơn giản: “Bạn đang xây gì?” với một ô nhập duy nhất và 2 prompt ví dụ (như “CRM cho agency nhỏ” hoặc “Trang đích có form đăng ký”). Giữ đường đi hẹp: một trường rõ ràng, một nút rõ ràng.

Màn hai có thể là bản xem lại kế hoạch nhanh (tính năng, trang, dữ liệu), tiếp theo là bước xây và bản xem trước hoạt động. Thời khắc thắng đầu tiên là khi người dùng thực hiện được một hành động thực trong bản xem trước đó, ví dụ thêm một bản ghi hoặc gửi một đăng ký thử nghiệm.

Khi có dữ liệu, người dùng quay lại sẽ không thấy cùng trạng thái trống nữa. Trang Projects có thể chuyển sang chế độ “apps gần đây” với một hành động nhanh nổi bật (ví dụ New app) và các hành động nhỏ hơn (Snapshots hoặc Deploy) dựa trên những gì họ làm lần trước.

Để biết trạng thái trống có hiệu quả hay không, theo dõi vài con số:

• Thời gian tới thắng đầu tiên (từ lần xem đầu đến bản xem trước hoạt động)
• Tỉ lệ rời giữa trạng thái trống và bước xây đầu tiên
• Tỉ lệ bấm CTA (chính vs phụ)
• Sử dụng lặp lại trong 7 ngày
• Số lần hỗ trợ hoặc click bực bội trên khu vực trạng thái trống

Bước tiếp theo: cải thiện một luồng, rồi mở rộng mẫu

Chọn một luồng thiết lập để cải thiện trong tuần này. Chọn luồng có tỉ lệ rời lớn nhất, hoặc luồng người dùng mới gặp đầu tiên. Viết lại trạng thái trống để nó trả lời nhanh ba câu hỏi: Đây là gì? Tại sao nên làm bây giờ? Bấm gì tiếp theo?

Giữ thay đổi nhỏ. Bạn không làm lại onboarding. Bạn làm cho hành động thành công đầu tiên trở nên rõ ràng.

Một kế hoạch một tuần đơn giản:

• Đo baseline: ghi tỉ lệ hoàn thành cho bước thiết lập đó (và thời gian hoàn thành) trong 3–7 ngày.
• Viết lại: điều chỉnh tiêu đề, một câu hướng dẫn, và nhãn nút chính.
• Giảm rủi ro: thêm một dòng trấn an (sẽ xảy ra gì tiếp theo, có thể hoàn tác không, mất bao lâu).
• Thử: phát cho một tỉ lệ nhỏ người dùng mới, rồi so sánh tỉ lệ hoàn thành và ticket hỗ trợ.
• Chốt: nếu thắng, biến nó thành mẫu tái sử dụng để các đội khác copy.

Sau khi có một chiến thắng, tiêu chuẩn hoá. Tạo một mẫu nội bộ ngắn cho trạng thái trống: khoảng cách, kiểu tiêu đề, quy tắc icon/minh họa và bố cục CTA nhất quán. Khi các đội tuân theo cùng cấu trúc, người dùng chỉ cần học một lần và đi nhanh hơn khắp nơi.

Nếu bạn đang xây app mới và muốn prototype nhanh các bước thiết lập, Koder.ai (koder.ai) có thể giúp bạn soạn luồng trong Planning Mode và sinh phiên bản đầu tiên để thử, rồi lặp dựa trên chỗ người dùng thực sự dừng lại.