Merancang interaksi yang bertujuan

Temukan prinsip-prinsip utama dari desain interaksi yang bertujuan, tantangan desain apa yang dapat dipecahkan oleh interaksi, dan bagaimana membawanya ke dalam proses Anda.

Ketika kita memikirkan desain interaksi dan animasi dalam pengalaman pengguna, mudah untuk keliru menganggapnya sebagai hal-hal mewah: lonceng dan peluit, atau benda terbang acak yang "memberi situs web faktor wow". Ini mungkin membawa kesenangan jangka pendek, tetapi dapat segera menjadi menjengkelkan bagi pengguna biasa.

Untuk memerangi jenis kesia-siaan ini, kita akan melihat prinsip-prinsip inti dalam mendesain interaksi yang bermakna, bagaimana interaksi tersebut dapat memecahkan tantangan desain umum dan bagaimana Anda dapat memperkenalkannya ke sistem dan proses desain Anda. Interaksi seharusnya tidak lagi menjadi sentuhan akhir yang dikeluarkan dari ruang lingkup sebagai "menyenangkan untuk dimiliki", tetapi merupakan bagian integral dari pengalaman pengguna secara keseluruhan.

Empat prinsip utama dari desain interaksi yang bermakna

1. Hindari menciptakan rintangan

Pikirkan "menu hamburger" yang membutuhkan waktu dua atau tiga detik untuk menganimasikan layar penuh. Setiap kali pengguna ingin menavigasi situs, mereka harus menunggu. Membuat waktu tugas yang lebih lama bagi pengguna adalah cara yang dijamin untuk memantulkannya hingga ke situs web atau aplikasi pesaing.

Namun, ada beberapa contoh di mana penundaan kemajuan interaksi dapat bermanfaat. Saat interaksi rumit, memperlambatnya dapat memberikan konteks dan umpan balik yang lebih baik kepada pengguna. Berikut adalah beberapa contoh kapan Anda mungkin menunda interaksi dan animasi:

• Mengarahkan pengguna baru ke antarmuka baru. Pastikan Anda mengurangi rintangan dengan opsi lewati.
• Seret dan lepas antarmuka yang menunjukkan sebab dan akibat. Terlalu cepat dan pengguna mungkin bertanya-tanya ke mana file itu pergi.
• Menambahkan produk ke keranjang. Ini seharusnya tidak membuat penghalang berkepanjangan untuk checkout, tetapi harus memberikan umpan balik yang cukup kepada pengguna sehingga mereka tahu tugas mereka berhasil.

Sebagai aturan, interaksi sederhana harus cepat, dan interaksi kompleks harus ditunda cukup lama sehingga pengguna memahami konteksnya.

2. Cocokkan gerakan dengan pesan

Jika Apple memutuskan bahwa semua interaksi mereka di iOS akan berlangsung cepat, tajam, di depan Anda, dan melakukan banyak hal yang rumit, apakah Anda akan merasa seperti menggunakan produk Apple? Jika Anda menggunakan aplikasi Alton Towers dan melihat animasi yang perlahan memudar dan banyak transisi gaya Ken Burns, apakah itu akan terasa seperti tempat magis yang menyenangkan dan mengasyikkan, atau iklan TV M&S?

Cara animasi interaksi harus selalu mewakili nada yang Anda tuju yang terasa tepat bagi pengguna Anda – ini membuat pengalaman lebih mendalam dan konsisten. Jika itu adalah situs hiburan untuk anak-anak, maka itu bisa sedikit aneh dan norak. Jika itu butik kelas atas maka tetaplah lambat, canggih, dan berselera tinggi.

3. Berikan tujuan

Desain interaksi memiliki begitu banyak potensi untuk meningkatkan pengalaman pengguna, itulah sebabnya sangat menggoda untuk digunakan secara berlebihan dan digunakan tanpa tujuan. Ingat situs web Flash?

Gulir sedikit lebih jauh dan lihat delapan tantangan yang dapat dipecahkan oleh desain interaksi. Jika interaksi Anda tidak mengikuti pola ini, kemungkinan besar interaksi tersebut tidak memiliki tujuan selain untuk menyenangkan pengguna.

4. Jadikan tidak terlihat

Kedengarannya cukup memilukan mengingat waktu yang diinvestasikan dalam merancang interaksi, tetapi jika tidak diperhatikan, itu mungkin karena mereka telah melakukan pekerjaan yang luar biasa. Kami cenderung lebih memperhatikan penggunaan teknologi atau antarmuka saat terjadi kesalahan atau ada sesuatu yang terasa kikuk. Ketika semuanya lancar, pengguna dapat fokus pada konten.

Jumlah pertimbangan desain interaksi pada aplikasi dan situs web yang banyak digunakan seperti Facebook, Pinterest, Twitter, dan produk Google tidak dapat dipahami. Namun, Anda tidak akan pernah benar-benar menyadarinya sampai seseorang menunjukkannya kepada Anda. Mereka membuat desain tidak terlihat sehingga Anda dapat menikmati pengalaman dan membangun hubungan emosional yang lebih kuat dengan produk, layanan, atau konten.

Enam tantangan desain yang dapat dipecahkan oleh desain interaksi

1. Orientasi & konteks

Ini adalah tantangan khusus untuk desain seluler ketika ruang layar terbatas. Tampilkan semuanya di tempat terbuka dan pengguna secara kognitif kelebihan beban. Menampilkan hal-hal penting dan menyembunyikan hal-hal yang kurang penting adalah apa yang kita perjuangkan; Namun, itu menyembunyikan sebagian dari pengalaman. Jadi, dengan menggunakan interaksi yang bermakna, kami dapat secara visual mengajari pengguna tempat tinggal, sehingga mudah diingat dan intuitif.

Berikut adalah beberapa contoh membuat konteks dengan menggunakan interaksi:

• Pengubah warna latar belakang font Google. Warnanya terasa seperti hidup di dalam ikon ember cat.
• Proses add to cart dan checkout di Cotton Bureau. Alih-alih membawa Anda ke halaman keranjang baru, ini seperti korsel yang hidup di sebelah kanan halaman yang terlihat.

2. Mendemonstrasikan sebab & akibat

Contoh klasiknya adalah antarmuka seret dan lepas. Saat Anda mengambil objek media dan memindahkannya ke "zona jatuhkan", harus ada umpan balik bagi pengguna untuk memberi tahu mereka bahwa mereka telah mengambilnya dan mereka telah pindah ke tempat yang tepat untuk meletakkan item tersebut. Setelah mereka memasukkannya, harus ada validasi untuk memberi tahu pengguna bahwa mereka berhasil dalam tugas mereka. Ini dapat dilakukan melalui perubahan warna, pesan validasi positif, atau bahkan efek suara.

3. Memberikan umpan balik

Untuk contoh ini, mari kita ambil tombol pembayaran. Berapa banyak gerbang e-niaga yang dijalankan dengan buruk yang pernah Anda alami di mana Anda mengklik tombol “Bayar Sekarang” yang bagus dan berkilau itu, hanya untuk menemui kebingungan apakah Anda telah mengkliknya atau tidak karena sedang diproses? Itu tidak mengatakan itu yang dilakukannya. Jadi, interaksi dapat mengubah status tombol dan dengan sedikit animasi, ia dapat memberi tahu pengguna bahwa "pembayaran sedang diproses", dan kemudian memberi tahu pengguna kapan "pembayaran diterima" sebelum pindah ke halaman konfirmasi pesanan. Tidak ada lagi bertanya-tanya apa yang terjadi selama sepuluh detik dan mempertanyakan apakah Anda telah merusak internet.

4. Sorot informasi utama

Ketika beberapa konten memiliki prioritas lebih tinggi dalam tampilan layar yang sama, penggunaan warna dan tipografi untuk mempromosikannya dapat merusak konsistensi sistem desain Anda atau terlihat tidak pada tempatnya jika digunakan secara berlebihan. Interaksi dapat membantu menonjolkan konten penting tanpa mengorbankan tata letak.

Pikirkan aplikasi kebugaran: saat pertama kali memuat dasbor, Anda ingin melihat aktivitas dan statistik utama hari ini. Menggunakan animasi sederhana dapat memunculkan konten ini tanpa mengurangi jumlah hal yang ditampilkan di layar.

5. Ciptakan persepsi kinerja

Kecepatan adalah topik hangat dan untuk alasan yang baik, karena merupakan faktor umum yang terkait dengan rasio pentalan. Akan ada kasus di mana Anda telah memaksimalkan pengoptimalan kecepatan halaman dan masih membutuhkan sedikit waktu untuk memuat halaman. Ada alternatif untuk tidak menunjukkan apa pun kepada pengguna, atau menampilkan ikon pemuatan.

Pemuatan kerangka dapat digunakan untuk menampilkan tata letak yang dapat diprediksi dalam bentuk gambar rangka sehingga sebelum halaman dimuat, pengguna mengetahui secara kasar di mana harus mencari dan bagaimana mereka dapat berinteraksi dengan antarmuka. Secara psikologis, rasanya halaman dimuat lebih cepat dibandingkan dengan tidak melihat apa pun terjadi, tetapi pada kenyataannya, itu dimuat dalam waktu yang sama.

Anda juga dapat menggunakan waktu pemuatan sebagai kesempatan untuk mengedukasi pengguna tentang apa yang sedang terjadi dan apa yang akan terjadi dengan pesan ramah yang membagi waktu tunggu.

6. Menambahkan kepribadian merek

Merek yang dipimpin oleh karakter dapat memperoleh banyak manfaat dari memperkenalkan interaksi untuk membawa kepribadian ke dalam pengalaman. Anda dapat memanfaatkan karakteristik manusia maskot. Ketika Anda tidak memiliki visual apa pun dalam merek Anda, Anda masih dapat menambahkan kepribadian dengan menggunakan kecepatan dan frekuensi. Pikirkan Google dan dot pre-loader atau aktivasi perintah suara mereka yang unik yang menghadirkan pendekatan yang ramah dan menyenangkan dengan cara yang sederhana.

Membangun hubungan emosional dengan pengguna adalah cara yang bagus untuk mendapatkan kunjungan rutin. Desain interaksi dapat membuat teknologi terasa lebih berpusat pada manusia – yang selalu baik untuk dituju.

Memperkenalkan interaksi ke dalam proses desain Anda

Sketsa & comp fidelitas rendah

Alat desain interaksi

• Keynote: Jika Anda mencari yang kasar dan sederhana untuk menyampaikan ide Anda, Keynote adalah solusi cepat.
• Adobe Animate: Simpan semuanya di dalam Adobe dan saling silang mulus dengan alat lain. Ini sangat ideal untuk animasi ilustratif.
• Kehebohan Kehebohan: Jika Anda terbiasa dengan antarmuka Sketsa dan mengetahui jalan di sekitar garis waktu, Anda akan betah dengan Tumult.
• Framer: Ini adalah alat desain interaksi yang dibuat khusus yang memiliki kemampuan yang sangat canggih untuk mencocokkan animasi Anda dengan JavaScript.
• Prinsip: Dengan tautan Sketsa yang bagus, Prinsip menjadi tujuan interaksi. Ini relatif sederhana untuk dipelajari, dan apa yang dapat Anda capai di dalamnya sangat bagus.
• Atomic: Tambahkan data, logika, dan variabel untuk membuat interaksi Anda sepraktis build terakhir. Ini untuk desainer tingkat lanjut yang memiliki pengetahuan pengkodean.
• Invision Studio: Ini masih awal, tetapi Invision Studio memiliki beberapa kemampuan dan kesamaan yang hebat dengan Prinsip. Waktu akan memberi tahu apakah ini akan cukup maju untuk mendominasi pasar prototipe dan kolaborasi.

Catatan serah terima terperinci

Meninggalkan catatan pengembang adalah rebutan jika Anda berada di lingkungan yang sangat kolaboratif, tetapi jika Anda bekerja dari jarak jauh, catatan terperinci terhadap ide dan prototipe Anda dengan serah terima yang baik dapat memastikan interaksi Anda diperhitungkan dalam pembuatan.

Kompilasi perpustakaan demo & inspirasi

Tambahkan ke sistem desain Anda

Jika Anda telah berhasil memecahkan masalah umum (diuji dengan benar) dengan interaksi, maka masukkan ke dalam sistem desain atau pustaka pola Anda untuk digunakan kembali dalam skenario serupa tanpa investasi waktu untuk melakukan sesuatu yang lain dari awal.

Untuk bantuan dengan desain web dan pengalaman pengguna (UX), hubungi kami hari ini.

Jika Anda memerlukan bantuan dengan Pengalaman Pengguna Anda, jangan ragu untuk menghubungi kami.