Implementasi 5 Prinsip Desain Interaksi pada Antarmuka Aplikasi Musik
Dokumentasi tugas kuliah mengenai penerapan prinsip desain interaksi (Visibility, Feedback, Constraints, Consistency, dan Affordance) pada UI pemutar musik, dengan referensi pendukung dari standar desain aplikasi.
Ternyata, bikin desain aplikasi itu nggak cuma soal naruh tombol biar kelihatan estetik. Pas masuk ke materi kuliah Pertemuan Kedua kemarin, saya baru sadar kalau di balik setiap posisi tombol, ada prinsip psikologi interaksi yang harus dijaga biar pengguna nggak bingung.
Kali ini saya mencoba merancang sebuah layar Now Playing untuk aplikasi musik. Berikut adalah bagaimana saya menerapkan 5 mantra desain interaksi di dalamnya.
// Gambar Antarmuka Music Player
1. Kejelasan yang Terlihat (Visibility)
Prinsip pertama adalah memastikan pengguna tahu apa yang harus dilakukan tanpa perlu mikir lama. Di desain ini, saya sengaja bikin tombol Play di tengah dengan ukuran paling dominan dan warna merah yang kontras. Tujuannya jelas: supaya mata pengguna langsung tertuju ke kontrol utama musiknya.
2. Memberi Respon (Feedback)
Aplikasi yang baik itu harus "ngomong" balik ke penggunanya. Saya menerapkan ini pada progress bar yang berwarna merah. Dengan melihat garis yang terisi, pengguna dapet feedback instan kalau lagunya lagi jalan dan sudah sampai di menit keberapa. Tanpa ini, kita bakal nebak-nebak, "ini aplikasinya macet atau emang lagunya lagi intro?"
3. Batasan yang Menuntun (Constraints)
Kadang, membatasi pilihan itu lebih baik daripada membebaskan pengguna. Perhatikan ikon Shuffle dan Repeat yang saya buat agak transparan (redup). Ini adalah cara saya menerapkan constraints—memberitahu pengguna secara visual bahwa fitur tersebut sedang tidak aktif, jadi mereka nggak akan bingung pas ngeklik tapi nggak terjadi apa-apa.
4. Konsistensi Gaya (Consistency)
Supaya pengguna nggak perlu belajar ulang, saya pakai ikon navigasi bawah (Home, Search, Library) yang sudah standar. Konsistensi ini penting banget di dunia UI/UX supaya pengalaman pengguna di aplikasi kita tetap selaras dengan aplikasi populer lainnya yang biasa mereka pakai.
5. Petunjuk Alami (Affordance)
Terakhir soal Affordance. Kenapa tombol Play bentuknya bulat dan slider durasi bentuknya garis panjang? Karena secara naluriah, bentuk itu ngasih petunjuk kalau "ini bisa ditekan" dan "ini bisa digeser". Kita nggak butuh tulisan "Klik di sini", karena bentuknya sendiri sudah bicara.
"Desain yang baik bukan soal menambah banyak fitur, tapi soal bagaimana fitur yang ada bisa dipahami tanpa instruksi."
Penutup
Tugas ini jadi pengingat kalau desain itu tentang komunikasi antara sistem dan manusia. Meskipun ini cuma tugas kuliah, proses mikirin penempatan elemen-elemen ini lumayan seru, apalagi pas dikerjain di Figma.
Kalau kalian punya pendapat soal desain ini, atau mungkin ada masukan buat next project, langsung drop aja di kolom komentar atau kontak saya ya!
Referensi & Sumber:
- Materi Kuliah: Desain Interaksi Pertemuan 2 - Interaction Design Principles.
- Bacaan Tambahan: 5 Prinsip Dasar User Interface Design oleh KantorKita.