5 Tips Mobile Ux Yang Harus Diikuti Setiap Desainer

Ada banyak fokus saat ini untuk memperbaiki masalah seluler, termasuk masalah kinerja seluler karena pengguna terus terpaku pada perangkat mereka yang lebih kecil.

Biasanya, masalah ini ditangani setelah situs diluncurkan, ketika kesalahan mulai muncul di laporan Google Search Console tentang kegunaan seluler. Meskipun tim pengembangan sering kali dapat mengatasi kesalahan seperti itu, jauh lebih efisien bagi desainer untuk memahami dan menerapkan praktik terbaik UX seluler sejak awal.

Kecepatan seluler juga merupakan faktor besar untuk pengoptimalan mesin telusur, jadi desainer dan pengembang harus mempertimbangkan bagaimana segala sesuatu mulai dari animasi hingga citra akan memengaruhi metrik tersebut.

Fokus pada jarak elemen desain

Spasi elemen desain bukan hanya tentang menciptakan aliran visual yang bagus; ini tentang membuat situs Anda mudah digunakan oleh semua pengunjung, termasuk yang menggunakan perangkat seluler.

Kesalahan kegunaan seluler yang umum di Google Search Console adalah "elemen yang dapat diklik terlalu berdekatan."

Ini menciptakan pengalaman yang membuat frustrasi bagi pengunjung di perangkat yang lebih kecil di mana mereka secara tidak sengaja mengeklik elemen saat mencoba menavigasi situs.

Dari sudut pandang desain UX seluler, tombol dan elemen interaktif atau yang dapat diklik harus cukup besar dan ditempatkan cukup jauh dalam desain.

Di desktop, pengunjung menavigasi dengan mouse yang merupakan alat yang sangat tepat, sementara di seluler, sebagian besar pengguna menggunakan ibu jari mereka. Jempol biasanya lebih besar dari kursor mouse kecil Anda dan bisa menjadi sedikit canggung, terutama jika Anda mencoba menavigasi situs sambil berjalan atau multitasking.

Oleh karena itu, Anda perlu mendesain ruang yang cukup antara tombol dan elemen, sehingga pengunjung tidak mengalami pengalaman seluler yang membuat frustrasi.

Anda juga perlu mempertimbangkan aksesibilitas dan cara pengunjung memegang perangkat yang lebih kecil. Beberapa mungkin memegang ponsel atau tablet dengan tangan kiri, yang lain dengan tangan kanan, atau beberapa dengan kedua tangan. Desain situs harus mudah dinavigasi terlepas dari itu.

Terakhir, pengunjung juga menggunakan ibu jari mereka untuk menggulir di perangkat dan menelusuri halaman web, jadi Anda harus memastikan tidak ada elemen besar yang dapat diklik yang mungkin mereka ketuk secara tidak sengaja saat menggulir.

Pastikan keterbacaan teks dan font

Selain spasi, kesalahan kegunaan seluler umum lainnya dalam laporan Google Search Console adalah “teks terlalu kecil untuk dibaca”. Meskipun pengembang dapat menyesuaikan beberapa aspek ukuran font, ada beberapa praktik terbaik UX yang dapat diterapkan oleh tim desain sejak awal dalam hal keterbacaan.

Memilih jenis huruf yang mudah terbaca adalah langkah pertama untuk memulai. Ingatlah bahwa pengguna sering berjalan kaki atau melakukan banyak tugas atau berada di luar saat menggunakan perangkat mereka yang lebih kecil dan mereka mungkin berada dalam skenario yang tidak ideal saat mencoba menavigasi situs Anda.

Membuat hierarki visual dalam hal ukuran font adalah cara lain untuk membantu pengguna seluler dengan cepat memindai dan memahami konten halaman. Ini juga membantu pada perangkat seluler atau tablet di mana teks judul dapat digabungkan ke baris berikutnya. Memanfaatkan font dan ukuran yang sama di seluruh halaman dapat menyebabkan kebingungan seputar arti halaman.

Dalam desain Anda, Anda juga dapat menambah tinggi garis di antara baris teks untuk meningkatkan keterbacaan halaman.

Setelah Anda memutuskan font dan ukurannya, Anda juga perlu mempertimbangkan rasio kontras warna.

Karena pengunjung mungkin berada di dalam atau di luar ruangan atau dalam pencahayaan yang buruk, penting untuk mengikuti standar kontras antara warna latar belakang dan latar depan.

Ini juga berperan dalam aksesibilitas dan pembuatan situs web yang sesuai dengan ADA. Menurut standar WCAG 2.1, rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar direkomendasikan.

Pastikan arahkan kursor dan animasi mengikuti praktik terbaik

Sebagian besar desain web saat ini menggabungkan beberapa animasi mikro dan komponen interaktif; itu adalah permintaan umum dari klien dalam proses desain ulang.

Menambahkan gerakan ke situs sering kali merupakan kolaborasi antara desainer dan pengembang karena animasi dapat memengaruhi waktu buka halaman dan menyebabkan QC tanpa akhir jika tidak dikodekan dengan baik. Saat memilih animasi dalam proses desain, Anda juga perlu merencanakan apakah interaksi tersebut akan terjadi di perangkat seluler.

Karena masalah kinerja, biasanya animasi kompleks dan latar belakang video dimatikan di seluler karena dapat memperlambat waktu buka situs, terutama bagi pengunjung di jaringan seluler. Jenis perubahan ini semakin umum sejak 2018, ketika kecepatan halaman seluler menjadi salah satu faktor peringkat Google.

Secara umum, animasi dan interaksi harus digunakan dengan cara yang halus untuk mendukung pengalaman pengguna dan tidak boleh mengganggu pengunjung. Juga tidak boleh menjadi unsur penting dalam membantu pengunjung menyelesaikan suatu tindakan.

Arahkan kursor adalah elemen desain umum lainnya yang mungkin terlihat berbeda di perangkat seluler. Di desktop, mengarahkan kursor ke objek atau gambar yang mengubah atau mengungkapkan teks saat pengunjung mengarahkan mouse ke atasnya. Meskipun ini berfungsi dengan baik di perangkat besar, perlu diingat bahwa di seluler, pengunjung tidak menggunakan mouse, artinya pengunjung harus mengetuk untuk melihat kursor diarahkan.

Oleh karena itu, jika Anda memiliki kotak atau gambar yang menampilkan teks saat mengarahkan kursor, Anda harus memastikan bahwa pesan tersebut tidak penting bagi langkah pengunjung.

Saat mendiskusikan animasi, Anda dan tim pengembangan Anda juga dapat meninjau praktik terbaik Google untuk pedoman animasi web guna menghindari kesalahan apa pun terkait flash atau teknologi usang.

Rencanakan penempatan pop-up dan elemen pihak ketiga

Selalu ada banyak perdebatan tentang apakah akan menggunakan formulir pop-up di situs web dan apakah akan menerapkannya di perangkat seluler.

Salah satu argumen untuk menghindari formulir pop-up di ponsel adalah bahwa akan lebih sulit bagi pengunjung untuk menutup formulir atau pesan. Sejak Januari 2017, Google telah memperingatkan agar tidak menggunakan interstisial yang mengganggu yang memblokir semua konten di halaman agar tidak terlihat oleh pengunjung, karena hal itu terutama bermasalah di seluler.

Anda dapat mempertimbangkan semua elemen ini dalam diskusi dengan klien tentang formulir pop-up dan memutuskan pengalaman pengguna terbaik untuk desain formulir.

Saat mengambil pendekatan desain yang bijaksana untuk seluler, ada baiknya untuk mempertimbangkan bagaimana elemen akan ditempatkan pada perangkat yang lebih kecil. Misalnya, tombol tempel di sisi kanan layar yang tetap ada saat pengunjung menggulir dapat berfungsi dengan baik di desktop, tetapi jenis elemen tempel ini dapat membuat ruang tampilan menjadi lebih kecil di perangkat seluler.

Sementara beberapa elemen seperti obrolan langsung dan widget aksesibilitas dapat ditambahkan pada saat terakhir, perencanaan untuk ini lebih awal dalam proses desain web dapat membantu menghindari antarmuka yang kacau bagi pengunjung.

Obrolan langsung telah menjadi alat yang sangat populer dan widget obrolan sering ditemukan di sudut kanan bawah atau kiri desain. Menawarkan rekomendasi tentang penempatan elemen-elemen ini dengan memasukkannya ke dalam maket desain akan membantu Anda memperkirakan masalah apa pun dengan item yang tumpang tindih.

Pertimbangkan kembali desain dan penempatan formulir

Mengisi dan mengirimkan formulir saat menggunakan perangkat seluler atau tablet yang lebih kecil dapat menjadi tugas yang mengganggu bagi pengunjung. Itulah mengapa sangat penting untuk mempertimbangkan opsi alternatif untuk formulir dalam desain situs.

Saat membuat navigasi menu seluler, pertimbangkan untuk menyertakan nomor telepon “klik untuk menelepon” di header, sehingga pengunjung dapat dengan mudah menjangkau bisnis tersebut.

Saat mendesain semua formulir di situs, praktik terbaik untuk desktop dan seluler adalah mengurangi jumlah bidang formulir sebanyak mungkin – dan dengan jelas menunjukkan bidang yang diperlukan.

Salah satu tip untuk pengalaman seluler formulir adalah mendesain label formulir dan tidak hanya menggunakan teks placeholder untuk bidang formulir. Pengunjung di perangkat seluler dapat dengan mudah terganggu oleh notifikasi dan interaksi lain, sehingga mereka dapat terganggu dalam proses penyelesaian formulir dan melupakan teks placeholder yang tercantum. Memberikan label formulir yang jelas dan pesan kesalahan juga penting untuk kepatuhan ADA.

Terakhir, penempatan formulir pada halaman dan bagaimana hal ini dapat disesuaikan dengan tata letak responsif sangat penting karena penempatan formulir dapat memengaruhi konversi.

Kesimpulan

Mengingat peningkatan fokus pada kinerja seluler, mempraktikkan beberapa ide di atas saat Anda mendesain proyek Anda akan menghemat waktu dan frustrasi Anda saat proyek tersebut diluncurkan. Apakah ada kiat UX seluler tambahan yang telah membantu aliran desain Anda? Tinggalkan komentar di bawah!

Berikutnya: Bangun keahlian desain web Anda dengan kursus online yang bermanfaat!

Desain UX Seluler hanyalah salah satu dari banyak hal yang harus Anda perhatikan sebagai desainer web profesional. Meskipun tidak selalu ada banyak waktu yang tersedia untuk mengasah keterampilan Anda, mengikuti kursus online adalah cara yang bagus untuk memastikan Anda melanjutkan pendidikan Anda.

Artikel ini menawarkan daftar lengkap dari beberapa kursus online terbaik untuk desainer web (+berapa biayanya) sehingga Anda tidak perlu menghabiskan lebih banyak waktu untuk mencari melalui semua opsi yang tersedia!