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 permanently until the user touch it.

This screen can contain a title with a description or a button 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 without an automatically display, navigation between 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 has to 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 icon buttons

Select product

These screens are a guide to help and inform the user through the start of their purchase. For example, the screens below allow the user to see the catalog to choose products.

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 action will appear if the user decides to cancel the operation.

Catalog

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

Catalog view I

This example of catalog screens 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 or/and groups of three or four. The size of one of the cards can be modified to make it stand out.

Product details

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

Cart

Users can add products to the shopping card using “ADD TO CART” button from the catalog or from the detail of each product as we see in this examples. At the top of the screen you can a shopping cart icon from where the user can access to a section with all products they have selected. In this section they will be able to modify the quantity of the products or to remove them, as well as proceeding to the payment.

Finish

Once the user touch “Proceed to payment” as we saw in the example above, a confirmation dialog will appear. After that, the user can give feedback about the transaction and the system automatically will return to the “Start screen”.