Cara Mendesain Halaman Status Kosong untuk Situs Web & Aplikasi Seluler

Halaman negara kosong adalah elemen desain yang kurang dikenal dengan peran penting dalam pengalaman pengguna. Dalam bentuknya yang paling sederhana, keadaan kosong adalah tata letak halaman terlihat ketika pengguna pertama kali mengunjungi halaman di mana tidak ada konten yang tersedia.

Ini dapat mencakup aplikasi seluler, jejaring sosial, atau bahkan kategori blog kosong. Tujuannya untuk mengirimkan halaman kosong itu seperti halaman tidak kosong. Pengunjung harus mengenali kekurangan konten sebagai sarana konten yang akan datang.

Saya ingin membahas cara kerja halaman keadaan kosong dan mengapa itu sangat penting. Perancang antarmuka harus mempertimbangkan titik-titik ini dan mencoba menerapkannya pada keadaan kosong kapan pun diperlukan. Tetapi untuk memulai, mari kita periksa bagaimana keadaan kosong berfungsi dan bagaimana hal itu memberikan nilai pada antarmuka.

Nilai Negara Kosong

Keindahan desain keadaan kosong yang besar adalah dalam kesederhanaan. Halaman kosong menjelaskan apa yang seharusnya ada di halaman setelah ada beberapa konten. Mungkin pasif seperti kotak masuk kosong, atau mungkin sedang aktif menunggu pengguna seperti umpan Twitter kosong.

Halaman kosong membosankan, membosankan, dan bahkan membingungkan. Status kosong berikan panduan untuk membantu pengguna memahami apa yang mereka lihat. Meskipun ini halaman kosong, konteks ekstra membantu.

Status kosong juga memberi kesan “kesegaran” dengan akun baru yang tidak memiliki data yang ada.

Tes ini dilakukan oleh Redditor Bambo_Ocha memeriksa 20 aplikasi berbeda untuk desain keadaan kosong. Berbagai gaya desain terjadi dengan tombol CTA, data sampel, dan bahkan tutorial singkat.

Aplikasi yang berkembang dengan basis pengguna harus mendesain keadaan kosong itu mendorong aktivitas pengguna. Kegiatan ini bisa berupa menerbitkan konten, menambah teman, mengunggah foto, atau apa pun aplikasi dibuat. Layar di bawah ini dari Tookapic adalah contoh yang bagus.

Tetapi halaman keadaan kosong masih memiliki nilai bahkan ketika tindakan tidak diperlukan. Desain ini terutama dibuat untuk memberikan informasi.

Informasi statis sama berharganya dan secara inheren tidak buruk memiliki keadaan kosong. Misalnya desain halaman ini tidak menunjukkan metrik saat ini dari dasbor aplikasi pelacakan. Pengguna mungkin ingin menambahkan beberapa metrik, tetapi tidak buruk membiarkan dash kosong.

Desain statis serupa mungkin berfungsi bagus untuk arsip blog kosong atau folder pesan kosong. Sangat bisa diterima jika tidak ada pesan untuk ditampilkan. Tetapi halaman itu tidak boleh sepenuhnya kosong tanpa konteks juga.

Elemen Halaman Vital

Elemen paling penting pada halaman keadaan kosong adalah konteks. Ini bisa datang dalam bentuk grafik, teks, atau keduanya. Anda ingin memberi tahu pengguna mengapa halaman itu kosong dan data seperti apa yang ada di sana (email, tweet, profil teman, dll).

Dan sementara teks adalah media komunikasi utama di web, Anda tidak dapat mengabaikan nilai grafik dan ikon.

DigitalOcean memiliki dashboard yang brilian dengan grafik keadaan kosong yang menggambarkan poin mereka dengan jelas. Perusahaan mereka menggunakan pencitraan merek dan tipografi yang bersih sehingga tidak mengherankan bahwa halaman kosong mereka begitu ilustratif.

Aspek penting lain dari desain keadaan kosong adalah tombol ajakan bertindak. Ini biasanya dirancang seperti tombol meskipun hyperlink berfungsi dengan baik juga.

Tujuannya adalah untuk membantu pengguna mengambil tindakan dan menjernihkan keadaan kosong mereka. Apakah ini membutuhkan penambahan data atau mengambil tindakan di situs, CTA memandu pengguna ke langkah selanjutnya yang diperlukan untuk membersihkan keadaan kosong.

Dropbox memiliki desain hebat dengan dua tombol CTA. Kapan pun pengguna Dropbox tidak memiliki folder, mereka dapat membuat folder baru atau menambahkan folder sampel ke halaman.

Mendorong Aktivitas Pengguna

Tombol ajakan bertindak adalah elemen aktif tetapi ingat bahwa salinan halaman menjelaskan apa yang dilakukan pengguna. Tidak ada yang hanya mengklik tombol tanpa mengetahui alasannya.

Cara terbaik untuk mendorong aktivitas adalah dengan menulis salinan yang bagus di halaman keadaan kosong Anda. Memandu pengguna melalui aliran konten yang mendorong aktivitas pengguna di seluruh aplikasi.

Keadaan kosong oleh ModSpot ini adalah contoh cemerlang dari kualitas desain dan konten yang mendorong.

Ikon digunakan untuk menunjukkan apa yang harus ditambahkan pengguna ke situs. Panah menunjuk ke tombol yang harus diklik pengguna bersamaan dengan beberapa perilaku yang mendorong teks. Ini adalah desain keadaan kosong yang brilian dengan semua elemen yang Anda harapkan.

Demikian pula keadaan kosong Gumroad menawarkan dua opsi yang menargetkan berbagai tindakan potensial. Pengguna dapat menambahkan produk digital atau produk fisik untuk memulai penjualan.

Tautan lain pada halaman mengarah ke panduan bantuan dan detail kontak. Semuanya sangat efisien dan saling berhubungan dengan baik.

Web vs. Aplikasi Seluler

Halaman negara kosong untuk semua media harus mengikuti tren desain yang sama. Tetapi ada beberapa perbedaan kecil dengan pengalaman pengguna di desktop dibandingkan dengan smartphone.

Situs web di layar yang lebih besar punya lebih banyak ruang untuk tombol tambahan. Halaman web juga bisa punya elemen navigasi yang lebih besar yang dapat menarik orang lain ke situs.

Ini dapat diselesaikan dengan gaya yang sama seperti yang dilakukan Nusii di halaman proposal mereka. Di mana tidak ada proposal, pengguna dipandu ke “tambahkan proposal” tombol di bilah navigasi atas.

Aplikasi seluler mungkin memiliki masalah serupa tetapi layarnya jauh lebih kecil. Ini membuatnya jauh lebih mudah untuk menarik pengguna langsung ke aksi.

Saya menemukan yang terbaik untuk menjaga aplikasi seluler tetap sederhana dengan lebih sedikit opsi. Gunakan visual sebagai permen mata untuk mendorong tindakan dan arahkan ke aliran pengguna yang sangat spesifik.

Contoh Desain Status Kosong

Mungkin cara terbaik untuk belajar tentang desain keadaan kosong adalah dengan mempelajari beberapa contoh. Galeri web yang brilian, emptystat.es, mengkurasi halaman negara kosong dari berbagai situs web hingga aplikasi seluler.

Saya telah memilih sendiri beberapa contoh yang layak mendapatkan perhatian Anda yang paling menggambarkan desain keadaan kosong. Jika Anda memiliki saran lain, silakan beri tahu kami.

DigitalOcean Floating IPs