Skip to main content

Mobile UX Golden Rule

Mobile UX is a non-negotiable product quality rule for Finance App.

Every user-facing change must keep the mobile workflow simple, useful, intuitive, and reliable before desktop polish is considered complete.

Required Behavior​

  • Start design and review from the smallest supported viewport.
  • Optimize the primary task flow before secondary desktop conveniences.
  • Keep critical actions visible, reachable, and touch-friendly.
  • Make summary-to-detail navigation obvious for non-technical users with visible drilldown actions, preserved account/category/month/date/review filters, and clear return paths.
  • Preserve route-owned Resumo and Despesas filters across tab changes until the user explicitly changes or clears them.
  • Use progressive disclosure for dense forms, paginate long histories, and show one selected summary mode instead of competing charts/lists.
  • Make records requiring user action visually obvious, especially classification review rows, and pair every alert with a direct CTA to the filtered action workflow.
  • Keep import workflows account-aware and default them safely to Conta principal. Import confirmation must honor the account and row categories selected at confirmation time, not upload-time defaults from the preview.
  • Treat vertical space as premium: data first, compact active-filter chips, and expandable filters/secondary controls.
  • Keep tabbed utility pages compact. Creation actions for managed entries belong inside the explicit management tab, not as top-level buttons competing with read-only views. Do not add decorative dividers or large spacer gaps between title rows, internal segmented tabs, and the currently selected content.
  • Open secondary forms, creation panels, edit panels, and filter controls centered in app-themed modals/overlays with internal scroll. Do not expand the main page and move the user's working position unless the route itself is dedicated to that form.
  • Use themed app controls for app-owned filters instead of native browser selects. Native date/calendar inputs are acceptable.
  • Use themed app controls for mobile account, category, month, review, and other app-owned selectors in product workflows. Dropdown menus for these controls must overlay the current UI without changing parent height, pushing content down, or moving the user's working position. Native browser controls are acceptable for date/calendar and file inputs.
  • Keep mobile shell actions collapsed until intent and keep bottom navigation fixed without scroll, flicker, or layout shift.
  • Give every action-oriented filter and expanded filter panel an obvious in-place exit, such as Limpar Filtro, Mostrar todos, or Fechar filtros.
  • Put contextual filter exits next to the work they affect. Do not hide the only way out in a top chip or a control group that otherwise is not interactive.
  • Keep bulk edit/delete actions behind explicit selection mode and app-themed confirmation dialogs.
  • Use app-themed confirmation dialogs for destructive or session-ending actions. Do not use native browser confirm, alert, or mismatched popups for product workflows.
  • Prefer stacked, scannable mobile layouts over table-only workflows.
  • Keep copy short and action-oriented. Do not add explanatory clutter inside the app.
  • Keep manual finance entry product-simple. Do not expose accounting implementation concepts such as debit lines, credit lines, journals, status, or currency plumbing in normal user workflows.
  • Keep voice workflows elderly-friendly and confirmable: global compact trigger, explicit recording start, short audio, visible interpreted preview, and clear confirmation before saving data or navigating to a filtered view. AI interpretation must not override transcript facts such as spoken amount, income/expense intent, or explicit account/category mentions.
  • Prevent horizontal overflow, overlapping text, hidden controls, and layout shifts.
  • Make menu navigation, summary, expenses, import, review, ledger, reports, auth, and settings flows usable with one narrow viewport.
  • Treat every route as mobile-facing, even if a desktop layout also exists.
  • Treat mobile validation evidence as part of acceptance criteria for meaningful UI work.

Implementation Checklist​

For every UI change, record in the task file:

  1. the primary mobile workflow touched
  2. the smallest viewport reviewed
  3. any layout simplification made for mobile
  4. remaining mobile UX risk, if any
  5. docs or onboarding updates made

Documentation Rule​

When the mobile UX standard changes, update:

  • README.md
  • ONBOARDING.md
  • AGENTS.md
  • CODING_STANDARDS.md
  • core/frontend/README.md
  • docs/workflows/mobile-ux-golden-rule.md
  • docs-site/docs/getting-started/agent-onboarding.md
  • .tasks/INDEX.md and the active task file