Lewati navigasi
← Skill labsAKLUNA · interaction map v2
COLOR STUDY

Pilih bahasa warna app

Preview tiga arah premium yang tetap fokus pada keterbacaan dan status semantik.

Aktif: Polar Glass. Glass hanya dipakai pada panel yang perlu layering.

OPERATIONAL PLAYGROUND

Satu bahasa untuk setiap klik.

Uji alur, recovery, dan keputusan penting sebagai pengalaman utuh, bukan katalog komponen.

STATE CONTRACT
idle→validate→submit→recover

6 families · 3 viewports · keyboard ready

DESIGN READ

Bukan katalog komponen.

Direction ini sengaja dimulai dari perilaku kerja: apa yang berubah, siapa yang perlu tahu, dan bagaimana kembali saat gagal.

ModeOperate

Keputusan harus terbaca sebelum dekorasi.

POVState-first

Setiap klik punya konsekuensi dan jalan pulang.

DensityFocused

Satu aksi dominan; detail tetap dekat konteks.

Yang sengaja ditolakSemua fitur jadi equal cardGlass di tabel dan form utamaSuccess tanpa bukti perubahan
FLOW

Transaction scenario

Perjalanan lengkap dari review sampai recovery, dengan data simulasi yang tetap nyata.

LIVE TRANSACTION

Simulasikan satu alur utuh

ready
  1. 1Siap
  2. 2Validasi
  3. 3Simpan
  4. 4Hasil
Siap direview

3 item · Rp286.000

DATA

View data yang bisa dipakai

Tabs, search, filter, table, bulk action, detail drawer, dan undo bekerja sebagai satu alat kerja.

3 dari 3 obat
Daftar stok obat
PilihNama obatSatuanStokStatusAksi
Paracetamol 500 mgBatas minimum 8 stripstrip12Aman
Asam FolatBatas minimum 6 botolbotol4Menipis
Vitamin B12Batas minimum 5 kotakkotak9Aman
FORM

Input & validation

Label nyata, helper stabil, dan error yang menjelaskan jalan keluar.

Wajib

Pakai nama dan dosis yang terlihat pada kemasan.

Wajib
Rp

Angka per satuan, tanpa titik pemisah.

Wajib

Pilihan pendek memakai native select.

Opsional

Tidak ada batas karakter semu.

Submit memindahkan fokus ke error pertama.
ACTION

Button hierarchy

Satu aksi dominan per area. Label menyebut hasil, bukan sekadar “OK”.

State sample
Semantic rolesPrimarySuccess / confirmAttention / reversibleDestructive / irreversible
SIGNAL

Feedback ladder

Intensitas mengikuti konsekuensi, bukan selera warna.

Informasi

Pengeluaran otomatis masuk ke Buku Keuangan.

Periksa stok

Tiga item akan mengubah jumlah stok setelah transaksi disimpan.

Pembelian tersimpan

Stok 3 obat dan Buku Keuangan sudah diperbarui.

Toast hanya konfirmasi ringan. Bukti transaksi penting tetap berada di halaman.

LAYER

Tooltip & dialog

Informasi tambahan tetap ringan; keputusan penting mendapat ruang fokus.

TOOLTIP
Stok minimum

Hover, focus, tap, dan Escape didukung.

DIALOG
REVIEW

Simpan pembelian?

Perubahan atomik

Stok dan pengeluaran akan diperbarui dalam satu transaksi.

Supplier
Apotek Sehat
Total item
3 obat
Total
Rp286.000

Focus kembali ke trigger setelah ditutup.

STATE

Async & domain preview

Simulasikan sukses maupun gagal; input dan jalur recovery tetap jelas.

ASYNC ACTION

Siap disimpan.

STOCK DELTA

Paracetamol 500 mg

Stok sekarang
12 strip
Pembelian
+5 strip
Stok baru
17 strip