82 lines
2.9 KiB
Markdown
82 lines
2.9 KiB
Markdown
# Dzikir Display Mode UX Brief
|
|
|
|
## 1) Objective
|
|
Provide two complementary experiences for Dzikir:
|
|
|
|
- **Daftar (Baris)** for fast scanning and jumping between items.
|
|
- **Fokus (Slide)** for one-item focus with consistent thumb reach and counting flow.
|
|
|
|
This mode applies to all Dzikir tabs: **Pagi**, **Petang**, and **Sesudah Shalat**.
|
|
|
|
## 2) Settings Specification
|
|
|
|
Section name in Settings: **Tampilan Dzikir**
|
|
|
|
| Label | Type | Options | Default | Visibility |
|
|
|---|---|---|---|---|
|
|
| `Mode Tampilan Dzikir` | Segmented | `Daftar (Baris)` / `Fokus (Slide)` | `Daftar (Baris)` | Always |
|
|
| `Posisi Tombol Hitung` | Segmented | `Pill Bawah (Disarankan)` / `Bulat Kanan Bawah` | `Pill Bawah (Disarankan)` | Only in `Fokus (Slide)` |
|
|
| `Lanjut Otomatis Saat Target Tercapai` | Switch | `On/Off` | `On` | Only in `Fokus (Slide)` |
|
|
| `Getaran Saat Hitung` | Switch | `On/Off` | `On` | Always |
|
|
|
|
## 3) Interaction Rules
|
|
|
|
### A. Mode: Daftar (Baris)
|
|
- Keep current row-based list and per-row counter pattern.
|
|
- Users can scan, jump, and increment any row directly.
|
|
- Counter behavior remains per item, per day.
|
|
|
|
### B. Mode: Fokus (Slide)
|
|
- Display exactly **one dzikir item per slide**.
|
|
- Horizontal swipe moves between dzikir items.
|
|
- Counter button is fixed in one location (based on selected button position).
|
|
- Top area displays progress: `Item X dari Y`.
|
|
- Tapping counter increments by `+1` until target.
|
|
- When target reached:
|
|
- Mark item as complete.
|
|
- If `Lanjut Otomatis... = On`, move to next slide automatically (except last item).
|
|
|
|
## 4) Button Placement Recommendation
|
|
|
|
Primary recommendation:
|
|
|
|
- **Pill Bawah (Disarankan)** as default in Focus mode.
|
|
|
|
Reason:
|
|
- Better one-handed ergonomics.
|
|
- Consistent location improves counting rhythm.
|
|
- Larger tap target lowers miss taps while reciting.
|
|
|
|
Optional style:
|
|
- **Bulat Kanan Bawah** for users preferring minimal visual footprint.
|
|
|
|
## 5) Data & State Behavior
|
|
|
|
- Counter data is shared across modes (switching mode must not reset progress).
|
|
- Existing daily tracking logic remains unchanged.
|
|
- Switching mode keeps current tab (`Pagi/Petang/Sesudah Shalat`) intact.
|
|
- Completed state must be reflected identically in both modes.
|
|
|
|
## 6) Completion & Feedback UX
|
|
|
|
- Counter states: `normal` and `completed`.
|
|
- Completed label example: `Selesai`.
|
|
- Last item completion feedback:
|
|
- Show subtle confirmation message: `Semua dzikir pada tab ini selesai`.
|
|
- Empty or missing data:
|
|
- Show friendly empty state, never blank screen.
|
|
|
|
## 7) Default Product Decision
|
|
|
|
- App default: **Daftar (Baris)** for broad familiarity.
|
|
- Advanced/focus users can enable **Fokus (Slide)**.
|
|
- In Focus mode, default button placement: **Pill Bawah (Disarankan)**.
|
|
|
|
## 8) Success Criteria
|
|
|
|
- Users can switch between modes without losing count progress.
|
|
- Focus mode reduces hand travel for repeated taps.
|
|
- Both modes remain consistent across all Dzikir tabs.
|
|
- No behavioral mismatch between count target, completion state, and progress indicator.
|
|
|