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:Consistent Styling
Use consistent styling across all screens for a cohesive user experience.Leverage platform-specific overrides strategically while maintaining visual consistency.
Logical Grouping
Group related inputs within logical sections or cards.Use Cards and Containers to organize content and create visual hierarchy.
Proper Validation
Implement proper validation to prevent errors and guide users.Use available validators: required, custom, and conditional validation.
Clear Feedback
Provide clear feedback on actions with success and error messages.Use UI actions to handle user interactions appropriately.
Component usage guidelines
Form elements best practices
Input Fields
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
- Label and placeholder text
- Validation rules (required, custom)
- Hide and disable expressions
- Platform-specific overrides
Selection Components
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
- Best for 2-4 exclusive options
- Use when all options need to be visible
- Use for multiple selections or single yes/no choices
- Configure CHANGE events for dynamic interactions
Action Components
Action Components
Buttons:
- Use descriptive labels that indicate the action
- Configure appropriate UI actions (Process Actions, Data Operations)
- Consider platform-specific button styles
- Clearly indicate accepted file types
- Provide appropriate feedback during upload process
- Consider platform limitations for mobile devices
Layout best practices
When to Use: Simple, sequential content flowConfiguration:
- 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
- Form layouts
- Content that flows in one direction
- Mobile-first designs
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)
Screen Configuration
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
- Zones with headers and footers are not supported
- Navigation features are more limited compared to web
Content Adaptation
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
Purpose: Control element visibility based on conditionsImplementation:
- Use JavaScript expressions that evaluate to true/false
- Reference process data store keys for dynamic evaluations
- Configure in Settings → Platform → Overrides → Expressions → Hide
- Show/hide fields based on user selections
- Display different content for different user roles
- Adapt interface based on process state
Conditional Styling
Available For: Text, Link, and Container elements1
Configuration
- Select a Text, Link, or Container element
- Navigate to the Styles tab
- Locate the Conditional Styling section
- Click the ➕ icon to add expressions and effects
- 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
Required Validator
Required Validator
Usage: Ensure essential fields are completed before form submissionApplication: Apply to critical form elements like name, email, or selection fields
Custom Validator
Custom Validator
Usage: Implement complex business logic validationBenefits: Flexible validation rules specific to your business requirementsConfiguration: Use JavaScript expressions for validation logic
Conditional Validation
Conditional Validation
Usage: Apply validation based on other field values or process stateExamples: Validate fields only when certain conditions are met
UI actions best practices
Event Configuration
Common Events:- CHANGE: Triggered when form element values change
- Use for updating dependent fields, triggering calculations, showing/hiding related content
- 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
Configure UI actions 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
Accessibility
Design Considerations:
- Use proper labels for form elements
- Ensure sufficient color contrast
- Test with assistive technologies
- Provide alternative text for images
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
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.