Cách thiết kế trang trạng thái trống cho trang web và ứng dụng di động

Các trang trạng thái trống là các yếu tố thiết kế ít được biết đến với vai trò quan trọng trong trải nghiệm người dùng. Ở dạng đơn giản nhất, các trạng thái trống là bố cục trang được nhìn thấy khi người dùng lần đầu truy cập vào trang không có nội dung.

Điều này có thể bao gồm các ứng dụng di động, mạng xã hội hoặc thậm chí các danh mục blog trống. Mục đích là để cung cấp một trang trống giống như một trang không trống. Du khách nên nhận ra sự thiếu nội dung là một phương tiện của nội dung sắp xảy ra.

Tôi muốn đề cập đến cách các trang trạng thái trống hoạt động và tại sao chúng rất quan trọng. Các nhà thiết kế giao diện nên xem xét các điểm này và cố gắng áp dụng chúng cho các trạng thái trống bất cứ khi nào thích hợp. Nhưng để bắt đầu, hãy kiểm tra cách một hàm trạng thái trống và cách nó cung cấp giá trị cho giao diện.

Giá trị của các quốc gia trống

Vẻ đẹp của một thiết kế trạng thái trống tuyệt vời là ở sự đơn giản. Trang trống giải thích những gì nên có trên trang một khi có một số nội dung. Nó có thể bị động như một hộp thư trống hoặc có thể chủ động chờ người dùng như một nguồn cấp dữ liệu Twitter trống.

Các trang trống là nhàm chán, buồn tẻ, và thậm chí khó hiểu. Trạng thái trống Cung cấp sự chỉ dẫn để giúp người dùng hiểu những gì họ đang xem. Mặc dù đó là một trang trống, bối cảnh bổ sung giúp.

Các trạng thái trống rỗng cũng cho một cảm giác “tươi mát” với các tài khoản mới không có dữ liệu hiện có.

Thử nghiệm này được thực hiện bởi Redditor Bambo_Ocha đã kiểm tra 20 ứng dụng khác nhau cho các thiết kế trạng thái trống. Nhiều phong cách thiết kế khác nhau đã xảy ra với các nút CTA, dữ liệu mẫu và thậm chí các hướng dẫn ngắn gọn.

Các ứng dụng phát triển mạnh trên cơ sở người dùng nên thiết kế các trạng thái trống khuyến khích hoạt động của người dùng. Hoạt động này có thể là xuất bản nội dung, thêm bạn bè, tải ảnh lên hoặc bất cứ ứng dụng nào được tạo ra. Màn hình dưới đây từ Tookapic là một ví dụ tuyệt vời.

Nhưng các trang trạng thái trống vẫn có giá trị ngay cả khi không cần hành động. Những thiết kế này chủ yếu được thực hiện để cung cấp thông tin.

Thông tin tĩnh cũng có giá trị và vốn dĩ không tệ khi có trạng thái trống. Ví dụ: thiết kế trang này hiển thị không có số liệu hiện tại từ bảng điều khiển ứng dụng theo dõi. Người dùng có thể muốn thêm một số số liệu, nhưng không tệ khi để trống dấu gạch ngang.

Thiết kế tĩnh tương tự có thể hoạt động tuyệt vời cho kho lưu trữ blog trống hoặc thư mục thư trống. Hoàn toàn chấp nhận được khi không có tin nhắn để hiển thị. Nhưng trang không nên hoàn toàn trống rỗng, không có ngữ cảnh.

Yếu tố trang quan trọng

Yếu tố quan trọng nhất trên trang trạng thái trống là bối cảnh. Điều này có thể đến dưới dạng đồ họa, văn bản hoặc cả hai. Bạn muốn thông báo cho người dùng lý do tại sao trang trống và loại dữ liệu nào có thể ở đó (email, tweet, hồ sơ bạn bè, v.v.).

Và mặc dù văn bản là phương tiện liên lạc chính trên web, bạn không thể bỏ qua giá trị của đồ họa và biểu tượng.

DigitalOcean có một bảng điều khiển tuyệt vời với đồ họa trạng thái trống minh họa rõ ràng quan điểm của họ. Công ty của họ sử dụng nhãn hiệu sáng tạo và kiểu chữ sạch sẽ, vì vậy không có gì ngạc nhiên khi các trang trạng thái trống của họ rất minh họa.

Một khía cạnh quan trọng khác của thiết kế trạng thái trống là nút gọi hành động. Điều này thường được thiết kế giống như một nút mặc dù các siêu liên kết cũng hoạt động tốt.

Mục tiêu là giúp người dùng hành động và xóa trạng thái trống rỗng của họ. Cho dù điều này yêu cầu thêm dữ liệu hoặc thực hiện hành động trên trang web, CTA hướng dẫn người dùng bước tiếp theo cần thiết để xóa trạng thái trống.

Dropbox có thiết kế tuyệt vời với hai nút CTA. Bất cứ khi nào người dùng Dropbox không có thư mục, họ có thể tạo thư mục mới hoặc thêm thư mục mẫu vào trang.

Khuyến khích hoạt động của người dùng

Các nút gọi hành động là các yếu tố hoạt động nhưng hãy nhớ rằng bản sao trang giải thích người dùng đang làm gì. Không ai chỉ nhấp vào nút mà không biết tại sao.

Cách tốt nhất để khuyến khích hoạt động là viết bản sao tuyệt vời trên trang trạng thái trống của bạn. Hướng dẫn người dùng thông qua luồng nội dung khuyến khích hoạt động của người dùng trên toàn bộ ứng dụng.

Trạng thái trống này của ModSpot là một ví dụ tuyệt vời về thiết kế chất lượng và nội dung đáng khích lệ.

Các biểu tượng được sử dụng để chứng minh những gì người dùng nên thêm vào trang web. Một mũi tên chỉ vào nút người dùng nên nhấp vào cùng với một số hành vi khuyến khích văn bản. Đây là một thiết kế trạng thái trống tuyệt vời với tất cả các yếu tố bạn mong đợi.

Tương tự, trạng thái trống Gumroad cung cấp hai tùy chọn nhắm mục tiêu các hành động tiềm năng khác nhau. Người dùng có thể thêm một sản phẩm kỹ thuật số hoặc một sản phẩm vật lý để bắt đầu bán.

Các liên kết khác trên trang dẫn đến hướng dẫn trợ giúp và chi tiết liên lạc. Tất cả mọi thứ được sắp xếp hợp lý đáng kinh ngạc và liên kết với nhau độc đáo.

Ứng dụng web so với thiết bị di động

Các trang trạng thái trống cho tất cả các phương tiện nên theo xu hướng thiết kế tương tự. Nhưng có một số khác biệt nhỏ với trải nghiệm người dùng trên máy tính để bàn so với điện thoại thông minh.

Trang web trên màn hình lớn hơn có nhiều phòng cho các nút thêm. Các trang web cũng có thể có yếu tố điều hướng lớn hơn có thể thu hút mọi người ở nơi khác trên trang web.

Điều này có thể được giải quyết theo một phong cách tương tự như Nusii làm trên trang đề xuất của họ. Trường hợp không có đề xuất nào thì người dùng được hướng dẫn đến “thêm đề xuất” nút trên thanh điều hướng trên cùng.

Các ứng dụng di động có thể có vấn đề tương tự nhưng màn hình nhỏ hơn nhiều. Điều này làm cho nó dễ dàng hơn rất nhiều để thu hút người dùng ngay vào hành động.

Tôi thấy tốt nhất là giữ cho các ứng dụng di động đơn giản hơn với ít tùy chọn hơn. Sử dụng hình ảnh như kẹo mắt để khuyến khích hành động và hướng đến một luồng người dùng rất cụ thể.

Ví dụ thiết kế nhà nước trống

Có lẽ cách tốt nhất để tìm hiểu về thiết kế trạng thái trống là nghiên cứu một số ví dụ. Thư viện web tuyệt vời blankstat.es quản lý các trang trạng thái trống từ các trang web khác nhau đến các ứng dụng di động.

Tôi đã chọn một số ví dụ đáng để bạn chú ý, minh họa rõ nhất cho thiết kế trạng thái trống. Nếu bạn có bất kỳ đề nghị nào khác, vui lòng cho chúng tôi biết.

IP nổi DigitalOcean