Skip to main content
Pada materi sebelumnya, Anda telah mengetahui bagaimana cara untuk mengetahui tingkah laku dan kebutuhan pengguna dengan cara-cara yang ada pada tahap Empathize. Tidak hanya mengetahui kebutuhan yang pengguna pikirkan saja, Anda bahkan bisa memprediksi kebutuhan yang belum mereka pikirkan.  Dengan mengantisipasi kebutuhan yang tidak terpikirkan itu, Anda tentu dapat memudahkan pengguna dalam mencapai tujuannya. Anda mungkin juga pernah mengalaminya. Sebagai contoh, ketika Anda membeli bubur ayam biasanya penjual akan langsung menawarkan apakah pakai kacang atau tidak, pakai kecap atau tidak, dan alternatif lain yang mungkin tidak terpikirkan sebelumnya. Tentu ini akan sangat berguna untuk mendapatkan bubur ayam yang nikmat, bukan? Nah, salah satu cara simpel dan mudah untuk mengantisipasi kebutuhan tersebut adalah membuat User Flow. User Flow adalah bagan alur yang menunjukkan interaksi dengan produk, mulai dari awal membuka aplikasi sampai mencapai tujuannya. UX Designer sering membuat User Flow untuk membayangkan apa saja yang dilakukan pengguna secara menyeluruh. Dengan mengetahui alur ini, Anda dapat memprediksi kebutuhan pengguna yang mungkin belum disebutkan sebelumnya. Anda juga bisa menentukan alur yang efisien bagi pengguna untuk mencapai tujuannya. Okay, sebelum kita masuk ke latihan, Anda perlu menentukan beberapa hal berikut terlebih dahulu:
  • Aksi apa saja yang akan dilakukan pengguna?
  • Pilihan apa saja yang dihadapi pengguna?
  • Halaman apa saja yang tampil untuk pengguna mencapai tujuannya?
Jika Anda sudah mendapatkan jawaban dari pertanyaan tersebut, saatnya melangkah ke tahap selanjutnya untuk menggambar User Flow.

​
Simbol pada User Flow

Biasanya UX Designer menggunakan simbol-simbol dasar untuk membuat User Flow, seperti lingkaran, kotak, belah ketupat, dan arah panah. Setiap simbol tersebut memiliki arti masing-masing yang dapat memudahkan Anda memahami alur aplikasi. Berikut adalah penjelasannya:
SimbolNamaFungsi
20210816115015218483a9200e3fb008738e2f489809ed.jpegHalamanMenunjukkan setiap halaman yang tampil dari awal sampai akhir tujuan. Contohnya adalah halaman utama, halaman detail, dan halaman konfirmasi.
2021081611501541b5cca3c6e51b1db7abd4f26763969c.jpegAksiMenunjukkan proses, aktivitas, atau langkah yang dilakukan pengguna. Contohnya seperti membuka aplikasi, mengisi data, dan memilih tombol.
20210816115015d0b452e19261a34a14c11a4434a485be.jpegPilihanMenunjukkan adanya pemilihan keputusan (decision making). Contohnya seperti keluar aplikasi atau tidak, lanjut atau tidak, dsb.
202108161150151ff17dd5b8fcc01b9650320e2dabcf6d.jpegGaris panahMenghubungkan dari satu bentuk simbol ke simbol lainnya. Menunjukkan arah proses atau alur.

​
Contoh User Flow

Berikut adalah contoh User Flow dari studi kasus aplikasi pemesanan kopi: dos:014fb17e6b1c1c62fcee0bfa5aaf332720230805143714.png User Flow aplikasi ini dimulai dari pengguna membuka aplikasi dan dihadapkan dengan halaman utama. Dari sini pengguna dapat mencari dan memilih menu dan melakukan kustomisasi pada halaman detail menu. Setelah memasukkan menu ke dalam keranjang terdapat pilihan, apakah mau menambah menu lain atau tidak? Jika iya, kembali ke halaman utama, sedangkan jika tidak, lanjut ke halaman konfirmasi. Setelah melakukan pengecekan dan pemilihan promo serta metode pembayaran, pengguna dapat mengonfirmasi pesanannya dan melakukan pembayaran. Terakhir, halaman status pesanan akan tampil. Sebagai UX Designer, kita juga mengantisipasi apabila ada pengguna yang ingin menambahkan menu lain sebelum masuk ke halaman konfirmasi dengan menambahkan pilihan seperti User Flow di atas. Anda juga bisa menambahkan alur lain yang mungkin belum terpikirkan sebelumnya. Hal terpentingnya adalah sesuaikan User Flow dengan kebutuhan yang akan dihadapi sebagian besar pengguna.

​
Latihan Membuat User Flow

Nah, sekarang saatnya membuat User Flow untuk studi kasus Anda sendiri. Simak langkah-langkahnya di bawah ini:
  1. Silakan identifikasi halaman dan aksi apa saja yang dilakukan pengguna mulai dari awal membuka aplikasi sampai ia mencapai tujuannya.
  2. Untuk membuat user flow, Anda boleh menggunakan tools apa pun, tetapi pada contoh ini kita menggunakan https://www.diagrams.net/.
  3. Mulailah membuat diagram dan pilih lokasi penyimpanan. Kami sarankan menggunakan Google Drive saja. Jangan lupa untuk izinkan otorisasi ke akun Gmail Anda.
  4. Klik Create New Diagram.
    2021081611531922c05f2cac606610a37bf46f833054a4.jpeg
  5. Ganti nama diagram dan pilih template Flowchart.
    202108161153291deb27652a49c4b9c81f38364d9caa3e.jpeg
  6. Untuk menambahkan komponen baru, cukup lakukan drag and drop dari komponen yang ada di sebelah kiri ke tengah seperti ini:
    20210816115242fcc29135b9bcf3a7342bfb612f0d8953.jpeg
  7. Kemudian tambahkan teks dengan memilih komponen tersebut dahulu.
    2021081611524196eb5bbd0c861a568518a104b6c5f21b.jpeg
  8. Lanjutkan untuk menambahkan komponen lainnya yang dibutuhkan. Untuk membuat arah panah yang menghubungkan antar komponen, klik tanda panah pada setiap komponen seperti berikut:
    20210816115734213986f92b43199e95d9f86a97cfed7d.gif 
  9. Hal lain yang perlu diketahui adalah menambahkan teks pada garis panah. Caranya cukup klik 2 kali pada garis dan ketik teks yang diinginkan. Anda juga dapat memindahkan teks tersebut seperti berikut:
    20210816115808ca4ac1c65eeb820d6107f84d33189101.gif
  10. Lanjutkan membuat diagram sampai akhir, ya! Jangan lupa gunakan simbol yang sesuai supaya orang lain juga paham dengan apa yang Anda buat. Pikirkan juga untuk membuat alur yang memudahkan penggunanya untuk mencapai tujuannya dengan cepat.
  11. Apabila User Flow sudah selesai, Anda dapat mengunduhnya dengan cara klik FIle → Export as → PNG….
Selamat! Anda telah membuat sebuah User Flow. Sekarang Anda mengetahui bagaimana rancangan aplikasi yang akan didesain dengan lebih jelas dan terstruktur.  Pembuatan User Flow juga merupakan sebuah cara yang bagus untuk menjembatani antara kebutuhan teknis dan non-teknis. Misalnya seseorang yang memiliki ide dalam pengembangan sebuah fitur dapat menyampaikannya dengan bahasa yang ia pahami kepada pengembang software, begitu pun sebaliknya.