Guide
UI/UX Testing With Document Mockups
Documents are awkward UI citizens. They carry fixed visual conventions (thermal width, A4 margins, table grids) into fluid web layouts. Mockups from ReceiptPlay let you confront those conventions early—before a stakeholder pastes a blurry phone photo into Figma comments.
Why documents are difficult UI components
Unlike cards you fully control, receipts and invoices arrive as images or PDFs with their own typography. Your viewer must zoom, pan, annotate, and sometimes OCR without destroying readability. Failures show up as clipped totals, unreadable 9px thermal fonts on retina, or tables that force horizontal scroll on phones.
Desktop vs mobile
On desktop, A4 invoices benefit from side-by-side form + preview (ReceiptPlay’s own workspace pattern). On mobile, thermal slips fit better as vertical scroll. Test both: generate a fuel PNG and an ecommerce PDF, then open them in your product’s mobile webview and desktop modal.
Print layouts and PDF vs browser rendering
Browser preview uses HTML/CSS; PDF download rasterizes via canvas (html2canvas + jsPDF in ReceiptPlay). Slight font and QR differences are expected—use them as a teaching moment for “source of truth” in your own stack. After a CSS tweak to your viewer, regenerate the same sample and compare PDFs for regression.
Overflow, wrapping, logos, spacing
- Long names — push customer and seller fields until wrap or ellipsis appears.
- Tables — ecommerce line items with long titles + GST columns.
- Logos / images — game assets are separate; for documents, watch QR blocks and marketplace headers.
- Spacing — empty optional rows should not leave large holes or collapsed separators inconsistently.
Accessibility and visual hierarchy
When embedding previews, ensure focus order reaches download controls, alt text exists for meaningful images, and contrast holds in light/dark themes. Hierarchy should lead the eye to the total—if footers shout louder than the amount, redesign.
Screenshot comparisons
Keep a golden set of ReceiptPlay outputs checked into your design QA folder. After UI changes, drop new screenshots beside old ones. Prefer identical generator inputs so diffs highlight your product, not drift in sample data.
Example — PDF regression with ReceiptPlay
Create an ecommerce invoice with two items and shipping, download PDF, archive as invoice-baseline-v1.pdf. Change your viewer’s padding. Regenerate with the same typed values (or reload saved local form fields), download again, and visually diff. The generator becomes a stable fixture factory rather than a one-off demo toy.
Responsive previews in practice
ReceiptPlay’s workspace already shows a live preview beside controls on wide screens. Use that to iterate field values, then validate the downloaded asset inside your product at multiple breakpoints. A slip that looks fine at 1280px may collide with sticky action bars at 360px.
For invoices, watch horizontal table scroll. Prefer designs that pin the total column or stack rows on small screens—your product decision, informed by a real sample PDF from the Ecommerce generator.
Print testing
Open a downloaded PDF, print to a virtual printer, and check margins. Postpaid templates are built as A4-like sheets; fuel slips are narrower. If your app offers “Print receipt,” test both families so print CSS does not assume a single aspect ratio.
Hierarchy checklist for design critique
- Can someone find the total in under a second?
- Do dates and invoice numbers look secondary but readable?
- Are errors (failed OCR) announced without covering the document?
- Does dark mode in your viewer invert a receipt into an unreadable negative?
Bring two ReceiptPlay samples—one sparse fuel slip, one dense invoice—to every critique. Sparse and dense documents expose different hierarchy bugs.