Wireframe dan Mockup, sepenting itu kah?
Halo halo, ketemu lagi dengan saya di post ke-5 ini. Kali ini saya akan mencoba memaparkan apa itu wireframe dan mockup serta pentingnya kedua hal tersebut untuk proyek yang kita kerjakan.
Apa itu Wireframe?
Sebelum mulai kita intermezo dulu. Tau ngga kalau Wireframe itu nama doujin circle? Ok, intermezo selesai.
Wireframe definisi singkatnya sih merupakan blueprint atau denah. Seperti denah rumah yang dibuat oleh designer bangunan, IT pun mengenal yang namanya denah halaman page yang dalam hal ini dibuat oleh hipster(s) pada sebuah tim.
Jelas pula bahwa yang digambarkan sebatas kerangkanya saja, belum termasuk detail seperti pewarnaan dan assets yang digunakan. Detail-detail tersebut baru digunakan ketika membuat wireframe.
Contoh aplikasi pembuatan Wireframe berbasis web : https://wireframe.cc/
Lalu apa itu Mockup?
Mau intermezo tapi saya ngga punya ide. Jadi kita skip.
Jika wireframe merupakan blueprint, maka mockup sudah merupakan bentuk yang mendekati hasil akhir yang dibayangkan oleh yang mendesign.
Apakah mockup harus sama persis dengan wireframe nya? Pendapat saya pribadi sih tidak. Yang penting secara fungsionalitas sudah sesuai dengan yang diinginkan dari rancangan awal. Bahkan fungsionalitasnya bisa bertambah karena seringkali ide tiba-tiba datang atau malah berkurang ketika satu bagian dari rancangan awal ternyata tidak perlu.
Contoh aplikasi pembuatan Mockup berbasis web : https://marvelapp.com/
Ada aturannya ngga?
Nah, kan udah tau beda dan kegunaannya. Sekarang pasti ada yang bertanya-tanya :
Ada aturan yang jadi standar pembuatan wireframe dan mockup ngga?
Jawabannya : Ada, namanya 10 Usability Heuristics for User Interface Design yang dipaparkan oleh Jakob Nielson. Saya bakal tulis beberapa poin nya sekaligus saya jelaskan apakah sudah saya dan teman saya terapkan untuk wireframe dan mockup yang sudah kami buat.
Visibility of system status
Setiap aksi yang dilakukan oleh user harus jelas feedback nya. Dalam hal ini misal ketika saya menekan tombol ‘Notify’ pada mock up di bawah ini :
Karena saya belum menekan centang pada user manapun, maka yang benar page akan memberi feedback untuk mencentang user satu atau lebih. Ketika sudah saya centang, page akan memberi tahu bahwa ‘Notify’ sudah dijalankan dan harusnya berhasil.
Match between system and the real world
Sudah jelas, kita membuat sistem untuk orang ya harus bisa dimengerti sama orang juga. Gunakan lah bahasa Indonesia atau bahasa Inggris yang baik dan benar.
Consistency and standards
Setiap halaman yang dibuat dipastikan berbeda dan tombol-tombol yang tersedia tidak ada yang sama yang menjelaskan bahwa setiap tombol memiliki fungsi yang berbeda.
Error prevention
Contoh error prevention paling mudah adalah dengan memberi peringatan bila ada field-field yang haus diisi untuk melakukan sesuatu. Tetapi untuk menghindari orang-orang yang tidak memperhatikan dan meninggalkan field kosong tetap menampilkan notifikasi untuk field yang belum diisi.
Aesthetic and minimalist design
Dari beberapa contoh mockup di atas, sudah cukup menjelaskan kan? Setiap page yang dibuat hanya menampilkan apa yang dibutuhkan user ketika user berada page tersebut.
Help users recognize, diagnose, and recover from errors
Seperti yang dijelaskan di atas, penampilan error harus dimengerti dengan mudah oleh user dan jelas langkah yang harus dilakukan untuk menghindari error tersebut.
Detailnya bisa dibaca di : https://www.nngroup.com/articles/ten-usability-heuristics/
Penutup
Pada akhirnya penting atau tidak pentingnya wireframe dan mockup memang tergantung dari masing-masing programmer individual atau team pada suatu proyek. Namun, dengan adanya wireframe dan mockup setidaknya muncul gambaran untuk tampilan dari suatu web yang kita ingin buat. Tentunya dengan bantuan wireframe dan mockup hal-hal yang berhubungan dengan tampilan sudah dapat diselesaikan dari awal tinggal diterjemahkan dalam bentuk kode dan melakukan improvisasi seiring berjalannya proyek.
Sampai jumpa di lain kesempatan!
