Memahami Gestur untuk Desain UI

Mengetuk, menggesek, menyeret, menekan lama – ini hanyalah beberapa gerakan yang mendominasi pengalaman digital kami. Layar sentuh iPhone mengarusutamakan gerakan seluler bertahun-tahun yang lalu, dan kami belum pernah melihat ke belakang sejak itu.

Gestur memengaruhi cara kita berinteraksi dengan antarmuka, termasuk ponsel, laptop, dan iPad. Namun kita tidak perlu mencari jauh-jauh untuk menemukan antarmuka gestur di luar perangkat kerja dan hiburan kita. Tidak jarang menggunakan gerakan saat berinteraksi dengan layar mobil atau wastafel kamar mandi.

Antarmuka Pengguna Alami (NUI) sangat alami bagi pengguna sehingga antarmuka terasa, dan terkadang, tidak terlihat, seperti antarmuka layar sentuh. Beberapa NUI bahkan menggunakan kontrol gerakan, yang memungkinkan pengguna untuk berinteraksi dengan antarmuka tanpa kontak fisik langsung. BMW baru-baru ini merilis fitur kontrol gerakan yang memberi pengguna kontrol tanpa sentuhan atas volume mobil, panggilan, dan lainnya.

Gestur semakin umum dalam desain antarmuka pengguna dan memainkan peran yang semakin kompleks dalam kehidupan kita sehari-hari.

Seiring kemajuan teknologi, desainer dan bisnis UX dan UI perlu beradaptasi. Anda tidak harus mengetahui semua seluk-beluk teknologi atau memiliki pengetahuan mendalam tentang kecerdasan komputer. Namun, Anda harus memiliki pemahaman dasar tentang kemampuan, fungsi, dan praktik desain terbaik untuk teknologi gerakan.

Apa yang Membuat Gestur Baik?

Jadi, apa itu gestur?

Gestur adalah cara berkomunikasi. Kami telah lama menggunakan gerakan tangan dan anggukan kepala untuk membantu menyampaikan makna, dan sekarang, gerakan berperan dalam berkomunikasi dengan antarmuka pengguna.

Gerakan yang baik memberikan komunikasi yang efektif dan efisien yang selaras dengan cara berpikir kita. Pikiran dan pengetahuan kita memengaruhi cara kita berbicara, dan itu memengaruhi penggunaan gestur kita, terutama dalam desain UI. Pertimbangkan betapa lebih mudahnya generasi muda yang tumbuh di sekitar teknologi modern untuk memahami gerakan – atau bagaimana tindakan menggesek meniru mendorong atau menghapus sesuatu. Itu sebabnya memahami pengguna Anda sangat penting, bahkan dalam desain gerakan.

Gerakan melintasi penghalang antara alam fisik dan digital, memungkinkan kita untuk berinteraksi dengan media digital dengan tubuh kita. Dalam beberapa hal, ini membuat penggunaan aplikasi digital lebih menyenangkan, tetapi ini tidak cukup untuk membuat gerakan menjadi bagus.

Gerakan gerakan yang baik meningkatkan kegunaan dengan membuat aplikasi lebih mudah digunakan dalam semua konteks. Gerakan yang dirancang dengan baik memiliki kurva belajar yang lebih pendek karena terasa alami dan mudah dipahami. Mengutip Bill Gates:

“Sampai sekarang, kami selalu harus beradaptasi dengan batas teknologi dan menyesuaikan cara kami bekerja dengan komputer dengan seperangkat konvensi dan prosedur yang sewenang-wenang. Dengan NUI, perangkat komputasi akan beradaptasi dengan kebutuhan dan preferensi kita untuk pertama kalinya dan manusia akan mulai menggunakan teknologi dengan cara apa pun yang paling nyaman dan alami bagi kita.”

Manfaat Teknologi Isyarat

Penggunaan antarmuka gestural yang luas disebabkan oleh banyak manfaat yang menyertainya. Tiga manfaat paling signifikan dari gerakan adalah antarmuka yang lebih bersih, kemudahan penggunaan, dan penyelesaian tugas yang lebih baik.

1. Antarmuka yang Lebih Bersih

Manusia mengkonsumsi lebih banyak konten daripada sebelumnya, bisnis menggunakan lebih banyak data dan teknologi terus menyediakan lebih banyak layanan. Dengan peningkatan konten ini, antarmuka dan tampilan mudah terlihat berantakan. Desainer dapat menggunakan gerakan untuk mengurangi jumlah elemen visual, seperti tombol, yang menghabiskan ruang.

2. Kemudahan Penggunaan

Seperti dibahas di atas, interaksi menjadi lebih alami dengan antarmuka berbasis gerakan. Kemudahan gerakan tangan sederhana memungkinkan kita untuk menggunakan teknologi dengan sedikit usaha pada kecepatan maksimum.

3. Penyelesaian Tugas yang Lebih Baik

Tingkat penyelesaian tugas dan tingkat konversi meningkat ketika pengguna harus menyelesaikan tugas lebih sedikit. Anda lebih mungkin untuk menyelesaikan tugas ketika membutuhkan lebih sedikit usaha. Antarmuka pengguna berbasis gerakan memanfaatkan ini dengan membuat tugas menjadi sederhana dan cepat. Mereka bahkan dapat mengurangi jumlah langkah yang diperlukan untuk menyelesaikan tugas.

Jenis Gerakan dalam Desain UI

Desain untuk sentuhan telah mengarah pada pengembangan banyak jenis gerakan, yang paling umum adalah mengetuk dan menggesek. Ada tiga kategori gestur:

1. Gerakan navigasi (untuk menavigasi)
2. Gerakan tindakan (untuk mengambil tindakan)
3. Transform gerakan (untuk memanipulasi konten)

Berikut ini adalah beberapa gerakan paling umum di seluruh antarmuka yang semua (atau hampir semua) pengguna kenal – bahkan jika tidak secara sadar. Kami menyebutkan layar, tetapi Anda dapat mengganti layar dengan touchpad atau antarmuka gerakan lainnya.

Mengetuk

Gerakan ketuk adalah saat Anda mengetuk layar dengan satu jari untuk membuka atau memilih sesuatu, seperti aplikasi atau halaman. Berikut tipnya: Rancang elemen antarmuka yang dapat diklik sehingga seluruh kotak atau baris dapat diklik – bukan hanya teks. Memberi pengguna lebih banyak ruang akan meningkatkan kegunaan.

Ketuk dua kali

Ketuk dua kali adalah ketika Anda mengetuk layar dua kali berturut-turut secara berurutan. Banyak aplikasi menggunakan gerakan ini untuk memperbesar, tetapi di Instagram, pengguna dapat mengetuk dua kali foto untuk menyukainya.

Geser

Menggesek melibatkan menggerakkan jari Anda melintasi layar dalam satu arah, menyentuh ke bawah di satu sisi dan mengangkat jari Anda di sisi lain. Gerakan menggesek sering digunakan untuk menggulir atau beralih antar halaman. Tinder menggunakan menggesek ke kanan untuk mencocokkan dengan profil dan menggesek ke kiri untuk melewati satu.

Gesek Beberapa Jari

Anda juga dapat melakukan gerakan menggesek dengan dua atau tiga jari. Ini adalah fitur umum pada touchpad laptop yang menggunakan gesekan dua dan tiga jari untuk tindakan yang berbeda.

Menyeret

Menyeret menggunakan gerakan umum yang sama seperti menggesek, hanya Anda menggerakkan jari lebih lambat dan tidak mengangkatnya sampai Anda menarik objek ke tempat yang Anda inginkan. Anda menggunakan menyeret untuk memindahkan item ke lokasi baru, seperti saat mengatur ulang aplikasi ponsel Anda.

Melemparkan

Seperti menggesek, gerakan melempar adalah saat Anda menggerakkan jari melintasi layar dengan kecepatan tinggi. Tidak seperti seret, jari Anda tidak tetap bersentuhan dengan elemen. Teman kencan sering digunakan untuk menghilangkan sesuatu dari pandangan.

Tekan lama

Menekan lama adalah saat Anda mengetuk layar tetapi menahan jari Anda lebih lama dari biasanya. Menekan lama membuka opsi menu, seperti saat Anda menahan teks untuk menyalinnya atau menahan aplikasi untuk menghapusnya.

Mencubit

Salah satu dari banyak gerakan dua jari, mencubit adalah ketika Anda memegang dua jari terpisah di layar dan kemudian menyeretnya ke arah satu sama lain dalam gerakan mencubit. Gerakan mencubit sering digunakan untuk memperkecil kembali setelah memperbesar. Kadang-kadang mereka menampilkan tampilan semua layar Anda yang terbuka untuk tujuan navigasi.

Pinch-Open atau Spread

Gerakan cubit-membuka atau menyebar adalah kebalikan dari cubitan. Anda memegang kedua jari Anda rapat-rapat dan kemudian merentangkannya. Menyebar, seperti mengetuk dua kali, umumnya digunakan untuk memperbesar.

Rotasi

Untuk melakukan rotasi, tekan pada layar dengan dua jari dan putar dengan gerakan melingkar. Contoh rotasi terbaik adalah saat Anda memutar peta di Google Maps untuk melihat apa yang ada di sekitar Anda.

Mendesain Gerakan 101

Gunakan Apa yang Orang Tahu

Isyarat telah ada untuk sementara waktu, jadi untuk sebagian besar isyarat, ada pedoman umum.

Dan dalam kebanyakan kasus, ada aturan yang ingin Anda ikuti saat mendesain gerakan untuk antarmuka. Saat membuat aplikasi, misalnya, Anda harus mempertimbangkan antarmuka mana yang akan digunakan pengguna untuk aplikasi Anda. Ada kemungkinan pengguna akan mengunduh aplikasi Anda di ponsel Android dan Apple, yang keduanya sudah menggunakan gerakan khusus produk. Anda harus mengevaluasi gerakan antarmuka produk Anda dan memutuskan bagaimana Anda akan memanfaatkannya atau apakah itu layak untuk menambahkan gerakan yang tidak familiar bagi pengguna.

Berikut adalah beberapa panduan gerakan dan isyarat yang berguna untuk antarmuka produk populer.

• Pedoman Gerakan Google
• Pedoman Gerakan Microsoft
• Pedoman Gerakan Apple
• Pedoman Gerakan Android

Saat merancang antarmuka pengguna berbasis isyarat, praktik yang baik adalah tetap berpegang pada apa yang diketahui pengguna. Anda bisa menjadi kreatif jika diperlukan, tetapi tingkat konsistensi antara gerakan dan antarmuka membantu menjaganya tetap intuitif bagi pengguna, meningkatkan kegunaan produk Anda.

Jika menurut Anda ada gestur baru, Anda perlu mengujinya secara ekstensif sebelum menerapkannya. Anda akan melakukan serangkaian metode penelitian pengguna untuk menguji kegunaan, efektivitas, kurva pembelajaran, dan kepuasan pengguna dengan isyarat sebelum merilisnya ke publik.

Anda memiliki opsi untuk menggunakan kembali isyarat terkenal untuk tujuan yang berbeda, tetapi sekali lagi, Anda harus menguji keefektifan strategi ini terlebih dahulu. Manfaatnya di sini adalah pengguna setidaknya terbiasa dengan gerakan tersebut.

Ambil, misalnya, Instagram menggunakan ketuk dua kali untuk menyukai atau "menyukai" kiriman. Ketuk dua kali biasanya digunakan untuk memperbesar, tetapi berfungsi dengan baik untuk tujuan Instagram. Ini juga merupakan studi yang bagus dalam efisiensi: Mengetuk hati di bawah tiang membutuhkan satu ketukan yang lebih sedikit tetapi lebih banyak bidikan. Metode double-tap alternatif memungkinkan pengguna untuk menggulir lebih cepat karena mereka memiliki seluruh gambar untuk dibidik, dan intuitif untuk mengetuk objek yang Anda sukai.

Desainer telah mulai mengembangkan bahasa desain dengan tangan, lingkaran, dan panah untuk mengkomunikasikan maksud isyarat kepada pengembang produk dan ahli strategi. Bahasa ini mendekati universal dengan penyimpangan minimal.

Pikirkan Di Luar Layar

Gestur ada dalam skenario sehari-hari di luar penggunaan telepon dan laptop. Semakin banyak toilet umum telah memasang wastafel yang peka terhadap gerakan, pengering udara, dan dispenser handuk kertas. Perangkat ini juga mencegah penyebaran kuman – sifat yang bagus selama musim flu. Sementara itu, mobil self-driving sedang ditegakkan dengan teknologi pengenalan gerakan untuk meningkatkan efektivitas dan keamanannya.

Tapi Anda masih bisa berkreasi dengan gerakan ponsel sambil berpikir di luar layar. Perangkat telah menggunakan rotasi dan gemetar sebagai metode interaksi selama bertahun-tahun sekarang. Misalnya, 'Shake to Undo' Apple memberi pengguna opsi untuk membatalkan tindakan dengan menggoyangkan ponsel mereka. Dan sekarang, Anda mungkin akrab dengan memutar layar secara horizontal untuk menonton video di layar penuh.

Selama mereka diuji terlebih dahulu, teknologi gerakan kreatif dapat membawa produk lebih jauh dan meningkatkan kegunaan.

Gestur dan Aksesibilitas

Gestur, seperti semua hal, harus dapat diakses. Aksesibilitas mengacu pada membuat produk dapat diakses dan digunakan oleh semua orang dalam semua konteks, termasuk penyandang disabilitas. Isyarat harus mematuhi praktik terbaik desain yang dapat diakses untuk berkontribusi pada lingkungan yang setara, mematuhi Undang-Undang Penyandang Disabilitas Amerika (ADA) dan mengizinkan semua orang yang dapat memanfaatkan produk Anda untuk menggunakannya.

Selain memastikan gestur antarmuka dapat diakses, ada baiknya mempertimbangkan bagaimana Anda dapat menggunakan gestur untuk meningkatkan aksesibilitas. Apple menyadari bahwa layar iPhone yang datar dan tanpa tekstur menghadirkan hambatan bagi pengguna tunanetra. Jadi, mereka menggunakan antarmuka berbasis gerakan untuk membuat gerakan berbasis aksesibilitas tambahan yang membantu tunanetra menggunakan produk mereka.

Jangan Lupa UX

Sudah umum untuk menggunakan istilah UX dan UI secara bergantian, tetapi ini adalah praktik yang tidak akurat. UX adalah singkatan dari pengalaman pengguna, dan ini berkaitan dengan persepsi dan emosi pengguna saat terlibat dengan suatu produk. UI adalah singkatan dari antarmuka pengguna dan melibatkan elemen produk yang berinteraksi dengan pengguna. UI adalah elemen penting dari desain UX. Jika Anda tertarik untuk mempelajari lebih lanjut tentang masing-masing dan perbedaannya, lihat panduan kami tentang Desain UX vs UI.

Intinya di sini adalah bahwa UX dan UI berbeda, tetapi sangat penting untuk mempertimbangkan pengalaman pengguna saat mendesain antarmuka. Gerakan UI yang menyenangkan tetapi tidak membantu atau menarik tetapi memiliki kegunaan yang buruk adalah hasil dari desainer dan pengembang yang melupakan UX.

Tidak peduli berapa banyak pengujian yang Anda lakukan, berikan opsi kepada pengguna untuk menghapus fitur gerakan tertentu. Mengetuk adalah gerakan layar sentuh penting yang semua orang kenal, tetapi beberapa gerakan tidak penting untuk fungsi produk dan hanya ada untuk membuatnya lebih bermanfaat. Terkadang, gestur seperti ini mengganggu pengguna yang tidak terbiasa dengannya atau memicu gestur tanpa maksud.

Misalnya, di Mac, menggesekkan dua jari ke kiri atau ke kanan pada panel sentuh akan mengirim kembali atau meneruskan halaman ke browser web. Banyak pengguna melakukan gerakan ini secara tidak sengaja dan frustrasi ketika halaman terus berubah. Jadi, Apple memberi pengguna opsi untuk menonaktifkan fitur ini dan banyak lainnya.

Sempurnakan Orientasi Pengguna

Orientasi pengguna meningkatkan keberhasilan penggunaan suatu produk dengan mengajari pengguna cara menggunakannya. Pikirkan tentang program baru yang, saat dibuka untuk pertama kalinya, memandu Anda melalui semua fungsi atau langkah untuk menggunakannya.

Orientasi pengguna penting untuk gerakan sentuh karena sering kali tersembunyi dan mudah dilewatkan, terutama jika pengguna tidak terbiasa dengan gerakan atau tidak memiliki pengalaman dalam konteks itu. Jika mereka tidak tahu bahwa mereka dapat menggunakannya atau bagaimana menggunakannya, mereka tidak akan melakukannya.

Saat orientasi pengguna, Anda ingin singkat, mengajarkan satu hal pada satu waktu dan mengikuti kurva pembelajaran yang terbukti bekerja paling baik dalam pengujian. Tutorial panjang dan daftar langkah-demi-langkah membosankan, kurang interaktif, dan sering dilewati.

Rangkul Masa Depan Antarmuka Isyarat

Gestur sudah ada di sini. Mereka ada di masa sekarang, membuat diri mereka berguna dalam kehidupan kita sehari-hari. Untuk pengguna, gerakan ini dapat hidup di alam bawah sadar mereka saat mereka menggesek dan mengetuk dua kali tanpa berpikir. Desainer produk, pengembang, dan ahli strategi harus memahami gerakan pada tingkat yang lebih intim.

Desain untuk sentuhan adalah bagian yang berkembang di bidang ini. Gerakan ada di kamar mandi dan mobil – siapa yang tahu apa selanjutnya? Rangkullah. Produk yang lebih bermanfaat adalah produk yang efektif.

Ada pertanyaan atau ingin mengupgrade UX dan UI produk Anda? Kami senang berbicara. Cukup menjangkau.