Design Guide

Last updated last month

A description of the thoughts behind the Settle user interface. This guide intends to help you design your Settle app.

Screen Layout and Target Devices

Settle aims to satisfy the needs of professional traders. The Settle interface is designed to be particularly useful in full screen mode, on one or more large screens of a multi screen setup. Settle must remain usable on smaller screens (e.g. laptops), but minor experience drawdowns are in order on such setups. Settle is currently not designed to be used on mobile devices. The wealth of information that the platform has to display is not well suited for small screens. Later, parts of the Settle app behavior (e.g. the helper mode) could easily be ported to a functionally reduced mobile experience.

Image: A particularly beautiful multi screen setup (via Falcon Trading Systems)

The 3 Pane Model

Settle offers a simplified windowing model that gives apps three different canvases to draw to:

  • work mode

  • helper mode

  • alert mode

The user can freely move apps between these three modes and apps should provide adequate functionality in each mode. Apps are allowed to be in only one mode at a time.

Designing your app for the three modes, you should not aim to deliver the full feature set of the app in each mode, but rather to satisfy user needs in a nuanced way:

  • Work mode offers the largest canvas and is the spot where the user will focus most of his attention. In work mode, an app should offer its full feature set. A trading interface in work mode would typically consist of a chart, the order book, the order form(s), the list of past trades etc.

  • Helper mode is supposed to be used in a way complementary to work mode, e.g. a user might want to keep an eye on his portfolio in helper mode while trading in work mode, or he might want to keep a reduced trading interface open in helper mode to fire quick trades while communicating with his clients in work mode.

  • Alert mode should provide the user with timely “corner of the eye” info, e.g. alerts on important price movements, or on completed trades could go there.

The three modes are not the only way for apps to win the user’s attention. There are two other possible modes:

  • When an app doesn’t have a visible window in either of the 3 modes, it can still display a callout on its app tile in the left side navigation. Such a callout essentially says “there’s something important happening here”. It’s the app’s responsibility to provide the user with an explanation of the callout once he opens the app. E.g. a mail app that displays a callout of “3” would be expected to display 3 new mails in the mail list, once opened.

  • There is a special “chat” helper mode for apps that is currently only accessible to developers that work in close cooperation with the Settle team.

Windows and Popups

Settle allows the use of modal popups, mostly for critical alerts and crucial inputs that require the user’s full attention. Modals are blocking for the app that fires them, or, for the entire interface, if they concern multiple apps at once (e.g. app A asks for access to data in app B). Before using a popup, you should ask yourself whether the corresponding action is important enough to block the user’s other tasks. E.g. on a complex trading interface in work mode, blocking the user’s access to the wealth of info displayed just to fire a trade would make little sense - the trading form should be displayed in line. On the other hand, in a portfolio app, the form to manage imported addresses and exchanges COULD be modal, because the data in the portfolio isn’t all that useful while import sources are being modified. An operation like “Do you want to delete your entire portfolio history?” must under any circumstance be modal, because we do want to alert the user to the importance of his decision.

Design Goals

Settle aims to provide professional users with an efficient interface for everyday use. We do not want to dazzle or entertain our users, or constantly ask for their attention to sell them the latest and greatest. We want to help them get things done, our profit lies in the actual use of the platform, use that leads to transactional revenue. One of the most important things you can do as an app developer to support this overall goal of the platform and make your app fit in nicely is to not invent interface elements and interface behaviors if there are already well established elements and behaviors for what you intend to achieve. Like that, the user doesn’t have to learn new behaviors for each new app that he is exploring. Make your app shine through the utility it provides, not through its fancy behavior.

A Word About Scaling the Interface

One of the biggest challenges most Settle app developers will encounter is how to display a large amount of data on the limited screen real estate that is available to them. There are many ways to approach this, here are a few ideas:

  • One of the first solutions should be to separate the data into groups that are meaningful for individual tasks, and to come up with an architecture to keep these groups in separate subscreens, e.g. in separate tabs. Just to make an example: the holdings in a portfolio app and the individual trades can be in separate tabs, because they constitute two different ways to look at a portfolio that don’t have to happen at the same time. Similarly, the “wallet” functionality and the trading functionality of an exchange interface can be separated into two subscreen types.

  • Another way to scale an interface is to work with expandable areas. E.g. the holdings table of a portfolio app can offer an expandable drawer for each position that provides additional details, e.g. the most recent trades, or the distribution of coins across exchanges and addresses. As an extension to expandable areas, marginally relevant data can be stashed away in tooltip-like interface elements, e.g behind a (?) icon.

  • Scrolling areas are an option to scale data locally, e.g. the deeper depths of an order book in an exchange interface can be made available by turning those areas into scrolling boxes. Even the entire content of your app can be made scrollable vertically if that is appropriate (e.g. if your entire app consists of just one large table). Never should you however offer scroll in scroll, an app that scrolls, but that also contains boxes that scroll internally.

Lastly, never forget that even the professional users on Settle can only process so much information, so always keep an open eye for the possibility of reducing and/or summarizing the information that you display. Make the user’s life easier by understanding his needs providing him with only the data relevant to his tasks.

What to do Next?

Check out the Settle UI Description to learn about the individual interface elements and behaviors that already exist. Like the platform, our design guide and UI description are work in progress. Please take these words and the suggested interface elements as a basis for the development of your own approach. It is helpful for the user if he does not have to re-learn the interface for every new app he installs. At the same time, if you have ideas on how to make things even simpler or more appealing, feel free to go your own way when designing your app’s interface.