GFS Design System — NetSuite Mobile & Tablet Patterns

02 Mobile Design Principles Touch targets, thumb zones, font minimums, navigation patterns

Touch Target Minimums

44px Minimum

Every interactive element must be at least 44 x 44px. This is the Apple HIG standard and accounts for finger pad contact area (~7mm).

min-height: 44px; min-width: 44px;

8px Spacing Between

Adjacent touch targets require at least 8px gap to prevent accidental taps. For destructive actions (delete, cancel), increase to 16px.

gap: 8px; /* 16px for destructive */

Glove Mode: 56px

Warehouse scanner and driver apps must use 56px targets. Cold-storage gloves reduce precision by ~40%. Add 12px padding to all interactive areas.

min-height: 56px; /* glove mode */

16px Body Text

Body text must be 16px minimum on mobile to prevent browser zoom on input focus. Labels can be 12px, but never below 11px for any text.

font-size: 16px; /* prevents auto-zoom */

Touch Target Size Comparison

28

Too Small

36

Too Small

44

Minimum

48

Standard

56

Glove Mode

Touch Target CSS

.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}
.touch-target--glove {
  min-height: 56px;
  padding: 16px 20px;
}

Thumb Zone Diagram (Right-Hand Hold)

STRETCH ZONE

REACH ZONE

EASY ZONE

Easy Zone (Bottom 40%)

Primary actions, navigation tabs, and frequently used controls go here. This is where the thumb naturally rests during one-handed operation.

Action buttons, tab bar, primary CTA

Reach Zone (Middle 30%)

Content display area. Scrollable lists, data cards, and read-only information. The thumb can reach here but should not need to precisely tap small targets.

Content lists, data cards, scrollable area

Stretch Zone (Top 30%)

Status bar and page title only. Never place primary actions here. If navigation must live at the top, use a hamburger that opens a bottom sheet, not a top dropdown.

Page title, status only — no primary actions

Mobile Navigation: Hamburger vs. Bottom Tab Bar

Option A: Hamburger + Slide Panel

GFS

Warehouse

Navigation

Scanner

Receiving

Put Away

Pick & Pack

Transfers

Content dimmed

            Best for: 5+ navigation items, complex workflows
          

Option B: Bottom Tab Bar

GFS Scanner

Full-width content area

☷

SCAN

☰

LIST

🔃

HISTORY

⚙

MORE

            Best for: 3-5 top-level actions, quick switching
          

Progressive Disclosure

Level 1: Summary

Show the minimum: name, status, primary metric. One line per item in a list. Tap to expand.

PO-4821 IN TRANSIT

Level 2: Key Details

On tap, show additional fields: vendor, date, line count, total. Expand inline or push to detail view.

PO-4821 IN TRANSIT

            Vendor: Bongards

            Lines: 4 items

            ETA: May 20, 2026

Level 3: Full Record

Full-screen detail view with all fields, line items, attachments, and actions. Push as a new screen with back navigation.

← Back PO-4821

            All fields...
Line items...
Attachments...
Actions...
          

■ All touch targets verified at 44px minimum. Warehouse/driver apps use 56px glove-mode targets.

03 Warehouse Scanner UI Barcode scanner suitelet — 375x812 viewport, one-handed, glove-safe

9:41

●●●●○ 5G

☀

Point camera at barcode

Bongards Barrel Cheddar 640lb

SKU: BNG-BC-640 | Lot: 2026-0519-A

Bin

C-14

Qty

12

Temp

34°F

⇩ Receive

⇲ Put Away

☑ Pick

⇄ Transfer

Qty 12

1

2

3

4

5

6

7

8

9

⌫

0

OK

iPhone 14 Pro — 375 x 812

Design Decisions

Camera-First Layout

The scan area occupies the top half of the screen. The camera viewfinder is always active with corner bracket guides for barcode alignment. A single tap on the viewfinder area triggers a manual scan if auto-detect fails. The flash toggle is positioned at top-right for easy access.

One-Handed Operation

All critical controls are in the bottom 50% of the screen (easy thumb zone). Action buttons are 56px tall for glove-safe operation. The number pad uses 44px keys with 6px gaps. The OK button is bottom-right where the thumb naturally rests.

Instant Feedback

On successful scan, the item result card slides up with a 3px cobalt top border. The viewfinder flashes green. If the barcode is unrecognized, the border turns red and the device vibrates. No modal dialogs — feedback is inline.

Number Pad Over Keyboard

A custom number pad replaces the system keyboard for quantity entry. This provides larger targets (44px), prevents accidental text input, and includes a dedicated OK button. The backspace key clears one digit at a time.

Interaction Specifications

Element	Size	Behavior
Scan viewfinder	375 x 260px	Auto-detect; tap for manual trigger
Flash toggle	36 x 36px	Toggle torch on/off
Action buttons	~80 x 56px	Tap to select mode; active state fills cobalt
Number pad keys	~105 x 44px	Tap to append digit; 150ms haptic
OK button	~105 x 44px	Confirms quantity; submits to NetSuite

■ All buttons meet 56px glove-mode minimum. Camera auto-detect uses BarcodeDetector API with ZXing fallback.

04 Driver Delivery App Route overview, stop detail, delivery confirmation, signature capture

7:15

●●●●● LTE

Today's Route

RT-2026-0519

6 stops · 142 mi

2 of 6 delivered

✓

Good Eats Deli — Patchogue

142 W Main St, Patchogue, NY 11772

4 items 6:45 AM

›

✓

Harbor Cafe — Bay Shore

88 E Main St, Bay Shore, NY 11706

2 items 7:02 AM

›

3

Sunrise Bakery — Islip

305 Main St, Islip, NY 11751

6 items 34°F req

›

4

Metro Pizza — Brentwood

200 Suffolk Ave, Brentwood, NY 11717

3 items

›

5

Sal's Deli — Central Islip

45 Carleton Ave, Central Islip, NY 11722

8 items 28°F req

›

6

Edgewood Market

131 Heartland Blvd, Edgewood, NY 11717

5 items

›

NAVIGATE TO STOP 3

Route Overview

7:18

●●●●● LTE

← Sunrise Bakery — Delivery

Delivery Details

Sunrise Bakery

305 Main St, Islip, NY 11751

Contact: Maria Santos · (631) 555-0147

SPECIAL: Deliver to rear dock only. Ring bell twice.

Items (6)

Mozzarella Block 5lb x4

Cream Cheese 3lb Tub x2

Signature

Tap to sign

Delivery Photos

📷 Photo

+ Add

Temperature Reading

°F

→ Swipe right to confirm delivery

CONFIRM DELIVERY

Delivery Confirmation

Driver App Patterns

Route as Scrollable List

Stops display in delivery order with clear visual state: completed (green check, dimmed), active (blue left border, highlighted), and pending (gray number). Each stop shows name, address, item count, and temperature requirements. Tapping a stop pushes to the detail view.

Maps Integration

The "Navigate to Stop" button at the bottom opens the device's default maps app with the delivery address pre-filled. Uses geo: URI on Android and Apple Maps URL on iOS. Always in the easy thumb zone.

Signature Capture

Full-width signature area uses HTML Canvas with touch events. Tapping opens a dedicated full-screen signature view with larger drawing area. Signatures save as PNG and attach to the NetSuite delivery record.

Swipe Gestures

Swipe right on a stop in the route list to mark it complete. Swipe left to report a delivery exception. Gestures require 60px minimum travel distance to prevent accidental triggers. Visual indicator shows action preview during swipe.

Offline Capability

Route data caches in IndexedDB on load. Signatures, photos, and confirmations queue locally and sync when connectivity returns. A status bar shows sync state: green = live, yellow = queued, red = offline.

■ Route data syncs via SuiteScript RESTlet. Signature canvas uses PointerEvents for cross-device compatibility.

05 Tablet Pick/Pack Station 1024x768 split-view suitelet for warehouse workstation

GFS Pick & Pack Station

Station A-3 PICKING

RH

Order: SO-8847 Customer: Good Eats Deli

5 of 8 picked Ship by: 05/19 14:00

Aisle C — Cold Storage 3 items

✓

Bongards Barrel Cheddar 640lb

BNG-BC-640 · Bin C-14 · Lot 0519-A

x2

✓

Mozzarella Block 5lb

MOZ-BLK-5 · Bin C-08 · Lot 0518-B

x4

Cream Cheese 3lb Tub

CC-TUB-3 · Bin C-22 · Lot 0517-C

x6

Aisle D — Dry Storage 3 items

✓

Pancake Mix 25lb

PM-25 · Bin D-03 · Lot 0510-A

x2

✓

Flour AP 50lb

FL-AP-50 · Bin D-07 · Lot 0512-B

x1

Sugar Granulated 25lb

SG-25 · Bin D-11 · Lot 0515-A

x3

Aisle F — Frozen 2 items

✓

Butter Unsalted 1lb

BT-US-1 · Bin F-02 · Lot 0516-D

x12

Puff Pastry Sheets

PP-SH · Bin F-09 · Lot 0514-A

x4

Current Pick: Cream Cheese 3lb Tub

Bin

C-22

Qty Needed

6

Available

24

SCAN TO CONFIRM

MANUAL

Pack Station — Box Selection

Small

12x10x8

Medium

18x14x12

Large

24x18x16

Pallet

48x40x48

Packed Items Verification

✓

Bongards Barrel Cheddar 640lb x2 1,280 lb

✓

Mozzarella Block 5lb x4 20 lb

—

Cream Cheese 3lb Tub x6 18 lb

PRINT LABEL

HOLD

iPad / Tablet — 1024 x 768 (Landscape, Mounted at Workstation)

Split View Layout

Pick list occupies the left 45%, item detail/pack station on the right 55%. This mirrors the physical workflow: scan the list, act on the detail. The left panel scrolls independently while the right panel shows the current item context.

Bin Walk Optimization

Items are sorted by aisle and bin number to create the shortest physical path. Section headers group items by zone (Cold Storage, Dry, Frozen). This eliminates backtracking and reduces pick time by up to 35%.

Label Print Trigger

The Print Label button sends the packing slip to the station's paired Zebra ZPL printer via WebUSB or network print server. Box selection auto-calculates shipping weight and dimensions for the carrier integration.

■ Tablet mounted on articulating arm at 10° tilt. Checkboxes are 24x24px with 10px gap — sized for warehouse gloves.

06 Mobile Dashboard Patterns KPI cards, charts, tables, and filters adapted for phone viewports

8:30

●●●●○ 5G

Updated 2 min ago

Revenue MTD

$2.4M

+12.3%

Orders Today

47

+8.1%

On-Time %

96.2%

-1.4%

Weekly Revenue

Recent Orders

SO-8847 — Good Eats

$4,280 · 6 items

SHIPPED

SO-8846 — Metro Pizza

$1,850 · 3 items

PICKING

Dashboard — Phone

8:30

●●●●○ 5G

Filters — Bottom Sheet Modal

Dashboard Adaptation Rules

KPI Cards: Stack Vertically

Desktop's 4-column KPI grid becomes a single-column stack on phone. Each card shows label, value, change indicator, and a sparkline on the right. Horizontal layout within each card preserves information density without horizontal scrolling.

Charts: Full-Width Resize

Charts expand to 100% viewport width with reduced vertical height. Bar charts work best on mobile — line charts become hard to read below 300px width. Pie charts should be replaced with horizontal bar charts on mobile. Tap a bar to show the tooltip.

Tables: Card Conversion

Data tables transform into stacked cards on mobile. Each row becomes a card showing 2–3 key fields with status badge. The card is tappable to expand to full record. Never horizontally scroll a table on phone — convert to cards instead.

Filters: Bottom Sheet

Desktop sidebar filters collapse to a filter button that opens a bottom sheet modal. Chips replace dropdown selects for single-tap selection. The sheet slides up from the bottom — always within thumb reach. A drag handle at the top allows dismissal.

Pull-to-Refresh

The dashboard supports pull-to-refresh gesture for data reload. A spinner with "Updated X min ago" timestamp provides feedback. Auto-refresh interval is 5 minutes when the app is foregrounded.

■ Dashboard data loads via SuiteScript RESTlet with 5-minute cache. Charts use inline SVG for fastest mobile render.

07 Touch Form Patterns Mobile-optimized inputs: selects, date pickers, steppers, toggles, swipe actions

Mobile Form Controls

Full-Screen Select (Vendor)

On mobile, this opens the native OS picker for full-screen selection. Uses 16px font to prevent iOS auto-zoom.

Native Date Picker

Uses type="date" for native mobile date wheel. No custom date pickers needed.

Quantity Stepper

12

+/- buttons replace typing for common quantity adjustments. Each tap increments by 1; long-press accelerates.

Toggle Switches (Replace Checkboxes)

Temperature monitoring

Require signature

Photo required

44px tall toggle tracks replace 16px checkboxes. Clear on/off state visible at a glance.

Swipe Actions on List Items

APPROVE

PO-4821 — Bongards

$12,400 · Pending Approval

PENDING

→ Swipe right = Approve

REJECT

PO-4822 — Saputo

$8,200 · Pending Approval

PENDING

← Swipe left = Reject

PO-4823 — Great Lakes

$6,100 · Pending Approval

PENDING

Default state — no swipe

Swipe Specifications

Property	Value
Trigger distance	60px minimum
Commit distance	120px (auto-execute)
Snap-back	200ms ease-out
Haptic	Medium impact at trigger
Undo	3s toast with undo button

■ All form inputs use 16px font-size to prevent iOS Safari auto-zoom. Toggle switches implement role="switch" for accessibility.

08 Responsive Breakpoint Reference Same suitelet at 4 breakpoints: 375px, 768px, 1024px, 1440px

GFS Breakpoint Definitions

Breakpoint	Width	Layout	Navigation	Touch Targets
Phone	375px	Single column, stacked	Hamburger or bottom tabs	44–56px
Tablet Portrait	768px	2 columns, stacked forms	Collapsed icon sidebar	44px
Tablet Landscape	1024px	Sidebar + content (split view)	Full sidebar, 200px	44px
Desktop	1440px	Full app shell, multi-panel	Full sidebar, 240px	32–44px

Inventory Suitelet at 4 Breakpoints

Phone375px

GFS

ON HAND 2,847

COMMITTED 1,204

Bongards Cheddar

640lb · C-14 · 12 units

Mozzarella Block

5lb · C-08 · 48 units

Cream Cheese Tub

3lb · C-22 · 24 units

Single column, stacked

Tablet Portrait768px

G

ON HAND 2,847

COMMITTED 1,204

Item	Bin	Qty
Bongards Cheddar	C-14	12
Mozzarella Block	C-08	48
Cream Cheese	C-22	24

2 columns, icon sidebar

Tablet Landscape1024px

GFS

Inventory

On Hand

Committed

Receiving

Transfers

ON HAND 2,847

COMMITTED 1,204

AVAILABLE 1,643

INBOUND 340

Item	SKU	Bin	Lot	Qty	Status
Bongards Cheddar	BNG-BC	C-14	0519-A	12	In Stock
Mozzarella Block	MOZ-BLK	C-08	0518-B	48	In Stock
Cream Cheese	CC-TUB	C-22	0517-C	24	In Stock

Sidebar + content

Desktop1440px

GFS Inventory Management

Dashboard Inventory Orders Reports

M

M. Levine

Quick Links

On Hand

Committed

Receiving

Transfers

Adjustments

Reports

Locations

Edgewood, NY

Hermitage, PA

Search items, SKUs, bins...

SEARCH

EXPORT

ON HAND 2,847 +3.2%

COMMITTED 1,204 +8.1%

AVAILABLE 1,643 -2.1%

INBOUND 340 +12.0%

Item	SKU	Bin	Lot	Qty	Commit	Avail	Status
Bongards Cheddar	BNG-BC-640	C-14	0519-A	12	4	8	In Stock
Mozzarella Block	MOZ-BLK-5	C-08	0518-B	48	20	28	In Stock
Cream Cheese	CC-TUB-3	C-22	0517-C	24	6	18	In Stock

Full app shell, multi-panel

BREAKPOINT CSS

/* Phone-first (default styles target 375px) */

/* Tablet portrait */
@media (min-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-sidebar { display: flex; width: 48px; }
  .content { margin-left: 48px; }
}

/* Tablet landscape */
@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-sidebar { width: 200px; }
  .content { margin-left: 200px; }
  .data-table { display: table; } /* show full table */
  .data-cards { display: none; } /* hide card view */
}

/* Desktop */
@media (min-width: 1440px) {
  .nav-sidebar { width: 240px; }
  .content { margin-left: 240px; max-width: 1200px; }
  .app-header-nav { display: flex; } /* show top nav */
}

■ Mobile-first CSS: default styles target 375px, then progressively enhance at each breakpoint.