Halaman ini memberikan panduan desain tentang cara menciptakan pengalaman pengguna yang luar biasa di jaringan 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 bangunan dengan dinding yang memblokir koneksi jaringan.
- Memasuki "zona mati" sementara, seperti saat bepergian dengan kereta dan melalui terowongan.
- Koneksi internet dengan waktu terbatas, seperti di bandara atau hotel.
- Praktik budaya yang memerlukan akses internet terbatas atau tidak ada sama sekali pada waktu tertentu atau pada hari tertentu.
Tujuan Anda sebagai developer adalah memberikan pengalaman yang baik yang mengurangi dampak perubahan konektivitas.
Menentukan apa yang akan ditampilkan kepada pengguna saat mereka memiliki koneksi jaringan yang buruk
Pertanyaan pertama yang perlu diajukan adalah seperti apa keberhasilan dan kegagalan koneksi jaringan untuk aplikasi Anda. Koneksi yang berhasil adalah pengalaman online normal aplikasi Anda. Kegagalan koneksi mencakup perilaku aplikasi Anda saat offline dan di jaringan yang lambat.
Untuk menentukan cara menangani kegagalan koneksi, ajukan pertanyaan UX penting berikut kepada diri Anda sendiri:
- Berapa lama Anda menunggu untuk menentukan keberhasilan atau kegagalan koneksi?
- Apa yang dapat Anda lakukan saat keberhasilan atau kegagalan sedang ditentukan?
- Apa yang harus Anda lakukan jika koneksi gagal?
- Bagaimana Anda memberi tahu pengguna tentang apa yang terjadi?
Memberi tahu pengguna tentang status saat ini dan perubahan status
Beri tahu pengguna status aplikasi dan tindakan yang masih dapat mereka lakukan saat mengalami kegagalan jaringan. Misalnya, notifikasi mungkin berisi hal berikut:
Sepertinya Anda memiliki koneksi jaringan yang 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 mereka telah meningkat bergantung pada aplikasi Anda. Aplikasi yang memprioritaskan informasi terkini, seperti pelacak cuaca atau pasar saham, harus otomatis diperbarui dan memberi tahu pengguna sesegera mungkin.
Sebaiknya beri tahu pengguna bahwa aplikasi web Anda telah diupdate "di latar belakang" menggunakan isyarat visual seperti elemen toast Desain Material. Hal ini mencakup mendeteksi kehadiran pekerja layanan dan update pada konten yang dikelolanya. Anda dapat melihat contoh kode fungsi ini 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 diupdate. Misalnya, hal ini sangat berguna untuk aplikasi pengonversi mata uang.
Aplikasi berita dapat menampilkan notifikasi ketuk untuk mengupdate yang sederhana yang memberi tahu pengguna tentang konten baru. Memperbarui artikel secara otomatis akan menyebabkan pengguna kehilangan posisinya.
Mengupdate UI untuk mencerminkan status kontekstual saat ini
Setiap elemen UI dapat memiliki konteks dan perilakunya sendiri yang berubah bergantung pada apakah elemen tersebut memerlukan koneksi yang berhasil. 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 grafik untuk memberi tahu pengguna kapan pasar saham terbuka. Seluruh antarmuka akan berubah menjadi putih, lalu menjadi abu-abu saat pasar ditutup. Saat nilai saham meningkat atau menurun, setiap widget saham akan berubah menjadi hijau atau merah, bergantung pada statusnya.
Beri tahu pengguna agar mereka memahami model offline
Sebagian besar pengguna terbiasa selalu memiliki koneksi jaringan. Anda perlu mengedukasi mereka tentang perubahan apa yang terjadi di aplikasi Anda saat mereka tidak memiliki koneksi. Beri tahu mereka lokasi penyimpanan data besar dan berikan setelan untuk mengubah perilaku default. Gunakan beberapa komponen desain UI (seperti bahasa informatif, ikon, notifikasi, warna, dan gambar) secara bersamaan untuk menyampaikan ide-ide ini, bukan mengandalkan satu pilihan desain, seperti ikon itu sendiri, untuk menceritakan seluruh cerita.
Memberikan pengalaman offline secara default
Jika aplikasi Anda tidak memerlukan banyak data, cache data tersebut secara default. Pengguna dapat semakin frustrasi jika mereka hanya dapat mengakses data dengan koneksi jaringan.
Cobalah untuk membuat pengalaman sestabil mungkin. Koneksi yang tidak stabil membuat aplikasi Anda terasa tidak tepercaya. Aplikasi yang mengurangi dampak kegagalan jaringan akan menyenangkan penggunanya.
Situs berita dapat memanfaatkan fitur download otomatis dan simpan otomatis berita terbaru, mungkin menyimpan data dengan hanya mendownload teks, sehingga pengguna dapat membaca berita hari ini tanpa koneksi. Anda dapat menyesuaikan perilaku ini dengan perilaku pengguna dengan memprioritaskan download kategori berita yang paling sering dilihat pengguna.
Memberi tahu pengguna saat aplikasi siap digunakan secara offline
Saat pertama kali dimuat, aplikasi web harus menunjukkan kepada pengguna apakah aplikasi tersebut siap untuk penggunaan offline. Lakukan ini dengan widget yang memberikan masukan singkat tentang operasi melalui pesan di bagian bawah layar, misalnya, saat bagian telah disinkronkan atau file telah didownload.
Pastikan bahasa yang Anda gunakan sesuai dengan audiens, dan gunakan frasa yang sama dalam semua kasus yang berlaku. Audiens non-teknis sering kali salah memahami kata "offline". Jadi, gunakan bahasa berbasis tindakan yang dapat dipahami audiens Anda.
Membuat 'simpan untuk offline' terlihat jelas di antarmuka
Jika aplikasi menggunakan banyak data, pastikan ada tombol atau pin untuk menambahkan item untuk penggunaan offline. Download file secara otomatis hanya jika pengguna secara khusus meminta perilaku ini melalui menu setelan. Pastikan UI pin atau download jelas bagi pengguna dan tidak disembunyikan oleh elemen UI lainnya.
Salah satu contohnya adalah pemutar musik yang memerlukan file berukuran besar. Pengguna mengetahui biaya data yang terkait, tetapi mungkin juga ingin menggunakan pemutar secara offline. Untuk mendownload musik guna digunakan nanti, pengguna harus merencanakannya terlebih dahulu. Jadi, sebaiknya Anda mengedukasi pengguna tentang hal ini selama orientasi.
Mengklarifikasi apa yang tersedia secara offline
Jelaskan dengan jelas opsi yang Anda sediakan. Anda mungkin perlu menampilkan tab atau setelan untuk "library offline" atau indeks konten agar pengguna dapat melihat apa yang telah mereka simpan di perangkat dan apa yang perlu disimpan. Pastikan setelan ringkas, dan jelas tentang tempat data disimpan dan siapa yang memiliki akses ke data tersebut.
Menampilkan biaya sebenarnya dari suatu tindakan
Banyak pengguna menyamakan kemampuan offline dengan 'mendownload'. Pengguna di negara tempat koneksi jaringan sering gagal atau tidak tersedia sering kali membagikan konten kepada pengguna lain, atau menyimpan konten untuk penggunaan offline saat mereka memiliki konektivitas.
Pengguna yang menggunakan paket data terkadang menghindari mendownload file besar karena takut akan biaya, jadi Anda mungkin juga ingin menampilkan biaya terkait sehingga pengguna dapat melakukan 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 melakukannya. Misalnya, sebelum aplikasi web berbagi file berbasis cloud ada, pengguna biasanya menyimpan file besar dan melampirkan file tersebut ke email agar mereka dapat terus mengedit file tersebut dari perangkat lain. UI yang baik memecahkan masalah yang coba diselesaikan pengguna tanpa menarik mereka ke dalam pengalaman yang diretas. Misalnya, berikan cara untuk berbagi file besar di seluruh perangkat, bukan membuat lampiran file besar ke email lebih mudah digunakan.
Membuat pengalaman dapat ditransfer dari satu perangkat ke perangkat lainnya
Saat mem-build untuk jaringan yang tidak stabil, coba sinkronkan segera setelah koneksi membaik sehingga pengalaman dapat ditransfer. Misalnya, bayangkan aplikasi perjalanan kehilangan koneksi jaringan di tengah pemesanan. Saat koneksi dibuat ulang, aplikasi akan disinkronkan dengan akun pengguna, sehingga mereka 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. Beri mereka edukasi jika memungkinkan, tetapi jangan sampai mereka kewalahan dengan terlalu banyak pesan.
Membuat pengalaman desain yang inklusif
Saat mendesain UX, usahakan untuk bersifat inklusif dengan menyediakan perangkat desain yang bermakna, bahasa yang sederhana, ikonografi standar, dan gambar yang bermakna yang memandu pengguna untuk menyelesaikan tindakan atau tugas tanpa mengganggu.
Menggunakan 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 hal yang mereka temui di sepanjang jalan, termasuk bahasa yang digunakan aplikasi untuk mendeskripsikan 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 komponen bahasa, warna, dan visual untuk menampilkan status atau perubahan status. Hanya menggunakan warna untuk menampilkan status dapat sulit dikenali oleh pengguna, atau bahkan tidak dapat diakses sama sekali oleh pengguna dengan gangguan penglihatan. Selain itu, karena desain web cenderung menggunakan abu-abu untuk elemen yang dinonaktifkan, menggunakan UI berwarna abu-abu untuk menunjukkan bahwa aplikasi Anda sedang offline dapat menyebabkan kebingungan tentang apa yang dapat dilakukan aplikasi Anda saat offline, terutama jika Anda hanya menggunakan warna untuk menampilkan status.
Untuk mencegah kesalahpahaman, tunjukkan status aplikasi kepada pengguna dengan beberapa cara, misalnya dengan warna, label, dan komponen UI.
Menggunakan ikon yang menyampaikan makna
Pastikan untuk menggunakan label teks yang bermakna bersama ikon Anda. Ikon saja dapat membingungkan, terutama karena konsep 'offline' di web relatif baru. Kasus lain ikon yang membingungkan mencakup penggunaan floppy disk untuk mewakili 'simpan', yang mungkin tidak berarti bagi pengguna yang lebih muda yang belum pernah melihat floppy disk, serta ikon menu 'tiga garis'.
Saat memperkenalkan ikon offline, tetap konsisten dengan visual standar industri jika ada, dan berikan label dan deskripsi teks. Misalnya, Anda dapat menggunakan ikon download untuk menyimpan untuk offline, ikon sinkronisasi untuk tindakan yang melibatkan sinkronisasi. Berhati-hatilah saat menggunakan ikon untuk menunjukkan status yang mungkin diinterpretasikan sebagai tindakan simpan atau download.
Untuk inspirasi lainnya, lihat set ikon Desain Material.
Menggunakan tata letak kerangka dan mekanisme masukan lainnya
Saat aplikasi memuat konten, tunjukkan kepada pengguna bahwa konten sedang dimuat sehingga mereka tidak mengira aplikasi rusak. Salah satu cara untuk melakukannya adalah menggunakan tata letak kerangka, versi wireframe aplikasi Anda yang ditampilkan saat konten dimuat. Pertimbangkan juga menggunakan UI pramuat dengan label teks yang memberi tahu pengguna bahwa aplikasi sedang dimuat, atau animasi yang berdenyut lembut untuk wireframe agar terasa seperti aktif dan sedang dimuat. Hal ini meyakinkan pengguna bahwa ada sesuatu yang terjadi dan membantu mencegah pengiriman ulang atau refresh yang tidak perlu.
Menampilkan status tindakan dengan memberikan masukan. Misalnya, jika pengguna mengedit dokumen secara offline, pertimbangkan untuk mengubah desain masukan sehingga terlihat berbeda saat pengguna online, tetapi tetap menunjukkan bahwa file mereka "disimpan" dan akan disinkronkan saat mereka memiliki koneksi jaringan. Hal ini akan mengedukasi pengguna tentang cara kerja aplikasi Anda dan meyakinkan mereka bahwa tugas atau tindakan mereka telah disimpan, yang dapat membuat mereka lebih percaya diri dalam menggunakan aplikasi Anda.
Jangan blokir konten
Di beberapa aplikasi, pengguna mungkin 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 yang mengganggu yang mencakup seluruh layar. Hal ini mungkin berfungsi jika pengguna memiliki koneksi jaringan yang stabil, tetapi jika jaringan tidak stabil, mereka tidak akan dapat keluar dari tindakan ini, sehingga UI akan memblokir mereka agar tidak melakukan hal lain.
Hindari permintaan jaringan yang memblokir konten. Izinkan pengguna untuk terus menjelajahi aplikasi Anda dan mengantrekan tugas yang akan dilakukan dan disinkronkan saat koneksi telah membaik.
Mendesain untuk miliaran pengguna berikutnya
Di banyak wilayah, perangkat kelas bawah adalah hal biasa, konektivitas tidak dapat diandalkan, dan bagi banyak pengguna, data sangat mahal. Dapatkan kepercayaan pengguna dengan bersikap transparan dan hemat dengan data. Pikirkan cara untuk membantu pengguna dengan koneksi yang buruk dan menyederhanakan antarmuka untuk membantu mempercepat tugas. Selalu coba tanyakan pengguna sebelum mendownload konten yang berisi banyak data.
Menawarkan opsi bandwidth rendah untuk pengguna dengan koneksi yang lambat. Berikan aset yang lebih kecil pada koneksi jaringan yang lebih lambat, atau tawarkan opsi untuk memilih aset berkualitas tinggi atau rendah.
Kesimpulan
Edukasi adalah kunci UX offline karena pengguna tidak terbiasa dengan UX offline. Untuk membantu mereka belajar, coba buat asosiasi dengan konsep yang sudah dikenal, seperti menjelaskan bahwa mendownload untuk digunakan nanti sama dengan menonaktifkan data.
Saat mendesain untuk koneksi jaringan yang tidak stabil, ingat panduan berikut:
- Buat desain untuk keberhasilan, kegagalan, dan ketidakstabilan koneksi jaringan.
- Data dapat mahal, jadi pertimbangkan pengguna.
- Bagi sebagian besar pengguna secara global, lingkungan teknologi hampir sepenuhnya seluler.
- Perangkat kelas bawah adalah hal biasa, dengan penyimpanan, memori, dan daya pemrosesan yang terbatas, layar kecil, dan kualitas layar sentuh yang lebih rendah. Pastikan performa merupakan bagian dari proses desain Anda.
- Izinkan pengguna menjelajahi aplikasi Anda saat mereka offline.
- Beri tahu pengguna tentang status mereka saat ini dan perubahan status.
- Coba berikan offline secara default jika aplikasi Anda tidak memerlukan banyak data.
- Jika aplikasi memiliki banyak data, beri tahu pengguna cara mendownload untuk penggunaan offline.
- Buat pengalaman yang dapat ditransfer antar-perangkat.
- Gunakan bahasa, ikon, gambar, tipografi, dan warna secara bersamaan untuk mengekspresikan ide kepada pengguna.
- Berikan jaminan dan masukan untuk membantu pengguna.