# UI Apps: UX / UI Only

**UI Apps** are applications that focus primarily on **user interface and user experience**, with little or no built‑in business process logic.\
In this pattern, ONEWEB is used mainly to **design and render user interfaces**, while backend processes or integrations may be handled by external systems or other platforms.

UI design patterns are not limited to UI‑only applications.\
They can also be applied to the **user interface layer of any ONEWEB application**, including Process Apps, Interface Apps, and Complex Apps.

The following UI design patterns help improve **clarity, usability, and efficiency** when designing forms and screens.

***

#### Design Pattern 1: Structured Format

Use this pattern when:

* Data must follow a **predefined structure**
* Input formats need to be **controlled or validated**
* Large input forms should be split into **smaller, logical sections**
* The **order of input fields** is important

This pattern helps reduce user errors and improves data quality by guiding users through a structured input flow.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FKDfu3JkDHgjDSaw8AINq%2F0?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 2: Morphing Controls

Use this pattern when:

* Certain UI controls are **not always required**
* Controls should appear **only when relevant**
* The screen needs to stay **clean and uncluttered**

Morphing controls dynamically reveal or hide elements based on user interaction, helping users focus only on what matters at each step.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FD9ztbxlQi6g1R5LXmfti%2F1?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 3: Inline Editor

Use this pattern when:

* Users need to **edit content in place**
* Editing should not require **navigation to a separate screen**
* Fast, lightweight updates are preferred

Inline editors improve efficiency by allowing users to modify values directly where they are displayed, often triggered by hover or click actions.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FVJfDcIp4JKjU12taG25C%2F2?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 4: Good Defaults

Use this pattern when:

* Fields can be **pre‑filled with common or expected values**
* Users frequently choose the same options
* You want to **reduce repetitive input**

Examples include newsletter sign‑ups or accepting standard terms and agreements.

{% hint style="info" %}
**Note:** Do not use default values for fields that are **critical or sensitive**, where incorrect input could cause issues.
{% endhint %}

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjJqH8GgB2rW0AhusLDQS%2F3?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 5: Module Tabs

Use this pattern when:

* Content can be **logically separated into sections**
* A single screen should support multiple views
* Users need quick access to related information without page reloads

Each tab represents an independent section while sharing the same content area.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FE0tyq9xwa9i2mIY0EdY0%2F4?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 6: Categorization

Use this pattern when:

* Content must be **grouped logically**
* Information follows a **hierarchical structure**
* Users need to navigate between categories or sub‑categories

Categorization helps users understand context and prevents unrelated content from overlapping.

{% hint style="info" %}
**Note:** Categories help clearly separate sections and reduce cognitive overload.
{% endhint %}

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FYxaJLOAyCqtddF1Azila%2F5?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 7: Progressive Disclosure

Use this pattern when:

* Only **essential information** should be shown initially
* Advanced or rarely used options can be hidden
* You want to maintain **focus and reduce confusion**

Progressive disclosure reveals complexity gradually as users need it.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fy7NHf5CUFLraDEALxuLk%2F6?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 8: Adaptable View

Use this pattern when:

* The UI must adapt to **different devices or themes**
* Users have **different preferences or usage contexts**
* Layouts need to switch between multiple styles

Adaptable views improve usability across devices and user scenarios.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FXAJU8v7hWV8dRWKnJS5V%2F7?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Pattern 9: Pagination

Use this pattern when:

* Large datasets cannot be displayed on a single screen
* Data is ordered and can be viewed in segments
* Users need to navigate through data in manageable chunks

{% hint style="info" %}
**Note:** Avoid pagination when users cannot pause or when continuous visibility of data is required.
{% endhint %}

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FdoBJe5P34H7L0Tzt8BtP%2F8?alt=media" alt=""><figcaption></figcaption></figure>

***

#### Design Guidance

As part of **App Design Fundamentals**:

* Combine multiple UI patterns where appropriate
* Prioritize clarity and simplicity over visual complexity
* Choose patterns based on **user tasks**, not just aesthetics

UI Apps often serve as the **first interaction point** for users, making thoughtful UI design a critical success factor.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/oneweb-platform-th/building-apps/app-design-fundamentals/choose-your-oneweb-design-patterns/ui-apps-ux-ui-only.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
