This page captures the mobile-specific design decisions in DomiDo. The Progressive Web App is mobile-first; most users meet it on a phone or tablet. The examination evaluated every portrait wireframe for thumb-zone reachability, scroll behaviour, gesture conflicts, software-keyboard interaction, and touch-target compliance. Every Critical and Major finding is resolved. The picture below covers where high-frequency actions sit on the screen, how sticky elements relate to scroll, how the 3D viewer coexists with native swipe gestures, how the software keyboard does not bury the action that triggered it, how every touch target meets the forty-four-by-forty-four minimum, and how the application respects the operating system's reduced-motion and reduced-data preferences.
Frequent actions sit in the thumb zone — the lower two-thirds of the screen for one-handed phone use. The bottom tab bar is the most reachable surface. Primary calls-to-action ("Add to Cart — [price]", "Proceed to Checkout — [total]", "Submit Return") are sticky at the bottom of the viewport on phones so a one-handed user never reaches. The Assembly Viewer step counter — frequently tapped during outdoor assembly when one hand is holding a block — sits at the bottom of the screen, not in the top-centre. The play, pause, and step navigation controls sit on a bottom navigation bar above the safe-area inset. Secondary actions sit in the central scroll area. Tertiary actions, settings, and rarely used controls sit at the top of the screen where the user can use their other hand.
Sticky elements never obscure essential content. The bottom tab bar is sticky and always reserves its space. The sticky purchase calls-to-action add another fifty-six pixels of fixed real estate but never overlap the cart-tab badge or other interactive elements. The home carousel is not sticky; it scrolls out of view. The Design Review 3D viewer reduces to forty per cent of the viewport on mobile (from a previous fifty per cent) so the price, the build time, and the sticky purchase call-to-action remain visible.
The 3D viewer would conflict with page scroll if uncontrolled. The viewer container declares a vertical-pan-only touch action so the browser handles vertical scroll natively; horizontal gestures inside the viewer orbit the model. Two-finger drag inside the viewer pans freely; outside the viewer it scrolls. The Assembly Viewer's horizontal explode slider previously conflicted with the iOS back-swipe gesture. The slider now sits twenty pixels from the left edge with a forty-four-by-forty-four-point handle that applies a touch-action of none on the handle only — the back-swipe still works on the rest of the screen. A "Tap to interact" pulsing hint appears below the 3D viewer until the user first interacts so a user scrolling past the viewer does not accidentally trigger orbit. The pinch gesture inside the viewer zooms the model. Outside the viewer, pinch zooms the browser. Within full-screen image viewers, pinch zooms the image up to four times and double-tap toggles between one and two-and-a-half times.
The software keyboard opens to about half the viewport on smaller phones. Form layouts ensure the focused field and its action button remain visible above the keyboard. The AI Prompt screen reflows so that the text area, the credit-cost notice, the reference-image upload, and the Generate button all stay reachable when the keyboard is open — the Generate button is repositioned above the keyboard, not hidden beneath it. Multi-line text areas auto-scroll as content grows so the cursor stays visible. Hardware return-key behaviour is consistent: on single-line inputs the return key submits the form; on multi-line inputs it inserts a newline.
Every interactive element meets the forty-four-by-forty-four CSS-pixel minimum. Even the smallest interactive elements — the cart remove button, the comment reply links, the Assembly Viewer speed indicator, the explode-view slider handle — meet the target. Adjacent touch targets carry at least eight pixels of separation so a fat-fingered tap does not trigger the wrong action. Tappable areas extend through padding rather than relying on the visible icon size; a sixteen-pixel icon sits inside a forty-four-pixel hit area. Mobile-specific destructive actions (swipe-to-delete) are paired with a keyboard-accessible Delete button so a desktop user or a screen-reader user has the same affordance.
The Design Review screen previously had ten content items in four to five viewports — excessive on mobile. The current design collapses secondary information (solver selector, re-optimise history, detailed Bill of Materials) into expandable sections. The primary decision (price, purchase call-to-action) sits above the fold; the user does not have to scroll to make the decision. The Gallery Detail and Designer Profile screens use a similar collapse-and-expand pattern for descriptions, tags, and metadata so the primary action stays visible.
Portrait is primary on phones; landscape is supported. Critical screens (Assembly Viewer, the gallery 3D viewer) work in landscape so a user can compare the model with a physical kit side by side. On phones in landscape the Design Review viewer reduces to forty per cent of the viewport height to leave room for the sticky purchase call-to-action. The application respects the platform safe-area insets — the bottom tab bar extends its background into the home-indicator area but reserves the inset for the gesture, the top of every screen accounts for the notch on iPhones and the punch-hole on Android, and full-screen experiences (Assembly Viewer, Stripe checkout) extend edge-to-edge while keeping their controls inside the safe area. Pull-to-refresh is available on Gallery Browse, order history, My Designs, and the notifications list with an eighty-pixel trigger; the refresh indicator (a sage-green circular spinner) is centred sixteen pixels below the navigation bar; pull-to-refresh is disabled while a filter or sort bottom sheet is open to prevent gesture conflicts. Swipe-to-delete is paired with a five-second undo toast so a misfired swipe is reversible; swipe-to-archive on the notification list also uses the undo pattern.
The application uses reduced-data and reduced-motion preferences when the operating system reports them. Reduced motion replaces slide-and-scale transitions with fades and stops the skeleton shimmer. Reduced data loads lower-resolution thumbnails and defers the 3D viewer's physically-based-rendering textures until first interaction. Background processing (pipeline jobs, AI generation) continues server-side when the user backgrounds the application; the user can return and find the design ready. Push notifications announce pipeline completion if granted.
The mobile usability examination identified twenty-seven issues, five Critical. The Critical issues were the Assembly Viewer step counter in the low-reach zone, the Design Review call-to-action below four to five viewports, the gesture conflict between page scroll and the 3D viewer, the software keyboard overlapping the AI Prompt Generate button, and the excessive information density on Design Review. Every Critical issue is resolved by the design responses documented above.