Ingat hari-hari di mana mengklik mouse adalah pemicu interaksi yang paling banyak digunakan pada situs atau aplikasi? Masa itu sudah berlalu.

Ketika Apple memperkenalkan iPhone untuk pertama kalinya, teknologi multi-touch menjadi mainstream dan pengguna belajar bagaimana mereka tidak hanya bisa menunjuk atau menyentuh interface, tetapi juga bisa melakukan pinch, spread, dan swipe. Gestur menjadi ‘klik yang baru’.

Hari ini, kesuksesan mobile UI ditentukan oleh seberapa efektif ia menggunakan gestur.

Bagaimana Memilih Gestur yang Baik

Dalam menggabungkan gestur ke dalam UI, sangatlah penting untuk mengetahui target marketmu dan aplikasi lain yang kemungkinan digunakan juga oleh mereka. Cobalah terapkan jenis gestur yang sama pada aplikasimu. Dengan demikian, kamu tidak hanya mengoptimalkan UI-mu berdasarkan perilaku target market, tetapi juga mendesain pendekatan yang lebih nyaman bagi pengguna sejak awal.

Mengajarkan Gestur

Gestur adalah sebuah keharusan di setiap mobile app tetapi memastikan bahwa gestur tersebut jelas dimengerti pengguna selalu menjadi sebuah tantangan. Layar sentuh menyediakan banyak kesempatan untuk menggunakan gestur natural seperti tap, swipe dan pinch untuk melakukan sesuatu, namun berbeda dengan kontrol grafis UI, interaksi berbasis gestur seringkali tersembunyi dari pengguna. Jadi, kecuali pengguna memiliki pengalaman sebelumnya bahwa sebuah gestur dapat dilakukan, mereka tidak akan mencobanya.

Karena itu, desain agar gestur tersebut ditemukan sangatlah penting. Kamu perlu yakin bahwa petunjuk yang tepat sudah tersedia - tampilan visual yang membantu pengguna dengan mudah menemukan cara berinteraksi dengan sebuah interface.

Hindari Tutorial dan Panduan Selama Onboarding

Tutorial dan panduan cukup populer untuk aplikasi berbasis gestur. Memasukkan tutorial ke dalam aplikasimu seringkali berarti memberikan instruksi kepada pengguna untuk menjelaskan interface. Bagaimanapun, tutorial UI bukanlah cara paling elegan untuk menjelaskan fungsi inti dari aplikasi. Masalah utama dengan tutorial di awal adalah pengguna perlu mengingat semua cara baru menggunakan aplikasi sebelum mereka mulai menggunakannya. Terlalu banyak informasi yang diberikan bersamaan dapat memicu kebingungan. Misalnya, aplikasi Clear mulai dengan tutorial 7 halaman yang wajib diikuti dan pengguna perlu dengan sabar membaca semua informasi dan mengingatnya. Itu adalah desain yang buruk karena cara tersebut membuat pengguna berusaha keras di awal sebelum bahkan mencoba menggunakan aplikasi.

1

Mengedukasi dalam Konteks Penggunaan Action

Untuk mengajarkan penggunaan UI kepada pengguna, saya sarankan untuk mengedukasi dalam konteks action (saat pengguna perlu menggunakannya). Untuk mengajarkan gestur baru pada pengguna, kamu perlu mulai dengan perlahan. Dengan beberapa iterasi, instruksi dapat diubah menjadi pembelajaran secara bertahap. Gunakan just in time tips dan fokuslah menjelaskan satu interaksi daripada mencoba menjelaskan semua action yang mungkin dilakukan pada UI tersebut. Berikan hint untuk gestur-gestur dengan menyediakan petunjuk yang jelas dan kontekstual.

Di bawah ini, kamu bisa melihat layar edukasi gestur pada Youtube app di Android. App ini memiliki interaksi berbasis gestur, tetapi tidak menggunakan tutorial untuk memberikan instruksi kepada pengguna. Ia justru menggunakan hints yang muncul ketika pengguna baru pertama kali menggunakan aplikasi tersebut, satu per satu sambil pengguna mencapai bagian aplikasi yang sesuai. Teknik ini didasarkan pada text commands yang mendorong pengguna untuk melakukan gestur, kemudian menjelaskan hasil interaksinya dengan deskripsi singkat dan jelas.

2

Gunakan Animasi untuk Mengkomunikasikan Gestur

Gestur, untuk berfungsi secara maksimal, membutuhkan animasi. Sebagai desainer, kamu bisa menggunakan animasi untuk menyampaikan informasi tentang actions yang tersedia. Contohnya, untuk membuat pengguna sadar bahwa mereka bisa berinteraksi dengan elemen tertentu, kamu bisa menciptakan text command di elemen interaktif tersebut dan menganimasi hasil interaksi seperti yang terlihat pada contoh di bawah ini.

3

Ada tiga teknik populer dalam mengedukasi pengguna, berdasarkan penggunaan animasi. Pertama, hint motion. Hint motion, atau hint visual yang dianimasikan, menunjukkan preview bagaimana berinteraksi dengan sebuah elemen ketika melakukan action tertentu. Teknik ini bertujuan menciptakan asosiasi antara gestur dan action yang dipicunya. Contohnya, mekanisme game Puding Monsters sepenuhnya berbasis gestur, namun mereka dapat membuat pengguna memahami ide dasar tentang apa yang harus mereka lakukan tanpa perlu menebak-nebak. Animasi menyampaikan informasi tentang keberfungsian - sebuah skenario ditampilkan dengan animasi dan pengguna akan dengan segera mengerti apa yang perlu mereka lakukan.

Teknik kedua adalah content teases. Content teases adalah petunjuk visual halus yang mengindikasi apa yang dapat dilakukan oleh pengguna. Contoh di bawah mendemonstrasikan sebuah content tease untuk beberapa kartu - ia menunjukkan bahwa ada kartu-kartu lain yang tersedia di balik kartu yang saat ini terlihat dan ini memperjelas bahwa pengguna dapat melakukan swipe.

Teknik terakhir adalah affordance. Kamu bisa memberikan beberapa elemen pada UI-mu affordance yang tinggi untuk menunjukkan fitur-fitur yang tersedia pada interface tersebut, dan menggunakan bounces atau pulses sebagai indikator adanya gestur yang tersedia. Contoh penggunaan teknik ini dapat ditemukan di Apple iOS. Ketika pengguna menekan ikon kamera, lock screen melakukan bounce, menunjukkan aplikasi kamera di bawahnya.

Kesimpulan

Meskipun kebanyakan gestur sentuh tidak dapat dilihat, ada banyak teknik desain yang membantu pengguna memahami gestur-gestur yang dapat dilakukan. Just in time tips, petunjuk berupa animasi dan content teases adalah beberapa cara menampilkan gestur-gestur tersembunyi.

Ditulis oleh: Nick Babich
Sumber: Webdesignerdepot
Image: Unsplash