# Interactive components UX requirements

Interactive components, such as buttons and input fields, are essential elements for gathering user information and enabling interactions within your claimr campaigns. Designing user-friendly interactive components is crucial for ensuring a smooth and efficient user experience.

## **Log in / Log out buttons**

Facilitate user authentication and session management.

<div><figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F3MoJqJC2IhwQ8XmvbtY2%2FScreenshot%202024-11-25%20at%2001.35.01.png?alt=media&#x26;token=02838ff8-f660-4761-a972-5a59e08a0603" alt=""><figcaption><p>Example: Log in button</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F2rfoDvOD2sY5XZQlqKN6%2FScreenshot%202024-11-25%20at%2001.35.12.png?alt=media&#x26;token=bf5782c2-f13e-420c-9266-924b8ae665d6" alt=""><figcaption><p>Example: Log out button</p></figcaption></figure></div>

* **Clear Labels:** Use concise and descriptive labels like "Log In" and "Log Out".
* **Visual Distinction:** Differentiate the two buttons through color, styling, or placement.
* **Feedback:** Provide visual feedback upon interaction, such as a loading state or change in button appearance.
* **Accessibility:** Ensure buttons have clear focus states.

## **Action buttons**

Trigger specific actions within the campaign (e.g., "Submit," "Next," "Follow").

<div data-full-width="false"><figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FAZBbHohmrq1cey28fldC%2FScreenshot%202024-09-02%20at%2017.43.43.png?alt=media&#x26;token=e448efc1-ee6f-494c-90fb-854f24bc1375" alt="" width="563"><figcaption><p>Example: Active CTA</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2F70VHWMJlD8fbdxEwdEDz%2FScreenshot%202024-09-02%20at%2017.41.32.png?alt=media&#x26;token=bef7c7dc-5049-4fdf-889c-e45266356079" alt="" width="563"><figcaption><p>Example: Disabled CTA</p></figcaption></figure></div>

* **Clear labels:** Use action-oriented verbs that accurately describe the button's function.
* **Visual hierarchy:** Make action buttons prominent and visually distinct from other elements.
* **Disabled state:** Clearly indicate when a button is disabled (e.g., grayed out, with a tooltip explaining why).
* **Feedback:** Provide visual feedback upon interaction, such as a loading state or change in button appearance.

## **Checkbox**

Allow users to select or deselect options.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2Fc1ohpC074p28tXEK27Q9%2FScreenshot%202024-09-02%20at%2017.17.22.png?alt=media&#x26;token=e53581b7-f83f-47e4-ae6e-a08c5a39da9e" alt="" width="375"><figcaption><p>Example: checkbox </p></figcaption></figure>

* **Clear labels:** Provide concise labels adjacent to checkboxes, describing the corresponding options.
* **Visual states:** Clearly differentiate between checked, unchecked, and disabled states using distinct visual cues (e.g., checkmark, empty box, grayed-out box).
* **Hit area:** Make the clickable area surrounding the checkbox large enough for easy interaction.

## **Text input**

Enable users to enter textual information.

<figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FbJkcZBHYUxVYt5bKVocJ%2FScreenshot%202024-09-02%20at%2017.18.59.png?alt=media&#x26;token=95fc3287-e6d5-4735-827d-4e0dfc0d40ab" alt="" width="375"><figcaption><p>Example: Text input in different states</p></figcaption></figure>

* **Clear labels:** Provide descriptive labels above or adjacent to input fields.
* **Input field size:** Adjust the input field size appropriately based on the expected input length.
* **Placeholder text/hint:** Use placeholder text or hints to guide users on the expected input format or content.
* **Disabled state:** Clearly indicate when an input field is disabled (e.g., grayed out).
* **Error handling:** Provide clear error messages and guidance if input validation fails.

## **Upload image**

Allow users to upload image files.

<div><figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2Fzb8Ci92jPJU69b7knorJ%2FScreenshot%202024-09-02%20at%2017.33.08.png?alt=media&#x26;token=d3603e17-c668-4f7a-879b-f248989f992f" alt="" width="263"><figcaption><p>Example: Upload image</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FhXw3BZmWH0Xb5QDRRgUr%2FScreenshot%202024-09-02%20at%2017.33.17.png?alt=media&#x26;token=2c45d3e7-dfe6-4997-a93b-3fef0a0345b9" alt="" width="261"><figcaption><p>Example: Submit uploaded image</p></figcaption></figure> <figure><img src="https://2111509621-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBtEHhi1fQEriwxTxRejw%2Fuploads%2FLEjjsvuK5ztxzTHjjVUH%2FScreenshot%202024-09-02%20at%2017.33.26.png?alt=media&#x26;token=9571af5b-97c8-4553-bb1c-0476fa08148c" alt="" width="260"><figcaption><p>Examle: Verification state</p></figcaption></figure></div>

* **Clear CTA:** Use a clear button or label (e.g., "Upload Image") to initiate the upload process.
* **File selection:** Provide a standard file selection dialog for users to choose an image file.
* **Image preview:** Display a preview of the uploaded image before submission.
* **File validation:** Implement file type and size validation to prevent errors.
* **Error handling:** Provide clear error messages if file validation fails.
* **Accessibility:** Ensure the upload process is accessible to screen readers and keyboard users.
