Templates

In this section, we collect a series of the most common UI templates that we have created for VALINA applications in which we have participated. Its value is, in addition to the structure of the UI evolved from the standard components included in the “Components” post, that we collect successive screens of a specific interaction.

This section is subject to continuous iteration with new templates from UI examples used for VALINA new designs that we will be involved.

Start screen

To start the transaction or interaction with the application, VALINA terminal will display this screen with a title and a description to start the operation. It is recommended to apply a button on this screen as an indicator for the user to touch the screen to start the process.

Tutorial

Tutorial is a dialog, it will appear in order to describe what the transaction consists on. There can be more than one screen, but the start button must always appear. In case of more than one screen, navigation between them should be considered.

This screen contains a logo, a title, text, and a button that the user must tap to begin with the transaction.

Pin pad screen

The terminal can ask the users to enter the PIN of their card. Once the PIN has been introduced, a processing message will appear. If the PIN is valid, an authentication message will appear.

In some languages it can be difficult to abbreviate the operative button with text. Because of that, we present two different ways of represent it: buttons with text and buttons with icons.

Operative text buttons

Operative icon buttons

Select product

These screens are a guide to help and inform the user through the start of their purchase.

A first dialog screen will appear to mark the start of the action. Secondly, the user will have to make the decision of cancelling or continuing the transaction.

A screen informing about the abortion will appear if the user decides to cancel the operation. They will be asked then to confirm or cancel the abortion.

Catalog

A catalog will appear after the user has confirmed to continue with the initial transaction. They will be able to check all products available, as well as the products’ details.

Catalog view I

This catalog can be used when it is of interest to display different products from the same brand or category.
The three screens below show different examples of how the cards can be combined within the screen. They can be displayed in pairs and in groups of three of four. The size of one of the cards can be modified to make it stand out.

Catalog view II

This catalog is presented as an idea of a general home that can include a carrousel of the products by itself or combined with another carrousel for the coupons.
As seen below, the components present a large appearance as they have been adapted to the size of the Valina terminal.

Product details

This screen contains details of a specific product. The size of the image can be modified if necessary in order to include a longer text.

Cart

The user will have access to a shopping cart screen in which the products they’ve selected will be listed. They’ll be able to modify the quantity of the products or to remove them, as well as proceeding to the payment.

Finish

Once the user has resumed the purchase, a confirmation dialog will appear. The user will have to give feedback on the transaction. After that, another dialog will ask the user to end the operation or to cancel it.