Kuika's Stepper element presents step-by-step processes to the user in an organized manner. Users can access the content of the process by going through each step in sequence. It is ideal for multi-step forms, registration processes, or workflows.

The Stepper element is only supported in web applications.

Areas of Use

• Registration and Account Creation → Step-by-step information entry, verification, and preferences.
• Payment Process → Delivery address, payment information, order confirmation.
• Form Filling → Breaking long forms into small steps.
• Survey / Quiz → Structuring each step as a question.
• Workflows → Visualizing project phases or document approval processes.
• Reservations → Presenting hotel, doctor, or event registration steps in sequence.
• Learning Platforms → Progressing through lesson or course modules step by step.
• Placement / Application → Following steps in job and internship processes.

Use Case – Account Creation Process

In an application, user registration is created with a three-step Stepper:

1. General Info → The user enters basic information.
2. Payment Info → Adds payment details.
3. Activate Account → Activates the account.

When each step is completed, the user moves on to the next step. The active step is highlighted in blue, and completed steps are indicated with a check mark.

UI Design Module Operations

1. Go to the UI Design module.
2. Select the Stepper element from the Elements > Interactive category on the left side.
3. Drag and drop it onto the screen.
4. Arrange the steps:

• Step 1: General Info
• Step 2: Payment Info
• Step 3: Activate Account

5. Add specific content (form, information field, etc.) to each step.

Using Properties in the Scenario Context

• Stepper1
  
  • Description: The main area where step edits are made.
  • Usage: New steps can be added or existing steps can be renamed with +Add Stepper Item.
• Step Direction
  
  • Description: Determines the direction of the steps.
  • Options:
    
    • Horizontal → Horizontal view (e.g., registration steps)
    • Vertical → Vertical view (e.g., multi-step forms)
• Unfinished Step Color
  
  • Description: Determines the color of steps that have not yet been completed.
• Finished Step Color
  
  • Description: Defines the color of completed steps.
• Active Step Color
  
  • Description: Used to highlight the active step the user is currently on.

Actions

Transitioning between steps in the stepper element can be managed with Button actions.

Example: Button with Cyclic Stepper

1. Create 3 steps: Step1, Step2, Step3
2. Add a Button and set the button text to “Next Step”.
3. Add an action:
   
   • OnClick → UI Control → Set Value Of → Step1
   • Add the same action for Step2 and Step3.
4. The last step returns to Step1 → A circular transition is achieved.

When the Scenario is Complete

• The user follows the process step by step.
• The active step is highlighted, and completed steps are marked.
• If a cyclical structure is established, steps can be restarted continuously.
• The user can easily understand which stage they are at.

Limitations

• Stepper only works in web applications.
• If too many steps are added, the view may become complex.

Tips & Best Practices

Common mistake: Leaving all steps the same color → The user cannot select the active step.

• Choose the Step Direction based on the length of the process:
  
  • Vertical → Multi-step forms
  • Horizontal → Short processes
• Keep step titles short, descriptive, and on a single line.
• In long processes, use “Next” or “Back” buttons at the end of each step.