> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/design-system/taxonomy/ux-taxonomy.md).

# UX Taxonomy

## Overview

![Elentra JS UX Taxonomy](https://2206938072-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGVi1RzHCYM8uQFzOVx%2F-LmoE6RuMCAqDRGp5OL9%2F-LmoFjowG5duA2SKqe5x%2FTaxonomyGraphicBig-UX.jpg?alt=media\&token=33c0e91d-e380-4f1a-9bcd-30ebebc06b61)

The layers that comprise the **User Experience Taxonomy** all pertain to the intangible, "big picture" portion of the taxonomy. This includes things like design patterns and ways that components may be combined, as well as the rationales that determine how, why, and when the building blocks from the [**User Interface Taxonomy**](/ejs/design-system/taxonomy/ui-taxonomy.md) should be utilized to create more positive experiences for users.

## 4. Patterns

A **Pattern** consists of two or more **Components**, combined together to achieve a certain UX goal. 

{% hint style="info" %}
**Example:** A common **Pattern** is the simultaneous use of date picker and time picker **Components** side by side, for the express purpose of selecting a single, specific point in time.
{% endhint %}

## 5. Layouts

**Layouts** are structured groupings of **Elements**, **Components**, and **Patterns**, that may take up either a part or the whole of a screen.

{% hint style="info" %}
**Example:** An example of a **Layout** would be a Settings dashboard on a user's profile. The Settings page **Layout** might contain some informative text (an **Element**), as well as a form (a **Pattern** consisting of multiple **Component** inputs).
{% endhint %}

## 6. Modules

**Modules** are complete, visually coherent and interactive designs, that may include more than one **Layout**. **Modules** are often intended to fulfill a specific user experience requirement and encompass all related functionality for that specific need. They are often comprised of a diverse mix of things from the other lower layers of the taxonomy.

{% hint style="info" %}
 **Example:** A great example of a **Module** is Elentra's Lottery functionality**.** Everything pertaining to the Lottery feature is contained together as a **Module**, and the Admin and Learner side views are all constructed using the EJS **Styles**, **Elements**, **Components**, **Patterns**, and **Layouts**.
{% endhint %}

## 7. Experiences

**Experiences** are one tier higher in the hierarchy than **Modules**, and are typically a collection or suite of Modules and Layouts that work together in service of a common, big-picture UX goal.

A strong example of an Experience in Elentra JS would be, of course, the Clinical Experience section of Elentra ME, which includes several Modules including Lotteries, the Rotation Scheduler, and others.