Contoh wireframe oleh Alifmikailavi

Apa yang Sebenarnya Dikomunikasikan oleh Wireframe

Sebuah wireframe adalah gambaran kerangka (skeletal) dari sebuah layout desain, yang digunakan untuk menunjukkan struktur dan fungsi suatu antarmuka sebelum ada satu pun keputusan desain visual yang diambil. Warna, gambar, dan tipografi sengaja tidak dimasukkan, supaya diskusi dengan stakeholder tetap fokus pada layout, prioritas konten, dan navigasi, bukan malah terganggu oleh perdebatan soal estetika. Low-fidelity wireframe khususnya biasanya hitam putih, statis, dan hanya berupa kotak-kotak serta garis sederhana, bukan annotation yang detail dan justru itulah yang membuatnya cepat dibuat dan mudah dibuang begitu sudah tidak diperlukan.

Wireframe vs. Prototype: Kebingungan yang Sering Terjadi

Banyak orang, termasuk mahasiswa, sering menyamakan wireframe dengan prototype, padahal kedua deliverable ini menjawab pertanyaan yang berbeda. Wireframe menjawab “apa saja yang ada di halaman ini dan bagaimana susunannya”, sedangkan prototype menjawab “bagaimana halaman ini berperilaku saat pengguna berinteraksi dengannya”. Menurut glosarium UX deliverables dari Nielsen Norman Group, prototype didefinisikan sebagai versi awal dari sebuah desain yang digunakan khusus untuk menguji dan memvalidasi ide, interaksi, dan fungsi sebuah tujuan yang jelas berbeda dari fungsi komunikasi struktural yang diberikan oleh wireframe.

  • Progresi fidelity: kebanyakan tim bergerak dari wireframe → mockup → clickable prototype, di mana setiap tahap menambahkan satu lapisan fidelity yang sengaja belum ada di tahap sebelumnya.
  • Perbedaan audiens: wireframe paling cocok untuk diskusi struktural internal tim, sementara prototype dibuat untuk usability testing dengan pengguna asli atau untuk demo ke klien.

Annotation: Mengubah Gambar Menjadi Spesifikasi

Sebuah wireframe saja sifatnya ambigu; ia menunjukkan seperti apa bentuk sebuah elemen, tapi tidak menunjukkan bagaimana elemen itu berperilaku. Annotation mengisi kekosongan ini. Annotation adalah catatan singkat bernomor yang ditempatkan di luar wireframe dan dihubungkan dengan garis callout, dan fungsinya adalah menghilangkan tebak-tebakan bagi developer yang nantinya akan membangun halaman tersebut.

  • Identifikasi konten: menjelaskan dengan jelas apa elemen tersebut dan apa isinya, supaya tidak ada yang salah mengira gambar placeholder sebagai grafis dekoratif.
  • Display rules (aturan tampil): menentukan kondisi munculnya atau tersembunyinya sebuah elemen, misalnya banner yang hanya muncul untuk pengguna yang belum login (logged-out).
  • Interaction rules (aturan interaksi): menjelaskan secara persis apa yang terjadi saat pengguna mengklik, men-tap, atau melakukan hover pada sebuah elemen, termasuk ke mana aksi itu mengarah.
  • Error and feedback messaging (pesan error dan feedback): mendefinisikan apa yang dikomunikasikan sistem kembali ke pengguna saat terjadi kesalahan atau saat sebuah aksi berhasil.

Annotation sebaiknya menggunakan kata “shall”, bukan “should”, karena shall mengomunikasikan sebuah requirement yang wajib dipenuhi, sementara should masih memberi ruang untuk ditafsirkan secara berbeda. Pemilihan satu kata ini saja terbukti punya efek nyata terhadap bagaimana developer memahami sebuah spesifikasi, karena ambiguitas dalam bahasa annotation adalah salah satu sumber paling umum dari ketidaksesuaian ekspektasi antara tim desain dan tim development.

Penulis:

D7267 – Samson Ndruru

Sumber:

  • Nielsen Norman Group. (n.d.). UX Deliverables Glossary: mendefinisikan istilah wireframe, mockup, dan prototype serta perbedaan fungsinya dalam proses desain.
  • Nielsen Norman Group. (n.d.). UX Prototypes: Low Fidelity vs. High Fidelity. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/ membahas kapan sebaiknya memakai prototype dengan fidelity rendah dan kapan beralih ke fidelity tinggi untuk usability testing.
  • Nielsen Norman Group. (n.d.). How to Draw a Wireframe (Even if You Can’t Draw). https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/ panduan praktis menggambar elemen-elemen umum dalam wireframe seperti header, tombol, dan dropdown.
  • Unger, R., & Chandler, C. A Project Guide to UX Design bab “Wireframes and Annotations” yang menjadi rujukan asal untuk konsep annotation dan perbandingan kata shall vs should dalam penulisan spesifikasi untuk developer.