Specifications

16 | USER INTERFACE
DESIGN GUIDE
Designing in the Template
Modero X Series Panoramic Touch Panel displays come in two sizes and two orientations per size:
• 20.3”Landscape:18.7”x7.8”(475mmx198mm),1920x800pixels
• 20.3”Portrait:7.8”x18.7”(198mmx475mm),800x1920pixels
• 19.4”Landscape:18.7”x5.9”(475mmx151mm),1920x530pixels
• 19.4”Portrait:5.9”x18.7”(151mmx475mm),530x1920pixels
The Touch Panels can be placed horizontally or vertically, which will require alterations in the template to accommodate each
scenario of use. The 20.3” and 19.4” panel size descriptions refer to the viewable area as measured diagonally which is a
traditional way of describing the viewable area of a touch panel or monitor.
Figure 4 demonstrates sizing specifications which should be followed accurately to maximize the provided space and
provide the best user experience when designing in the template. Following are additional recommendations:
• Leavea10-pixelborderbetweentheedgeofthewindowandtheMenutitle.
• Leavea20-pixelborderbetweentheedgeofthewindowandthenearestcontrols.
• Leavea20-pixelspacingbetweeneachcontrol.
• Makebuttonsandcontrolsizesproportionaltoeachother(forexample,a60x60squarebuttonand120x60 
rectangular buttons).
• Designsshouldbecenteredaroundfundamentalpixelincrements.Forexample,usemultiplesof10. Amultipleof10
is recommended because the TPD layout tools allow elements to be easily positioned in increments of 10.
• Buttonlabelsmustbeconciseandmakesensewhentakenoutofcontext.Otherwise,usersrelyingonscreenreaders
or similar assistive technologies will not always be able to immediately understand the relationship between a control
and those surrounding it.
• Assignaccesskeystoalleditablecontrols.Ensurethatusingtheaccesskeyfocusesitsassociatedcontrol.