> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Designer best practices

> Best practices for creating effective user interfaces using FlowX.AI UI Designer, based on established design principles and platform capabilities.

## UI Designer best practices in FlowX.AI

When designing user interfaces with FlowX.AI UI Designer, following established best practices ensures consistent, usable, and effective user experiences.

## Design principles

Based on FlowX.AI documentation for creating user interfaces:

> [card] Consistent Styling
>
> **Use consistent styling across all screens** for a cohesive user experience.
>
> Use platform-specific overrides strategically while maintaining visual consistency.

> [card] Logical Grouping
>
> **Group related inputs within logical sections or cards**.
>
> Use Cards and Containers to organize content and create visual hierarchy.

> [card] Proper Validation
>
> **Implement proper validation** to prevent errors and guide users.
>
> Use available validators: required, custom, and conditional validation.

> [card] Clear Feedback
>
> **Provide clear feedback** on actions with success and error messages.
>
> Use event handlers to handle user interactions appropriately.

## Component usage guidelines

### Form elements best practices

> [accordion] Input Fields
>
> **Configuration**:
>
> * Use clear, descriptive labels
> * Implement appropriate validation (required, custom)
> * Configure hide/disable expressions for dynamic behavior
> * Add helper text for complex requirements
>
> **Available Properties**:
>
> * Label and placeholder text
> * Validation rules (required, custom)
> * Hide and disable expressions
> * Platform-specific overrides

> [accordion] Selection Components
>
> **Select Component**:
>
> * Use for dropdown menus and single selections
> * Configure options with proper labels and values
> * Implement CHANGE event handlers for dependent fields
> * Use disabled options feature for conditional availability
>
> **Radio Buttons**:
>
> * Best for 2-4 exclusive options
> * Use when all options need to be visible
>
> **Checkboxes**:
>
> * Use for multiple selections or single yes/no choices
> * Configure CHANGE events for dynamic interactions

> [accordion] Action Components
>
> **Buttons**:
>
> * Use descriptive labels that indicate the action
> * Configure appropriate event handlers (Process Actions, Data Operations)
> * Consider platform-specific button styles
>
> **File Upload**:
>
> * Clearly indicate accepted file types
> * Provide appropriate feedback during upload process
> * Consider platform limitations for mobile devices

### Layout best practices

> [tab] Linear Layout
>
> **When to Use**: Simple, sequential content flow
>
> **Configuration**:
>
> * **Direction**: Choose Horizontal for row layout, Vertical for column layout
> * **Justify**: Control main axis alignment (Start, Center, End, Space Between, etc.)
> * **Align**: Control cross axis alignment (Start, Center, End, Stretch)
> * **Gap**: Set appropriate spacing between elements
> * **Wrap**: Enable for responsive behavior when needed
>
> **Best For**:
>
> * Form layouts
> * Content that flows in one direction
> * Mobile-first designs

> [tab] Grid Layout
>
> **When to Use**: Complex, multi-dimensional layouts
>
> **Benefits**:
>
> * Better control over 2D layouts
> * Responsive design capabilities
> * Suitable for dashboard-style interfaces
>
> **Considerations**:
>
> * More complex to configure than linear layouts
> * Test across platforms for consistent behavior

## Platform-specific best practices

### Web Platform

**1. Navigation Design**

**Navigation Types**:

* Use **Single Page Form** for displaying all User Tasks on the same page
* Use **Wizard** navigation for step-by-step processes
* Configure actions properly for smooth navigation flow

**2. Zone Configuration**

**Web-Specific Features**:

* Utilize zones with headers and footers (web-only feature)
* Implement proper navigation hierarchy
* Use cards to guide users through content on single-page forms

**3. Layout Optimization**

**Screen Real Estate**:

* Take advantage of larger screen sizes
* Use appropriate justify and align settings for content distribution
* Consider horizontal layouts for better space utilization

### Mobile Platforms (iOS & Android)

> [accordion] Screen Configuration
>
> **Mobile-Specific Properties**:
>
> * Configure **Screen Title** for navigation bar display (Card component when used as root)
> * Set **Scrollable** property appropriately (iOS-specific)
> * Use platform overrides for shorter titles and mobile-optimized content
>
> **Limitations**:
>
> * Zones with headers and footers are not supported
> * Navigation features are more limited compared to web

> [accordion] Content Adaptation
>
> **Content Strategy**:
>
> * Use shorter titles and labels for mobile displays
> * Consider touch interaction patterns
> * Ensure content fits within mobile screen constraints
> * Test with realistic content lengths

## Dynamic behavior best practices

### Hide and Disable Expressions

> [tab] Hide Expressions
>
> **Purpose**: Control element visibility based on conditions
>
> **Implementation**:
>
> * Use JavaScript expressions that evaluate to true/false
> * Reference process data store keys for dynamic evaluations
> * Configure in Settings → Platform → Overrides → Expressions → Hide
>
> **Common Use Cases**:
>
> * Show/hide fields based on user selections
> * Display different content for different user roles
> * Adapt interface based on process state

> [tab] Disable Expressions
>
> **Purpose**: Make elements non-interactive while keeping them visible
>
> **Best Practice**: Ensure disabled fields have the same expression configured under hide expressions for consistency.
>
> **Usage**: Disable form fields based on validation state or user permissions

### Conditional Styling

**Available For**: Text, Link, and Container elements

**1. Configuration**

1. Select a **Text**, **Link**, or **Container** element
2. Navigate to the **Styles** tab
3. Locate the **Conditional Styling** section
4. Click the **➕** icon to add expressions and effects
5. Use the **JS Editor** to configure expressions

**2. Structure**

**Condition**: String expression evaluated similarly to hide/disable expressions
**Overrides**: Key-value map defining property-value pairs to apply

**3. Best Practices**

* Use real-time data evaluation for responsive UI updates
* Handle conflict resolution (latest condition takes precedence)
* Combine with data-driven expressions for adaptable designs

## Validation best practices

### Available Validators

> [accordion] Required Validator
>
> **Usage**: Ensure essential fields are completed before form submission
>
> **Application**: Apply to critical form elements like name, email, or selection fields

> [accordion] Custom Validator
>
> **Usage**: Implement complex business logic validation
>
> **Benefits**: Flexible validation rules specific to your business requirements
>
> **Configuration**: Use JavaScript expressions for validation logic

> [accordion] Conditional Validation
>
> **Usage**: Apply validation based on other field values or process state
>
> **Examples**: Validate fields only when certain conditions are met

## Event handlers best practices

### Event Configuration

**Common Events**:

* **CHANGE**: Triggered when form element values change
* Use for updating dependent fields, triggering calculations, showing/hiding related content

**Action Types**:

* **Process Actions**: Advance workflow based on user interactions
* **Data Operations**: Update form fields and process data
* **UI Updates**: Show/hide elements dynamically
* **External Calls**: Integrate with external systems

> [!TIP]
>
> Configure event handlers to provide immediate feedback and create responsive user experiences.

## Testing and quality assurance

### Platform Testing

**1. Multi-Platform Preview**

Use the UI Designer's platform switching to preview designs across Web, iOS, and Android platforms.

**2. Responsive Testing**

Test layouts with different content lengths and screen orientations.

**3. Expression Validation**

Test hide/disable expressions and conditional styling with various data scenarios.

**4. Navigation Flow**

Verify wizard navigation and single-page form behaviors work as expected.

### Content Considerations

> [card] [Accessibility](https://docs.flowx.ai/6.x/docs/platform-deep-dive/accessibility.md)
>
> **Design Considerations**:
>
> * Use proper labels for form elements
> * Ensure sufficient color contrast
> * Test with assistive technologies
> * Provide alternative text for images
>
> For details on WCAG 2.1 compliance, keyboard navigation, and screen reader support, see the [Accessibility guide](https://docs.flowx.ai/6.x/docs/platform-deep-dive/accessibility.md).

> [card] Responsive Design
>
> **Test Strategy**:
>
> * Verify layouts work on different screen sizes
> * Test navigation on both mobile and web
> * Ensure content remains readable across platforms
> * Check platform-specific overrides function correctly

## Common patterns and solutions

### Navigation areas management

**Copy Navigation Areas**: Use the copy/paste feature to replicate navigation hierarchies between platforms (within the same process definition and environment).

**Area Deletion**: When deleting navigation areas, remember that child areas are also removed, and user tasks are relocated to the User Tasks section.

### Theme and styling management

**Theme Overrides**:

* Customize component appearance to differ from theme settings
* Import/export theme overrides between platforms for consistency
* Use contextual menu options for efficient style management

**Style Copying**: Use copy/paste functionality for styles between compatible components and across platforms.

> [!NOTE]
>
> These best practices are based on actual FlowX.AI capabilities and documentation. Always refer to the latest documentation for the most current features and recommendations.


## Related topics

- [Navigation best practices](https://docs.flowx.ai/6.x/docs/building-blocks/process/navigation-best-practices.md)
- [UI Designer](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
- [Layout configuration](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/layout-configuration.md)
- [Buttons](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/buttons.md)
- [Platform-specific considerations](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/platform-considerations.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.