Halaman ini memberikan panduan desain tentang cara membuat pengalaman pengguna yang luar biasa di jaringan yang lambat dan offline.
Kualitas koneksi jaringan dapat dipengaruhi oleh sejumlah faktor, seperti berikut:
- Cakupan penyedia jaringan buruk.
- Kondisi cuaca ekstrem.
- Pemadaman listrik.
- Memasuki "zona mati" permanen, seperti di gedung dengan dinding yang memblokir koneksi jaringan.
- Memasuki "zona mati" sementara, seperti saat bepergian di kereta api dan melewati terowongan.
- Koneksi internet yang memiliki banyak waktu, seperti di bandara atau hotel.
- Praktik budaya yang memerlukan akses internet terbatas atau tidak ada pada waktu tertentu atau pada hari tertentu.
Tujuan Anda sebagai developer adalah memberikan pengalaman yang baik, yang akan mengurangi dampak perubahan konektivitas.
Tentukan apa yang akan ditampilkan kepada pengguna saat mereka memiliki koneksi jaringan yang buruk
Pertanyaan pertama yang harus diajukan adalah seperti apa koneksi jaringan yang berhasil dan gagal untuk aplikasi Anda. Koneksi yang berhasil adalah pengalaman online normal pada aplikasi. Kegagalan koneksi mencakup perilaku aplikasi Anda secara offline dan pada jaringan yang lambat.
Untuk menentukan cara menangani kegagalan koneksi, tanyakan pada diri Anda sendiri pertanyaan-pertanyaan UX penting berikut ini:
- Berapa lama Anda menunggu untuk menentukan berhasil atau gagalnya koneksi?
- Apa yang dapat Anda lakukan sementara keberhasilan atau kegagalan ditentukan?
- Apa yang harus Anda lakukan jika koneksi gagal?
- Bagaimana Anda memberi tahu pengguna apa yang terjadi?
Memberi tahu pengguna tentang status mereka saat ini dan perubahan status
Beri tahu pengguna status aplikasi dan tindakan yang masih dapat mereka lakukan saat terjadi kegagalan jaringan. Misalnya, notifikasi dapat bertuliskan sebagai berikut:
Tampaknya koneksi jaringan Anda buruk. Jangan khawatir. Pesan akan dikirim saat jaringan dipulihkan.
Memberi tahu pengguna saat koneksi jaringan membaik atau dipulihkan
Cara Anda memberi tahu pengguna bahwa koneksi jaringan telah meningkat bergantung pada aplikasi Anda. Aplikasi yang memprioritaskan informasi saat ini, seperti pelacak cuaca atau pasar saham, harus diupdate secara otomatis dan memberi tahu pengguna sesegera mungkin.
Sebaiknya beri tahu pengguna bahwa aplikasi web Anda telah diupdate "di latar belakang" dengan menggunakan tanda visual seperti elemen toast Desain Material. Proses ini melibatkan deteksi keberadaan pekerja layanan dan update pada konten terkelolanya. Anda dapat melihat contoh kode dari fungsi kerja di sini.
Salah satu contohnya adalah Status Platform Chrome, yang memposting catatan kepada pengguna saat aplikasi telah diupdate.
Beberapa aplikasi selalu dapat menampilkan waktu terakhir kali aplikasi diperbarui. Misalnya, hal ini sangat berguna terutama untuk aplikasi pengonversi mata uang.
Aplikasi berita dapat menampilkan notifikasi ketuk untuk mengupdate sederhana yang memberi tahu pengguna tentang konten baru. Memperbarui artikel secara otomatis akan menyebabkan pengguna tidak dapat mengingatnya.
Mengupdate UI untuk mencerminkan status kontekstual saat ini
Setiap elemen UI dapat memiliki konteks dan perilakunya sendiri yang berubah bergantung pada apakah elemen UI memerlukan koneksi yang berhasil atau tidak. Salah satu contohnya adalah situs e-commerce yang dapat dijelajahi secara offline, tetapi menonaktifkan harga dan tombol Beli hingga koneksi terhubung kembali.
Bentuk status kontekstual lainnya dapat menyertakan data. Misalnya, aplikasi keuangan Robinhood menggunakan warna dan grafis untuk memberi tahu pengguna kapan pasar saham dibuka. Seluruh antarmuka berubah menjadi putih, lalu menjadi abu-abu saat pasar tutup. Saat nilai saham meningkat atau menurun, masing-masing widget stok akan berubah menjadi hijau atau merah, bergantung pada statusnya.
Berikan edukasi kepada pengguna agar mereka memahami apa itu model offline
Sebagian besar pengguna biasanya selalu memiliki koneksi jaringan. Anda perlu memberi tahu mereka tentang perubahan apa saja dalam aplikasi saat tidak memiliki koneksi. Beri tahu mereka lokasi penyimpanan data besar dan berikan setelan untuk mengubah perilaku default. Gunakan beberapa komponen desain UI (seperti bahasa, ikon, notifikasi, warna, dan gambar yang informatif) secara bersamaan untuk menyampaikan ide-ide ini, bukan mengandalkan satu pilihan desain, seperti ikon itu sendiri, untuk menyampaikan keseluruhan cerita.
Memberikan pengalaman offline secara default
Jika aplikasi Anda tidak memerlukan banyak data, maka simpan data tersebut di cache secara default. Pengguna dapat menjadi semakin frustrasi jika mereka hanya dapat mengakses data dengan koneksi jaringan.
Cobalah untuk membuat pengalaman ini stabil. Koneksi yang tidak stabil membuat aplikasi Anda terasa tidak dapat dipercaya. Aplikasi yang mengurangi dampak kegagalan jaringan menyenangkan penggunanya.
Situs berita dapat memperoleh manfaat dari download otomatis dan penyimpanan otomatis berita terbaru, mungkin menyimpan data dengan hanya mendownload teks, sehingga pengguna dapat membaca berita hari ini tanpa koneksi internet. Anda dapat menyesuaikan perilaku ini dengan perilaku pengguna dengan memprioritaskan mendownload kategori berita yang paling banyak dilihat pengguna.
Memberi tahu pengguna saat aplikasi siap untuk digunakan secara offline
Saat pertama kali dimuat, aplikasi web harus menunjukkan kepada pengguna apakah aplikasi tersebut siap untuk digunakan secara offline. Lakukan hal ini dengan widget yang memberikan masukan singkat tentang operasi melalui pesan di bagian bawah layar seperti, misalnya, saat bagian telah disinkronkan atau file telah didownload.
Pastikan bahasa yang Anda gunakan sesuai dengan audiens, dan gunakan frasa yang sama untuk situasi apa pun. Audiens non-teknis sering kali salah memahami kata "offline", jadi gunakan bahasa berbasis tindakan yang dapat dipahami oleh audiens Anda.
Perjelas 'simpan untuk offline' di antarmuka
Jika aplikasi menggunakan banyak data, pastikan terdapat tombol akses atau pin untuk menambahkan item untuk penggunaan offline. Download otomatis file hanya jika pengguna secara khusus meminta perilaku ini melalui menu setelan. Pastikan pin atau UI download jelas bagi pengguna dan tidak tersembunyi oleh elemen UI lain.
Salah satu contohnya adalah pemutar musik yang memerlukan file besar. Pengguna mengetahui biaya data terkait, tetapi mungkin juga ingin menggunakan pemutar secara offline. Mendownload musik untuk digunakan nanti mengharuskan pengguna membuat rencana terlebih dahulu, jadi Anda mungkin ingin memberi tahu pengguna tentang hal ini selama orientasi.
Memperjelas apa saja yang tersedia secara offline
Perjelas opsi yang Anda berikan. Anda mungkin perlu menampilkan tab atau setelan untuk "library offline" atau indeks konten sehingga pengguna dapat melihat apa yang telah mereka simpan di perangkat dan apa yang perlu disimpan. Pastikan setelannya singkat, dan jelas tentang tempat data disimpan serta siapa yang memiliki akses ke data tersebut.
Menunjukkan biaya tindakan yang sebenarnya
Banyak pengguna yang menyamakan kemampuan offline dengan 'mendownload'. Pengguna di negara yang koneksi jaringannya sering gagal atau tidak tersedia sering berbagi konten dengan pengguna lain, atau menyimpan konten untuk penggunaan offline saat mereka memiliki konektivitas.
Pengguna dengan paket data terkadang menghindari mendownload file besar karena khawatir akan biayanya. Oleh karena itu, sebaiknya tampilkan biaya terkait agar pengguna dapat membuat perbandingan aktif untuk file atau tugas tertentu. Misalnya, aplikasi musik yang disebutkan di atas dapat mendeteksi apakah pengguna menggunakan paket data dan menampilkan ukuran file sehingga pengguna dapat melihat biaya file.
Membantu mencegah pengalaman yang diretas
Pengguna sering kali meretas pengalaman tanpa menyadari bahwa mereka telah melakukannya. Misalnya, sebelum ada aplikasi web berbagi file berbasis cloud, biasanya pengguna menyimpan file besar dan melampirkannya ke email sehingga mereka dapat melanjutkan pengeditan file tersebut dari perangkat lain. UI yang baik memecahkan masalah yang coba dipecahkan pengguna tanpa terlibat dalam pengalaman yang diretas. Misalnya, berikan cara untuk berbagi file besar di seluruh perangkat, alih-alih membuat lampiran file besar ke email lebih mudah digunakan.
Membuat pengalaman dapat ditransfer dari satu perangkat ke perangkat lainnya
Ketika membangun untuk jaringan yang tidak stabil, cobalah menyinkronkan segera setelah koneksi membaik sehingga pengalaman dapat ditransfer. Misalnya, bayangkan sebuah aplikasi perjalanan kehilangan koneksi jaringan di tengah-tengah pemesanan. Saat koneksi terhubung kembali, aplikasi akan disinkronkan dengan akun pengguna, sehingga pengguna dapat melanjutkan pemesanan di perangkat desktop dan membuat pengalaman terasa lancar.
Beri tahu pengguna status data mereka. Misalnya, Anda dapat menampilkan apakah aplikasi telah disinkronkan. Didiklah mereka jika memungkinkan, tetapi cobalah untuk tidak membanjiri mereka dengan pesan yang terlalu banyak.
Menciptakan pengalaman desain yang inklusif
Saat mendesain UX, usahakan inklusif dengan menyediakan perangkat desain yang bermakna, bahasa sederhana, ikonografi standar, dan gambar bermakna yang memandu pengguna untuk menyelesaikan tindakan atau tugas tanpa menghalangi.
Gunakan bahasa yang sederhana dan jelas
UX yang baik bukan hanya tentang mendesain antarmuka. Hal ini mencakup jalur yang diambil pengguna melalui aplikasi Anda, dan semua yang mereka temui di sepanjang jalan, termasuk bahasa yang digunakan aplikasi untuk menggambarkan perjalanan tersebut. Saat menjelaskan komponen UI atau status aplikasi, hindari jargon teknologi. Kata "offline" sering kali tidak cukup jelas untuk memberi tahu pengguna apa yang dilakukan aplikasi Anda.
Menggunakan beberapa perangkat desain untuk menciptakan pengalaman pengguna yang mudah diakses
Gunakan bahasa, warna, dan komponen visual untuk menunjukkan status atau perubahan status. Menggunakan hanya warna untuk menampilkan status mungkin sulit dilihat oleh pengguna, atau bahkan sama sekali tidak dapat diakses oleh pengguna dengan disabilitas visual. Selain itu, karena desain web cenderung menggunakan warna abu-abu untuk elemen yang dinonaktifkan, penggunaan UI berwarna abu-abu untuk menunjukkan bahwa aplikasi sedang offline dapat menyebabkan kebingungan tentang hal yang dapat dilakukan aplikasi saat offline, terutama jika Anda hanya menggunakan warna untuk menampilkan status.
Untuk mencegah kesalahpahaman, ekspresikan status aplikasi kepada pengguna dengan beberapa cara, misalnya dengan warna, label, dan komponen UI.
Gunakan ikon yang menyampaikan makna
Pastikan untuk menggunakan label teks yang bermakna di samping ikon Anda. Ikon saja bisa jadi membingungkan, terutama karena konsep 'offline' di web relatif baru. Kasus lain dari ikon yang membingungkan adalah penggunaan disket untuk menampilkan 'simpan', yang mungkin tidak bermakna bagi pengguna muda yang belum pernah melihat disket, serta ikon menu 'hamburger'.
Saat memperkenalkan ikon offline, tetap konsisten dengan visual standar industri jika ada, serta berikan label teks dan deskripsi. Misalnya, Anda dapat menggunakan ikon download yang berarti menyimpan untuk offline, ikon sinkronisasi untuk tindakan yang memerlukan sinkronisasi. Berhati-hatilah saat menggunakan ikon untuk menunjukkan status yang mungkin diinterpretasikan sebagai tindakan simpan atau download.
Untuk mendapatkan inspirasi selengkapnya, lihat kumpulan ikon Desain Material.
Menggunakan tata letak kerangka dan mekanisme masukan lainnya
Saat aplikasi Anda memuat konten, tunjukkan kepada pengguna bahwa konten sedang dimuat sehingga mereka tidak merasa konten itu rusak. Salah satu cara untuk melakukannya adalah menggunakan tata letak kerangka, yaitu versi wireframe aplikasi Anda yang ditampilkan saat konten sedang dimuat. Pertimbangkan juga untuk menggunakan UI prapemuat dengan label teks yang memberi tahu pengguna bahwa aplikasi sedang dimuat, atau animasi yang bergerak perlahan berdenyut untuk wireframe agar terasa seperti hidup dan dimuat. Hal ini meyakinkan pengguna bahwa sesuatu sedang terjadi dan membantu mencegah pengiriman ulang atau refresh yang tidak perlu.
Menunjukkan status tindakan dengan memberikan masukan. Misalnya, jika pengguna mengedit dokumen secara offline, pertimbangkan untuk mengubah desain masukan sehingga terlihat berbeda dengan saat ia online, tetapi masih menunjukkan bahwa filenya "disimpan" dan akan disinkronkan saat ia memiliki koneksi jaringan. Hal ini memberi tahu pengguna cara kerja aplikasi Anda dan meyakinkan mereka bahwa tugas atau tindakan mereka telah disimpan, sehingga dapat membuat mereka lebih percaya diri dalam menggunakan aplikasi Anda.
Jangan blokir konten
Di beberapa aplikasi, pengguna dapat memicu tindakan seperti membuat dokumen baru. Beberapa aplikasi mencoba terhubung ke server untuk menyinkronkan dokumen baru, dan untuk menunjukkan hal ini, aplikasi menampilkan dialog modal pemuatan mengganggu yang mencakup seluruh layar. Tindakan ini mungkin berfungsi jika pengguna memiliki koneksi jaringan yang stabil, tetapi jika jaringan tidak stabil, pengguna tidak akan dapat menghindari tindakan ini, sehingga UI memblokir pengguna agar tidak melakukan hal lain.
Hindari permintaan jaringan yang memblokir konten. Biarkan pengguna terus menjelajahi aplikasi Anda dan mengantrekan tugas yang akan dijalankan dan disinkronkan saat koneksi meningkat.
Desain untuk miliaran pengguna berikutnya
Di banyak wilayah, perangkat kelas bawah sudah lazim, konektivitas tidak dapat diandalkan, dan data menjadi sangat mahal bagi banyak pengguna. Raih kepercayaan pengguna dengan bersikap transparan dan hemat data. Pikirkan cara untuk membantu pengguna yang memiliki koneksi buruk dan sederhanakan antarmuka untuk membantu mempercepat tugas. Selalu coba tanyakan kepada pengguna sebelum mendownload konten yang sarat data.
Tawarkan opsi bandwidth rendah bagi pengguna yang memiliki koneksi lambat. Sediakan aset yang lebih kecil dengan koneksi jaringan yang lebih lambat, atau tawarkan opsi untuk memilih aset berkualitas tinggi atau rendah.
Kesimpulan
Pendidikan adalah kunci untuk UX offline karena pengguna tidak terbiasa dengannya. Untuk membantu mereka belajar, coba buat pengaitan dengan konsep yang umum, seperti menjelaskan bahwa mendownload untuk digunakan nanti sama dengan membuat offline data.
Saat mendesain untuk koneksi jaringan yang tidak stabil, ingatlah panduan ini:
- Desain untuk keberhasilan, kegagalan, dan ketidakstabilan koneksi jaringan.
- Data bisa mahal, jadi berikan perhatian pada pengguna.
- Bagi sebagian besar pengguna secara global, lingkungan teknologi hampir eksklusif untuk seluler.
- Perangkat kelas bawah sudah menjadi hal yang lazim, dengan penyimpanan, memori, dan daya pemrosesan yang terbatas, layar kecil, dan kualitas layar sentuh yang lebih rendah. Pastikan bahwa kinerja adalah bagian dari proses desain Anda.
- Memungkinkan pengguna menjelajahi aplikasi Anda ketika mereka sedang offline.
- Beri tahu pengguna tentang status mereka saat ini dan perubahan status.
- Coba sediakan offline secara default jika aplikasi Anda tidak memerlukan banyak data.
- Jika aplikasi memiliki banyak data, didik pengguna tentang cara mendownload untuk penggunaan offline.
- Buat pengalaman dapat ditransfer antar-perangkat.
- Gunakan bahasa, ikon, gambar, tipografi, dan warna secara bersamaan untuk mengekspresikan ide kepada pengguna.
- Memberikan jaminan dan masukan untuk membantu pengguna.