{"id":2483,"date":"2023-10-27T18:06:48","date_gmt":"2023-10-27T11:06:48","guid":{"rendered":"https:\/\/student-activity.binus.ac.id\/bncc\/?p=2483"},"modified":"2023-10-27T18:06:48","modified_gmt":"2023-10-27T11:06:48","slug":"tingkatkan-desain-kamu-dengan-micro-interactions","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/bncc\/2023\/10\/27\/tingkatkan-desain-kamu-dengan-micro-interactions\/","title":{"rendered":"Tingkatkan Desain Kamu dengan Micro Interactions"},"content":{"rendered":"

Untuk kamu yang tertarik dengan desain produk. Apakah kamu pernah dengar istilah\u00a0micro-interactions<\/em>? Sebenarnya, apa itu\u00a0micro-interactions?\u00a0<\/em>dan apa saja kegunaan dari\u00a0micro-interactions<\/em>\u00a0itu?<\/p>\n

Yuk, baca sampai akhir untuk mengenal\u00a0micro-interactions<\/em>\u00a0secara lebih dalam!<\/p>\n

Apa itu\u00a0Micro-Interactions<\/em>?<\/strong><\/h1>\n

Micro-interactions<\/em>\u00a0adalah interaksi kecil atau interaksi tambahan yang bertujuan untuk memberikan\u00a0feedback<\/em> kepada pengguna dan menampilkan perubahan secara lebih jelas pada suatu desain produk.\u00a0Micro-interactions\u00a0<\/em>memungkinkan kamu untuk menjelaskan banyak hal tanpa menggunakan sepatah kata pun. Feedback<\/em>\u00a0dari\u00a0micro interactions<\/em> umumnya dapat berupa animasi, perubahan warna, dan lain sebagainya. Dengan menggunakan\u00a0micro-interactions<\/em>, kamu dapat meningkatkan\u00a0User Experience<\/em>\u00a0bagi pengguna aplikasi.<\/p>\n

Komponen Micro-Interactions<\/em><\/h1>\n
\n
\"\"<\/div>\n<\/figure>\n

Terdapat 4 komponen dalam\u00a0micro-interactions :<\/em><\/p>\n

1.Trigger<\/strong><\/p>\n

Trigger\u00a0<\/em>merupakan sesuatu yang memicu munculnya\u00a0micro-interactions<\/em>.\u00a0Trigger\u00a0<\/em>dapat muncul karena tindakan pengguna atau sistem.<\/p>\n

Trigger<\/em>\u00a0yang timbul akibat pengguna mengharuskan pengguna untuk melakukan sebuah tindakan terlebih dahulu. Sedangkan pada\u00a0trigger\u00a0<\/em>yang ditimbulkan oleh sistem, perangkat lunak akan mengidentifikasi bahwa kualifikasi tertentu sudah terpenuhi kemudian baru melakukan tindakan.<\/p>\n

2.Rules<\/strong><\/p>\n

Rules<\/em>\u00a0menentukan bagaimana\u00a0micro-interactions<\/em>\u00a0merespon sebuah\u00a0trigger\u00a0<\/em>dan menentukan apa saja yang terjadi selama interaksi.<\/p>\n

3.Feedback<\/strong><\/p>\n

Feedback<\/em>\u00a0menunjukan informasi hasil\u00a0micro-interaction<\/em>\u00a0kepada pengguna agar mereka menyadari apa yang telah terjadi.<\/p>\n

Contohnya pada saat pengguna mengisi sebuah\u00a0form signup<\/em>, warna\u00a0border\u00a0<\/em>akan berubah hijau jika\u00a0field\u00a0<\/em>sudah diisi dengan benar dan merah jika informasi yang mereka isi masih salah.<\/p>\n

4.Loops & Models<\/strong><\/p>\n

Loops & Models\u00a0<\/em>berfungsi untuk menentukan aturan baru yang terjadi selanjutnya saat\u00a0micro-interaction<\/em>\u00a0terjadi secara berulang atau saat kondisi berubah.<\/p>\n

Contohnya pada\u00a0website e- commerce<\/em>, kalimat \u201cBuy it now<\/em>\u201d akan berubah menjadi \u201cBuy another<\/em>\u201d saat pengguna sudah pernah melakukan pembelian.<\/p>\n

Contoh Penerapan Micro-Interactions<\/em>\u00a0yang Dapat Kamu Gunakan<\/h1>\n
    \n
  1. Pull-To-Refresh Animation<\/strong><\/li>\n<\/ol>\n
    \n
    \"\"<\/div>
    Source<\/a><\/figcaption><\/figure>\n

    Mungkin kamu sudah familiar dengan penerapan yang satu ini. Saat pengguna menarik halaman kebawah, akan muncul animasi pada bagian atas layar. Animasi ini dapat membantu pengguna bahwa aplikasi atau situs kamu sedang memuat konten ulang atau\u00a0refresh.<\/em><\/p>\n

    2. Animated Loading Screen<\/strong><\/p>\n

    \n
    \n
    \"\"<\/div>\n<\/div>
    Source<\/a><\/figcaption><\/figure>\n

    Kamu dapat menambahkan animasi pada saat menampilkan\u00a0loading screen<\/em>. Tujuannya adalah untuk mengurangi rasa bosan dan membuat pengguna merasa terhibur saat harus menunggu konten muncul dalam situs atau aplikasi kamu.<\/p>\n

    3. Real-time Visual Feedback<\/strong><\/p>\n

    \n
    \"\"<\/div>
    Tombol Like pada Aplikasi Twitter<\/p>\n<\/figcaption><\/figure>\n

    Untuk mencegah pengguna merasa kebingungan saat menggunakan aplikasi atau situs, kamu dapat memberikan\u00a0feedback visual\u00a0<\/em>secara\u00a0real-time\u00a0<\/em>untuk setiap tindakan yang mereka lakukan. Misalnya tombol dapat berubah warna atau menyala saat ditekan.<\/p>\n

    Contohnya ketika pengguna mengeklik ikon hati pada aplikasi Twitter, akan muncul animasi pada tombol hati dan warnanya akan berubah. Animasi yang timbul dari ikon tersebut dapat membantu pengguna untuk mengetahui bahwa tindakan mereka telah berhasil.<\/p>\n

    Mengapa Micro-Interactions itu penting?<\/h1>\n

    Walaupun\u00a0simple\u00a0<\/em>dan mungkin kurang diperhatikan,\u00a0micro-interactions<\/em>\u00a0dapat memberikan banyak manfaat bagi aplikasi atau situs kamu, loh!<\/p>\n

    Berikut adalah beberapa kegunaannya:<\/p>\n