Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini

Ada garis tipis antara interaksi yang berhasil dan interaksi yang tidak dapat digunakan. Prinsip-prinsip desain interaksi membantu menjembatani kesenjangan.

Desain interaksi yang dijalankan dengan baik memainkan peran besar dalam implementasi UX yang hebat, dan tidak dapat disangkal lagi merupakan salah satu dasar prinsip desain UX.

"Tidak dapat digunakan" berarti "Saya akan melanjutkan," dan tidak peduli seberapa "tampan" desain visualnya—betapa mewahnya animasi itu—mengacaukan desain interaksi dan UX Anda akan rusak. Lakukan dengan benar dan Anda akan segera menuju UX yang jauh lebih baik meskipun estetikanya gagal. Produk akan memiliki peluang sukses yang jauh lebih baik, yang pada gilirannya berkontribusi pada laba.

Desain interaksi (IxD) didefinisikan oleh Asosiasi Desain Interaksi (IxDA) sebagai “struktur dan perilaku sistem interaktif. Desainer interaksi berusaha untuk menciptakan hubungan yang bermakna antara orang-orang dan produk serta layanan yang mereka gunakan, mulai dari komputer hingga perangkat seluler hingga peralatan dan seterusnya.”

Pengalaman sangat penting, karena menentukan seberapa sayang orang mengingat interaksi mereka. —Don Norman dalam The Design of Everyday Things.

Mengikuti prinsip-prinsip desain interaksi sangat berkontribusi pada desain interaksi yang hebat, yang pada gilirannya akan berkontribusi pada pengalaman.

Ada kemungkinan bahwa semua perangkat dan teknologi saat ini dapat diganti dengan sesuatu yang sama sekali berbeda dalam semalam, namun karena prinsipnya yang bertahan lama, desain interaksi yang hebat masih dapat dicapai. Prinsip-prinsip konstan itu adalah tentang apa yang memotivasi orang, perilaku mereka, dan cara mereka berpikir.

Bayangkan jika setiap pegangan pintu di setiap pintu bekerja secara berbeda. Untuk satu Anda harus mendorong terlebih dahulu ke pintu lalu ke bawah; untuk yang lain Anda harus menarik ke atas alih-alih menekan ke bawah, dan yang lain lagi Anda harus menarik dua kali dan kemudian ke bawah—bencana total. Faktanya, ungkapan “putar gagang pintu” mengasumsikan hanya ada satu cara untuk melakukannya.

Tidak ada yang suka dipukuli oleh teriakan "ikuti aturan," tetapi desain interaksi yang benar-benar luar biasa bergantung pada seperangkat standar, praktik terbaik, konvensi, dan aturan praktis (heuristik). Ini bukan sains yang licin, tetapi mereka membentuk landasan IxD dan memungkinkan interaksi dengan gesekan paling sedikit. Standar antarmuka tidak menghambat kreativitas—ini bukan aturan yang keras dan cepat, tetapi pedoman dasar yang membantu seorang desainer membangun basis "desain yang dapat digunakan dan dikenal" untuk berinovasi.

Prinsip Desain Interaksi dan Praktik Terbaik

Desain interaksi berada di bawah disiplin Interaksi Manusia-Komputer (HCI), “Sebuah bidang studi multidisiplin yang berfokus pada desain teknologi komputer dan, khususnya, interaksi antara manusia (pengguna) dan komputer.” – seperti yang didefinisikan oleh Interaksi Yayasan Desain.

Desain UI yang hebat mencapai kesenangan pengguna murni dengan menggabungkan prinsip-prinsip desain UI dasar dengan desain interaksi yang digerakkan oleh tujuan.

• Desain interaksi yang sukses menggunakan tujuan yang sederhana dan jelas, tujuan yang kuat, dan UI yang intuitif.
• Dalam upaya untuk menjaga interaksi tetap sederhana dan mudah, desain interaksi yang digerakkan oleh tujuan menempatkan tidak lebih dari kebutuhan minimum mutlak di depan pengguna agar mereka dapat menyelesaikan tugas.

Mari selami beberapa prinsip terpenting (bukan daftar lengkap dengan cara apa pun):

Dapat ditemukan

Pada dasarnya, jika pengguna tidak dapat menemukannya, itu tidak ada. Harus diperjelas tindakan apa yang mungkin dilakukan di UI dalam waktu kurang dari satu mikrodetik—misalnya, memberi label ikon sebagai praktik terbaik. Ikon yang tidak berlabel sama saja dengan melemparkan penghalang jalan ke jalur pengguna karena mereka harus berhenti untuk menguraikan makna. Anda mengganggu "aliran". Dan inilah yang mengejutkan… Mereka tidak tertarik untuk mempelajari UI Anda.

Penanda

Sangat terkait dengan kemampuan untuk ditemukan, penggunaan penanda yang efektif memastikan bahwa keterjangkauan—kemungkinan tindakan pada objek—ditunjukkan dengan jelas di UI. Penanda memberikan petunjuk yang kuat seperti sinyal atau rambu. Menunjukkan interaksi yang tersedia, mereka menyalakan lampu hijau pada pengguna sambil berteriak, "Ini saya, Anda dapat mengetuk (mengklik, menggesek, dll.) saya!" Sebuah keterjangkauan mungkin ada di UI, tetapi mungkin tetap tersembunyi karena jika tidak memiliki penanda, itu tetap tidak terlihat. Contohnya mungkin "interaksi gestur tersembunyi" yang tidak muncul dengan sendirinya kecuali pengguna secara tidak sengaja menggeser ke kiri atau ke kanan (untuk menghapus sesuatu, misalnya).

Keterjangkauan menentukan tindakan apa yang mungkin dilakukan. Penanda menentukan bagaimana orang menemukan kemungkinan itu: penanda adalah tanda, sinyal yang dapat dipahami tentang apa yang dapat dilakukan. Penanda jauh lebih penting bagi desainer daripada keterjangkauan. —Don Norman (Norman, 2013)

Masukan

Setelah penanda, komunikasi terpenting berikutnya kepada pengguna adalah umpan balik. Umpan balik berarti: informasi eksplisit tentang dampak tindakan . Ini juga berarti visibilitas status sistem yang konstan, yaitu, sistem harus memastikan bahwa:

• Pengguna tetap mendapat informasi tentang apa yang terjadi.
• Ada informasi berkelanjutan tentang hasil tindakan mereka dan keadaan produk (sistem) saat ini.
• Tidak ada kebingungan di benak pengguna mengenai status produk, yaitu, memproses, memuat, mencari, mengunggah, dll., atau beberapa perubahan status lainnya.
• Setelah tindakan dieksekusi, mudah untuk menentukan status baru.

Model Konseptual dan Model Mental

Desain interaksi yang hebat menyajikan semua informasi yang dibutuhkan pengguna untuk membuat model konseptual sistem yang baik, sehingga mengarah pada pemahaman dan rasa kontrol mereka. Sebuah model konseptual meningkatkan baik penemuan dan evaluasi hasil saat menggunakan sistem.

Model mental—atau peta kognitif—adalah gambaran dalam benak pengguna yang menginformasikan ekspektasi mereka tentang interaksi tertentu dan bagaimana sesuatu bekerja di dunia nyata. Peta kognitif adalah representasi internal dari lingkungan fisik kita, terutama yang terkait dengan hubungan spasial. Dengan menggunakan model mental pengguna secara efektif, desainer interaksi dapat menciptakan sistem yang "terasa" intuitif.

Perancang menciptakan model konseptual—model desain, dan beginilah cara perancang membuat perangkat atau perangkat lunak bekerja. Satu-satunya cara untuk mengkomunikasikan model ini kepada pengguna adalah dengan mengimplementasikannya melalui UI. Pengguna kemudian berinteraksi dengan model konseptual dan membuat model mental mereka sendiri tentang bagaimana sesuatu bekerja.

Desainer tidak dapat memberi tahu pengguna cara kerja aplikasi—mereka perlu mendesain UI dengan tepat untuk mengomunikasikan tujuannya dengan jelas. Dengan kata lain, buat antarmuka yang mudah dipahami dan digunakan. Desain interaksi yang buruk berisiko menciptakan model mental yang salah bagi pengguna. Hal ini menyebabkan kebingungan dan kesalahan pengguna karena mereka mencoba mengoperasikan aplikasi dengan cara yang tidak diinginkan oleh perancang.

Pemetaan

Pemetaan adalah hubungan antara kontrol dan efeknya di dunia. Prinsip umpan balik adalah sepupu dekat pemetaan karena kedua prinsip bekerja sama untuk menciptakan pengalaman yang mulus. Hampir semua artefak membutuhkan semacam pemetaan antara kontrol dan efek—dalam kasus desain antarmuka, ini adalah hubungan antara kontrol dan fungsi yang dihasilkan.

Pemetaan alam—memanfaatkan analogi fisik dan standar budaya—mengarah pada pemahaman langsung. Misalnya, seorang desainer dapat menggunakan analogi spasial di UI:

• Untuk meningkatkan beberapa nilai dengan komponen penggeser, geser penggeser ke kanan,
• Untuk menguranginya, geser ke kiri.

Beberapa pemetaan alam bersifat biologis, seperti dalam standar universal bahwa tingkat yang meningkat mewakili lebih banyak, tingkat yang berkurang, lebih sedikit.

Kendala

Konsep desain kendala adalah cara untuk menentukan bagaimana membatasi jenis interaksi pengguna yang dapat terjadi pada saat tertentu. Batasan desain interaksi membantu interaksi yang efisien dengan menyediakan “rel pemandu” bagi pengguna—hampir seperti tangan pemandu yang mengarahkan interaksi yang dapat terjadi.

Batasan dalam desain memastikan hanya hal-hal tertentu yang diaktifkan, atau bahkan terlihat, untuk memandu pengguna menuju interaksi tertentu. Ini mempertimbangkan ukuran, skala, proporsi, penekanan, dan keadaan, dan bagaimana ini, bekerja bersama secara harmonis, membantu menciptakan hierarki dan akibatnya memengaruhi pengguna. Batasan yang diterapkan dengan benar juga membantu mengurangi kemungkinan kesalahan pengguna.

Kebalikan dari kendala adalah ketika setiap opsi ditawarkan kepada pengguna, sehingga sulit bagi mereka untuk memutuskan apa yang harus dilakukan selanjutnya. Itu prinsip pilihan . Semakin banyak pilihan, semakin sulit untuk memilih salah satunya—kita menjadi kewalahan oleh semua kemungkinan.

Desain interaksi yang hebat tidak menempatkan setiap opsi yang tersedia pada antarmuka, tetapi membatasinya pada apa yang paling penting pada saat tertentu.

Konsistensi, Standar, dan Heuristik

Ini semua terkait—saudara dengan pola (di bawah), jika Anda mau. Untuk mencegah kesalahan pengguna dan membuat aplikasi mudah dipelajari, model interaksi harus konsisten. Konsistensi meningkatkan UX, kegunaan umum, dan efisiensi yang dapat digunakan pengguna untuk menggunakan produk digital.

Konsistensi berarti menggunakan elemen yang serupa untuk mencapai tugas yang serupa, dan memiliki fungsi dan perilaku yang serupa di seluruh—antarmuka yang konsisten adalah antarmuka yang mengikuti aturan, seperti menggunakan operasi yang sama untuk melakukan sesuatu.

Produk yang berusaha untuk menjadi sangat bermanfaat mengikuti konvensi, standar, praktik terbaik, dan heuristik kegunaan yang sudah mapan (aturan praktis yang luas, bukan pedoman kegunaan khusus).

Sesuai dengan konvensi misalnya, mungkin dalam cara halaman ditata. Pengguna web menghabiskan 69% waktu mereka untuk melihat bagian kiri halaman dan 30% melihat bagian kanan. Oleh karena itu, sebuah situs lebih mungkin menguntungkan jika mengikuti tata letak konvensional.

Standar dapat berupa jejak breadcrumb (orientasi dan perangkat navigasi yang langsung dapat dikenali), atau menu navigasi global di bagian atas halaman seperti di situs BCC.

Pola dan Kemampuan Belajar

Seberapa mudahkah pengguna baru belajar menavigasi antarmuka? Tidak ada yang ingin mempelajari cara baru dalam melakukan sesuatu kecuali jika itu memberikan manfaat yang signifikan atas apa yang terjadi sebelumnya—namun kita terus-menerus dibanjiri dengan interaksi yang belum teruji dan tidak konvensional.

Komponen atau pola umum memberikan kemampuan belajar secara instan. Setelah Anda mempelajari cara menggunakan sendok, Anda akan selalu tahu cara menggunakan sendok. Sama dengan mengendarai sepeda, skating… konstruksi yang sama berlaku untuk komponen UI yang kita gunakan setiap hari: tombol, bidang teks, menu tarik-turun, kotak centang, tombol radio, pemintal, penggeser, ikon, akordeon, kotak pencarian, dll.

Desain interaksi terbaik tidak mencoba menemukan kembali roda, tetapi memanfaatkan pola secara efisien dan efektif dengan cara baru.

Pola tidak hanya mendorong kemampuan belajar, tetapi juga memberikan konsistensi (prinsip lain, dibahas di atas) dan membuatnya sesuai dengan harapan pengguna tentang cara kerja sesuatu.

Hirarki dan Penekanan Visual

Selama interaksi mereka dengan situs atau aplikasi, orang mencari informasi yang paling relevan dengan pencarian mereka. Hirarki visual menyangkut pengaturan elemen dengan cara yang menyiratkan kepentingan. Hirarki visual dalam desain mempengaruhi urutan di mana mata manusia merasakan apa yang dilihatnya. Tidak semuanya diberi “bobot” yang sama; keteraturan diciptakan oleh kontras visual antara objek dalam bidang persepsi. Kontras visual (penekanan) dapat dicapai dengan ukuran, kedekatan, warna, opacity, dan kontras nada aktual antara elemen.

Jangan meremehkan kekuatan hierarki visual. Sudah sangat efektif digunakan dalam semua jenis desain selama ribuan tahun, dalam arsitektur dan desain industri serta desain cetak. Lihat beberapa desain poster yang bagus. Menggunakan teknik ini dengan baik dalam desain interaksi, hal-hal yang benar tampaknya muncul pada waktu yang tepat dengan cara yang benar.

Desainer interaksi yang hebat menggunakan kekuatan penekanan untuk berhasil mencapai desain antarmuka "ramping dan kejam" yang tampaknya bekerja seperti sulap.

Hukum Fitts

Percaya atau tidak, undang-undang ini berasal dari studi awal yang melihat pergerakan otot manusia dan penargetan kinerja tugas operator telegraf dan lini produksi, dan kemudian diadaptasi ke HCI (interaksi manusia-komputer). Pada dasarnya mengatakan: "Waktu untuk mendapatkan target adalah fungsi dari jarak dan ukuran target."

Dalam istilah yang lebih sederhana, ini tentang seberapa jauh dan seberapa besar target, dan seberapa dekat dengan target lain. Gerakan atau ketukan mouse yang lebih pendek lebih baik—selalu lebih cepat untuk mengklik atau menggesek target jika lebih dekat ke posisi awal Anda. Tugas terkait juga harus berdekatan satu sama lain sehingga pengguna tidak perlu berputar-putar di layar saat berinteraksi dengan UI.

Hukum Fitts dapat secara akurat memprediksi jumlah waktu yang diperlukan untuk berpindah dan memilih target. Target dapat berupa tombol, dropdown, atau elemen interaktif lainnya di layar. Jika terlalu jauh, terlalu kecil, atau jika elemen yang dapat diklik terlalu berdekatan, efisiensi dan kegunaan UI sangat berkurang.

Diagram Gutenberg, Tata Letak Pola Z dan F

Pola-pola ini berlaku dalam situasi yang berbeda tergantung pada konten, dan sebagian besar digunakan oleh pemirsa barat. Diagram Gutenberg menggambarkan pola umum yang dilalui mata saat melihat informasi yang homogen dan terdistribusi secara merata—kebanyakan situs teks-berat seperti blog atau situs berita. Diagram Gutenberg menunjukkan bahwa area bera yang kuat dan lemah berada di luar jalur gravitasi pembacaan, dan menerima perhatian minimal kecuali ditekankan secara visual dalam beberapa cara.

Pola Z mengikuti bentuk huruf Z. Dalam kasus tertentu pola ini juga disebut sebagai pola Zig-Zag. Perbedaan utama dengan diagram Gutenberg adalah bahwa pola Z menunjukkan pemirsa akan melewati dua area bera. Kalau tidak, mereka masih mulai dan berakhir di tempat yang sama, dan masih melewati tengah. Seperti halnya Gutenberg, seorang desainer akan menempatkan informasi terpenting di sepanjang jalur pola-Z.

F untuk cepat dan mengacu pada cara pengguna membaca konten. Pola-F dipopulerkan oleh studi pelacakan mata NNGroup yang mencatat lebih dari 200 pengguna membaca konten di web. Ditemukan bahwa pola pemindaian orang cukup konsisten di berbagai jenis situs.

Mengapa ini penting? Di situs eCommerce misalnya, untuk memaksimalkan pemindaian, Anda mungkin ingin mengatur konten yang paling penting dengan cara mengikuti pola-F.

Pengakuan Daripada Mengingat

Pengakuan mengacu pada kemampuan kita untuk "mengenali" suatu peristiwa atau sepotong informasi sebagai hal yang akrab, sementara mengingat lebih merupakan "beban kognitif" yang melibatkan penarikan detail terkait dari memori. Menampilkan kepada pengguna hal-hal yang dapat mereka kenali meningkatkan kegunaan daripada kebutuhan untuk mengingat item dari awal.

Misalnya, menggunakan ikon di UI sangat kuat karena memungkinkan pengenalan simbol secara instan. Otak kita memproses (mengenali) simbol sekitar 1000x lebih cepat daripada membaca teks. Jika seorang desainer menampilkan ikon tanda peringatan standar dalam dialog, itu akan segera membuat pengguna fokus dan memperhatikan karena tindakan selanjutnya mungkin merusak. Tetapi jika sebuah ikon dirancang sedemikian rupa sehingga memaksa pengguna untuk mengingat dan menguraikan makna—misalnya, tangan yang diangkat alih-alih ikon peringatan—itu mengurangi efisiensi dan kegunaan UI.

Desain Estetika dan Minimalis

Anda harus memahami secara mendalam esensi suatu produk agar dapat menyingkirkan bagian-bagian yang tidak esensial. —Jonathan Ive.

Ini adalah salah satu prinsip yang paling menantang karena sulit. Kecenderungannya adalah desainer dan manajer produk menambahkan setiap opsi yang tersedia di bawah matahari, dan membiarkan pengguna memutuskan jalan yang ingin mereka ambil. Itu benar-benar pendekatan malas, dan mengarah ke produk yang penuh dengan kekacauan yang tidak penting.

Antarmuka harus dibersihkan dari elemen dan konten yang tidak perlu yang tidak mendukung tujuan dan tugas pengguna. Desainer tidak hanya harus mendesain UI yang estetis, tetapi juga memprioritaskan informasi layar-ke-layar dalam alur pengguna. Dengan menggunakan hierarki visual dan keajaiban penekanan, hanya informasi minimum yang esensial dan mutlak yang diperlukan pengguna untuk menyelesaikan tugas yang harus disajikan.

Michelangelo berkata tentang karyanya: "Saya melihat malaikat di marmer dan mengukir sampai saya membebaskannya."

Merancang interaksi yang minimalis, estetis, dan sederhana membutuhkan desainer untuk memahami apa yang terjadi tepat pada saat orang akan menggunakan produk, dan membuang semua yang tidak perlu. Melakukan penelitian dan pengujian pengguna yang mendalam untuk memahami bagaimana pengguna akan menggunakan produk biasanya merupakan pendekatan terbaik.

Pencegahan Kesalahan

Pengguna sering terganggu saat melakukan tugas, jadi mencegah kesalahan yang tidak disadari dengan penekanan visual, menawarkan saran dan penggunaan batasan yang dirancang dengan hati-hati adalah kuncinya. Suatu bentuk pemeriksaan kesalahan—juga dikenal sebagai Poka-Yoke—mengacu pada penerapan mekanisme failsafe untuk mencegah suatu proses menghasilkan kesalahan.

Salah satu cara terbaik untuk mencegah kesalahan adalah merancang model mental yang lebih baik. Banyak kesalahan pengguna terjadi ketika model perancang dan interpretasi tentang bagaimana sistem seharusnya bekerja tidak sesuai dengan model mental pengguna.

Konvensi desain standar membantu (salah satu prinsip yang disebutkan di atas) karena membantu pengguna memahami tindakan apa yang dapat mereka ambil. Pengguna yang berinteraksi dengan situs web atau aplikasi Anda telah menggunakan ribuan situs dan aplikasi lain, dan mengharapkan elemen interaktif umum terlihat dan berfungsi dengan cara tertentu. Situasi rawan kesalahan dapat muncul ketika produk Anda menyimpang dari konvensi tersebut.

Peringatkan sebelum kesalahan dibuat dan konfirmasi sebelum tindakan merusak. Bahkan lebih baik daripada pesan kesalahan yang diterapkan dengan baik adalah desain yang cermat yang mencegah masalah terjadi di tempat pertama. Cobalah untuk menghilangkan keadaan yang rawan kesalahan dan terus memeriksanya.

Masa Depan Desain Interaksi

Perangkat, lingkungan, dan antarmuka baru akan terus berkembang dengan kemungkinan interaksi baru. Pengontrol video-game terus berkembang, dan menyediakan beragam kontrol input, serta umpan balik haptic. Antarmuka gestur akan berkembang dari layar sentuh yang mendukung gestur 2D dan 3D—misalnya, gestur di perangkat iOS dan Android—hingga menggunakan gestur tangan di ruang 3D untuk berinteraksi dengan ruang realitas virtual, konsol game, dan perangkat IoT yang memungkinkan kita mengontrol lingkungan kita .

Seperti dalam kasus Project Soli Google, kita dapat mengucapkan sayonara ke mouse, trackpad, dan joystick, dan beralih ke interaksi gestur yang lebih alami menggunakan tangan dan jari kita untuk mengontrol perangkat. Dalam kasus tertentu—dalam UI percakapan misalnya—metode masukan dapat berubah dari keyboard ke suara. Namun demikian, prinsip umpan balik segera dan terus menerus dalam beberapa bentuk (suara, haptic dan visual) akan tetap dibutuhkan.

Prinsip-prinsip desain interaksi mendasar akan selalu memainkan peran sentral dalam desain sistem masa depan dan penting bagi desainer UX/UI untuk mengingatnya. Itu bukan aturan yang keras dan cepat, tetapi akan menghasilkan produk dan layanan yang lebih baik dan lebih menarik. Sama seperti film-film sukses yang menggunakan teknik bercerita kuno yang mengikuti struktur yang teruji dan benar, yang dihormati oleh waktu, ada prinsip-prinsip desain interaksi yang ada untuk alasan yang baik. Mengikuti mereka akan menguntungkan setiap desainer produk dengan meningkatkan kegunaan dan mendorong adopsi yang lebih luas dari produk mereka.

Bacaan lebih lanjut di Blog Desain Toptal:

• Prinsip Desain: Pengantar Hirarki
• Praktik Terbaik Desain UI dan Kesalahan Umum
• Menjelajahi Prinsip Desain Gestalt
• Panduan Komprehensif untuk Arsitektur Informasi