Mobile UX for Philippine Service Businesses: A Research Brief

360×800px is the target screen — not 390px

Statcounter PH data: 360×800 is the most common mobile resolution in the Philippines (~40% of market). These are budget Android phones at PHP 3,000–6,000 (Redmi, Realme, Vivo). At 360px with 16px padding each side, the content area is only 328px. Every layout must be tested at this width before shipping.

Minimum 44px touch targets — 48px preferred

Apple Human Interface Guidelines: 44×44px minimum for all tappable elements. Google Material Design: 48×48px preferred. Budget Android users checking phones at events (rough hands, bright light, one-handed) need generous targets. py-3 (44px total) is minimum; py-4 is safer.

KPI numbers must be abbreviated on mobile

At 328px content width split into 3 equal columns (~100px each), a full number "₱27,150" at readable 30px font needs ~160px — it overflows. "₱27.1k" at the same size needs ~60px. GCash uses this pattern for secondary stats. Always use abbreviated formats (₱27.1k, ₱3.5k) for dashboard KPIs on mobile.

Light mode wins outdoors

In bright sunlight (outdoor weddings, birthday venues), displays cannot get dark enough relative to ambient brightness. Light mode maintains contrast because white reflects ambient light. Piepenbrock 2013 (Ergonomics): users read text faster and more accurately in light mode. Every major PH app defaults to light: GCash, Maya, Shopee, Grab, Facebook.

Bottom navigation — 5 tabs with icons + labels

AppMySite 2025 research: 5 tabs is optimal for app complexity. Icons alone confuse ~20% of users — always pair with labels. Active state must use both color change AND a visual indicator. Tap targets 48×48px. The bottom 50% of a 6.6" screen is the natural thumb zone — put primary actions there.

Forms: single column, label above field, 44px minimum height

Nielsen Norman Group mobile checklist: single column ONLY on mobile — no side-by-side fields. Label above field (floating labels reduce discoverability). Minimum field height 44px. Progressive disclosure (show 4 fields default, expand for more) reduces form abandonment significantly.

Body text minimum 16px on mobile

WCAG and Apple/Google guidelines: minimum 16px for body text on mobile. 14px for secondary labels. 12px only for badges and timestamps — never for actionable content. Outdoor use in bright venues degrades contrast and perceived size. Below 16px body text is a guaranteed accessibility failure for this audience.

Optimistic UI is critical for provincial Philippine networks

Provincial Philippine mobile networks (outside Metro Manila) have intermittent 4G with 2–4 second lag on data operations. Optimistic UI (update locally first, sync in background) prevents double-taps and duplicate entries when the UI appears frozen. Mark Paid, stage changes, and activity logging are the highest-risk actions.

Safe area insets must be respected on iPhones

iPhone X and newer have a 34px home indicator safe area at the bottom. Use env(safe-area-inset-bottom) in CSS with viewport-fit=cover in the meta tag. Without this, fixed bottom navigation obscures the home indicator or leaves a visible gap.

Budget Android phones have slower CPUs — keep animations under 300ms

Redmi/Realme devices common in the Philippines run on MediaTek chips with limited GPU resources. Use only transform and opacity for animations (GPU-accelerated). Keep all transitions under 300ms. Complex animations (parallax, blur effects) cause visible jank on these devices.