Belajar Interaction Design (IxD) — cara membuat UI Prototype era digital
Setelah di post sebelumnya kita membahas langkah mudah memulai belajar UI dan UX design bagi pemula, sekarang kita bahas lebih dekat mengenai Interaction Design.
Sebelum kamu bingung dengan istilah yang berseliweran, kita kasih penjelasan singkat dulu ya.
Interaction design biasa disingkat IxD, merupakan disiplin ilmu yang mempelajari interaksi antara pengguna dan suatu produk, baik itu produk digital maupun physical.
Kalau dibuat irisan, IxD terdiri dari berbagai disiplin ilmu; yaitu Industrial Design dengan Human Computer Interaction nya (HCI), Architecture dengan Interactive Environments nya, Communication Design dengan UID nya, dan Motion Design dengan User Interface Scenography nya.
Orang yang berprofesi di bidang ini disebut Interaction Designer, ada juga yang menyebutnya UX Engineer atau sebagian perusahaan menyebutnya Design Technologyst.
Di industri kita, istilah Interaction design sering tercampur dengan Motion Design yang merupakan disiplin ilmu yang menerapkan prinsip2 animasi dalam desain interface. Interaction yang akan kita bahas disini yaitu Interaction design yang menyerempet dengan Motion Design ini ya gaes.
💡 Fun fact.
Kebutuhan akan pekerjaan ini semakin meningkat di 5 tahun terakhir. Faktanya ada sekitar 81+ Interaction Design Job baik Freelance atau Full-time Remote di 3 bulan terakhir (Halodesigners.com).
Belajar Interaction Design (IxD)
Interaction design (IxD) salah satu aspek penting dalam user experience. Peran utamanya yaitu dalam membentuk prototype desain kita.
Desain UI yang sudah terbentuk dalam screen2 (biasa disebut mockups) masih bersifat statis. Kalau kita berhenti disana, banyak kemungkinan informasi yang tidak tersampaikan dengan optimal sehingga butuh adanya langkah lanjutan yaitu membuat protoype menggunakan prinsip2 motion design.
Protoyping sendiri uda bukan barang baru. Berbagai industri udah menerapkan konsep ini; Robotics, otomotif, infrastruktur, fashion, manufacturing, agriculture, you name it. Mereka uda merasakan bukti ampuhnya Prototyping dalam mengatasi masalah2 unik mereka.
Kenapa Prototyping Penting?
Karena menghemat waktu dan biaya perusahaan.
Sejatinya prototyping membuat replika dari produk asli. Temen2 yang kerja di product companies, pasti tau kalo bikin product itu ga cuman susah tapi juga makan banyak waktu dan biaya. Kalau kita buat product/ feature baru, lalu kita nunggu sampai kelar productnya baru kita test (apapun itu test nya), kemungkinan besar hasilnya akan mengecewakan.
Untuk ngebenerin nya lagi?
Harus ngelakuin 1 product cycle lagi?
capek ya (banget)… , costly pula.
Disinilah peran nya prototyping, yaitu…
Prototyping membuat proses validasi ide lebih cepat 🏃🏻♂️ proses repitisi lebih hemat 💰.
Jenis Prototyping
Dari media nya, UI prototyping ada 2 jenis
- Analog prototyping
- Digital prototyping
Analog, biasanya menggunakan media kertas, dibuat untuk validasi ide awal dan mengkonfirmasi hal2 fundamental. Seperti alur kerja suatu sistem (workflow dan user jorney), peletakan dan juga pengklasifikasian informasi (Information Architecture).
Kalau digital, sifatnya lebih interaktif dan engaging. Semua elemen visual sudah siap. Medianya pun lebih beragam (segala smart devices) dan dapat disebarluaskan relatif lebih mudah dan ekonomis serta bisa lebih cepat diproduksi pada skala besar.
Seiring dengan semakin mudahnya, murahnya dan cepatnya teknologi membuat prototype digital, sekarang prototype analog tidak banyak lagi diminati. Mayoritas UX dan UI designer menggunakan prorotype digital baik untuk wireframing, pengambilan ide cepat (brainstorming), penyusunan alur kerja, maupun penerapan detail micro interactions.
Bagaimana proses prototyping?
Kalau kalian masih ingat runutan proses kerja saya sebelumnya, prototyping berada di posisi ke 4. Kalau dalam design sprint, prototyping ini masuk dalam proses desain dan iterasi.
Dilakukan setelah mockup kita sudah selesai, baik low-fi atau high-fi, tergantung dari tujuannya.
Kalau tujuannya mengetes tata letak dan pengklasifikasian informasi, lo-fi prototyping bisa dirasa cukup.
Kalau tujuannya mengetest alur kerja spesifik suatu page/ elemen dan kemudahan memahami informasi (comprehension), atau mengetes penyampain emosi suatu animasi, high-fi prototyping lebih tepat.
Perlu diingat…
Motion is not something added on at the end, but something that requires consideration during the design of any two screens.
— pesan dari Google Motion Team
Tools prototyping apa aja kak?
Banyak banget pilihannya. Mau mac atau windows smua ada. Banyak yang free juga jadi kalian bisa mulai coba and start to expand your skill-set.
Kalau saya coba untuk petakan berdasarkan tingkat kesulitan dan ke-epic-an, kira2 persebarannya seperti ini:
Kalian bisa pilih satu aja yang paling cocok dengan workflow kamu dan tim. Tips untuk memilih, tumpukan pada kebutuhan. Kalau butuh micro interactions dan feasibility test menuju the most realistic medium, kamu pilih bagian kanan atas.
Kalau bagian kiri bawah, baik untuk rapid prototyping dan quick flow-testing.
Dari 12 tools di atas, apa aja yang udah kamu coba? 🙂
Saran saya kalau kamu baru memulai belajar, pilih Figma sebagai tool andalanmu. Figma bisa digunanakan untuk mendesain UI, juga bisa digunakan untuk proses pembuatan prototype (IxD), bahkan Figma pun bisa digunakan untuk proses2 lainnya, seperti brainstorming, card sorting, design sprint atau kerjaan desain lainnya yang membutuhkan unsur kolaborasi.
Kalau kamu sudah berada di tahap penjajakan keatas, boleh lah memperkaya khasanah penguasaan keterampilan mu ke tools2 lain seperti Framer, Principle, Flinto atau Protopie.
Di Figma kamu bisa membuat animasi untuk mobile app maupun untuk web app. Bisa full satu aplikasi atau untuk sebagian komponen kecil seperti di atas. Di akun instagram 👋 @Halodesigners pun banyak mengulas tentang desain UI dan prototyping menggunakan Figma. Untuk memulai nya, sumber ini jadi awal yang bagus.
Next Artikel kita bahas tentang Handoff dan proses Dokumentasi Desain. Keduanya penting loh biar kita ga selék ama developer. 🙃
Follow Medium HaloDesigners untuk dapet update2 selanjutnya.
Dan follow juga Instagram kita @halodesigners untuk belajar bersama UI Design, UX Design dan UX Research bareng temen2 yang baru memulai dan profesional lainnya. Sstt.. kita sering bagi2 tips dan mentoring desain gratis loh.
Kalo kamu lagi hunting kerjaan atau internship sebagai UI Designer, UX Designer, atau UX Researcher, beberapa hari lalu ada perusahaan unicorn besar yang nge post di HaloDesigners.com untuk role yang mungkin cocok dengan profil mu. Cek di HaloDesigners.com
Selamat belajar!
