Design Philosophy

App Screen Anatomy of Terminal Commerce Applications


Welcome to the design guidelines for Verifone Terminal Commerce applications. In this section, we'll explore the anatomy of a terminal app. We'll cover what makes up an app screen and how they're put together.

Terminal Commerce apps can have many types of screens, the most common screens are these four:

 


In general, app screens are made up of five sections:




The background
This is normally a light, neutral gray color that lives under the rest of the screen elements.

When building your app, you can change the background color or even have a background image. Make sure that your new background doesn’t conflict with or distract from the foreground elements.

The branding bar
This is normally a dark gray on all screens other than alert screens. On alert screens the branding bar is the same color as the alert type.

When making your app, you can change the branding bar to any color you need. On alert screens, you cannot change the color of the branding bar.

The page header
This is used on most screens to tell the user where they are and what to do.

The content area
This is the main part of the screen. This is where the content is displayed. Content is always displayed on a card in the content area. Content in this area should start at the same point under the page header on each screen and grow downwards as needed. The content area can also have bottoms on it if the screen requires that type of interaction.


Note: only the alert screens don't use cards to display content.

Typically, when building your app, you should always place your content on a card.

The bottom bar
This is where the main controls for the screen live. Users know to look here for actions that move them forward in a flow.
Screens can have 2 buttons, 1 button, or no buttons.

When building your app, the wording in a button is your choice, but make sure to clearly communicate what each button is for.

Alert screens are slightly different from normal content screens. They're made up of four basic elements:




The background
Alert screen backgrounds follow the same rules as all other screens.

The branding bar
On alert screens, the branding bar is the same color as the alert type. You can’t change the branding bar on an alert screen.

The content area
Only alert screens don’t use cards to display content. They are a combination of an alert icon and alert text with body text. Alert text is not always required. Content in the area should start at the same point under the branding bar on each screen and grow downwards as needed.

When making alert screens, you can replace the alert icon with your own icon, but make sure your icon is recognized as an alert.

The bottom bar
The same rules apply to the button bar on alert screens—alert screens should always have a time-out period and the option (button) for users to move past the alert sooner if they wish.

In a few situations, an alert screen should not have a timer or a skip-past option. For example, if you need to replace or reconnect a piece of hardware to the terminal, the alert should stay up until the terminal detects the issue is resolved.

The keypad screen is made up of three parts:



The background
Keypad screen backgrounds follow the same rules as all other
screens.

The branding bar
This follows the same rules as all other content screens.

The input area
This will display a hint or example text until the user starts entering in text from the keypad. The input area will display any text entered by the user.

When using a keypad screen in your app, you can specify what the hint or example text will be.

The keypad area.
This is where the user interacts with the screen in order to type. The user can also cancel and submit from the keypad.

When building your app, you can select what type of keypad you want.