Capaian pembelajaran :

1. Mahasiswa mampu menganalisis Wire Flow
2. Mahasiswa mampu membuat Wire Flow sesuai dengan desain yang dibuat

1.   Pengertian Wireflow

Setelah buat wireframe, kalian bisa lanjutin untuk membuat wireflow, wireflow adalah kombinasi Diagram dan Wireframe. Dan bisa juga digambaran dengan alur yang akan dilalui oleh pengguna saat penggunaan website, kegunaanya adalah memudahkan kita mengetahui dan memahami tentang struktur website kita sendiri. tindakan tindakan apa saja yang dilakukan pengguna di website, kita bisa pula mengatur Tindakan apa saja yang mendukung kenyamanan pengguna.

Wireflows adalah cara visual untuk nunjukin gimana tampilan aplikasi berubah ketika pengguna ngelakuin interaksi. Ada juga tulisan tambahan buat nunjukin hal-hal kayak pengiriman data dalam sistemnya.

2.   Wireflow Yang bagus?

Yang dimana wireflow memiliki peran yang penting dalam pembuatan website, maka kita harus tau Bagaimana membuat wireflow yang bagus, berikut hal-hal yang harus diperhatikan di pembuatan wireflow :

1.    Keterbacaan yang baik

Sebagai wireflow yang bagus, maka wireflow harus mudah dibaca dan dipahami oleh orang lain yang melihatnya (penggunanya bukan kita sendiri doang kan), penggunaan simbol, ikon, dan notasi yang jelas membantu memudahkan interpretasi

2.    Konsistensi

Wireflow yang kita sajikan harus konsisten dalam berbagai hal, seperti gaya dan penempatan elemen-elemen yang stabil dan tidak gonta-ganti, hal ini bisa memastikan informasi yang ingin kita sampaikan ke pengguna tersampaikan dengan mudah dan tidak membuat mereka kebingungan

3.    Lengkap

Disini workflow harus mencakup semua bagian penting dari antarmuka website, termasuk halaman, elemen interaktif, dan transisi antar halaman. Ini memastikan bahwa semua aspek penting dari pengalaman pengguna tercakup

4.    Warna yang tepat dan mantap

Untuk menarik dan membantu pengguna memahami website kita, kita hatus menggunakan perpaduan warna yang cocok, sehingga pengguna terbantu dengan dengan perpaduan tersebut dalam membedakan elemen-elemen penting dalam wireflow, seperti contohnya ada tombol interaktif atau bagian lain yang berubah warna ketika saat terjadi interaksi pengguna

5.    Anotasi yang jelas

Anotasi (catatan) yang jelas ini memudahkan orang yang memrogram desain kalian menjali lebih paham terhadap keinginan dan harapan desain kalian nantinya, sehingga meminimalisir miskom antara desainer dan front-end sehingga memperpanjang waktu pengerjaan dan mengganggu timeline

6.    Kemudahan Penggunaan (fleksibilitas)

Dijaman sekarang yang memiliki berbagai jenis ukuran display dari tablet yang besar dan lebar sampai ke handphone yang memiliki layar kecil da terbatas, sehingga sangat diperlukan website hang perlu beradaptasi dengan perubahan tersebut, sama saja halnya dengan wireflow, wireflow harus dapat disesuaikan dengan kebutuhan dan perubahan yang mungkin terjadi selama proses pengembangan.

 

3.   Cara Membuat Wireflow

1.    Menentukan Tujuan

Sebeum berpikir kamana-mana, sebaiknya kita menentukan tujuan utama Wireflow kalian dulu, apakah kalian ingin mengvisualisasikan alur penggunaan umum, menggambarkan transisi antarmuka, atau fokus pada fitur atau tugas tertentu. Memantapkan tujuan akan membatu kalian dalam pengerjaan yang lebih tertata dan cepat

2.    Identifikasi halaman utama

Oke, kalian bisa mulai dengan membuat halaman utama atau layar utama yang akan ada dalam wireflow, hal ini dapat mencakup halaman beranda, halaman detail produk, formulir pendaftaran, dsb. Tetapkan urutan ahalaman dan hubungan antara halaman-halaman tersebut

3.    Gambar sketsa kasar (wireframe)

Saatnya membuat wireframe atau sketsa kasar untuk tampilan setiap halaman yang terlibat, buat saja sketsa yang simple dan berfokus pada letak, representasi kasar dan juga elemen-elemen utama di setiap halaman

4.    Tentukan interaksi dan transisi

Tentukan interaksi dan transisi apa saja antar halaman-halaman. Identifikasi tindakan pengguna seperti mengklik tombol, mengisi formulir, atau menavigasi ke halaman lain. Gambar anak panah atau garis untuk menggambarkan alur pengguna dan transisi antarmuka

5.    Tambahkan anotasi

Tambahkan anotasi atau keterangan penting di setiap halaman atau transisi. Ini bisa mencakup penjelasan tindakan pengguna, informasi tambahan tentang fitur, atau penjelasan tentang pengiriman data antara halaman

6.    Perbaiki dan rapihkan

Evaluasi dan perbaiki wireflow kalian, pastikan alur pengguna jelas dan logis, transisi antarmuka sesuai, dan anotasi mudah dipahami. Rapikan tata letak dan pastikan simbol dan anotasi mudah dipahami. Rapihkan tata letak dan pastikan simbol dan notasi yang digunakan konsisten.

7.    Gunakan Alat desain

Gunakan alat desain atau perangkat khusus untuk membuat wireflow yang lebih mantap dan profesional. Ada banyak alat desain yang tersedia, kalian bisa menggunakan beberapa aplikasi yang ada dibawah ini :

1.    Figma

2.    Sketch

3.    Adobe XD

Aplikasi diatas menyajikan beberapa fitur-fitur yang berbeda dan dapat membuat wireflow menjadi lebih mudah dan cepat

8.    Bagikan dan Kolaborasi!

Bagikan Wireflow kalian dengan anggota kelompok kalian yang terlibat dalam pengembangannya, berikan kesempatan bagi teman-teman kalian untuk memberikan feedback. Kolaborasi dapat membantu kalian dalam menambah pemahaman tentang antarmuka yang telah kalian buat.

 

4.   Keuntungan dan kekurangan wireflow

Dalam penggunaanya, tentu musti ada aja kelebihan dan kekurangan yang harus dipertimbangkan ketika menggunakan wireflow ini, siba bahasannya dibawah ini ya!

 

Keuntungan :

1.    Visualissasi Alur Pengguna

Penggunaan Wireflow memungkinkan kalian untuk dengan jelas memvisualkan alur pengguna dalam antarmuka. Ini membantu Front-end dan desiner dalam memahami bagaimana pengguna akan berinteraksi dengan aplikasi atau website

2.    Identifikasi masalah potensial

Dengan menggunakan wireflow, kalian dapat mengidentifikasi masalah atau kesulitan dalam alur pengguna sebelum mengembangkan antarmuka secara lengkap. Ini memungkinkan perbaikan dan penyesuaian yang lebih mudah pada tahap awal pengembangan.

3.    Komunikasi yang efektif

Memungkinkan tim pengembang dan stakeholder lainnya untuk memiliki pandangan dan pemahaman yang sama tentang alur pengguna dan transisi page. Ini menfasilitasi komunikasi yang lebih efekti antara: Tim pengembang, Desainer, Dan Stakeholder lainnya

4.    Penghematan Waktu dan Biaya

Dengan pembahaman masalah yang lebih mantap, kita dapat membuat perubahan yang lebih awal saat penggunaan wireflow ini, dan menghindari perubahan yang membutuhkan biaya yang mahal dan waktu yang molor-molor pada tahap pengembangan yang lebih lanjut.

 

Kekurangan :

1.    Kesederhanaan

Dalam desain wireflow yang sederhana, kadang seringkali tidak menangkap semua detail dan kompleksitas interaksi antar muka, ini bisa menjadi kekurangan jika ada elemen yang rumit atau jika alur pengguna sangat kompleks

2.    Keterbatasn pemahaman pengguna

Walaupun wireflow membantu visualisasi alur pengguna, tetapi tidak begitu memberikan pemahaman lengkap tentang pengalaman pengguna yang sebenarnya. Untuk pemahaman yang lebih mendalam, perlu pengujian pengguna dan penelitan tambahan

3.    Pengabaian aspek visual

Wireflow sering kali fokus pada alur pengguna dan transisi page, sedangkan aspek visual dan detail desain mungkin masih kureng, sehingga menjadi kekurangan jika penting bagi kalian untuk mengomunikasikan aspek viseual tertentu pada wireflow

4.    Kesulitan dalam penggunaan

Bagi mereka yang tidak terbiasa dengan konsep wireflow, akan ada kesulitan dalam membuat atau memahami wireflow secara efektif. Membutuhkan waktu dan latihan untuk menguasai teknik dan alat yang digunakan dalam membuat wireflow

 

Untuk practice, kalian bisa melanjutkan wireframe yang kalian punya, untuk lanjut ke tahap wireflow ya!