Belakangan ini saya melihat ada kecenderungan para desainer untuk melewatkan proses wireframing atau low fidelity mockups dan langsung mengerjakan tahap mendesain User Interface (UI).

Meskipun hal ini mungkin tidak berpengaruh dalam “beberapa” pekerjaan, saya yakin bahwa kecenderungan ini dapat berdampak buruk bagi kebanyakan hasil akhir projek yang Anda kerjakan.

Pertama, apa yang saya maksud dengan wireframing?

Ketika saya membahas tentang wireframing, saya tidak sedang berbicara tentang wireframe fantastis dengan pixel yang dibuat sempurna dengan warna-warna cantik dan lainnya, seperti yang mungkin Anda lihat di Dribbble.

Apa yang saya bicarakan adalah sketsa layout seperti apapun yang dibuat cepat. Cara membuatnya adalah pilihan Anda, Anda bisa menggunakan pena dan kertas, Sketch, Balsamiq Mockups, dan lain-lain. Yang penting, Anda bisa membuatnya dengan cepat, memodifikasinya bila perlu, dan tidak bermasalah membuangnya jika memang sketsa tersebut tidak bekerja.

Wireframe seharusnya menjadi sebuah cara mengekspresikan ide menyeluruh tentang sebuah halaman atau interaksi. Kita perlu lebih fokus kepada bagaimana hal tersebut bisa direalisasikan, dibandingkan penampilan wireframe tersebut.

Mengapa Anda butuh wireframe?

Jika Anda tidak melakukannya dengan benar, pembuatan wireframe mungkin terasa seperti langkah tambahan yang sia-sia, yang memakan waktu berharga yang Anda punya untuk menyelesaikan sebuah desain. Namun, alasan kita perlu membuat wireframe bukanlah sekedar sebagai ‘tulang rangka’ desain UI, melainkan agar kita bisa dengan cepat meninjau kembali, memodifikasi, serta mendapat umpan balik untuk desain yang kita buat.

Ketika Anda meminta umpan balik dari orang lain, respon yang Anda dapat dengan menunjukkan wireframe akan dibandingkan jika Anda menunjukkan desain UI yang sudah selesai. Wireframe mendorong orang lain untuk berkomentar tentang bagaimana setiap screen terhubung, proses interaksi yang ada, dan struktur halaman. Sedangkan dengan desain UI, orang akan lebih cepat berkomentar tentang penggunaan warna, feeling yang didapat dari halaman tersebut, penempatan konten, jarak antar tulisan, dan lain sebagainya.

Saya tidak mengatakan bahwa umpan balik yang satu lebih baik dari yang lainnya. Hanya, Anda akan membutuhkan kedua jenis umpan balik tersebut untuk menciptakan desain yang berhasil, maka gunakanlah keduanya untuk meningkatkan desainmu.

Mendapat umpan balik dari orang yang tepat

Kesalahan lain yang mungkin kita buat adalah menunjukkan layar (screen) yang salah ke orang yang salah.

Wireframe tidaklah untuk semua orang. Diperlukan pemahaman mengenai bagaimana wireframe tersebut akan bekerja, dan sedikit imajinasi untuk membayangkan bagaimana produk ini ketika selesai.

Maka, jika Anda menunjukkan wireframe kepada salah satu pengguna saat proses uji pengguna (user test), sangat mungkin mereka tidak memberikan umpan balik seperti yang kita harpkan. Bagi para desainer dan pekerja lain di perusahaan teknologi, prototype, mockup, dan abstraction adalah hal yang biasa mereka lihat dan gunakan.

Namun, tidaklah demikian dengan pengguna biasa. Ketika seseorang muncul untuk uji pengguna, mereka mengharapkan produk jadi. Mereka akan mengerti jika tidak semua fiturnya berfungsi atau adanya gangguan lain, tetapi mereka mempunyai ekspektasi untuk melihat hasil akhir, bukan kotak-kotak.

Tentunya situasi ini juga bergantung pada kelompok pengguna yang ditargetkan. Jadi, seperti hal-hal lainnya dalam UX desain, perhatikan target pengguna Anda untuk menentukan layar seperti apa yang akan Anda gunakan untuk proses uji pengguna.

Jika kelompok pengguna yang Anda targetkan kurang cocok untuk menguji wireframe Anda, maka pilihan terbaik kedua adalah rekan kerja di perusahaan tempat Anda bekerja. Mereka mungkin juga memerlukan penjelasan sebelum mengikuti proses pengujian, tetapi pada umumnya mereka akan lebih bersedia untuk mencoba memahami dan mempelajarinya dibandingkan pengguna biasa yang Anda undang.

Karena proses pengujian dengan rekan kerja membutuhkan budget yang lebih rendah, Anda juga bisa mencoba beberapa iterasi berbeda dengan mereka. Dan karena wireframe bisa dikerjakan/dimodifikasi dengan cepat, maka Anda bisa mendapatkan beberapa hasil yang berbeda dengan cukup cepat.

Wireframes sebagai deliverables

Poin terakhir yang ingin saya bahas tentang wireframe adalah menggunakan mereka sebagai deliverable bagi tim development Anda.

 

Apabila Anda tidak sedang berada di fase awal projek, kemungkinan besar Anda mempunyai perpustakaan komponen, panduan umum tentang style, atau cara lain yang Anda gunakan untuk mendefinisikan bagaimana setiap bagian akan terlihat dalam sebuah aplikasi. Jadi, jika Anda tidak menambahkan sebuah komponen yang benar-benar baru ke dalam aplikasi, wireframe Anda seharusnya memuat informasi yang cukup untuk proses coding oleh developer.

 

Bagian yang lebih penting bagi para developer adalah tentang berbagai cara setiap layar terhubung dan interaksi di dalamnya. Wireframe merupakan salah satu alat yang tepat untuk menunjukkan hal-hal tersebut karena biasanya mereka tidak memuat banyak kekacauan visual; Anda bisa menambahkan tanda panah, catatan penjelasan, komentar (anotasi), atau hal lainnya untuk menjelaskan interaksi dan setiap kemungkinan jalur yang dipilih pengguna dari setiap layar yang ada.

Hal ini tidak berarti Anda tidak perlu memberikan high fidelity mockup, mungkin Anda tetap perlu melakukannya agar tim developer bisa memastikan setiap bagian terlihat benar, dan mungkin saja Anda mengubah beberapa hal dari panduan style yang Anda gunakan untuk kebutuhan tertentu. Namun, wireframe (dalam bentuk user flow) tetap akan menjadi sumber informasi yang berharga bagi para developer, agar Anda juga tidak perlu menjelaskan  tentang bagaimana setiap layar akan berfungsi atau terhubung satu demi satu.

Penutup

Seperti yang mungkin bisa Anda tebak, saya mencintai wireframe dan buat saya wireframe sangatlah berguna untuk proses desain saya. Saya harap poin-poin di atas bisa membantu Anda tertarik untuk membuat wireframe kembali, seandainya Anda akhir-akhir ini melewatkan proses tersebut. Kita mungkin akan sangat tergoda untuk langsung memulai desain UI dengan alat canggih baru yang kita miliki, sistem desain dan sejenisnya, namun kita juga perlu mempertimbangkan keuntungan pembuatan wireframe dan melihat dampaknya dalam proses desain kita.

Ditulis oleh: Nazli Kaya
Sumber: Why you shouldn’t skip your wireframing