Dalam dunia produk digital, interaksi bukan sekadar elemen tambahan dalam design antarmuka, namun sebagai kebutuhan esensial bagi pengguna. Desain Interaksi adalah proses merancang produk dan layanan digital interaktif. Menurut Jon Kolko, penulis buku Thoughts on Interaction Design “Desain Interaksi adalah proses mengembangkan dialog antara seseorang dan produk, sistem, atau layanan. Pada implementasinya desain interaksi adalah sebuah umpan balik setelah pengguna melakukan sebuah aksi tertentu seperti scroll, swipe, tombol yang diklik, atau pindah ke halaman lain. Umpan balik tersebut diwujudkan sesuai sifat responnya seperti transisi, animasi, teks, warna, bahkan tata letak.
Duolingo, sebagai platform pembelajaran bahasa, memahami dan mengimplementasi hal ini dengan sangat baik. Setiap elemen interaktif dalam Duolingo dirancang untuk menciptakan pengalaman belajar yang menyenangkan dan memotivasi. Misalnya, animasi yang muncul saat pengguna menyelesaikan pelajaran memberikan rasa pencapaian yang instan sehingga memperkuat motivasi untuk terus belajar. Mengutip dari penelitian Yan Qi dan Rui Xu, design antarmuka yang dioptimalkan melalui implementasi interaksi interaktif dapat meningkatkan kepuasan pengguna secara signifikan.
Kami di BADR Interactive menyambut interaksi interaktif dengan hangat melalui mengimplementasi di project yang kami tangani dan tutorial yang akan kami bagikan untuk anda. Berikut adalah tutorial interaksi interaktif counting number menggunakan web scrolling dan variable di Figma.
Tutorial 1: Interaksi Counting Number
Pada tutorial pertama ini kita akan membuat interaksi counting number menggunakan web scrolling, interaksi ini cocok digunakan pada halaman landing page yang membutuhkan preview cepat saat user melakukan scrolling halaman.
1. Siapkan elemen design yang ingin kamu tambahkan interaksi pada counting number, lalu duplicate 1 layer text yang kamu pakai pada score card tersebut.
2. Tetapkan angka awal dan angka akhir yang akan di tampilkan pada score card tersebut, lalu tentukan jarak penambahan angka diantara angka awal dan akhir tersebut, kamu bisa memberikan variasi urutannya menjadi decrement, jika ingin memberikan sentuhan berbeda.
Lalu berikan auto layout pada angka-angka tersebut dan lakukan hal yang sama untuk angka score card lainnya.
3. Atur dimensions text tersebut menjadi fixed dengan tinggi yang kamu inginkan. Secara default alignment auto layout pada layer tersebut menggunakan align top left, Jika kamu menggunakan skala decrement pada angkanya ubah menjadi align bottom left. Dengan begitu urutan penambahan angkanya sesuai dengan simulasi penambahannya.
4. Sekarang, replace angka pada elemen desain kamu menggunakan layer auto layout yang sudah kamu buat. Selamat! Kamu sudah selesai membuat state awal angka pada score card. Selanjutnya buat elemen tersebut menjadi komponen, lalu tambahkan varian yang akan menjadi state akhir angka pada score card.
5. Pada tab prototype, hubungkan elemen state awal ke state akhir dan tambahkan mouse enter dan smart animate. Langkah terakhir! Ganti elemen pada layout mockup anda menggunakan komponen elemen desain yang sudah anda buat.
Klik play icon untuk present prototype atau shift + space untuk quick preview nya.
TUTORIAL 2: Counting with Variables
Berbeda dengan tutorial pertama, alih-alih membuat state awal dan akhir kita justru akan memanfaatkan fitur variable dari Figma untuk menciptakan interaksi kelipatan angka pada counting number, interaksi ini cocok digunakan pada halaman dashboard untuk user mendapatkan update pencapaian terakhir.
1. Siapkan elemen desain yang ingin kamu tambahkan pada interaksi counting number, kemudian buat komponen dari layer text yang kamu pakai pada score card tersebut lalu ganti angkanya menjadi 0. Tambahkan varian dari komponen tersebut, sekarang kita memiliki 2 layer varian text layer bukan? Kita akan menggunakannya sebagai angka awal dan angka akhir pada scorecard yang akan digunakan.
2. Disini kita akan menggunakan nilai 0 sebagai angka awal di setiap score card, oleh karena itu kita perlu membuat variabel dengan tipe number, berikan nilai 0 dan nama sesuai scorecard masing-masing.
3. Pilih layer text yang berada di sub layer varian masing-masing, lalu hubungkan dengan variabel yang sudah dibuat sebelumnya, pada contoh kali ini kita akan melakukannya untuk score card pertama lebih dulu seperti contoh berikut:
4. Pindah ke tab prototype lalu sambungkan varian angka awal ke angka akhir, kemudian tambah kondisi logika untuk batas akhir yang akan ditampilkan dan atur variabel dengan target dan value sebagai berikut:
5. Tambahkan kondisi logika dan set variable pada interaksi angka awal, disini contoh yang diberikan yaitu jika variabel SMDV kurang dari 10.545 maka tambah nilainya sebanyak 250.
6. Selanjutnya, sambungkan varian angka akhir ke angka awal menggunakan varian berikut:
7. Lakukan hal yang sama untuk membuat interaksi di scorecard lainnya. Lalu replace elemen pada layout mockup anda menggunakan komponen yang sudah anda buat. klik play icon untuk present prototype atau shift + space untuk quick preview nya.
Melalui tutorial interaksi interaktif web scrolling counting number ini, kami menunjukkan bagaimana sebuah elemen visual yang sederhana namun efektif dapat memberikan dampak besar terhadap keterlibatan pengunjung. Animasi angka yang muncul saat pengunjung menelusuri landing page atau kelipatan angka yang ditambahkan pada dashboard bukan hanya memperkuat kredibilitas, tapi juga menjadi cara yang menarik untuk menyampaikan jangkauan dan dampak positif perusahaan, terutama dalam konteks profil bisnis atau studi kasus.Dengan pengalaman lebih dari 11 tahun, BADR Interactive berkomitmen untuk menghadirkan solusi design dan pengembangan perangkat lunak yang tidak hanya estetis, tetapi juga fungsional dan relevan dengan tujuan bisnis Anda. Kami percaya bahwa interaksi yang dirancang dengan cermat adalah jembatan antara nilai perusahaan dan pengalaman pengguna. Konsultasikan kebutuhan digital Anda bersama kami, dan mari kita wujudkan produk digital yang berdampak dan bermakna.
