Documentation
UI guidelines
Interface

Interface

Most of the time, Ledger device apps have few functionalities. However, despite this simplicity, it is still challenging to build a user-friendly interface, because of the few inputs (only 2 buttons) and the screen size (128*32 pixels). The following guidelines will give a good basis to ensure user-friendliness.

👉

See the BAGL Toolkit for more information on the BOLOS Application Graphics Library technical details.

Guidelines

Welcome screen

The Device icon must be displayed on the first welcome screen.

Information display

  1. It is a good practice to inform the user of what kind of information is currently displayed, by giving it a title. There should not be a colon after the title.
  2. To avoid having to much text on the same screen, use successive screens that can be switched back and forth using the left and right button.
  3. The send flow should be: Amount → Destination → Fees (if applicable) → Memo (if applicable)

Graphical pointers

The user can perform four principal actions by pressing 1 button or 2 buttons simultaneously:

  • Make a binary choice to answer a question asked by the device (1 button)
  • Browse through the entries of a menu (1 button)
  • Select a menu entry (2 buttons)
  • Proceed with a disclaimer (2 buttons)

The graphical pointers (glyphs) indicates which action can be performed on a screen.

Binary choice

To propose a binary choice to the user, 2 glyphs representing the 2 choices should be placed on each side of the screen:

  • a cross symbol to cancel
  • a validation symbol to accept You can display a question and relevant information in between the glyphs, like in the upper example.

Browse

To browse through a menu, the same technique is applied with different glyphs. We recommend using horizontal menus only with left and right arrows for navigation.

It's preferable for a menu (Dashboard or Settings) to be a carrousel, so the user can go back easily at the beginning when they've reached the last item. This is not applicable to signing transactions, as the user should not be able to reach by mistake the validating screen without having checked the address entirely.

Select and proceed

Once positioned on the right menu entry, the user can select the entry by pressing both buttons. This action is not represented by glyphs. Same goes when going through a set of disclaimer screens: only text is displayed, and the user goes to the next part by pressing both buttons.

This is a consistent behaviour across the device, so you can assume that users are used to it.

"About" and "Settings" sections

The sections "About" and "Settings" must only be created if they contain more than one screen. If you have only one screen to display, include it in the Dashboard flow.

In the "Settings" section, follow this flow: Blind signing (if applicable) → Debug data (if applicable) → Nonce (if applicable) → Back

Design Warranty

The design of your app must be free from any encumbrances and must not infringe upon any third party intellectual property right, in particular trademark and design rights. You grant Ledger the right to use such design for free with the right to reproduce and exploit the design for the duration of its display on Ledger website.

You represent and warrant that the app you are making available on Ledger Live is in compliance with all relevant laws and regulations.

You agree to hold Ledger harmless of any claim arising out of the use of the design and or distribution of your app .

Ledger
Copyright © Ledger SAS. All rights reserved. Ledger, Ledger Nano S, Ledger Vault, Bolos are registered trademarks of Ledger SAS