Wireflow: Alat open source online gratis untuk prototipe alur pengguna

• Wireflow adalah alat online gratis yang memungkinkan pembuatan prototipe alur pengguna dengan cepat tanpa alat desain yang rumit atau kit terpisah
• Menyediakan lebih dari 100 grafik/kartu dan 113 flow, sehingga elemen web, interaksi, dan kasus penggunaan umum bisa langsung dikombinasikan
• Mendukung kolaborasi real-time dan live chat, sehingga rekan kerja dapat diundang untuk merancang alur bersama di aplikasi yang sama
• Hak akses proyek/ruangan dapat dikelola sebagai publik atau privat, serta dilengkapi fitur pengeditan dasar seperti zoom, connector, dan undo
• Ini adalah prototipe bergaya side project yang dibuat dalam waktu kurang dari sebulan; berhasil memvalidasi idenya, tetapi kemungkinan bug masih ada

---

Alat untuk memulai desain alur pengguna dengan cepat

• Wireflow adalah alat gratis, online, dan open source untuk membuat prototipe alur pengguna
• Tujuannya adalah memungkinkan perencanaan proyek awal dan brainstorming tanpa harus membeli Photoshop, Illustrator, wireframe, atau kit alur pengguna
• Menyediakan lebih dari 100 grafik/kartu, termasuk elemen web, interaksi, dan kasus penggunaan umum
• Tersedia 113 flow yang dapat dipilih, dari 10 kategori
  • All
  • Article
  • Blog
  • Features
  • Gallery
  • Header
  • Misc
  • Multimedia
  • Sign In
  • Social

Kolaborasi dan kontrol akses

• Dengan asumsi kolaborasi real-time, rekan kerja dapat diundang untuk bekerja bersama dalam proyek yang sama
• Live chat bawaan memungkinkan anggota tim berbicara di dalam aplikasi yang sama saat merancang
• Hak akses dapat diatur per proyek atau per ruangan, serta dapat disetel menjadi publik atau privat

Fitur pengeditan dan komposisi open source

• Alat pengeditan dasar menyediakan fungsi yang dibutuhkan untuk menata dan mengubah alur pengguna dengan cepat
  • Zoom
  • Connector dan panah
  • Pindah kanvas
  • Undo/redo
  • Hapus header
  • Edit teks header
  • Bawa ke depan/kirim ke belakang
  • Pintasan keyboard
• Wireflow adalah proyek open source sepenuhnya dan dapat dilihat di GitHub
  • Open Source
• Tech stack-nya terdiri dari Node.js, Meteor.js, dan React.js
  • Node.js: runtime JavaScript berbasis mesin JavaScript Chrome V8
  • Meteor.js: platform untuk membuat aplikasi web dan mobile dengan JavaScript murni
  • React.js: library JavaScript deklaratif untuk membangun antarmuka pengguna

Status proyek

• Ini adalah side project yang dibuat dengan cepat sambil berjalan bersamaan dengan proyek utama lain saat itu, dengan masa pengembangan kurang dari satu bulan
• Status saat ini lebih mendekati prototipe gratis yang sederhana namun berguna untuk memvalidasi ide aplikasi, dan mungkin masih memiliki bug

[GN⁺]

Opini Hacker News

• Sekilas terlihat berguna, tapi tidak tahu apakah masih dipelihara
  Branch main di GitHub sudah bertahun-tahun tidak diperbarui: https://github.com/vanila-io/wireflow

  • Awalnya Wireflow dibuat dengan Meteor, dan saat itu ada cara untuk menyimpan data
    Setelah itu ditulis ulang dengan React, tetapi masih belum ada cara menyimpan data, dan para maintainer juga punya proyek lain yang menyita sebagian besar waktu mereka
    Jadi saya penasaran apakah ada orang yang tertarik pada alat seperti ini, apakah ada yang ingin berkontribusi lebih jauh ke Wireflow, dan apakah kabar baru tentang alat serupa bisa memunculkan minat yang lebih besar untuk memelihara Wireflow
    Ini sekadar pemikiran dari salah satu maintainer Wireflow

• Saya mengekliknya dan langsung mulai menggambar, lalu bisa mengekspornya sebagai gambar
  Tanpa login maupun pendaftaran—benar-benar menyenangkan

  • Tidak adanya pendaftaran itu bagus
    Tapi saya tidak tahu apa maksud “menggambar” di sini, dan bertanya-tanya apakah seharusnya ada alat menggambar sungguhan
    Ini terlihat seperti kumpulan template untuk membuat sitemap, dan saya juga tidak tahu apakah alat ini ingin mencakup pola desain mobile juga
    Saya paham ini dibuat dalam waktu kurang dari sebulan, tetapi jika mempelajari sesuatu seperti Principle(https://principle.app/) selama beberapa hari, sepertinya sisa pekerjaannya bisa diselesaikan dalam 2 minggu dan pada akhirnya bahkan bisa menghasilkan prototipe skala penuh yang interaktif

• Terlihat keren
  Tautan video YouTube di README GitHub tidak bisa dibuka: https://youtu.be/zm0XbLmXtXY
  Saya ingin melihat video demo terbaru

• Saya agak bingung bagaimana ini hendak didistribusikan
  Ini diperkenalkan seperti aplikasi web yang dapat dipasang, tetapi di Chrome untuk Android tampilannya benar-benar rusak
  Saya tidak tahu apa yang saya harapkan saat mengeceknya lewat ponsel, tetapi menurut saya setidaknya ini harus bisa dijalankan di tablet
  Kegunaan di ponsel mungkin sebatas melihat, bukan mengedit proyek, dan dalam pekerjaan nyata Anda mungkin perlu meninjau perubahan di sela-sela rapat serta membalas thread email atau chat Teams
  Kalau harus terus bergulat dengan ekspor PDF revisi ke-n dari desain aplikasi, itu yang terburuk, dan semua orang membencinya

• Saya pernah menulis tentang ide membuat flowchart seperti ini berdasarkan wireframe yang benar-benar diperkecil secara cerdas: https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
  Suatu hari saya ingin memasukkan hal seperti ini juga ke aplikasi UX kecil saya(https://www.tinyux.app), tetapi belum sempat mengerjakannya
  Akan sangat keren jika, baik memulai dari perspektif flow, halaman, maupun komponen, semuanya pada akhirnya bisa dibuat memakai satu sumber kebenaran yang sama
  Dulu ketika saya mempresentasikan visi dan konsep ini di sebuah acara kumpul desainer UX, responsnya sangat bagus, tetapi saat saya menunjukkan prototipe perintah teks ala Vim untuk memanipulasi wireframe, semua orang tampak bengong
  Sampai sekarang masih lucu mengingat ekspektasinya bisa meleset sejauh itu

• Ada yang tahu proyek serupa yang ditulis dengan Vue.js?

• Di sidebar fitur tertulis permisions, sepertinya typo dari permissions

• Terlihat sangat berguna
  Saya penasaran apakah mudah untuk di-fork dan dibuat untuk ikon desain game

  • Saya tidak mengerti tujuan proyek ini
    Kita bisa menambahkan layar, tetapi grafisnya dasar dan hanya teksnya yang bisa diubah
    Kita juga bisa menambahkan relasi antar-layar, tetapi tidak bisa diklik
    Jadi ini terlihat seperti sitemap; apakah hanya itu saja?

• Apa itu prototipe alur pengguna?

  • Semua langkah yang dilalui pengguna untuk menyelesaikan suatu tugas
    Biasanya bentuknya low-fidelity seperti wireframe, bukan desain final, dan istilah prototipe kemungkinan berarti bisa diklik untuk berpindah-pindah seperti prototipe Figma
    Misalnya untuk formulir login, bisa ditampilkan status awal → status error → status sedang mengirim → status berhasil, dan hal seperti ini bisa disebut “alur login pengguna”

• “It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.”
  Saya tidak bermaksud mengkritik tata bahasa, tetapi kalau ada pihak terkait yang melihat, kalimat ini sebaiknya sedikit diperbaiki