Perbedaan Wireframe vs Mockup vs Prototipe

Pada artikel kali ini, kita akan membahas perbedaan anatara wireframe vs mockup vs prototipe dalam membuat sebuah produk.

Membangun produk adalah usaha yang berisiko dan memakan banyak sumber daya. Untungnya, ada alat yang dirancang untuk membantu kita mengurangi risiko dalam keseluruhan proses.

Katakanlah kita sedang membuat aplikasi seluler. Akan sangat bodoh jika kita mulai menulis kode dari hari pertama. Lagipula, kita belum tahu apa sebenarnya yang sedang kita buat, apalagi seperti apa tampilannya. Melakukan iterasi pada aplikasi yang sebenarnya adalah bentuk iterasi yang paling mahal.

Itulah mengapa para desainer menggunakan berbagai teknik, seperti wireframing, membuat mockup, dan membuat prototipe, untuk menguji ide dengan cepat sebelum membangun produk yang sebenarnya. Namun, apa perbedaan antara wireframe, mockup, dan prototipe?

Mari kita lihat lebih dekat masing-masing dan lihat perbandingannya.

Apa yang dimaksud dengan wireframe?

Wireframe adalah sketsa cepat yang mendemonstrasikan sebuah ide. Hal ini dilakukan dengan menggunakan alat grafis, cat windows, atau bahkan pena dan selembar tisu.

Ada tiga alasan utama untuk menulis wireframe:

• Membantu kita memvisualisasikan pemikiran kita – Seperti kata pepatah, sebuah gambar bernilai 1.000 kata. Beberapa hal jauh lebih mudah ditunjukkan daripada dijelaskan
• Menyelaraskan orang-orang – Wireframe memberikan tim sesuatu yang spesifik untuk dirujuk. Hal ini mengurangi risiko orang memvisualisasikan hal-hal yang sangat berbeda dan membuat semua orang berada di halaman yang sama
• Menyusun diskusi – Kemampuan untuk menunjuk ke elemen desain tertentu adalah pengubah permainan

Katakanlah kita sedang mendiskusikan seperti apa alur aplikasi kita. Jika kita hanya membicarakannya, kita akan kesulitan untuk mencapai keputusan apa pun. Namun jika semua orang membuat sketsa seperti apa alur pengguna yang mereka bayangkan, kita akan memiliki sesuatu yang spesifik untuk dievaluasi dan dibandingkan.

Wireframe yang cepat dapat menghemat waktu berjam-jam untuk diskusi dan kesalahpahaman yang tak berujung. Waktu yang dibutuhkan: Sekitar 2 menit.

Apa yang dimaksud dengan mockup?

Mockup adalah wireframe yang dibawa ke tingkat berikutnya. Biasanya dilakukan dalam program grafis oleh perancang UX/manajer produk (low-fidelity) atau perancang UI (medium/high-fidelity).

Tujuan dari mockup sangat bergantung pada ketepatannya, jadi mari kita uraikan.

Low-fidelity

Mockup dengan low-fidelity adalah versi digital, versi yang lebih dipikirkan dengan matang dari wireframe. Seorang desainer UX atau manajer produk biasanya melakukan ini.

Tujuan dari wireframe dengan low-fidelity adalah untuk menunjukkan seperti apa struktur aplikasi yang seharusnya. Ini membantu Anda mengevaluasi pengalaman pengguna secara keseluruhan.

Mockup dengan ketelitian rendah digunakan untuk menilai:

• Alur pengguna
• Arsitektur informasi
• Navigasi

Mockup lo-fi membantu semua orang memahami keseluruhan arsitektur dan struktur aplikasi. Waktu yang dibutuhkan: Sekitar 15 menit.

Medium-fidelity

Mockup dengan medium-fidelity lahir ketika kita mengambil mockup dengan low-fidelity dan mulai menambahkan warna dan merek.

Meskipun kami masih menilai hal-hal seperti struktur keseluruhan, arsitektur informasi, dll., kami juga fokus pada tampilan dan nuansa aplikasi secara keseluruhan: Bagaimana representasi visualnya? Jenis pesan apa yang disampaikannya? Apakah mudah diakses dan intuitif?

Kami belum fokus pada detail. Salinannya belum sempurna; gambar hanya berupa placeholder dan tombol masih perlu dibulatkan. Penilaian tingkat tinggi adalah yang kami cari.

Mockup dengan medium-fidelity digunakan untuk menilai:

• Tampilan dan nuansa keseluruhan
• Branding

Mockup dengan medium-fidelity memungkinkan kita untuk menilai tampilan dan nuansa aplikasi. Waktu yang dibutuhkan: Sekitar 2 jam.

High-fidelity

Mockup dengan high-fidelity adalah kandidat produk akhir kami. Setiap titik dan piksel sudah ada di tempatnya. Sekarang kita bisa memilih dan fokus pada detail dan sentuhan akhir.

Setelah selesai, mockup dengan high-fidelity dapat diserahkan kepada tim pengembangan untuk diimplementasikan.

Gambar rangka dengan ketelitian tinggi digunakan untuk menilai:

• Estetika
• Detail desain
• Grafik dan salinan

Mockup dengan high-fidelity memungkinkan kita untuk fokus pada detail dan sentuhan akhir. Waktu yang dibutuhkan: Sekitar 5 jam.

Low vs Medium vs High fidelity mockup

Bagaimana Anda memutuskan level fidelity yang akan difokuskan? Jawabannya sederhana: Anda tidak perlu melakukannya.

Level fidelity yang berbeda, tidak hanya memiliki tujuan yang berbeda, tetapi juga saling melengkapi. Kami menggunakan mockup dengan low-fidelity sebagai dasar untuk mockup dengan medium-fidelity, yang kemudian diubah menjadi produk akhir dengan high-fidelity.

Mungkin Anda tergoda untuk langsung melompat ke mockup high-fidelity, tetapi hal ini jarang sekali sepadan.

Pertama, perubahan apa pun pada mockup hi-fi lebih mahal daripada perubahan pada mockup lo-fi atau bahkan wireframe.

Juga sulit untuk fokus pada gambaran besar ketika mengevaluasi mockup hi-fi. Sangat mudah untuk terpaku pada bayangan di sekitar tombol CTA, bahkan jika kita belum yakin apakah kita ingin memiliki CTA di sana. Itulah salah satu alasan mengapa mockup hi-fi tidak berwarna dan lugas: untuk mempromosikan fokus pada gambaran besar vs. detail yang tidak relevan.

Kita membutuhkan mockup dengan low-fidelity dan high-fidelity untuk benar-benar mendapatkan hasil maksimal dari fase desain.

Setelah kita mengetahui perbedaan wireframe denga mockup, selanjutnya kita akan membahas perbedaan mockup dengan prototipe.

Mockup vs prototipe

Prototipe lahir ketika kita menambahkan interaksi pada mockup. Sama seperti dalam kasus mockup, keakuratan prototipe sangat bervariasi.

Kita benar-benar dapat menggunakan potongan kertas untuk membuat prototipe dengan low-fidelity dan menguji reaksi awal. Di sisi lain, prototipe yang lengkap dan terperinci sering kali tidak dapat dibedakan dari aplikasi yang sebenarnya.

Berlawanan dengan mockup statis, prototipe memungkinkan kita mengalami interaksi secara keseluruhan. Kita bisa mengetuk berbagai hal, melihat bagaimana desainnya berubah, dan secara umum “merasakan” produknya. Kita tidak akan mendapatkan pengalaman yang sama (atau umpan balik) jika kita hanya menunjukkan mockup kepada calon pelanggan dan meminta mereka untuk menilainya.

Jika kita membangun alur pengguna yang benar-benar inovatif, kita harus mulai membuat prototipe sedini mungkin. Namun, jika kita mendesain alur pengguna yang sudah teruji, seperti alur e-commerce, kita dapat menghemat biaya dan fokus pada pembuatan prototipe dengan high-fidelity.

Bagaimana cara menyatukan wireframe, mockup, dan prototipe?

Wireframe, mockup, dan prototipe memiliki perbedaan serta memainkan peran penting dalam pengembangan produk, dan semuanya memiliki tujuan yang berbeda.

Wireframe membantu kita memvisualisasikan pemikiran kita dan meningkatkan kolaborasi. Mockup kemudian memungkinkan kita untuk menilai dan mengumpulkan umpan balik tentang arsitektur informasi, tampilan dan nuansa, dan detail intrinsik. Kita dapat mendukung proses dengan prototipe untuk mengumpulkan umpan balik yang lebih rinci.

Di dunia yang sempurna, di mana waktu dan uang tidak menjadi masalah, Anda harus melakukan semua langkah berikut ini:

• Mulailah dengan gambar rangka untuk menciptakan pemahaman
• Buatlah mockup dengan low-fidelity untuk menilai struktur tingkat tinggi
• Konfirmasikan dengan prototipe kertas
• Buat mockup dengan medium-fidelity untuk menentukan tampilan dan nuansa keseluruhan
• Konfirmasi dengan prototipe digital
• Buat mockup dengan high-fidelity untuk mengevaluasi hasil
• Mensimulasikan pengalaman aplikasi nyata dengan prototipe yang terperinci
• Membangun aplikasi

Namun dalam praktiknya, tidak masalah untuk melewatkan beberapa langkah. Semuanya tergantung pada kepercayaan diri, sumber daya, dan risiko yang ingin Anda ambil.