8 Tips Desain UI Seluler untuk Pengalaman Pengguna yang Lebih Baik
Senin, 18 Mei 2020
Tambah Komentar
8 Tips Desain UI Seluler untuk Pengalaman Pengguna yang Lebih Baik - Setiap hari, semakin banyak produk dirancang untuk seluler. Alasannya cukup sederhana, (Kita hidup di dunia di mana ponsel kita pergi ke mana saja bersama kita). Ini tidak selalu menjadi norma.
Saat ini, desainer ditantang untuk menyesuaikan banyak informasi yang biasanya ditampilkan oleh monitor, pada layar yang jauh lebih kecil. Selain itu, desainer harus mengikuti banyak struktur perangkat seluler berbeda yang terus muncul di pasar (mis. Layar melengkung, tampilan takik, dll.).
Namun, jangan biarkan ini membodohi Anda dengan berpikir bahwa mendesain untuk seluler itu tidak mungkin. Disini kami telah membuat daftarnya sebagai berikut:
Aksesibilitas adalah praktik membuat produk Anda dapat digunakan oleh sebanyak mungkin orang. Dengan mempertimbangkan "desain untuk semua orang", penting untuk mempertimbangkan berbagai cara orang benar-benar memegang perangkat seluler mereka.
Ada 3 cara utama orang memegang ponsel secara fisik (divisualisasikan di bawah). Tujuannya adalah untuk merancang tindakan utama sehingga mereka duduk di area ini.
Perangkat seluler memiliki layar yang lebih kecil dibandingkan dengan desktop, jadi pas banyak informasi pada UI seluler kecil bisa jadi menantang. Keterbacaan yang baik dikombinasikan dengan elemen desain lainnya memberikan UX yang luar biasa.
Pengguliran panjang adalah cara yang bagus untuk membuat pengguna tetap fokus saat membaca blok teks yang panjang. Namun dalam kasus lain, (misalnya, ketika pengguna diminta untuk menyelesaikan tugas), penelitian menunjukkan bahwa semakin banyak kita menggulir, semakin kita cenderung kehilangan minat atau menjadi frustrasi.
Cobalah untuk menjaga layar sesingkat mungkin menggunakan kartu dengan fitur "ketuk untuk memperluas", atau dengan memecah tugas menjadi layar.
Font yang berbeda dapat membangkitkan emosi yang berbeda sambil memberikan keterbacaan yang mudah pada saat yang sama. Pilihan font yang salah juga dapat merusak desain Anda, itulah sebabnya sebagian besar desainer menghabiskan banyak waktu memilih tipografi yang tepat sebelum yang lainnya. Berikut adalah beberapa tips penting yang perlu diingat ketika datang ke font:
Typeface: Pilih jenis huruf yang bekerja dengan baik dalam berbagai ukuran dan bobot untuk menjaga keterbacaan dan kegunaan di setiap ukuran.
Ukuran Huruf: Gunakan ukuran huruf yang dapat dibaca. Apple dan Google merekomendasikan setidaknya ~ 11 poin agar pengguna dapat membacanya pada jarak pandang yang khas tanpa memperbesar.
Kontras Warna: Gunakan pemeriksa kontras untuk mencegah masalah warna antara font dan latar belakang. Juga, gunakan aturan 60-30-10 yang mengacu pada proporsi ideal untuk mencapai keseimbangan di antara warna.
Layar yang lebih kecil tidak selalu berarti Anda harus menggunakan teks yang lebih kecil atau lebih sedikit ruang. Jangan biarkan teks atau elemen lainnya tumpang tindih. Tingkatkan keterbacaan dengan meningkatkan tinggi garis atau jarak elemen.
Perlu diingat juga bahwa teknologi baru muncul setiap hari, dan sebagai perancang, penting untuk selalu mendapatkan informasi terbaru. Misalnya, tampilan telepon melengkung berarti menambah bantalan beberapa piksel untuk menghindari sentuhan yang tidak diinginkan (~ 16pt adalah padding minimum yang disarankan untuk perangkat).
Dalam kasus desain tombol yang tidak disengaja sering terjadi karena kontrol sentuh yang kecil. Nah, untuk menghindari titik sakit ini, buat kontrol yang mengukur setidaknya 10-12 mm (40px) sehingga dapat diketuk dengan jari secara akurat.
Untuk membantu Anda memahami betapa pentingnya tip ini, pikirkan tentang iklan yang mungkin Anda lihat pada pengalaman seluler. Dengan iklan, tombol seringkali sangat kecil, tidak mudah dikenali, dan sangat sulit dijangkau. Tentu saja, tujuan CTA ini adalah untuk mencegah sentuhan tidak disengaja yang kita semua benci.
Tab bar adalah bagian dari setiap aplikasi, artinya Anda harus sangat berhati-hati saat mendesainnya. Ini bukan saatnya untuk menjadi kreatif.
Desain bilah tab atau tab bar yang jelas dan bersih, dan beri nama semua tab bila memungkinkan untuk pengalaman pengguna yang lebih baik. Gunakan ikon hanya ketika Anda yakin 110% bahwa pengguna akan dengan mudah mengenali dan memahami tujuan mereka. Jika ikon merupakan persyaratan, maka strukturnya harus mengandung desain sesedikit mungkin.
Cobalah untuk menggunakan urutan standar untuk menu navigasi Anda, seperti bilah tab iOS atau laci Android nav. Jangan mencoba menemukan kembali roda. Pengguna terbiasa dengan pola umum ini, sehingga aplikasi Anda akan lebih intuitif bagi mereka. Ini juga berlaku untuk elemen lain yang dirancang berbeda pada platform ini.
Catatan:
Ingat, setiap kali Anda menyelesaikan desain, apa pun aturan yang Anda ikuti atau seberapa baik kinerjanya di mata Anda, Anda harus selalu melakukan pengujian kegunaan. Saya harap Anda menemukan artikel ini bermanfaat dan ingat, praktikkan, atau Anda akan melupakannya!
Saat ini, desainer ditantang untuk menyesuaikan banyak informasi yang biasanya ditampilkan oleh monitor, pada layar yang jauh lebih kecil. Selain itu, desainer harus mengikuti banyak struktur perangkat seluler berbeda yang terus muncul di pasar (mis. Layar melengkung, tampilan takik, dll.).
Namun, jangan biarkan ini membodohi Anda dengan berpikir bahwa mendesain untuk seluler itu tidak mungkin. Disini kami telah membuat daftarnya sebagai berikut:
Tips Desain UI Selular untuk Pengalaman Pengguna yang Lebih Baik
1. Menjaga tindakan utama dapat diakses
Aksesibilitas adalah praktik membuat produk Anda dapat digunakan oleh sebanyak mungkin orang. Dengan mempertimbangkan "desain untuk semua orang", penting untuk mempertimbangkan berbagai cara orang benar-benar memegang perangkat seluler mereka.
Ada 3 cara utama orang memegang ponsel secara fisik (divisualisasikan di bawah). Tujuannya adalah untuk merancang tindakan utama sehingga mereka duduk di area ini.
2. Pertimbangkan keterbacaan
Perangkat seluler memiliki layar yang lebih kecil dibandingkan dengan desktop, jadi pas banyak informasi pada UI seluler kecil bisa jadi menantang. Keterbacaan yang baik dikombinasikan dengan elemen desain lainnya memberikan UX yang luar biasa.
3. Hindari masalah pengguliran yang sangat panjang
Pengguliran panjang adalah cara yang bagus untuk membuat pengguna tetap fokus saat membaca blok teks yang panjang. Namun dalam kasus lain, (misalnya, ketika pengguna diminta untuk menyelesaikan tugas), penelitian menunjukkan bahwa semakin banyak kita menggulir, semakin kita cenderung kehilangan minat atau menjadi frustrasi.
Cobalah untuk menjaga layar sesingkat mungkin menggunakan kartu dengan fitur "ketuk untuk memperluas", atau dengan memecah tugas menjadi layar.
4. Jenis dan ukuran font
Font yang berbeda dapat membangkitkan emosi yang berbeda sambil memberikan keterbacaan yang mudah pada saat yang sama. Pilihan font yang salah juga dapat merusak desain Anda, itulah sebabnya sebagian besar desainer menghabiskan banyak waktu memilih tipografi yang tepat sebelum yang lainnya. Berikut adalah beberapa tips penting yang perlu diingat ketika datang ke font:
Typeface: Pilih jenis huruf yang bekerja dengan baik dalam berbagai ukuran dan bobot untuk menjaga keterbacaan dan kegunaan di setiap ukuran.
Ukuran Huruf: Gunakan ukuran huruf yang dapat dibaca. Apple dan Google merekomendasikan setidaknya ~ 11 poin agar pengguna dapat membacanya pada jarak pandang yang khas tanpa memperbesar.
Kontras Warna: Gunakan pemeriksa kontras untuk mencegah masalah warna antara font dan latar belakang. Juga, gunakan aturan 60-30-10 yang mengacu pada proporsi ideal untuk mencapai keseimbangan di antara warna.
5. Beri jarak dan bantalan yang cukup
Layar yang lebih kecil tidak selalu berarti Anda harus menggunakan teks yang lebih kecil atau lebih sedikit ruang. Jangan biarkan teks atau elemen lainnya tumpang tindih. Tingkatkan keterbacaan dengan meningkatkan tinggi garis atau jarak elemen.
Perlu diingat juga bahwa teknologi baru muncul setiap hari, dan sebagai perancang, penting untuk selalu mendapatkan informasi terbaru. Misalnya, tampilan telepon melengkung berarti menambah bantalan beberapa piksel untuk menghindari sentuhan yang tidak diinginkan (~ 16pt adalah padding minimum yang disarankan untuk perangkat).
6. Desain tombol yang ramah jari
Dalam kasus desain tombol yang tidak disengaja sering terjadi karena kontrol sentuh yang kecil. Nah, untuk menghindari titik sakit ini, buat kontrol yang mengukur setidaknya 10-12 mm (40px) sehingga dapat diketuk dengan jari secara akurat.
Untuk membantu Anda memahami betapa pentingnya tip ini, pikirkan tentang iklan yang mungkin Anda lihat pada pengalaman seluler. Dengan iklan, tombol seringkali sangat kecil, tidak mudah dikenali, dan sangat sulit dijangkau. Tentu saja, tujuan CTA ini adalah untuk mencegah sentuhan tidak disengaja yang kita semua benci.
7. Jaga agar tab bar tetap bersih
Tab bar adalah bagian dari setiap aplikasi, artinya Anda harus sangat berhati-hati saat mendesainnya. Ini bukan saatnya untuk menjadi kreatif.
Desain bilah tab atau tab bar yang jelas dan bersih, dan beri nama semua tab bila memungkinkan untuk pengalaman pengguna yang lebih baik. Gunakan ikon hanya ketika Anda yakin 110% bahwa pengguna akan dengan mudah mengenali dan memahami tujuan mereka. Jika ikon merupakan persyaratan, maka strukturnya harus mengandung desain sesedikit mungkin.
8. Gunakan menu navigasi yang familier
Cobalah untuk menggunakan urutan standar untuk menu navigasi Anda, seperti bilah tab iOS atau laci Android nav. Jangan mencoba menemukan kembali roda. Pengguna terbiasa dengan pola umum ini, sehingga aplikasi Anda akan lebih intuitif bagi mereka. Ini juga berlaku untuk elemen lain yang dirancang berbeda pada platform ini.
Catatan:
Ingat, setiap kali Anda menyelesaikan desain, apa pun aturan yang Anda ikuti atau seberapa baik kinerjanya di mata Anda, Anda harus selalu melakukan pengujian kegunaan. Saya harap Anda menemukan artikel ini bermanfaat dan ingat, praktikkan, atau Anda akan melupakannya!
Belum ada Komentar untuk "8 Tips Desain UI Seluler untuk Pengalaman Pengguna yang Lebih Baik"
Posting Komentar