Pelanggan perlu memahami bagaimana fitur yang diusulkan akan bekerja. Namun, hanya menjelaskan secara lisan atau tertulis tentang fitur yang ditargetkan untuk dibangun bisa jadi cukup menantang bagi imajinasi mereka. Wireframing dapat sangat membantu dalam menyelesaikan masalah ini, karena dapat berfungsi sebagai alat mock-up visual ‘tunjukkan, jangan katakan’ untuk mengonfirmasi ide desain sistem bersama pelanggan.
Apa itu Wireframe?
Wireframe adalah sketsa layar dari suatu sistem, terkadang disebut sebagai denah atau kerangka. Mereka dibuat untuk tujuan menyajikan dan menjelaskan ide desain sistem kepada pelanggan, yang pada akhirnya mengarah pada kesepakatan mengenai ide-ide yang diusulkan.
Wireframe menampilkan informasi ‘cukup saja’ yang terkait dengan fitur yang diusulkan. Setiap wireframe terdiri dari elemen grafis dasar yang mewakili komponen layar, atau tempat kosong untuk komponen layar. Wireframe menggambarkan tata letak layar dan bagaimana konten layar disusun. Fokusnya adalah pada apa yang dilakukan layar dan bagaimana pengguna akan berinteraksi dengan sistem untuk memenuhi kebutuhan mereka, bukan bagaimana tampilan akhir layar sebenarnya.
Sebelum kita melangkah lebih jauh, mari kita lihat wireframe yang dibuat berdasarkan youtube.com
Seperti yang bisa Anda lihat, wireframe memang begitu sederhana dan langsung. Semua orang bisa memahaminya tanpa kesulitan. Ini membantu tim pengembangan menjelaskan bagaimana pengguna akan berinteraksi dengan situs web dengan mudah.
Wireframe hanyalah sebuah denah
Wireframe hanyalah versi rendah-fidelitas dari antarmuka pengguna dan tidak dimaksudkan sebagai representasi layar nyata. Wireframe dimaksudkan digunakan untuk menunjukkan fungsi, interaksi pengguna, dan alur layar, tanpa secara eksplisit menentukan bagaimana komponen layar harus terlihat dan bagaimana komponen tersebut harus berperilaku untuk mencapai kenyamanan penggunaan tertinggi.
Contoh wireframe
Berikut ini adalah contoh wireframe web untuk halaman utama:
Berikut ini beberapa contoh wireframe untuk aplikasi Android:
 |
 |
 |
Berikut ini adalah contoh wireframe iPad untuk aplikasi iPad:
Berikut ini adalah contoh wireframe iPhone untuk aplikasi iPhone:
Akhirnya, berikut ini adalah contoh wireframe untuk aplikasi desktop:
Manfaat menggunakan wireframe
Memperjelas antarmuka pengguna
Pelanggan mungkin tidak memahami istilah teknis desain layar seperti slider, kotak putar, bootstrap, dll. Wireframe terdiri dari elemen grafis dasar yang bisa dipahami semua orang, membantu pelanggan memahami bagaimana fitur akan berfungsi dan bagaimana mereka dapat berinteraksi dengan sistem untuk mencapai apa yang mereka inginkan.
Pertimbangan awal mengenai kenyamanan penggunaan
Pengalaman pengguna (UX) merupakan pertimbangan penting dalam setiap perangkat lunak saat ini. Penggunaan wireframe dalam pengumpulan kebutuhan membawa pertimbangan pengalaman pengguna ke tahap awal proyek. Tanpa mengembangkan prototipe atau menggambar desain layar nyata, pengguna tetap bisa merasakan bagaimana sistem akan bekerja.
Efisien biaya
Dibutuhkan waktu dan keahlian untuk membuat desain layar yang lengkap dan berkepadatan tinggi, yang pada akhirnya menimbulkan biaya besar. Wireframing adalah cara cepat dan murah untuk membuat sketsa layar dasar. Ini juga membuat perbaikan atau bahkan pembuatan ulang sketsa menjadi sederhana dan murah.
Lebih siap melakukan perubahan
Perubahan desain adalah hal yang tak terhindarkan. Masalah dengan mengonfirmasi ide desain menggunakan mockup atau prototipe sistem lengkap adalah bahwa sejumlah besar pekerjaan telah selesai dilakukan, dan akan melibatkan banyak pekerjaan ulang, yang berarti waktu, usaha, dan biaya tambahan. Dalam situasi tersebut, pelanggan dan tim pengembangan cenderung enggan menyampaikan kekhawatiran atau meminta perubahan. Sebaliknya, membuat dan merevisi wireframe membutuhkan waktu yang jauh lebih sedikit. Semua pihak akan lebih siap untuk meminta dan melakukan perubahan.
Pelanggan yang terlibat aktif
Karena wireframe bersifat kasar dan longgar, mereka memberi pelanggan ruang untuk berpikir kreatif dan menyampaikan saran mereka. Selain itu, karena waktu pemrosesan untuk menyempurnakan wireframe singkat, pelanggan secara aktif terlibat dalam memberikan umpan balik, yang membuat mereka lebih cenderung menyetujui desain akhir.
Bagaimana cara menggunakan wireframe secara efektif?
Penggunaan wireframe dapat memberikan banyak manfaat bagi tim pengembangan maupun klien, tetapi hal ini hanya terjadi jika Anda menggunakannya secara bijak dan tepat. Penggunaan wireframe yang umum salah adalah menganggapnya sebagai pengganti desain layar. Hal ini membuat produksi dan penyempurnaan menjadi sulit dan mahal, sehingga mengurangi manfaat wireframing. Dalam bagian ini, kita akan membahas beberapa tips wireframing yang efektif.
- Wireframe dimaksudkan untuk sederhana dan cukup saja. Sederhana agar dapat dibuat dengan cepat dan mudah, serta tidak ragu untuk dibuang dan dibuat ulang. Presentasi rendah-fidelitas juga membuatnya lebih komprehensif dan komunikatif. Oleh karena itu, jangan menghabiskan terlalu banyak waktu untuk mempercantik gambar, menyelaraskan elemen, atau menggunakan tipografi yang indah dan sebagainya.
- Dalam wireframe, alih-alih menampilkan konten aktual, kita dapat mengganti sebagian besar teks (konteks sebenarnya) dengan tempat kosong teks. Hal ini untuk menghindari pemborosan waktu dalam menyiapkan konten secara tidak perlu, serta mencegah pembaca terganggu oleh konten teks. Namun jika tampilan teks diperlukan, Anda dapat mempertimbangkan untuk menempatkan teks dummy di sana. Anda dapat dengan mudah menemukan generator teks dummy di internet.
- Penggunaan anotasi membantu Anda menjelaskan suatu elemen (misalnya “Logo Perusahaan”) atau menjelaskan sesuatu yang berkaitan dengan perilakunya (misalnya “Sembunyikan dalam 5 detik”). Gunakan jika diperlukan. Namun sekali lagi, jangan mencoba mendokumentasikan setiap elemen wireframe. Anda hanya boleh menggunakan anotasi jika memang diperlukan.
- Wireframe dapat digambar secara manual, tetapi biasanya kita membuat wireframe menggunakan perangkat lunak agar lebih efisien dan lebih mudah dikelola. Selain itu, beberapa perangkat lunak wireframe menyediakan fitur-fitur yang tidak dapat dicapai dengan kertas dan pensil. Berikut tiga di antaranya:
- State – Alat wireframing dari Visual Paradigm mendukung konsep state, yang memungkinkan Anda membuat wireframe anak berdasarkan wireframe yang sudah ada. Ini tidak hanya menghemat waktu dalam membuat alur layar dengan urutan wireframe anak yang serupa, tetapi juga membuat penyempurnaan wireframe anak yang terkait jauh lebih mudah (karena ketika kita melakukan perubahan pada state awal wireframe, perubahan tersebut juga akan tercermin pada semua wireframe anak dari state tersebut)
- Storyboard – Storyboard menampilkan alur layar dari suatu skenario tertentu. Ini membuat wireframe lebih mudah dikelola dan presentasi menjadi jauh lebih mudah.
- Mengelola wireframe berdasarkan User Story – User story adalah alat agile untuk mencatat kekhawatiran dan kebutuhan pengguna. Memasukkan wireframe sebagai bagian dari skenario user story menunjukkan bagaimana pengguna akan menggunakan fitur tersebut dalam bagian pekerjaan yang dijelaskan dalam user story tersebut. Selain itu, ketika pengembang mulai mengimplementasikan user story, mereka dapat memeriksa wireframe untuk mendapatkan gambaran tentang ekspektasi pengguna.
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish