Wireframe

Apa bedanya wireframe dan draf desain?

Wireframe adalah tahap menentukan ‘apa diletakkan di mana’, sedangkan draf desain adalah tahap menentukan ‘bagaimana tampilannya’. Wireframe hanya berisi kotak abu-abu dan tempat teks, sedangkan draf desain memuat warna · foto · jenis huruf.

Kedua tahap dipisah karena biaya perbaikannya berbeda. Mengubah urutan kotak hanya butuh beberapa menit, tetapi mengubah urutan setelah draf desain jadi berarti ukuran foto dan jarak harus disesuaikan ulang.

Wajar jika Anda merasa wireframe terlihat hambar karena tidak berwarna. Di tahap ini, cukup lihat urutan dan ukuran kotak, dan tunda pembicaraan soal suasana ke tahap draf desain; masukan Anda akan jauh lebih rapi.

Ada juga vendor yang tidak punya tahap wireframe terpisah. Dalam hal ini, draf desain pertama sekaligus berperan sebagai wireframe, jadi saat menerimanya, periksa urutannya lebih dulu sebelum warna.

Apa saja isi wireframe?

Wireframe berisi daftar halaman, urutan area di tiap halaman, tempat tombol, dan jalur antarhalaman. Tidak perlu pandai menggambar. Cukup tulis nama seperti ‘foto utama’, ‘daftar harga’ di dalam kotak.

Untuk alur reservasi atau pemesanan yang melewati beberapa layar, sebaiknya gambar panah di antara layar. Gambar yang memuat layar beserta alurnya seperti ini kadang disebut ‘wireflow’.

Di tempat teks, sebaiknya sesuaikan kira-kira dengan panjang kalimat yang akan benar-benar dimasukkan. Jika perkenalan lima baris dimasukkan ke tempat untuk satu baris, tata letak di draf desain akan goyah lagi.

Wireframe juga berguna untuk Situs Landing satu halaman gulir. Meski hanya satu halaman, urutan dari atas ke bawah itulah jalur yang dilalui pelanggan.

• Daftar halaman: halaman apa saja dan berapa banyak, seperti Beranda · Profil · Menu · Petunjuk Lokasi
• Urutan area: apa yang muncul dari atas ke bawah dalam satu halaman
• Tombol tindakan: di mana dan berapa kali tombol telepon · reservasi · pertanyaan muncul
• Jalur perpindahan: layar mana yang terbuka saat tombol ditekan
• Tata letak ponsel: kolom yang berjajar di komputer ditumpuk dengan urutan apa di ponsel

Bagaimana cara menggambar wireframe sendiri?

Dengan selembar kertas dan pena, Anda bisa membuat draf kasar dalam 30 menit. Jika urutannya sudah ditentukan, konsultasi pertama dengan pembuat situs jauh lebih singkat.

Gambarnya tidak perlu rapi. Pembuat situs membaca ‘apa yang muncul lebih dulu’ dan ‘apa yang wajib ada’, bukan kemampuan menggambar. Jika nyaman dengan komputer, letakkan kotak di program presentasi; memotret gambar di kertas pun sudah cukup.

1. 01Tulis 5 pertanyaan yang paling sering diajukan pelanggan lewat telepon atau pesan.
2. 02Buat daftar halaman yang memuat jawabannya. Usaha kecil sering cukup dengan satu halaman.
3. 03Gambar persegi panjang vertikal seukuran layar ponsel, lalu isi dengan kotak jawaban dari atas sesuai urutan kepentingan.
4. 04Tentukan tindakan terakhir pelanggan (reservasi · telepon · petunjuk arah) lalu gambar kotak tombolnya.
5. 05Tangkap layar situs web usaha lain yang Anda sukai dan tempelkan catatan ‘urutan bagian ini bagus’.
6. 06Potret gambarnya dan kirim ke pembuat situs, lalu cek bersama apakah ada informasi yang terlewat.

Bagaimana urutan layar pertama berbeda per jenis usaha?

Urutan layar pertama ditentukan oleh ‘hal pertama yang ingin diketahui pelanggan saat masuk’, bukan oleh jenis usaha. Sesama salon pun, urutannya berbeda antara yang banyak pelanggan reservasi dan yang banyak pelanggan mampir.

Contoh di bawah hanyalah titik awal. Pada praktiknya, ubah berdasarkan pertanyaan yang paling sering diterima usaha Anda.

Jika sulit menentukan urutan, catat telepon yang masuk ke usaha Anda selama seminggu. Jika paling banyak ‘Buka sampai jam berapa?’, naikkan jam buka mendekati layar pertama; jika banyak ‘Ada parkir?’, naikkan info parkir.

• Salon: foto gaya andalan → profil desainer → harga per perawatan → tombol reservasi → lokasi · parkir
• Studio kerajinan: foto karya andalan → jenis dan jadwal kelas → biaya kelas → tombol daftar → testimoni peserta
• Restoran: foto menu andalan → jam buka · hari libur → daftar menu → pertanyaan reservasi grup → peta
• Pilates · yoga: foto suasana kelas → jenis kelas → jadwal → pendaftaran kelas percobaan → profil instruktur

Apakah wireframe tampilan ponsel perlu dilihat terpisah?

Ya, sebaiknya urutan tampilan ponsel dicek terpisah. Kolom yang berjajar kiri-kanan di komputer ditumpuk atas-bawah di ponsel, dan urutan yang dilihat pelanggan benar-benar berubah tergantung kolom mana yang muncul lebih dulu.

Google menyebutkan bahwa saat membuat indeks pencarian, acuan utamanya adalah halaman versi mobile. Karena itu, lebih aman merancang tampilan ponsel sejak awal agar konten penting tidak hilang atau tersembunyi di sana.

Di wireframe ponsel, cukup lihat apakah tombol reservasi · telepon ada di tempat yang nyaman ditekan ibu jari, dan apakah harga tidak baru muncul setelah menggulir terlalu lama.

Di wireframe ponsel, cek juga jangkauan layar pertama yang terlihat tanpa menggulir. Di dalamnya harus ada nama usaha dan apa yang dikerjakan usaha itu agar pelanggan tidak langsung pergi.

Apa kesalahan umum di tahap wireframe?

Kesalahan paling umum adalah melewati wireframe begitu saja lalu mengubah urutan lagi di draf desain. Akibatnya jumlah revisi dan jadwal ikut bertambah.

Kesalahan lainnya adalah menaruh semua yang ingin dimasukkan ke layar pertama. Layar pertama adalah tempat pelanggan menilai ‘apakah ini tempat yang tepat’, jadi makin dipangkas menjadi 3–4 informasi, justru makin mudah dibaca.

Sebaliknya, memecah halaman terlalu kecil juga kesalahan umum. Di usaha kecil, jika informasi tersebar di banyak halaman, pelanggan mudah pergi saat bolak-balik antarmenu, jadi sering lebih baik dikumpulkan di satu halaman dengan tombol pintasan di bagian atas.

Apa yang perlu ditanyakan ke pembuat situs di tahap wireframe?

Jika Anda menanyakan empat hal di bawah ini sebelum kontrak atau saat rapat pertama, jumlah revisi dan jadwal menjadi jelas.

• Apakah ada tahap wireframe tersendiri, atau langsung ke draf desain
• Apakah revisi di tahap wireframe dihitung dalam jumlah revisi keseluruhan
• Apakah tata letak tampilan ponsel juga ditunjukkan
• Bagaimana penanganannya jika urutan diubah setelah wireframe disetujui