Menciptakan pengalaman pengguna pada perangkat mobile menjadi lebih baik
Topik :
Blogging
Sebuah studi yang dilakukan oleh Google menyebutkan bahwa 74 persen pengguna cenderung lebih ingin kembali kepada blog yang memiliki halaman yang mobile-friendly.
Seiring dengan peningkatan jumlah perangkat seluler dan penggunanya, maka sebagai pengelola blog, memiliki blog yang sesuai untuk seluler (mobile-friendly) telah menjadi bagian penting dalam rangka meningkatkan traffik dan kunjungan.
Meskipun telah menerapkan desain yang mobile-friendly, tak jarang desain tersebut masih memiliki dan menyajikan pengalaman pengguna yang kurang baik bahkan cenderung menyusahkan pengguna.
Hal ini menyebabkan potensi besar untuk mendapatkan kunjungan melimpah yang dimiliki blog tersebut menjadi terabaikan.
Pengalaman pengguna yang didapatkan saat menjelajah dan berinteraksi diblog, dapat menentukan apakah blog tersebut bisa disukai dan akan mendapatkan kunjungan kembali atau ia akan di tinggalkan oleh pengunjung.
Sebagai acuan dasar untuk menilai apakah blog mobile-friendly Anda sudah memiliki pengalaman pengguna yang baik, Anda dapat memanfaatkan dua tools gratis yang sudah disediakan oleh Google yaitu :
1. Pagespeed Insight
2. Mobile-friendliness test
Contoh diatas adalah nilai pengalaman pengguna yang saya cek pada tanggal 24 Oktober 2016 lalu. Nilai 100 menandakan bahwa tampilan blog ini memiliki tampilan dengan nilai pengalaman pengguna yang baik jika dilihat melalui perangkat seluler.
Nilai yang di tampilkan pada kolom mobile friendliness dan pengalaman pengguna di tools ini bisa Anda gunakan sebagai acuan saat Anda memperbaiki desain dan layout, agar potensi blog dalam meningkatkan jumlah kunjungan tidak terhalang karena pengalaman pengguna yang buruk.
Semakin rendah nilainya, maka sudah saatnya Anda mengevaluasi tampilan untuk seluler pada blog Anda dan segera memperbaikinya.
Berikut beberapa tips yang perlu Anda perhatikan saat memperbaiki dan membuat desain template untuk perangkat mobile agar didapatkan pengalaman pengguna yang lebih baik lagi.
Poin pertama untuk menciptakan desain mobile dengan pengalaman pengguna yang baik adalah pengaturan ukuran lebar layar dan area pandang yang benar untuk masing - masing ukuran layar perangkat.
Area pandang mengontrol bagaimana sebuah laman web / blog akan ditampilkan di layar perangkat seluler. Tujuannya adalah agar browser bisa mendeteksi area pandang dengan benar sesuai dengan lebar layar yang disematkan pada perangkat seluler yang digunakan.
Untuk memfasilitasi perubahan tersebut biasanya digunakan tag meta seperti dibawah berikut yang diletakkan didalam <head> pada template blog.
Tanpa adanya tag meta untuk area pandang ini, perangkat seluler akan merender halaman dengan lebar layar desktop biasa (yang tentunya akan diskalakan agar pas dengan layarnya).
Ini berarti, blog Anda akan ditampilkan secara penuh dan sama persis dengan tampilan desktop/PC di dalam layar seluler.
Bisa Anda bayangkan betapa sulitnya untuk membaca tulisan yang ada dalam halaman tersebut.
Menyetel area pandang akan memberikan kontrol atas lebar halaman dan penskalaan yang tepat pada berbagai ukuran layar perangkat, hal ini akan membuat pengguna menjadi lebih mudah untuk membaca dan mengakses konten dalam halaman yang sedang di buka.
Poin berikutnya yang perlu Anda perhatikan untuk menciptakan desain mobile dengan pengalaman pengguna yang lebih baik adalah dimensi dan ukuran target ketuk pada layar, baik itu teks, tombol, logo, ikon, dan lainnya yang digunakan sebagai link/tautan.
Seperti dilansir oleh developers google.com dalam blognya, ukuran bantalan jari-jari orang dewasa yang digunakan untuk men-tap layar sentuh rata-rata memiliki lebar sekitar 10 mm.
Tautan, tombol, menu navigasi yang disusun terlalu kecil dan rapat dapat menyebabkan kesalahan yang tidak disengaja yang bisa dilakukan oleh pengguna.
Oleh karena itu maka diperlukan jarak dan ukuran yang cukup pada setiap tautan agar pengguna tidak menjadi kesal dan jengkel karena tidak sengaja salah menekan tautan lain disekitarnya.
Jika kesalahan ini dibiarkan terus terjadi, maka secara langsung akan memberikan pengalaman pengguna yang semakin buruk sehingga pengguna cenderung lebih memilih untuk meninggalkan blog Anda.
Google sendiri menyarankan nilai ideal dalam membuat target ketuk layar minimal memiliki dimensi lebar / tinggi sekitar 48 piksel CSS atau sebesar 7 mm, dengan jarak spasi antar target ketuk sekitar 5 mm ( 32 piksel CSS ).
Penggunaan target ketuk sebesar 7 mm dengan spasi sekitar 5 mm, diharapkan dapat mengurangi salah yang tidak disengaja sehingga bisa meningkatkan pengalaman pengguna yang lebih baik pada laman perangkat seluler.
Agar blog kita yang sudah mobile friendly ini bisa memberikan pengalaman pengguna yang lebih baik lagi, maka kita perlu menyesuaikan ukuran huruf yang digunakan dalam desain tersebut.
Untuk mobile friendly, 12px adalah ukuran minimal huruf yang baik untuk digunakan, namun Anda bisa memperbesarnya sesuai dengan kebutuhan. Sedangkan untuk spasi vertikal antar-karakter huruf, Anda bisa menerapkan ukuran minimal sebesar 1.2 em.
Prinsip dasarnya adalah semakin mudah huruf tersebut di baca pada layar smartphone yang kecil maka akan semakin baik.
Gunakanlah tipe huruf yang bersih dan jelas sehingga mudah dibaca, contohnya adalah huruf - huruf berjenis Sans-serif, Arial, Helvetica, Verdana, dan Tahoma.
Pada layar desktop/PC, mouse-over menjadi salah satu cara yang menarik untuk menampilkan isi menu atau sesuatu yang tersembunyi di balik sebuah elemen pada template.
Ketika tanda panah mouse dilayar PC di arahkan ke sebuah elemen blog (menu ,tombol,tautan, dll), secara otomatis akan terjadi perubahan baik bentuk maupun warna pada elemen yang menerapkan mouse-over.
Akan tetapi, mouse-over ini selalu membutuhkan mouse sebagai perantaranya, sedangkan pada layar sentuh seperti tablet atau smartphone, jari pengguna tidak bisa melayang-layang seperti mouse.
Untuk menggantikannya, maka gunakanlah tombol yang bisa ditekan oleh pengguna untuk membuka isi menu lebih dalam yang terdapat didalam tombol tersebut.
Oleh karena itu, menghindari penggunaan mouse-over adalah langkah terbaik yang bisa Anda terapkan pada desain mobile agar pengalaman pengguna menjadi lebih baik lagi.
Masalah terbesar dari pop-ups dan interstitial ini adalah kemunculannya yang datang secara tiba-tiba dan tanpa seijin (keinginan) dari pengguna.
Selain itu, dimensi dari pop-ups dan interstitial lazimnya selalu memenuhi layar pengguna sehingga menutupi seluruh konten pada halaman, baik layar ukuran desktop maupun layar ukuran seluler.
Kondisi ini merupakan bentuk pengalaman yang buruk bagi pengguna karena ruang layar di perangkat seluler sangat terbatas. Banyak kejadian, interstitial dan pop-ups yang menutupi konten halaman tersebut, sering kali sulit untuk ditutup oleh pengguna.
Selain bentuk dan jenis huruf yang mudah untuk dibaca, penggunaan bahasa yang jelas dan deskriptif (menjelaskan) pada setiap tautan ataupun tombol, juga berperan untuk meningkatkan pengalaman pengguna yang lebi baik lagi.
Hindari menggunakan bahasa pada menu navigasi / tombol tautan yang menyebabkan pengguna menjadi bingung dan ragu-ragu saat ingin melanjutkan penjelajahan di blog Anda.
Kesimpulan
Penting untuk di perhatikan bahwa desain mobile pada blog Anda harus bisa menyediakan pengalaman yang baik kepada pengguna kapan saja dan di mana saja mereka membutuhkannya.
Pengguna dapat dengan mudah untuk membedakan laman yang biasa dilihat dari yang belum pernah dilihat berdasarkan cara konsisten yang Anda gunakan dalam mengatur dan menampilkan informasi di blog Anda.
Menciptakan pengalaman pengguna yang lebih baik pada desain template untuk mobile akan memberikan efek yang juga baik untuk menjaga dan meningkatkan jumlah traffik dan kunjungan ke blog Anda.
Demikianlah artikel Tips membuat pengalaman pengguna yang lebih baik pada layout mobile ini bisa saya informasikan, semoga bisa bermanfaat.
Seiring dengan peningkatan jumlah perangkat seluler dan penggunanya, maka sebagai pengelola blog, memiliki blog yang sesuai untuk seluler (mobile-friendly) telah menjadi bagian penting dalam rangka meningkatkan traffik dan kunjungan.
Meskipun telah menerapkan desain yang mobile-friendly, tak jarang desain tersebut masih memiliki dan menyajikan pengalaman pengguna yang kurang baik bahkan cenderung menyusahkan pengguna.
Hal ini menyebabkan potensi besar untuk mendapatkan kunjungan melimpah yang dimiliki blog tersebut menjadi terabaikan.
Pengalaman pengguna yang didapatkan saat menjelajah dan berinteraksi diblog, dapat menentukan apakah blog tersebut bisa disukai dan akan mendapatkan kunjungan kembali atau ia akan di tinggalkan oleh pengunjung.
Sebagai acuan dasar untuk menilai apakah blog mobile-friendly Anda sudah memiliki pengalaman pengguna yang baik, Anda dapat memanfaatkan dua tools gratis yang sudah disediakan oleh Google yaitu :
1. Pagespeed Insight
2. Mobile-friendliness test
Contoh diatas adalah nilai pengalaman pengguna yang saya cek pada tanggal 24 Oktober 2016 lalu. Nilai 100 menandakan bahwa tampilan blog ini memiliki tampilan dengan nilai pengalaman pengguna yang baik jika dilihat melalui perangkat seluler.
Nilai yang di tampilkan pada kolom mobile friendliness dan pengalaman pengguna di tools ini bisa Anda gunakan sebagai acuan saat Anda memperbaiki desain dan layout, agar potensi blog dalam meningkatkan jumlah kunjungan tidak terhalang karena pengalaman pengguna yang buruk.
Semakin rendah nilainya, maka sudah saatnya Anda mengevaluasi tampilan untuk seluler pada blog Anda dan segera memperbaikinya.
Berikut beberapa tips yang perlu Anda perhatikan saat memperbaiki dan membuat desain template untuk perangkat mobile agar didapatkan pengalaman pengguna yang lebih baik lagi.
1. Atur ukuran lebar layar, area pandang, dan konten dengan benar
Poin pertama untuk menciptakan desain mobile dengan pengalaman pengguna yang baik adalah pengaturan ukuran lebar layar dan area pandang yang benar untuk masing - masing ukuran layar perangkat.
Area pandang mengontrol bagaimana sebuah laman web / blog akan ditampilkan di layar perangkat seluler. Tujuannya adalah agar browser bisa mendeteksi area pandang dengan benar sesuai dengan lebar layar yang disematkan pada perangkat seluler yang digunakan.
Untuk memfasilitasi perubahan tersebut biasanya digunakan tag meta seperti dibawah berikut yang diletakkan didalam <head> pada template blog.
<meta name=viewport content="width=device-width, initial-scale=1">
Tanpa adanya tag meta untuk area pandang ini, perangkat seluler akan merender halaman dengan lebar layar desktop biasa (yang tentunya akan diskalakan agar pas dengan layarnya).
Ini berarti, blog Anda akan ditampilkan secara penuh dan sama persis dengan tampilan desktop/PC di dalam layar seluler.
Bisa Anda bayangkan betapa sulitnya untuk membaca tulisan yang ada dalam halaman tersebut.
Menyetel area pandang akan memberikan kontrol atas lebar halaman dan penskalaan yang tepat pada berbagai ukuran layar perangkat, hal ini akan membuat pengguna menjadi lebih mudah untuk membaca dan mengakses konten dalam halaman yang sedang di buka.
2. Buatlah target ketuk lebih besar agar mudah di tekan
Poin berikutnya yang perlu Anda perhatikan untuk menciptakan desain mobile dengan pengalaman pengguna yang lebih baik adalah dimensi dan ukuran target ketuk pada layar, baik itu teks, tombol, logo, ikon, dan lainnya yang digunakan sebagai link/tautan.
Seperti dilansir oleh developers google.com dalam blognya, ukuran bantalan jari-jari orang dewasa yang digunakan untuk men-tap layar sentuh rata-rata memiliki lebar sekitar 10 mm.
Tautan, tombol, menu navigasi yang disusun terlalu kecil dan rapat dapat menyebabkan kesalahan yang tidak disengaja yang bisa dilakukan oleh pengguna.
Oleh karena itu maka diperlukan jarak dan ukuran yang cukup pada setiap tautan agar pengguna tidak menjadi kesal dan jengkel karena tidak sengaja salah menekan tautan lain disekitarnya.
Jika kesalahan ini dibiarkan terus terjadi, maka secara langsung akan memberikan pengalaman pengguna yang semakin buruk sehingga pengguna cenderung lebih memilih untuk meninggalkan blog Anda.
Google sendiri menyarankan nilai ideal dalam membuat target ketuk layar minimal memiliki dimensi lebar / tinggi sekitar 48 piksel CSS atau sebesar 7 mm, dengan jarak spasi antar target ketuk sekitar 5 mm ( 32 piksel CSS ).
Penggunaan target ketuk sebesar 7 mm dengan spasi sekitar 5 mm, diharapkan dapat mengurangi salah yang tidak disengaja sehingga bisa meningkatkan pengalaman pengguna yang lebih baik pada laman perangkat seluler.
3. Gunakan font dengan ukuran dan bentuk yang mudah di baca di layar seluler
Agar blog kita yang sudah mobile friendly ini bisa memberikan pengalaman pengguna yang lebih baik lagi, maka kita perlu menyesuaikan ukuran huruf yang digunakan dalam desain tersebut.
Untuk mobile friendly, 12px adalah ukuran minimal huruf yang baik untuk digunakan, namun Anda bisa memperbesarnya sesuai dengan kebutuhan. Sedangkan untuk spasi vertikal antar-karakter huruf, Anda bisa menerapkan ukuran minimal sebesar 1.2 em.
Prinsip dasarnya adalah semakin mudah huruf tersebut di baca pada layar smartphone yang kecil maka akan semakin baik.
Gunakanlah tipe huruf yang bersih dan jelas sehingga mudah dibaca, contohnya adalah huruf - huruf berjenis Sans-serif, Arial, Helvetica, Verdana, dan Tahoma.
4. Hindari penggunaan mouse-over pada desain
Pada layar desktop/PC, mouse-over menjadi salah satu cara yang menarik untuk menampilkan isi menu atau sesuatu yang tersembunyi di balik sebuah elemen pada template.
Ketika tanda panah mouse dilayar PC di arahkan ke sebuah elemen blog (menu ,tombol,tautan, dll), secara otomatis akan terjadi perubahan baik bentuk maupun warna pada elemen yang menerapkan mouse-over.
Akan tetapi, mouse-over ini selalu membutuhkan mouse sebagai perantaranya, sedangkan pada layar sentuh seperti tablet atau smartphone, jari pengguna tidak bisa melayang-layang seperti mouse.
Untuk menggantikannya, maka gunakanlah tombol yang bisa ditekan oleh pengguna untuk membuka isi menu lebih dalam yang terdapat didalam tombol tersebut.
Oleh karena itu, menghindari penggunaan mouse-over adalah langkah terbaik yang bisa Anda terapkan pada desain mobile agar pengalaman pengguna menjadi lebih baik lagi.
5. Jangan gunakan pop-ups maupun interstitial
Masalah terbesar dari pop-ups dan interstitial ini adalah kemunculannya yang datang secara tiba-tiba dan tanpa seijin (keinginan) dari pengguna.
Selain itu, dimensi dari pop-ups dan interstitial lazimnya selalu memenuhi layar pengguna sehingga menutupi seluruh konten pada halaman, baik layar ukuran desktop maupun layar ukuran seluler.
Kondisi ini merupakan bentuk pengalaman yang buruk bagi pengguna karena ruang layar di perangkat seluler sangat terbatas. Banyak kejadian, interstitial dan pop-ups yang menutupi konten halaman tersebut, sering kali sulit untuk ditutup oleh pengguna.
6. Gunakan bahasa yang jelas dan deskriptif pada setiap tombol yang berisi tautan.
Selain bentuk dan jenis huruf yang mudah untuk dibaca, penggunaan bahasa yang jelas dan deskriptif (menjelaskan) pada setiap tautan ataupun tombol, juga berperan untuk meningkatkan pengalaman pengguna yang lebi baik lagi.
Hindari menggunakan bahasa pada menu navigasi / tombol tautan yang menyebabkan pengguna menjadi bingung dan ragu-ragu saat ingin melanjutkan penjelajahan di blog Anda.
Kesimpulan
Penting untuk di perhatikan bahwa desain mobile pada blog Anda harus bisa menyediakan pengalaman yang baik kepada pengguna kapan saja dan di mana saja mereka membutuhkannya.
Pengguna dapat dengan mudah untuk membedakan laman yang biasa dilihat dari yang belum pernah dilihat berdasarkan cara konsisten yang Anda gunakan dalam mengatur dan menampilkan informasi di blog Anda.
Menciptakan pengalaman pengguna yang lebih baik pada desain template untuk mobile akan memberikan efek yang juga baik untuk menjaga dan meningkatkan jumlah traffik dan kunjungan ke blog Anda.
Demikianlah artikel Tips membuat pengalaman pengguna yang lebih baik pada layout mobile ini bisa saya informasikan, semoga bisa bermanfaat.
Daftar isi [ Lihat ]