Panduan untuk mendesain pengalaman web bagi jaringan yang lambat dan offline.
Artikel ini memberikan panduan desain tentang cara membuat pengalaman terbaik di jaringan yang lambat dan offline.
Kualitas koneksi jaringan dapat dipengaruhi oleh sejumlah faktor seperti:
- Cakupan penyedia yang buruk.
- Kondisi cuaca ekstrem.
- Pemadaman listrik.
- Masuk ke "zona mati" permanen seperti di gedung dengan dinding yang memblokir koneksi jaringan.
- Masuk ke "zona mati" sementara seperti saat bepergian di kereta api dan melewati terowongan.
- Koneksi internet yang memiliki batas waktu, seperti yang ada di bandara atau hotel.
- Praktik budaya yang memerlukan akses internet terbatas atau tidak ada pada waktu atau hari tertentu.
Tujuan Anda adalah memberikan pengalaman baik yang 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 keberhasilan dan kegagalan koneksi jaringan? Koneksi yang berhasil adalah pengalaman online normal pada aplikasi Anda. Namun, kegagalan koneksi dapat berupa status offline aplikasi serta perilaku aplikasi saat ada jaringan yang tersendat.
Saat memikirkan tentang berhasil atau tidaknya koneksi jaringan, Anda perlu bertanya pada diri sendiri pertanyaan UX penting 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 terjadi kegagalan?
- Bagaimana Anda memberi tahu pengguna tentang hal di atas?
Memberi tahu pengguna tentang status mereka saat ini dan perubahan status
Beri tahu pengguna kedua tindakan yang masih dapat mereka lakukan saat mengalami kegagalan jaringan dan status aplikasi saat ini. Misalnya, notifikasi dapat bertuliskan:
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 mereka telah meningkat bergantung pada aplikasi Anda. Aplikasi seperti aplikasi pasar saham yang memprioritaskan informasi terbaru 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, misalnya, elemen toast desain material. Tindakan ini melibatkan deteksi kehadiran pekerja layanan dan update pada konten terkelolanya. Anda dapat melihat contoh kode fungsi ini berfungsi di sini.
Salah satu contohnya adalah Status Platform Chrome yang memposting catatan kepada pengguna saat aplikasi telah diupdate.
Anda juga dapat menampilkan waktu terakhir kali aplikasi diupdate sepanjang waktu di ruang yang mudah terlihat. Hal ini akan berguna misalnya untuk aplikasi pengonversi mata uang.
Aplikasi seperti aplikasi berita dapat menampilkan notifikasi sederhana untuk mengupdate yang memberi tahu pengguna tentang konten baru. Update otomatis akan membuat pengguna tidak fokus.
Mengupdate UI untuk mencerminkan status kontekstual saat ini
Setiap bit UI dapat memiliki konteks dan fungsionalitasnya sendiri yang akan berubah bergantung pada apakah memerlukan koneksi yang berhasil. Salah satu contohnya adalah situs e-commerce yang dapat dijelajahi secara offline. Tombol Beli dan harga akan dinonaktifkan hingga koneksi terhubung kembali.
Bentuk status kontekstual lainnya dapat mencakup data. Misalnya, aplikasi keuangan Robinhood memungkinkan pengguna membeli saham serta menggunakan warna dan grafis untuk memberi tahu pengguna saat pasar buka. Seluruh antarmuka berubah menjadi putih, kemudian menjadi abu-abu saat pasar tutup. Saat nilai stok meningkat atau menurun, setiap widget stok akan berubah menjadi hijau atau merah, bergantung pada statusnya.
Berikan edukasi kepada pengguna agar mereka memahami apa itu model offline
Offline adalah model mental baru bagi semua orang. Anda perlu memberi tahu pengguna tentang perubahan apa yang akan terjadi saat mereka tidak memiliki koneksi. Beri tahu mereka tempat data besar disimpan dan berikan setelan untuk mengubah perilaku default. Pastikan Anda menggunakan beberapa komponen desain UI seperti bahasa yang informatif, ikon, notifikasi, warna, dan gambar untuk menyampaikan ide-ide ini secara kolektif, bukan mengandalkan satu pilihan desain, seperti ikon itu sendiri, untuk menceritakan kisah keseluruhan.
Memberikan pengalaman offline secara default
Jika aplikasi Anda tidak memerlukan banyak data, maka simpan data tersebut di cache secara default. Pengguna dapat semakin frustrasi jika mereka hanya dapat mengakses data dengan koneksi jaringan. Cobalah untuk membuat pengalaman stabil. Koneksi yang tidak stabil akan membuat aplikasi Anda terasa tidak dapat dipercaya, dan aplikasi yang mengurangi dampak kegagalan jaringan akan terasa ajaib bagi pengguna.
Situs berita dapat memanfaatkan fitur download otomatis dan penyimpanan otomatis berita terbaru sehingga pengguna dapat membaca berita hari ini tanpa koneksi internet, mungkin karena mendownload teks tanpa gambar artikel. Selain itu, sesuaikan dengan perilaku pengguna. Misalnya, jika bagian olahraga adalah yang biasanya mereka lihat, jadikan bagian tersebut sebagai download prioritas.
Memberi tahu pengguna saat aplikasi siap untuk digunakan secara offline
Saat aplikasi web pertama kali dimuat, Anda perlu menunjukkan kepada pengguna apakah aplikasi tersebut siap untuk digunakan secara offline. Lakukan hal ini dengan widget yang menyediakan masukan singkat tentang operasi melalui pesan di bagian bawah layar seperti, misalnya, saat suatu bagian telah disinkronkan atau file data telah didownload.
Sekali lagi, pikirkan tentang bahasa yang Anda gunakan untuk memastikan bahasa tersebut cocok untuk audiens Anda. Pastikan pesan tersebut sama di semua instance tempat pesan digunakan. Istilah offline umumnya disalahpahami oleh audiens non-teknis, jadi gunakan bahasa berbasis tindakan yang dapat dipahami audiens Anda.
Jadikan 'simpan untuk offline' sebagai bagian antarmuka yang jelas untuk aplikasi yang sarat data
Jika aplikasi menggunakan data dalam jumlah besar, pastikan terdapat tombol akses atau pin guna menambahkan item untuk penggunaan offline, bukan mendownload otomatis, kecuali jika pengguna secara khusus meminta perilaku ini melalui menu setelan. Pastikan pin atau UI download tidak terhalang oleh elemen UI lain dan fitur tersebut terlihat jelas bagi pengguna.
Salah satu contohnya adalah pemutar musik yang membutuhkan file data besar. Pengguna mengetahui biaya data terkait, tetapi sebaiknya juga menggunakan pemutar secara offline. Mendownload musik untuk digunakan nanti mengharuskan pengguna merencanakan terlebih dahulu, jadi edukasi tentang hal ini mungkin diperlukan selama orientasi.
Memperjelas apa saja yang tersedia secara offline
Perjelas opsi yang Anda berikan. Anda mungkin perlu menampilkan tab atau setelan yang menampilkan "library offline" atau indeks konten, sehingga pengguna dapat dengan mudah melihat apa yang telah mereka simpan di ponsel dan apa yang perlu disimpan. Pastikan setelannya ringkas dan jelas di mana data akan disimpan serta siapa yang dapat mengaksesnya.
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 yang memiliki paket data dapat menghindari mendownload file besar karena takut biayanya. Jadi, sebaiknya tampilkan biaya terkait agar pengguna dapat membuat perbandingan aktif untuk file atau tugas tertentu. Misalnya, jika aplikasi musik di atas dapat mendeteksi apakah pengguna menggunakan paket data dan menampilkan ukuran file sehingga pengguna dapat melihat biaya file.
Membantu mencegah pengalaman yang diretas
Sering kali pengguna meretas pengalaman tanpa menyadari bahwa mereka telah melakukannya. Misalnya sebelum aplikasi web berbagi file berbasis cloud, biasanya pengguna menyimpan file berukuran besar dan melampirkannya ke email, sehingga pengguna dapat melanjutkan pengeditan dari perangkat yang berbeda. Jangan tertipu oleh pengalaman diretas, melainkan lihatlah apa yang ingin mereka capai. Dengan kata lain, alih-alih berpikir bagaimana Anda dapat membuat lampiran file besar lebih mudah digunakan, selesaikan masalah berbagi file besar di beberapa perangkat.
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 proses pemesanan. Saat koneksi terhubung kembali, aplikasi akan disinkronkan dengan akun pengguna yang memungkinkan mereka melanjutkan pemesanan di perangkat desktop. Ketidakmampuan untuk mentransfer pengalaman dapat sangat menjengkelkan bagi pengguna.
Memberi tahu pengguna tentang status data mereka saat ini. Misalnya, Anda dapat menampilkan apakah aplikasi telah disinkronkan. Berikan edukasi kepada mereka jika memungkinkan, tetapi cobalah untuk tidak membebani mereka dengan pesan.
Menciptakan pengalaman desain yang inklusif
Saat mendesain, usahakan untuk menjadi inklusif dengan menyediakan perangkat desain yang bermakna, bahasa yang sederhana, ikonografi standar, dan gambar bermakna yang akan memandu pengguna untuk menyelesaikan tindakan atau tugas, bukan menghambat progres mereka.
Gunakan bahasa yang sederhana dan ringkas
UX yang baik bukan hanya tentang antarmuka yang dirancang dengan baik. Ini mencakup jalur yang diambil pengguna serta kata yang digunakan dalam aplikasi. Hindari jargon teknologi saat menjelaskan status aplikasi atau setiap komponen UI. Pertimbangkan bahwa frasa "aplikasi offline" mungkin tidak menyampaikan kepada pengguna status aplikasi saat ini.
Menggunakan beberapa perangkat desain untuk menciptakan pengalaman pengguna yang mudah diakses
Gunakan bahasa, warna, dan komponen visual untuk menunjukkan perubahan status atau status saat ini. Hanya menggunakan warna untuk menunjukkan status mungkin tidak diperhatikan oleh pengguna dan mungkin tidak dapat diakses oleh pengguna dengan disabilitas visual. Selain itu, naluri desainer adalah menggunakan UI berwarna abu-abu untuk merepresentasikan secara offline, tetapi hal ini dapat memiliki arti yang dimuat di web. UI abu-abu seperti elemen input pada formulir juga berarti bahwa elemen dinonaktifkan. Hal ini dapat menyebabkan kebingungan jika Anda hanya menggunakan warna untuk menggambarkan status.
Untuk mencegah kesalahpahaman, nyatakan berbagai status kepada pengguna dengan beberapa cara, misalnya dengan warna, label, dan komponen UI.
Gunakan ikon yang menyampaikan makna
Pastikan informasi disampaikan dengan benar menggunakan ikon serta label teks yang bermakna. Ikon saja dapat menjadi masalah, karena konsep offline di web relatif baru. Pengguna mungkin salah memahami ikon yang digunakan mereka sendiri. Misalnya, menggunakan disket untuk menyimpan masuk akal bagi generasi yang lebih tua, tetapi pengguna muda yang belum pernah melihat disket bisa bingung dengan metafora tersebut. Demikian juga, ikon menu 'hamburger' diketahui membingungkan pengguna ketika disajikan tanpa label.
Saat memperkenalkan ikon offline, cobalah untuk tetap konsisten dengan visual standar industri (jika ada) serta memberikan label teks dan deskripsi. Misalnya, menyimpan untuk offline mungkin merupakan ikon download yang biasa, atau mungkin jika tindakan melibatkan sinkronisasi, ikon tersebut bisa berupa ikon sinkronisasi. Beberapa tindakan dapat ditafsirkan sebagai menyimpan untuk offline, bukan menunjukkan status jaringan. Pikirkan tindakan yang ingin Anda sampaikan, bukan menyajikan konsep abstrak kepada pengguna. Misalnya, data yang disimpan atau didownload akan berbasis tindakan.
Offline dapat berarti banyak hal, bergantung pada konteksnya, seperti download, ekspor, penyematan, dll. Untuk mendapatkan lebih banyak inspirasi, lihat kumpulan ikon Desain Material.
Menggunakan tata letak kerangka dengan mekanisme masukan lainnya
Tata letak kerangka pada dasarnya adalah versi wireframe dari aplikasi Anda yang ditampilkan saat konten sedang dimuat. Hal ini membantu menunjukkan kepada pengguna bahwa konten akan dimuat. Pertimbangkan juga untuk menggunakan UI prapemuat, dengan label teks yang memberi tahu pengguna bahwa aplikasi sedang dimuat. Salah satu contohnya adalah dengan membuat denyut konten wireframe membuat aplikasi merasa bahwa konten tersebut hidup dan memuat. Tindakan ini akan meyakinkan pengguna bahwa sesuatu telah terjadi dan membantu mencegah pengiriman ulang atau pembaruan aplikasi Anda.
Jangan blokir konten
Di beberapa aplikasi, pengguna mungkin memicu tindakan seperti membuat dokumen baru. Beberapa aplikasi akan mencoba terhubung ke server untuk menyinkronkan dokumen baru, dan untuk menunjukkannya, aplikasi menampilkan dialog modal pemuatan yang mengganggu yang mencakup seluruh layar. Tindakan ini mungkin berfungsi dengan baik jika pengguna memiliki koneksi jaringan yang stabil. Namun, jika jaringan tidak stabil, mereka tidak akan dapat menghindari tindakan ini dan UI akan secara efektif memblokir pengguna agar tidak melakukan hal lain. Permintaan jaringan yang memblokir konten harus dihindari. Izinkan pengguna melanjutkan penjelajahan aplikasi dan mengantrekan tugas yang akan dilakukan dan disinkronkan setelah koneksi membaik.
Peragakan status tindakan dengan memberikan masukan kepada pengguna. Misalnya, jika pengguna mengedit dokumen, pertimbangkan untuk mengubah desain masukan sehingga terlihat berbeda dengan saat mereka online, tetapi masih menunjukkan bahwa file mereka "disimpan" dan akan disinkronkan ketika mereka memiliki koneksi jaringan. Cara ini akan memberi tahu pengguna tentang berbagai status yang tersedia dan meyakinkan mereka bahwa tugas atau tindakan mereka telah disimpan. Hal ini memiliki manfaat tambahan yaitu pengguna menjadi lebih percaya diri dalam menggunakan aplikasi Anda.
Desain untuk miliaran pengguna berikutnya
Di banyak wilayah, perangkat kelas bawah sudah menjadi hal biasa, konektivitas tidak dapat diandalkan dan, bagi banyak pengguna, data tidak terjangkau. Anda perlu mendapatkan kepercayaan pengguna dengan bersikap transparan dan menghemat 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 untuk pengguna yang memiliki koneksi lambat. Jadi jika koneksi jaringan lambat, sediakan aset kecil. Tawarkan opsi untuk memilih aset berkualitas tinggi atau rendah.
Kesimpulan
Pendidikan adalah kunci UX offline karena pengguna tidak terbiasa dengan konsep ini. Coba buat asosiasi dengan hal-hal yang sudah dikenal, misalnya, mendownload untuk digunakan nanti sama dengan membuat data offline.
Saat mendesain untuk koneksi jaringan yang tidak stabil, ingatlah panduan ini:
- Desain untuk keberhasilan, kegagalan, dan ketidakstabilan koneksi jaringan.
- Data mungkin 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, serta 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 sarat data, didiklah pengguna tentang cara mengunduh untuk penggunaan offline.
- Buat pengalaman dapat ditransfer antar-perangkat.
- Gunakan bahasa, ikon, gambar, tipografi, dan warna bersama-sama untuk mengekspresikan ide kepada pengguna.
- Memberikan jaminan dan masukan untuk membantu pengguna.