Mapping Your Design

The sample Modero X Panoramic template provided by AMX demonstrates core visual concepts to maintain consistent representation and meaning across the interface. Re-use of existing graphics from the template is encouraged and meets the current standards and user expectations for icons and metaphors in relation to the general public’s knowledge of touch interfaces and computing platforms. For projects in which you are altering the template, wireframes and interaction diagrams are useful tools for pre-planning.

Wireframes are a visual guide that represents the skeletal framework of each screen for the touch panel interface. They depict page layout and arrangement of the interface content. Wireframes can be as simple as sketches or created using a digital tool such as Microsoft VisioTM. The focus of wireframes can include:

• Information to be displayed on each page
• Range of functions available
• Properties of the information and functions
• Rules for displaying information
• Effects of different scenarios on the interface

Interaction diagrams visualize the sequence of activities within an interface. The flow of actions needed to perform specific tasks is documented to ensure all needed functions are made available within the interface. Interaction diagrams are specifically helpful for complex tasks which require multiple actions to complete. Creating them is a key to catching interface errors early in the design process.