Low fidelity dan high fidelity Mockup

Evan Gilang Ramadhan
UNIKOM Codelabs
Published in
4 min readDec 13, 2017

Dalam mendesain sebuah aplikasi pasti tidak asing dengan istilah low fidelity mockup dan high fidelity mockup atau singkatnya lo-fi dan hi-fi Mockup. Mungkin jika baru mendengarnya lo-fi mockup merupakan blueprint atau kerangka dari desain aplikasi yang akan dibuat nantinya

Low-fidelity Mockup

Lo-fi mockup atau yang bisa disebut wireframe sendiri lebih berfokus pada elemen-elemen dasar dari sebuah antar muka aplikasi, elemen yang dimaksud seperti button, navigasi, text dll.

Sedangkan High Fidelity Mockup atau hi-fi mockup merupakan desain jadi dari aplikasi yang akan dibuat. Hi-fi mockup merupakan versi detail dari lo-fi mockup, Detail-detail yang ditambahkan pada hi-fi mockup seperti warna, icon, dll.

My Case study : Beelajar App

Beelajar merupakan sebuah aplikasi yang memudahkan orang untuk dapat mendapat guru privat nya sendiri. Aplikasi beelajar merupakan aplikasi yang dibuat untuk memenuhi tugas rekayasa perangkat lunak yang diberikan oleh bapak Adam Mukharil Bachtiar yang menjadi dosen RPL saya waktu itu.

Kebetulan saya berperan sebagai designer dalam tim pembuat aplikasi ini. Setelah serangkaian user research seadanya akhirnya masuk ke tahap ideation. Kami sepakat untuk membuat low-fidelity mockup bersama-sama. dan muncul hasilnya seperti berikut

Sketch Low-fidelity mockup beelajar
Sketch High Fidelity Mockup

Dalam project ini low-fidelity mockup (wireframe) tidak dituangkan dalam bentuk digital karena keterbatasan waktu. namum wireframe seperti ini sudah dapat menggambarkan bagaimana desain aplikasi yang akan dibuat. Dengan membuat wireframe elemen-elemen seperti button label, navigation dalam aplikasi sudah jelas meskipun belum detail.

Setelah semua anggota tim setuju dengan wireframe ini lalu saya melanjutkannya dengan membuat high-fidelity mockup dengan menggunakan photoshop untuk memberikan detail seperti warna, gambar, icon, dan lain sebagainya. Dengan membuat high-fidelity mockup, desain aplikasi yang dibuat sudah berubah menjadi bentuk yang lebih nyata dan dapat digunakan oleh developer untuk mengimplementasikan desain ini untuk menjadi aplikasi yang dapat digunakan

Hi-fidelity Mockup dari aplikasi Beelajar

Kapan harus menggunakan low fidelity dan kapan harus menggunakan High Fidelity

Menurut saya pengunaan low fidelity sangat baik ketika kita akan memvalidasi desain kita lebih awal ke user. Karena dengan memperlihatkan low-fidelity mockup kepada user, user tidak terlalu fokus pada detail yang ada dan hanya fokus kepada flow aplikasinya. Selain itu, dengan menggunakan low fidelity mockup untuk validasi desain kita, kita tidak membuang-buang waktu untuk mendetailkan desain sebelum divalidasi kepada user.

Lalu kapan harus menggunakan high fidelity mockup ? kalau saya sendiri menggunakan high-fidelity ketika mockup akan diberikan kepada developer untuk di implementasi. Jika menggunakannya untuk keperluan testing seperti usability testing, itu juga bagus untuk dilakukan. Karena user merasa seperti sedang menggunakan aplikasi aslinya dan bagus untuk kita karena kita dapat mengetahui apa yang dirasakan user ketika menggunakan aplikasi.

Kesimpulan

Lo-fi mockup dalam proses desain aplikasi merupakan hal yang vital, karena itu yang akan jadi pondasi dari desain aplikasi yang akan dibuat nantinya. selain itu lo-fi mockup juga berguna untuk test antarmuka lebih awal kepada user sehingga kita tidak perlu membuat mockup yg detail dulu lalu mengetesnya kemudian. Hi-fi mockup digunakan untuk dideliver kepada developer dan juga dapat digunakan untuk di tes langsung kepada user, hi-fi mockup mempunyai dampak yg berbeda kepada user karena hi-fi mockup sudah menyerupai aplikasi jadi lebih banyak feedback yang kita dapatkan.

disclaimer: Beberapa pendapat dalam tulisan ini merupakan opini saya pribadi, jadi mohon maaf bila ada yang kurang ‘sreg’ atau tidak berkenan.Juga bila ada istilah-istilah yang salah dalam tulisan ini saya harap maklum karena masih tahap belajar. Oh iya jika punya pendapat tentang lo-fi mockup dan hi-fi mockup mari kita diskusikan bersama di kolom komentar ! :D

--

--

Evan Gilang Ramadhan
UNIKOM Codelabs

I currently work as a Research Manager @ GizaLab, I love observing people!