Panduan mendesain pengalaman web untuk jaringan lambat dan offline.
Artikel ini memberikan panduan desain tentang cara membuat pengalaman yang luar biasa di jaringan lambat dan offline.
Kualitas koneksi jaringan dapat dipengaruhi oleh sejumlah faktor seperti:
- Cakupan penyedia yang buruk.
- Kondisi cuaca yang ekstrem.
- Pemadaman listrik.
- Memasuki "zona mati" permanen, seperti di bangunan dengan dinding yang memblokir koneksi jaringan.
- Masuk ke "zona mati" sementara seperti saat bepergian di kereta dan melewati terowongan.
- Koneksi internet yang bertahan lama 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 untuk memberikan pengalaman baik yang mengurangi dampak perubahan dalam 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? Koneksi yang berhasil adalah pengalaman online normal aplikasi Anda. Namun, kegagalan koneksi dapat berupa status offline aplikasi Anda serta perilaku aplikasi saat ada jaringan yang tersendat.
Saat memikirkan berhasil atau tidaknya koneksi jaringan, tanyakan pada diri Anda sendiri pertanyaan-pertanyaan UX yang penting berikut ini:
- Berapa lama Anda menunggu untuk menentukan keberhasilan atau kegagalan koneksi?
- Apa yang dapat Anda lakukan sementara keberhasilan atau kegagalan sedang 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 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 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. Hal ini melibatkan deteksi keberadaan pekerja layanan dan update pada konten terkelolanya. Anda dapat melihat contoh kode dari fungsi ini yang berfungsi di sini.
Salah satu contohnya adalah Status Platform Chrome yang memposting catatan kepada pengguna saat aplikasi telah diupdate.
Anda juga dapat menampilkan kapan terakhir kali aplikasi diupdate sepanjang waktu di ruang yang terlihat jelas. Hal ini akan berguna, misalnya, untuk aplikasi pengonversi mata uang.
Aplikasi seperti aplikasi berita dapat menampilkan notifikasi ketuk untuk mengupdate sederhana yang memberi tahu pengguna tentang konten baru. Update otomatis akan menyebabkan pengguna kehilangan tempatnya.
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 dan menggunakan warna serta grafik 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 saham individual berubah menjadi hijau atau merah, bergantung pada statusnya.
Beri tahu pengguna agar mereka memahami apa yang dimaksud dengan model offline
Offline adalah model mental baru bagi semua orang. Anda perlu memberi tahu pengguna tentang perubahan 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 saja, untuk menceritakan keseluruhan cerita.
Sediakan pengalaman offline secara default
Jika aplikasi Anda tidak memerlukan banyak data, cache data tersebut secara default. Pengguna dapat semakin kesal jika mereka hanya dapat mengakses data mereka dengan koneksi jaringan. Cobalah untuk membuat pengalaman sestabil mungkin. 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 download otomatis dan penyimpanan berita terbaru secara otomatis sehingga pengguna dapat membaca berita hari ini tanpa koneksi internet, mungkin mendownload teks tanpa gambar artikel. Selain itu, sesuaikan dengan perilaku pengguna. Misalnya, jika bagian olahraga adalah yang biasanya mereka lihat, jadikan bagian tersebut sebagai prioritas download.
Memberi tahu pengguna saat aplikasi siap untuk digunakan secara offline
Saat aplikasi web pertama kali dimuat, Anda perlu memberi tahu 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 data telah didownload.
Pikirkan sekali lagi bahasa yang Anda gunakan untuk memastikan bahasa tersebut cocok untuk audiens Anda. Pastikan pesan tersebut sama di semua kasus penggunaan. Istilah offline umumnya disalahpahami oleh audiens non-teknis, jadi gunakan bahasa berbasis tindakan yang relevan dengan audiens Anda.
Jadikan 'simpan untuk offline' sebagai bagian antarmuka yang jelas untuk aplikasi yang sarat data
Jika aplikasi menggunakan data dalam jumlah besar, pastikan ada tombol akses atau pin guna menambahkan item untuk penggunaan offline, bukan didownload secara otomatis, kecuali jika pengguna secara khusus meminta perilaku ini melalui menu setelan. Pastikan UI download atau pin 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 mungkin juga ingin menggunakan pemutar secara offline. Mendownload musik untuk digunakan nanti mengharuskan pengguna merencanakan di awal, sehingga edukasi tentang hal ini mungkin diperlukan selama orientasi.
Memperjelas apa yang tersedia secara offline
Jelaskan 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 disimpan di ponsel dan apa yang perlu disimpan. Pastikan setelannya ringkas dan jelas di mana data akan disimpan dan siapa yang memiliki akses ke data tersebut.
Tampilkan biaya suatu tindakan sebenarnya
Banyak pengguna menyamakan kemampuan offline dengan 'mendownload'. Pengguna di negara yang koneksi jaringannya sering gagal atau tidak tersedia sering kali berbagi konten dengan pengguna lain, atau menyimpan konten untuk digunakan secara offline saat mereka memiliki konektivitas.
Pengguna yang menggunakan paket data mungkin tidak mendownload file besar karena khawatir dengan biayanya. Oleh karena itu, 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 besar dan melampirkannya ke email, sehingga mereka dapat melanjutkan pengeditan dari perangkat yang berbeda. Jangan sampai terlibat dalam pengalaman peretasan mereka, melainkan perhatikan apa yang ingin mereka capai. Dengan kata lain, alih-alih memikirkan cara menjadikan file besar lebih mudah digunakan, lebih baik pecahkan masalah berbagi file besar di beberapa perangkat.
Buat pengalaman dapat ditransfer dari satu perangkat ke perangkat lainnya
Saat mem-build untuk jaringan yang tidak stabil, cobalah untuk melakukan sinkronisasi segera setelah koneksi membaik sehingga pengalaman dapat ditransfer. Misalnya, bayangkan sebuah aplikasi perjalanan kehilangan koneksi jaringan di tengah proses pemesanan. Setelah koneksi terhubung kembali, aplikasi akan disinkronkan dengan akun pengguna yang memungkinkan mereka melanjutkan pemesanan di perangkat desktop. Tidak dapat mentransfer pengalaman bisa sangat mengagetkan bagi pengguna.
Memberi tahu pengguna tentang status data mereka saat ini. Misalnya, Anda dapat menunjukkan apakah aplikasi telah disinkronkan. Didik mereka jika memungkinkan, tetapi cobalah untuk tidak membebani mereka dengan pesan.
Menciptakan pengalaman desain yang inklusif
Saat mendesain, usahakan agar inklusif dengan menyediakan perangkat desain yang bermakna, bahasa yang sederhana, ikonografi standar, dan gambar bermakna yang akan memandu pengguna 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-kata yang digunakan dalam aplikasi. Hindari jargon teknologi saat menjelaskan status aplikasi atau setiap komponen UI. Pertimbangkan bahwa frasa "aplikasi offline" mungkin tidak menyampaikan status aplikasi saat ini kepada pengguna.
Menggunakan beberapa perangkat desain untuk menciptakan pengalaman pengguna yang mudah diakses
Gunakan bahasa, warna, dan komponen visual untuk mendemonstrasikan perubahan status atau status saat ini. Hanya menggunakan warna untuk menunjukkan status mungkin tidak terlihat oleh pengguna dan mungkin tidak dapat diakses oleh pengguna dengan disabilitas visual. Selain itu, insting bagi desainer adalah menggunakan UI abu-abu untuk ditampilkan secara offline, tetapi hal ini dapat memiliki makna yang dimuat di web. UI abu-abu seperti elemen input pada formulir juga berarti 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 label serta ikon teks yang bermakna. Ikon saja bisa 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, namun pengguna muda yang belum pernah melihat disket mungkin akan bingung dengan metafora ini. Demikian juga, ikon menu 'hamburger' telah diketahui membingungkan pengguna saat ditampilkan tanpa label.
Saat memperkenalkan ikon offline, cobalah untuk tetap konsisten dengan visual standar industri (saat ada) serta memberikan label teks dan deskripsi. Misalnya, menyimpan untuk offline mungkin berupa ikon download standar 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 Anda coba sampaikan, bukan menyajikan konsep abstrak kepada pengguna. Misalnya, data penyimpanan atau download 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 lain
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 menggunakan UI prapemuat, dengan label teks yang memberi tahu pengguna bahwa aplikasi sedang dimuat. Salah satu contohnya adalah dengan berdenyut pada konten wireframe sehingga aplikasi memiliki kesan bahwa aplikasi itu masih hidup dan memuat. Tindakan ini akan meyakinkan pengguna bahwa ada sesuatu yang terjadi dan membantu mencegah pengiriman ulang atau refresh aplikasi Anda.
Jangan blokir konten
Pada beberapa aplikasi, pengguna mungkin memicu tindakan seperti membuat dokumen baru. Beberapa aplikasi akan mencoba terhubung ke server untuk menyinkronkan dokumen baru dan untuk mendemonstrasikan ini, aplikasi menampilkan dialog modal pemuatan yang mengganggu yang mencakup seluruh layar. Tindakan ini mungkin berfungsi dengan baik jika pengguna memiliki koneksi jaringan yang stabil, tetapi jika jaringan tidak stabil, mereka tidak akan dapat keluar dari tindakan ini dan UI secara efektif memblokirnya agar tidak melakukan hal lain. Permintaan jaringan yang memblokir konten harus dihindari. Izinkan pengguna untuk terus menjelajahi aplikasi Anda dan mengantrekan tugas yang akan dilakukan dan disinkronkan setelah koneksi ditingkatkan.
Peragakan status tindakan dengan memberikan masukan kepada pengguna. Misalnya, jika pengguna sedang mengedit dokumen, pertimbangkan untuk mengubah desain masukan sehingga terlihat berbeda dari saat mereka online, tetapi masih menunjukkan bahwa file mereka telah "disimpan" dan akan disinkronkan saat mereka memiliki koneksi jaringan. Cara ini akan memberi tahu pengguna tentang berbagai status yang tersedia dan meyakinkan mereka bahwa tugas atau tindakan telah disimpan. Hal ini memiliki manfaat tambahan, yaitu pengguna menjadi lebih percaya diri menggunakan aplikasi Anda.
Desain untuk miliaran pengguna berikutnya
Di banyak wilayah, perangkat kelas bawah adalah hal biasa, konektivitas tidak dapat diandalkan, dan, bagi banyak pengguna, data tidak terjangkau. Anda perlu mendapatkan kepercayaan pengguna dengan bersikap transparan dan hemat dengan 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. 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 offline data.
Saat membuat desain untuk koneksi jaringan yang tidak stabil, ingatlah panduan berikut:
- Buatlah desain untuk mengetahui keberhasilan, kegagalan, dan ketidakstabilan koneksi jaringan.
- Data mungkin mahal, jadi pertimbangkan untuk pengguna.
- Bagi sebagian besar pengguna di seluruh dunia, lingkungan teknologi hampir secara eksklusif mencakup perangkat seluler.
- Perangkat kelas bawah sudah umum, dengan penyimpanan, memori, dan daya pemrosesan yang terbatas, serta layar kecil dan kualitas layar sentuh yang lebih rendah. Pastikan kinerja adalah bagian dari proses desain Anda.
- Izinkan pengguna untuk menjelajahi aplikasi Anda ketika mereka sedang offline.
- Memberi tahu pengguna tentang status mereka saat ini dan perubahan status.
- Coba sediakan fitur offline secara default jika aplikasi Anda tidak memerlukan banyak data.
- Jika aplikasi sarat data, ajari pengguna 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.
- Berikan jaminan dan umpan balik untuk membantu pengguna.