Isi
- Hover sudah mati
- Hover panjang umur
- Apa yang harus dilakukan seorang desainer?
- Pola desain alternatif
- Semoga Anda hidup di masa-masa menarik
- Suka ini? Baca ini!
Ini dimulai dengan percakapan tiga tahun lalu saat iPad keluar.
Direktur produk untuk pengecer online Inggris yang besar berkata, "Tentu saja kami harus memperbaiki halaman pemilihan produk. Ini bergantung pada hover untuk menunjukkan detail penting tentang produk, pengguna iPad tidak akan dapat melihatnya. ”
Menggunakan hover, isyarat visual untuk menunjukkan kemungkinan interaksi atau untuk menunjukkan informasi lebih lanjut, tidak lagi menjadi pendekatan untuk iPad dan pengguna layar sentuh lainnya.
Apa yang sebelumnya menjadi alat yang andal dalam perangkat perancang interaksi tiba-tiba kehilangan keunggulannya.
Hover sudah mati
Maju cepat ke 2013. Penjualan untuk perangkat layar sentuh telah meningkat secara signifikan. Mereka sekarang diharapkan melebihi jumlah penjualan komputer desktop dan laptop tradisional pada tahun 2014.
Windows 8 telah mengambil antarmuka Metro dari perangkat seluler. Mac OSX semakin mengambil isyarat dari sistem operasi seluler iOS. Tidak ada OS yang sepenuhnya merangkul sentuhan tetapi keduanya telah mulai beralih dari pendekatan titik dan klik ke salah satu yang memiliki target dan tombol berbasis klik yang besar.
Antarmuka layar sentuh mengatur harapan. Gerilya atau tidak, ada keinginan untuk layar sentuh di perangkat.
Menggulir menu, berpindah di antara opsi dengan tombol kursor atau dengan kontrol suara, smart TV, konsol game, Kacamata Google, dan peralatan internet lainnya tidak bergantung pada penunjuk mouse. Hover tidak punya tempat di dunia ini.
Trennya jelas; titik dan klik menurun, klik (baik dengan jari, stylus, pintasan keyboard, remote control, kontrol suara) meningkat. Kami sebagai desainer tidak bisa lagi mengandalkan pointer yang digunakan. Oleh karena itu, kami tidak dapat mengandalkan keberadaan hover di web.
Menggunakan hover untuk menampilkan lebih banyak informasi tentang hyperlink, baik untuk memberikan konteks atau untuk mengaktifkan menu drop-down di desktop telah menjadi praktik yang baik selama bertahun-tahun. Perangkat layar sentuh tidak menangani hover dengan baik atau bahkan sama sekali.
Apple telah mencoba menerapkan hover di iOS. Klik sekali untuk mengaktifkan hover, klik lagi untuk mengaktifkan link, tapi sepertinya itu bukan pendekatan terbaik. Atau dalam kasus Android, klik, lihat perilaku hover saat browser memuat halaman hyperlink.
Arahkan kursor juga mengasumsikan kita menggunakan mouse, menggunakan: fokus bersama hover berarti kita dapat menangani pengguna yang tidak dapat, mungkin karena alasan aksesibilitas, menggunakan mouse.
Jika kami mengembangkan situs web desain responsif, penggunaan hover tampak seperti kutukan. Kami harus mengembangkan pengalaman yang akan berfungsi di perangkat apa pun, desainnya harus perangkat agnostik.
Hover panjang umur
Ini telah menjadi pokok desain selama bertahun-tahun. Menggunakan hover untuk menampilkan item dapat diklik, untuk dengan cepat mengungkapkan informasi yang berguna dan, tentu saja, untuk mengarahkan menu navigasi drop down.
Desktop, antarmuka non-sentuh masih merupakan cara utama untuk mengakses web setidaknya di AS dan Eropa dengan 87 persen penggunaan web di desktop.
Arahkan kursor dapat digunakan untuk sebagian besar audiens yang, selama bertahun-tahun, telah menggunakannya.
Pendekatan standar selama bertahun-tahun ketika mendesain menu navigasi drop-down telah menunjukkan opsi pada hover untuk membantu kemudahan ditemukan dan meniru cara menu berperilaku di Windows.
Mereka adalah tempat umum di situs web seperti Best Buy, Marks and Spencer dan lainnya.
Kita bisa mengubah pendekatannya. Mengaktifkan tarik-turun saat mengeklik daripada mengarahkan kursor. Tapi rasanya tidak benar, ini bertentangan dengan kemampuan untuk dapat ditemukan yang melekat dengan hover. Anda meminta pengguna untuk menguji apa yang akan terjadi ketika mereka mengeklik opsi di tingkat atas menu dan mereka akan mengatakan bahwa mereka berharap akan dibawa ke laman yang cocok dengan opsi itu, bukan diperlihatkan menu tarik-turun.
Arahkan kursor juga digunakan untuk menunjukkan kontrol yang mungkin untuk elemen tertentu. Misalnya, saat mengarahkan kursor ke nama tautan dokumen akan menampilkan opsi hapus atau ganti nama, mengarahkan kursor ke peringkat bintang akan menunjukkan cara menambahkan peringkat. Daripada membombardir pengguna dengan serangkaian opsi yang sama untuk setiap item dalam daftar, kami mengarahkan kursor untuk menghilangkan gangguan visual. Jenis pola ini telah digunakan selama bertahun-tahun dan pengguna kami terbiasa dengannya.
Mengapa merampok metode interaksi yang sangat berguna dan seringkali merupakan ekspektasi bagi sebagian besar pengguna?
Apa yang harus dilakukan seorang desainer?
Saat ini, kami berada di titik balik. Apapun yang kita lakukan akan salah, baik dalam jangka pendek maupun jangka panjang.
Melihat ke masa depan dan tidak menggunakan hover akan menyebabkan masalah bagi sebagian besar pengguna saat ini atau menyebabkan masalah pada basis pengguna layar sentuh yang semakin meningkat. Menawarkan interaksi hover hanya kepada mereka yang menggunakan desktop / laptop yang dapat kami anggap sebagai peningkatan progresif.
Tapi bagaimana dengan perangkat hybrid seperti Microsoft Surface yang menawarkan sentuhan dan mouse / keyboard? Bisakah kita mengetahui secara akurat metode masukan apa yang digunakan?
Kueri media sederhana tidak cukup untuk mengetahui interaksi apa yang mungkin dilakukan. Ada proposal untuk mengidentifikasi apakah agen pengguna dapat menggunakan hover yang diajukan oleh W3C, tetapi saat ini di tahun 2013 kami tidak dapat memastikan apakah seseorang menggunakan mouse atau jari atau kombinasi keduanya.
Ethan Marcotte dalam artikel Desain Responsif aslinya mengatakan bahwa "kami merancang pekerjaan yang dimaksudkan untuk dilihat di sepanjang gradien pengalaman yang berbeda."
Menawarkan gaya interaksi yang berbeda tergantung pada perangkat terasa seperti hari-hari gelap penargetan browser. Kami ingin desain kami menjadi perangkat agnostik. Jika kami membangun situs web, kami ingin melakukan seminimal mungkin untuk memastikannya berfungsi di seluruh perangkat. Kami dapat menyesuaikan desain dengan ukuran berbeda untuk memenuhi kebutuhan, tetapi mengubah gaya interaksi dengan perangkat tampak seperti pemikiran kuno.
Pola desain alternatif
Kita sebagai desainer perlu mencari alternatif pendekatan desain.
Brad Frost telah membahas kemungkinan pola navigasi yang dapat kita gunakan dalam desain responsif. Namun, seperti yang dikatakan Frost, banyak di antaranya tidak hanya rumit tetapi juga cara baru dalam berinteraksi, yang mengharuskan pengguna mempelajari cara baru dalam melakukan sesuatu.
Setiap opsi yang disarankan sesuai dengan kumpulan item menu dan audiens yang berbeda. Merekomendasikan satu pendekatan karena masa depan menu web tidak mungkin dilakukan. Menu slide-in-from-the-left bergaya Facebook berfungsi dalam konteks situs web di mana fokus utama pengguna adalah aliran posting di tengah layar. Menavigasi ke halaman lain adalah tindakan sekunder. Pendekatan ini tidak akan berfungsi untuk situs kaya konten seperti surat kabar yang membutuhkan interaksi dengan menu untuk menemukan artikel yang dicari. Meskipun rancangan ulang New York Time yang diusulkan mengurangi fokus pada navigasi.
Pendekatan yang bijaksana adalah memilih setidaknya dua alternatif yang sesuai dan melakukan penelitian pengguna untuk masing-masing, memilih salah satu yang paling sesuai untuk audiens. Pengujian multivalen atau A | B juga dapat digunakan untuk membantu memilih pendekatan terbaik.
Seperti halnya navigasi web, tidak ada pola tunggal yang akan berfungsi di semua situasi. Pilih 2 hingga 3 opsi, lalu desain, teliti, dan perbaiki.
Menggunakan arahkan kursor untuk menampilkan kontrol tidak membutuhkan perubahan pendekatan yang dramatis. Mengaktifkan kontrol ini dengan satu klik akan berfungsi pada perangkat layar sentuh tetapi tidak langsung terlihat jelas bahwa klik akan menampilkan lebih banyak informasi daripada sekadar membawa pengguna ke halaman lain.
Kita perlu memastikan elemen tersebut memiliki sesuatu yang menunjukkan bahwa suatu tindakan mungkin dilakukan. Setiap elemen membutuhkan biaya. Kami biasa melakukan ini untuk tautan, garis bawah, atau warna berbeda, tetapi, untuk tampilan berbasis klik, kami tidak memiliki pendekatan visual yang sama.
Ada opsi seperti menggunakan ikon. Mengembangkan ikon yang menyampaikan pesan dengan mengklik di sini akan menunjukkan kepada Anda lebih banyak opsi merupakan sebuah tantangan. Kita dapat menggunakan ikon yang lebih abstrak seperti roda penggerak tetapi tidak juga menyampaikan makna. Kami dapat mencoba dan menentukan ikon yang menunjukkan bahwa mengeklik akan menampilkan lebih banyak tindakan, tetapi kami perlu mengedukasi pengguna tentang fungsi di balik ikon tersebut.
Ini telah dicoba dengan ikon Bagikan Ini. Ikonnya banyak situs, tetapi pemahaman maknanya masih relatif rendah.
HTML memiliki tag yang dapat kita gunakan untuk mendefinisikan arti dari singkatan atau akronim tertutup. Ini belum cukup digunakan sehingga garis bawah yang putus-putus yang hasilnya dipahami secara luas oleh pengguna.
Apa pun pendekatan yang kami gunakan untuk menunjukkan kontrol klik untuk tampilkan akan membutuhkan waktu sebelum dipahami secara luas. Seperti yang dikatakan Brandon Harris dari Wikipedia baru-baru ini ketika berbicara tentang desain ulang, "Bisakah kita melatih kembali setengah miliar pengguna?"
Kami juga membutuhkan cara alternatif untuk mengungkapkan informasi secara progresif. Kami tidak dapat lagi memastikan bahwa mengarahkan penunjuk mouse ke atas tautan akan menampilkan detail lebih lanjut. Untungnya di sini kami memiliki pendekatan yang ada untuk menawarkan kemampuan.
Menampilkan informasi yang diperluas berdasarkan klik, menggunakan isyarat visual yang berbeda seperti tanda sisipan kanan atau ikon plus untuk menunjukkan perluasan telah dicoba dan diuji. Klik dan lompat ke bagian halaman, seperti yang terlihat di kerangka kerja web Bootstrap adalah alternatif. Kami juga dapat menggunakan ikon informasi "berbasis-i", tetapi menggunakannya secara berlebihan dapat menyebabkan gangguan visual yang berlebihan.
Semoga Anda hidup di masa-masa menarik
Seperti yang dikatakan Tim Cook dari Apple tahun lalu:
“Selama kuartal terakhir, menurut saya, hanya dua tahun setelah kami mengirimkan iPad awal, kami telah menjual 67 juta. Dan untuk menempatkannya dalam beberapa konteks, kami membutuhkan waktu 24 tahun untuk menjual Mac sebanyak itu, dan lima tahun untuk banyak iPod dan lebih dari tiga tahun untuk banyak iPhone. ”
Apapun yang terjadi, itu akan terjadi dengan cepat. Kami tidak dapat mengandalkan gaya interaksi yang kami gunakan dua tahun lalu untuk bekerja di dunia yang semakin berbasis sentuhan.
Saya ingin Anda membagikan pengalaman dan pemikiran Anda di kolom komentar. Apa yang harus kita lakukan desainer?
Seorang ahli saraf yang sedang memulihkan diri, Joe memulai karir UX 10 tahun yang lalu. Sebagai direktur pengalaman pengguna, Joe mengepalai tim konsultan UX. Dia berspesialisasi dalam merancang setiap aspek pengalaman pengguna dari penelitian awal hingga mengembangkan strategi online hingga menghasilkan gambar rangka dan mengelola tim desain. www.cxpartners.co.uk/
Suka ini? Baca ini!
- Panduan utama untuk desain logo
- Font web favorit kami - dan harganya tidak sepeser pun
- Temukan apa yang selanjutnya untuk Augmented Reality
