User

Flow
UI/UX Design for Beginner
Outline materi

1 User Flow

2 Jenis-jenis User Flow

3 Framework selain User Flow

Credit to Pablo Stanley

User Flow
Apa itu User Flow?
User Flow adalah diagram langkah-
langkah yang harus dilakukan user
untuk menyelesaikan sebuah task.

💡
User flow dibentuk sesuai dengan alur
bisnis dari sebuah perusahaan
Membuat User Flow dapat
dibuat dari

1 Hasil interview tentang kebiasaan

user dalam melakukan aktivitasnya

2 Hasil kompetitor analisis dari

sebuah aplikasi atau produk

3 Alur bisnis dari sebuah instansi/

perusahaan
 Contoh pengaplikasian User Flow

Aplikasi Pembelian Tiket Kereta Api

 Contoh Flow Bisnis Penjualan Tiket Kereta Api

Mengantri pembelian tiket Pelayanan loket kereta Petugas mengecek

ketersediaan tiket
- Nama Kereta
- Jadwal Keberangkatan
- Jumlah Penumpang
Contoh Flow Bisnis Penjualan Tiket Kereta Api (lanjutan)

Mengisi data KTP & Mencetak tiket kereta api

membayar tiket Penyerahan tiket & uang kembali
(jika ada) kepada pembeli
User Flow Aplikasi Penjualan Tiket Kereta Api

Input data Menampilkan hasil Detail tiket Input data

pencarian pencarian kereta api penumpang

Start
- Keberangkatan & tujuan User memilih kereta api - Nama Lengkap
- Tanggal keberangkatan - Nomor KTP
- Jumlah penumpang - Nomor Telepon

Ya
Memilih metode Melakukan Pembayaran
Penerbitan E-Tiket
pembayaran pembayaran Diterima?

Membayar sesuai
dengan nominal harga
Tidak

Notifikasi
Pembayaran gagal/
kedaluwarsa
Jenis-jenis User Flow
1 Task Flow
2 Wire Flow
3 User Flow
 Task Flow Wire Flow
Wire Flow User Flow
Level Sederhana/Abstrak Konkrit/Jelas
Cukup Konkrit Konkrit/Jelas

Bentuk Flowchart UI/Prototype

Wireframe UI dalam bentuk flow

Representasi Alur bisnis Tinggi (kasar)

Alur aplikasi Alur aplikasi (detail)

Waktu Cepat Lama Lama

Dilakukan Ideation & Solution Design

Ideation & Design / Prototyping
pada Concept Validation Concept Validation
Tools untuk Membuat Userflow
Framework selain User Flow
Task Analysis
Apa itu Task Analysis?
Task Analysis adalah representasi
aktivitas user dari awal sampai akhir
yang teridentifikasi dari observasi
user.
💡
Task analysis merupakan bentuk gambaran
besar dari sebuah UX Design. Meskipun task
analysis jarang dilakukan, akan tetapi dapat
membantu designer dalam membuat
keputusan pada saat brainstorming.
User ingin Memesan tiket Membayar Boarding ke Liburan
liburan kereta api tiket gerbong berhasil
kereta api dilakukan
 Task Analysis dapat digunakan saat

Menghadapi alur proses yang kompleks yang dapat di

breakdown sesuai dengan kebiasaan user
Information Architecture
Apa itu Information Architecture?
Information Architecture adalah
struktur informasi dari sebuah
website atau mobile apps

💡
Information Architecture biasa disebut
struktur menu dari sebuah website agar
mempermudah user dalam menavigasikan
menu.
Membuat IA dapat dibuat dari

1 Hasil observasi dengan Card Sorting

2 Hasil data analitis dari website

atau mobile apps

3 Objektif bisnis dari sponsor/

manajer
Information Architecture digunakan saat

Membuat website/aplikasi

💼 🏛 👩💻

Company Website Dashboard

Profile Pemerintah Admin/Client