> For the complete documentation index, see [llms.txt](https://docs.claimr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.claimr.io/ux-requirements/pop-ups-ux-requirements.md).
# Pop-ups UX requirements
Pop-ups provide a way to deliver important information or enable focused interactions within your claimr campaigns.
## **General Requirements**
* **Purposeful use:** Use pop-ups sparingly and only when necessary to avoid disrupting the user flow.
* **Clear close option:** Provide a prominent and easily accessible close button.
* **Visual hierarchy:** Use headings, subheadings, and bullet points to organize content.
* **Mobile optimization:** Ensure pop-ups are responsive and adapt well to smaller screens.
* **Accessibility:** Design with accessibility in mind, including appropriate color contrast, keyboard navigation, and screen reader compatibility.
## **Login**
Example: Login pop-up
* **Clear purpose:** Explain why login is required and its benefits.
* **Multiple options:** Offer various login methods (e.g., email, social media).
* **Error handling:** Provide clear error messages and guidance.
## **Wallet connect**
Example: Wallet connect pop-up
* **Clear instructions:** Provide step-by-step instructions on how to connect a wallet.
* **Supported wallets:** Display a list of supported wallets and their logos.
* **Security information:** Assure users about the security of their wallet connection.
* **Error handling:** Provide clear error messages and troubleshooting tips if connection issues arise.
## **Platform login**
Example: Platforms login pop-up
* **Platform branding:** Incorporate the branding of the relevant platform for visual consistency.
* **Clear instructions:** Explain the login process and any required permissions.
* **Error handling:** Display clear error messages if login attempts fail.
## **Email login**
* **Clear input fields:** Provide well-labeled input fields for email and password.
* **Password recovery:** Include a "Forgot Password" link for users who need assistance.
* **Error handling:** Display clear error messages if login attempts fail.
## **Completed task**
Example: Completed task pop-up
* **Congratulatory message:** Celebrate the user's achievement.
* **Reward Display:** Clearly showcase the earned reward.
* **Call to Action (CTA):** Encourage further progress or exploration.
## **Challenge details**
Example: Challenge details pop-up
* **Challenge information:** Clearly present the challenge's objectives, rules, rewards, and any time constraints.
* **Progress tracking:** Include a progress bar or indicator to show the user's advancement towards the challenge goal.
* **CTA:** Include a "Participate" or similar button to prompt users to join the challenge.
## **Leaderboard**
* **Default view:** Displays the full leaderboard with all ranked users visible.
* **Collapsed leaderboard state:** Only the heading row and the top 9 ranked users are shown when the list is long. Include **View more** / **Hide** buttons to expand or collapse the list.
* **Leaderboard pop-up:** Design the button for flows when the leaderboard appears only after clicking it.
* **Collapse button in pop-up:** When opened in a modal, include an option to collapse or minimize the leaderboard view.
* **Pagination:** If the full list is too long to load at once, add pagination to allow users to browse through pages of results.
* **Clear rankings:** Present user rankings and relevant metrics clearly.
* **Visual hierarchy:** Use size, color, and placement to highlight top performers.
## **Action status notifications**
* **Concise message:** Provide a brief message about the action's status.
* **Visual cues:** Use colors, icons, or animations for visual feedback.
* **Additional information:** Include relevant details or instructions.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.claimr.io/ux-requirements/pop-ups-ux-requirements.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
