Ramai sebenarnya yang keliru mengenai perbezaan wireframe, mockup dan prototaip dalam rekaan UI/UX. Jangan tidak percaya kalau saya cakapkan yang kekeliruan itu turut berlaku dikalangan mereka yang berada didalam bidang IT. Sunguh!!
Kebiasaannya mereka menganggap ketiga-tiga rekaan ini adalah benda yang sama. Maklumlah wireframe, mockup dan prototaip ini adalah rekaan yang kebiasaannya dibuat sebelum pelaksanaan projek. Jadi jangan peliklah kalau ada business executive atau System Analysis marah kenapa mockup tak boleh tekan (diklik).Ehh!!
Kepentingan wireframe, mockup dan prototaip
Rekaan sistem kebiasaannya melalui beberapa fasa rekaan yang menterjemahkan masalah kepada keperluan, keperluan kepada fungsi, fungsi kepada rekaan dan rekaan membentuk grafik dan pengalaman. Kesemua ini berkait rapat dengan idea yang perlu konsisten dengan semua keperluan. Yang paling penting idea itu perlu diterjemahkan. Disitulah peranan wireframe, mockup dan prototaip.
Wireframe, mockup dan prototaip ini merupakan terjemahan idea tentang bagaimana sesuatu sistem atau aplikasi itu berfungsi menerusi paparan skrin yang merangkumi user interface (UI) dan user experience (UX) yang dihasilkan menerusi lakaran (sketch) diatas kertas mahukan grafik. Menerusi lakaran atau grafik itu tadi, anda akan nampak sistem flow bagaimana ia berfungsi. Lebih kurang macam storyboard la nak senang cerita.
Malahan implimentasi ini merupakan hasil daripada analisis pelanggan dan pesaing, struktur produk, strategi serta pembangunan kandungan produk. Ianya akan dijadikan rujukan sepanjang fasa pembangunan berlangsung.
Rujukan inilah yang akan digunakan oleh pihak pembangunan untuk berkomunikasi dengan client mereka mengenai keperluan sistem sama ada dipenuhi atau tidak. Jadi tak adalah berlaku isu seperti ayam bercakap dengan itik. Kita cakap bahasa IT yang bombastik, client cakap benda yang tidak jelas. Kemudian buat rekaan sistem yang tidak selari dengan kehendak pelanggan. Jangan pelik ye, saya pernah dapat client yang tak tau pun apa yang dia nak.
Sebagai contohnya jika dia berkata yang dia memerlukan sistem Customer relationship management (CRM), maknanya dia memang nak sistem CRM tanpa tau secara terperinci tentang apa yang dia hendak sebenarnya. Serius memang perkara seperti ini terjadi. Sebab itulah kita perlu memainkan peranan sebagai pembangun untuk mengumpulkan segala keperluan sistem yang merangkumi kehendak client dan dicadangkan kepadanya. Ketiga-tiga jenis rekaan ini adalah salah satu daripada kaedah yang saya maksudkan kerana ia berbentuk visual. Secara tak langsung ia jadi pemudah cara.
Perbezaan wireframe, mockup dan prototaip?
Baiklah, terdapat beberapa perbezaan yang sangat ketara yang melibatkan wireframe, mockup dan prototaip. Ianya melibatkan rekaan asas, statik dan dinamik yang mempengaruhi navigasi, struktur dan susun atur halaman. Perbezaan yang saya maksudkan adalah seperti berikut:
1. Wireframe
Wireframe ini turut dikenali sebagai low fidelity mockup merupakan sebuah blueprint atau kerangka yang menyampaikan susunan, struktur, navigasi dan pengurusan konten. Kebiasaannya wireframe ini dibuat dalam bentuk yang cukup asas seperti hitam putih kerana ketika proses ini, bukan rekaan visual yang menjadi keutamaan. Sebaliknya stuktur dan kerangka sistem termasuk susunan butang, elemen, teks, icon dan navigasi yang lebih menjadi agenda utama pembuatan.
Wireframe ini tidak semestinya dibuat menerusi lakaran diatas kertas. Sebaliknya ia juga boleh dibuat dalam bentuk digital dengan paparan yang lebih kemas asalnya fungsi-fungsi aplikasi ditunjukkan dengan jelas. Kebiasaannya wireframe ini diimplimentasikan ketika peringkat awal proses rekaan sebelum dikembangkan dalam bentuk konsep visual. Terdapat beberapa kebaikan yang boleh anda dapati menerusi penggunaa wireframe ini. Antaranya..
Kelebihan wireframe:
- Anda boleh dapat gambaran idea secara umum.
- Memudahkan proses cadangan flow sistem dengan client.
- Menjimatkan waktu rekaan outline dan struktur aplikasi.
- Murah untuk diubah jika outsourcing.
- Rekaan boleh dibuat hanya diatas kertas sahaja.
2. Mockup
Mockup yang juga dikenali sebagai high fidelity mockup merupakan satu rekaan yang menunjukkan visual akhir bagi sesebuah produk. Setiap perincian rekaan menunjukkan bagaimana rupa sesebuah aplikasi yang merangkumi kandungan, butang, warna dan juga aset. Walau bagaimanapun seperti mana wireframe, mockup tidak boleh diklik dan hanya memaparkan rekaan grafik sahaja (bersifat statik).
Mockup membantu anda membuat keputusan akhir mengenai skema warna produk, gaya visual, tipografi. Dengan mockup, anda boleh membenarkan diri anda bereksperimen dengan sisi visual produk untuk melihat apa yang kelihatan paling baik. Di sini sekali lagi, anda boleh meminta pengguna untuk memberi komen dan maklumbalas yang diperlukan segera.
Mengenai cara pembikinannya pula, anda tidak boleh melukiskannya diatas kertas. Sebaliknya anda memerlukan aplikasi rekaan yang boleh membantu untuk menghasilkan mockup yang berkualiti dan cantik.
Kelebihan mockup
- Rekaan user interface (UI) dapat diselaraskan 100% berdasarkan mockup,
- Projek boleh finalize tanpa perlu tunggu prototaip.
- Mockup menyerupai produk sebenar versi statik.
3. Prototaip
Persembahan prototaip tanpa kod menggunakan lakaran mockup
Prototaip juga dikira sebagai high fidelity kerana ia merupakan kesinambungan kepada rekaan mockup. Beza antara mockup dan prototaip ialah mockup itu lebih berfokus kepada visual dan rekaan, prototaip pula fokus kepada kesemuanya sekali termasuk flow sistem, rekaan serta fungsi yang disediakan dalam aplikasi anda. Yang paling penting, protaip boleh diklik dan ianya mempunyai kandungan yang memberi pengalaman sebenar kepada sesiapa yang menggunakannya. Erti kata lain, prototaip ini hampir menyerupai produk akhir projek.
Lebih menarik penghasilan prototaip tidak memerlukan anda untuk menulis walau sebaris pun kod pengaturcaraan. Kesemuanya boleh dihasilkan menggunakan perisian penyedia perkhidmatan prototaiping seperti Adobe XD. Jadi bolehlah anda tunjukkan kepada pengguna, pemilik perniagaan serta pembangun tentang bagaimana aplikasi atau sistem anda berfungsi. Jika fungsi tersebut tidak menepati piawaian yang diletakkan, anda boleh mengubahnya kerana protaip ini sesuatu yang nampak, bukan seperti mockup yang memerlukan anda membayangkan flow sistemnya.
Kelebihan prototaip
- Prototaip menyerupai produk sebenar versi dinamik.
- Pengguna dapat merasai sendiri pengalaman menggunakan aplikasi.
- Penjimatan tanpa perlu menulis kod sebenar.
Kesimpulannya
Apabila bermula dengan projek yang melibatkan rekabentuk, ada beberapa perkara yang anda perlu pertimbangkan. Pertama ia kerumitan UI. Kerumitan UI anda mempengaruhi dateline yang telah ditetapkan. Jika anda bekerja dalam kumpulan kecil dan punyai dateline yang singkat, pembinaan wireframe sudah memadaikan. Sentiasa mengutamakan client dan mereka yang bakal berinteraksi dengan reka bentuk sistem anda. Selain daripada benar-benar memikat client anda, fikirkan tentang pengguna akhir yang akan membantu anda melakukan ujian kebolehgunaan (usability test), dan akhirnya menilai sama ada produk anda baik atau tidak.
Baca juga: 7 sebab mengapa Boost e-wallet menjadi pilihan warga Kuala Lumpur
Baca juga: 7 Fakta Mengenai Google Yang Anda Mungkin Tidak Tahu
Jika saya kelapangan, minggu depan saya tuliskan pula tentang aplikasi yang saya gunakan untuk membuat rekaan wireframe, mockup dan prototaip. Mungkin ada diantara aplikasi tersebut mampu membantu anda untuk merancang perjalanan projek anda. Jika anda mempunyai pendapat dan cadangan, jangan segan dan silu untuk menulis diruangan komen. See ya.
