Tips dan Trik dalam Membuat Wireframe
Anda telah berada di akhir bab. Sebelum lanjut ke bab selanjutnya, kami akan memberikan kepada Anda tips dan trik seputar materi yang sedang dijelaskan. Pada materi ini kami akan memberikan tips dan trik dalam membuat Wireframe.Membuat Information Architecture
Dalam membuat sebuah produk, tentu akan membutuhkan banyak halaman dengan berbagai fitur. Nah, untuk mengorganisasi konten suatu produk supaya lebih mudah dimengerti, kita akan membuat Information Architecture.
Information Architecture (IA) adalah sebuah bagan struktur yang berisi seluruh informasi halaman. IA dapat menunjukkan pada posisi mana posisi pengguna saat ini dan ada di mana informasi yang dibutuhkan pengguna berada.
Jika kita mengorganisir IA dengan baik, pengguna dapat mencari informasi yang dibutuhkan dengan cepat dan efektif. Bukan secara kebetulan, tetapi memang sudah direncanakan dengan menggunakan desain.
IA membantu stakeholder untuk meninjau gambaran produk secara high-level, sehingga jika ada bagian yang tidak tepat, mereka bisa langsung mengetahuinya. IA juga membantu Anda untuk mengetahui cara bernavigasi antar halaman. Dengan begitu, Anda bisa menentukan desain yang cocok pada Wireframe. Anda juga bisa mengetahui informasi apa saja yang ada pada sebuah halaman sebelum mengaturnya pada Wireframe.
Berikut beberapa tips dalam membuat information architecture yang bisa Anda terapkan:
- Antisipasi lokasi informasi sesuai dengan kebutuhan pengguna.
- Jangan buat pengguna membutuhkan langkah yang banyak untuk mendapatkan informasi yang diinginkan. Anda bisa mengikuti Three-Click rule.
- Tentukan halaman yang paling sering digunakan sebagai menu utama.
- Gunakan navigasi yang konsisten.
Menggunakan Shortcut
Dalam membuat Wireframe digital dengan tools seperti Figma, akan lebih baik jika Anda menggunakan shortcut. Hal ini karena dengan bantuan shortcut, Anda dapat mempercepat proses desain dengan mengurangi waktu yang dibutuhkan untuk mencari menu atau memilih menu menggunakan kursor. Berikut ini adalah beberapa shortcut yang sangat berguna ketika menggunakan Figma:| Nama | Shortcut | Keterangan |
|---|---|---|
| Show/Hide UI | Ctrl+\ | Menampilkan atau menyembunyikan panel supaya lebih fokus |
| Pick color | I | Mengambil warna dari gambar atau tempat lain |
| Quick action | Ctrl+/ | Mencari menu, perintah, plugin atau apa pun |
| Outlines | Ctrl+Shift+3 | Melihat outline untuk kerapian desain |
| Pan | Space+Drag (Drag 2 jari) | Menggeser tampilan layar |
| Frame Tool | F | Membuat Frame baru |
| Zoom to next frame | N | Zoom ke frame selanjutnya |
| Text Align | Ctrl+Alt+L Ctrl+Alt+R Ctrl+Alt+J | Teks rata kiri Teks rata kanan Teks rata kanan kiri |
| Selection | Ctrl+Click Ctrl+Right click Enter Shift+Enter Tab Shift+Tab | Memilih elemen di dalam suatu layer Memilih layer Memilih children (layer bawahnya) Memilih parent (layer atasnya) Memilih layer selanjutnya Memilih layer sebelumnya |
| Cursor | Alt Alt+Drag Alt saat resize | Melihat jarak antar elemen Duplikasi elemen Mengubah ukuran dari tengah |
Menghindari Deceptive Pattern
Deceptive pattern adalah metode yang berfungsi untuk memengaruhi pengguna untuk melakukan sesuatu atau membeli sesuatu yang sebelumnya tidak akan mereka lakukan atau beli. Beberapa contoh metode dari deceptive pattern adalah:- Roach motel atau trap door : Metode ini dirancang untuk memudahkan pengguna masuk ke situasi yang tidak diinginkan dan sangat sulit bagi mereka untuk keluar darinya. Contohnya yaitu kemudahan dalam melakukan langganan, tetapi susah ketika ingin membatalkannya.
- Forced continuity : Metode ini dirancang untuk memaksa pengguna untuk membayar membership secara tidak sengaja. Sebagai contoh yaitu trial layanan 7 hari, dan ternyata ia akan terus berlangganan.
- Sneak into basket : Menambahkan item baru ketika akan membeli. Contohnya seperti penambahan proteksi tambahan atau garansi pada halaman checkout.
- Hidden cost : Adalah biaya tersembunyi dan tidak disebutkan di awal. Contohnya yaitu di depan harga terlihat murah, namun ternyata di akhir terdapat biaya layanan atau pajak yang belum tercantum.
- Confirmshaming : Metode untuk membuat merasa bersalah ketika tidak memilih sesuatu. Contohnya pada pop up penawaran suatu produk, ada pilihan “Ya, saya mau!” dan “Tidak, saya sudah pintar, saya tidak membutuhkannya”.
- Urgency : Metode untuk mendesak pengguna untuk segera melakukan pembelian. Biasanya dengan memberikan batas waktu satu jam atau satu hari.
- Scarcity : Metode untuk menunjukkan bahwa suatu produk sedang langka. Contohnya dengan menampilkan jumlah stok yang tinggal sedikit atau jumlah orang yang sedang memasukan produk tersebut ke keranjang.