jamshalat-diary/dzikir-display-mode-ux-brief.md

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.