User Interface Modelling

This section helps authors with the task of using RIDDL to design the user interface for a system. RIDDL provides two kinds of definitions for this: Epics, and Application

Both Epics and Applications are composed of more granular things but at this point it is important to understand how they are combined to define the user interface. Epics allow you to specify the interaction between the user (human or otherwise) and the system being modeled in RIDDL. Applications represent the physical or virtual machinery that the user can manipulate to achieve some objective with the system. The diagram below shows how Epics and Applications inter-relate.

graph TB;
    User( fas:fa-user-tie 
 User);
    UI( fas:fa-tablet-alt 
 Application);
    System( fas:fa-microchip 
 System);

    UI--sends messages to-->System;
    System--responds with messages to-->UI;
    User--interacts with-->UI;
    UI--displays results to-->User;    

To clarify the concepts introduced in this section, a relatively simple example from an e-commerce shopping cart will be constructed as you work through the material. This example roughly translates to the following user journey:

1. User selects items from a display of products
2. Selected items are placed in the user’s shopping cart
3. The shopping cart contents is displayed
4. The user drops an item from the shopping cart
5. The user orders the contents of the shopping cart
6. The user enters payment details and shipping address
7. The system confirms the order information.

In the following pages, we will show how to write this sequence of interactions using RIDDL epics and applications.