Logo

User Flow Integration

KD 2.5 – Alur & Logika

01 / 07
Logic & Interaction

Integrasi
User Flow

Merancang peta perjalanan pengguna. Pelajari cara memvisualisasikan logika aplikasi sebelum mendesain visualnya.

START
Decision?
SUCCESS

Mengapa User Flow Penting?

Seperti arsitek yang membuat blueprint sebelum membangun rumah, UX Designer membuat flow sebelum mendesain UI.

  • Peta Perjalanan

    Mencegah user "tersesat" dalam aplikasi.

  • Deteksi Masalah

    Menemukan "dead-end" atau langkah yang tidak logis.

  • Komunikasi Tim

    Menjelaskan logika ke developer tanpa desain visual rumit.

Contoh Sedehana

Start: Buka App
Login Page
Sukses
Masuk Dashboard
Gagal
Error Msg

Jenis Flow Diagram

Tingkat kedalaman yang berbeda untuk tujuan berbeda.

Task Flow

Fokus pada satu tugas spesifik. Linear, sederhana, tanpa banyak percabangan.

Contoh: Tambah ke Keranjang

Lihat Item Klik Add Masuk Cart

Plugin & Tools di Figma

Kerja cerdas dengan bantuan plugin.

Autoflow

Penghubung frame otomatis. Cukup pilih dua frame, plugin akan membuat panah connector.

Shift + I > Search "Autoflow"

Wireflow

Perpustakaan template wireframe siap pakai untuk user flow cepat tanpa desain manual.

Drag & Drop screens

FigJam

Whiteboard digital untuk brainstorming, sticky notes, dan diagram logika tim.

Best for: Brainstorming

Tugas Individu

Membuat User Flow Diagram Aplikasi

Spesifikasi Tugas

Tema Aplikasi (Pilih Satu):
Perpustakaan Kantin Sekolah Jadwal Pelajaran
  • 1

    Buat Persona Pengguna (Nama, Goal, Pain Points).

  • 2

    Buat High-Level Flow dari Entry sampai Exit.

  • 3

    Detailkan dengan min. 3 Decision Points (Percabangan).

  • 4

    Sertakan Wireframe Low-Fi di samping node diagram.

Output Figma File

Page 1: Cover & Persona
Page 2: User Flow Diagram (Main)
Page 3: Wireframes
Page 4: Documentation (Narasi)

Deadlines

Pengerjaan di kelas 90 Menit

"Good design is obvious.
Great design is transparent."

— Joe Sparano