Dipublikasikan: 10 November 2016
Kualitas koneksi jaringan dapat dipengaruhi oleh sejumlah faktor, seperti:
- Cakupan penyedia jaringan yang buruk.
- Kondisi cuaca ekstrem.
- Pemadaman listrik.
- Memasuki "zona mati" permanen, seperti di dalam bangunan dengan dinding yang menghalangi koneksi jaringan.
- Memasuki "zona mati" sementara, seperti saat bepergian dengan kereta api dan melewati terowongan.
- Koneksi internet yang dibatasi waktu, 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 konten 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 bagi 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, tanyakan pada diri Anda pertanyaan UX penting berikut:
- Berapa lama Anda menunggu untuk menentukan keberhasilan atau kegagalan koneksi?
- Apa yang dapat Anda lakukan saat keberhasilan atau kegagalan ditentukan?
- Apa yang harus Anda lakukan jika koneksi gagal?
- Bagaimana Anda memberi tahu pengguna apa yang sedang terjadi?
Memberi tahu pengguna tentang status
Memberi tahu pengguna tentang status aplikasi dan tindakan yang masih dapat mereka lakukan saat terjadi kegagalan jaringan. Misalnya, notifikasi dapat menampilkan hal berikut:
Sepertinya koneksi jaringan Anda buruk. Jangan khawatir. Pesan akan dikirim saat jaringan dipulihkan.
Memberi tahu pengguna tentang peningkatan koneksi
Cara Anda memberi tahu pengguna bahwa koneksi jaringan mereka telah ditingkatkan bergantung pada aplikasi Anda. Aplikasi yang memprioritaskan informasi terkini, seperti pelacak cuaca atau pasar saham, harus diupdate otomatis dan memberi tahu pengguna sesegera mungkin.
Sebaiknya Anda memberi tahu pengguna bahwa aplikasi web Anda telah diupdate "di latar belakang" dengan menggunakan isyarat visual seperti elemen toast Desain Material. Hal ini melibatkan pendeteksian kehadiran pekerja layanan dan update pada konten yang dikelolanya. Anda dapat melihat contoh kode dari fungsi ini saat digunakan di sini.
Salah satu contohnya adalah Status Platform Chrome, yang memposting catatan kepada pengguna saat aplikasi telah diupdate.
Beberapa aplikasi dapat selalu menampilkan waktu terakhir kali aplikasi tersebut diupdate. Misalnya, hal ini sangat berguna untuk aplikasi konverter mata uang.
Aplikasi berita dapat menampilkan notifikasi ketuk untuk memperbarui yang memberi tahu pengguna tentang konten baru. Memperbarui artikel secara otomatis akan menyebabkan pengguna kehilangan posisi mereka.
Memperbarui 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 mencakup data. Misalnya, aplikasi keuangan Robinhood menggunakan warna dan grafik untuk memberi tahu pengguna kapan bursa saham buka. Seluruh antarmuka berubah menjadi putih, lalu berwarna abu-abu saat pasar tutup. Saat nilai saham meningkat atau menurun, setiap widget saham akan berubah menjadi hijau atau merah, bergantung pada statusnya.
Memberi tahu pengguna sehingga mereka memahami apa itu model offline
Sebagian besar pengguna terbiasa selalu memiliki koneksi jaringan. Anda perlu mengedukasi mereka tentang perubahan yang terjadi pada aplikasi Anda saat mereka tidak memiliki koneksi. Memberi tahu mereka tempat penyimpanan data besar dan memberi mereka setelan untuk mengubah perilaku default. Gunakan beberapa komponen desain UI (seperti bahasa yang informatif, ikon, notifikasi, warna, dan gambar) secara bersamaan untuk menyampaikan ide-ide ini, alih-alih mengandalkan satu pilihan desain, seperti ikon saja, untuk menceritakan keseluruhan cerita.
Menyediakan pengalaman offline secara default
Jika aplikasi Anda tidak memerlukan banyak data, maka cache data tersebut secara default. Pengguna dapat menjadi semakin frustrasi jika mereka hanya dapat mengakses data mereka dengan koneksi jaringan.
Cobalah untuk membuat pengalaman seandainya stabil mungkin. Koneksi yang tidak stabil membuat aplikasi Anda terasa tidak tepercaya. Aplikasi yang mengurangi dampak kegagalan jaringan memuaskan penggunanya.
Situs berita dapat memanfaatkan download otomatis dan penyimpanan otomatis berita terbaru, mungkin dengan menghemat 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 offline
Saat aplikasi web dimuat pertama kali, aplikasi tersebut harus menunjukkan kepada pengguna apakah aplikasi siap digunakan secara offline atau tidak. 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 Anda, dan gunakan frasa yang sama di 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 agar dapat digunakan secara offline. Download file secara otomatis 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 lainnya.
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 merencanakan terlebih dahulu, jadi Anda mungkin ingin mengedukasi pengguna tentang hal ini selama proses orientasi.
Memperjelas apa yang tersedia secara offline
Sampaikan dengan jelas opsi yang Anda berikan. Anda mungkin perlu menampilkan tab atau setelan untuk "perpustakaan offline" atau indeks konten agar pengguna dapat melihat apa yang telah mereka simpan di perangkat mereka dan apa yang perlu disimpan. Pastikan setelannya ringkas, dan jelaskan dengan jelas 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-negara yang koneksi jaringannya sering gagal atau tidak tersedia sering membagikan konten kepada pengguna lain, atau menyimpan konten untuk digunakan secara offline saat mereka memiliki konektivitas.
Pengguna yang menggunakan paket data terkadang menghindari mendownload file besar karena takut biayanya mahal, jadi Anda mungkin juga ingin menampilkan biaya terkait agar pengguna dapat membandingkan secara 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 ada aplikasi web berbagi file berbasis cloud, pengguna biasanya menyimpan file besar dan melampirkannya ke email agar dapat terus mengedit file tersebut dari perangkat lain. UI yang baik memecahkan masalah yang coba dipecahkan pengguna tanpa terpengaruh oleh pengalaman yang diretas. Misalnya, sediakan 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
Saat membangun untuk jaringan yang tidak stabil, coba sinkronkan segera setelah koneksi membaik agar pengalaman dapat ditransfer. Misalnya, bayangkan aplikasi perjalanan kehilangan koneksi jaringan di tengah proses pemesanan. Saat koneksi dipulihkan, aplikasi disinkronkan dengan akun pengguna, sehingga mereka dapat melanjutkan pemesanan di perangkat desktop dan membuat pengalaman terasa lancar.
Beri tahu pengguna status datanya. Misalnya, Anda dapat menampilkan apakah aplikasi telah disinkronkan. Berikan edukasi kepada mereka jika memungkinkan, tetapi jangan terlalu banyak mengirim pesan agar mereka tidak merasa terbebani.
Menciptakan pengalaman desain yang inklusif
Saat mendesain UX, berusahalah untuk menjadi 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 menghalangi.
Gunakan bahasa yang sederhana dan jelas
UX yang baik bukan hanya tentang mendesain antarmuka Anda. Hal ini mencakup jalur yang diambil pengguna melalui aplikasi Anda, dan semua yang mereka temui di sepanjang jalur tersebut, termasuk bahasa yang digunakan aplikasi untuk mendeskripsikan perjalanan tersebut. Saat menjelaskan komponen UI atau status aplikasi, hindari jargon teknis. Kata "offline" sering kali tidak cukup jelas untuk memberi tahu pengguna tentang aktivitas 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. Penggunaan warna saja untuk menunjukkan status dapat sulit diperhatikan 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 Anda sedang offline dapat menyebabkan kebingungan tentang apa yang dapat dilakukan aplikasi Anda saat offline, terutama jika Anda hanya menggunakan warna untuk menunjukkan status.
Untuk mencegah kesalahpahaman, sampaikan status aplikasi kepada pengguna dengan berbagai 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 yang menggunakan ikon yang membingungkan termasuk penggunaan disket untuk merepresentasikan 'simpan', yang mungkin tidak berarti bagi pengguna yang lebih muda yang belum pernah melihat disket, serta ikon menu 'hamburger'.
Saat memperkenalkan ikon offline, tetaplah konsisten dengan visual standar industri jika ada, dan berikan label teks dan deskripsi. Misalnya, Anda dapat menggunakan ikon download untuk menandakan penyimpanan untuk penggunaan offline, ikon sinkronisasi untuk tindakan yang melibatkan sinkronisasi. Berhati-hatilah saat menggunakan ikon untuk menunjukkan status yang mungkin ditafsirkan sebagai tindakan penyimpanan atau download.
Untuk mendapatkan inspirasi lainnya, lihat set ikon Desain Material.
Menggunakan tata letak kerangka dan mekanisme masukan lainnya
Saat aplikasi Anda memuat konten, tunjukkan kepada pengguna bahwa aplikasi sedang memuat konten agar mereka tidak mengira aplikasi rusak. Salah satu cara untuk melakukannya adalah dengan menggunakan tata letak kerangka, versi wireframe aplikasi Anda yang ditampilkan saat konten sedang dimuat. Pertimbangkan juga untuk menggunakan UI pra-pemuat dengan label teks yang memberi tahu pengguna bahwa aplikasi sedang dimuat, atau animasi berdenyut lembut untuk wireframe agar terasa hidup dan sedang dimuat. Hal ini meyakinkan pengguna bahwa sesuatu sedang terjadi dan membantu mencegah pengiriman ulang atau pemuatan ulang yang tidak perlu.
Tampilkan status tindakan dengan memberikan masukan. Misalnya, jika pengguna mengedit dokumen secara offline, pertimbangkan untuk mengubah desain masukan agar terlihat berbeda dari saat pengguna online, tetapi tetap menunjukkan bahwa file mereka telah "disimpan" dan akan disinkronkan saat mereka memiliki koneksi jaringan. Hal ini mengedukasi pengguna tentang cara kerja aplikasi Anda dan meyakinkan mereka bahwa tugas atau tindakan mereka telah disimpan, sehingga membuat mereka lebih percaya diri dalam menggunakan aplikasi Anda.
Jangan memblokir konten
Di beberapa aplikasi, pengguna dapat memicu tindakan seperti membuat dokumen baru. Beberapa aplikasi mencoba terhubung ke server untuk menyinkronkan dokumen baru, dan untuk mendemonstrasikannya, aplikasi menampilkan dialog modal pemuatan yang mengganggu dan menutupi 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 memblokir mereka untuk melakukan hal lain.
Hindari permintaan jaringan yang memblokir konten. Izinkan pengguna terus menjelajahi aplikasi Anda dan mengantrekan tugas yang akan dilakukan dan disinkronkan saat koneksi membaik.
Desain untuk miliaran pengguna berikutnya
Di banyak wilayah, perangkat kelas bawah sudah umum, konektivitas tidak dapat diandalkan, dan bagi banyak pengguna, data sangat mahal. Dapatkan kepercayaan pengguna Anda dengan bersikap transparan dan hemat data. Pikirkan cara untuk membantu pengguna dengan koneksi yang buruk dan menyederhanakan antarmuka untuk membantu mempercepat tugas. Selalu coba tanyakan kepada pengguna sebelum mendownload konten yang memakan banyak data.
Menawarkan opsi bandwidth rendah untuk pengguna dengan koneksi yang lambat. Menyediakan aset yang lebih kecil pada koneksi jaringan yang lebih lambat, atau menawarkan opsi untuk memilih aset berkualitas tinggi atau rendah.
Kesimpulan
Edukasi adalah kunci untuk UX offline karena pengguna tidak terbiasa dengannya. Untuk membantu mereka belajar, coba buat asosiasi dengan konsep yang sudah dikenal, seperti menjelaskan bahwa mendownload untuk digunakan nanti sama dengan mengaktifkan data offline.
Saat mendesain untuk koneksi jaringan yang tidak stabil, ingat panduan berikut:
- Desain untuk keberhasilan, kegagalan, dan ketidakstabilan koneksi jaringan.
- Data bisa mahal, jadi pertimbangkan pengguna.
- Bagi sebagian besar pengguna secara global, lingkungan teknologi hampir secara eksklusif adalah seluler.
- Perangkat kelas bawah sudah umum, dengan penyimpanan, memori, dan daya pemrosesan yang terbatas, layar kecil, dan kualitas layar sentuh yang lebih rendah. Pastikan performa menjadi bagian dari proses desain Anda.
- Izinkan pengguna menjelajahi aplikasi Anda saat mereka offline.
- Memberi tahu pengguna tentang status mereka saat ini dan perubahan status.
- Coba sediakan offline secara default jika aplikasi Anda tidak memerlukan banyak data.
- Jika aplikasi menggunakan banyak data, beri tahu pengguna cara mendownload untuk penggunaan offline.
- Membuat pengalaman dapat ditransfer antarperangkat.
- Gunakan bahasa, ikon, gambar, tipografi, dan warna secara bersamaan untuk menyampaikan ide kepada pengguna.
- Berikan kepastian dan masukan untuk membantu pengguna.