Mobile UI/UX and Screen Patterns
Mobile UI/UX and Screen Patterns
This domain tests mobile-first UI decisions in OutSystems: touch targets, navigation, list behavior, feedback, and reusable Blocks.
Core rules
- Design for touch: tap targets should be comfortably sized; avoid hover-only interactions.
- Use OutSystems UI patterns such as List, Card, Gallery, Master Detail, and Bottom Navigation where they fit; do not rebuild them from scratch.
- Use the List widget’s built-in infinite scroll and pull-to-refresh instead of custom JavaScript.
- Show Feedback Messages and loading indicators for Server Action calls; never leave a blank screen.
- Use Blocks for repeated UI, and pass data through Input Parameters.
- Respect safe areas and keyboard behavior on iOS and Android.
Worked example
A catalog screen shows products with pull-to-refresh and infinite scroll. Use an Aggregate with Max Records set to a page size and a Start Index driven by a local variable. Enable infinite scroll on the List; in the OnScrollEnd event, increment the Start Index and re-run the Aggregate. Add pull-to-refresh to reset the Start Index. Reasoning: paging keeps memory and network use bounded; built-in behaviors are testable and consistent.
Traps
- Using desktop tables and hover menus on mobile.
- Loading all records into a List and expecting smooth scrolling.
- Custom scroll listeners that fight the List widget.
- Forgetting empty states and error feedback.
- Putting a full screen inside a Block without handling safe areas.