Interested in what we do?
Let’s have a talk, and see how together we can take your brand to the next level.
Blogs · Dev and Design · UX
Cara Gampang untuk Bikin Wireframe
Rangka, rangka apa yang bisa bantu Anda bikin website? Jawabannya rangka kawat alias wireframe. Cari tahu yuk gimana caranya bikin wireframe yang ideal buat produk Anda!
Masih ingat nggak waktu Anda mau bikin kantor pertama Anda? Saat itu, setelah menemukan bangunan yang pas, Anda pasti mikirin tata letak ruangan lebih dulu sebelum dekorasi dan warna cat dinding yang akan digunakan, kan? Dalam proses membangun website pun sama, sebelum mempercantik kita harus menyusun dulu komponen-komponennya untuk menjamin user experience yang ciamik. Caranya adalah dengan wireframe.
Wireframe atau proses wireframing adalah sebuah tahap di mana para UX Designers nentuin dan ngerencanain susunan informasi mana yang paling penting untuk ditonjolin di website, app, atau produk digital lainnya. Proses ini penting banget untuk menentukan flow pengalaman kayak apa sih yang nantinya akan dirasakan pengguna saat mengakses produk yang sedang di-develop.
Hebat juga ya, hal se-abstrak pengalaman bisa didesain. 👍🏼
Wireframe ini bisa berupa gambaran tangan maupun digital. Ini sesuai preferensi masing-masing aja sih karena ada kan orang yang lebih bisa berpikir kreatif dengan pulpen dan kertas ketimbang komputer. Tapi cons-nya, segala yang nggak digital susah buat diedit dan di-share ya nantinya. Kalau mau pakai jalan digital, tinggal Google aja “wireframing tools” dan Anda nggak bakal kehabisan opsi.
UXPin, salah satu contoh dari wireframe tools.
Intinya sih, kalau dengan gambaran sesimpel itu aja users nggak tahu harus nge-klik apa dan harus ngapain, artinya belum relevan buat kita mikirin warna, text, atau visual apa yang akan kita tampilkan. Tapi gimana ya caranya buat bikin wireframe yang ideal? Tenang, kami punya tips, tricks, and best practices yang bisa Anda ikutin nih!
Kita akan dibantu lagi sama UX designer kita, Jessica, yang sebelumnya udah dua babak ngejelasin tentang user testing. Kalau Anda belum baca, cek di sini buat part I dan di sini buat part II ya!
Sebelumnya kita udah pernah bahas pentingnya mengedepankan kebutuhan users dalam UX designing dan itu berlaku juga di sini. Inget kalau UX design adalah sebuah proses dan ada banyak hal yang mesti Anda lakukan sebelum ke tahap wireframing, termasuk riset yang mendalam. Mulai dari menentukan user persona, cari tahu apa yang dibutuhkan oleh users, lihat desain kompetitor, dan lain-lain. Intinya, Anda mesti menggali banyak informasi buat ngejawab experience seperti apa yang harus ada di produk.
Alasannya apa Mbak, Jess?
“Supaya gak makan banyak waktu, usaha, tenaga. Karena wireframe itu kan istilahnya kayak yang menjembatani antara konsep dan eksekusi, jadi diusahakan secara flow dan struktur udah benar dulu,” kata Jessica. “Karena kalau struktur dan flow-nya gak mantep, nanti pas eksekusi ke design-nya bisa aja harus rombak atau adjustment sana-sini (yang artinya nambah waktu dan effort lagi. YAY!!!)”
Di atas kita udah singgung dikit soal flow. Apa sih maksudnya? User flow itu perjalanan yang kita antisipasi akan diambil oleh pengguna saat mengakses produk kita. Secara sederhana, misalnya, user nanti masuk lewat homepage, kemudian klik tombol CTA, dan masuk ke halaman toko, klik produk yang dijual, kemudian baca deskripsi, tertarik, klik ‘add to cart’, dan check out.
Tentunya kita harus siapin banyak skenario lain karena nggak semua user datang ke website Anda untuk belanja kan. Ada juga yang mengakses cuma untuk browsing produk dan ada juga yang mau cari tahu lebih banyak tentang perusahaan Anda, misalnya. Apa yang mereka butuhkan harusnya sudah terjawab dari riset, dan sekarang tugas Anda adalah mendesain alur untuk menjawab kebutuhan-kebutuhan itu.
“Nah, biasanya buat tau tipe-tipe users gitu kita buat dulu user persona saat research awal sebelum buat user flow. Di user persona itu biasanya kita bisa tau behaviour mereka (misalnya e-commerce users ada tipe yang browsers, goal-oriented, bargain hunters, researchers, dan lain-lain). Nah dari tiap-tiap user persona itu kita list kebutuhan-kebutuhan mereka, bisa pake user stories atau dibuat gambaran main user flow per tiap user,” kata Jessica. “User flow ini buat memadai semua users dengan goals-nya yang beragam.”
Buat UX designer, user flow ini ngebantu kita nentuin hal-hal seperti berapa banyak layar yang dibutuhin dan gimana urutan penyajian komponen-komponen yang ada di dalamnya. Dengan begitu, kita bisa membuat interface yang intuitif karena apapun kebutuhan user, kita udah punya desain yang mengakomodasi perjalanan mereka mencapai goals masing-masing. Intinya, pengguna nggak akan kebingungan nyari tahu jalan yang mesti diambil untuk nyelesain apa yang ingin mereka lakuin. Kalau mereka bisa flowing dalam sebuah interface, kemungkinan mereka membeli produk atau mengunjungi website Anda pun akan meningkat.
Bukan, bukan contekan kaya gini maksudnya. Tapi catatan yang lebih proper buat guideline Anda saat wireframing nanti.
Nggak kayak ujian nasional di bangku sekolah dulu, dalam hal ini kita disarankan banget buat bikin contekan. He he… Ya, data hasil riset Anda yang segudang itu nggak mungkin Anda ingat secara keseluruhan kan. Buat mastiin wireframe Anda selalu in line dengan kebutuhan user, bikin cheatsheet deh buat dicontek dari waktu ke waktu. Isinya berupa hasil analisis dan kesimpulan dari riset ekstensif dan user flow mapping yang Anda lakukan sebelumnya, atau lebih baik lagi kalau sudah jadi guideline yang bisa langsung diterapkan. Pastiin cheatsheet ini nggak jauh-jauh dari medium wireframing yang Anda gunakan, baik itu digital maupun fisik, supaya desain Anda nggak melenceng.
Nah, bekal udah lengkap, sekarang saatnya menggambar! Ternyata panjang juga ya perjalanannya sebelum sampai ke tahap wireframing itu sendiri. Tapi percayalah, sesuai judul, ini salah satu cara paling gampang yang bisa Anda ikuti tanpa miss out tahap-tahap krusial yang bisa bikin desain UX jadi kacau.
Anyway, seperti yang kita singgung sebelumnya, inget kalau kita di sini nggak perlu memikirkan estetika, dan fokus saja pada fungsi. Biar aja UI designer yang mikirin itu. ✌🏼🤓
Kita harus tekanin ini karena rupanya UX designer memang seringkali terjebak estetika (bukan Raisa ya) saat bikin wireframe. Kata Jessica, ini biasanya karena UX designer kebanyakan lihat desain-desain produk yang udah ada jadi punya semacam standar atau preferensi elemen desain masing-masing.
“Semacam ada intuisi kayak ‘eh gua pernah liat app ini buatnya begini nih’. Jadi of course saat wireframing kita suka membayangkan estetikanya,” kata Jess. “Padahal sebenarnya kita jangan terlalu terlimitasi oleh estetika, especially saat lagi wireframing. Karena kita harus tetap mentingin users dan kebutuhan mereka.”
Beberapa tips menggambar yang penting untuk Anda ingat di sini adalah nggak perlu terlalu detail, gunakan blok-blok yang bisa memisahkan satu bagian dengan bagian lainnya dengan mudah dan jelas, dan buat kerangka yang mudah dimengerti. Sementara untuk susunannya sendiri, coba pikirkan hal-hal seperti bagaimana caranya memenuhi kebutuhan user, informasi mana yang harus lebih dikedepankan, hal apa yang diharapkan akan dilihat oleh pengguna di bagian tertentu dari produk Anda, dan tombol atau tools apa yang dibutuhin users buat menyelesaikan action mereka.
Tampilan lainnya saat UX designer lagi wireframing.
Jangan lupa diskusi juga dengan rekan-rekan ya! Walau tadi kita bilang biar UI designer yang pusing, kita jangan nyerahin semua beban sama mereka juga. Tetap komunikasi dan pastiin hasil akhir yang sebagus mungkin.
“Penting banget buat UX designers buat berkomunikasi sama UI designer dan developers. Karena dengan komunikasi, UI designer akan ngebantu ngasih pilihan-pilihan design yang intinya still look pleasing but at the same time accomodating users’ needs lah. Jadi tipsnya kalo gua pribadi saat lagi wireframing adalah: komunikasi dan selalu ingat ini buat siapa,” kata Jessica.
Wireframe udah jadi, Anda dan rekan-rekan udah yakin ini bagus banget dan bisa menjawab kebutuhan users. Jangan senang dulu, karena kenyataan kadang lebih pahit dari harapan. Coba tanya actual users desain ini works atau nggak buat memastikan sebelum Anda lanjut ke tahap selanjutnya. Caranya? Anda bisa tunjukkan wireframe tersebut ke pengguna lewat user testing.
Kalau ternyata partisipan tes masih kebingungan, tahap berikutnya pun akan jadi buang-buang waktu karena nantinya toh akan dirombak lagi. Jadi pastikan wireframe Anda udah sesuai dengan kebutuhan user sebelum lanjut ke tahap selanjutnya ya. Kalau belum, cari tahu hal apa yang bisa diperbaiki dan revisi sampai pol!
Kalau udah lolos user testing, selamat, Anda sudah selesai membuat wireframe dan bisa lanjut ke UI design dan prototyping. Beberapa hal lain yang mesti diingat, wireframe Anda mesti memberi gambaran visual dari cara Anda menjawab kebutuhan users, memenuhi ekspektasi pengguna, dan simpel alias bebas distraksi.
Terus, kalau Anda belum berhasil juga buat wireframe yang sesuai kebutuhan users gimana? Tenang, bikin wireframe yang ideal udah jadi makanan sehari-hari kami di Definite dan kami siap bantu Anda bikin produk digital yang bisa buat perusahaan Anda makin standout di mata netizens. Yuk, ngobrol bareng soal kebutuhan bisnis Anda sekarang!
Credits:
Writer:
Rinaldy Sofwan
Resource:
Flavia Jessica, UX Designer Definite
